Mercurial > hg > digilib
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 |