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

comparison client/digitallibrary/jquery/jquery.digilib.js @ 621:533b06116a48 jquery

merging recent changes

author	hertzhaft
date	Mon, 17 Jan 2011 14:19:00 +0100
parents	5a7f82f10a5d a473998de5f8
children	cc3d81f02d4e

comparison

equal deleted inserted replaced

-:5a7f82f10a5d
+:533b06116a48
 * digilib jQuery plugin
 *
 */
 (function($) {
-var buttons = {
+var actions = {
 reference : {
 onclick : "javascript:getRefWin()",
 tooltip : "get a reference URL",
 img : "reference.png"
 },
 onclick : "javascript:gotoPageWin()",
 tooltip : "specify image",
 img : "page.png"
 },
 bird : {
-onclick : "javascript:toggleBirdDiv()",
+onclick : "toggleBirdDiv",
 tooltip : "show bird's eye view",
 img : "birds-eye.png"
 },
 help : {
-onclick : "javascript:toggleAboutDiv()",
+onclick : ["toggleAboutDiv", 0.2],
 tooltip : "about Digilib",
 img : "help.png"
 },
 reset : {
 onclick : "javascript:resetImage()",
 },
 SEP : {
 img : "sep.png"
 }
 };
 var defaults = {
+// the root digilib element, for easy retrieval
+'digilibRoot' : null,
+// version of this script
+'version' : 'jquery.digilib.js 1.0',
+// logo url
+'logoUrl' : '../img/digilib-logo-text1.png',
+// repository url
+'reposUrl' : 'http://digilib.berlios.de',
 // base URL to Scaler servlet
 'scalerBaseUrl' : 'http://digilib.mpiwg-berlin.mpg.de/digitallibrary/servlet/Scaler',
 // list of Scaler parameters
 'scalerParamNames' : ['fn','pn','dw','dh','ww','wh','wx','wy','ws','mo',
 'rot','cont','brgt','rgbm','rgba','ddpi','ddpix','ddpiy'],
 // mode of operation.
 // fullscreen: takes parameters from page URL, keeps state in page URL
 // embedded: takes parameters from Javascript options, keeps state inside object
 'interactionMode' : 'fullscreen',
-// buttons
+// actions
-'buttons' : buttons,
+'actions' : actions,
 // path to button images (must end with a slash)
 'buttonsImagePath' : '../greyskin/',
-// button groups
+// actions groups
-'buttonsStandard' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","bird","SEP","help","reset","options"],
+'actionsStandard' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","bird","SEP","help","reset","options"],
-'buttonsSpecial' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","SEP","options"],
+'actionsSpecial' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","SEP","options"],
-'buttonsCustom' : []
+'actionsCustom' : [],
+// is birdView shown?
+'isBirdDivVisible' : false,
+// dimensions of bird's eye window
+'birdMaxX' : 200,
+'birdMaxY' : 200,
+// is the "about" window shown?
+'isAboutDivVisible' : false
 };
 // parameters from the query string
 var queryParams = {};
 if (isFullscreen) {
 elemSettings = $.extend({}, settings, queryParams);
 } else {
 elemSettings = $.extend({}, settings, parseImgParams($elem));
 };
+// store $(this) element in the settings
+elemSettings.digilibRoot = $elem;
 // store in data element
 $elem.data('digilib', {
 target : $elem,
 settings : elemSettings
 });
 }
 // create HTML structure
 setupScalerDiv($elem, elemSettings);
-setupButtons($elem, elemSettings, 'buttonsStandard');
+setupButtons($elem, elemSettings, 'actionsStandard');
+// bird's eye view creation - could be deferred?
+setupBirdviewDiv($elem, elemSettings);
+// about window creation - could be deferred? restrict to only one item?
+setupAboutDiv($elem, elemSettings);
 });
 },
 // clean up digilib
 destroy : function() {
 // Namespacing FTW
 $(window).unbind('.digilib'); // unbinds all digilibs(?)
 data.digilib.remove();
 $this.removeData('digilib');
 });
+},
+// event handler: toggles the visibility of the 'about' window
+toggleAboutDiv : function () {
+var $elem = $(this); // the clicked button
+var settings = $elem.data('digilib').settings;
+var $root = settings.digilibRoot;
+var $about = $root.find('div.about');
+settings.isAboutDivVisible = !settings.isAboutDivVisible;
+if (settings.isAboutDivVisible) {
+$about.fadeIn();
+} else {
+$about.fadeOut();
+};
+return false;
+},
+// event handler: toggles the visibility of the bird's eye window
+toggleBirdDiv : function () {
+// xxx: red frame functionality still to be done!
+var $elem = $(this); // the clicked button
+var settings = $elem.data('digilib').settings;
+var $root = settings.digilibRoot;
+var $bird = $root.find('div.birdview');
+settings.isBirdDivVisible = !settings.isBirdDivVisible;
+if (settings.isBirdDivVisible) {
+$bird.fadeIn();
+} else {
+$bird.fadeOut();
+};
+return false;
 }
 };
 // returns parameters from page url
 var parseQueryParams = function() {
 };
 };
 return hash;
 };
+// returns a query string from key names from a parameter hash
+var makeParamString = function (settings, keys) {
+var paramString = '';
+var latter = false;
+for (i = 0; i < keys.length; ++i) {
+var key = keys[i];
+if (settings[key]) {
+// first param gets no '&'
+paramString += latter ? '&' : '';
+latter = true;
+// add parm=val
+paramString += key + '=' + settings[key];
+};
+}
+return paramString;
+};
 // returns URL and query string for Scaler
 var getScalerString = function (settings) {
-var url = settings.scalerBaseUrl + '?';
+var keys = settings.scalerParamNames;
-var i, parm, latter;
+var queryString = makeParamString(settings, keys);
-// go through param names and get values from settings
+var url = settings.scalerBaseUrl + '?' + queryString;
-for (i = 0; i < settings.scalerParamNames.length; ++i) {
-parm = settings.scalerParamNames[i];
-if (settings[parm]) {
-// first parm gets no '&'
-url += latter ? '&' : '';
-latter = 1;
-// add parm=val
-url += parm + '=' + settings[parm];
-}
-}
 return url;
 };
 // returns maximum size for scaler img in fullscreen mode
 var getFullscreenImgSize = function($elem) {
 var winH = $(window).height();
 var winW = $(window).width();
 // TODO: account for borders?
 var $scaler = $('<div class="scaler"/>');
 $elem.append($scaler);
 $scaler.append($img);
 $img.load(scalerImgLoadedFn(settings));
 };
 // creates HTML structure for buttons in elem
-var setupButtons = function ($elem, settings, buttonGroup) {
+var setupButtons = function ($elem, settings, actionGroup) {
 if (settings.interactionMode === 'fullscreen') {
 // fullscreen -- create new
 var $buttonsDiv = $('<div class="buttons"></div>');
 $elem.append($buttonsDiv);
-var buttonNames = settings[buttonGroup];
+var actionNames = settings[actionGroup];
-for (var i = 0; i < buttonNames.length; i++) {
+for (var i = 0; i < actionNames.length; i++) {
-var buttonName = buttonNames[i];
+var actionName = actionNames[i];
-var buttonSettings = settings.buttons[buttonName];
+var actionSettings = settings.actions[actionName];
 // construct the button html
 var $button = $('<div class="button"></div>');
 var $a = $('<a/>');
-var $img = $('<img/>');
+var $img = $('<img class="button"/>');
 $buttonsDiv.append($button);
 $button.append($a);
 $a.append($img);
 // add attributes and bindings
-$button.attr('title', buttonSettings.tooltip);
+$button.attr('title', actionSettings.tooltip);
-$button.addClass('button-' + buttonName);
+$button.addClass('button-' + actionName);
 // let the clicked <a> element know about the digilib context
-$a.data('digilib', { 'name' : buttonName, 'settings' : settings } );
+$a.data('digilib', { 'action' : actionName, 'settings' : settings } );
 $a.bind('click', function() {
-// get the context settings
+var $elem = $(this);
-var data = $(this).data('digilib');
+// get the context data
+var data = $elem.data('digilib');
 // find the action for the clicked element
-console.log(data.settings.buttons[data.name].onclick);
+var method = data.settings.actions[data.action].onclick;
+if ($.isArray(method)) {
+$elem.digilib.apply(this, method);
+} else {
+$elem.digilib(method);
+};
+console.log(method);
 });
 // binding mit closure
-//(function(){ var action = buttonSettings.onclick;
+//(function(){ var action = actionSettings.onclick;
 //    $a.bind('click', function(){ console.log( action )} );
 //})();
-$img.attr('src', settings.buttonsImagePath + buttonSettings.img);
+$img.attr('src', settings.buttonsImagePath + actionSettings.img);
 };
 }
 return $buttonsDiv;
 };
+// creates HTML structure for the bird's eye view in elem
+var setupBirdviewDiv = function ($elem, settings) {
+// use only the relevant parameters
+var keys = ['fn','pn','dw','dh'];
+var birdDimensions = {
+'dw' : settings.birdMaxX,
+'dh' : settings.birdMaxY
+};
+var birdSettings = $.extend({}, settings, birdDimensions);
+var birdUrl = settings.scalerBaseUrl + '?' + makeParamString(birdSettings, keys);
+// the bird's eye div
+var $birdviewDiv = $('<div class="birdview"/>');
+// the detail indicator frame
+var $birdzoomDiv = $('<div class="birdzoom"/>');
+// the small image
+var $birdImg = $('<img class="birdimg"/>');
+$elem.append($birdviewDiv);
+$birdviewDiv.append($birdzoomDiv);
+$birdviewDiv.append($birdImg);
+$birdImg.attr('src', birdUrl);
+};
+// creates HTML structure for the bird's eye view in elem
+var setupAboutDiv = function ($elem, settings) {
+var $aboutDiv = $('<div class="about"/>');
+var $header = $('<p>Digilib Graphic Viewer</p>');
+var $link = $('<a/>');
+var $logo = $('<img class="logo" title="digilib"/>');
+var $content = $('<p/>');
+$elem.append($aboutDiv);
+$aboutDiv.append($header);
+$aboutDiv.append($link);
+$aboutDiv.append($content);
+$link.append($logo);
+$logo.attr('src', settings.logoUrl);
+$link.attr('href', settings.reposUrl);
+$content.text('Version: ' + settings.version);
+// let the element know about the digilib context
+$aboutDiv.data('digilib', { 'settings' : settings } );
+$aboutDiv.bind('click', function() {
+console.log($(this));
+$(this).digilib('toggleAboutDiv');
+});
+};
 // returns function for load event of scaler img
 var scalerImgLoadedFn = function(settings) {
 return function() {
 console.debug("img loaded! settings=", settings);
 };