Mercurial > hg > digilib-old
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
653:b21c1a539af3 | 654:b3c05e1568cf |
---|---|
28 onclick : ["zoomBy", 0.7], | 28 onclick : ["zoomBy", 0.7], |
29 tooltip : "zoom out", | 29 tooltip : "zoom out", |
30 img : "zoom-out.png" | 30 img : "zoom-out.png" |
31 }, | 31 }, |
32 zoomarea : { | 32 zoomarea : { |
33 onclick : "javascript:zoomArea()", | 33 onclick : "zoomArea", |
34 tooltip : "zoom area", | 34 tooltip : "zoom area", |
35 img : "zoom-area.png" | 35 img : "zoom-area.png" |
36 }, | 36 }, |
37 zoomfull : { | 37 zoomfull : { |
38 onclick : "zoomFull", | 38 onclick : "zoomFull", |
203 var geom = dlGeometry(); | 203 var geom = dlGeometry(); |
204 | 204 |
205 var MAX_ZOOMAREA = geom.rectangle(0, 0, 1, 1); | 205 var MAX_ZOOMAREA = geom.rectangle(0, 0, 1, 1); |
206 | 206 |
207 var actions = { | 207 var actions = { |
208 // digilib initialization | 208 // init: digilib initialization |
209 init : function(options) { | 209 init : function(options) { |
210 // settings for this digilib instance are merged from defaults and options | 210 // settings for this digilib instance are merged from defaults and options |
211 var settings = $.extend({}, defaults, options); | 211 var settings = $.extend({}, defaults, options); |
212 var isFullscreen = settings.interactionMode === 'fullscreen'; | 212 var isFullscreen = settings.interactionMode === 'fullscreen'; |
213 var queryParams = {}; | 213 var queryParams = {}; |
259 // about window creation - TODO: could be deferred? restrict to only one item? | 259 // about window creation - TODO: could be deferred? restrict to only one item? |
260 setupAboutDiv(data); | 260 setupAboutDiv(data); |
261 }); | 261 }); |
262 }, | 262 }, |
263 | 263 |
264 // clean up digilib | 264 // destroy: clean up digilib |
265 destroy : function(data) { | 265 destroy : function(data) { |
266 return this.each(function(){ | 266 return this.each(function(){ |
267 var $elem = $(this); | 267 var $elem = $(this); |
268 // Namespacing FTW | 268 $(window).unbind('.digilib'); // unbind all digilibs(?) |
269 $(window).unbind('.digilib'); // unbinds all digilibs(?) | |
270 data.digilib.remove(); | 269 data.digilib.remove(); |
271 $elem.removeData('digilib'); | 270 $elem.removeData('digilib'); |
272 }); | 271 }); |
273 }, | 272 }, |
274 | 273 |
312 }, | 311 }, |
313 | 312 |
314 // zoom by a given factor | 313 // zoom by a given factor |
315 zoomBy : function (data, factor) { | 314 zoomBy : function (data, factor) { |
316 zoomBy(data, factor); | 315 zoomBy(data, factor); |
316 }, | |
317 | |
318 // zoom interactively | |
319 zoomArea : function (data) { | |
320 zoomArea(data); | |
317 }, | 321 }, |
318 | 322 |
319 // zoom out to full page | 323 // zoom out to full page |
320 zoomFull : function (data, mode) { | 324 zoomFull : function (data, mode) { |
321 data.zoomArea = MAX_ZOOMAREA; | 325 data.zoomArea = MAX_ZOOMAREA; |
706 | 710 |
707 return function () { | 711 return function () { |
708 console.debug("img loaded! this=", this, " data=", data); | 712 console.debug("img loaded! this=", this, " data=", data); |
709 var area = data.zoomArea; | 713 var area = data.zoomArea; |
710 // create Transform from current area and picsize | 714 // create Transform from current area and picsize |
711 var picpos = $img.offset(); | 715 var picrect = geom.rectangle($img); |
712 var picrect = geom.rectangle(picpos.left, picpos.top, $img.width(), $img.height()); | |
713 var trafo = geom.transform(); | 716 var trafo = geom.transform(); |
714 // subtract area offset and size | 717 // subtract area offset and size |
715 trafo.concat(trafo.getTranslation(geom.position(- area.x, - area.y))); | 718 trafo.concat(trafo.getTranslation(geom.position(- area.x, - area.y))); |
716 trafo.concat(trafo.getScale(geom.size(1/area.width, 1/area.height))); | 719 trafo.concat(trafo.getScale(geom.size(1/area.width, 1/area.height))); |
717 // scale to screen size | 720 // scale to screen size |
738 var mpos = data.imgTrafo.transform(mark); | 741 var mpos = data.imgTrafo.transform(mark); |
739 // create mark | 742 // create mark |
740 var html = '<div class="mark">'+(i+1)+'</div>'; | 743 var html = '<div class="mark">'+(i+1)+'</div>'; |
741 var $mark = $(html); | 744 var $mark = $(html); |
742 $elem.append($mark); | 745 $elem.append($mark); |
743 $mark.offset({ left : mpos.x, top : mpos.y}); | 746 $mark.offset({left : mpos.x, top : mpos.y}); |
744 } | 747 } |
745 } | 748 } |
746 }; | 749 }; |
747 | 750 |
748 // zooms by the given factor | 751 // zooms by the given factor |
773 data.marks.push(pos); | 776 data.marks.push(pos); |
774 redisplay(data); | 777 redisplay(data); |
775 return false; // do we even get here? | 778 return false; // do we even get here? |
776 }); | 779 }); |
777 }; | 780 }; |
781 | |
782 var zoomArea = function(data) { | |
783 $elem = data.$elem; | |
784 $scaler = data.$scaler; | |
785 var pt1, pt2; | |
786 var $zoomDiv = $('<div class="zoomrect" style="display:none"/>'); | |
787 $elem.append($zoomDiv); | |
788 //var overlay = getElement("overlay"); | |
789 // use overlay div to avoid <img> mousemove problems | |
790 var picRect = geom.rectangle($scaler); | |
791 // FIX ME: is there a way to query the border width from CSS info? | |
792 // rect.x -= 2; // account for overlay borders | |
793 // rect.y -= 2; | |
794 //moveElement(overlay, picRect); | |
795 //showElement(overlay, true); | |
796 // start event capturing | |
797 //registerEvent("mousedown", overlay, zoomStart); | |
798 //registerEvent("mousedown", this.scalerImg, zoomStart); | |
799 | |
800 var zoomStart = function (evt) { | |
801 pt1 = geom.position(evt); | |
802 // setup and show zoom div | |
803 //moveElement(zoomdiv, Rectangle(pt1.x, pt1.y, 0, 0)); | |
804 $zoomDiv.offset({left : pt1.x, top : pt1.y}); | |
805 $zoomDiv.show(); | |
806 // register events | |
807 $elem.bind("mousemove.digilib", zoomMove); | |
808 $elem.bind("mouseup.digilib", zoomEnd); | |
809 return false; | |
810 }; | |
811 | |
812 // mouseup handler: end moving | |
813 var zoomEnd = function (evt) { | |
814 pt2 = geom.position(evt); | |
815 // assume a click and continue if the area is too small | |
816 var clickRect = geom.rectangle(pt1, pt2); | |
817 clickRect.normalize(); | |
818 console.debug("clickRect.getArea()=",clickRect.getArea()); | |
819 if (clickRect.getArea() <= 5) { | |
820 return false; | |
821 } | |
822 // hide zoom div | |
823 $zoomDiv.remove(); | |
824 // unregister events | |
825 $elem.unbind("mousemove.digilib", zoomMove); | |
826 $elem.unbind("mouseup.digilib", zoomEnd); | |
827 // clip and transform | |
828 clickRect.clipTo(picRect); | |
829 var area = data.imgTrafo.invtransform(clickRect); | |
830 data.zoomArea = area; | |
831 // zoomed is always fit | |
832 data.settings.ws = 1; | |
833 redisplay(data); | |
834 return false; | |
835 }; | |
836 | |
837 // mouse move handler | |
838 var zoomMove = function (evt) { | |
839 pt2 = geom.position(evt); | |
840 var rect = geom.rectangle(pt1, pt2); | |
841 rect.normalize(); | |
842 rect.clipTo(picRect); | |
843 // update zoom div | |
844 $zoomDiv.offset({left : rect.x, top : rect.y}); | |
845 $zoomDiv.width(rect.width).height(rect.height); | |
846 return false; | |
847 }; | |
848 | |
849 // bind start zoom handler | |
850 $scaler.one('mousedown.digilib', zoomStart); | |
851 }; | |
778 | 852 |
779 // sets a key to a value (relative values with +/- if relative=true) | 853 // sets a key to a value (relative values with +/- if relative=true) |
780 var setNumValue = function(settings, key, value) { | 854 var setNumValue = function(settings, key, value) { |
781 if (isNumber(value)) return settings[key] = value; | 855 if (isNumber(value)) return settings[key] = value; |
782 var sign = value.substring(0,1); | 856 var sign = value.substring(0,1); |