digilib: client/digitallibrary/jquery/jquery.digilib.js comparison

comparison client/digitallibrary/jquery/jquery.digilib.js @ 648:8f76bd79648e jquery

first try at birdview indicator

author	hertzhaft
date	Fri, 21 Jan 2011 00:33:33 +0100
parents	f18fac852d93
children	e328273b7ef4

comparison

equal deleted inserted replaced

-:f18fac852d93
+:8f76bd79648e
 /*
 * digilib jQuery plugin
 *
 */
 // fallback for console.log calls
 if (typeof(console) === 'undefined') {
 var console = {
 log : function(){},
 debug : function(){},
 'birdDivOptions' : {'dw' : 200, 'dh' : 200},
 // is the "about" window shown?
 'isAboutDivVisible' : false
 };
 // affine geometry classes
 var geom = dlGeometry();
 var MAX_ZOOMAREA = geom.rectangle(0, 0, 1, 1);
 var actions = {
 // digilib initialization
 init : function(options) {
 // settings for this digilib instance are merged from defaults and options
 var settings = $.extend({}, defaults, options);
 showBirdDiv : function (data, show) {
 if (data.$birdDiv == null) {
 // 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;
 var oldpn = settings.pn;
 var pn = setNumValue(settings, "pn", pageNr);
 data.marks = [];
 data.zoomArea = MAX_ZOOMAREA;
 // then reload
 redisplay(data);
 },
 // zoom by a given factor
 zoomBy : function (data, factor) {
 zoomBy(data, factor);
 },
 // returns parameters from page url
 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');
 if (!src) {
 return null;
 var baseUrl = url.substring(0, pos);
 var newurl = baseUrl + '?' + queryString;
 return newurl;
 };
 // processes some parameters into objects and stuff
 var unpackParams = function (data) {
 var settings = data.settings;
 // zoom area
 var zoomArea = geom.rectangle(settings.wx, settings.wy, settings.ww, settings.wh);
 data.zoomArea = zoomArea;
 for (var i = 0; i < pa.length ; i++) {
 opts[pa[i]] = pa[i];
 }
 }
 data.dlOpts = opts;
 };
 // put objects back into parameters
 var packParams = function (data) {
 var settings = data.settings;
 // zoom area
 if (data.zoomArea) {
 clop += o;
 }
 settings.clop = clop;
 }
 };
 // returns maximum size for scaler img in fullscreen mode
 var getFullscreenImgSize = function($elem) {
 var winH = $(window).height();
 var winW = $(window).width();
 // 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;
 if (settings.interactionMode === 'fullscreen') {
 // update location.href (browser URL) in fullscreen mode
 var birdSettings = $.extend({}, settings, settings.birdDivOptions);
 var birdUrl = settings.scalerBaseUrl + '?' + getParamString(birdSettings, keys);
 // 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);
 $birdviewDiv.append($birdzoomDiv);
 $birdviewDiv.append($birdImg);
 $div.fadeOut();
 }
 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;
 // create Transform from current area and picsize
 var picpos = $img.offset();
 renderMarks(data);
 //digilib.showArrows(); // show arrow overlays for zoom navigation
 // done -- hide about div ---
 // --- why? This only leads to suprise effects when displayed programmatically
 // settings.isAboutDivVisible = showDiv(null, data.$aboutDiv, 0);
+showBirdIndicator(data);
 };
 };
 // place marks on the image
 var renderMarks = function (data) {
 $elem.append($mark);
 $mark.offset({ left : mpos.x, top : mpos.y});
 }
 }
 };
 // zooms by the given factor
 var zoomBy = function(data, factor) {
 var area = data.zoomArea;
 var newarea = area.copy();
 // scale
 } else {
 settings[key] = value;
 }
 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]) {
 // call action on this with the remaining arguments (inserting data as first argument)
 var $elem = $(this);