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

comparison client/digitallibrary/jquery/jquery.digilib.js @ 640:3f23600c96e5 jquery

set mark works now setup of image transformation fixed

author	robcast
date	Thu, 20 Jan 2011 12:41:14 +0100
parents	904a722c2149
children	1da6fc6f0bbb

comparison

equal deleted inserted replaced

-:904a722c2149
+:3f23600c96e5
 onclick : "javascript:zoomArea()",
 tooltip : "zoom area",
 img : "zoom-area.png"
 },
 zoomfull : {
-onclick : "javascript:zoomFullpage()",
+onclick : "zoomFullpage",
 tooltip : "view the whole image",
 img : "zoom-full.png"
 },
 pagewidth : {
 onclick : "javascript:zoomFullpage('width')",
 onclick : "javascript:resetImage()",
 tooltip : "reset image",
 img : "reset.png"
 },
 mark : {
-onclick : "javascript:setMark()",
+onclick : "setMark",
 tooltip : "set a mark",
 img : "mark.png"
 },
 delmark : {
 onclick : "javascript:removeMark()",
 // actions
 'actions' : actions,
 // 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?
 'isBirdDivVisible' : false,
 // dimensions of bird's eye window
 elemSettings = $.extend({}, settings, queryParams);
 } else {
 elemSettings = $.extend({}, settings, parseImgParams($elem));
 }
 // store $(this) element in the settings
-elemSettings.digilibRoot = $elem;
 data =  {
-target : $elem,
+$elem : $elem,
 settings : elemSettings,
 queryParams : queryParams
 };
 // store in data element
 $elem.data('digilib', data);
 // zoom by a given factor
 zoomBy : function (factor) {
 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);
+}
 }
 };
 // sets a key to a value (relative values with +/- if relative=true)
 var setNumValue = function(settings, key, value) {
 // put objects back into parameters
 var packParams = function (data) {
 var settings = data.settings;
 // zoom area
 if (data.zoomArea) {
-settings.wx = data.zoomArea.x;
+settings.wx = cropFloat(data.zoomArea.x);
-settings.wy = data.zoomArea.y;
+settings.wy = cropFloat(data.zoomArea.y);
-settings.ww = data.zoomArea.width;
+settings.ww = cropFloat(data.zoomArea.width);
-settings.wh = data.zoomArea.height;
+settings.wh = cropFloat(data.zoomArea.height);
 }
 // marks
 if (data.marks) {
 var ma = [];
 for (var i = 0; i < data.marks.length; i++) {
 };
 // 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
 var imgSize = getFullscreenImgSize($elem);
 settings.dw = imgSize.width;
 $img.load(scalerImgLoadedHandler(data));
 };
 // 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
 var $buttonsDiv = $('<div class="buttons"></div>');
 $elem.append($buttonsDiv);
 return $buttonsDiv;
 };
 // 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'];
 var birdSettings = $.extend({}, settings, settings.birdDivOptions);
 var birdUrl = settings.scalerBaseUrl + '?' + getParamString(birdSettings, keys);
 data.$birdDiv = $birdviewDiv;
 };
 // 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>');
 var $link = $('<a/>');
 var $logo = $('<img class="logo" title="digilib"/>');
 };
 // 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 () {
 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(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));
 trafo.concat(trafo.getTranslation(picrect));
 data.imgTrafo = trafo;
 };
 };
 // 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];
 if (data.zoomArea.containsPosition(mark)) {
 var mpos = data.imgTrafo.transform(mark);
 $mark.offset({ left : mpos.x, top : mpos.y});
 }
 }
 };
+// zooms by the given factor
 var zoomBy = function(data, factor) {
-// zooms by the given factor
 var area = data.zoomArea;
 var newarea = area.copy();
 // scale
 newarea.width /= factor;
 newarea.height /= factor;
 newarea = MAX_ZOOMAREA.fit(newarea);
 data.zoomArea = newarea;
 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);
 };