Mercurial > hg > digilib-old
changeset 866:5431156f7b9d stream
Merge from jquery branch
7ebdc106a61ace189d41df7919f8c667d10584fe
| author | robcast |
|---|---|
| date | Thu, 10 Mar 2011 10:57:08 +0100 |
| parents | ace973a106b5 (current diff) 7ebdc106a61a (diff) |
| children | 987cfe401970 |
| files | |
| diffstat | 19 files changed, 438 insertions(+), 139 deletions(-) [+] |
line wrap: on
line diff
--- a/client/digitallibrary/jquery/img/embedded.svg Wed Mar 09 23:41:42 2011 +0100 +++ b/client/digitallibrary/jquery/img/embedded.svg Thu Mar 10 10:57:08 2011 +0100 @@ -49,9 +49,9 @@ inkscape:pageshadow="2" inkscape:zoom="16.533016" inkscape:cx="15.816836" - inkscape:cy="9.7629524" + inkscape:cy="15.897753" inkscape:document-units="px" - inkscape:current-layer="layer1" + inkscape:current-layer="layer27" showgrid="true" inkscape:window-width="1024" inkscape:window-height="719" @@ -86,7 +86,8 @@ inkscape:groupmode="layer" id="layer1" transform="translate(0,-1020.3622)" - style="display:inline" /> + style="display:inline" + sodipodi:insensitive="true" /> <g inkscape:groupmode="layer" id="layer2" @@ -419,8 +420,7 @@ inkscape:groupmode="layer" id="layer15" inkscape:label="page" - style="display:none" - sodipodi:insensitive="true"> + style="display:none"> <path style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#15a221;stroke-width:0;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible" d="m 5,1 0,30 22,0 0,-19.03125 -9.53125,0 -1.375,0 L 16.09375,1 5,1 z m 12.46875,0.84375 0,8.75 8.8125,0 -8.8125,-8.75 z M 7,3 l 7,0 0,11 11,0 0,15 -11,0 -1,0 -6,0 0,-26 z" @@ -959,6 +959,121 @@ </g> <g inkscape:groupmode="layer" + id="layer26" + inkscape:label="regions" + style="display:none" + sodipodi:insensitive="true"> + <rect + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible" + id="rect150" + width="13.064767" + height="12.520402" + x="2.6008563" + y="6.8987117" /> + <rect + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible" + id="rect212" + width="7.0162635" + height="11.915551" + x="22.742373" + y="18.148928" /> + <rect + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible" + id="rect214" + width="7.5606289" + height="6.3509283" + x="18.085024" + y="2.3018494" /> + </g> + <g + inkscape:groupmode="layer" + id="layer27" + inkscape:label="addregion" + style="display:none" + sodipodi:insensitive="true"> + <path + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible" + d="m 14.078836,5.3407455 0,12.5312505 13.09375,0 0,-12.5312505 -13.09375,0 z m 1.84375,1.625 9.46875,0 0,9.0625005 -9.46875,0 0,-9.0625005 z" + id="rect150-1" + inkscape:connector-curvature="0" /> + <path + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible" + d="m 5.2704736,1.2134067 0,30.0000003 21.9999994,0 0,-30.0000003 -21.9999994,0 z m 2,2 17.9999994,0 0,26.0000003 -17.9999994,0 0,-26.0000003 z" + id="rect956-7" + inkscape:connector-curvature="0" /> + </g> + <g + style="display:none" + inkscape:label="delregion" + id="g202" + inkscape:groupmode="layer" + sodipodi:insensitive="true"> + <path + inkscape:connector-curvature="0" + id="path204" + d="m 14.078836,5.3407455 0,12.5312505 13.09375,0 0,-12.5312505 -13.09375,0 z m 1.84375,1.625 9.46875,0 0,9.0625005 -9.46875,0 0,-9.0625005 z" + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible" /> + <path + inkscape:connector-curvature="0" + id="path206" + d="m 5.2704736,1.2134067 0,30.0000003 21.9999994,0 0,-30.0000003 -21.9999994,0 z m 2,2 17.9999994,0 0,26.0000003 -17.9999994,0 0,-26.0000003 z" + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible" /> + <rect + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible" + id="rect210" + width="25.884966" + height="2.6429093" + x="-6.7994733" + y="21.40773" + transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,0,0)" /> + </g> + <g + style="display:none" + inkscape:label="regioninfo" + id="g230" + inkscape:groupmode="layer" + sodipodi:insensitive="true"> + <path + inkscape:connector-curvature="0" + id="path232" + d="m 14.078836,5.3407455 0,12.5312505 13.09375,0 0,-12.5312505 -13.09375,0 z m 1.84375,1.625 9.46875,0 0,9.0625005 -9.46875,0 0,-9.0625005 z" + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible" /> + <path + inkscape:connector-curvature="0" + id="path234" + d="m 5.2704736,1.2134067 0,30.0000003 21.9999994,0 0,-30.0000003 -21.9999994,0 z m 2,2 17.9999994,0 0,26.0000003 -17.9999994,0 0,-26.0000003 z" + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible" /> + <text + xml:space="preserve" + style="font-size:28.13728714px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Century Gothic;-inkscape-font-specification:Century Gothic" + x="13.438262" + y="32.891159" + id="text236" + sodipodi:linespacing="125%" + transform="scale(1.2650445,0.79048601)"><tspan + sodipodi:role="line" + id="tspan238" + x="13.438262" + y="32.891159">i</tspan></text> + <rect + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible" + id="rect240" + width="6.0485034" + height="1.875036" + x="17.601145" + y="25.104706" /> + <path + sodipodi:type="arc" + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible" + id="path242" + sodipodi:cx="20.504425" + sodipodi:cy="10.527814" + sodipodi:rx="1.996006" + sodipodi:ry="1.996006" + d="m 22.500431,10.527814 a 1.996006,1.996006 0 1 1 -3.992012,0 1.996006,1.996006 0 1 1 3.992012,0 z" /> + </g> + <g + inkscape:groupmode="layer" id="layer5" inkscape:label="fonds" style="display:none"
--- a/client/digitallibrary/jquery/jquery-test-embedded.html Wed Mar 09 23:41:42 2011 +0100 +++ b/client/digitallibrary/jquery/jquery-test-embedded.html Thu Mar 10 10:57:08 2011 +0100 @@ -56,21 +56,25 @@ <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.birdseye.js"></script> + <script type="text/javascript" src="jquery.digilib.regions.js"></script> + <script type="text/javascript" src="jquery.digilib.pluginstub.js"></script> <link rel="stylesheet" type="text/css" href="jquery.digilib.css" /> <script type="text/javascript"> $(document).ready(function(){ - $('div.digilib').digilib({ + var opts = { interactionMode : 'embedded', - birdDivWidth : 100, - birdDivHeight : 100 - }); + scalerBaseUrl : 'http://digilib.biblhertz.it/digilib04/servlet/Scaler', + showRegionNumbers : false, + autoRegionLinks : true + }; + var $div = $('div.digilib'); + $div.digilib(opts); - $('div.digilib').each(function(){ - console.log($(this).data('digilib').settings); - }); - + // $('div.digilib').each(function(){ + // console.log($(this).data('digilib').settings); + // }); }); </script> @@ -93,7 +97,12 @@ <td> <div id="digilib-3" class="digilib"> - <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/weide" /> + <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/FransHals-WillemVanHeythuysen" /> + <div class="keep regioncontent"> + <a href="http://www.mpiwg-berlin.mpg.de" coords="0.1,0.1,0.4,0.1">MPI fuer Wissenschaftsgeschichte</a> + <a href="http://www.biblhertz.it" coords="0.5,0.8,0.4,0.1">Bibliotheca Hertziana</a> + <a coords="0.3,0.5,0.15,0.1" /> + </div> </div> </td>
--- a/client/digitallibrary/jquery/jquery-test-full.html Wed Mar 09 23:41:42 2011 +0100 +++ b/client/digitallibrary/jquery/jquery-test-full.html Thu Mar 10 10:57:08 2011 +0100 @@ -71,8 +71,7 @@ interactionMode : 'fullscreen', scalerBaseUrl : 'http://digilib.biblhertz.it/digilib04/servlet/Scaler', showRegionNumbers : true, - autoRegionLinks : false, - includeRegionContent : true + autoRegionLinks : false }; var $div = $('div.digilib'); $div.digilib(opts); @@ -85,13 +84,15 @@ <div id="digilib-1" class="digilib"> <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/FransHals-WillemVanHeythuysen" /> - <div class="keep regioncontent"> - <a href="http://www.mpiwg-berlin.mpg.de" rel="area:0.1/0.1/0.4/0.1">MPI fuer Wissenschaftsgeschichte</a> - <a href="http://www.biblhertz.it" rel="area:0.5/0.8/0.4/0.1">Bibliotheca Hertziana</a> - <a rel="area:0.3/0.5/0.15/0.1" /> - </div> </div> <div id="debug">DEBUG</div> + <!-- + <div class="keep regioncontent"> + <a href="http://www.mpiwg-berlin.mpg.de" coords="0.1,0.1,0.4,0.1">MPI fuer Wissenschaftsgeschichte</a> + <a href="http://www.biblhertz.it" coords="0.5,0.8,0.4,0.1">Bibliotheca Hertziana</a> + <a coords="0.3,0.5,0.15,0.1" /> + </div> + --> </body> </html>
--- a/client/digitallibrary/jquery/jquery.digilib.css Wed Mar 09 23:41:42 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.css Thu Mar 10 10:57:08 2011 +0100 @@ -66,14 +66,22 @@ opacity: 0.5; } -div.region a { +div.region { + color: white; + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: 11px; +} + +div.region a.regionnumber { color: white; text-decoration: none; - font-size: 11px; font-weight: bold; - height: 15px; - width: 16px; - margin: 3px; + font-size: 11px; + text-align: center; + padding: 0px 2px; + margin-right: 4px; + border: 1px solid white; + display: inline-block; } div.regioncontent { @@ -84,7 +92,6 @@ display: none; position: absolute; top: 100px; - left: 250px; padding: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; @@ -100,6 +107,36 @@ font-weight: bold; } +div.infobutton { + background-color: white; + color: grey; + padding: 0px 4px; + margin: 0px 2px; + float: left; +} + +div.info { + clear: both; + display: none; + margin: 10px; +} + +div.infoheader { + width: 300px; + margin-bottom: 20px; +} + +div.arrow { + position: absolute; + text-align: center; + background-color: black; + opacity: 0.08; +} + +div.arrow:hover { + opacity: 0.5; +} + /* special definitions for fullscreen */ div.digilib.dl_fullscreen div.buttons { position: fixed; @@ -135,16 +172,16 @@ top: 0px; padding: 1px; background-color: grey; - opacity: 0.4; + opacity: 0.5; z-index: 100; } div.digilib.dl_embedded div.button:hover { - background-color: darkred; + background-color: black; } div.digilib.dl_embedded div.button-on { - background-color: black; + background-color: darkgreen; } div.digilib.dl_embedded div.birdview {
--- a/client/digitallibrary/jquery/jquery.digilib.geometry.js Wed Mar 09 23:41:42 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.geometry.js Thu Mar 10 10:57:08 2011 +0100 @@ -262,24 +262,25 @@ }; // returns the intersection of rectangle "rect" and this one that.intersect = function(rect) { - var res = rect.clipTo(this); - if (res.width < 0 || res.height < 0) res = null; - return res; + var r = rect.copy(); + var result = r.clipTo(this); + if (result.width < 0 || result.height < 0) result = null; + return result; }; // returns a copy of rectangle "rect" that fits into this one // (moving it first) that.fit = function(rect) { - var sec = rect.copy(); - sec.x = Math.max(sec.x, this.x); - sec.y = Math.max(sec.y, this.x); - if (sec.x + sec.width > this.x + this.width) { - sec.x = this.x + this.width - sec.width; + var r = rect.copy(); + r.x = Math.max(r.x, this.x); + r.y = Math.max(r.y, this.x); + if (r.x + r.width > this.x + this.width) { + r.x = this.x + this.width - r.width; } - if (sec.y + sec.height > this.y + this.height) { - sec.y = this.y + this.height - sec.height; + if (r.y + r.height > this.y + this.height) { + r.y = this.y + this.height - r.height; } - return sec.intersect(this); + return r.intersect(this); }; // adjusts position and size of jQuery element "$elem" to this rectangle that.adjustDiv = function($elem) {
--- a/client/digitallibrary/jquery/jquery.digilib.js Wed Mar 09 23:41:42 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.js Thu Mar 10 10:57:08 2011 +0100 @@ -218,16 +218,30 @@ // path to button images (must end with a slash) 'imagePath' : 'img/fullscreen/', 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","help","reset","toggleoptions"], - 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","toggleoptions"], + 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","lessoptions"], 'buttonSets' : ['standardSet', 'specialSet'] }, 'embedded' : { 'imagePath' : 'img/embedded/16/', 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","help","reset","toggleoptions"], - 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","scale","toggleoptions"], + 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","scale","lessoptions"], 'buttonSets' : ['standardSet', 'specialSet'] } }, + // arrow overlays for moving the zoomed area + 'zoomArrows' : true, + // zoom arrow image info + 'zoomArrowsInfo' : { + // path to arrow images (must end with a slash) + 'imagePath' : 'img/', + // minimal width of the arrow bar (pixel) + 'minwidth' : 6, + // image file names + 'up' : 'up.png', + 'down' : 'down.png', + 'left' : 'left.png', + 'right' : 'right.png' + }, // number of visible button groups 'visibleButtonSets' : 1, // is the "about" window shown? @@ -239,7 +253,7 @@ 'maxBgSize' : 10000, // parameters used by background image 'bgImgParams' : ['fn','pn','dw','dh','mo','rot'], - // space to be left free in full page display, default value is for scrollbar + // reserved space in full page display (default value accounts for vertical scrollbar) 'scalerInset' : 10 }; @@ -311,11 +325,14 @@ } } } - // store $(this) element in data - elemSettings = $.extend({}, settings, params); + // setup $elem.data, needs "deep copy" because of nesting + elemSettings = $.extend(true, {}, settings, params); data = { + // let $(this) know about $(this) :-) $elem : $elem, + // let $elem have its own copy of settings settings : elemSettings, + // and of the URL query parameters queryParams : params, // TODO: move plugins reference out of data plugins : plugins @@ -369,6 +386,8 @@ highlightButtons(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'); }); @@ -909,6 +928,7 @@ updateImgTrafo(data); renderMarks(data); setupZoomDrag(data); + renderZoomArrows(data); // send event $(data).trigger('update'); }; @@ -1052,6 +1072,60 @@ return $buttonsDiv; }; + // creates arrow overlays for moving the zoomed area + var setupZoomArrows = function (data) { + var $elem = data.$elem; + var settings = data.settings; + var show = settings.zoomArrows; + 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); + }); + }; + + // size and show arrow overlays, called after scaler img is loaded + var renderZoomArrows = function (data) { + 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); + }; + + // creates HTML structure for the about view in elem var setupAboutDiv = function (data) { var $elem = data.$elem; @@ -1252,7 +1326,7 @@ // place marks on the image var renderMarks = function (data) { if (data.$img == null || data.imgTrafo == null) return; - console.debug("rendermarks img=",data.$img," imgtrafo=",data.imgTrafo); + console.debug("renderMarks: img=",data.$img," imgtrafo=",data.imgTrafo); var $elem = data.$elem; var marks = data.marks; // clear marks @@ -1261,11 +1335,11 @@ var mark = marks[i]; if (data.zoomArea.containsPosition(mark)) { var mpos = data.imgTrafo.transform(mark); - console.debug("renderMarks: mpos=",mpos); + console.debug("renderMarks: pos=",mpos); // create mark var html = '<div class="mark overlay">'+(i+1)+'</div>'; var $mark = $(html); - $mark.attr("id", "digilib-mark-" + i); + $mark.attr("id", "digilib-mark-"+(i+1)); $elem.append($mark); mpos.adjustDiv($mark); }
--- a/client/digitallibrary/jquery/jquery.digilib.regions.js Wed Mar 09 23:41:42 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.regions.js Thu Mar 10 10:57:08 2011 +0100 @@ -3,11 +3,7 @@ markup a digilib image with rectangular regions TODO: -- store region in params/cookie, regarding zoom, mirror, rotation (like marks) -- set regions programmatically -- read regions from params/cookie and display -- backlink mechanism -- don't write to data.settings? + how to display regions correctly in embedded mode? */ (function($) { @@ -41,7 +37,7 @@ icon : "regions.png" }, regionhtml : { - onclick : "showRegionHTML", + onclick : "showRegionInfo", tooltip : "show information about regions", icon : "regioninfo.png" } @@ -53,9 +49,9 @@ // are region numbers shown? 'showRegionNumbers' : false, // is window with region HTML shown? - 'showRegionHTML' : false, - // should digilib look for region content in the page? - 'includeRegionContent' : false, + 'showRegionInfo' : false, + // is there region content in the page? + 'hasRegionContent' : false, // turn any region into a clickable link to its detail view 'autoRegionLinks' : false, // class name for content divs (must additionally be marked with class "keep") @@ -63,7 +59,7 @@ // buttonset of this plugin 'regionSet' : ['regions', 'addregion', 'delregion', 'regionhtml', 'lessoptions'], // url param for regions - 'rg' : null, + 'rg' : null }; var actions = { @@ -152,32 +148,27 @@ var show = !data.settings.isRegionVisible; data.settings.isRegionVisible = show; fn.highlightButtons(data, 'regions', show); - showRegionDivs(data, 1); + renderRegions(data, 1); }, // show/hide region HTML code - "showRegionHTML" : function (data) { - var show = !data.settings.showRegionHTML; - data.settings.showRegionHTML = show; + "showRegionInfo" : function (data) { + var show = !data.settings.showRegionInfo; + data.settings.showRegionInfo = show; fn.highlightButtons(data, 'regionhtml', show); var $html = data.$htmlDiv; if (!show) { + // empty the div $html.fadeOut(function () { $html.contents().remove(); }); return; } - // empty the div for HTML display - $html.append($('<div/>').text('<div class="keep regioncontent">')); - $.each(data.regions, function(index, region) { - var area = "area:" - + region.x + "/" + region.y + "/" - + region.width + "/" + region.height; - $html.append($('<div/>').text('<a href="" rel="' + area + '">')); - $html.append($('<div/>').text('</a>')); - }); - $html.append($('<div/>').text('</div>')); - $html.fadeIn(); + regionInfo(data); + }, + + "redraw" : function (data) { + renderRegions(data); } }; @@ -191,46 +182,110 @@ console.debug("regions", data.regions, "regionRect", regionRect); }; + // clickable header + var regionInfoHeader = function (data) { + var $infoDiv = $('<div class="infoheader"/>'); + var $h01 = $('<div class="infobutton">HTML</div>'); + var $h02 = $('<div class="infobutton">SVG</div>'); + var $h03 = $('<div class="infobutton">Digilib</div>'); + var $h04 = $('<div class="infobutton">X</div>'); + var bind = function($div, name) { + $div.bind('click.regioninfo', function () { + var $top = $(this).parent().parent(); + $top.find('.info').hide(); + $top.find('.' + name).show(); + }); + }; + bind($h01, 'html'); + bind($h02, 'svgattr'); + bind($h03, 'digilib'); + var $html = data.$htmlDiv; + $h04.bind('click.regioninfo', function () { + data.settings.showRegionInfo = false; + fn.highlightButtons(data, 'regionhtml', false); + $html.fadeOut(function () { + $html.contents().remove(); + }); + }); + $infoDiv.append($h01, $h02, $h03, $h04); + return $infoDiv; + }; + + // html for later insertion + var regionInfoHTML = function (data) { + var $infoDiv = $('<div class="info html"/>'); + $infoDiv.append($('<div/>').text('<div class="keep regioncontent">')); + $.each(data.regions, function(index, r) { + var area = [r.x, r.y, r.width, r.height].join(','); + $infoDiv.append($('<div/>').text('<a coords="' + area + '" >')); + }); + $infoDiv.append($('<div/>').text('</div>')); + return $infoDiv; + }; + + // SVG-style + var regionInfoSVG = function (data) { + var $infoDiv = $('<div class="info svgattr"/>'); + $.each(data.regions, function(index, r) { + var area = r.getAsSvg(); + $infoDiv.append($('<div/>').text('"' + area + '"')); + }); + return $infoDiv; + }; + + // digilib-style + var regionInfoDigilib = function (data) { + var $infoDiv = $('<div class="info digilib"/>'); + $.each(data.regions, function(index, r) { + var area = r.toString(); + $infoDiv.append($('<div/>').text(area)); + }); + return $infoDiv; + }; + + // show region info in a window + var regionInfo = function (data) { + var $html = data.$htmlDiv; + $html.append(regionInfoHeader(data)) + $html.append(regionInfoHTML(data)); + $html.append(regionInfoSVG(data)); + $html.append(regionInfoDigilib(data)); + $html.fadeIn(); + }; + // add a region to data.$elem - var addRegionDiv = function (data, index) { + var addRegionDiv = function (data, index, url) { var nr = index + 1; // we count regions from 1 // create a digilib URL for this detail - var regionUrl = getRegionUrl(data, index); + url = url || getRegionUrl(data, index); var $regionDiv = $('<div class="region overlay" style="display:none"/>'); $regionDiv.attr("id", ID_PREFIX + nr); data.$elem.append($regionDiv); if (data.settings.showRegionNumbers) { - var $regionNr = $('<div class="regionnumber"/>'); - var $regionLink = $('<a/>'); - $regionLink.attr('href', regionUrl); + var $regionLink = $('<a class="regionnumber"/>'); + $regionLink.attr('href', url); $regionLink.text(nr); - $regionNr.append($regionLink); - $regionDiv.append($regionNr); + $regionDiv.append($regionLink); } if (data.settings.autoRegionLinks) { $regionDiv.bind('click.dlRegion', function() { - window.location = regionUrl; - }) + window.location = url; + }); } return $regionDiv; }; - // add region content - var addRegionContent = function (region, $elem) { - var $regionDiv = region.$div; - $regionDiv.append($elem); - } - - // create a region div from the data.regions collection - var createRegionDiv = function (regions, index) { + // create a region div from the data.regions array + var createRegionDiv = function (regions, index, url) { + var $regionDiv = addRegionDiv(data, index, url); var region = regions[index]; - var $regionDiv = addRegionDiv(data, index); region.$div = $regionDiv; return $regionDiv; }; - // create regions - var createRegionDivs = function (data) { + // create regions from URL parameters + var createRegionsFromURL = function (data) { + unpackRegions(data); var regions = data.regions; $.each(regions, function(i) { createRegionDiv(regions, i); @@ -241,33 +296,35 @@ var createRegionsFromHTML = function (data) { var regions = data.regions; var selector = data.settings.regionContentSelector; + // regions are defined in "a" tags var $content = data.$elem.contents(selector).contents('a'); - console.debug("createRegionsFromHTML", $content); + console.debug("createRegionsFromHTML. elems: ", $content); $content.each(function(index, a) { var $a = $(a); - var href = $a.attr('href'); - var rel = $a.attr('rel'); - var area = rel.replace(/^area:/i, ''); - var pos = area.split("/", 4); + // the "coords" attribute contains the region coords (0..1) + var coords = $a.attr('coords'); + var pos = coords.split(",", 4); var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]); regions.push(rect); - var $regionDiv = createRegionDiv(regions, index); - $regionDiv.append($a.clone()); - // $a.show(); + // create the div + var href = $a.attr('href'); + var $regionDiv = createRegionDiv(regions, index, href); + var $contents = $a.contents().clone(); + $regionDiv.append($contents); }); }; // show a region on top of the scaler image - var showRegionDiv = function (data, index, anim) { + var renderRegion = function (data, index, anim) { if (!data.imgTrafo) return; var $elem = data.$elem; var regions = data.regions; if (index > regions.length) return; - var region = regions[index] + var region = regions[index]; var $regionDiv = region.$div; if (!$regionDiv) { - console.debug("showRegionDiv: region has no $div", region); - // alert("showRegionDiv: region has no $div to show"); + console.debug("renderRegion: region has no $div", region); + // alert("renderRegion: region has no $div to show"); return; } var regionRect = region.copy(); @@ -275,12 +332,14 @@ if (show && data.zoomArea.overlapsRect(regionRect)) { regionRect.clipTo(data.zoomArea); var screenRect = data.imgTrafo.transform(regionRect); - screenRect.adjustDiv($regionDiv); + console.debug("renderRegion: pos=",geom.position(screenRect)); if (anim) { $regionDiv.fadeIn(); } else{ $regionDiv.show(); } + // for some reason adjustDiv sets wrong coords when called BEFORE show()? + screenRect.adjustDiv($regionDiv); } else { if (anim) { $regionDiv.fadeOut(); @@ -291,9 +350,9 @@ }; // show regions - var showRegionDivs = function (data, anim) { + var renderRegions = function (data, anim) { for (var i = 0; i < data.regions.length ; i++) { - showRegionDiv(data, i, anim); + renderRegion(data, i, anim); } }; @@ -302,10 +361,10 @@ var rg = data.settings.rg; if (rg == null) return; var regions = data.regions; - var rs = rg.split(","); + var rs = rg.split(";"); for (var i = 0; i < rs.length; i++) { var r = rs[i]; - var pos = r.split("/", 4); + var pos = r.split(",", 4); var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]); regions.push(rect); } @@ -322,21 +381,21 @@ for (var i = 0; i < regions.length; i++) { region = regions[i]; if (i) { - rg += ','; + rg += ';'; } rg += [ fn.cropFloatStr(region.x), fn.cropFloatStr(region.y), fn.cropFloatStr(region.width), fn.cropFloatStr(region.height) - ].join('/'); + ].join(','); } data.settings.rg = rg; }; // reload display after a region has been added or removed var redisplay = function (data) { - if (!data.settings.includeRegionContent) { + if (!data.settings.hasRegionContent) { packRegions(data); } fn.redisplay(data); @@ -364,30 +423,30 @@ data = this; console.debug("regions: handleSetup", data.settings.rg); // regions with content are given in HTML divs - if (data.settings.includeRegionContent) { + if (data.settings.hasRegionContent) { createRegionsFromHTML(data); // regions are defined in the URL } else { - unpackRegions(data); - createRegionDivs(data); - fn.highlightButtons(data, 'regionhtml', data.settings.showRegionHTML); + createRegionsFromURL(data); + fn.highlightButtons(data, 'regionhtml', data.settings.showRegionInfo); } }; - // event handler, sets buttons and shows regions + // event handler, sets buttons and shows regions when scaler img is reloaded var handleUpdate = function (evt) { data = this; - fn.highlightButtons(data, 'regions' , data.settings.isRegionVisible); - fn.highlightButtons(data, 'regionhtml' , data.settings.showRegionHTML); - showRegionDivs(data); - console.debug("regions: handleUpdate", data.settings.rg); + console.debug("regions: handleUpdate"); + var settings = data.settings; + fn.highlightButtons(data, 'regions' , settings.isRegionVisible); + fn.highlightButtons(data, 'regionhtml' , settings.showRegionInfo); + renderRegions(data); }; // event handler, redisplays regions (e.g. in a new position) var handleRedisplay = function (evt) { data = this; - showRegionDivs(data); console.debug("regions: handleRedisplay"); + // renderRegions(data); }; // event handler @@ -420,27 +479,30 @@ var $html = $('<div class="keep regionHTML"/>'); $elem.append($html); data.$htmlDiv = $html; - // no URL-defined regions, no buttons when regions are predefined in HTML - var hasRegionContent = data.settings.includeRegionContent; - if (!hasRegionContent) { - // add "rg" to digilibParamNames - data.settings.digilibParamNames.push('rg'); - // additional buttons - var buttonSettings = data.settings.buttonSettings.fullscreen; - // configure buttons through digilib "regionSet" option - var buttonSet = data.settings.regionSet || regionSet; - // set regionSet to [] or '' for no buttons (when showing regions only) - if (buttonSet.length && buttonSet.length > 0) { - buttonSettings['regionSet'] = buttonSet; - buttonSettings.buttonSets.push('regionSet'); - } - } // install event handler var $data = $(data); $data.bind('setup', handleSetup); $data.bind('update', handleUpdate); $data.bind('redisplay', handleRedisplay); $data.bind('dragZoom', handleDragZoom); + var settings = data.settings; + var selector = data.settings.regionContentSelector; + settings.hasRegionContent = $elem.has(selector).length > 0; + // neither URL-defined regions nor buttons when regions are predefined in HTML + if (!settings.hasRegionContent) { + var mode = settings.interactionMode; + // add "rg" to digilibParamNames + settings.digilibParamNames.push('rg'); + // additional buttons + var buttonSettings = settings.buttonSettings[mode]; + // configure buttons through digilib "regionSet" option + var buttonSet = settings.regionSet || regionSet; + // set regionSet to [] or '' for no buttons (when showing regions only) + if (buttonSet.length && buttonSet.length > 0) { + buttonSettings.regionSet = buttonSet; + buttonSettings.buttonSets.push('regionSet'); + } + } }; // plugin object with name and install/init methods