'); - var $img = $('

'); - $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 = $('

'); + $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, diff -r b9f6e6e1e850 -r ca6b8c970ea1 client/digitallibrary/jquery/jquery.digilib.regions.js --- 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 = $('

'); $infoDiv.append($('

').text('

')); $.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($('

').text('')); }); $infoDiv.append($('

').text('

')); @@ -227,7 +231,11 @@ var regionInfoSVG = function (data) { var $infoDiv = $('

'); $.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($('

').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 = $('