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

comparison client/digitallibrary/jquery/jquery.digilib.js @ 723:123706249227 jquery

improved bird image handling. still some issues with bird image position in embedded mode.

author	robcast
date	Mon, 31 Jan 2011 16:24:31 +0100
parents	3da6db751448
children	c6878e9575fe

comparison

equal deleted inserted replaced

-:3da6db751448
+:123706249227
 showButtons(data, true, i);
 }
 // 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);
 // TODO: the actual moving code
 setupZoomDrag(data);
 if (data.$birdDiv == null) {
 // no bird div -> create
 setupBirdDiv(data);
 }
 data.settings.isBirdDivVisible = showDiv(data.settings.isBirdDivVisible, data.$birdDiv, show);
-data.$birdImg.triggerHandler('load');
+storeOptions(data);
+// data.$birdImg.triggerHandler('load'); // TODO: we shouldn't do that
 },
 // goto given page nr (+/-: relative)
 gotoPage : function (data, pageNr) {
 var settings = data.settings;
 var setIdx = settings.visibleButtonSets;
 if (showButtons(data, true, setIdx, true)) {
 settings.visibleButtonSets++;
 }
 }
+// persist setting
+storeOptions(data);
 },
 // reset image parameters to defaults
 reset : function (data) {
 var settings = data.settings;
 for (var i = 0; i < pa.length ; i++) {
 flags[pa[i]] = pa[i];
 }
 }
 data.scalerFlags = flags;
-retrieveOptionsCookie(data);
+retrieveOptions(data);
 };
 // put objects back into parameters
 var packParams = function (data) {
 var settings = data.settings;
 mo += f;
 }
 settings.mo = mo;
 }
 // user interface options
-storeOptionsCookie(data);
+storeOptions(data);
 };
-var storeOptionsCookie = function (data) {
+var storeOptions = function (data) {
 // save digilib options in cookie
 // TODO: in embedded mode this is not called
 /* store in parameter clop
 * if (data.dlOpts) {
 var clop = '';
 jQuery.cookie(ck, clop);
 }
 }
 };
-var retrieveOptionsCookie = function (data) {
+var retrieveOptions = function (data) {
 // clop (digilib options)
 var opts = {};
 var settings = data.settings;
 if (jQuery.cookie) {
 /* read from parameter clop
 data.$img.attr('src', url);
 // set scaler div size explicitly in case $img is hidden (for zoomDrag)
 $imgRect = geom.rectangle(data.$img);
 $imgRect.adjustDiv(data.$scaler);
 // load new bird img (in case the scalerUrl has changed, like in gotopage)
-showBirdDiv(data);
+//showBirdDiv(data); //TODO: change url explicitly
 }
 };
 // returns maximum size for scaler img in fullscreen mode
 var getFullscreenImgSize = function($elem) {
 data.$buttonSets[buttonSetIdx] = $buttonsDiv;
 }
 return $buttonsDiv;
 };
+// returns URL for bird's eye view image
+var getBirdImgUrl = function (data) {
+var settings = data.settings;
+var birdDivOptions = {
+dw : settings.birdDivWidth,
+dh : settings.birdDivHeight
+};
+var birdSettings = $.extend({}, settings, birdDivOptions);
+// use only the relevant parameters
+var birdUrl = settings.scalerBaseUrl + '?' +
+getParamString(birdSettings, settings.birdDivParams);
+return birdUrl;
+};
 // 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; position:absolute; background-color:transparent;"/>');
+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);
-data.$birdDiv = $birdDiv;
+var birdUrl = getBirdImgUrl(data);
-data.$birdZoom = $birdZoom;
-data.$birdImg = $birdImg;
 $birdImg.load(birdImgLoadedHandler(data));
-showBirdDiv(data);
+$birdImg.attr('src', birdUrl);
-birdZoom(data);
+};
+// 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);
+}
 };
-// puts correct img into bird div
-var showBirdDiv = function (data) {
-var settings = data.settings;
-var $birdImg = data.$birdImg;
-var $birdDiv = data.$birdDiv;
-var birdDivOptions = {
-dw : settings.birdDivWidth,
-dh : settings.birdDivHeight
-};
-var birdSettings = $.extend({}, settings, birdDivOptions);
-// use only the relevant parameters
-var birdUrl = settings.scalerBaseUrl + '?'
-+ getParamString(birdSettings, settings.birdDivParams);
-// the bird's eye div
-$birdImg.attr('src', birdUrl);
-if (settings.isBirdDivVisible) {
-$birdDiv.show();
-}
-};
 // 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"/>');
 return trafo;
 };
 // returns function for load event of scaler img
 var scalerImgLoadedHandler = function (data) {
-var $img = data.$img;
 return function () {
+var $img = $(this);
 console.debug("img loaded! this=", this, " data=", data);
 // create Transform from current area and picsize
 data.imgTrafo = getImgTrafo($img, data.zoomArea,
 data.settings.rot, data.scalerFlags.hmir, data.scalerFlags.vmir);
 console.debug("imgTrafo=", data.imgTrafo);
 // show image in case it was hidden (for example in zoomDrag)
 $img.show();
 // display marks
 renderMarks(data);
 // TODO: digilib.showArrows(); // show arrow overlays for zoom navigation
-var $birdImg = data.$birdImg;
-// should the birdview adapt to mirror or rotation? decision: No. :-)
-if ($birdImg) {
-$birdImg.triggerHandler('load');
-}
 };
 };
 // returns function for load event of bird's eye view img
 var birdImgLoadedHandler = function (data) {
-var $img = data.$birdImg;
 return function () {
+var $img = $(this);
 console.debug("birdimg loaded! this=", this, " data=", data);
 // create Transform from current area and picsize
 data.birdTrafo = getImgTrafo($img, MAX_ZOOMAREA);
 // display red indicator around zoomarea
-renderbirdZoom(data);
+renderBirdArea(data);
+// enable click and drag
+birdMoveArea(data);
 };
 };
 // place marks on the image
 var renderMarks = function (data) {
 }
 }
 };
 // show zoom area indicator on bird's eye view
-var renderbirdZoom = function (data) {
+var renderBirdArea = function (data) {
 var $birdZoom = data.$birdZoom;
 var zoomArea = data.zoomArea;
+var normalSize = isFullArea(zoomArea);
+if (normalSize) {
+$birdZoom.hide();
+return;
+} else {
+$birdZoom.show();
+}
 var indRect = data.birdTrafo.transform(zoomArea);
 var coords = {
 left : indRect.x-2, // acount for frame width
 top : indRect.y-2,
 width : indRect.width,
 height: indRect.height
 };
-var normalSize = isFullArea(zoomArea);
 if (data.settings.interactionMode === 'fullscreen') {
 // no animation for fullscreen
-if (normalSize) return $birdZoom.hide();
 $birdZoom.width(coords.width);
 $birdZoom.height(coords.height);
 $birdZoom.offset(coords);
-$birdZoom.show();
+} else {
-return;
+// nice animation for embedded mode :-)
-}
+$birdZoom.animate(coords, opts);
-// nice animation for embedded mode :-)
+}
-var makeCompleteFunction = function($birdZoom, normalSize) {
-return function() {
-if (normalSize) $birdZoom.hide();
-};
-};
-var opts = {
-'complete' : makeCompleteFunction($birdZoom, normalSize)
-};
-if (!normalSize && $birdZoom.css('display') === 'none') $birdZoom.show();
-$birdZoom.animate(coords, opts);
 };
 // zooms by the given factor
 var zoomBy = function(data, factor) {
 var area = data.zoomArea;
 // bind start zoom handler
 $scaler.one('mousedown.digilib', zoomStart);
 };
-var birdZoom = function(data) {
+// bird's eye view zoom area click and drag handler
+var birdMoveArea = function(data) {
 var $birdImg = data.$birdImg;
 var $birdZoom = data.$birdZoom;
 var startPos, newRect, birdImgRect, birdZoomRect;
 var birdZoomMove = function(evt) {