Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
HTML5 - tidied up code in several pages and added movieSize attribute
git-svn-id: https://xerteonlinetoolkits.googlecode.com/svn/trunk@820 912cdd6b-5c7d-d5a7-a2ba-d0f0cdb91641
  • Loading branch information
FayCross committed Apr 22, 2013
1 parent 67a4d2f commit 8ddb63e
Show file tree
Hide file tree
Showing 6 changed files with 238 additions and 181 deletions.
71 changes: 37 additions & 34 deletions modules/xerte/parent_templates/Nottingham/models_html5/accNav.html
Expand Up @@ -14,39 +14,13 @@
$("#infoHolder")
.height($x_pageHolder.height() - parseInt($x_pageDiv.css("padding-top")) * 2 - 1)
.accordion("resize");
} else {
// ** need to look at this - possibly change the way mobile pages are laid out so that the css is easier to do **
//$x_pageDiv.height($x_mobileScroll.height() - $x_headerBlock.height() - $x_footerBlock.height() - (parseInt($x_pageDiv.css("padding-top")) * 2) - 1);
}

var $pageContents = $("#pageContents");
$pageContents.data("count", $pageContents.data("count") + 1);
accNav.scaleImages();
}

// function scales image on visible panel - have to do them individually after panel change as I can't get dimensions of images on hidden panels
this.scaleImages = function() {
var $pageContents = $("#pageContents");
// is there an image on current panel? Has it loaded? Has it already been scaled to fit this?
if ($("#infoHolder .paneImg img:visible").length > 0 && $("#infoHolder .paneImg img:visible")[0].complete == true && $pageContents.data("count") != $("#infoHolder .paneImg img:visible").data("count")) {
var $img = $("#infoHolder .paneImg img:visible");
var $infoHolder = $("#infoHolder");

var firstScale = false;
if ($img.data("count") == undefined) {
firstScale = true;
}
$img.data("count", $pageContents.data("count"));

var num = 0;
$("#infoHolder .paneHeader").each(function() {
num += $(this).height() + 4;
});

x_scaleImg($img, $infoHolder.width(), $infoHolder.height() - num, true, firstScale);
}
}

this.init = function() {
$("#pageContents").data("count", 0);
var panelWidth = x_currentPageXML.getAttribute("panelWidth");
Expand All @@ -64,9 +38,9 @@
}
}

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

$(x_currentPageXML).children()
.each(function(i) {
Expand All @@ -80,8 +54,8 @@
}
$thisHeader.find("a").html(this.getAttribute("name"));

var infoString = x_addLineBreaks('<p>' + this.getAttribute("text") + '</p>');
var url = this.getAttribute("url");
var infoString = x_addLineBreaks('<p>' + this.getAttribute("text") + '</p>'),
url = this.getAttribute("url");
if (url != undefined && url != "") {
var newString = "";
if (url.split('.').pop().slice(0, -1) == "swf") {
Expand All @@ -104,10 +78,16 @@
}
$thisContents.html(infoString);

var size = [300,300];
if (this.getAttribute("movieSize") != "" && this.getAttribute("movieSize") != undefined) {
var dimensions = this.getAttribute("movieSize").split(",");
if (Number(dimensions[0]) != 0 && Number(dimensions[1]) != 0) {
size = [Number(dimensions[0]), Number(dimensions[1])];
}
}

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", "", "", "");
swfobject.embedSWF(eval(url), "pageSWF" + i, size[0], size[1], "9.0.0", x_templateLocation + "common_html5/expressInstall.swf", "", "", "");
$("#pageSWF" + i).attr("title", this.getAttribute("tip"));
}
});
Expand All @@ -133,6 +113,29 @@

x_pageLoaded();
}

// function scales image on visible panel - have to do them individually after panel change as I can't get dimensions of images on hidden panels
this.scaleImages = function() {
var $pageContents = $("#pageContents");
// is there an image on current panel? Has it loaded? Has it already been scaled to fit this?
if ($("#infoHolder .paneImg img:visible").length > 0 && $("#infoHolder .paneImg img:visible")[0].complete == true && $pageContents.data("count") != $("#infoHolder .paneImg img:visible").data("count")) {
var $img = $("#infoHolder .paneImg img:visible"),
$infoHolder = $("#infoHolder"),
firstScale = false;

if ($img.data("count") == undefined) {
firstScale = true;
}
$img.data("count", $pageContents.data("count"));

var num = 0;
$("#infoHolder .paneHeader").each(function() {
num += $(this).height() + 4;
});

x_scaleImg($img, $infoHolder.width(), $infoHolder.height() - num, true, firstScale);
}
}
}

accNav.init();
Expand Down
@@ -1,7 +1,5 @@
<script type="text/javascript">

// ** accessibility - need to be able to navigate buttons with tab rather than arrows **

// pageChanged & sizeChanged functions are needed in every model file
// other functions for model should also be in here to avoid conflicts
var buttonNav = new function() {
Expand All @@ -13,8 +11,9 @@
// function called every time the size of the LO is changed
this.sizeChanged = function() {
if (x_browserInfo.mobile == false) {
var $panel = $("#pageContents .panel");
var $btnHolder = $("#btnHolder")
var $panel = $("#pageContents .panel"),
$btnHolder = $("#btnHolder");

$panel.height($x_pageHolder.height() - parseInt($x_pageDiv.css("padding-top")) * 2 - parseInt($panel.css("padding-top")) * 2 - 5);
$("#infoHolder").height($panel.height() - $btnHolder.height() - parseInt($btnHolder.css("margin-top")));
}
Expand All @@ -24,24 +23,6 @@
buttonNav.scaleImages();
}

// function scales image on visible panel - have to do them individually after panel change as I can't get dimensions of images on hidden panels
this.scaleImages = function() {
var $pageContents = $("#pageContents");
// is there an image currently visible? Has it loaded? Has it already been scaled to fit this?
if ($("#infoHolder .pageImg img:visible").length > 0 && $("#infoHolder .pageImg img:visible")[0].complete == true && $pageContents.data("count") != $("#infoHolder .pageImg img:visible").data("count")) {
var $img = $("#infoHolder .pageImg img:visible");
var $infoHolder = $("#infoHolder");

var firstScale = false;
if ($img.data("count") == undefined) {
firstScale = true;
}
$img.data("count", $pageContents.data("count"));

x_scaleImg($img, $infoHolder.width(), $infoHolder.height(), true, firstScale);
}
}

this.init = function() {
$("#pageContents").data("count", 0);

Expand All @@ -61,10 +42,11 @@
}
}

var $panelBtn = $("#btnHolder .panelBtn:first");
var $panelBtnLabel = $("#btnHolder .panelBtnLabel:first");
var $panelPage = $("#pageContents .panelPage");
var $btnHolder = $("#btnHolder");
var $panelBtn = $("#btnHolder .panelBtn:first"),
$panelBtnLabel = $("#btnHolder .panelBtnLabel:first"),
$panelPage = $("#pageContents .panelPage"),
$btnHolder = $("#btnHolder");

$(x_currentPageXML).children()
.each(function(i) {
var $thisBtn, $thisBtnLabel, $thisPanelPage;
Expand Down Expand Up @@ -93,10 +75,20 @@

$thisBtnLabel
.html(this.getAttribute("name"))
.attr("for", "btn" + i);
.attr({
"tabindex" :i + 3,
"for" :"btn" + i
})
.keypress(function(e) { // so you can tab through buttons rather than having to use arrows which is jQuery default
var charCode = e.charCode || e.keyCode;
if (charCode == 32 || charCode == 13) {
$thisBtn.trigger("click");
}
});

var infoString = x_addLineBreaks('<p>' + this.getAttribute("text") + '</p>'),
url = this.getAttribute("url");

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") {
Expand All @@ -120,12 +112,19 @@

$thisPanelPage
.html(infoString)
.attr("tabindex", 2)
.hide();

var size = [300,300];
if (this.getAttribute("movieSize") != "" && this.getAttribute("movieSize") != undefined) {
var dimensions = this.getAttribute("movieSize").split(",");
if (Number(dimensions[0]) != 0 && Number(dimensions[1]) != 0) {
size = [Number(dimensions[0]), Number(dimensions[1])];
}
}

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", "", "", "");
swfobject.embedSWF(eval(url), "pageSWF" + i, size[0], size[1], "9.0.0", x_templateLocation + "common_html5/expressInstall.swf", "", "", "");
$("#pageSWF" + i).attr("title", this.getAttribute("tip"));
}
});
Expand All @@ -143,6 +142,24 @@

x_pageLoaded();
}

// function scales image on visible panel - have to do them individually after panel change as I can't get dimensions of images on hidden panels
this.scaleImages = function() {
var $pageContents = $("#pageContents");
// is there an image currently visible? Has it loaded? Has it already been scaled to fit this?
if ($("#infoHolder .pageImg img:visible").length > 0 && $("#infoHolder .pageImg img:visible")[0].complete == true && $pageContents.data("count") != $("#infoHolder .pageImg img:visible").data("count")) {
var $img = $("#infoHolder .pageImg img:visible"),
$infoHolder = $("#infoHolder"),
firstScale = false;

if ($img.data("count") == undefined) {
firstScale = true;
}
$img.data("count", $pageContents.data("count"));

x_scaleImg($img, $infoHolder.width(), $infoHolder.height(), true, firstScale);
}
}
}

buttonNav.init();
Expand Down
Expand Up @@ -17,17 +17,6 @@
})
}

// function manually scales images - can't use max values in css as it doesn't work on every browser
this.scaleImages = function($img) {
var firstScale = false;
if ($img.data("loaded") == undefined) {
firstScale = true;
$img.data("loaded", true);
}

x_scaleImg($img, $img.parents(".column").width(), $x_pageHolder.height() - (parseInt($x_pageDiv.css("padding-top")) * 2), true, firstScale);
}

this.init = function() {
if (x_currentPageXML.getAttribute("header") != undefined && x_currentPageXML.getAttribute("header") != "") {
$("#textHolder").html(x_addLineBreaks(x_currentPageXML.getAttribute("header")));
Expand All @@ -45,8 +34,8 @@
$thisColumn = $column;
}

var infoString = x_addLineBreaks('<p>' + this.getAttribute("text") + '</p>');
var url = this.getAttribute("url");
var infoString = x_addLineBreaks('<p>' + this.getAttribute("text") + '</p>'),
url = this.getAttribute("url");
if (url != undefined && url != "") {
var newString = "";
if (url.split('.').pop().slice(0, -1) == "swf") {
Expand All @@ -67,19 +56,26 @@

$thisColumn.html(infoString);

var size = [300,300];
if (this.getAttribute("movieSize") != "" && this.getAttribute("movieSize") != undefined) {
var dimensions = this.getAttribute("movieSize").split(",");
if (Number(dimensions[0]) != 0 && Number(dimensions[1]) != 0) {
size = [Number(dimensions[0]), Number(dimensions[1])];
}
}

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", "", "", "");
swfobject.embedSWF(eval(url), "pageSWF" + i, size[0], size[1], "9.0.0", x_templateLocation + "common_html5/expressInstall.swf", "", "", "");
$("#pageSWF" + i).attr("title", this.getAttribute("tip"));
}
});

if (x_browserInfo.mobile == false) {
var numColumns = $(x_currentPageXML).children().length;
var spacerWidth = (numColumns - 1) * 2; // 2% gap between columns
var columnWidth = Math.floor((100 - spacerWidth) / numColumns);
var edgeWidth = Math.floor((100 - spacerWidth - (columnWidth * numColumns)) / 2);
var numColumns = $(x_currentPageXML).children().length,
spacerWidth = (numColumns - 1) * 2, // 2% gap between columns
columnWidth = Math.floor((100 - spacerWidth) / numColumns),
edgeWidth = Math.floor((100 - spacerWidth - (columnWidth * numColumns)) / 2);

$("#columnHolder .column")
.addClass("x_floatLeft")
.css({
Expand All @@ -99,6 +95,17 @@

x_pageLoaded();
}

// function manually scales images - can't use max values in css as it doesn't work on every browser
this.scaleImages = function($img) {
var firstScale = false;
if ($img.data("loaded") == undefined) {
firstScale = true;
$img.data("loaded", true);
}

x_scaleImg($img, $img.parents(".column").width(), $x_pageHolder.height() - (parseInt($x_pageDiv.css("padding-top")) * 2), true, firstScale);
}
}

columnPage.init();
Expand Down

0 comments on commit 8ddb63e

Please sign in to comment.