comparison client/digitallibrary/jquery/jquery.digilib.js @ 675:5c7f90a3c552 jquery

infrastructure for switchable button sets
author robcast
date Wed, 26 Jan 2011 10:56:45 +0100
parents 0698b6b32b9b
children 95f531b91fe7
comparison
equal deleted inserted replaced
674:0698b6b32b9b 675:5c7f90a3c552
189 // path to button images (must end with a slash) 189 // path to button images (must end with a slash)
190 'imagePath' : 'img/fullscreen/', 190 'imagePath' : 'img/fullscreen/',
191 //'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","bird","SEP","help","reset","options"], 191 //'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","bird","SEP","help","reset","options"],
192 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","mark","delmark","hmir","vmir","back","fwd","page","rot","brgt","cont","rgb","quality","size","calibrationx","scale","bird","help","options"], 192 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","mark","delmark","hmir","vmir","back","fwd","page","rot","brgt","cont","rgb","quality","size","calibrationx","scale","bird","help","options"],
193 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","SEP","options"], 193 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","SEP","options"],
194 'customSet' : [] 194 'buttonSets' : ['standardSet', 'specialSet']
195 }, 195 },
196 'embedded' : { 196 'embedded' : {
197 'imagePath' : 'img/embedded/16/', 197 'imagePath' : 'img/embedded/16/',
198 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","hmir","vmir","back","fwd","page","rot","brgt","cont","rgb","quality","size","scale","bird","help","options"], 198 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","hmir","vmir","back","fwd","page","rot","brgt","cont","rgb","quality","size","scale","bird","help","options"],
199 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","SEP","options"], 199 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","SEP","options"],
200 'customSet' : [] 200 'buttonSets' : ['standardSet', 'specialSet']
201 } 201 }
202 }, 202 },
203 // button groups 203 // button groups
204 // is birdView shown? 204 // is birdView shown?
205 'isBirdDivVisible' : false, 205 'isBirdDivVisible' : false,
263 }; 263 };
264 // store in data element 264 // store in data element
265 $elem.data('digilib', data); 265 $elem.data('digilib', data);
266 } 266 }
267 unpackParams(data); 267 unpackParams(data);
268 // create HTML structure 268 // create HTML structure for scaler
269 setupScalerDiv(data); 269 setupScalerDiv(data);
270 setupButtons(data, 'standardSet'); 270 // HTML for buttons (default is first button set)
271 setupButtons(data, 0);
271 // bird's eye view creation 272 // bird's eye view creation
272 if (elemSettings.isBirdDivVisible) { 273 if (elemSettings.isBirdDivVisible) {
273 setupBirdDiv(data); 274 setupBirdDiv(data);
274 } 275 }
275 // about window creation - TODO: could be deferred? restrict to only one item? 276 // about window creation - TODO: could be deferred? restrict to only one item?
669 data.$img = $img; 670 data.$img = $img;
670 $img.load(scalerImgLoadedHandler(data)); 671 $img.load(scalerImgLoadedHandler(data));
671 }; 672 };
672 673
673 // creates HTML structure for buttons in elem 674 // creates HTML structure for buttons in elem
674 var setupButtons = function (data, actionGroup) { 675 var setupButtons = function (data, buttonSetIdx) {
675 var $elem = data.$elem; 676 var $elem = data.$elem;
676 var settings = data.settings; 677 var settings = data.settings;
677 // if (settings.interactionMode === 'fullscreen') {
678 var $buttonsDiv = $('<div class="buttons"></div>'); 678 var $buttonsDiv = $('<div class="buttons"></div>');
679 $elem.append($buttonsDiv); 679 $elem.append($buttonsDiv);
680 var mode = settings.interactionMode; 680 var mode = settings.interactionMode;
681 var buttonSettings = settings.buttonSettings[mode]; 681 var buttonSettings = settings.buttonSettings[mode];
682 var actionNames = buttonSettings[actionGroup]; 682 var buttonGroup = buttonSettings.buttonSets[buttonSetIdx];
683 for (var i = 0; i < actionNames.length; i++) { 683 var buttonNames = buttonSettings[buttonGroup];
684 var actionName = actionNames[i]; 684 for (var i = 0; i < buttonNames.length; i++) {
685 var buttonConfig = settings.buttons[actionName]; 685 var buttonName = buttonNames[i];
686 var buttonConfig = settings.buttons[buttonName];
686 // construct the button html 687 // construct the button html
687 var $button = $('<div class="button"></div>'); 688 var $button = $('<div class="button"></div>');
688 var $a = $('<a/>'); 689 var $a = $('<a/>');
689 var $img = $('<img class="button"/>'); 690 var $img = $('<img class="button"/>');
690 $buttonsDiv.append($button); 691 $buttonsDiv.append($button);
691 $button.append($a); 692 $button.append($a);
692 $a.append($img); 693 $a.append($img);
693 // add attributes and bindings 694 // add attributes and bindings
694 $button.attr('title', buttonConfig.tooltip); 695 $button.attr('title', buttonConfig.tooltip);
695 $button.addClass('button-' + actionName); 696 $button.addClass('button-' + buttonName);
696 // create handler for the buttons 697 // create handler for the buttons
697 $a.bind('click.digilib', (function () { 698 $a.bind('click.digilib', (function () {
698 // we create a new closure to capture the value of action 699 // we create a new closure to capture the value of action
699 var action = buttonConfig.onclick; 700 var action = buttonConfig.onclick;
700 if ($.isArray(action)) { 701 if ($.isArray(action)) {
716 $img.attr('src', buttonSettings.imagePath + buttonConfig.img); 717 $img.attr('src', buttonSettings.imagePath + buttonConfig.img);
717 } 718 }
718 // make buttons div scroll if too large for window 719 // make buttons div scroll if too large for window
719 if ($buttonsDiv.height() > $(window).height() - 10) { 720 if ($buttonsDiv.height() > $(window).height() - 10) {
720 $buttonsDiv.css('position', 'absolute'); 721 $buttonsDiv.css('position', 'absolute');
722 }
723 if (data.$buttonSets == null) {
724 data.$buttonSets = [$buttonsDiv];
725 data.visibleButtonSets = 1;
726 } else {
727 data.$buttonSets[buttonSetIdx] = $buttonsDiv;
721 } 728 }
722 return $buttonsDiv; 729 return $buttonsDiv;
723 }; 730 };
724 731
725 // creates HTML structure for the bird's eye view in elem 732 // creates HTML structure for the bird's eye view in elem