Mercurial > hg > digilib-old
diff webapp/src/main/webapp/jquery/jquery.digilib.arrows.js @ 983:66db81af85e1
moved scroll arrows to separate plugin.
author | robcast |
---|---|
date | Fri, 27 Jan 2012 12:46:48 +0100 |
parents | |
children | f4757bf6ab65 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.arrows.js Fri Jan 27 12:46:48 2012 +0100 @@ -0,0 +1,204 @@ +/** + * digilib pan arrows for scrolling the zoomed area. + */ + +(function($) { + + // affine geometry + var geom; + // plugin object with digilib data + var digilib; + + var FULL_AREA; + + var buttons = { + stub : { + onclick : [ "doStub", 1 ], + tooltip : "what does this button do?", + icon : "stub.png" + } + }; + + var defaults = { + // arrow bar overlays for moving the zoomed area + 'showZoomArrows' : true, + // zoom arrow bar minimal width (for small images) + 'zoomArrowMinWidth' : 6, + // zoom arrow bar standard width + 'zoomArrowWidth' : 32, + // by what percentage should the arrows move the zoomed area? + 'zoomArrowMoveFactor' : 0.5, + }; + + var actions = { + /** + * move zoomed area + * + * @param data + * @param dx + * @param dy + */ + moveZoomArea : function(data, dx, dy) { + var za = data.zoomArea.copy(); + var factor = data.settings.zoomArrowMoveFactor; + var deltaX = dx * factor * za.width; + var deltaY = dy * factor * za.height; + var delta = geom.position(deltaX, deltaY); + za.addPosition(delta); + za = FULL_AREA.fit(za); + digilib.fn.setZoomArea(data, za); + digilib.fn.redisplay(data); + } + + }; + + // plugin installation called by digilib on plugin object. + var install = function(plugin) { + digilib = plugin; + console.debug('installing arrows plugin. digilib:', digilib); + // import geometry classes + geom = digilib.fn.geometry; + FULL_AREA = geom.rectangle(0, 0, 1, 1); + // add defaults, actions, buttons + $.extend(digilib.defaults, defaults); + $.extend(digilib.actions, actions); + $.extend(digilib.buttons, buttons); + }; + + // plugin initialization + var init = function(data) { + console.debug('initialising arrows plugin. data:', data); + var $data = $(data); + // install event handler + $data.bind('setup', handleSetup); + $data.bind('update', handleUpdate); + //$data.bind('redisplay', handleRedisplay); + }; + + var handleSetup = function(evt) { + console.debug("arrows: handleSetup"); + var data = this; + setupZoomArrows(data); + }; + + var handleUpdate = function(evt) { + console.debug("arrows: handleUpdate"); + var data = this; + renderZoomArrows(data); + }; + + var handleRedisplay = function(evt) { + console.debug("arrows: handleRedisplay"); + var data = this; + }; + + /** + * create arrow overlays for moving the zoomed area. + * + */ + var setupZoomArrows = function(data) { + var $elem = data.$elem; + var settings = data.settings; + var show = settings.showZoomArrows; + console.log('zoom arrows:', show); + if (!show) + return; + var mode = settings.interactionMode; + var arrowNames = settings.buttonSettings[mode].arrowSet; + if (arrowNames == null) + return; + // arrow divs are marked with class "keep" + var $arrowsDiv = $('<div class="keep arrows"/>'); + $elem.append($arrowsDiv); + // create all arrow buttons + // TODO: do this without buttons plugin? + $.each(arrowNames, function(i, arrowName) { + digilib.fn.createButton(data, $arrowsDiv, arrowName); + }); + }; + + /** + * size and show arrow overlays, called after scaler img is loaded. + * + */ + var renderZoomArrows = function(data) { + var settings = data.settings; + var $arrowsDiv = data.$elem.find('div.arrows'); + if (digilib.fn.isFullArea(data.zoomArea) || !settings.showZoomArrows) { + $arrowsDiv.hide(); + return; + } + $arrowsDiv.show(); + var r = geom.rectangle(data.$scaler); + // calculate arrow bar width + var aw = settings.zoomArrowWidth; + var minWidth = settings.zoomArrowMinWidth; + // arrow bar width should not exceed 10% of scaler width/height + var maxWidth = Math.min(r.width, r.height) / 10; + if (aw > maxWidth) { + aw = maxWidth; + if (aw < minWidth) { + aw = minWidth; + } + } + // vertical position of left/right image + var arrowData = [ { + name : 'up', + rect : geom.rectangle(r.x, r.y, r.width, aw), + show : digilib.fn.canMove(data, 0, -1) + }, { + name : 'down', + rect : geom.rectangle(r.x, r.y + r.height - aw, r.width, aw), + show : digilib.fn.canMove(data, 0, 1) + }, { + name : 'left', + rect : geom.rectangle(r.x, r.y, aw, r.height), + show : digilib.fn.canMove(data, -1, 0) + }, { + name : 'right', + rect : geom.rectangle(r.x + r.width - aw, r.y, aw, r.height), + show : digilib.fn.canMove(data, 1, 0) + } ]; + // render a single zoom Arrow + var render = function(i, item) { + var $arrow = $arrowsDiv.find('div.button-' + item.name); + if (item.show) { + $arrow.show(); + } else { + $arrow.hide(); + return; + } + var r = item.rect; + r.adjustDiv($arrow); + var $a = $arrow.contents('a'); + var $img = $a.contents('img'); + $img.width(aw).height(aw); + // hack for missing vertical-align + if (item.name.match(/left|right/)) { + var top = (r.height - $a.height()) / 2; + $a.css({ + 'top' : top + }); // position : 'relative' + } + }; + $.each(arrowData, render); + }; + + // plugin object with name and init + // shared objects filled by digilib on registration + var plugin = { + name : 'arrows', + install : install, + init : init, + buttons : {}, + actions : {}, + fn : {}, + plugins : {} + }; + + if ($.fn.digilib == null) { + $.error("jquery.digilib.arrows must be loaded after jquery.digilib!"); + } else { + $.fn.digilib('plugin', plugin); + } +})(jQuery);