Mercurial > hg > digilib-old

changeset 983:66db81af85e1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
moved scroll arrows to separate plugin.
author robcast
date Fri, 27 Jan 2012 12:46:48 +0100
parents 9e6355f7df75
children 32ec05f60e1e
files webapp/src/main/webapp/jquery/digilib.html webapp/src/main/webapp/jquery/jquery.digilib.arrows.js webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js webapp/src/main/webapp/jquery/jquery.digilib.js
diffstat 4 files changed, 213 insertions(+), 120 deletions(-) [+]
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/digilib.html	Thu Jan 26 22:07:15 2012 +0100
+++ b/webapp/src/main/webapp/jquery/digilib.html	Fri Jan 27 12:46:48 2012 +0100
@@ -1,7 +1,7 @@
-<?xml version="1.0" ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
         <meta name="viewport" content="initial-scale=1.0"/>
         <title>Digilib jQuery: fullscreen</title>
 
@@ -15,6 +15,7 @@
         <script type="text/javascript" src="jquery.cookie.js"></script>
         <script type="text/javascript" src="jquery.digilib.js"></script>
         <script type="text/javascript" src="jquery.digilib.geometry.js"></script>
+        <script type="text/javascript" src="jquery.digilib.arrows.js"></script>
         <script type="text/javascript" src="jquery.digilib.buttons.js"></script>
         <script type="text/javascript" src="jquery.digilib.birdseye.js"></script>
         <script type="text/javascript" src="jquery.digilib.regions.js"></script>
--- /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);
--- a/webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js	Thu Jan 26 22:07:15 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js	Fri Jan 27 12:46:48 2012 +0100
@@ -60,8 +60,10 @@
         // add buttons
         $.extend(digilib.buttons, buttons);
         // insert in button list -- not elegant
-        digilib.defaults.buttonSettings.fullscreen.standardSet.splice(9, 0, 'bird');
-        digilib.defaults.buttonSettings.embedded.standardSet.splice(5, 0, 'bird');
+        if (digilib.defaults.buttonSettings != null) {
+            digilib.defaults.buttonSettings.fullscreen.standardSet.splice(9, 0, 'bird');
+            digilib.defaults.buttonSettings.embedded.standardSet.splice(5, 0, 'bird');
+        }
     };
 
     // plugin initialization
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js	Thu Jan 26 22:07:15 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.js	Fri Jan 27 12:46:48 2012 +0100
@@ -38,7 +38,7 @@
 
     var defaults = {
         // version of this script
-        'version' : 'jquery.digilib.js 2.1b2',
+        'version' : 'jquery.digilib.js 2.1.2b1',
         // logo url
         'logoUrl' : 'img/digilib-logo-text1.png',
         // homepage url (behind logo)
@@ -79,14 +79,6 @@
         // fullscreen = take parameters from page URL, keep state in page URL
         // embedded = take parameters from Javascript options, keep state inside object 
         'interactionMode' : 'fullscreen',
-        // 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,
         // is the "about" window shown?
         'isAboutDivVisible' : false,
         // default size of preview image for drag-scroll (same as Bird's Eye View image)
@@ -243,8 +235,6 @@
                 setupScalerDiv(data);
                 // about window creation - TODO: could be deferred? restrict to only one item?
                 setupAboutDiv(data);
-                // arrow overlays for moving zoomed detail
-                setupZoomArrows(data);
                 // send setup event
                 $(data).trigger('setup');
             });
@@ -346,24 +336,6 @@
             redisplay(data);
         },
 
-        /** 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);
-            setZoomArea(data, za);
-            redisplay(data);
-        },
-
         /** set a mark by clicking (or giving a position)
          * 
          * @param data
@@ -822,7 +794,7 @@
         }
     };
 
-    /** restrieve digilib options from a cookie
+    /** retrieve digilib options from a cookie
      * 
      */
     var retrieveOptions = function (data) {
@@ -932,7 +904,6 @@
         updateImgTrafo(data);
         renderMarks(data);
         setupZoomDrag(data);
-        renderZoomArrows(data);
     };
 
     /** returns maximum size for scaler img in fullscreen mode.
@@ -1036,92 +1007,6 @@
         $img.attr('src', scalerUrl);
     };
 
-    /** 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){
-            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 (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 : canMove(data, 0, -1)
-        }, {
-            name : 'down',
-            rect : geom.rectangle(r.x, r.y + r.height - aw, r.width, aw),
-            show : canMove(data, 0, 1)
-        }, {
-            name : 'left',
-            rect : geom.rectangle(r.x, r.y, aw, r.height),
-            show : canMove(data, -1, 0)
-        }, {
-            name : 'right',
-            rect : geom.rectangle(r.x + r.width - aw, r.y, aw, r.height),
-            show : 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);
-    };
-
     /** creates HTML structure for the about view in elem
      * 
      */
@@ -1755,6 +1640,7 @@
             redisplay : redisplay,
             updateDisplay : updateDisplay,
             showDiv : showDiv,
+            setZoomArea : setZoomArea,
             setPreviewBg : setPreviewBg,
             getImgTrafo : getImgTrafo,
             getQuality : getQuality,