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

comparison client/digitallibrary/jquery/jquery.digilib.js @ 779:62c3b902f878 jquery

better width calculation for scaler div

author	hertzhaft
date	Sun, 13 Feb 2011 16:16:42 +0100
parents	f8235c42f4a0
children	a34686e7c151

comparison

equal deleted inserted replaced

-:f8235c42f4a0
+:62c3b902f878
 var console = {
 log : function(){},
 debug : function(){},
 error : function(){}
 };
-var customConsole = true;
+var customConsole = false; // set to true if debugging for MS IE
 }
 (function($) {
 var buttons = {
 reference : {
 'birdDivParams' : ['fn','pn','dw','dh'],
 // is the "about" window shown?
 'isAboutDivVisible' : false,
 // maximum width of background image for drag-scroll
 'maxBgSize' : 10000,
-// space to be left free in full page display
+// space to be left free in full page display, default value is for scrollbar
-'scalerInset' : 0,
+'scalerInset' : 10,
 };
 // affine geometry classes
 var geom = dlGeometry();
 }
 // get image info from server if needed
 if (data.scaleMode === 'pixel' || data.scaleMode === 'size') {
 loadImageInfo(data, updateDisplay); // updateDisplay(data) on completion
 }
-// create HTML structure for scaler
+// create buttons before scaler
-setupScalerDiv(data);
-// add buttons
 for (var i = 0; i < elemSettings.visibleButtonSets; ++i) {
 showButtons(data, true, i);
 }
+// create HTML structure for scaler, taking width of buttons div into account
+setupScalerDiv(data);
 highlightButtons(data);
 // bird's eye view creation
 if (elemSettings.isBirdDivVisible) {
 setupBirdDiv(data);
 data.$birdDiv.show();
 // returns maximum size for scaler img in fullscreen mode
 var getFullscreenImgSize = function (data) {
 var $win = $(window);
 var winH = $win.height();
-var winW = $win.width() - data.settings.scalerInset;
+var winW = $win.width();
-// TODO: account for borders?
+var $body = $('body');
-console.debug(winW, winH);
+// include standard body margin
-return geom.size(winW, winH);
+var bodyB = $body.outerWidth(true) - $body.width();
+// get width of first button div
+var buttonsW = 0;
+if (data.$buttonSets) {
+buttonsW = data.$buttonSets[0].outerWidth();
+}
+// account for left/right border, body margins and additional requirements
+var calcW = winW - bodyB - buttonsW - data.settings.scalerInset;
+console.debug(winW, winH, 'winW:', $win.width(), 'bodyBorder:', bodyB, 'buttonsW:', buttonsW, 'calc:', calcW);
+return geom.size(calcW, winH);
 };
 // creates HTML structure for digilib in elem
 var setupScalerDiv = function (data) {
 var settings = data.settings;
 }
 } else {
 $img = $('<img/>');
 }
 }
-// create new html
+// create new inner html, keep buttons
-$elem.empty(); // TODO: should we keep stuff for customization?
+$elem.contents(":not(div.buttons)").remove();
 var $scaler = $('<div class="scaler"/>');
-$elem.append($scaler);
+// scaler should be the first child element?
+$elem.prepend($scaler);
 $scaler.append($img);
 $img.addClass('pic');
 data.$scaler = $scaler;
 data.$img = $img;
 // setup image load handler before setting the src attribute (IE bug)
 $set = createButtons(data, setIdx);
 }
 if ($set == null) return false;
 // include border in calculation
 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 {
 }
 } else {
 // remove set
 var $set = data.$buttonSets[setIdx];
 if ($set == null) return false;
-var btnWidth = $set.width();
+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);