Mercurial > hg > digilib-old

changeset 877:971b7122930f jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
arrows: got basic functionality working
author hertzhaft
date Thu, 17 Mar 2011 16:43:59 +0100
parents a5a460afb912
children f6e2e6831aaf
files client/digitallibrary/jquery/jquery.digilib.css client/digitallibrary/jquery/jquery.digilib.geometry.js client/digitallibrary/jquery/jquery.digilib.js
diffstat 3 files changed, 64 insertions(+), 60 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery.digilib.css	Thu Mar 17 12:20:36 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.css	Thu Mar 17 16:43:59 2011 +0100
@@ -66,13 +66,13 @@
 	opacity: 0.5;
 }
 
-div.region {
+div.digilib div.region {
     color: white;
 	font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
 }
 
-div.region a.regionnumber {
+div.digilib div.region a.regionnumber {
     color: white;
     text-decoration: none;
 	font-weight: bold;
@@ -84,11 +84,11 @@
     display: inline-block;
 }
 
-div.regioncontent {
+div.digilib div.regioncontent {
     display: none;
 }
 
-div.regionHTML {
+div.digilib div.regionHTML {
     display: none;
     position: absolute;
 	top: 100px;
@@ -101,7 +101,7 @@
 	z-index: 1000;
 }
 
-div.regionHTML a {
+div.digilib div.regionHTML a {
     color: white;
     text-decoration: none;
     font-size: 11px;
@@ -127,15 +127,18 @@
     margin-bottom: 20px;
 }
 
-div.arrow {
+div.digilib div.arrows {
+    display: none;
+}
+
+div.digilib div.arrows div.button {
     position: absolute;
     text-align: center;
     background-color: black;
     opacity: 0.08;
-    display: none;
-}
+    }
 
-div.arrow:hover {
+div.digilib div.arrows div.button:hover {
     opacity: 0.5;
 }
 
@@ -149,12 +152,14 @@
 	z-index: 100;
 }
 
-div.digilib.dl_fullscreen div.button:hover {
+div.digilib.dl_fullscreen div.buttons div.button:hover {
 	background-image: url('img/fullscreen/corona.png');
+	background-repeat: no-repeat;
 }
 
 div.digilib.dl_fullscreen div.button-on {
 	background-image: url('img/fullscreen/whitedisc.png');
+	background-repeat: no-repeat;
 }
 
 div.digilib.dl_fullscreen div.birdview {
@@ -178,7 +183,7 @@
 	z-index: 100;
 }
 
-div.digilib.dl_embedded div.button:hover {
+div.digilib.dl_embedded div.buttons div.button:hover {
 	background-color: black;
 }
 
@@ -191,3 +196,4 @@
 	bottom: 0px;
 	right: 0px;
 }
+
--- a/client/digitallibrary/jquery/jquery.digilib.geometry.js	Thu Mar 17 12:20:36 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.geometry.js	Thu Mar 17 16:43:59 2011 +0100
@@ -185,6 +185,12 @@
             this.y += pos.y;
             return this;
         };
+        // adds pos to the dimensions
+        that.enlarge = function(pos) {
+            this.width += pos.x;
+            this.height += pos.y;
+            return this;
+        };
         // sets the lower right corner to position pos
         that.setPt2 = function(pos) {
             this.width = pos.x - this.x;
--- a/client/digitallibrary/jquery/jquery.digilib.js	Thu Mar 17 12:20:36 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Thu Mar 17 16:43:59 2011 +0100
@@ -168,22 +168,22 @@
             },
         up : {
             onclick : ["moveZoomArea", 0, -1],
-            tooltip : "move up",
+            tooltip : "move zoom area up",
             icon : "up.png"
             },
         down : {
             onclick : ["moveZoomArea", 0, 1],
-            tooltip : "move down",
+            tooltip : "move zoom area down",
             icon : "down.png"
             },
         left : {
             onclick : ["moveZoomArea", -1, 0],
-            tooltip : "move left",
+            tooltip : "move zoom area left",
             icon : "left.png"
             },
         right : {
             onclick : ["moveZoomArea", 1, 0],
-            tooltip : "move right",
+            tooltip : "move zoom area right",
             icon : "right.png"
             },
         SEP : {
@@ -1061,7 +1061,7 @@
         $button.addClass('button-' + buttonName);
         $img.attr('src', icon);
         // create handler for the buttons
-        $a.bind('click.digilib', (function () {
+        $button.bind('click.digilib', (function () {
             // we create a new closure to capture the value of action
             if ($.isArray(action)) {
                 // the handler function calls digilib with action and parameters
@@ -1120,58 +1120,50 @@
     var setupZoomArrows = function (data) {
         var $elem = data.$elem;
         var settings = data.settings;
-        var show = settings.zoomArrows;
+        var show = settings.showZoomArrows;
         console.log('zoom arrows:', show);
         if (!show) return;
-        data.$arrows = {};
-        var $arrows = data.$arrows;
-        var info = settings.zoomArrowsInfo;
-        $.each(['up','down','left','right'], function(i, s){
-            var src = info.imagePath + info[s];
-            var $div = $('<div class="keep arrow arrow-' + s + '"/>');
-            var $img = $('<img src="' + src + '"/>');
-            $div.attr('title', s);
-            $img.attr('alt', s);
-            $div.append($img);
-            $elem.append($div);
-            $arrows[s] = $div;
-        });
-        $arrows.up.bind('click.digilib', function(event) {
-            //za.addPosition(delta.neg());
-            // transform back
-            // var newArea = data.imgTrafo.invtransform(za);
-            // data.zoomArea = FULL_AREA.fit(newArea);
-            redisplay(data);
-        });
-        $arrows.down.bind('click.digilib', function(event) {
-            redisplay(data);
-        });
-        $arrows.left.bind('click.digilib', function(event) {
-            redisplay(data);
-        });
-        $arrows.right.bind('click.digilib', function(event) {
-            redisplay(data);
-        });
+        var mode = settings.interactionMode;
+        var arrowNames = settings.buttonSettings[mode].arrowSet;
+        // arrow divs are marked with class "keep"
+        var $arrowsDiv = $('<div class="keep arrows"/>');
+        $elem.append($arrowsDiv);
+        // create all arrow buttons
+        $.each(arrowNames, function(i, arrowName){
+            createButton(data, $arrowsDiv, arrowName);
+            });
     };
 
     // size and show arrow overlays, called after scaler img is loaded
     var renderZoomArrows = function (data) {
-        if (!data.settings.zoomArrows) return;
-        if (isFullArea(data)) return;
-        var $arrows = data.$arrows;
-        var r = FULL_AREA.copy();
-        r.height = 0.05;
-        data.imgTrafo.transform(r).adjustDiv($arrows.up);
-        r.y = 0.95;
-        data.imgTrafo.transform(r).adjustDiv($arrows.down);
-        r = FULL_AREA.copy();
-        r.width = 0.05;
-        data.imgTrafo.transform(r).adjustDiv($arrows.left);
-        r.x = 0.95;
-        data.imgTrafo.transform(r).adjustDiv($arrows.right);
+        var settings = data.settings;
+        if (isFullArea(data) || !settings.showZoomArrows) return;
+        var $arrowsDiv = data.$elem.find('div.arrows');
+        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;
+            }
+        }
+        $arrowsDiv.show();
+        renderZoomArrow($arrowsDiv, 'up', geom.rectangle(r.x, r.y, r.width, aw));
+        renderZoomArrow($arrowsDiv, 'down', geom.rectangle(r.x, r.y + r.height - aw, r.width));
+        renderZoomArrow($arrowsDiv, 'left', geom.rectangle(r.x, r.y, aw, r.height));
+        renderZoomArrow($arrowsDiv, 'right', geom.rectangle(r.x + r.width - aw, r.y, aw, r.height));
+   };
+
+    // render a single zoom Arrow
+    var renderZoomArrow = function ($div, name, rect) {
+        var $arrow = $div.find('div.button-' + name);
+        rect.adjustDiv($arrow);
     };
 
-
     // creates HTML structure for the about view in elem
     var setupAboutDiv = function (data) {
         var $elem = data.$elem;