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

comparison client/digitallibrary/jquery/jquery.digilib.js @ 795:00d37112d062 jquery

birds eye view now as a plugin. digilib now 200 lines less!

author	robcast
date	Fri, 18 Feb 2011 18:58:52 +0100
parents	ad5cc0212b66
children	6914ddedaca7

comparison

equal deleted inserted replaced

-:ad5cc0212b66
+:00d37112d062
 },
 page : {
 onclick : "gotoPage",
 tooltip : "goto image number",
 icon : "page.png"
-},
-bird : {
-onclick : "showBirdDiv",
-tooltip : "show bird's eye view",
-icon : "birds-eye.png"
 },
 help : {
 onclick : "showAboutDiv",
 tooltip : "about Digilib",
 icon : "help.png"
 // defaults for digilib buttons
 'buttonSettings' : {
 'fullscreen' : {
 // path to button images (must end with a slash)
 'imagePath' : 'img/fullscreen/',
-'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","bird","help","reset","toggleoptions"],
+'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","help","reset","toggleoptions"],
 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","toggleoptions"],
 'buttonSets' : ['standardSet', 'specialSet']
 },
 'embedded' : {
 'imagePath' : 'img/embedded/16/',
-'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","bird","help","reset","toggleoptions"],
+'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","help","reset","toggleoptions"],
 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","scale","toggleoptions"],
 'buttonSets' : ['standardSet', 'specialSet']
 }
 },
 // number of visible button groups
 'visibleButtonSets' : 1,
-// is birdView shown?
-'isBirdDivVisible' : false,
-// dimensions of bird's eye div
-'birdDivWidth' : 200,
-'birdDivHeight' : 200,
-// parameters used by bird's eye div
-'birdDivParams' : ['fn','pn','dw','dh'],
 // is the "about" window shown?
 'isAboutDivVisible' : false,
-// maximum width of background image for drag-scroll
+// default size of background image for drag-scroll (same as Bird's Eye View image)
+'bgImgWidth' : 200,
+'bgImgHeight' : 200,
+// maximum width or height of background image for drag-scroll
 'maxBgSize' : 10000,
+// parameters used by background image
+'bgImgParams' : ['fn','pn','dw','dh','mo','rot'],
 // space to be left free in full page display, default value is for scrollbar
 'scalerInset' : 10
 };
 // list of plugins
 showButtons(data, true, i);
 }
 // create HTML structure for scaler, taking width of buttons div into account
 setupScalerDiv(data);
 highlightButtons(data);
-// bird's eye view creation
-if (elemSettings.isBirdDivVisible) {
-setupBirdDiv(data);
-data.$birdDiv.show();
-}
 // about window creation - TODO: could be deferred? restrict to only one item?
 setupAboutDiv(data);
-// drag zoom area around in scaler div
+// send setup event
-// setupZoomDrag(data); // is done in scalerImgLoadedHandler()
+$(data).trigger('setup');
 });
 },
 // destroy: clean up digilib
 destroy : function(data) {
 // show or hide the 'about' window
 showAboutDiv : function(data, show) {
 var on = showDiv(data.settings.isAboutDivVisible, data.$aboutDiv, show);
 data.settings.isAboutDivVisible = on;
 highlightButtons(data, 'help', on);
-},
-// event handler: toggles the visibility of the bird's eye window
-showBirdDiv : function (data, show) {
-var settings = data.settings;
-if (data.$birdDiv == null) {
-// no bird div -> create
-setupBirdDiv(data);
-}
-var on = showDiv(settings.isBirdDivVisible, data.$birdDiv, show);
-settings.isBirdDivVisible = on;
-highlightButtons(data, 'bird', on);
-updateBirdDiv(data);
-storeOptions(data);
 },
 // goto given page nr (+/-: relative)
 gotoPage : function (data, pageNr) {
 var settings = data.settings;
 var url = settings.scalerBaseUrl + '?' + queryString;
 return url;
 };
 // returns URL for bird's eye view image
-var getBirdImgUrl = function (data, moreParams) {
+var getBgImgUrl = function (data, moreParams) {
 var settings = data.settings;
-var birdDivOptions = {
+var bgOptions = {
-dw : settings.birdDivWidth,
+dw : settings.bgImgWidth,
-dh : settings.birdDivHeight
+dh : settings.bgImgHeight
 };
-var birdSettings = $.extend({}, settings, birdDivOptions);
+var bgSettings = $.extend({}, settings, bgOptions);
-// use only the relevant parameters
+// filter scaler flags
-if (moreParams == null) {
+if (bgSettings.mo != null) {
-var params = getParamString(birdSettings, settings.birdDivParams, defaults);
+var mo = '';
-} else {
+if (data.scalerFlags.hmir != null) {
-// filter scaler flags
+mo += 'hmir,';
-if (birdSettings.mo != null) {
+}
-var mo = '';
+if (data.scalerFlags.vmir != null) {
-if (data.scalerFlags.hmir != null) {
+mo += 'vmir';
-mo += 'hmir,';
+}
-}
+bgSettings.mo = mo;
-if (data.scalerFlags.vmir != null) {
+}
-mo += 'vmir';
+var params = getParamString(bgSettings, settings.bgImgParams, defaults);
-}
-birdSettings.mo = mo;
-}
-var params = getParamString(birdSettings,
-settings.birdDivParams.concat(moreParams), defaults);
-}
 var url = settings.scalerBaseUrl + '?' + params;
 return url;
 };
 // returns URL and query string for current digilib
 var url = getDigilibUrl(data);
 var history = window.history;
 if (typeof(history.pushState) === 'function') {
 console.debug("we could modify history, but we don't...");
 }
+// reload window
 window.location = url;
 } else {
 // embedded mode -- just change img src
 var url = getScalerUrl(data);
 data.$img.attr('src', url);
-// redisplay bird img
-updateBirdDiv(data);
 highlightButtons(data);
+// send event
+$(data).trigger('redisplay');
 }
 };
 // update display (overlays etc.)
 var updateDisplay = function (data) {
 updateImgTrafo(data);
 renderMarks(data);
 setupZoomDrag(data);
-if (data.settings.isBirdDivVisible) {
-renderBirdArea(data);
-setupBirdDrag(data);
-}
 // send event
 $(data).trigger('update');
 };
 // returns maximum size for scaler img in fullscreen mode
 data.$buttonSets[buttonSetIdx] = $buttonsDiv;
 }
 return $buttonsDiv;
 };
-// creates HTML structure for the bird's eye view in elem
-var setupBirdDiv = function (data) {
-var $elem = data.$elem;
-// the bird's eye div
-var $birdDiv = $('<div class="birdview" style="display:none"/>');
-// the detail indicator frame
-var $birdZoom = $('<div class="birdzoom" style="display:none; background-color:transparent;"/>');
-// the small image
-var $birdImg = $('<img class="birdimg"/>');
-data.$birdDiv = $birdDiv;
-data.$birdZoom = $birdZoom;
-data.$birdImg = $birdImg;
-$elem.append($birdDiv);
-$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) {
-if (!data.settings.isBirdDivVisible) return;
-var $birdImg = data.$birdImg;
-var oldsrc = $birdImg.attr('src');
-var newsrc = getBirdImgUrl(data);
-if (oldsrc !== newsrc) {
-$birdImg.attr('src', newsrc);
-// onload handler re-renders
-} else {
-// re-render
-renderBirdArea(data);
-// enable click and drag
-setupBirdDrag(data);
-}
-};
 // creates HTML structure for the about view in elem
 var setupAboutDiv = function (data) {
 var $elem = data.$elem;
 var settings = data.settings;
 var $aboutDiv = $('<div class="about" style="display:none"/>');
 // update display (render marks, etc.)
 updateDisplay(data);
 };
 };
-// returns function for load event of bird's eye view img
-var birdImgLoadedHandler = function (data) {
-return function () {
-var $birdImg = $(this);
-var birdRect = geom.rectangle($birdImg);
-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);
-}
-// update display (zoom area indicator)
-updateDisplay(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 $mark = $(html);
 $elem.append($mark);
 mpos.adjustDiv($mark);
 }
 }
-};
-// show zoom area indicator on bird's eye view
-var renderBirdArea = function (data) {
-if (data.$birdImg == null || ! data.$birdImg.get(0).complete) return;
-var $birdZoom = data.$birdZoom;
-var zoomArea = data.zoomArea;
-var normalSize = isFullArea(zoomArea);
-if (normalSize) {
-$birdZoom.hide();
-return;
-} else {
-$birdZoom.show();
-}
-// create Transform from current area and picsize
-data.birdTrafo = getImgTrafo(data.$birdImg, FULL_AREA);
-var zoomRect = data.birdTrafo.transform(zoomArea);
-console.debug("renderBirdArea:", zoomRect, "zoomArea:", zoomArea, "$birdTrafo:", data.birdTrafo);
-// acount for border width
-var bw = getBorderWidth($birdZoom);
-zoomRect.addPosition({x : -bw, y : -bw});
-if (data.settings.interactionMode === 'fullscreen') {
-// no animation for fullscreen
-zoomRect.adjustDiv($birdZoom);
-} else {
-// nice animation for embedded mode :-)
-// correct offsetParent because animate doesn't use offset
-var ppos = $birdZoom.offsetParent().offset();
-var dest = {
-left : (zoomRect.x - ppos.left) + 'px',
-top : (zoomRect.y - ppos.top) + 'px',
-width : zoomRect.width,
-height : zoomRect.height
-};
-$birdZoom.animate(dest);
-}
 };
 // zooms by the given factor
 var zoomBy = function(data, factor) {
 var area = data.zoomArea;
 $scaler.unbind('.dlZoomArea');
 $scaler.unbind(".dlZoomDrag");
 $elem.unbind('.dlZoomArea');
 // bind start zoom handler
 $scaler.one('mousedown.dlZoomArea', zoomStart);
-};
-// bird's eye view zoom area click and drag handler
-var setupBirdDrag = function(data) {
-var $birdImg = data.$birdImg;
-var $birdZoom = data.$birdZoom;
-var $document = $(document);
-var $scaler = data.$scaler;
-var startPos, newRect, birdImgRect, birdZoomRect, fullRect, scalerPos;
-var bw = getBorderWidth($birdZoom);
-// mousedown handler: start dragging bird zoom to a new position
-var birdZoomStartDrag = function(evt) {
-startPos = geom.position(evt);
-// position may have changed
-data.birdTrafo = getImgTrafo($birdImg, FULL_AREA);
-birdImgRect = geom.rectangle($birdImg);
-birdZoomRect = geom.rectangle($birdZoom);
-scalerPos = geom.position($scaler);
-newRect = null;
-fullRect = setZoomBG(data); // setup zoom background image
-$document.bind("mousemove.dlBirdMove", birdZoomMove);
-$document.bind("mouseup.dlBirdMove", birdZoomEndDrag);
-return false;
-};
-// mousemove handler: drag
-var birdZoomMove = function(evt) {
-var pos = geom.position(evt);
-var delta = startPos.delta(pos);
-// move birdZoom div, keeping size
-newRect = birdZoomRect.copy();
-newRect.addPosition(delta);
-newRect.stayInside(birdImgRect);
-// reflect birdview zoom position in scaler image
-var area = data.birdTrafo.invtransform(newRect);
-var imgArea = data.imgTrafo.transform(area);
-var offset = imgArea.getPosition().neg();
-offset.add(scalerPos);
-if (fullRect) {
-var bgPos = fullRect.getPosition().add(offset);
-} else {
-var bgPos = offset;
-}
-// move the background image to the new position
-data.$scaler.css({
-'background-position' : bgPos.x + "px " + bgPos.y + "px"
-});
-// acount for border width
-newRect.addPosition({x : -bw, y : -bw});
-newRect.adjustDiv($birdZoom);
-return false;
-};
-// mouseup handler: reload page
-var birdZoomEndDrag = function(evt) {
-var settings = data.settings;
-$document.unbind("mousemove.dlBirdMove", birdZoomMove);
-$document.unbind("mouseup.dlBirdMove", birdZoomEndDrag);
-if (newRect == null) {
-// no movement happened - set center to click position
-startPos = birdZoomRect.getCenter();
-birdZoomMove(evt);
-}
-// ugly, but needed to prevent double border width compensation
-newRect.addPosition({x : bw, y : bw});
-var newArea = data.birdTrafo.invtransform(newRect);
-data.zoomArea = newArea;
-redisplay(data);
-return false;
-};
-// clear old handler
-$document.unbind(".dlBirdMove");
-$birdImg.unbind(".dlBirdMove");
-$birdZoom.unbind(".dlBirdMove");
-if (! isFullArea(data.zoomArea)) {
-// set new handler
-$birdImg.bind("mousedown.dlBirdMove", birdZoomStartDrag);
-$birdZoom.bind("mousedown.dlBirdMove", birdZoomStartDrag);
-}
-};
-// move bird zoom indicator to reflect zoomed detail area
-var setBirdZoom = function(data, rect) {
-var part = data.imgTrafo.invtransform(rect);
-// area = FULL_AREA.fit(part); // no, we want to see where we transcend the borders
-birdTrafo = getImgTrafo(data.$birdImg, FULL_AREA);
-var birdRect = birdTrafo.transform(part);
-var $birdZoom = data.$birdZoom;
-// acount for border width
-var bw = getBorderWidth($birdZoom);
-birdRect.addPosition({x : -bw, y : -bw});
-birdRect.adjustDiv(data.$birdZoom);
 };
 // set zoom background
 var setZoomBG = function(data) {
 var $scaler = data.$scaler;
 fullRect = data.imgTrafo.transform(FULL_AREA);
 if (fullRect.height < data.settings.maxBgSize && fullRect.width < data.settings.maxBgSize) {
 // correct offset because background is relative
 var scalerPos = geom.position($scaler);
 fullRect.addPosition(scalerPos.neg());
-var url = getBirdImgUrl(data, ['rot', 'mo']);
+var url = getBgImgUrl(data);
 scalerCss['background-image'] = 'url(' + url + ')';
 scalerCss[data.bgSizeName] = fullRect.width + 'px ' + fullRect.height + 'px';
 scalerCss['background-position'] = fullRect.x + 'px '+ fullRect.y + 'px';
 } else {
 // too big
 // setup handlers for dragging the zoomed image
 var setupZoomDrag = function(data) {
 var startPos, delta, fullRect;
 var $document = $(document);
+var $data = $(data);
 var $elem = data.$elem;
 var $scaler = data.$scaler;
 var $img = data.$img;
 // drag the image and load a new detail on mouse up
 'background-position' : bgPos.x + "px " + bgPos.y + "px"
 });
 // set birdview indicator to reflect new zoom position
 var za = geom.rectangle($img);
 za.addPosition(delta.neg());
-setBirdZoom(data, za);
+$data.trigger('dragZoom', [za]);
+//TODO: setBirdZoom(data, za);
 return false;
 };
 // mouseup handler: reload zoomed image in new position
 var dragEnd = function (evt) {
 var border = $elem.outerWidth() - $elem.width();
 return border/2;
 };
 // auxiliary function (from old dllib.js)
-var isFullArea = function(area) {
+var isFullArea = function (area) {
 return (area.width === 1.0) && (area.height === 1.0);
 };
 // auxiliary function (from Douglas Crockford, A.10)
-var isNumber = function isNumber(value) {
+var isNumber = function (value) {
 return typeof value === 'number' && isFinite(value);
 };
 // auxiliary function to crop senseless precision
 var cropFloat = function (x) {
 }
 // functions to export to plugins
 fn = {
 geometry : geom,
-FULL_AREA : FULL_AREA,
 parseQueryString : parseQueryString,
 getScalerUrl : getScalerUrl,
 getParamString : getParamString,
 getDigilibUrl : getDigilibUrl,
 unpackParams : unpackParams,
 packParams : packParams,
+storeOptions : storeOptions,
 redisplay : redisplay,
 updateDisplay : updateDisplay,
+highlightButtons : highlightButtons,
 showDiv : showDiv,
+setZoomBG : setZoomBG,
 getImgTrafo : getImgTrafo,
 getQuality : getQuality,
 setQuality : setQuality,
 getScaleMode : getScaleMode,
 setScaleMode : setScaleMode,
-isFullArea : isFullArea
+isFullArea : isFullArea,
+getBorderWidth : getBorderWidth
 };
 // hook plugin into jquery
 $.fn.digilib = function (action) {
 // plugin extension mechanism