Mercurial > hg > digilib-old
changeset 947:5bde01bcfb16
button plugin works now.
| author | robcast |
|---|---|
| date | Mon, 02 Jan 2012 21:10:14 +0100 |
| parents | aa5a978a5311 |
| children | cd8c1fe97607 |
| files | webapp/src/main/webapp/jquery/digilib.html webapp/src/main/webapp/jquery/jquery-test-embedded-rc.html webapp/src/main/webapp/jquery/jquery-test-embedded.html webapp/src/main/webapp/jquery/jquery-test-full-rc.html webapp/src/main/webapp/jquery/jquery-test-full.html webapp/src/main/webapp/jquery/jquery-test-svg.html webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js webapp/src/main/webapp/jquery/jquery.digilib.buttons.js webapp/src/main/webapp/jquery/jquery.digilib.js webapp/src/main/webapp/jquery/jquery.digilib.regions.js |
| diffstat | 10 files changed, 70 insertions(+), 63 deletions(-) [+] |
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/digilib.html Mon Jan 02 17:12:39 2012 +0100 +++ b/webapp/src/main/webapp/jquery/digilib.html Mon Jan 02 21:10:14 2012 +0100 @@ -16,8 +16,8 @@ <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.buttons.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.birdseye.js"></script> + <script type="text/javascript" src="jquery.digilib.regions.js"></script> <link rel="stylesheet" type="text/css" href="jquery.digilib.css" /> <script type="text/javascript">
--- a/webapp/src/main/webapp/jquery/jquery-test-embedded-rc.html Mon Jan 02 17:12:39 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery-test-embedded-rc.html Mon Jan 02 21:10:14 2012 +0100 @@ -50,6 +50,7 @@ <script type="text/javascript" src="jquery.cookie.js"></script> <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.buttons.js"></script> <script type="text/javascript" src="jquery.digilib.birdseye.js"></script> <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
--- a/webapp/src/main/webapp/jquery/jquery-test-embedded.html Mon Jan 02 17:12:39 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery-test-embedded.html Mon Jan 02 21:10:14 2012 +0100 @@ -51,10 +51,11 @@ </style> - <script type="text/javascript" src="jquery-1.5.1.js"></script> + <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <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.buttons.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>
--- a/webapp/src/main/webapp/jquery/jquery-test-full-rc.html Mon Jan 02 17:12:39 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery-test-full-rc.html Mon Jan 02 21:10:14 2012 +0100 @@ -22,6 +22,7 @@ <script type="text/javascript" src="jquery.cookie.js"></script> <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.buttons.js"></script> <script type="text/javascript" src="jquery.digilib.birdseye.js"></script> <script type="text/javascript" src="jquery.digilib.regions.js"></script> <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
--- a/webapp/src/main/webapp/jquery/jquery-test-full.html Mon Jan 02 17:12:39 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery-test-full.html Mon Jan 02 21:10:14 2012 +0100 @@ -55,10 +55,11 @@ } </style> - <script type="text/javascript" src="jquery-1.5.1.js"></script> + <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <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.buttons.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>
--- a/webapp/src/main/webapp/jquery/jquery-test-svg.html Mon Jan 02 17:12:39 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery-test-svg.html Mon Jan 02 21:10:14 2012 +0100 @@ -7,10 +7,11 @@ <style type="text/css"> </style> - <script type="text/javascript" src="jquery-1.4.4.js"></script> + <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <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.buttons.js"></script> <script type="text/javascript" src="svg/jquery.svg.js"></script> <script type="text/javascript" src="svg/jquery.digilibSVG.js"></script> <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
--- a/webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js Mon Jan 02 17:12:39 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js Mon Jan 02 21:10:14 2012 +0100 @@ -40,7 +40,7 @@ } var on = digilib.fn.showDiv(settings.isBirdDivVisible, data.$birdDiv, show); settings.isBirdDivVisible = on; - digilib.fn.highlightButtons(data, 'bird', on); + //digilib.fn.highlightButtons(data, 'bird', on); updateBirdDiv(data); digilib.fn.storeOptions(data); } @@ -72,7 +72,7 @@ $data.on('setup', handleSetup); $data.on('update', handleUpdate); $data.on('redisplay', handleRedisplay); - $data.on('dragZoom', handleDragZoom); + $data.on('changeZoomArea', handleChangeZoomArea); }; @@ -103,11 +103,11 @@ } }; - var handleDragZoom = function (evt, zoomArea) { + var handleChangeZoomArea = function (evt, zoomArea) { //console.debug("birdseye: handleDragZoom za="+zoomArea); var data = this; if (data.settings.isBirdDivVisible) { - setBirdZoom(data, zoomArea); + updateBirdZoom(data, zoomArea); } }; @@ -174,8 +174,10 @@ // malheureusement IE7 calls load handler when there is no size info yet setTimeout(function () { $birdImg.triggerHandler('load'); }, 200); } + // create Transform from current area and picsize + data.birdTrafo = digilib.fn.getImgTrafo(data.$birdImg, FULL_AREA); // update display (zoom area indicator) - digilib.fn.updateDisplay(data); + $(data).trigger('update'); }; }; @@ -191,8 +193,6 @@ } else { $birdZoom.show(); } - // create Transform from current area and picsize - data.birdTrafo = digilib.fn.getImgTrafo(data.$birdImg, FULL_AREA); var zoomRect = data.birdTrafo.transform(zoomArea); console.debug("renderBirdArea:", zoomRect, "zoomArea:", zoomArea, "$birdTrafo:", data.birdTrafo); // acount for border width @@ -215,6 +215,16 @@ } }; + // move bird zoom indicator to reflect zoomed detail area + var updateBirdZoom = function(data, zoomArea) { + var birdRect = data.birdTrafo.transform(zoomArea); + var $birdZoom = data.$birdZoom; + // acount for border width + var bw = digilib.fn.getBorderWidth($birdZoom); + birdRect.addPosition({x : -bw, y : -bw}); + birdRect.adjustDiv(data.$birdZoom); + }; + // bird's eye view zoom area click and drag handler var setupBirdDrag = function(data) { var $birdImg = data.$birdImg; @@ -246,12 +256,12 @@ newRect = birdZoomRect.copy(); newRect.addPosition(delta); newRect.stayInside(birdImgRect); + // acount for border width + newRect.addPosition({x : -bw, y : -bw}); + newRect.adjustDiv($birdZoom); // reflect birdview zoom position in scaler image var area = data.birdTrafo.invtransform(newRect); $(data).trigger('changeZoomArea', area); - // acount for border width - newRect.addPosition({x : -bw, y : -bw}); - newRect.adjustDiv($birdZoom); return false; }; @@ -284,19 +294,6 @@ } }; - // move bird zoom indicator to reflect zoomed detail area - var setBirdZoom = function(data, rect) { - var part = data.imgTrafo.invtransform(rect); - // area = FULL_AREA.fit(part); // no, we want to see where we transcend the borders - birdTrafo = digilib.fn.getImgTrafo(data.$birdImg, FULL_AREA); - var birdRect = birdTrafo.transform(part); - var $birdZoom = data.$birdZoom; - // acount for border width - var bw = digilib.fn.getBorderWidth($birdZoom); - birdRect.addPosition({x : -bw, y : -bw}); - birdRect.adjustDiv(data.$birdZoom); - }; - // plugin object with name and init // shared objects filled by digilib on registration var plugin = {
--- a/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js Mon Jan 02 17:12:39 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js Mon Jan 02 21:10:14 2012 +0100 @@ -164,8 +164,8 @@ }; var defaults = { - // buttons - 'buttons' : buttons, + // buttons (reference added later) + 'buttons' : null, // defaults for digilib buttons 'buttonSettings' : { 'fullscreen' : { @@ -230,8 +230,11 @@ $.extend(digilib.defaults, defaults); $.extend(digilib.actions, actions); $.extend(digilib.buttons, buttons); + // update buttons reference in defaults + digilib.defaults.buttons = digilib.buttons; // export functions digilib.fn.createButton = createButton; + digilib.fn.highlightButtons = highlightButtons; }; // plugin initialization @@ -413,7 +416,7 @@ name : 'buttons', install : install, init : init, - //buttons : {}, + buttons : {}, actions : {}, fn : {}, plugins : {}
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js Mon Jan 02 17:12:39 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.js Mon Jan 02 21:10:14 2012 +0100 @@ -109,7 +109,9 @@ // rectangle with maximum zoom area var FULL_AREA; // limit for float comparison - var EPSILON = 0.000001; + var EPSILON = 0.0001; + // list of buttons + var buttons = {}; var actions = { // init: digilib initialization @@ -214,6 +216,9 @@ elemSettings.scalerBaseUrl = elemSettings.digilibBaseUrl + '/servlet/Scaler'; } } + // set up event handlers + $(data).on('update', handleUpdate); // handleUpdate needs to be the first handler for update + $(data).on('changeZoomArea', handleChangeZoomArea); // initialise plugins for (n in plugins) { var p = plugins[n]; @@ -226,7 +231,7 @@ if (data.scaleMode === 'pixel' || data.scaleMode === 'size') { loadImageInfo(data); // triggers "imageInfo" on completion } - // create HTML structure for scaler, taking width of buttons div into account + // create HTML structure for scaler setupScalerDiv(data); // about window creation - TODO: could be deferred? restrict to only one item? setupAboutDiv(data); @@ -801,14 +806,19 @@ // update display (overlays etc.) var updateDisplay = function (data) { + // send event + $(data).trigger('update'); + }; + + // update display (overlays etc.) + var handleUpdate = function (evt) { + var data = this; updateImgTrafo(data); renderMarks(data); setupZoomDrag(data); renderZoomArrows(data); - // send event - $(data).trigger('update'); }; - + // returns maximum size for scaler img in fullscreen mode var getFullscreenImgSize = function (data) { var mode = data.settings.interactionMode; @@ -827,12 +837,10 @@ console.debug("fixing border height for getFullscreenImgSize!"); borderH = 5; } - // FIXME! var buttonsW = 0; if (data.settings.visibleButtonSets) { // get button width from settings - buttonsW = data.settings.buttonSettings[mode].buttonSetWidth; - // TODO: leave space for all button sets? + buttonsW = data.settings.buttonSettings[mode].buttonSetWidth * data.settings.visibleButtonSets; } // account for left/right border, body margins and additional requirements var imgW = winW - borderW - buttonsW; @@ -892,15 +900,13 @@ $img.addClass('pic'); data.$scaler = $scaler; data.$img = $img; - // set up event handlers - $(data).on('changeZoomArea', handleChangeZoomArea); + // set busy cursor + $('body').css('cursor','progress'); + data.$scaler.css('cursor', 'progress'); // set up image load handler before setting the src attribute (IE bug) $img.load(scalerImgLoadedHandler(data)); $img.error(function () {console.error("error loading scaler image");}); $img.attr('src', scalerUrl); - // set busy cursor - $('body').css('cursor','progress'); - data.$scaler.css('cursor', 'progress'); }; // creates arrow overlays for moving the zoomed area @@ -1100,7 +1106,7 @@ data.imgTrafo = getImgTrafo($img, data.zoomArea, data.settings.rot, data.scalerFlags.hmir, data.scalerFlags.vmir, data.scaleMode, data); - // console.debug("imgTrafo=", data.imgTrafo); + console.debug("imgTrafo=", data.imgTrafo); } }; @@ -1143,6 +1149,7 @@ var dw = data.zoomArea.width / newZa.width; var dh = data.zoomArea.height / newZa.height; var deltapix = geom.size(dw, dh); + data.$elem.find(".overlay").hide(); // hide all overlays (marks/regions) setZoomBg(data, deltapix); } else if (Math.abs(delta.x) > EPSILON || Math.abs(delta.y) > EPSILON) { // move background @@ -1154,6 +1161,7 @@ moveZoomBg(data, deltapix); } else { // no background yet + data.$elem.find(".overlay").hide(); // hide all overlays (marks/regions) setZoomBg(data, deltapix); } } @@ -1283,7 +1291,7 @@ $scaler.one('mousedown.dlZoomArea', zoomStart); }; - // set zoom background (returns rectangle with fullsize backgroud coordinates) + // set zoom background (returns rectangle with fullsize background coordinates) var setZoomBg = function(data, delta) { var $scaler = data.$scaler; var $img = data.$img; @@ -1390,11 +1398,14 @@ var pos = geom.position(evt); delta = startPos.delta(pos); // position background - moveZoomBg(data, delta); + //moveZoomBg(data, delta); // send message event with current zoom position var za = geom.rectangle($img); za.addPosition(delta.neg()); - $data.trigger('dragZoom', [za]); + // transform back + var newArea = data.imgTrafo.invtransform(za); + $data.trigger('changeZoomArea', newArea); + //$data.trigger('dragZoom', [za]); return false; }; @@ -1591,7 +1602,7 @@ plugins[plugin.name] = plugin; // share common objects plugin.defaults = defaults; - //plugin.buttons = buttons; FIXME + plugin.buttons = buttons; plugin.actions = actions; plugin.fn = fn; plugin.plugins = plugins;
--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Mon Jan 02 17:12:39 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Mon Jan 02 21:10:14 2012 +0100 @@ -9,8 +9,6 @@ (function($) { // the digilib object var digilib; - // the data object passed by digilib - var data; // the functions made available by digilib var fn; // affine geometry plugin @@ -288,7 +286,7 @@ }; // create a region div from the data.regions array - var createRegionDiv = function (regions, index, attributes) { + var createRegionDiv = function (data, regions, index, attributes) { var $regionDiv = addRegionDiv(data, index, attributes); var region = regions[index]; region.$div = $regionDiv; @@ -300,7 +298,7 @@ unpackRegions(data); var regions = data.regions; $.each(regions, function(i) { - createRegionDiv(regions, i); + createRegionDiv(data, regions, i); }); }; @@ -324,7 +322,7 @@ if ($a.attr('href')) { attributes.href = $a.attr('href'); } if ($a.attr('title')) { attributes.title = $a.attr('title'); } // create the div - var $regionDiv = createRegionDiv(regions, index, attributes); + var $regionDiv = createRegionDiv(data, regions, index, attributes); var $contents = $a.contents().clone(); $regionDiv.append($contents); }); @@ -462,13 +460,7 @@ var handleRedisplay = function (evt) { var data = this; console.debug("regions: handleRedisplay"); - // renderRegions(data); - }; - - // event handler - var handleDragZoom = function (evt, zoomArea) { - // console.debug("regions: handleDragZoom, zoomArea:", zoomArea); - // var data = this; + //renderRegions(data); }; // plugin installation called by digilib on plugin object. @@ -500,9 +492,8 @@ $data.on('setup', handleSetup); $data.on('update', handleUpdate); $data.on('redisplay', handleRedisplay); - $data.on('dragZoom', handleDragZoom); var settings = data.settings; - var selector = data.settings.regionContentSelector; + var selector = settings.regionContentSelector; settings.hasRegionContent = $elem.has(selector).length > 0; // neither URL-defined regions nor buttons when regions are predefined in HTML if (!settings.hasRegionContent) {