Mercurial > hg > digilib-old
changeset 808:ae8e98c479d5 jquery
stub for new plugins; overlay div for regions plugin
author | hertzhaft |
---|---|
date | Sun, 20 Feb 2011 13:24:49 +0100 |
parents | 1b1728926534 |
children | 2985cdae5414 |
files | client/digitallibrary/jquery/jquery-digilib-plugins.txt client/digitallibrary/jquery/jquery-test-full.html client/digitallibrary/jquery/jquery.digilib.birdseye.js client/digitallibrary/jquery/jquery.digilib.pluginstub.js client/digitallibrary/jquery/jquery.digilib.regions.js |
diffstat | 5 files changed, 141 insertions(+), 34 deletions(-) [+] |
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery-digilib-plugins.txt Sun Feb 20 11:55:51 2011 +0100 +++ b/client/digitallibrary/jquery/jquery-digilib-plugins.txt Sun Feb 20 13:24:49 2011 +0100 @@ -40,3 +40,8 @@ "update", updateDisplay(): after small updates in the display, e.g. when the scaler-img finished loading. "redisplay", redisplay(): after changes in the display, e.g. after changing zoom factor. "dragZoom(newZoomArea)": while dragging the zoom area (with parameter newZoomArea). + +* initial options for the plugin can be passed to digilib, together with digilib options, by passing an object to the 'digilib' function: $div.digilib(options); +The passed options extend/override the default digilib options. The options are stored in the "data.settings" array. + +* A functional stub for new digilib plugins is available in the file "jquery.digilib.pluginstub.js"
--- a/client/digitallibrary/jquery/jquery-test-full.html Sun Feb 20 11:55:51 2011 +0100 +++ b/client/digitallibrary/jquery/jquery-test-full.html Sun Feb 20 13:24:49 2011 +0100 @@ -61,6 +61,7 @@ <script type="text/javascript" src="jquery.digilib.geometry.js"></script> <script type="text/javascript" src="jquery.digilib.birdseye.js"></script> <script type="text/javascript" src="jquery.digilib.regions.js"></script> + <script type="text/javascript" src="jquery.digilib.pluginstub.js"></script> <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
--- a/client/digitallibrary/jquery/jquery.digilib.birdseye.js Sun Feb 20 11:55:51 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.birdseye.js Sun Feb 20 13:24:49 2011 +0100 @@ -45,6 +45,7 @@ // plugin installation called by digilib on plugin object. var install = function(digilib) { + console.debug('installing birdseye plugin. digilib:', digilib); // import geometry classes geom = digilib.fn.geometry; FULL_AREA = geom.rectangle(0,0,1,1); @@ -61,6 +62,7 @@ // plugin initialization var init = function (data) { + console.debug('initialising birdseye plugin. data:', data); var $data = $(data); // install event handler $data.bind('setup', handleSetup); @@ -305,7 +307,7 @@ // plugin object with name and init // shared objects filled by digilib on registration - var digilib = { + var plugin = { name : 'birdseye', install : install, init : init, @@ -318,6 +320,6 @@ if ($.fn.digilib == null) { $.error("jquery.digilib.birdview must be loaded after jquery.digilib!"); } else { - $.fn.digilib('plugin', digilib); + $.fn.digilib('plugin', plugin); } })(jQuery);
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/digitallibrary/jquery/jquery.digilib.pluginstub.js Sun Feb 20 13:24:49 2011 +0100 @@ -0,0 +1,95 @@ +/** +digilib plugin stub + */ + +(function($) { + + var geom; + + var FULL_AREA; + + var buttons = { + stub : { + onclick : ["doStub", 1], + tooltip : "what does this button do?", + icon : "stub.png" + } + }; + + var defaults = { + // is stub active? + 'isStubActive' : true + }; + + var actions = { + // action code goes here + doStub : function (data, param) { + var settings = data.settings; + console.log('isStubActive', settings.isStubActive); + // do some useful stuff ... + } + }; + + // plugin installation called by digilib on plugin object. + var install = function(digilib) { + console.debug('installing stub plugin. digilib:', digilib); + // import geometry classes + geom = digilib.fn.geometry; + FULL_AREA = geom.rectangle(0,0,1,1); + // add defaults + $.extend(digilib.defaults, defaults); + // add actions + $.extend(digilib.actions, actions); + // add buttons + $.extend(digilib.buttons, buttons); + }; + + // plugin initialization + var init = function (data) { + console.debug('initialising stub plugin. data:', data); + var $data = $(data); + // install event handler + $data.bind('setup', handleSetup); + $data.bind('update', handleUpdate); + $data.bind('redisplay', handleRedisplay); + $data.bind('dragZoom', handleDragZoom); + }; + + + var handleSetup = function (evt) { + console.debug("stub: handleSetup"); + var data = this; + }; + + var handleUpdate = function (evt) { + console.debug("stub: handleUpdate"); + var data = this; + }; + + var handleRedisplay = function (evt) { + console.debug("stub: handleRedisplay"); + var data = this; + }; + + var handleDragZoom = function (evt, zoomArea) { + var data = this; + }; + + // plugin object with name and init + // shared objects filled by digilib on registration + var plugin = { + name : 'pluginstub', + install : install, + init : init, + buttons : {}, + actions : {}, + fn : {}, + plugins : {} + }; + + if ($.fn.digilib == null) { + $.error("jquery.digilib.pluginstub must be loaded after jquery.digilib!"); + } else { + $.fn.digilib('plugin', plugin); + } +})(jQuery);
--- a/client/digitallibrary/jquery/jquery.digilib.regions.js Sun Feb 20 11:55:51 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.regions.js Sun Feb 20 13:24:49 2011 +0100 @@ -53,61 +53,66 @@ }; var actions = { + // define a region interactively with two clicked points "setRegion" : function(data) { var $elem = data.$elem; + var $body = $('body'); + var bodyRect = geom.rectangle($body); var $scaler = data.$scaler; - var picRect = geom.rectangle($scaler); + var scalerRect = geom.rectangle($scaler); var pt1, pt2; - // TODO: temporary rectangle only, pass values to "addRegion" factory - var $tempDiv = $('<div class="region" style="display:none"/>'); - $elem.append($tempDiv); + // overlay prevents other elements from reacting to mouse events + var $overlay = $('<div class="digilib-overlay"/>'); + $body.append($overlay); + bodyRect.adjustDiv($overlay); + // the region to be defined + var $regionDiv = $('<div class="region" style="display:none"/>'); + $elem.append($regionDiv); + // mousedown handler: start sizing var regionStart = function (evt) { pt1 = geom.position(evt); // setup and show zoom div - pt1.adjustDiv($tempDiv); - $tempDiv.width(0).height(0); - $tempDiv.show(); - // register events - $elem.bind("mousemove.dlRegion", regionMove); - $elem.bind("mouseup.dlRegion", regionEnd); + pt1.adjustDiv($regionDiv); + $regionDiv.width(0).height(0); + $regionDiv.show(); + // register mouse events + $overlay.bind("mousemove.dlRegion", regionMove); + $overlay.bind("mouseup.dlRegion", regionEnd); return false; }; - // mouse move handler + // mousemove handler: size region var regionMove = function (evt) { pt2 = geom.position(evt); var rect = geom.rectangle(pt1, pt2); - rect.clipTo(picRect); - // update zoom div - rect.adjustDiv($tempDiv); + rect.clipTo(scalerRect); + // update region + rect.adjustDiv($regionDiv); return false; }; - // mouseup handler: end moving + // mouseup handler: end sizing var regionEnd = function (evt) { pt2 = geom.position(evt); // assume a click and continue if the area is too small var clickRect = geom.rectangle(pt1, pt2); if (clickRect.getArea() <= 5) return false; - // unregister events - $elem.unbind("mousemove.dlRegion", regionMove); - $elem.unbind("mouseup.dlRegion", regionEnd); - // clip and transform - clickRect.clipTo(picRect); - clickRect.adjustDiv($tempDiv); - $tempDiv.remove(); - data.settings.regions.push(clickRect); + // unregister mouse events and get rid of overlay + $overlay.unbind("mousemove.dlRegion", regionMove); + $overlay.unbind("mouseup.dlRegion", regionEnd); + $overlay.remove(); + // clip region + clickRect.clipTo(scalerRect); + clickRect.adjustDiv($regionDiv); + data.settings.regions.push(clickRect); // TODO: trafo, params // fn.redisplay(data); return false; }; - // clear old handler (also ZoomDrag) - $scaler.unbind('.dlRegion'); - $elem.unbind('.dlRegion'); // bind start zoom handler - $scaler.one('mousedown.dlRegion', regionStart); + $overlay.one('mousedown.dlRegion', regionStart); }, // remove the last added region @@ -218,14 +223,13 @@ // plugin installation called by digilib on plugin object. var install = function(digilib) { + console.debug('installing regions plugin. digilib:', digilib); // import geometry classes geom = digilib.fn.geometry; FULL_AREA = geom.rectangle(0,0,1,1); - // add defaults + // add defaults, actions, buttons $.extend(digilib.defaults, defaults); - // add actions $.extend(digilib.actions, actions); - // add buttons $.extend(digilib.buttons, buttons); }; @@ -248,7 +252,7 @@ $data.bind('dragZoom', handleDragZoom); }; - // plugin object with name and init + // plugin object with name and install/init methods // shared objects filled by digilib on registration var pluginProperties = { name : 'region', @@ -261,7 +265,7 @@ }; if ($.fn.digilib == null) { - $.error("jquery.digilib.birdview must be loaded after jquery.digilib!"); + $.error("jquery.digilib.regions must be loaded after jquery.digilib!"); } else { $.fn.digilib('plugin', pluginProperties); }