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

comparison client/digitallibrary/jquery/jquery.digilib.js @ 690:dfdee83a0a32 jquery

better handling of button sets

author	robcast
date	Thu, 27 Jan 2011 16:53:09 +0100
parents	7ef3bc87ab19
children	98c42d573ebd

comparison

equal deleted inserted replaced

-:7ef3bc87ab19
+:dfdee83a0a32
 'imagePath' : 'img/embedded/16/',
 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","back","fwd","page","bird","SEP","help","reset","moreoptions"],
 'specialSet' : ["hmir","vmir","rot","brgt","cont","rgb","quality","size","SEP","lessoptions"],
 'buttonSets' : ['standardSet', 'specialSet']
 }
 },
-// button groups
+// number of visible button groups
+'visibleButtonSets' : 1,
 // is birdView shown?
 'isBirdDivVisible' : false,
 // dimensions of bird's eye div
 'birdDivWidth' : 200,
 'birdDivHeight' : 200,
 } else {
 params = parseImgParams($elem);
 };
 // store $(this) element in the settings
 elemSettings = $.extend({}, settings, params);
-data =  {
+data = {
 $elem : $elem,
 settings : elemSettings,
 queryParams : params
 };
 // store in data element
 $elem.data('digilib', data);
 }
 unpackParams(data);
 // create HTML structure for scaler
 setupScalerDiv(data);
-// HTML for buttons (default is first button set)
+// add buttons
-setupButtons(data, 0);
+for (var i = 0; i < elemSettings.visibleButtonSets; ++i) {
+showButtons(data, true, i);
+}
 // bird's eye view creation
 if (elemSettings.isBirdDivVisible) {
 setupBirdDiv(data);
 }
 // about window creation - TODO: could be deferred? restrict to only one item?
 redisplay(data);
 },
 // display more (or less) button sets
 morebuttons : function (data, more) {
+var settings = data.settings;
 if (more === '-1') {
 // remove set
-var setIdx = data.visibleButtonSets - 1;
+var setIdx = settings.visibleButtonSets - 1;
-var $lastSet = data.$buttonSets[setIdx];
+if (showButtons(data, false, setIdx, true)) {
-if ($lastSet == null) return;
+settings.visibleButtonSets--;
-var btnWidth = $lastSet.width();
+}
-// hide last set
-$lastSet.hide();
-// take remaining sets and move right
-var $otherSets = data.$elem.find('div.buttons:visible');
-$otherSets.animate({left : '+='+btnWidth+'px'});
-data.visibleButtonSets -= 1;
 } else {
 // add set
-var $oldSets = data.$elem.find('div.buttons:visible');
+var setIdx = settings.visibleButtonSets;
-var setIdx = data.visibleButtonSets;
+if (showButtons(data, true, setIdx, true)) {
-var $newSet;
+settings.visibleButtonSets++;
-if (data.$buttonSets[setIdx]) {
+}
-// set exists
-$newSet = data.$buttonSets[setIdx];
-} else {
-$newSet = setupButtons(data, setIdx);
-}
-if ($newSet == null) return;
-var btnWidth = $newSet.width();
-// move remaining sets left and show new set
-$oldSets.animate({left : '-='+btnWidth+'px'},
-function () {$newSet.show();});
-data.visibleButtonSets += 1;
 }
 },
 reset : function (data) {
 var settings = data.settings;
 $img.load(scalerImgLoadedHandler(data));
 $img.attr('src', scalerUrl);
 };
 // creates HTML structure for buttons in elem
-var setupButtons = function (data, buttonSetIdx) {
+var createButtons = function (data, buttonSetIdx) {
 var $elem = data.$elem;
 var settings = data.settings;
 var mode = settings.interactionMode;
 var buttonSettings = settings.buttonSettings[mode];
 var buttonGroup = buttonSettings.buttonSets[buttonSetIdx];
 }
 // make buttons div scroll if too large for window
 if ($buttonsDiv.height() > $(window).height() - 10) {
 $buttonsDiv.css('position', 'absolute');
 }
+// buttons hidden at first
+$buttonsDiv.hide();
+$elem.append($buttonsDiv);
 if (data.$buttonSets == null) {
-// show first button set
+// first button set
-$elem.append($buttonsDiv);
 data.$buttonSets = [$buttonsDiv];
-data.visibleButtonSets = 1;
 } else {
-// hide later button sets
-$buttonsDiv.hide();
 $elem.append($buttonsDiv);
 data.$buttonSets[buttonSetIdx] = $buttonsDiv;
 }
 return $buttonsDiv;
 };
 $div.fadeIn();
 } else {
 $div.fadeOut();
 }
 return isVisible;
+};
+// display more (or less) button sets
+var showButtons = function (data, more, setIdx, animated) {
+if (more) {
+// add set
+var $otherSets = data.$elem.find('div.buttons:visible');
+var $set;
+if (data.$buttonSets && data.$buttonSets[setIdx]) {
+// set exists
+$set = data.$buttonSets[setIdx];
+} else {
+$set = createButtons(data, setIdx);
+}
+if ($set == null) return false;
+var btnWidth = $set.width();
+// move remaining sets left and show new set
+if (animated) {
+$otherSets.animate({left : '-='+btnWidth+'px'}, 'fast',
+function () {$set.show();});
+} else {
+$otherSets.css({left : '-='+btnWidth+'px'});
+$set.show();
+}
+} else {
+// remove set
+var $set = data.$buttonSets[setIdx];
+if ($set == null) return false;
+var btnWidth = $set.width();
+// hide last set
+$set.hide();
+// take remaining sets and move right
+var $otherSets = data.$elem.find('div.buttons:visible');
+if (animated) {
+$otherSets.animate({left : '+='+btnWidth+'px'}, 'fast');
+} else {
+$otherSets.css({left : '+='+btnWidth+'px'});
+}
+}
+return true;
 };
 // create Transform from area and $img
 var getImgTrafo = function ($img, area, rot, hmir, vmir) {
 var picrect = geom.rectangle($img);