Skip to content

Commit

Permalink
Make hotspot image responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@torinfo
torinfo committed Jun 22, 2015
1 parent b40849e commit 038dfdd
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 31 deletions.
25 changes: 13 additions & 12 deletions modules/xerte/parent_templates/Nottingham/common_html5/js/xenith.js
View file
Expand Up @@ -1522,7 +1522,7 @@ function x_insertCSS(href) {
// ___ FUNCTIONS CALLED FROM PAGE MODELS ___

// function called from model pages to scale images - scale, firstScale & setH are optional
function x_scaleImg(img, maxW, maxH, scale, firstScale, setH) {
function x_scaleImg(img, maxW, maxH, scale, firstScale, setH, enlarge) {
var $img = $(img);
if (scale != false) {
var imgW = $img.width(),
Expand All @@ -1535,19 +1535,20 @@ function x_scaleImg(img, maxW, maxH, scale, firstScale, setH) {
imgH = $img.data("origSize")[1];
}

if (imgW > maxW || imgH > maxH || firstScale != true) {
if (imgW > maxW) {
var scale = maxW / imgW;
imgW = imgW * scale;
imgH = imgH * scale;
if (imgW > maxW || imgH > maxH || firstScale != true || enlarge == true) {
var scaleW = maxW / imgW;
var scaleH = maxH / imgH;
var scaleFactor;
if (enlarge == true && scaleW > 1 && scaleH > 1)
{
scaleFactor = Math.min(scaleW, scaleH);
}
if (imgH > maxH) {
var scale = maxH / imgH;
imgH = imgH * scale;
imgW = imgW * scale;
else
{
scaleFactor = Math.min(scaleW, scaleH);
}
imgW = Math.round(imgW);
imgH = Math.round(imgH);
imgW = Math.round(imgW * scaleFactor);
imgH = Math.round(imgH * scaleFactor);
$img.css("width", imgW + "px"); // set width only to constrain proportions

if (setH == true) {
Expand Down
34 changes: 20 additions & 14 deletions modules/xerte/parent_templates/Nottingham/models_html5/connectorHotspotImage.html
View file
Expand Up @@ -26,8 +26,7 @@
var $imageHolder,
$img,
$mainText;



// function called every time the page is viewed after it has initially loaded
this.pageChanged = function() {
$("#pageContents .selected").removeClass("selected");
Expand All @@ -39,15 +38,18 @@

// function called every time the size of the LO is changed
this.sizeChanged = function() {

var html = '<img id="image" />';
html += '<div id="feedback" class="alert" />';
$("#imageHolder").html(html);
connectorHotspotImage.init();
}


this.init = function() {
$imageHolder = $("#imageHolder");
$img = $("#image");
$mainText = $("#mainText");

// ignores most of the textWidth attributes (narrow/wide/max) - except "none"
if (x_currentPageXML.getAttribute("textWidth") == "none") {
$mainText.remove();
Expand Down Expand Up @@ -102,25 +104,29 @@


this.imgLoaded = function() {
var imgMaxW = 500, imgMaxH = 476;
var holderWidth = $x_mainHolder.width(),
holderHeight = $x_mainHolder.height();
//var imgMaxW = 500, imgMaxH = 476;
var imgMaxW = Math.round(holderWidth * (500.0/800.0)),
imgMaxH = Math.round(holderHeight * (576.0/600.0) - 100);
if (x_browserInfo.mobile == true) {
imgMaxW = 250; // mobile
imgMaxH = 250;
} else {
if (x_currentPageXML.getAttribute("textWidth") == "none") {
imgMaxW = 760;
imgMaxH = 450;
imgMaxW = Math.round(holderWidth * (780.0/800.0));
imgMaxH = Math.round(holderHeight * (576.0/600.0) - 100);
} else if (x_currentPageXML.getAttribute("textWidth") == "narrow") {
imgMaxW = 600;
imgMaxH = 450;
imgMaxW = Math.round(holderWidth * (600.0/800.0));
imgMaxH = Math.round(holderHeight * (550.0/600.0) - 100);
} else if (x_currentPageXML.getAttribute("textWidth") == "max") {
imgMaxW = 400;
imgMaxH = 450;
imgMaxW = Math.round(holderWidth * (400.0/800.0));
imgMaxH = Math.round(holderHeight * (550.0/600.0) - 100);
}
}

x_scaleImg($img, imgMaxW, imgMaxH, true, true);
x_scaleImg($img, imgMaxW, imgMaxH, true, true, false, true);

$img.css({
"opacity" :1,
"filter" :'alpha(opacity=100)'
Expand Down Expand Up @@ -177,7 +183,7 @@
// open dialog popup
if (this.getAttribute("hotspotMovie") != undefined && this.getAttribute("hotspotMovie") != "") {
hsType = "dialog";
hsInfo = "video";
hsInfo = "video";Math.round(docWidth * (500.0/800.0))
} else if (this.getAttribute("hotspotSound") != undefined && this.getAttribute("hotspotSound") != "") {
hsType = "dialog";
hsInfo = "sound";
Expand Down
23 changes: 18 additions & 5 deletions modules/xerte/parent_templates/Nottingham/models_html5/hotspotImage.html
View file
Expand Up @@ -35,15 +35,24 @@

// function called every time the size of the LO is changed
this.sizeChanged = function() {

var html = '<img id="image" />';
html += '<div id="hsHolder"></div>';
html += '<div id="btns">';
html += ' <button id="prevHS"></button>';
html += ' <button id="nextHS"></button>';
html += '</div>';
$("#imageHolder").html(html);
hotspotImage.init();
}

this.init = function() {
$imageHolder = $("#imageHolder");
$img = $("#image");
padding = parseInt($imageHolder.css("padding-left"));

if (x_currentPageXML.getAttribute("align") == "Left") {

debugger;

if (x_currentPageXML.getAttribute("align") == "Left") {
$("#pageContents").prepend($("#textContents"));
$imageHolder.css("right", "10px");
}
Expand All @@ -55,13 +64,17 @@
"filter" :'alpha(opacity=0)'
})
.one("load", function() {
var imgMaxW = 400, imgMaxH = 450;
var holderWidth = $x_mainHolder.width(),
holderHeight = $x_mainHolder.height();
//var imgMaxW = 400, imgMaxH = 450;
var imgMaxW = Math.round(holderWidth * (400.0/800.0)),
imgMaxH = Math.round(holderHeight * (550.0/600.0) - 100);
if (x_browserInfo.mobile == true) {
imgMaxW = 250; // mobile
imgMaxH = 250;
}

x_scaleImg(this, imgMaxW, imgMaxH, true, true);
x_scaleImg(this, imgMaxW, imgMaxH, true, true, false, true);

$(this).css({ // stops flicker on 1st load of image
"opacity" :1,
Expand Down

0 comments on commit 038dfdd

Please sign in to comment.