Mercurial > hg > digilib-old
comparison client/digitallibrary/jquery/jquery.digilib.js @ 656:436e10669df8 jquery
first try at birdview indicator
author | hertzhaft |
---|---|
date | Fri, 21 Jan 2011 00:34:15 +0100 |
parents | 72acc47f1831 b3c05e1568cf |
children | 9ddcf0070122 |
comparison
equal
deleted
inserted
replaced
655:72acc47f1831 | 656:436e10669df8 |
---|---|
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 |
314 }, | 313 }, |
315 | 314 |
316 // zoom by a given factor | 315 // zoom by a given factor |
317 zoomBy : function (data, factor) { | 316 zoomBy : function (data, factor) { |
318 zoomBy(data, factor); | 317 zoomBy(data, factor); |
318 }, | |
319 | |
320 // zoom interactively | |
321 zoomArea : function (data) { | |
322 zoomArea(data); | |
319 }, | 323 }, |
320 | 324 |
321 // zoom out to full page | 325 // zoom out to full page |
322 zoomFull : function (data, mode) { | 326 zoomFull : function (data, mode) { |
323 data.zoomArea = MAX_ZOOMAREA; | 327 data.zoomArea = MAX_ZOOMAREA; |
734 | 738 |
735 return function () { | 739 return function () { |
736 console.debug("img loaded! this=", this, " data=", data); | 740 console.debug("img loaded! this=", this, " data=", data); |
737 var area = data.zoomArea; | 741 var area = data.zoomArea; |
738 // create Transform from current area and picsize | 742 // create Transform from current area and picsize |
739 var picpos = $img.offset(); | 743 var picrect = geom.rectangle($img); |
740 var picrect = geom.rectangle(picpos.left, picpos.top, $img.width(), $img.height()); | |
741 var trafo = geom.transform(); | 744 var trafo = geom.transform(); |
742 // subtract area offset and size | 745 // subtract area offset and size |
743 trafo.concat(trafo.getTranslation(geom.position(- area.x, - area.y))); | 746 trafo.concat(trafo.getTranslation(geom.position(- area.x, - area.y))); |
744 trafo.concat(trafo.getScale(geom.size(1/area.width, 1/area.height))); | 747 trafo.concat(trafo.getScale(geom.size(1/area.width, 1/area.height))); |
745 // scale to screen size | 748 // scale to screen size |
767 var mpos = data.imgTrafo.transform(mark); | 770 var mpos = data.imgTrafo.transform(mark); |
768 // create mark | 771 // create mark |
769 var html = '<div class="mark">'+(i+1)+'</div>'; | 772 var html = '<div class="mark">'+(i+1)+'</div>'; |
770 var $mark = $(html); | 773 var $mark = $(html); |
771 $elem.append($mark); | 774 $elem.append($mark); |
772 $mark.offset({ left : mpos.x, top : mpos.y}); | 775 $mark.offset({left : mpos.x, top : mpos.y}); |
773 } | 776 } |
774 } | 777 } |
775 }; | 778 }; |
776 | 779 |
777 // zooms by the given factor | 780 // zooms by the given factor |
802 data.marks.push(pos); | 805 data.marks.push(pos); |
803 redisplay(data); | 806 redisplay(data); |
804 return false; // do we even get here? | 807 return false; // do we even get here? |
805 }); | 808 }); |
806 }; | 809 }; |
810 | |
811 var zoomArea = function(data) { | |
812 $elem = data.$elem; | |
813 $scaler = data.$scaler; | |
814 var pt1, pt2; | |
815 var $zoomDiv = $('<div class="zoomrect" style="display:none"/>'); | |
816 $elem.append($zoomDiv); | |
817 //var overlay = getElement("overlay"); | |
818 // use overlay div to avoid <img> mousemove problems | |
819 var picRect = geom.rectangle($scaler); | |
820 // FIX ME: is there a way to query the border width from CSS info? | |
821 // rect.x -= 2; // account for overlay borders | |
822 // rect.y -= 2; | |
823 //moveElement(overlay, picRect); | |
824 //showElement(overlay, true); | |
825 // start event capturing | |
826 //registerEvent("mousedown", overlay, zoomStart); | |
827 //registerEvent("mousedown", this.scalerImg, zoomStart); | |
828 | |
829 var zoomStart = function (evt) { | |
830 pt1 = geom.position(evt); | |
831 // setup and show zoom div | |
832 //moveElement(zoomdiv, Rectangle(pt1.x, pt1.y, 0, 0)); | |
833 $zoomDiv.offset({left : pt1.x, top : pt1.y}); | |
834 $zoomDiv.show(); | |
835 // register events | |
836 $elem.bind("mousemove.digilib", zoomMove); | |
837 $elem.bind("mouseup.digilib", zoomEnd); | |
838 return false; | |
839 }; | |
840 | |
841 // mouseup handler: end moving | |
842 var zoomEnd = function (evt) { | |
843 pt2 = geom.position(evt); | |
844 // assume a click and continue if the area is too small | |
845 var clickRect = geom.rectangle(pt1, pt2); | |
846 clickRect.normalize(); | |
847 console.debug("clickRect.getArea()=",clickRect.getArea()); | |
848 if (clickRect.getArea() <= 5) { | |
849 return false; | |
850 } | |
851 // hide zoom div | |
852 $zoomDiv.remove(); | |
853 // unregister events | |
854 $elem.unbind("mousemove.digilib", zoomMove); | |
855 $elem.unbind("mouseup.digilib", zoomEnd); | |
856 // clip and transform | |
857 clickRect.clipTo(picRect); | |
858 var area = data.imgTrafo.invtransform(clickRect); | |
859 data.zoomArea = area; | |
860 // zoomed is always fit | |
861 data.settings.ws = 1; | |
862 redisplay(data); | |
863 return false; | |
864 }; | |
865 | |
866 // mouse move handler | |
867 var zoomMove = function (evt) { | |
868 pt2 = geom.position(evt); | |
869 var rect = geom.rectangle(pt1, pt2); | |
870 rect.normalize(); | |
871 rect.clipTo(picRect); | |
872 // update zoom div | |
873 $zoomDiv.offset({left : rect.x, top : rect.y}); | |
874 $zoomDiv.width(rect.width).height(rect.height); | |
875 return false; | |
876 }; | |
877 | |
878 // bind start zoom handler | |
879 $scaler.one('mousedown.digilib', zoomStart); | |
880 }; | |
807 | 881 |
808 // sets a key to a value (relative values with +/- if relative=true) | 882 // sets a key to a value (relative values with +/- if relative=true) |
809 var setNumValue = function(settings, key, value) { | 883 var setNumValue = function(settings, key, value) { |
810 if (isNumber(value)) return settings[key] = value; | 884 if (isNumber(value)) return settings[key] = value; |
811 var sign = value.substring(0,1); | 885 var sign = value.substring(0,1); |