# HG changeset patch
# User hertzhaft
# Date 1478051577 -3600
# Node ID 52b494fe393ff563aaa8a6055f0cbeca87e216bc
# Parent cf774d44a3db26a6aee00867427368d61da8d9d5
little zoominfo window; minimal frontend
diff -r cf774d44a3db -r 52b494fe393f webapp/src/main/webapp/jquery/digilib-minimal.html
--- /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 @@
+
+
+
+
+
+ Digilib jQuery: fullscreen
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
digilib doesn't work! Please switch on Javascript or notify the server administrator!
+

+
+
+
+
diff -r cf774d44a3db -r 52b494fe393f webapp/src/main/webapp/jquery/jquery.digilib.css
--- 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;
+}
diff -r cf774d44a3db -r 52b494fe393f webapp/src/main/webapp/jquery/jquery.digilib.js
--- 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 = '\
+ ';
+ 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);
};