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

comparison client/digitallibrary/jquery/jquery.digilib.js @ 665:0d3d9517e448 jquery

image transform works now under rotation!!! (at least for multiples of 90deg) rectangle has adjustDiv to postition and size a jQuery object rectangle constructor with two positions always returns a rectangle with positive width

author	robcast
date	Tue, 25 Jan 2011 17:47:36 +0100
parents	dcd64ecdd64a
children	1e9d7d92135c

comparison

equal deleted inserted replaced

-:dcd64ecdd64a
+:0d3d9517e448
 var settings = data.settings;
 // if (settings.interactionMode === 'fullscreen') {
 var $buttonsDiv = $('<div class="buttons"></div>');
 $elem.append($buttonsDiv);
 var mode = settings.interactionMode;
-var buttonSettings = settings.buttonSettings[mode]
+var buttonSettings = settings.buttonSettings[mode];
 var actionNames = buttonSettings[actionGroup];
 for (var i = 0; i < actionNames.length; i++) {
 var actionName = actionNames[i];
 var buttonConfig = settings.buttons[actionName];
 // construct the button html
 var $birdImg = $('<img class="birdimg"/>');
 $elem.append($birdDiv);
 $birdDiv.append($birdzoomDiv);
 $birdDiv.append($birdImg);
 $birdzoomDiv.css(data.settings.birdIndicatorStyle);
-// $birdzoomDiv.offset($birdDiv.offset());
-// $birdzoomDiv.width($birdDiv.width());
-// $birdzoomDiv.height($birdDiv.height());
 data.$birdDiv = $birdDiv;
 data.$birdImg = $birdImg;
 $birdImg.load(birdImgLoadedHandler(data));
 $birdImg.attr('src', birdUrl);
 if (data.settings.isBirdDivVisible) {
 trafo.concat(trafo.getScale(geom.size(1/area.width, 1/area.height)));
 // rotate
 if (data) {
 /* var rot = trafo.getRotationAround(parseFloat(data.settings.rot),
 geom.position(0.5 * area.width + area.x, 0.5 * area.height + area.y)); */
-var rot = trafo.getRotation(parseFloat(data.settings.rot));
+var rot = trafo.getRotationAround(parseFloat(data.settings.rot),
-var trans1 = trafo.getTranslation(geom.position(-0.5 * area.width + area.x, -0.5 * area.height + area.y));
+geom.position(0.5, 0.5));
-var trans2 = trafo.getTranslation(geom.position(0.5 * area.width + area.x, 0.5 * area.height + area.y));
-trafo.concat(trans1);
 trafo.concat(rot);
-trafo.concat(trans2);
 }
 // scale to screen position and size
 trafo.concat(trafo.getScale(picrect));
 trafo.concat(trafo.getTranslation(picrect));
-/* if (data && data.settings.rot) {
-var rot = trafo.getRotationAround(-data.settings.rot,
-geom.position(0.5 * picrect.width + picrect.x, 0.5 * picrect.height + picrect.y));
-//var trans1 = trafo.getTranslation(geom.position(-0.5*picrect.width, -0.5*picrect.height));
-//var rot = trafo.getRotation(data.settings.rot);
-//var trans2 = trafo.getTranslation(geom.position(0.5*picrect.width, 0.5*pirect.height));
-//trafo.concat(trans1);
-trafo.concat(rot);
-//trafo.concat(trans2);
-} */
 return trafo;
 };
 // returns function for load event of scaler img
 var scalerImgLoadedHandler = function (data) {
 return;
 };
 // nice animation for embedded mode :-)
 var makeCompleteFunction = function($ind, normalSize) {
 return function() {
-if (normalSize) $ind.hide(); }
+if (normalSize) $ind.hide();
+};
 };
 var opts = {
 'complete' : makeCompleteFunction($ind, normalSize)
 };
 if (!normalSize && $ind.css('display') === 'none') $ind.show();
 };
 // add a mark where clicked
 var setMark = function (data) {
 var $scaler = data.$scaler;
-console.debug("setmark");
 // start event capturing
 $scaler.one('click.digilib', function (evt) {
 // event handler adding a new mark
-console.debug("setmark.click evt=",evt);
+var mpos = geom.position(evt);
-var mpos = geom.position(evt.pageX, evt.pageY);
 var pos = data.imgTrafo.invtransform(mpos);
 data.marks.push(pos);
 redisplay(data);
 return false; // do we even get here?
 });
 $scaler = data.$scaler;
 var pt1, pt2;
 var $zoomDiv = $('<div class="zoomrect" style="display:none"/>');
 $elem.append($zoomDiv);
 $zoomDiv.css(data.settings.zoomrectStyle);
-//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));
 // 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();
 // 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});
+rect.adjustDiv($zoomDiv);
-$zoomDiv.width(rect.width).height(rect.height);
 return false;
 };
 // bind start zoom handler
 $scaler.one('mousedown.digilib', zoomStart);