Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
HTML5:
- new stylesheet with styles you can use to easily change look of LOs
- added link to mediaViewer.html if media/transcript added to LO
- fixed accessibility bug in mcq page
- changed what happens in customHotspots page if canvas tag not supported
- fixed iframe size bug in wiki page

git-svn-id: https://xerteonlinetoolkits.googlecode.com/svn/trunk@830 912cdd6b-5c7d-d5a7-a2ba-d0f0cdb91641
  • Loading branch information
FayCross committed Apr 24, 2013
1 parent d2f8210 commit 92fb2cc
Show file tree
Hide file tree
Showing 7 changed files with 648 additions and 760 deletions.
@@ -1,16 +1,15 @@
/* MAIN CSS DOCUMENT */
/* don't change styles that start with x_ in page models as they will change interface css */
/* styles we recommend changing to rebrand your version of Xerte Online Toolkits are in themeStyles.css */
/* changing other styles in this file may cause problems in functionality */

body {
font-family: Arial, sans-serif;
margin: 0px;
}

#x_mainHolder {
width: 800px;
height: 600px;
position: absolute;
border: 1px solid #010101;
z-index: -3;
}

Expand All @@ -19,33 +18,12 @@ body {
height: auto;
position: absolute;
top: 0px;
color: #FFFFFF;
background: #434343; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#010101", endColorstr="#434343"); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#010101), to(#434343)); /* for webkit browsers */
background: -moz-linear-gradient(top, #010101, #434343); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#010101, #434343); /* for Opera */
}

#x_headerBlock div, #x_pageDiv {
padding: 10px;
}

h1 {
font-size: 1em;
margin: 0px;
}

h2 {
font-size: 1.2em;
margin: 5px 0px 0px;
}

h3 {
font-size: 1em;
margin: 0px;
}

#x_pageHolder {
width: 100%;
overflow: auto;
Expand Down Expand Up @@ -76,22 +54,13 @@ h3 {
width: 100%;
position: absolute;
bottom: 0px;
font-size: 1em;
color: #FFFFFF;
background: #434343; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#434343", endColorstr="#010101"); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#434343), to(#010101)); /* for webkit browsers */
background: -moz-linear-gradient(top, #434343, #010101); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#434343, #010101); /* for Opera */
z-index: 10;
}

#x_footerBg {
position: absolute;
width: 100%;
height: 100%;
background-image: url("../dots.png");
background-repeat: repeat-x;
z-index: -1;
}

Expand Down Expand Up @@ -143,7 +112,6 @@ h3 {
vertical-align: top;
text-align: center;
display: inline-block;
background: black;
padding: 10px 5px 0px;
margin-right: -5px;
height: 30px;
Expand All @@ -168,56 +136,6 @@ h3 {
width: 43px;
}

.ui-button .ui-icon.x_help { background-image: url("../help.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_help { background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_help { background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_help { background-position: -84px 0px; }

.ui-button .ui-icon.x_info { background-image: url("../info.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_info { background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_info { background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_info { background-position: -84px 0px; }

.ui-button .ui-icon.x_home { background-image: url("../home.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_home { background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_home { background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_home { background-position: -84px 0px; }

.ui-button .ui-icon.x_glossary { background-image: url("../glossary.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_glossary { background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_glossary { background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_glossary {background-position: -84px 0px; }

.ui-button .ui-icon.x_maximise { background-image: url("../maximise.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_maximise { background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_maximise { background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_maximise {background-position: -84px 0px; }

.ui-button .ui-icon.x_minimise { background-image: url("../minimise.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_minimise { background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_minimise { background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_minimise {background-position: -84px 0px; }

.ui-button .ui-icon.x_media { background-image: url("../media.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_media { background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_media { background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_media { background-position: -84px 0px; }

.ui-button .ui-icon.x_next { background-image: url("../next.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_next { background-position: -44px 0px; }
.ui-button.ui-state-focus .ui-icon.x_next { background-position: -44px 0px; }
.ui-button.ui-state-active .ui-icon.x_next { background-position: -88px 0px; }

.ui-button .ui-icon.x_prev { background-image: url("../previous.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_prev { background-position: -44px 0px; }
.ui-button.ui-state-focus .ui-icon.x_prev { background-position: -44px 0px; }
.ui-button.ui-state-active .ui-icon.x_prev { background-position: -88px 0px; }

.ui-button .ui-icon.x_prev_hist { background-image: url("../previous_hist.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_prev_hist { background-position: -44px 0px; }
.ui-button.ui-state-focus .ui-icon.x_prev_hist { background-position: -44px 0px; }
.ui-button.ui-state-active .ui-icon.x_prev_hist { background-position: -88px 0px; }

.spinner { background-image: url("../spinner.gif"); width: 32px; height: 32px; }

#x_footerBlock .ui-button-icon-only .ui-icon, #x_footerBlock .ui-button-text-icon-primary .ui-icon, #x_footerBlock .ui-button-text-icon-secondary .ui-icon, #x_footerBlock .ui-button-text-icons .ui-icon, #x_footerBlock .ui-button-icons-only .ui-icon {
Expand Down Expand Up @@ -287,6 +205,7 @@ a.x_glossary:link, a.x_glossary:visited, a.x_glossary:hover, a.x_glossary:active


/* STYLES FOR PAGE MODEL CONTENTS */
/* don't change styles that start with x_ in page models as they will change interface css */

.leftAlign {
text-align: left;
Expand Down
@@ -0,0 +1,105 @@
/* change this file to rebrand your version of Xerte Online Toolkits */

body {
font-family: Arial, sans-serif;
}

#x_mainHolder {
border: 1px solid #010101;
}

#x_headerBlock {
color: #FFFFFF;
background: #434343; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#010101", endColorstr="#434343"); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#010101), to(#434343)); /* for webkit browsers */
background: -moz-linear-gradient(top, #010101, #434343); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#010101, #434343); /* for Opera */
}

#x_footerBlock {
font-size: 1em;
color: #FFFFFF;
background: #434343; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#434343", endColorstr="#010101"); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#434343), to(#010101)); /* for webkit browsers */
background: -moz-linear-gradient(top, #434343, #010101); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#434343, #010101); /* for Opera */
}

#x_footerBg {
background-image: url("../dots.png");
background-repeat: repeat-x;
}

#x_pageNo {
background: black;
}

h1 {
font-size: 1em;
margin: 0px;
}

h2 {
font-size: 1.2em;
margin: 5px 0px 0px;
}

h3 {
font-size: 1em;
margin: 0px;
}

/* see pngs in modules/xerte/parent_templates/Nottingham/common_html5 to see how replacement images for buttons should be made (with 4 states in one image file) */
/* the easiest way is to keep button dimensions the same (42 x 40px) so background-positions below don't need adjusting */

.ui-button .ui-icon.x_help { background-image: url("../help.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_help { background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_help { background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_help { background-position: -84px 0px; }

.ui-button .ui-icon.x_info { background-image: url("../info.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_info { background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_info { background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_info { background-position: -84px 0px; }

.ui-button .ui-icon.x_home { background-image: url("../home.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_home { background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_home { background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_home { background-position: -84px 0px; }

.ui-button .ui-icon.x_glossary { background-image: url("../glossary.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_glossary { background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_glossary { background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_glossary {background-position: -84px 0px; }

.ui-button .ui-icon.x_maximise { background-image: url("../maximise.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_maximise { background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_maximise { background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_maximise {background-position: -84px 0px; }

.ui-button .ui-icon.x_minimise { background-image: url("../minimise.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_minimise { background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_minimise { background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_minimise {background-position: -84px 0px; }

.ui-button .ui-icon.x_media { background-image: url("../media.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_media { background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_media { background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_media { background-position: -84px 0px; }

.ui-button .ui-icon.x_next { background-image: url("../next.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_next { background-position: -44px 0px; }
.ui-button.ui-state-focus .ui-icon.x_next { background-position: -44px 0px; }
.ui-button.ui-state-active .ui-icon.x_next { background-position: -88px 0px; }

.ui-button .ui-icon.x_prev { background-image: url("../previous.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_prev { background-position: -44px 0px; }
.ui-button.ui-state-focus .ui-icon.x_prev { background-position: -44px 0px; }
.ui-button.ui-state-active .ui-icon.x_prev { background-position: -88px 0px; }

.ui-button .ui-icon.x_prev_hist { background-image: url("../previous_hist.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_prev_hist { background-position: -44px 0px; }
.ui-button.ui-state-focus .ui-icon.x_prev_hist { background-position: -44px 0px; }
.ui-button.ui-state-active .ui-icon.x_prev_hist { background-position: -88px 0px; }
49 changes: 22 additions & 27 deletions modules/xerte/parent_templates/Nottingham/common_html5/js/xenith.js
@@ -1,23 +1,22 @@
// all elements, variables and functions for interface are called "x_id" - do not make new id's prefixed with "x_" in page models
var x_languageData = [];
var x_params = new Object(); // all attributes of learningObject that aren't undefined
var x_pages; // xml info about all pages in this LO
var x_pageInfo = []; // holds info about pages (type, built, linkID, pageID, savedData) - use savedData if any input from page needs to be saved for use on other pages
var x_currentPage = -1;
var x_currentPageXML;
var x_glossary = [];
var x_specialChars = [];
var x_inputFocus = false;
var x_dialogInfo = []; // (type, built)
var x_browserInfo = {iOS:false, touchScreen:false, mobile:false, orientation:"portrait"}; // holds info about browser/device
var x_pageHistory = []; // keeps track of pages visited for historic navigation

var x_firstLoad = true;
var x_fillWindow = false;
var x_volume = 1;
var x_audioBarH = 30;
var x_mediaText = [];
var x_timer; // use as reference to any timers in page models - they are cancelled on page change
var x_languageData = [],
x_params = new Object(), // all attributes of learningObject that aren't undefined
x_pages, // xml info about all pages in this LO
x_pageInfo = [], // holds info about pages (type, built, linkID, pageID, savedData) - use savedData if any input from page needs to be saved for use on other pages
x_currentPage = -1,
x_currentPageXML,
x_glossary = [],
x_specialChars = [],
x_inputFocus = false,
x_dialogInfo = [], // (type, built)
x_browserInfo = {iOS:false, touchScreen:false, mobile:false, orientation:"portrait"}, // holds info about browser/device
x_pageHistory = [], // keeps track of pages visited for historic navigation
x_firstLoad = true,
x_fillWindow = false,
x_volume = 1,
x_audioBarH = 30,
x_mediaText = [],
x_timer; // use as reference to any timers in page models - they are cancelled on page change

var $x_window, $x_body, $x_head, $x_mainHolder, $x_mobileScroll, $x_headerBlock, $x_pageHolder, $x_pageDiv, $x_footerBlock, $x_footerL, $x_menuBtn, $x_prevBtn, $x_pageNo, $x_nextBtn, $x_background, $x_glossaryHover;

Expand Down Expand Up @@ -407,11 +406,7 @@ function x_setUp() {
.removeClass("ui-state-focus")
.removeClass("ui-state-hover");

var mediaFile = x_params.media;
var mediaTranscript = x_params.mediaTranscript;
var mediaImage = x_params.mediaImage;
// ** TO DO - ADD MEDIA/TRANSCRIPT PLAYER **
alert("open media window " + mediaFile + " " + mediaTranscript + " " + mediaImage);
window.open("mediaViewer/media.htm?media=../" + eval(x_params.media) + ",transcript=../" + eval(x_params.mediaTranscript) + ",img=../" + eval(x_params.mediaImage));
});
}

Expand Down Expand Up @@ -539,7 +534,7 @@ function x_setUp() {
x_updateCss(true);
});

// ** swipe to change page on touch screen devices - taken out as caused problems with drag and drop activities - need to be able to disable it for these activities **
// ** swipe to change page on touch screen devices - taken out as caused problems with drag and drop activities - need to be able to disable it for these activities
if (x_browserInfo.touchScreen == true) {
/*
var numTouches = 0;
Expand Down Expand Up @@ -642,7 +637,7 @@ function x_changePage(x_gotoPage) {
}

if ($x_pageDiv.children().length > 0) {
// ** TO DO - this causes problems where swfs fill the whole page and the page size changes - I can't work out why **
// ** TO DO - this causes problems where swfs fill the whole page and the page size changes - I can't work out why
// stop any swfs on old page before detaching it so that any audio stops playing
/*if ($x_pageDiv.find("object").length > 0) {
var $obj = $x_pageDiv.find("object");
Expand Down Expand Up @@ -876,7 +871,7 @@ function x_updateCss(updatePage) {
$("audio,video").each(function() {
var $this = $(this);
if ($this.is(":hidden")) { // flash
// ** TO FIX ** - need to pause audio but mediaElement errors "this.pluginApi.pauseMedia is not a function"
// ** TO FIX - need to pause audio but mediaElement errors "this.pluginApi.pauseMedia is not a function"
//$this.parents(".mejs-inner").find(".mejs-pause button").trigger("click");
}
});
Expand Down

0 comments on commit 92fb2cc

Please sign in to comment.