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

comparison client/digitallibrary/jquery/jquery.digilib.js @ 741:ee620bcf4ab0 jquery

image-drag now with full background image :-) if your browser supports background-size. and some cleanups.

author	robcast
date	Wed, 02 Feb 2011 20:03:36 +0100
parents	95987594a1b0
children	2b6d3ef57d68

comparison

equal deleted inserted replaced

-:95987594a1b0
+:ee620bcf4ab0
 // style of the zoom area indicator in the bird's eye div
 'birdIndicatorStyle' : {'border' : '2px solid #ff0000' },
 // style of zoom area "rubber band"
 'zoomrectStyle' : {'border' : '2px solid #ff0000' },
 // is the "about" window shown?
-'isAboutDivVisible' : false
+'isAboutDivVisible' : false,
+// maximum width of background image for drag-scroll
+'maxBgSize' : 10000
 };
 // affine geometry classes
 var geom = dlGeometry();
 };
 // store in data element
 $elem.data('digilib', data);
 }
 unpackParams(data);
+// check if browser knows background-size
+for (var bs in {'':1, '-moz-':1, '-webkit-':1, '-o-':1}) {
+if ($elem.css(bs+'background-size')) {
+data.hasBgSize = true;
+data.bgSizeName = bs+'background-size';
+break;
+}
+}
 // create HTML structure for scaler
 setupScalerDiv(data);
 // add buttons
 for (var i = 0; i < elemSettings.visibleButtonSets; ++i) {
 showButtons(data, true, i);
 return paramString;
 };
 // returns URL and query string for Scaler
 var getScalerUrl = function (data) {
+packParams(data);
 var settings = data.settings;
 if (settings.scalerBaseUrl == null) {
 alert("ERROR: URL of digilib Scaler servlet missing!");
 }
-packParams(data);
 var keys = settings.scalerParamNames;
 var queryString = getParamString(settings, keys, defaults);
 var url = settings.scalerBaseUrl + '?' + queryString;
 return url;
 };
+// 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 url = settings.scalerBaseUrl + '?' +
+getParamString(birdSettings, settings.birdDivParams);
+return url;
+};
 // returns URL and query string for current digilib
 var getDigilibUrl = function (data) {
 packParams(data);
 var settings = data.settings;
 var queryString = getParamString(settings, settings.digilibParamNames, defaults);
 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"/>');
 var imgRect = geom.rectangle($img);
 console.debug("imgrect=", imgRect);
 imgRect.adjustDiv($scaler);
 // show image in case it was hidden (for example in zoomDrag)
 $img.css('visibility', 'visible');
-$scaler.css('opacity', '1');
+$scaler.css({'opacity' : '1', 'background-image' : 'none'});
 // display marks
 renderMarks(data);
 // TODO: digilib.showArrows(); // show arrow overlays for zoom navigation
 };
 };
 $birdZoom.show();
 }
 // position may have changed
 data.birdTrafo = getImgTrafo(data.$birdImg, FULL_AREA);
 var zoomRect = data.birdTrafo.transform(zoomArea);
-// TODO: acount for frame width
+// acount for border width
+zoomRect.addPosition({x : -2, y : -2});
 if (data.settings.interactionMode === 'fullscreen') {
 // no animation for fullscreen
 zoomRect.adjustDiv($birdZoom);
 } else {
 // nice animation for embedded mode :-)
-// correct offsetParent because animate is relative
+// 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,
 $elem.bind("mousemove.dlZoomArea", zoomMove);
 $elem.bind("mouseup.dlZoomArea", zoomEnd);
 return false;
 };
+// mouse move handler
+var zoomMove = function (evt) {
+pt2 = geom.position(evt);
+var rect = geom.rectangle(pt1, pt2);
+rect.clipTo(picRect);
+// update zoom div
+rect.adjustDiv($zoomDiv);
+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);
 delete data.dlOpts.fitheight;
 redisplay(data);
 return false;
 };
-// mouse move handler
-var zoomMove = function (evt) {
-pt2 = geom.position(evt);
-var rect = geom.rectangle(pt1, pt2);
-rect.clipTo(picRect);
-// update zoom div
-rect.adjustDiv($zoomDiv);
-return false;
-};
 // clear old handler
 $scaler.unbind('.dlZoomArea');
 $elem.unbind('.dlZoomArea');
 // bind start zoom handler
 $scaler.one('mousedown.dlZoomArea', zoomStart);
 var setupBirdDrag = function(data) {
 var $birdImg = data.$birdImg;
 var $birdZoom = data.$birdZoom;
 var $document = $(document);
 var startPos, newRect, birdImgRect, birdZoomRect;
+// 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);
+newRect = null;
+$document.bind("mousemove.dlBirdMove", birdZoomMove);
+$document.bind("mouseup.dlBirdMove", birdZoomEndDrag);
+$birdZoom.bind("mousemove.dlBirdMove", birdZoomMove);
+$birdZoom.bind("mouseup.dlBirdMove", birdZoomEndDrag);
+return false;
+};
 // mousemove handler: drag
 var birdZoomMove = function(evt) {
 var pos = geom.position(evt);
 var delta = startPos.delta(pos);
 data.zoomArea = newArea;
 redisplay(data);
 return false;
 };
-// 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);
-$document.bind("mousemove.dlBirdMove", birdZoomMove);
-$document.bind("mouseup.dlBirdMove", birdZoomEndDrag);
-$birdZoom.bind("mousemove.dlBirdMove", birdZoomMove);
-$birdZoom.bind("mouseup.dlBirdMove", birdZoomEndDrag);
-return false;
-};
 // clear old handler
 $document.unbind(".dlBirdMove");
 $birdImg.unbind(".dlBirdMove");
 $birdZoom.unbind(".dlBirdMove");
 if (! isFullArea(data.zoomArea)) {
 }
 };
 // setup handlers for dragging the zoomed image
 var setupZoomDrag = function(data) {
-var startPos, delta;
+var startPos, delta, fullRect;
 var $document = $(document);
 var $elem = data.$elem;
 var $scaler = data.$scaler;
 var $img = data.$img;
 // drag the image and load a new detail on mouse up
 var dragStart = function (evt) {
 // don't start dragging if not zoomed
 if (isFullArea(data.zoomArea)) return false;
 startPos = geom.position(evt);
-$imgRect = geom.rectangle($img);
+fullRect = null;
-// hide the scaler img, show it as background of div instead
+delta = null;
+// hide the scaler img, show background of div instead
 $img.css('visibility', 'hidden');
-$scaler.css({
+var scalerCss = {
 'background-image' : 'url(' + $img.attr('src') + ')',
 'background-repeat' : 'no-repeat',
-'background-position' : 'top left',
+'background-position' : 'left top',
 'opacity' : '0.5',
 'cursor' : 'move'
-});
+};
+if (data.hasBgSize) {
+// full-size background using CSS3-background-size
+fullRect = data.imgTrafo.transform(FULL_AREA);
+if (fullRect.height < data.settings.maxBgSize && fullRect.width < data.settings.maxBgSize) {
+// correct offset because background is relative
+var scalePos = geom.position($scaler);
+fullRect.addPosition(scalePos.neg());
+scalerCss['background-image'] = 'url(' + getBirdImgUrl(data) + ')';
+scalerCss[data.bgSizeName] = fullRect.width + 'px ' + fullRect.height + 'px';
+scalerCss['background-position'] = fullRect.x + 'px '+ fullRect.y + 'px';
+} else {
+// too big
+fullRect = null;
+}
+}
+$scaler.css(scalerCss);
 $document.bind("mousemove.dlZoomDrag", dragMove);
 $document.bind("mouseup.dlZoomDrag", dragEnd);
 return false;
 };
 // mousemove handler: drag zoomed image
 var dragMove = function (evt) {
 var pos = geom.position(evt);
-delta = pos.delta(startPos);
+delta = startPos.delta(pos);
+if (fullRect) {
+var bgPos = fullRect.getPosition().add(delta);
+} else {
+var bgPos = delta;
+}
 // move the background image to the new position
 $scaler.css({
-'background-position' : (-delta.x) + "px " + (-delta.y) + "px"
+'background-position' : bgPos.x + "px " + bgPos.y + "px"
 });
 return false;
 };
 // mouseup handler: reload zoomed image in new position
 $document.unbind("mousemove.dlZoomDrag", dragMove);
 $document.unbind("mouseup.dlZoomDrag", dragEnd);
 if (delta == null || delta.distance() < 2) {
 // no movement
 $img.css('visibility', 'visible');
+$scaler.css({'opacity' : '1', 'background-image' : 'none'});
 return false;
 }
 // get old zoom area (screen coordinates)
-var za = data.imgTrafo.transform(data.zoomArea);
+var za = geom.rectangle($img);
 // move
-za.addPosition(delta);
+za.addPosition(delta.neg());
 // transform back
 var newArea = data.imgTrafo.invtransform(za);
 data.zoomArea = FULL_AREA.fit(newArea);
 redisplay(data);
 return false;
 };
 // clear old handler
 $document.unbind(".dlZoomDrag");
-$scaler.unbind(".dlBirdMove");
+$scaler.unbind(".dlZoomDrag");
+// set handler
 $scaler.bind("mousedown.dlZoomDrag", dragStart);
 };
 // get image quality as a number (0..2)
 var getQuality = function (data) {