Mercurial > hg > digilib

changeset 1564:52b494fe393f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
little zoominfo window; minimal frontend
author hertzhaft
date Wed, 02 Nov 2016 02:52:57 +0100
parents cf774d44a3db
children a0dcfe71b999
files webapp/src/main/webapp/jquery/digilib-minimal.html webapp/src/main/webapp/jquery/jquery.digilib.css webapp/src/main/webapp/jquery/jquery.digilib.js
diffstat 3 files changed, 112 insertions(+), 13 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/webapp/src/main/webapp/jquery/digilib-minimal.html	Wed Nov 02 02:52:57 2016 +0100
@@ -0,0 +1,50 @@
+<!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>
+
+        <style type="text/css">
+            body {
+                 background: silver;
+            }
+        </style>
+
+        <script type="text/javascript" src="jquery.js"></script>
+        <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.buttons.js"></script>
+        <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
+        <link rel="stylesheet" type="text/css" href="jquery.digilib.buttons-full-32-sprite.css" />
+
+        <script type="text/javascript">
+            $(document).ready(function(){
+                var $div = $('div#digilib');
+                var opts = {
+                    showZoomInfo: true,
+                    interactionMode: 'fullscreen',
+                    buttonSettings: {
+                        fullscreen: {
+                            imagePath: 'img/fullscreen/32/',
+                            buttonSetWidth: 36,
+                            standardSet: ["zoomin","zoomout","zoomarea","zoomfull","pagewidth","reset","about",],
+                            buttonSets: ['standardSet']
+                            },
+                         },
+                    };
+                $div.digilib(opts);
+            });
+
+        </script>
+    </head>
+
+    <body>
+        <div id="digilib">
+            <p>digilib doesn't work! Please switch on Javascript or notify the server administrator!</p>
+            <img src="http://digilib.sourceforge.net/images/digilib-logo-big.png" />
+        </div>
+    </body>
+</html>
+
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css	Tue Nov 01 22:12:46 2016 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.css	Wed Nov 02 02:52:57 2016 +0100
@@ -97,8 +97,10 @@
 	position: absolute;
 	padding: 10px;	
 	font-family: Verdana, Arial, Helvetica, sans-serif;
-	border: 2px solid aqua;
-	background-color: silver;
+	color: silver;
+	border: 1px solid black;
+	background-color: #303030;
+	border-radius: 5px;
 	text-align: center;
 	display: none;
 	z-index: 100;
@@ -107,13 +109,12 @@
 div.dl-digilib div.dl-region {
 	position: absolute;
 	border: none;
-    color: white;
+  color: white;
 	font-family: Verdana, Arial, Helvetica, sans-serif;
-    font-size: 11px;
+  font-size: 11px;
 	background-color: red;
-    opacity: 0.3;
+  opacity: 0.3;
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
-	filter: alpha(opacity=30);
 }
 
 div.dl-digilib div.dl-region a:link,
@@ -129,9 +130,8 @@
 div.dl-digilib div.dl-regionArea {
 	background-color: red;
 	border: none;
-    opacity: 0.3;
+  opacity: 0.3;
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
-	filter: alpha(opacity=30);
 }
 
 div.dl-digilib div.dl-regionHTML {
@@ -164,7 +164,6 @@
 	border: 5px solid aqua;
 	opacity: 0.8;
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-	filter: alpha(opacity=80);
 }
 
 div.dl-digilib div.dl-findregion {
@@ -172,7 +171,6 @@
 	border: 5px solid aqua;
 	opacity: 0.8;
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-	filter: alpha(opacity=80);
 }
 
 div.dl-digilib select.dl-finddata {
@@ -355,7 +353,6 @@
     background-color: black;
 	opacity: 0.3;
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
-	filter: alpha(opacity=30);
 }
 
 div.dl-digilib table.dl-scalertable img.button {
@@ -428,7 +425,6 @@
 	background-color: gray;
 	opacity: 0.5;
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-	filter: alpha(opacity=50);
 	z-index: 100;
 }
 
@@ -446,4 +442,13 @@
 	right: 0px;
 }
 
-
+#dl-zoominfo {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  padding: 3px;
+  border: 1px solid black;
+  border-radius: 5px;
+  background-color: #303030;
+  color: silver;
+}
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js	Tue Nov 01 22:12:46 2016 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.js	Wed Nov 02 02:52:57 2016 +0100
@@ -104,6 +104,8 @@
         'scalerInsets' : { 'x' : 26, 'y': 20 },
         // how transparent does the background image get while changing the zoom area?
         'scalerFadedOpacity' : 0.6,
+        // show a little window with file size and zoom information
+        'showZoomInfo' : false,
         // number of decimal places, for cropping parameters wx,wy,wh,ww
         'decimals' : 4
         };
@@ -263,6 +265,10 @@
                 // create HTML structure for scaler
                 setupScalerDiv(data);
                 // additional initializations before setup (e.g. for single nested settings)
+                if (settings.showZoomInfo) {
+                  actions.zoomInfo(data);
+                  loadImageInfo(data);
+                }
                 if (typeof hook === 'function') {
                   hook(data);
                   console.debug('init hook', hook, data);
@@ -322,6 +328,28 @@
             centerOnScreen(data, $about);
         },
 
+        /** show the 'zoominfo' window
+         * 
+         * @param data
+         */
+        zoomInfo : function(data) {
+            var $elem = data.$elem;
+            var settings = data.settings;
+            var cssPrefix = settings.cssPrefix;
+            var zoomInfoSelector = '#'+cssPrefix+'zoominfo';
+            if (isOnScreen(data, zoomInfoSelector)) {
+                $(zoomInfoSelector).fadeToggle();
+                return;
+            }
+            var html = '\
+                <div id="'+cssPrefix+'zoominfo" class="'+cssPrefix+'zoominfo" style="display:none">\
+                  <div id="'+cssPrefix+'zoominfo1" />\
+                  <div id="'+cssPrefix+'zoominfo2" />\
+                </div>';
+            var $zoominfo = $(html);
+            $zoominfo.appendTo($elem);
+        },
+
         /** goto given page nr (+/-: relative)
          * 
          * @param data
@@ -1062,6 +1090,20 @@
         var data = this;
         updateImgTrafo(data);
         setupZoomDrag(data);
+        updateZoomInfo(data);
+    };
+
+    var updateZoomInfo = function (data) {
+        if (!data.settings.showZoomInfo) {
+          return;
+        }
+        var $zoominfo = $('#'+data.settings.cssPrefix+'zoominfo');
+        // console.debug(data.$elem.width(), data.zoomArea.width, json.width);
+        var json = data.imgInfo;
+        var px = data.$img.width();
+        var percent = Math.round(px / data.zoomArea.width / json.width * 100);
+        $zoominfo.children().first().text(json.width+'x'+json.height);
+        $zoominfo.children().last().text('zoom '+percent+'%');
     };
 
     /** 
@@ -1304,6 +1346,8 @@
     var handleImageInfo = function (evt, json) {
         console.debug("handleImageInfo:", json);
         var data = this;
+        var $zoominfo = $('#'+data.settings.cssPrefix+'zoominfo');
+        $zoominfo.fadeIn();
         updateDisplay(data);
     };