Mercurial > hg > digilib-old
changeset 880:ca6b8c970ea1 jquery
merge from stream
| author | hertzhaft |
|---|---|
| date | Thu, 17 Mar 2011 20:25:56 +0100 |
| parents | b2ec8244b86e (diff) b9f6e6e1e850 (current diff) |
| children | 82e82774e0d7 |
| files | |
| diffstat | 17 files changed, 231 insertions(+), 112 deletions(-) [+] |
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery-test-embedded.html Thu Mar 10 21:21:51 2011 +0100 +++ b/client/digitallibrary/jquery/jquery-test-embedded.html Thu Mar 17 20:25:56 2011 +0100 @@ -85,7 +85,7 @@ <tr> <td> <div id="digilib-1" class="digilib single"> - <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/&pn=1" /> + <img title="test" alt="testalt" src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/&pn=1" /> </div> </td>
--- a/client/digitallibrary/jquery/jquery.digilib.css Thu Mar 10 21:21:51 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.css Thu Mar 17 20:25:56 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; @@ -96,11 +96,12 @@ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; border: 2px solid lightcyan; + color: black; background-color: lightgrey; z-index: 1000; } -div.regionHTML a { +div.digilib div.regionHTML a { color: white; text-decoration: none; font-size: 11px; @@ -126,15 +127,24 @@ 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; + z-index: 200; + } + +div.digilib div.arrows div.button:hover { + opacity: 0.5; } -div.arrow:hover { - opacity: 0.5; +div.digilib div.arrows div.button a { + position: relative; } /* special definitions for fullscreen */ @@ -144,15 +154,17 @@ top: 0px; padding: 2px; background-color: transparent; - z-index: 100; + z-index: 200; } -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 { @@ -176,7 +188,7 @@ z-index: 100; } -div.digilib.dl_embedded div.button:hover { +div.digilib.dl_embedded div.buttons div.button:hover { background-color: black; } @@ -189,3 +201,4 @@ bottom: 0px; right: 0px; } +
--- a/client/digitallibrary/jquery/jquery.digilib.geometry.js Thu Mar 10 21:21:51 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.geometry.js Thu Mar 17 20:25:56 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 10 21:21:51 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.js Thu Mar 17 20:25:56 2011 +0100 @@ -166,6 +166,26 @@ tooltip : "less options", icon : "options.png" }, + up : { + onclick : ["moveZoomArea", 0, -1], + tooltip : "move zoom area up", + icon : "up.png" + }, + down : { + onclick : ["moveZoomArea", 0, 1], + tooltip : "move zoom area down", + icon : "down.png" + }, + left : { + onclick : ["moveZoomArea", -1, 0], + tooltip : "move zoom area left", + icon : "left.png" + }, + right : { + onclick : ["moveZoomArea", 1, 0], + tooltip : "move zoom area right", + icon : "right.png" + }, SEP : { icon : "sep.png" } @@ -219,29 +239,25 @@ '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","lessoptions"], + 'arrowSet' : ["up", "down", "left", "right"], '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","lessoptions"], + 'arrowSet' : ["up", "down", "left", "right"], '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' - }, + // arrow bar overlays for moving the zoomed area + 'showZoomArrows' : true, + // zoom arrow bar minimal width (for small images) + 'zoomArrowMinWidth' : 6, + // zoom arrow bar standard width + 'zoomArrowWidth' : 32, + // by what percentage should the arrows move the zoomed area? + 'zoomArrowMoveFactor' : 0.5, // number of visible button groups 'visibleButtonSets' : 1, // is the "about" window shown? @@ -472,6 +488,17 @@ redisplay(data); }, + // move zoomed area + moveZoomArea : function (data, dx, dy) { + var za = data.zoomArea; + var factor = data.settings.zoomArrowMoveFactor; + var deltaX = dx * factor * za.width; + var deltaY = dy * factor * za.height; + za.addPosition(geom.position(deltaX, deltaY)); + data.zoomArea = FULL_AREA.fit(za); + redisplay(data); + }, + // set a mark by clicking (or giving a position) setMark : function (data, mpos) { if (mpos == null) { @@ -980,12 +1007,17 @@ scalerUrl = getScalerUrl(data); $img = $elem.find('img'); if ($img.length > 0) { - oldUrl = $img.attr('src'); + var oldUrl = $img.attr('src'); + // keep img attributes from html + var title = $img.attr('title'); + var alt = $img.attr('alt'); if (oldUrl === scalerUrl) { console.debug("img detach:", $img); $img.detach(); } else { $img = $('<img/>'); + $img.attr("title", title); + $img.attr("alt", alt); } } else { $img = $('<img/>'); @@ -1006,6 +1038,49 @@ $img.attr('src', scalerUrl); }; + // creates HTML structure for a single button + var createButton = function (data, $div, buttonName) { + var $elem = data.$elem; + var settings = data.settings; + var mode = settings.interactionMode; + var imagePath = settings.buttonSettings[mode].imagePath; + var buttonConfig = settings.buttons[buttonName]; + // button properties + var action = buttonConfig.onclick; + var tooltip = buttonConfig.tooltip; + var icon = imagePath + buttonConfig.icon; + // construct the button html + var $button = $('<div class="button"></div>'); + var $a = $('<a/>'); + var $img = $('<img class="button"/>'); + $div.append($button); + $button.append($a); + $a.append($img); + // add attributes and bindings + $button.attr('title', tooltip); + $button.addClass('button-' + buttonName); + $img.attr('src', icon); + // create handler for the buttons + $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 + return function (evt) { + console.debug('click action=', action, ' evt=', evt); + $elem.digilib.apply($elem, action); + return false; + }; + } else { + // the handler function calls digilib with action + return function (evt) { + console.debug('click action=', action, ' evt=', evt); + $elem.digilib(action); + return false; + }; + } + })()); + }; + // creates HTML structure for buttons in elem var createButtons = function (data, buttonSetIdx) { var $elem = data.$elem; @@ -1022,38 +1097,7 @@ var buttonNames = buttonSettings[buttonGroup]; for (var i = 0; i < buttonNames.length; i++) { var buttonName = buttonNames[i]; - var buttonConfig = settings.buttons[buttonName]; - // construct the button html - var $button = $('<div class="button"></div>'); - var $a = $('<a/>'); - var $img = $('<img class="button"/>'); - $buttonsDiv.append($button); - $button.append($a); - $a.append($img); - // add attributes and bindings - $button.attr('title', buttonConfig.tooltip); - $button.addClass('button-' + buttonName); - // create handler for the buttons - $a.bind('click.digilib', (function () { - // we create a new closure to capture the value of action - var action = buttonConfig.onclick; - if ($.isArray(action)) { - // the handler function calls digilib with action and parameters - return function (evt) { - console.debug('click action=', action, ' evt=', evt); - $elem.digilib.apply($elem, action); - return false; - }; - } else { - // the handler function calls digilib with action - return function (evt) { - console.debug('click action=', action, ' evt=', evt); - $elem.digilib(action); - return false; - }; - } - })()); - $img.attr('src', buttonSettings.imagePath + buttonConfig.icon); + createButton(data, $buttonsDiv, buttonName); } // make buttons div scroll if too large for window if ($buttonsDiv.height() > $(window).height() - 10) { @@ -1076,56 +1120,83 @@ 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; + if (arrowNames == null) return; + // 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) { - 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; + var $arrowsDiv = data.$elem.find('div.arrows'); + if (isFullArea(data.zoomArea) || !settings.showZoomArrows) { + $arrowsDiv.hide(); + return; + } + $arrowsDiv.show(); + 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; + } + } + // vertical position of left/right image + var arrowData = [{ + name : 'up', + rect : geom.rectangle(r.x, r.y, r.width, aw), + show : canMove(data, 0, -1) + }, { + name : 'down', + rect : geom.rectangle(r.x, r.y + r.height - aw, r.width, aw), + show : canMove(data, 0, 1) + }, { + name : 'left', + rect : geom.rectangle(r.x, r.y, aw, r.height), + show : canMove(data, -1, 0), + }, { + name : 'right', + rect : geom.rectangle(r.x + r.width - aw, r.y, aw, r.height), + show : canMove(data, 1, 0) + }]; + // render a single zoom Arrow + var render = function (i, item) { + var $arrow = $arrowsDiv.find('div.button-' + item.name); + if (item.show) { + $arrow.show(); + } else { + $arrow.hide(); + return; + } + var r = item.rect; + r.adjustDiv($arrow); + var $a = $arrow.contents('a'); + var $img = $a.contents('img'); + $img.width(aw).height(aw); + // hack for missing vertical-align + if (item.name.match(/left|right/)) { + var top = (r.height - $a.height())/2; + $a.css({'top' : top}); // position : 'relative' + } + }; + $.each(arrowData, render); }; - // creates HTML structure for the about view in elem var setupAboutDiv = function (data) { var $elem = data.$elem; @@ -1625,6 +1696,18 @@ return border/2; }; + // auxiliary function, can the current zoomarea be moved further? + var canMove = function(data, movx, movy) { + var za = data.zoomArea; + if (isFullArea(za)) return false; + var x2 = za.x + za.width; + var y2 = za.y + za.height; + return ((movx < 0) && (za.x > 0)) + || ((movx > 0) && (x2 < 1.0)) + || ((movy < 0) && (za.y > 0)) + || ((movy > 0) && (y2 < 1.0)) + }; + // auxiliary function (from old dllib.js) var isFullArea = function (area) { return (area.width === 1.0) && (area.height === 1.0); @@ -1687,6 +1770,7 @@ setQuality : setQuality, getScaleMode : getScaleMode, setScaleMode : setScaleMode, + canMove : canMove, isFullArea : isFullArea, isNumber : isNumber, getBorderWidth : getBorderWidth,
--- a/client/digitallibrary/jquery/jquery.digilib.regions.js Thu Mar 10 21:21:51 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.regions.js Thu Mar 17 20:25:56 2011 +0100 @@ -216,7 +216,11 @@ 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(','); + var area = [ + fn.cropFloatStr(r.x), + fn.cropFloatStr(r.y), + fn.cropFloatStr(r.width), + fn.cropFloatStr(r.height)].join(','); $infoDiv.append($('<div/>').text('<a coords="' + area + '" >')); }); $infoDiv.append($('<div/>').text('</div>')); @@ -227,7 +231,11 @@ var regionInfoSVG = function (data) { var $infoDiv = $('<div class="info svgattr"/>'); $.each(data.regions, function(index, r) { - var area = r.getAsSvg(); + var area = [ + fn.cropFloatStr(r.x), + fn.cropFloatStr(r.y), + fn.cropFloatStr(r.width), + fn.cropFloatStr(r.height)].join(' '); $infoDiv.append($('<div/>').text('"' + area + '"')); }); return $infoDiv; @@ -246,7 +254,7 @@ // show region info in a window var regionInfo = function (data) { var $html = data.$htmlDiv; - $html.append(regionInfoHeader(data)) + $html.append(regionInfoHeader(data)); $html.append(regionInfoHTML(data)); $html.append(regionInfoSVG(data)); $html.append(regionInfoDigilib(data)); @@ -254,20 +262,24 @@ }; // add a region to data.$elem - var addRegionDiv = function (data, index, url) { + var addRegionDiv = function (data, index, attributes) { var nr = index + 1; // we count regions from 1 // create a digilib URL for this detail - url = url || getRegionUrl(data, index); + var url = attributes ? attributes.href : 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 $regionLink = $('<a class="regionnumber"/>'); - $regionLink.attr('href', url); + $regionLink.attr(attributes); $regionLink.text(nr); $regionDiv.append($regionLink); } if (data.settings.autoRegionLinks) { + if (attributes) { + delete attributes.href; + $regionDiv.attr(attributes); + }; $regionDiv.bind('click.dlRegion', function() { window.location = url; }); @@ -276,8 +288,8 @@ }; // create a region div from the data.regions array - var createRegionDiv = function (regions, index, url) { - var $regionDiv = addRegionDiv(data, index, url); + var createRegionDiv = function (regions, index, attributes) { + var $regionDiv = addRegionDiv(data, index, attributes); var region = regions[index]; region.$div = $regionDiv; return $regionDiv; @@ -306,9 +318,13 @@ var pos = coords.split(",", 4); var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]); regions.push(rect); + // save the attributes + var attributes = {}; + if ($a.attr('id')) { attributes.id = $a.attr('id'); } + if ($a.attr('href')) { attributes.href = $a.attr('href'); } + if ($a.attr('title')) { attributes.title = $a.attr('title'); } // create the div - var href = $a.attr('href'); - var $regionDiv = createRegionDiv(regions, index, href); + var $regionDiv = createRegionDiv(regions, index, attributes); var $contents = $a.contents().clone(); $regionDiv.append($contents); });