Mercurial > hg > digilib-old
changeset 1107:365f95a14057
factor out defineArea, using overlay div
| author | hertzhaft |
|---|---|
| date | Sat, 27 Oct 2012 00:06:29 +0200 |
| parents | 68756216e018 |
| children | 214cac7e5628 |
| files | webapp/src/main/webapp/jquery/jquery.digilib.css webapp/src/main/webapp/jquery/jquery.digilib.js webapp/src/main/webapp/jquery/jquery.digilib.regions.js webapp/src/main/webapp/jquery/svg/jquery.digilibSVG.js webapp/src/main/webapp/jquery/test-regions.html |
| diffstat | 5 files changed, 106 insertions(+), 150 deletions(-) [+] |
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css Fri Oct 26 17:56:27 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.css Sat Oct 27 00:06:29 2012 +0200 @@ -22,17 +22,22 @@ height: 0px; } +div.dl-digilib div.dl-area { + display: none; + position: absolute; + border: 2px solid #ff0000; +} + +div.dl-digilib div.dl-areaoverlay { + position: absolute; + z-index: 100; +} + div.dl-digilib div.dl-birdview { border: 1px solid white; z-index: 10; } -div.dl-digilib div.dl-zoomrect { - position: absolute; - border: 2px solid #ff0000; - z-index: 100; -} - div.dl-digilib div.dl-birdzoom { position: absolute; border: 2px solid #ff0000; @@ -81,6 +86,7 @@ div.dl-digilib div.dl-region { position: absolute; + border: none; color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; @@ -103,6 +109,12 @@ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); } +div.dl-digilib div.dl-regionArea { + background-color: red; + border: none; + opacity: 0.3; +} + div.dl-digilib div.dl-regionHTML { background-color: purple; } @@ -125,8 +137,8 @@ div.dl-digilib div.dl-findregion { background-color: transparent; - border: 2px solid lightcyan; - opacity: 1.0; + border: 5px solid orange; + opacity: 0.8; } div.dl-digilib #dl-calibration { @@ -135,7 +147,7 @@ border: 2px solid lightcyan; width: 400px; display: none; - z-index: 9999; + z-index: 100; } div.dl-digilib #dl-ruler { @@ -290,20 +302,6 @@ margin-bottom: 20px; } -/* annotations */ -div.dl-digilib div.dl-annotationbody { - background-color: yellow; - border-radius: 5px; -} -div.dl-digilib div.dl-annotationbody div.dl-text { - padding: 10px; -} -div.dl-digilib div.dl-annotationbody div.dl-creator { - color: gray; - padding: 5px; - border-top: 1px solid silver; -} - /* scroll arrows */ div.dl-digilib table.dl-scalertable { border: 0;
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js Fri Oct 26 17:56:27 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.js Sat Oct 27 00:06:29 2012 +0200 @@ -38,7 +38,7 @@ var defaults = { // version of this script - 'version' : 'jquery.digilib.js 2.1.8a1', + 'version' : 'jquery.digilib.js 2.1.9', // logo url 'logoUrl' : 'img/digilib-logo-text1.png', // homepage url (behind logo) @@ -342,7 +342,15 @@ zoomArea : function (data, area) { if (area == null) { // interactively - zoomArea(data); + var onComplete = function(data, rect) { + if (rect == null) return; + setZoomArea(data, rect); + // reset modes + setFitMode(data, 'both'); + setScaleMode(data, 'screen'); + redisplay(data); + }; + defineArea(data, onComplete); } else { data.zoomArea = geom.rectangle(area); redisplay(data); @@ -1215,71 +1223,75 @@ redisplay(data); }; - /** zoom to the area around two clicked points. + /** define an area by click and drag * */ - var zoomArea = function(data) { - $elem = data.$elem; - $scaler = data.$scaler; - var pt1, pt2; - var $zoomDiv = $('<div class="'+data.settings.cssPrefix+'zoomrect" style="display:none"/>'); - $elem.append($zoomDiv); - // $zoomDiv.css(data.settings.zoomrectStyle); + var defineArea = function(data, onComplete, cls) { + var CSS = data.settings.cssPrefix; + var $elem = data.$elem; + var $scaler = data.$scaler; var picRect = geom.rectangle($scaler); - // FIX ME: is there a way to query the border width from CSS info? - // rect.x -= 2; // account for overlay borders - // rect.y -= 2; + var $body = $('body'); + var bodyRect = geom.rectangle($body); + var pt1, pt2; + // overlay div prevents other elements from reacting to mouse events + var $overlayDiv = $('<div class="'+CSS+'areaoverlay"/>'); + $body.append($overlayDiv); + bodyRect.adjustDiv($overlayDiv); + // area div + var $areaDiv = $('<div class="'+CSS+'area"/>'); + if (cls) { + $areaDiv.addClass(cls); // individual styling + } + $elem.append($areaDiv); - var zoomStart = function (evt) { + var areaStart = function (evt) { pt1 = geom.position(evt); - // setup and show zoom div - pt1.adjustDiv($zoomDiv); - $zoomDiv.width(0).height(0); - $zoomDiv.show(); + // setup and show area div + pt1.adjustDiv($areaDiv); + $areaDiv.width(0).height(0); + $areaDiv.show(); // register events - $elem.on("mousemove.dlZoomArea", zoomMove); - $elem.on("mouseup.dlZoomArea", zoomEnd); + $overlayDiv.on("mousemove.dlArea", areaMove); + $overlayDiv.on("mouseup.dlArea", areaEnd); return false; }; // mouse move handler - var zoomMove = function (evt) { + var areaMove = function (evt) { pt2 = geom.position(evt); var rect = geom.rectangle(pt1, pt2); rect.clipTo(picRect); - // update zoom div - rect.adjustDiv($zoomDiv); + // update area div + rect.adjustDiv($areaDiv); return false; }; // mouseup handler: end moving - var zoomEnd = function (evt) { + var areaEnd = function (evt) { pt2 = geom.position(evt); // assume a click and continue if the area is too small var clickRect = geom.rectangle(pt1, pt2); - if (clickRect.getArea() <= 5) return false; - // hide zoom div - $zoomDiv.remove(); + if (clickRect.getArea() <= 5) { + onComplete(data, null); + return false; + }; // unregister events - $elem.off("mousemove.dlZoomArea", zoomMove); - $elem.off("mouseup.dlZoomArea", zoomEnd); + $overlayDiv.off("mousemove.dlArea", areaMove); + $overlayDiv.off("mouseup.dlArea", areaEnd); // clip and transform clickRect.clipTo(picRect); - var area = data.imgTrafo.invtransform(clickRect); - setZoomArea(data, area); - // reset modes - setFitMode(data, 'both'); - setScaleMode(data, 'screen'); - redisplay(data); + var rect = data.imgTrafo.invtransform(clickRect); + // execute callback + onComplete(data, rect); + // destroy area div + withdraw($areaDiv); + withdraw($overlayDiv); return false; }; - // clear old handler (also ZoomDrag) - $scaler.off('.dlZoomArea'); - $scaler.off(".dlZoomDrag"); - $elem.off('.dlZoomArea'); - // bind start zoom handler - $scaler.one('mousedown.dlZoomArea', zoomStart); + // start by clicking + $overlayDiv.one('mousedown.dlArea', areaStart); }; /** set preview background. @@ -1363,7 +1375,7 @@ console.debug("dragstart at=", evt); // don't start dragging if not zoomed if (isFullArea(data.zoomArea)) return false; - $elem.find(".overlay").hide(); // hide all overlays (marks/regions) + $elem.find('.'+data.settings.cssPrefix+'overlay').hide(); // hide all overlays (marks/regions) startPos = geom.position(evt); delta = null; // set low res background immediately on mousedown @@ -1612,7 +1624,7 @@ var endsWith = function (str, suffix) { return str.indexOf(suffix, str.length - suffix.length) !== -1; }; - + /** center an item on the visible screen rect */ var centerOnScreen = function (data, $div) { @@ -1681,6 +1693,7 @@ redisplay : redisplay, updateDisplay : updateDisplay, showDiv : showDiv, + defineArea : defineArea, setZoomArea : setZoomArea, setPreviewBg : setPreviewBg, getImgTrafo : getImgTrafo,
--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Fri Oct 26 17:56:27 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Sat Oct 27 00:06:29 2012 +0200 @@ -96,8 +96,6 @@ }; var defaults = { - // are regions being edited? - 'editRegions' : false, // are regions shown? 'isRegionVisible' : true, // are region numbers shown? @@ -144,67 +142,18 @@ alert("Please turn on regions visibility!"); return; } - var $elem = data.$elem; - var $body = $('body'); - var bodyRect = geom.rectangle($body); - var $scaler = data.$scaler; - var scalerRect = geom.rectangle($scaler); - var pt1, pt2; - // overlay prevents other elements from reacting to mouse events - var $overlay = $('<div class="'+CSS+'overlay" style="position:absolute"/>'); - $body.append($overlay); - bodyRect.adjustDiv($overlay); - var attr = {'class' : CSS+"regionURL"}; - var $regionDiv = newRegionDiv(data, attr); - - // mousedown handler: start sizing - var regionStart = function (evt) { - pt1 = geom.position(evt); - // setup and show zoom div - pt1.adjustDiv($regionDiv); - $regionDiv.width(0).height(0); - $regionDiv.show(); - // register mouse events - $overlay.on("mousemove.dlRegion", regionMove); - $overlay.on("mouseup.dlRegion", regionEnd); - return false; - }; - - // mousemove handler: size region - var regionMove = function (evt) { - pt2 = geom.position(evt); - var rect = geom.rectangle(pt1, pt2); - rect.clipTo(scalerRect); - // update region - rect.adjustDiv($regionDiv); - return false; - }; - - // mouseup handler: end sizing - var regionEnd = function (evt) { - pt2 = geom.position(evt); - // assume a click and continue if the area is too small - var clickRect = geom.rectangle(pt1, pt2); - if (clickRect.getArea() <= 5) return false; - // unregister mouse events and get rid of overlay - $overlay.off("mousemove.dlRegion", regionMove); - $overlay.off("mouseup.dlRegion", regionEnd); - $overlay.remove(); - // clip region - clickRect.clipTo(scalerRect); - clickRect.adjustDiv($regionDiv); - regionTrafo(data, $regionDiv); + var onComplete = function(data, rect) { + if (rect == null) return; var count = getRegions(data, 'regionURL').length; - addRegionNumber(data, $regionDiv, count); + var attr = {'class' : CSS+'regionURL '+CSS+'overlay'}; + var item = {'rect' : rect, 'index' : count, 'attributes' : attr}; + var $regionDiv = addRegionDiv(data, item); fn.highlightButtons(data, 'defineregion', 0); redisplay(data); $(data).trigger('newRegion', [$regionDiv]); - return false; - }; - - // bind start zoom handler - $overlay.one('mousedown.dlRegion', regionStart); + }; fn.highlightButtons(data, 'defineregion', 1); + fn.defineArea(data, onComplete, CSS+'regionArea'); }, // remove the last added URL region @@ -215,6 +164,7 @@ } var selector = 'div.'+CSS+'regionURL'; var $regionDiv = data.$elem.find(selector).last(); + if ($regionDiv.length == 0) return; $regionDiv.remove(); redisplay(data); }, @@ -227,6 +177,7 @@ } var selector = 'div.'+CSS+'regionURL'; var $regionDivs = data.$elem.find(selector); + if ($regionDivs.length == 0) return; $regionDivs.remove(); redisplay(data); }, @@ -268,12 +219,16 @@ $info.find('div.'+CSS+'info').hide(); $info.find('div.'+CSS+name).show(); fn.centerOnScreen(data, $info); + return false; }); }; bind('html'); bind('svgattr'); bind('csv'); bind('digilib'); + $info.on('click.regioninfo', function () { + fn.withdraw($info); + }); $info.find('.x').on('click.regioninfo', function () { fn.withdraw($info); }); @@ -321,7 +276,7 @@ alert('invalid coordinates: ' + coords); return; } - var attr = { 'class' : CSS+'regionURL '+CSS+'findregion' }; + var attr = { 'class' : CSS+'findregion' }; var item = { 'rect' : rect, 'attributes' : attr }; var $regionDiv = addRegionDiv(data, item); var za = data.zoomArea; @@ -363,6 +318,10 @@ fn.withdraw($info); return false; }); + // handle blur + $input.on('blur', function () { + fn.withdraw($info); + }); // handle cancel $form.find('.'+CSS+'cancel').on('click', function () { fn.withdraw($info); @@ -449,21 +408,12 @@ // create a new regionDiv and add it to data.$elem var newRegionDiv = function (data, attr) { var cls = CSS+'region'; - var $regionDiv = $('<div class="'+cls+'" style="display:none"/>'); + var $regionDiv = $('<div class="'+cls+'"/>'); addRegionAttributes(data, $regionDiv, attr); data.$elem.append($regionDiv); return $regionDiv; }; - // calculate the digilib coordinates of a completed user-defined region - var regionTrafo = function (data, $regionDiv) { - var screenRect = geom.rectangle($regionDiv); - var rect = data.imgTrafo.invtransform(screenRect); - $regionDiv.data('rect', rect); - console.debug("regionTrafo", $regionDiv, rect); - return rect; - }; - // copy attributes to a region div var addRegionAttributes = function (data, $regionDiv, attributes) { if (attributes == null) return; @@ -541,7 +491,7 @@ } // mark div class as regionHTML var cls = $area.attr('class') || ''; - cls += ' '+CSS+'regionHTML'; + cls += ' '+CSS+'regionHTML '+CSS+'overlay'; var attr = {'class' : cls}; // copy attributes for (var n in data.settings.regionAttributes) { @@ -679,7 +629,7 @@ var regions = $.map(coords, function(coord, index) { var pos = coord.split("/", 4); var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]); - var attr = {'class' : CSS+"regionURL"}; + var attr = {'class' : CSS+"regionURL "+CSS+"overlay"}; var item = {'rect' : rect, 'index' : index+1, 'attributes' : attr}; return item; });
--- a/webapp/src/main/webapp/jquery/svg/jquery.digilibSVG.js Fri Oct 26 17:56:27 2012 +0200 +++ b/webapp/src/main/webapp/jquery/svg/jquery.digilibSVG.js Sat Oct 27 00:06:29 2012 +0200 @@ -14,27 +14,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. Authors: - Martin Raspe, Robert Casties, 9.2.2011 + Martin Raspe, Robert Casties, 9.2.2011 - 26.3.2012 + */ /** * digilib SVG plugin (measuring tool for use within the digilib jQuery plugin) **/ - /* jslint browser: true, debug: true, forin: true */ -// fallback for console.log calls -if (typeof(console) === 'undefined') { - var console = { - log : function(){}, - debug : function(){}, - error : function(){} - }; - var customConsole = true; -} - (function($) { // plugin object with digilib data
--- a/webapp/src/main/webapp/jquery/test-regions.html Fri Oct 26 17:56:27 2012 +0200 +++ b/webapp/src/main/webapp/jquery/test-regions.html Sat Oct 27 00:06:29 2012 +0200 @@ -45,7 +45,7 @@ <div id="digilib"> <p>digilib doesn't work! Please switch on Javascript or notify the server administrator!</p> <img src="http://digilib.berlios.de/images/digilib-logo-big.png" /> - <map class="dl-keep dl-regioncontent"> + <map class="dl-keep dl-regioncontent test1"> <area title="A: Basilica S. Petri in Vaticano cum Porticu et P. Pontificio" coords="0.0599,0.7277,0.0371,0.0577"/> <area title="B: Basilica S. Joannis Lateranensis cum Palatio" coords="0.6324,0.1208,0.0337,0.0317"/> <area title="C: Basilica S. Mariae Maioris" coords="0.4114,0.1343,0.032,0.0345"/> @@ -56,6 +56,8 @@ <area title="H: Temp. et Monas SS. Trinitatis Montium" coords="0.206,0.2397,0.0284,0.0304"/> <area title="I: Temp. D. Mariae Populi ab Alex. VII restau." coords="0.0523,0.3085,0.012,0.0207"/> <area title="K: Temp. S. Athanasii Grecorum" coords="0.1608,0.3157,0.0138,0.0238"/> + </map> + <map class="dl-keep dl-regioncontent test2"> <area title="L: Temp. D. Mariae Rotundae olim Patheon Agrippae" coords="0.3874,0.4144,0.0151,0.0228"/> <area title="M: Tem. D. Mariae Super Minervam" coords="0.4077,0.3991,0.0115,0.0197"/> <area title="N: Tem. D. M. in Valicella Vulgo Chiesa Nuova" coords="0.3914,0.526,0.026,0.0318"/> @@ -63,10 +65,13 @@ <area title="Q: Tem. et Monas S. Andreae delle fratte" coords="0.2884,0.2788,0.0146,0.028"/> <area title="R: Tem. D. M. Pacis ab Alex VII denuo constructa" coords="0.3012,0.3435,0.0159,0.0124"/> <area title="S: Tem. et Hospitale B. Mariae de Anima nationis Germanorum et Flandrorum" coords="0.3252,0.3559,0.0145,0.0196"/> + </map> + <map class="dl-keep dl-regioncontent test3"> <area title="T: Tem. et Hospitale S. Lodouici nationis Gallicanae" coords="0.3672,0.446,0.0083,0.0143"/> <area title="V: Tem. et Hospitale S. Iacobi nationis Hispanorum" coords="0.4037,0.463,0.0073,0.0162"/> <area title="X: Tem. et Hospitale S. Spiritus in Sassia" coords="0.2288,0.658,0.0386,0.0462"/> <a title="test a tag" coords="0.05,0.05,0.3,0.1">Testing an <b>a tag</b> with content</a> + <a title="what's up" coords="0.35,0.35,0.2,0.1">another tag</a> </map> </div> </body>