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

comparison client/digitallibrary/jquery/jquery.digilib.js @ 654:b3c05e1568cf jquery

zoomarea works now added rectangle and position constructors that take jQuery and event objects fixed bug in rectangle.contains

author	robcast
date	Fri, 21 Jan 2011 00:00:08 +0100
parents	b21c1a539af3
children	436e10669df8

comparison

equal deleted inserted replaced

-:b21c1a539af3
+:b3c05e1568cf
 onclick : ["zoomBy", 0.7],
 tooltip : "zoom out",
 img : "zoom-out.png"
 },
 zoomarea : {
-onclick : "javascript:zoomArea()",
+onclick : "zoomArea",
 tooltip : "zoom area",
 img : "zoom-area.png"
 },
 zoomfull : {
 onclick : "zoomFull",
 var geom = dlGeometry();
 var MAX_ZOOMAREA = geom.rectangle(0, 0, 1, 1);
 var actions = {
-// digilib initialization
+// 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 = {};
 // about window creation - TODO: could be deferred? restrict to only one item?
 setupAboutDiv(data);
 });
 },
-// clean up digilib
+// destroy: clean up digilib
 destroy : function(data) {
 return this.each(function(){
 var $elem = $(this);
-// Namespacing FTW
+$(window).unbind('.digilib'); // unbind all digilibs(?)
-$(window).unbind('.digilib'); // unbinds all digilibs(?)
 data.digilib.remove();
 $elem.removeData('digilib');
 });
 },
 },
 // zoom by a given factor
 zoomBy : function (data, factor) {
 zoomBy(data, factor);
+},
+// zoom interactively
+zoomArea : function (data) {
+zoomArea(data);
 },
 // zoom out to full page
 zoomFull : function (data, mode) {
 data.zoomArea = MAX_ZOOMAREA;
 return function () {
 console.debug("img loaded! this=", this, " data=", data);
 var area = data.zoomArea;
 // create Transform from current area and picsize
-var picpos = $img.offset();
+var picrect = geom.rectangle($img);
-var picrect = geom.rectangle(picpos.left, picpos.top, $img.width(), $img.height());
 var trafo = geom.transform();
 // subtract area offset and size
 trafo.concat(trafo.getTranslation(geom.position(- area.x, - area.y)));
 trafo.concat(trafo.getScale(geom.size(1/area.width, 1/area.height)));
 // scale to screen size
 var mpos = data.imgTrafo.transform(mark);
 // create mark
 var html = '<div class="mark">'+(i+1)+'</div>';
 var $mark = $(html);
 $elem.append($mark);
-$mark.offset({ left : mpos.x, top : mpos.y});
+$mark.offset({left : mpos.x, top : mpos.y});
 }
 }
 };
 // zooms by the given factor
 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);
+//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
+// rect.y -= 2;
+//moveElement(overlay, picRect);
+//showElement(overlay, true);
+// start event capturing
+//registerEvent("mousedown", overlay, zoomStart);
+//registerEvent("mousedown", this.scalerImg, zoomStart);
+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.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);
+clickRect.normalize();
+console.debug("clickRect.getArea()=",clickRect.getArea());
+if (clickRect.getArea() <= 5) {
+return false;
+}
+// hide zoom div
+$zoomDiv.remove();
+// unregister events
+$elem.unbind("mousemove.digilib", zoomMove);
+$elem.unbind("mouseup.digilib", zoomEnd);
+// clip and transform
+clickRect.clipTo(picRect);
+var area = data.imgTrafo.invtransform(clickRect);
+data.zoomArea = area;
+// 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();
+rect.clipTo(picRect);
+// 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)
 var setNumValue = function(settings, key, value) {
 if (isNumber(value)) return settings[key] = value;
 var sign = value.substring(0,1);