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

comparison client/digitallibrary/jquery/jquery.digilib.js @ 678:d50d24b7fd95 jquery

first step at dragging birdview zoom indicator around

author	hertzhaft
date	Wed, 26 Jan 2011 01:01:53 +0100
parents	0233e39305d3
children	f774b56d3c1a

comparison

equal deleted inserted replaced

-:0233e39305d3
+:d50d24b7fd95
 // 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);
+data.$birdImg.triggerHandler('load');
 },
 // goto given page nr (+/-: relative)
 gotoPage : function (data, pageNr) {
 var settings = data.settings;
 } else {
 // embedded mode -- just change img src
 var url = getScalerUrl(data);
 data.$img.attr('src', url);
 // and update bird's eye view
-if (settings.isBirdDivVisible) {
+//if (settings.isBirdDivVisible) {
-renderBirdArea(data);
+//    renderBirdZoom(data);
-}
+//}
 };
 };
 // returns maximum size for scaler img in fullscreen mode
 var getFullscreenImgSize = function($elem) {
 var birdSettings = $.extend({}, settings, birdDivOptions);
 var birdUrl = settings.scalerBaseUrl + '?' + getParamString(birdSettings, keys);
 // the bird's eye div
 var $birdDiv = $('<div class="birdview" style="display:none"/>');
 // the detail indicator frame
-var $birdzoomDiv = $('<div class="birdzoom" style="display:none; position:absolute; background-color:transparent;"/>');
+var $birdZoom = $('<div class="birdZoom" style="display:none; position:absolute; background-color:transparent;"/>');
 // the small image
 var $birdImg = $('<img class="birdimg"/>');
 $elem.append($birdDiv);
-$birdDiv.append($birdzoomDiv);
+$birdDiv.append($birdZoom);
 $birdDiv.append($birdImg);
-$birdzoomDiv.css(data.settings.birdIndicatorStyle);
+$birdZoom.css(data.settings.birdIndicatorStyle);
 data.$birdDiv = $birdDiv;
+data.$birdZoom = $birdZoom;
 data.$birdImg = $birdImg;
-data.$birdZoom = $birdzoomDiv;
 $birdImg.load(birdImgLoadedHandler(data));
 $birdImg.attr('src', birdUrl);
 if (data.settings.isBirdDivVisible) {
 $birdDiv.fadeIn();
-}
+};
+birdZoom(data);
 };
 // creates HTML structure for the about view in elem
 var setupAboutDiv = function (data) {
 var $elem = data.$elem;
 // scale to screen position and size
 trafo.concat(trafo.getScale(picrect));
 trafo.concat(trafo.getTranslation(picrect));
 return trafo;
 };
 // returns function for load event of scaler img
 var scalerImgLoadedHandler = function (data) {
 var $img = data.$img;
 return function () {
 console.debug("img loaded! this=", this, " data=", data);
 data.imgTrafo = getImgTrafo($img, data.zoomArea,
 data.settings.rot, data.scalerFlags.hmir, data.scalerFlags.vmir);
 // display marks
 renderMarks(data);
 //digilib.showArrows(); // show arrow overlays for zoom navigation
-/* var $birdImg = data.$birdImg;
+var $birdImg = data.$birdImg;
 if ($birdImg) {
 $birdImg.triggerHandler('load');
-}; */
+};
 };
 };
 // returns function for load event of bird's eye view img
 var birdImgLoadedHandler = function (data) {
 return function () {
 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
-renderBirdArea(data);
+renderbirdZoom(data);
 };
 };
 // place marks on the image
 var renderMarks = function (data) {
 }
 }
 };
 // show zoom area indicator on bird's eye view
-var renderBirdArea = function (data) {
+var renderbirdZoom = function (data) {
-var $birdzoom = data.$birdZoom;
+var $birdZoom = data.$birdZoom;
 var zoomArea = data.zoomArea;
 var indRect = data.birdTrafo.transform(zoomArea);
 var coords = {
 left : indRect.x-2, // acount for frame width
 top : indRect.y-2,
 height: indRect.height
 };
 var normalSize = isFullArea(zoomArea);
 if (data.settings.interactionMode === 'fullscreen') {
 // no animation for fullscreen
-if (normalSize) return $birdzoom.hide();
+if (normalSize) return $birdZoom.hide();
-$birdzoom.width(coords.width);
+$birdZoom.width(coords.width);
-$birdzoom.height(coords.height);
+$birdZoom.height(coords.height);
-$birdzoom.offset(coords);
+$birdZoom.offset(coords);
-$birdzoom.show();
+$birdZoom.show();
 return;
 };
 // nice animation for embedded mode :-)
-var makeCompleteFunction = function($birdzoom, normalSize) {
+var makeCompleteFunction = function($birdZoom, normalSize) {
 return function() {
-if (normalSize) $birdzoom.hide();
+if (normalSize) $birdZoom.hide();
 };
 };
 var opts = {
-'complete' : makeCompleteFunction($birdzoom, normalSize)
+'complete' : makeCompleteFunction($birdZoom, normalSize)
 };
-if (!normalSize && $birdzoom.css('display') === 'none') $birdzoom.show();
+if (!normalSize && $birdZoom.css('display') === 'none') $birdZoom.show();
-$birdzoom.animate(coords, opts);
+$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) {
+var $birdImg = data.$birdImg;
+var $birdZoom = data.$birdZoom;
+var startPos, newRect, birdImgRect, birdZoomRect;
+var birdZoomMove = function(evt) {
+// mousemove handler: drag
+var pos = geom.position(evt);
+var dx = pos.x - startPos.x;
+var dy = pos.y - startPos.y;
+// move birdZoom div, keeping size
+newRect = geom.rectangle(
+birdZoomRect.x + dx,
+birdZoomRect.y + dy,
+birdZoomRect.width,
+birdZoomRect.height
+);
+// stay within birdimage
+newRect.stayInside(birdImgRect);
+$birdZoom.offset({left : newRect.x, top : newRect.y});
+// $birdZoom.show();
+return false;
+};
+var birdZoomEndDrag = function(evt) {
+// mouseup handler: reload page
+var settings = data.settings;
+$birdImg.unbind("mousemove.digilib", birdZoomMove);
+$birdImg.unbind("mouseup.digilib", birdZoomEndDrag);
+if (newRect == null) { // no movement happened
+startPos = birdZoomRect.getCenter();
+birdZoomMove(evt); // set center to click position
+};
+if (data.zoomArea) {
+settings.wx = cropFloat((newRect.x - birdImgRect.x) / birdImgRect.width);
+settings.wy = cropFloat((newRect.y - birdImgRect.y) / birdImgRect.height);
+};
+settings.ws = 1; // zoomed is always fit
+redisplay(data);
+return false;
+};
+var birdZoomStartDrag = function(evt) {
+// mousedown handler: start dragging bird zoom to a new position
+startPos = geom.position(evt);
+birdImgRect = geom.rectangle($birdImg);
+birdZoomRect = geom.rectangle($birdZoom);
+$birdImg.bind("mousemove.digilib", birdZoomMove);
+$birdImg.bind("mouseup.digilib", birdZoomEndDrag);
+return false;
+};
+$birdImg.one("mousedown.digilib", birdZoomStartDrag);
+// $birdZoom.one("mousedown.digilib", birdZoomStartDrag);
+};
 // sets a key to a value (relative values with +/- if relative=true)
 var setNumValue = function(settings, key, value) {
 if (isNumber(value)) return settings[key] = value;
 var sign = value.substring(0,1);
 if (sign === '+' || sign === '-') {