Mercurial > hg > digilib-old
diff client/digitallibrary/jquery/jquery.digilib.js @ 647:2e817524992e jquery
set mark works now
setup of image transformation fixed
author | robcast |
---|---|
date | Thu, 20 Jan 2011 12:41:14 +0100 |
parents | 91d168f7dd0d |
children | 64cc32ec25de |
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery.digilib.js Wed Jan 19 20:41:25 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.js Thu Jan 20 12:41:14 2011 +0100 @@ -35,7 +35,7 @@ img : "zoom-area.png" }, zoomfull : { - onclick : "javascript:zoomFullpage()", + onclick : "zoomFullpage", tooltip : "view the whole image", img : "zoom-full.png" }, @@ -75,7 +75,7 @@ img : "reset.png" }, mark : { - onclick : "javascript:setMark()", + onclick : "setMark", tooltip : "set a mark", img : "mark.png" }, @@ -188,7 +188,7 @@ // path to button images (must end with a slash) 'buttonsImagePath' : '../greyskin/', // actions groups - 'actionsStandard' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","bird","SEP","help","reset","options"], + 'actionsStandard' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","mark","back","fwd","page","bird","SEP","help","reset","options"], 'actionsSpecial' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","SEP","options"], 'actionsCustom' : [], // is birdView shown? @@ -228,9 +228,8 @@ elemSettings = $.extend({}, settings, parseImgParams($elem)); } // store $(this) element in the settings - elemSettings.digilibRoot = $elem; data = { - target : $elem, + $elem : $elem, settings : elemSettings, queryParams : queryParams }; @@ -312,6 +311,28 @@ var $elem = $(this); var data = $elem.data('digilib'); zoomBy(data, factor); + }, + + // zoom out to full page + zoomFullpage : function () { + var $elem = $(this); + var data = $elem.data('digilib'); + data.zoomArea = MAX_ZOOMAREA; + redisplay(data); + }, + + // set a mark by clicking (or giving a position) + setMark : function (mpos) { + var $elem = $(this); + var data = $elem.data('digilib'); + if (mpos == null) { + // interactive + setMark(data); + } else { + // use position + data.marks.push(pos); + redisplay(data); + } } }; @@ -431,10 +452,10 @@ var settings = data.settings; // zoom area if (data.zoomArea) { - settings.wx = data.zoomArea.x; - settings.wy = data.zoomArea.y; - settings.ww = data.zoomArea.width; - settings.wh = data.zoomArea.height; + settings.wx = cropFloat(data.zoomArea.x); + settings.wy = cropFloat(data.zoomArea.y); + settings.ww = cropFloat(data.zoomArea.width); + settings.wh = cropFloat(data.zoomArea.height); } // marks if (data.marks) { @@ -475,7 +496,7 @@ // creates HTML structure for digilib in elem var setupScalerDiv = function (data) { var settings = data.settings; - var $elem = data.target; + var $elem = data.$elem; var $img; if (settings.interactionMode === 'fullscreen') { // fullscreen @@ -509,7 +530,7 @@ // creates HTML structure for buttons in elem var setupButtons = function (data, actionGroup) { - var $elem = data.target; + var $elem = data.$elem; var settings = data.settings; if (settings.interactionMode === 'fullscreen') { // fullscreen -- create new @@ -555,7 +576,7 @@ // creates HTML structure for the bird's eye view in elem var setupBirdDiv = function (data) { - var $elem = data.target; + var $elem = data.$elem; var settings = data.settings; // use only the relevant parameters var keys = ['fn','pn','dw','dh']; @@ -579,7 +600,7 @@ // creates HTML structure for the about view in elem var setupAboutDiv = function (data) { - var $elem = data.target; + var $elem = data.$elem; var settings = data.settings; var $aboutDiv = $('<div class="about" style="display:none"/>'); var $header = $('<p>Digilib Graphic Viewer</p>'); @@ -619,7 +640,7 @@ // returns function for load event of scaler img var scalerImgLoadedHandler = function (data) { var settings = data.settings; - var $elem = data.target; + var $elem = data.$elem; var $img = data.$img; return function () { @@ -630,7 +651,7 @@ 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.getTranslation(geom.position(- area.x, - area.y))); trafo.concat(trafo.getScale(geom.size(1/area.width, 1/area.height))); // scale to screen size trafo.concat(trafo.getScale(picrect)); @@ -647,7 +668,7 @@ // place marks on the image var renderMarks = function (data) { - var $elem = data.target; + var $elem = data.$elem; var marks = data.marks; for (var i = 0; i < marks.length; i++) { var mark = marks[i]; @@ -662,8 +683,8 @@ } }; + // zooms by the given factor var zoomBy = function(data, factor) { - // zooms by the given factor var area = data.zoomArea; var newarea = area.copy(); // scale @@ -677,6 +698,23 @@ redisplay(data); }; + // add a mark where clicked + var setMark = function (data) { + var $div = data.$elem; + var $img = data.$img; + console.debug("setmark"); + // start event capturing + $img.one('click.digilib', function (evt) { + // event handler adding a new mark + console.debug("setmark.click evt=",evt); + var mpos = geom.position(evt.pageX, evt.pageY); + var pos = data.imgTrafo.invtransform(mpos); + data.marks.push(pos); + redisplay(data); + //return stopEvent(evt); + }); + }; + // auxiliary function (from Douglas Crockford, A.10) var isNumber = function isNumber(value) { return typeof value === 'number' && isFinite(value);