digilib-old: client/digitallibrary/jquery/jquery.digilib.js comparison

comparison client/digitallibrary/jquery/jquery.digilib.js @ 886:cb23fe100d7e jquery

make getFullscreenImgSize more robust. put button width in settings.

author	robcast
date	Wed, 06 Apr 2011 10:11:03 +0200
parents	b2ec8244b86e
children	65ad22044e13

comparison

equal deleted inserted replaced

-:07926f0b9a1a
+:cb23fe100d7e
 // defaults for digilib buttons
 'buttonSettings' : {
 'fullscreen' : {
 // path to button images (must end with a slash)
 'imagePath' : 'img/fullscreen/',
+'buttonSetWidth' : 36,
 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","help","reset","toggleoptions"],
 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","lessoptions"],
 'arrowSet' : ["up", "down", "left", "right"],
 'buttonSets' : ['standardSet', 'specialSet']
 },
 'embedded' : {
 'imagePath' : 'img/embedded/16/',
+'buttonSetWidth' : 18,
 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","help","reset","toggleoptions"],
 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","scale","lessoptions"],
 'arrowSet' : ["up", "down", "left", "right"],
 'buttonSets' : ['standardSet', 'specialSet']
 },
 var url = getDigilibUrl(data);
 var history = window.history;
 if (typeof history.pushState === 'function') {
 console.debug("faking reload to "+url);
 // change url without reloading (stateObj, title, url)
+// TODO: we really need to put the state in stateObj and listen to pop-events
+// TODO: use replace-state(?)
 history.pushState({}, '', url);
 // change img src
 var imgurl = getScalerUrl(data);
 data.$img.attr('src', imgurl);
 highlightButtons(data);
 $(data).trigger('update');
 };
 // returns maximum size for scaler img in fullscreen mode
 var getFullscreenImgSize = function (data) {
+var mode = data.settings.interactionMode;
 var $win = $(window);
 var winH = $win.height();
 var winW = $win.width();
 var $body = $('body');
-// include standard body margins
+// include standard body margins and check plausibility
 var borderW = $body.outerWidth(true) - $body.width();
+if (borderW === 0 || borderW > 100) {
+console.debug("fixing border width for getFullscreenImgSize!");
+borderW = data.settings.scalerInset;
+}
 var borderH = $body.outerHeight(true) - $body.height();
-// get width of first button div
+if (borderH === 0 || borderH > 100) {
+console.debug("fixing border height for getFullscreenImgSize!");
+borderH = 5;
+}
 var buttonsW = 0;
-if (data.$buttonSets) {
+if (data.settings.visibleButtonSets) {
-buttonsW = data.$buttonSets[0].outerWidth();
+// get button width from settings
+buttonsW = data.settings.buttonSettings[mode].buttonSetWidth;
+// TODO: leave space for all button sets?
 }
 // account for left/right border, body margins and additional requirements
-var calcW = winW - borderW - buttonsW - data.settings.scalerInset;
+var imgW = winW - borderW - buttonsW;
-var calcH = winH - borderH;
+var imgH = winH - borderH;
-console.debug(winW, winH, 'winW:', $win.width(), 'border:', borderW, 'buttonsW:', buttonsW, 'calc:', calcW);
+console.debug(winW, winH, 'winW:', $win.width(), 'border:', borderW, 'buttonsW:', buttonsW, 'calc:', imgW);
-return geom.size(calcW, calcH);
+return geom.size(imgW, imgH);
 };
 // creates HTML structure for digilib in elem
 var setupScalerDiv = function (data) {
 var settings = data.settings;
 rect : geom.rectangle(r.x, r.y + r.height - aw, r.width, aw),
 show : canMove(data, 0, 1)
 }, {
 name : 'left',
 rect : geom.rectangle(r.x, r.y, aw, r.height),
-show : canMove(data, -1, 0),
+show : canMove(data, -1, 0)
 }, {
 name : 'right',
 rect : geom.rectangle(r.x + r.width - aw, r.y, aw, r.height),
 show : canMove(data, 1, 0)
 }];
 // creates HTML structure for the about view in elem
 var setupAboutDiv = function (data) {
 var $elem = data.$elem;
 var settings = data.settings;
 var $aboutDiv = $('<div class="about" style="display:none"/>');
-var $header = $('<p>Digilib Graphic Viewer</p>');
+var $header = $('<p>Digilib Image Viewer</p>');
 var $link = $('<a/>');
 var $logo = $('<img class="logo" title="digilib"/>');
 var $content = $('<p/>');
 $elem.append($aboutDiv);
 $aboutDiv.append($header);
 };
 // display more (or less) button sets
 var showButtons = function (data, more, setIdx, animated) {
 var atime = animated ? 'fast': 0;
+// get button width from settings
+var mode = data.settings.interactionMode;
+var btnWidth = data.settings.buttonSettings[mode].buttonSetWidth;
 if (more) {
 // add set
 var $otherSets = data.$elem.find('div.buttons:visible');
 var $set;
 if (data.$buttonSets && data.$buttonSets[setIdx]) {
 } else {
 $set = createButtons(data, setIdx);
 }
 if ($set == null) return false;
 // include border in calculation
-var btnWidth = $set.outerWidth();
+//var btnWidth = $set.outerWidth();
 // console.debug("btnWidth", btnWidth);
 // move remaining sets left and show new set
 if ($otherSets.length > 0) {
 $otherSets.animate({right : '+='+btnWidth+'px'}, atime,
 function () {$set.show();});
 }
 } else {
 // remove set
 var $set = data.$buttonSets[setIdx];
 if ($set == null) return false;
-var btnWidth = $set.outerWidth();
+//var btnWidth = $set.outerWidth();
 // hide last set
 $set.hide();
 // take remaining sets and move right
 var $otherSets = data.$elem.find('div.buttons:visible');
 $otherSets.animate({right : '-='+btnWidth+'px'}, atime);