Mercurial > hg > digilib-old
changeset 656:436e10669df8 jquery
first try at birdview indicator
author | hertzhaft |
---|---|
date | Fri, 21 Jan 2011 00:34:15 +0100 |
parents | 72acc47f1831 (diff) b3c05e1568cf (current diff) |
children | 6c756024300f |
files | client/digitallibrary/jquery/dlGeometry.js client/digitallibrary/jquery/jquery-test-full.html client/digitallibrary/jquery/jquery.digilib.js |
diffstat | 3 files changed, 58 insertions(+), 19 deletions(-) [+] |
line wrap: on
line diff
--- a/client/digitallibrary/jquery/dlGeometry.js Fri Jan 21 00:00:08 2011 +0100 +++ b/client/digitallibrary/jquery/dlGeometry.js Fri Jan 21 00:34:15 2011 +0100 @@ -283,7 +283,7 @@ that.getRotation = transform.getRotation; that.getTranslation = transform.getTranslation; that.getScale = transform.getScale; - + return that; };
--- a/client/digitallibrary/jquery/jquery-test-full.html Fri Jan 21 00:00:08 2011 +0100 +++ b/client/digitallibrary/jquery/jquery-test-full.html Fri Jan 21 00:34:15 2011 +0100 @@ -71,6 +71,10 @@ z-index: 1000; } + div.birdzoom { + border: 2px solid yellow; + } + </style> <script type="text/javascript" src="jquery-1.4.4.js"></script>
--- a/client/digitallibrary/jquery/jquery.digilib.js Fri Jan 21 00:00:08 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.js Fri Jan 21 00:34:15 2011 +0100 @@ -2,7 +2,7 @@ * digilib jQuery plugin * */ - + // fallback for console.log calls if (typeof(console) === 'undefined') { var console = { @@ -198,12 +198,12 @@ 'isAboutDivVisible' : false }; - + // affine geometry classes var geom = dlGeometry(); - + var MAX_ZOOMAREA = geom.rectangle(0, 0, 1, 1); - + var actions = { // init: digilib initialization init : function(options) { @@ -282,9 +282,11 @@ // no bird div -> create setupBirdDiv(data); } + // TODO: keep bird view visible after reload (parameter, cookie?) data.settings.isBirdDivVisible = showDiv(data.settings.isBirdDivVisible, data.$birdDiv, show); + showBirdIndicator(data); }, - + // goto given page nr (+/-: relative) gotoPage : function (data, pageNr) { var settings = data.settings; @@ -309,7 +311,7 @@ // then reload redisplay(data); }, - + // zoom by a given factor zoomBy : function (data, factor) { zoomBy(data, factor); @@ -360,7 +362,7 @@ var parseQueryParams = function() { return parseQueryString(window.location.search.slice(1)); }; - + // returns parameters from embedded img-element var parseImgParams = function($elem) { var src = $elem.find('img').first().attr('src'); @@ -434,7 +436,7 @@ return newurl; }; - // processes some parameters into objects and stuff + // processes some parameters into objects and stuff var unpackParams = function (data) { var settings = data.settings; // zoom area @@ -475,8 +477,8 @@ } } data.dlOpts = opts; - }; - + }; + // put objects back into parameters var packParams = function (data) { var settings = data.settings; @@ -520,7 +522,7 @@ settings.clop = clop; } }; - + // returns maximum size for scaler img in fullscreen mode var getFullscreenImgSize = function($elem) { var winH = $(window).height(); @@ -528,7 +530,7 @@ // TODO: account for borders? return geom.size(winW, winH); }; - + // (re)load the img from a new scaler URL var redisplay = function (data) { var settings = data.settings; @@ -647,7 +649,7 @@ // the bird's eye div var $birdviewDiv = $('<div class="birdview" style="display:none"/>'); // the detail indicator frame - var $birdzoomDiv = $('<div class="birdzoom"/>'); + var $birdzoomDiv = $('<div class="birdzoom" style="position: absolute; background-color: transparent;"/>'); // the small image var $birdImg = $('<img class="birdimg"/>'); $elem.append($birdviewDiv); @@ -702,12 +704,38 @@ return isVisible; }; + // shows bird view indicator + var showBirdIndicator = function (data) { + if (!data.settings.isBirdDivVisible || isFullArea(data)) return; + // TODO: more conditions: original size, pixel by pixel? + var $birdDiv = data.$birdDiv; + var $birdImg = $birdDiv.find('img.birdimg'); + var pos = $birdImg.offset(); + var birdRect = geom.rectangle(pos.left, pos.top, $birdImg.width(), $birdImg.height()); + var area = data.zoomArea; + // TODO: couldn't we do a trafo here? :-) + var indRect = geom.rectangle( + birdRect.x + birdRect.width * area.x, + birdRect.y + birdRect.height * area.y, + birdRect.width * area.width, + birdRect.height * area.height + ); + var $ind = $birdDiv.find('div.birdzoom'); + // TODO: set the coordinates all in one call? + $ind.width(indRect.width); + $ind.height(indRect.height); + $ind.offset({ left : indRect.x, top : indRect.y }); + // TODO: how to override this style with a CSS stylesheet? + if (!$ind.css('border')) $ind.css('border', '2px solid #ff0000'); + return; + }; + // returns function for load event of scaler img var scalerImgLoadedHandler = function (data) { var settings = data.settings; var $elem = data.$elem; var $img = data.$img; - + return function () { console.debug("img loaded! this=", this, " data=", data); var area = data.zoomArea; @@ -727,6 +755,7 @@ // done -- hide about div --- // --- why? This only leads to suprise effects when displayed programmatically // settings.isAboutDivVisible = showDiv(null, data.$aboutDiv, 0); + showBirdIndicator(data); }; }; @@ -747,7 +776,7 @@ } } }; - + // zooms by the given factor var zoomBy = function(data, factor) { var area = data.zoomArea; @@ -865,17 +894,23 @@ } return settings[key]; }; - + + // auxiliary function (from old dllib.js) + isFullArea = function(data) { + var area = data.zoomArea; + return (area.width == 1.0) && (area.height == 1.0); + }; + // auxiliary function (from Douglas Crockford, A.10) var isNumber = function isNumber(value) { return typeof value === 'number' && isFinite(value); }; - + // auxiliary function to crop senseless precision var cropFloat = function (x) { return parseInt(10000 * x, 10) / 10000; }; - + // hook plugin into jquery $.fn.digilib = function(action) { if (actions[action]) {