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

comparison client/digitallibrary/jquery/jquery.digilib.js @ 668:ad4a2edcbdbc jquery

make zoomarea and birdview work in embedded mode

author	hertzhaft
date	Mon, 24 Jan 2011 09:48:27 +0100
parents	3de056c96bcf
children	b93241aa017c

comparison

equal deleted inserted replaced

-:48e5b9608091
+:ad4a2edcbdbc
 // fullscreen = take parameters from page URL, keep state in page URL
 // embedded = take parameters from Javascript options, keep state inside object
 'interactionMode' : 'fullscreen',
 // buttons
 'buttons' : buttons,
+// defaults for digilib buttons
 'buttonSettings' : {
-// path to button images (must end with a slash)
 'fullscreen' : {
+// path to button images (must end with a slash)
 'imagePath' : 'img/fullscreen/',
 //'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","bird","SEP","help","reset","options"],
 '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"],
 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","SEP","options"],
 'customSet' : []
 }
 },
 // button groups
 // is birdView shown?
 'isBirdDivVisible' : false,
-// dimensions of bird's eye window
+// dimensions of bird's eye div
 'birdDivOptions' : {'dw' : 200, 'dh' : 200},
-// style of bird's eye window
+// style of the zoom area indicator in the bird's eye div
 'birdIndicatorStyle' : {'border' : '2px solid #ff0000' },
+// style of zoom area "rubber band"
+'zoomrectStyle' : {'border' : '2px solid #ff0000' },
 // is the "about" window shown?
 'isAboutDivVisible' : false
 };
 var geom = dlGeometry();
 var MAX_ZOOMAREA = geom.rectangle(0, 0, 1, 1);
 var actions = {
 // init: digilib initialization
 init : function(options) {
 // settings for this digilib instance are merged from defaults and options
 var settings = $.extend({}, defaults, options);
 var isFullscreen = settings.interactionMode === 'fullscreen';
 var queryParams = {};
 if (isFullscreen) {
 queryParams = parseQueryParams();
 // check scalerBaseUrl
 if (settings.scalerBaseUrl == null) {
 // try the host this came from
 var h = window.location.host;
 if (window.location.host) {
 var url = window.location.href;
 // assume the page lives in [webapp]/jquery/
 var pos = url.indexOf('jquery/');
 if (pos > 0) {
 settings.scalerBaseUrl = url.substring(0, pos) + 'servlet/Scaler';
-}
 }
 }
 }
-return this.each(function() {
+}
-var $elem = $(this);
+return this.each(function() {
-var data = $elem.data('digilib');
+var $elem = $(this);
-var elemSettings;
+var data = $elem.data('digilib');
-// if the plugin hasn't been initialized yet
+var elemSettings;
-if (!data) {
+// if the plugin hasn't been initialized yet
-// merge query parameters
+if (!data) {
-if (isFullscreen) {
+// merge query parameters
-elemSettings = $.extend({}, settings, queryParams);
+if (isFullscreen) {
-} else {
+elemSettings = $.extend({}, settings, queryParams);
-elemSettings = $.extend({}, settings, parseImgParams($elem));
+} else {
-}
+elemSettings = $.extend({}, settings, parseImgParams($elem));
-// store $(this) element in the settings
-data =  {
-$elem : $elem,
-settings : elemSettings,
-queryParams : queryParams
-};
-// store in data element
-$elem.data('digilib', data);
 }
-unpackParams(data);
+// store $(this) element in the settings
-// create HTML structure
+data =  {
-setupScalerDiv(data);
+$elem : $elem,
-setupButtons(data, 'standardSet');
+settings : elemSettings,
-// bird's eye view creation
+queryParams : queryParams
-if (elemSettings.isBirdDivVisible) {
+};
-setupBirdDiv(data);
+// store in data element
-}
+$elem.data('digilib', data);
-// about window creation - TODO: could be deferred? restrict to only one item?
+}
-setupAboutDiv(data);
+unpackParams(data);
-});
+// create HTML structure
-},
+setupScalerDiv(data);
+setupButtons(data, 'standardSet');
-// destroy: clean up digilib
+// bird's eye view creation
-destroy : function(data) {
+if (elemSettings.isBirdDivVisible) {
-return this.each(function(){
-var $elem = $(this);
-$(window).unbind('.digilib'); // unbind all digilibs(?)
-data.digilib.remove();
-$elem.removeData('digilib');
-});
-},
-// show or hide the 'about' window
-showAboutDiv : function(data, show) {
-data.settings.isAboutDivVisible = showDiv(data.settings.isAboutDivVisible, data.$aboutDiv, show);
-},
-// event handler: toggles the visibility of the bird's eye window
-showBirdDiv : function (data, show) {
-if (data.$birdDiv == null) {
-// no bird div -> create
 setupBirdDiv(data);
 }
-// TODO: keep bird view visible after reload (parameter, cookie?)
+// about window creation - TODO: could be deferred? restrict to only one item?
-data.settings.isBirdDivVisible = showDiv(data.settings.isBirdDivVisible, data.$birdDiv, show);
+setupAboutDiv(data);
-},
+});
+},
-// goto given page nr (+/-: relative)
-gotoPage : function (data, pageNr) {
+// destroy: clean up digilib
-var settings = data.settings;
+destroy : function(data) {
-var oldpn = settings.pn;
+return this.each(function(){
-var pn = setNumValue(settings, "pn", pageNr);
+var $elem = $(this);
-if (pn == null) return false; // nothing happened
+$(window).unbind('.digilib'); // unbind all digilibs(?)
-if (pn < 1) {
+data.digilib.remove();
-alert("no such page (page number too low)");
+$elem.removeData('digilib');
+});
+},
+// show or hide the 'about' window
+showAboutDiv : function(data, show) {
+data.settings.isAboutDivVisible = showDiv(data.settings.isAboutDivVisible, data.$aboutDiv, show);
+},
+// event handler: toggles the visibility of the bird's eye window
+showBirdDiv : function (data, show) {
+if (data.$birdDiv == null) {
+// no bird div -> create
+setupBirdDiv(data);
+}
+// TODO: keep bird view visible after reload (parameter, cookie?)
+data.settings.isBirdDivVisible = showDiv(data.settings.isBirdDivVisible, data.$birdDiv, show);
+},
+// goto given page nr (+/-: relative)
+gotoPage : function (data, pageNr) {
+var settings = data.settings;
+var oldpn = settings.pn;
+var pn = setNumValue(settings, "pn", pageNr);
+if (pn == null) return false; // nothing happened
+if (pn < 1) {
+alert("no such page (page number too low)");
+settings.pn = oldpn;
+return false;
+}
+if (settings.pt) {
+if (pn > settings.pt) {
+alert("no such page (page number too high)");
 settings.pn = oldpn;
 return false;
 }
-if (settings.pt) {
+}
-if (pn > settings.pt) {
+// reset mk and others(?)
-alert("no such page (page number too high)");
+data.marks = [];
-settings.pn = oldpn;
+data.zoomArea = MAX_ZOOMAREA;
-return false;
+// then reload
-}
+redisplay(data);
-}
+},
-// reset mk and others(?)
-data.marks = [];
+// zoom by a given factor
-data.zoomArea = MAX_ZOOMAREA;
+zoomBy : function (data, factor) {
-// then reload
+zoomBy(data, factor);
+},
+// zoom interactively
+zoomArea : function (data) {
+zoomArea(data);
+},
+// zoom out to full page
+zoomFull : function (data, mode) {
+data.zoomArea = MAX_ZOOMAREA;
+if (mode === 'width') {
+data.dlOpts.fitwidth = 1;
+delete data.dlOpts.fitheight;
+} else if (mode === 'height') {
+data.dlOpts.fitheight = 1;
+delete data.dlOpts.fitwidth;
+} else {
+delete data.dlOpts.fitwidth;
+delete data.dlOpts.fitheight;
+}
+redisplay(data);
+},
+// set a mark by clicking (or giving a position)
+setMark : function (data, mpos) {
+if (mpos == null) {
+// interactive
+setMark(data);
+} else {
+// use position
+data.marks.push(pos);
 redisplay(data);
-},
+}
+},
-// zoom by a given factor
-zoomBy : function (data, factor) {
+// remove the last mark
-zoomBy(data, factor);
+removeMark : function (data) {
-},
+data.marks.pop();
+redisplay(data);
-// zoom interactively
+},
-zoomArea : function (data) {
-zoomArea(data);
+// mirror the image
-},
+mirror : function (data, mode) {
+var flags = data.scalerFlags;
-// zoom out to full page
+if (mode === 'h') {
-zoomFull : function (data, mode) {
+if (flags.hmir) {
-data.zoomArea = MAX_ZOOMAREA;
+delete flags.hmir;
-if (mode === 'width') {
-data.dlOpts.fitwidth = 1;
-delete data.dlOpts.fitheight;
-} else if (mode === 'height') {
-data.dlOpts.fitheight = 1;
-delete data.dlOpts.fitwidth;
 } else {
-delete data.dlOpts.fitwidth;
+flags.hmir = 1;
-delete data.dlOpts.fitheight;
+}
-}
+} else {
-redisplay(data);
+if (flags.vmir) {
-},
+delete flags.vmir;
-// set a mark by clicking (or giving a position)
-setMark : function (data, mpos) {
-if (mpos == null) {
-// interactive
-setMark(data);
 } else {
-// use position
+flags.vmir = 1;
-data.marks.push(pos);
+}
-redisplay(data);
+}
-}
+redisplay(data);
 },
-// remove the last mark
+// rotate the image
-removeMark : function (data) {
+rotate : function (data, angle) {
-data.marks.pop();
+var rot = data.settings.rot;
-redisplay(data);
+if (angle == null) {
-},
+angle = window.prompt("Rotation angle:", rot);
+}
-// mirror the image
+data.settings.rot = angle;
-mirror : function (data, mode) {
+redisplay(data);
-var flags = data.scalerFlags;
+},
-	if (mode === 'h') {
-	    if (flags.hmir) {
+// change brightness
-delete flags.hmir;
+brightness : function (data, factor) {
-	    } else {
+var brgt = data.settings.brgt;
-flags.hmir = 1;
+if (factor == null) {
-	    }
+factor = window.prompt("Brightness (-255..255)", brgt);
-	} else {
+}
-if (flags.vmir) {
+data.settings.brgt = factor;
-delete flags.vmir;
+redisplay(data);
-} else {
+},
-flags.vmir = 1;
-}
+// change contrast
-}
+contrast : function (data, factor) {
-	redisplay(data);
+var cont = data.settings.cont;
-},
+if (factor == null) {
+factor = window.prompt("Contrast (-8, 8)", cont);
-// rotate the image
+}
-rotate : function (data, angle) {
+data.settings.cont = factor;
-var rot = data.settings.rot;
+redisplay(data);
-if (angle == null) {
+}
-angle = window.prompt("Rotation angle:", rot);
-}
-data.settings.rot = angle;
-redisplay(data);
-},
-// change brightness
-brightness : function (data, factor) {
-var brgt = data.settings.brgt;
-if (factor == null) {
-factor = window.prompt("Brightness (-255..255)", brgt);
-}
-data.settings.brgt = factor;
-redisplay(data);
-},
-// change contrast
-contrast : function (data, factor) {
-var cont = data.settings.cont;
-if (factor == null) {
-factor = window.prompt("Contrast (-8, 8)", cont);
-}
-data.settings.cont = factor;
-redisplay(data);
-}
 };
 // returns parameters from page url
 var parseQueryParams = function() {
 return parseQueryString(window.location.search.slice(1));
 //keys.push(pair[0]);
 }
 }
 return params;
 };
 // returns a query string from key names from a parameter hash (ignoring if the same value is in defaults)
 var getParamString = function (settings, keys, defaults) {
 var paramString = '';
 var nx = false;
 for (i = 0; i < keys.length; ++i) {
 window.location = url;
 } else {
 // embedded mode -- just change img src
 var url = getScalerUrl(data);
 data.$img.attr('src', url);
+// TODO: doesn't work yet
+var $birdImg = data.$birdImg;
+if ($birdImg) {
+$birdImg.triggerHandler('load');
+};
 }
 };
 // returns maximum size for scaler img in fullscreen mode
 var getFullscreenImgSize = function($elem) {
 // returns function for load event of bird's eye view img
 var birdImgLoadedHandler = function (data) {
 var $img = data.$birdImg;
 return function () {
+if (!$img) return;
 console.debug("birdimg loaded! this=", this, " data=", data);
 // create Transform from current area and picsize
 data.birdTrafo = getImgTrafo($img, MAX_ZOOMAREA);
-// display marks
+// display red indicator around zoomarea
 renderBirdArea(data);
 };
 };
 // place marks on the image
 data.marks.push(pos);
 redisplay(data);
 return false; // do we even get here?
 });
 };
 var zoomArea = function(data) {
 $elem = data.$elem;
 $scaler = data.$scaler;
 var pt1, pt2;
 var $zoomDiv = $('<div class="zoomrect" style="display:none"/>');
 $elem.append($zoomDiv);
+$zoomDiv.css(data.settings.zoomrectStyle);
 //var overlay = getElement("overlay");
 // use overlay div to avoid <img> mousemove problems
 var picRect = geom.rectangle($scaler);
 // FIX ME: is there a way to query the border width from CSS info?
 // rect.x -= 2; // account for overlay borders
 var zoomStart = function (evt) {
 pt1 = geom.position(evt);
 // setup and show zoom div
 //moveElement(zoomdiv, Rectangle(pt1.x, pt1.y, 0, 0));
 $zoomDiv.offset({left : pt1.x, top : pt1.y});
+$zoomDiv.width(0).height(0);
 $zoomDiv.show();
 // register events
 $elem.bind("mousemove.digilib", zoomMove);
 $elem.bind("mouseup.digilib", zoomEnd);
 return false;
 };
 // mouseup handler: end moving
 var zoomEnd = function (evt) {
 pt2 = geom.position(evt);
 // assume a click and continue if the area is too small
 var clickRect = geom.rectangle(pt1, pt2);
 // zoomed is always fit
 data.settings.ws = 1;
 redisplay(data);
 return false;
 };
 // mouse move handler
 var zoomMove = function (evt) {
 pt2 = geom.position(evt);
 var rect = geom.rectangle(pt1, pt2);
 rect.normalize();
 // update zoom div
 $zoomDiv.offset({left : rect.x, top : rect.y});
 $zoomDiv.width(rect.width).height(rect.height);
 return false;
 };
 // bind start zoom handler
 $scaler.one('mousedown.digilib', zoomStart);
 };
 // sets a key to a value (relative values with +/- if relative=true)