Skip to content

Commit

Permalink
HTML5:
Browse files Browse the repository at this point in the history 
- delicious/rss/youtube/youtuberss: language data now comes from xwd/main lang files
- new phrases added to engine_en-GB.xml for pages that load data
- delicious/rss: added h3 tags
- added init function to several page model files

git-svn-id: https://xerteonlinetoolkits.googlecode.com/svn/trunk@556 912cdd6b-5c7d-d5a7-a2ba-d0f0cdb91641
  • Loading branch information
@FayCross
FayCross committed Nov 27, 2012
1 parent b8656ac commit 41bf591
Show file tree
Hide file tree
Showing 17 changed files with 896 additions and 818 deletions.
5 changes: 5 additions & 0 deletions languages/engine_en-GB.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,5 +121,10 @@
<targetArea name="Target Area" description="Drop zone for" toSelect="Press space to drop the selected item."/>
<draggableItem name="Draggable Item" selected="Item Selected" toSelect="Press space to select" deSelected="No item selected." />
</interactions>

<fetchResults label="Fetching results..."/>
<errorResults label="There was an error loading the results"/>
<loadError label="Error loading"/>
<noResults label="No results returned"/>

</language>
158 changes: 81 additions & 77 deletions modules/xerte/parent_templates/Nottingham/models_html5/accNav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,94 +19,98 @@
//$x_pageDiv.height($x_mobileScroll.height() - $x_headerBlock.height() - $x_footerBlock.height() - (parseInt($x_pageDiv.css("padding-top")) * 2) - 1);
}
}
}

var panelWidth = x_currentPageXML.getAttribute("panelWidth");
if (panelWidth == "Full") {
$("#pageContents .right div:first").appendTo($("#pageContents"));
$("#pageContents .splitScreen").remove();
} else {
$("#textHolder").html(x_addLineBreaks(x_currentPageXML.getAttribute("text")));
if (panelWidth == "Small") {
$("#pageContents .splitScreen").addClass("large"); // make text area on left large so accordion on right is small
} else if (panelWidth == "Large") {
$("#pageContents .splitScreen").addClass("small");
} else {
$("#pageContents .splitScreen").addClass("medium");
}
}

var $infoHolder = $("#infoHolder");
var $paneHeader = $("#infoHolder .paneHeader");
var $paneContents = $("#infoHolder .paneContents");

$(x_currentPageXML).children()
.each(function(i) {
var $thisHeader, $thisContents;
if (i != 0) {
$thisHeader = $paneHeader.clone().appendTo($infoHolder);
$thisContents = $paneContents.clone().appendTo($infoHolder);

this.init = function() {
var panelWidth = x_currentPageXML.getAttribute("panelWidth");
if (panelWidth == "Full") {
$("#pageContents .right div:first").appendTo($("#pageContents"));
$("#pageContents .splitScreen").remove();
} else {
$thisHeader = $paneHeader;
$thisContents = $paneContents;
$("#textHolder").html(x_addLineBreaks(x_currentPageXML.getAttribute("text")));
if (panelWidth == "Small") {
$("#pageContents .splitScreen").addClass("large"); // make text area on left large so accordion on right is small
} else if (panelWidth == "Large") {
$("#pageContents .splitScreen").addClass("small");
} else {
$("#pageContents .splitScreen").addClass("medium");
}
}
$thisHeader.find("a").html(this.getAttribute("name"));

var infoString = x_addLineBreaks('<p>' + this.getAttribute("text") + '</p>');
var url = this.getAttribute("url");
if (url != undefined && url != "") {
var newString = "";
if (url.split('.').pop().slice(0, -1) == "swf") {
newString += '<div class="centerAlign"><div id="pageSWF' + i + '"><h3></h3><p><a href="http://www.adobe.com/go/getflashplayer"><img class="flashImg" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"/></a></p></div></div>';
} else {
newString += '<div class="paneImg"><img src="' + eval(url) + '" ';
if (this.getAttribute("tip") != undefined && this.getAttribute("tip") != "") {
newString += 'alt="' + this.getAttribute("tip") + '" ';
var $infoHolder = $("#infoHolder");
var $paneHeader = $("#infoHolder .paneHeader");
var $paneContents = $("#infoHolder .paneContents");

$(x_currentPageXML).children()
.each(function(i) {
var $thisHeader, $thisContents;
if (i != 0) {
$thisHeader = $paneHeader.clone().appendTo($infoHolder);
$thisContents = $paneContents.clone().appendTo($infoHolder);
} else {
$thisHeader = $paneHeader;
$thisContents = $paneContents;
}
newString += ' /></div>';
}
if (this.getAttribute("align") == "Top") {
infoString += newString;
} else {
infoString = newString + infoString;
$thisHeader.find("a").html(this.getAttribute("name"));

var infoString = x_addLineBreaks('<p>' + this.getAttribute("text") + '</p>');
var url = this.getAttribute("url");
if (url != undefined && url != "") {
var newString = "";
if (url.split('.').pop().slice(0, -1) == "swf") {
newString += '<div class="centerAlign"><div id="pageSWF' + i + '"><h3></h3><p><a href="http://www.adobe.com/go/getflashplayer"><img class="flashImg" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"/></a></p></div></div>';
} else {
newString += '<div class="paneImg"><img src="' + eval(url) + '" ';
if (this.getAttribute("tip") != undefined && this.getAttribute("tip") != "") {
newString += 'alt="' + this.getAttribute("tip") + '" ';
}
newString += ' /></div>';
}
if (this.getAttribute("align") == "Top") {
infoString += newString;
} else {
infoString = newString + infoString;
}
}
$thisContents.html(infoString);

if (url != undefined && url != "" && url.split('.').pop().slice(0, -1) == "swf") {
// ** need to add field into wizard so you can enter swf dimensions rather than use 100% **
// ** need to add functionality for initObject and interactivity optional properties **
swfobject.embedSWF(eval(url), "pageSWF" + i, "300", "300", "9.0.0", x_templateLocation + "common_html5/expressInstall.swf", "", "", "");
$("#pageSWF" + i + " h3").html(x_getLangInfo(x_languageData.find("errorFlash")[0], "label", "You need to install the Flash Player to view this content."));
$(".flashImg").attr("alt", x_getLangInfo(x_languageData.find("errorFlash")[0], "description", "Get the Flash Player"));
$("#pageSWF" + i).attr("title", this.getAttribute("tip"));
}
});

$infoHolder.accordion({
fillSpace: true,
change: function(e, ui) {
// force tabindex to stay the same - jquery ui accordion code overrides this otherwise
ui.oldHeader.attr("tabindex", (ui.oldHeader.index() / 2) + 1);
ui.newHeader.attr("tabindex", (ui.newHeader.index() / 2) + 1);
}
});

// default accordion uses arrow keys to focus on headers but all other navigators use tab - force tab index on headers so it's consistent with other pages
$(".ui-accordion-header").each(function(i) {
$(this).attr("tabindex", ($(this).index() / 2) + 1);
})

if (x_browserInfo.iOS == true) {
// ** images won't show on iOS because their size stays at 0 x 0 with max-width / max-height **
// ** need a work around for this - have tried refreshing image / refreshing sizes etc. and they still don't work **
}
$thisContents.html(infoString);

if (url != undefined && url != "" && url.split('.').pop().slice(0, -1) == "swf") {
// ** need to add field into wizard so you can enter swf dimensions rather than use 100% **
// ** need to add functionality for initObject and interactivity optional properties **
swfobject.embedSWF(eval(url), "pageSWF" + i, "300", "300", "9.0.0", x_templateLocation + "common_html5/expressInstall.swf", "", "", "");
$("#pageSWF" + i + " h3").html(x_getLangInfo(x_languageData.find("errorFlash")[0], "label", "You need to install the Flash Player to view this content."));
$(".flashImg").attr("alt", x_getLangInfo(x_languageData.find("errorFlash")[0], "description", "Get the Flash Player"));
$("#pageSWF" + i).attr("title", this.getAttribute("tip"));
if (x_currentPage != 0) {
accNav.sizeChanged();
}
});

$infoHolder.accordion({
fillSpace: true,
change: function(e, ui) {
// force tabindex to stay the same - jquery ui accordion code overrides this otherwise
ui.oldHeader.attr("tabindex", (ui.oldHeader.index() / 2) + 1);
ui.newHeader.attr("tabindex", (ui.newHeader.index() / 2) + 1);

x_pageLoaded();
}
});

// default accordion uses arrow keys to focus on headers but all other navigators use tab - force tab index on headers so it's consistent with other pages
$(".ui-accordion-header").each(function(i) {
$(this).attr("tabindex", ($(this).index() / 2) + 1);
})

if (x_browserInfo.iOS == true) {
// ** images won't show on iOS because their size stays at 0 x 0 with max-width / max-height **
// ** need a work around for this - have tried refreshing image / refreshing sizes etc. and they still don't work **
}

if (x_currentPage != 0) {
accNav.sizeChanged();
}

x_pageLoaded();
accNav.init();

</script>

Expand Down
68 changes: 40 additions & 28 deletions modules/xerte/parent_templates/Nottingham/models_html5/annotatedDiagram.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
<script type="text/javascript">

// ** DOESN'T WORK ON MOBILES **
// ** why isn't the layout for this done with splitScreen css? **

// pageChanged & sizeChanged functions are needed in every model file
// other functions for model should also be in here to avoid conflicts
var annotatedDiagram = new function() {
var scale,
$textContents,
$hsHolder,
$imageHolder,
$img,
$canvas,
$pageContents,
padding;

// function called every time the page is viewed after it has initially loaded
this.pageChanged = function() {

Expand Down Expand Up @@ -44,7 +52,7 @@
$hsHolder
.width($imageHolder.width())
.height($imageHolder.height());
var scale = $img.width() / $img.data("origSize")[0];
scale = $img.width() / $img.data("origSize")[0];

var highlightColour = "yellow";
if (x_currentPageXML.getAttribute("colour") != undefined && x_currentPageXML.getAttribute("colour") != "") {
Expand Down Expand Up @@ -117,10 +125,10 @@
$hsHolder.append($hsGroup);
$(this).children()
.each(function(){
var $hs = annotatedDiagram.createHotspot(this, $hsGroup, $thisItem, scale, groupXML);
var $hs = annotatedDiagram.createHotspot(this, $hsGroup, $thisItem, groupXML);
});
} else {
annotatedDiagram.createHotspot(this, $hsHolder, $thisItem, scale);
annotatedDiagram.createHotspot(this, $hsHolder, $thisItem);
}
});

Expand All @@ -137,7 +145,7 @@
x_pageLoaded();
}

this.createHotspot = function(hsXML, $parent, $listItem, scale, groupXML) {
this.createHotspot = function(hsXML, $parent, $listItem, groupXML) {
var $hotspot = $('<a class="hotspot" href="#" />');
var hsName = hsXML.getAttribute("name");
if (groupXML != undefined) { // hs in a group
Expand Down Expand Up @@ -177,37 +185,41 @@
}
context.stroke();
}

this.init = function() {
$pageContents = $("#pageContents");
$imageHolder = $("#imageHolder");
$img = $imageHolder.find("img");
$canvas = $("#canvas");
$hsHolder = $("#hsHolder");
$textContents = $("#textContents");

if (x_currentPageXML.getAttribute("align") != "Right") {
$imageHolder.css("right", $x_pageDiv.css("padding-right"));
$hsHolder.css("right", $x_pageDiv.css("padding-right"));
}
$textContents.find("#mainText").html(x_addLineBreaks(x_currentPageXML.getAttribute("text")));

padding = parseInt($imageHolder.css("padding-left"));
$hsHolder.css("margin", padding);
$img.attr({
"src" :eval(x_currentPageXML.getAttribute("url")),
"alt" :x_currentPageXML.getAttribute("tip")
});

if (x_currentPage != 0) {
annotatedDiagram.sizeChanged();
}
}
}

var $pageContents = $("#pageContents");
var $imageHolder = $("#imageHolder");
var $img = $imageHolder.find("img");
var $canvas = $("#canvas");
var $hsHolder = $("#hsHolder");
var $textContents = $("#textContents");

if (x_currentPageXML.getAttribute("align") != "Right") {
$imageHolder.css("right", $x_pageDiv.css("padding-right"));
$hsHolder.css("right", $x_pageDiv.css("padding-right"));
}
$textContents.find("#mainText").html(x_addLineBreaks(x_currentPageXML.getAttribute("text")));

var imgMaxW = 400, imgMaxH = 450;
if (x_browserInfo.mobile == true) {
imgMaxW = 250; // mobile
imgMaxH = 250;
}

var padding = parseInt($imageHolder.css("padding-left"));
$hsHolder.css("margin", padding);
$img.attr({
"src" :eval(x_currentPageXML.getAttribute("url")),
"alt" :x_currentPageXML.getAttribute("tip")
});

if (x_currentPage != 0) {
annotatedDiagram.sizeChanged();
}
annotatedDiagram.init();

</script>

Expand Down
Loading

0 comments on commit 41bf591

Please sign in to comment.