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

comparison client/digitallibrary/jquery/jquery.digilib.js @ 760:29b815194375 jquery

pixel-by-pixel scale fully works now.

author	robcast
date	Thu, 10 Feb 2011 20:41:33 +0100
parents	8087657fc7bd
children	abee36cd7688

comparison

equal deleted inserted replaced

-:aaaf5ad520c4
+:29b815194375
 /**
 * digilib jQuery plugin
 **/
-/* jslint browser: true, debug: true, forin: true
+/*jslint browser: true, debug: true, forin: true
 */
 // fallback for console.log calls
 if (typeof(console) === 'undefined') {
 var console = {
 }
 }
 }
 // get image info from server if needed
 if (data.scaleMode === 'pixel' || data.scaleMode === 'size') {
-getImageInfo(data); // TODO: onload callback
+loadImageInfo(data, updateDisplay); // updateDisplay(data) on completion
 }
 // create HTML structure for scaler
 setupScalerDiv(data);
 // add buttons
 for (var i = 0; i < elemSettings.visibleButtonSets; ++i) {
 if (pn < 1) {
 alert("no such page (page number too low)");
 settings.pn = oldpn;
 return false;
 }
+// TODO: how do we get pt?
 if (settings.pt) {
 if (pn > settings.pt) {
 alert("no such page (page number too high)");
 settings.pn = oldpn;
 return false;
 // zoom by a given factor
 zoomBy : function (data, factor) {
 zoomBy(data, factor);
 },
-// zoom interactively
+// zoom to area (or interactive)
-zoomArea : function (data) {
+zoomArea : function (data, area) {
-zoomArea(data);
+var settings = data.settings;
+if (area == null) {
+// interactively
+zoomArea(data);
+} else {
+data.zoomArea = geom.rectangle(area);
+redisplay(data);
+}
 },
 // zoom out to full page
 zoomFull : function (data, mode) {
 data.zoomArea = FULL_AREA;
 }
 },
 // calibrate (only faking)
 calibrate : function (data) {
-getImageInfo(data);
+loadImageInfo(data);
 },
 // set image scale mode
 setScaleMode : function (data, mode) {
 var oldM = getScaleMode(data);
 var birdSettings = jQuery.extend({}, settings, birdDivOptions);
 // use only the relevant parameters
 if (moreParams == null) {
 var params = getParamString(birdSettings, settings.birdDivParams, defaults);
 } else {
+// filter scaler flags
+if (birdSettings.mo != null) {
+var mo = '';
+if (data.scalerFlags.hmir != null) {
+mo += 'hmir,';
+}
+if (data.scalerFlags.vmir != null) {
+mo += 'vmir';
+}
+birdSettings.mo = mo;
+}
 var params = getParamString(birdSettings,
 settings.birdDivParams.concat(moreParams), defaults);
 }
 var url = settings.scalerBaseUrl + '?' + params;
 return url;
 var settings = data.settings;
 var queryString = getParamString(settings, settings.digilibParamNames, defaults);
 return settings.digilibBaseUrl + '?' + queryString;
 };
-// gets image information from digilib server via HTTP and calls complete
+// loads image information from digilib server via HTTP (and calls complete-fn)
-var getImageInfo = function (data, complete) {
+var loadImageInfo = function (data, complete) {
 var settings = data.settings;
 var p = settings.scalerBaseUrl.indexOf('/servlet/Scaler');
 var url = settings.scalerBaseUrl.substring(0, p) + '/ImgInfo-json.jsp';
 url += '?' + getParamString(settings, ['fn', 'pn'], defaults);
+// TODO: better error handling
 jQuery.getJSON(url, function (json) {
 console.debug("got json data=", json);
 data.imgInfo = json;
 if (complete != null) {
 complete.call(this, data, json);
 // redisplay bird img
 updateBirdDiv(data);
 }
 };
+// update display (overlays etc.)
+var updateDisplay = function (data) {
+updateImgTrafo(data);
+renderMarks(data);
+setupZoomDrag(data);
+if (data.settings.isBirdDivVisible) {
+renderBirdArea(data);
+setupBirdDrag(data);
+}
+// TODO: update event subscriber?
+};
 // returns maximum size for scaler img in fullscreen mode
-var getFullscreenImgSize = function($elem) {
+var getFullscreenImgSize = function ($elem) {
 var $win = $(window);
 var winH = $win.height();
 var winW = $win.width();
 // TODO: account for borders?
 return geom.size(winW, winH);
 $img.addClass('pic');
 data.$scaler = $scaler;
 data.$img = $img;
 // setup image load handler before setting the src attribute (IE bug)
 $img.load(scalerImgLoadedHandler(data));
+$img.error(function () {console.error("error loading scaler image");});
 $img.attr('src', scalerUrl);
 };
 // creates HTML structure for buttons in elem
 var createButtons = function (data, buttonSetIdx) {
 $birdDiv.append($birdZoom);
 $birdDiv.append($birdImg);
 $birdZoom.css(data.settings.birdIndicatorStyle);
 var birdUrl = getBirdImgUrl(data);
 $birdImg.load(birdImgLoadedHandler(data));
+$birdImg.error(function () {console.error("error loading birdview image");});
 $birdImg.attr('src', birdUrl);
 };
 // update bird's eye view
 var updateBirdDiv = function (data) {
 trafo.concat(trafo.getScale(picrect));
 trafo.concat(trafo.getTranslation(picrect));
 return trafo;
 };
-// returns function for load event of scaler img
+// update scaler image transform
-var scalerImgLoadedHandler = function (data) {
+var updateImgTrafo = function (data) {
-return function () {
+var $img = data.$img;
-var $img = $(this);
+if ($img != null && $img.get(0).complete) {
-var $scaler = data.$scaler;
 // create Transform from current zoomArea and image size
 data.imgTrafo = getImgTrafo($img, data.zoomArea,
 data.settings.rot, data.scalerFlags.hmir, data.scalerFlags.vmir,
 data.scaleMode, data.imgInfo);
 // console.debug("imgTrafo=", data.imgTrafo);
+}
+};
+// returns function for load event of scaler img
+var scalerImgLoadedHandler = function (data) {
+return function () {
+var $img = $(this);
+console.debug("scaler img loaded=",$img);
+var $scaler = data.$scaler;
 var imgRect = geom.rectangle($img);
-// console.debug("imgrect=", imgRect);
 // adjust scaler div size
 imgRect.adjustDiv($scaler);
 // show image in case it was hidden (for example in zoomDrag)
 $img.css('visibility', 'visible');
 $scaler.css({'opacity' : '1', 'background-image' : 'none'});
-// display marks
+// update display (render marks, etc.)
-renderMarks(data);
+updateDisplay(data);
-// enable drag-to-scroll
-setupZoomDrag(data);
-// TODO: digilib.showArrows(); // show arrow overlays for zoom navigation
 };
 };
 // returns function for load event of bird's eye view img
 var birdImgLoadedHandler = function (data) {
 console.debug("birdImg loaded!", $birdImg, "rect=", birdRect, "data=", data);
 if (birdRect.width === 0) {
 // malheureusement IE7 calls load handler when there is no size info yet
 setTimeout(function () { $birdImg.triggerHandler('load'); }, 200);
 }
-// display red indicator around zoomarea
+// update display (zoom area indicator)
-renderBirdArea(data);
+updateDisplay(data);
-// enable click and drag
-setupBirdDrag(data);
 };
 };
 // place marks on the image
 var renderMarks = function (data) {
+if (data.$img == null || data.imgTrafo == null) return;
+console.debug("rendermarks img=",data.$img," imgtrafo=",data.imgTrafo);
 var $elem = data.$elem;
 var marks = data.marks;
 // clear marks
 $elem.find('div.mark').remove();
 for (var i = 0; i < marks.length; i++) {
 }
 };
 // show zoom area indicator on bird's eye view
 var renderBirdArea = function (data) {
+if (data.$birdImg == null) return;
 var $birdZoom = data.$birdZoom;
 var zoomArea = data.zoomArea;
 var normalSize = isFullArea(zoomArea);
 if (normalSize) {
 $birdZoom.hide();
 // set zoom background
 var setZoomBG = function(data) {
 var $scaler = data.$scaler;
 var $img = data.$img;
 var fullRect = null;
+// hide marks
+data.$elem.find('div.mark').hide();
 // hide the scaler img, show background of div instead
 $img.css('visibility', 'hidden');
 var scalerCss = {
 'background-image' : 'url(' + $img.attr('src') + ')',
 'background-repeat' : 'no-repeat',
 $document.unbind("mouseup.dlZoomDrag", dragEnd);
 if (delta == null || delta.distance() < 2) {
 // no movement
 $img.css('visibility', 'visible');
 $scaler.css({'opacity' : '1', 'background-image' : 'none'});
+// unhide marks
+data.$elem.find('div.mark').show();
 return false;
 }
 // get old zoom area (screen coordinates)
 var za = geom.rectangle($img);
 // move