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

comparison client/digitallibrary/jquery/jquery.digilib.js @ 636:7049579a0097 jquery

last and next page works now implemented redisplay function (only tested with fullscreen) parameters that are changed need to be in data.queryParams to get in the url on redisplay

author	robcast
date	Tue, 18 Jan 2011 21:30:03 +0100
parents	7293a42f44f5
children	d904c0c74c15

comparison

equal deleted inserted replaced

-:7293a42f44f5
+:7049579a0097
 /*
 * digilib jQuery plugin
 *
 */
+// fallback for console.log calls
+if (typeof(console) === 'undefined') {
+var console = {
+log : function(){},
+debug : function(){},
+error : function(){}
+};
+}
 (function($) {
 var actions = {
 reference : {
 onclick : "javascript:getRefWin()",
 // is the "about" window shown?
 'isAboutDivVisible' : false
 };
-// parameters from the query string
-var queryParams = {};
 // affine geometry classes
 var geom = dlGeometry();
 var methods = {
 // digilib initialization
 init : function(options) {
 // settings for this digilib instance are merged from defaults and options
 var settings = $.extend({}, defaults, options);
 var isFullscreen = settings.interactionMode === 'fullscreen';
+var queryParams = {};
 if (isFullscreen) {
 queryParams = parseQueryParams();
 }
 return this.each(function() {
 var $elem = $(this);
 var data = $elem.data('digilib');
 var elemSettings;
 // if the plugin hasn't been initialized yet
 }
 // store $(this) element in the settings
 elemSettings.digilibRoot = $elem;
 data =  {
 target : $elem,
-settings : elemSettings
+settings : elemSettings,
+queryParams : queryParams
 };
 // store in data element
 $elem.data('digilib', data);
 }
 unpackParams(data);
 },
 // clean up digilib
 destroy : function() {
 return this.each(function(){
-var $this = $(this);
+var $elem = $(this);
-var data = $this.data('digilib');
+var data = $elem.data('digilib');
 // Namespacing FTW
 $(window).unbind('.digilib'); // unbinds all digilibs(?)
 data.digilib.remove();
-$this.removeData('digilib');
+$elem.removeData('digilib');
 });
 },
 // show or hide the 'about' window
 showAboutDiv : function(show) {
-var $this = $(this);
+var $elem = $(this);
-var data = $this.data('digilib');
+var data = $elem.data('digilib');
 data.settings.isAboutDivVisible = showDiv(data.settings.isAboutDivVisible, data.$aboutDiv, show);
 },
 // event handler: toggles the visibility of the bird's eye window
 showBirdDiv : function (show) {
-var $this = $(this);
+var $elem = $(this);
-var data = $this.data('digilib');
+var data = $elem.data('digilib');
 data.settings.isBirdDivVisible = showDiv(data.settings.isBirdDivVisible, data.$birdDiv, show);
 },
 // goto given page nr (+/-: relative)
-gotoPage : function(pageNr, keepMarks) {
+gotoPage : function (pageNr) {
 var $elem = $(this); // the clicked button
-var settings = $elem.data('digilib').settings;
+var data = $elem.data('digilib');
+var settings = data.settings;
 var oldpn = settings.pn;
 var pn = setNumValue(settings, "pn", pageNr);
 if (pn == null) return false; // nothing happened
 if (pn < 1) {
 alert("no such page (page number too low)");
 alert("no such page (page number too high)");
 settings.pn = oldpn;
 return false;
 }
 }
-// TODO: keepMarks
+// add pn to param list and remove mk and others(?)
-var $root = settings.digilibRoot;
+data.queryParams.pn = pn;
-var $img = $root.find('img.pic');
+delete data.queryParams.mk;
-display($img, settings);
+// then reload
-return false;
+redisplay(data);
 }
 };
 // sets a key to a value (relative values with +/- if relative=true)
 var setNumValue = function(settings, key, value) {
 	return settings[key];
 };
 // returns parameters from page url
 var parseQueryParams = function() {
-return parseQueryString(location.search.slice(1));
+return parseQueryString(window.location.search.slice(1));
 };
-// returns parameters taken from embedded img-element
+// returns parameters from embedded img-element
 var parseImgParams = function($elem) {
 var src = $elem.find('img').first().attr('src');
 if (!src) {
 return null;
 }
 var pos = src.indexOf('?');
 var query = (pos < 0) ? '' : src.substring(pos + 1);
 var scalerUrl = src.substring(0, pos);
 var params = parseQueryString(query);
 params.scalerBaseUrl = scalerUrl;
-// console.log(hash);
 return params;
 };
 // parses query parameter string into parameter object
 var parseQueryString = function(query) {
 var pairs = query.split("&");
 var params = {};
+//var keys = [];
 for (var i = 0; i < pairs.length; i++) {
 var pair = pairs[i].split("=");
 if (pair.length === 2) {
 params[pair[0]] = pair[1];
-}
+//keys.push(pair[0]);
 }
+}
 return params;
 };
 // returns a query string from key names from a parameter hash
 var getParamString = function (settings, keys) {
 var paramString = '';
 var latter = false;
 }
 }
 return paramString;
 };
+// returns URL and query string for Scaler
+var getScalerUrl = function (data) {
+var settings = data.settings;
+var keys = settings.scalerParamNames;
+var queryString = getParamString(settings, keys);
+var url = settings.scalerBaseUrl + '?' + queryString;
+return url;
+};
+// returns URL and query string for current digilib
+var getDigilibUrl = function (data) {
+var settings = data.settings;
+// make list from queryParams keys
+var keys = [];
+for (var k in data.queryParams) {
+keys.push(k);
+}
+var queryString = getParamString(settings, keys);
+var url = window.location.toString();
+var pos = url.indexOf('?');
+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;
-// read zoom area
+// zoom area
 var zoomArea = geom.rectangle(settings.wx, settings.wy, settings.ww, settings.wh);
 settings.zoomArea = zoomArea;
+// marks
-// read marks
 var marks = [];
 var mk = settings.mk || '';
 if (mk.indexOf(";") >= 0) {
 var pa = mk.split(";");    // old format with ";"
 } else {
 };
 // put objects back into parameters
 var packParams = function (data) {
 var settings = data.settings;
+// zoom area
 if (settings.zoomArea) {
 settings.wx = settings.zoomArea.x;
 settings.wy = settings.zoomArea.y;
 settings.ww = settings.zoomArea.width;
 settings.wh = settings.zoomArea.height;
 }
+// marks
 if (settings.marks) {
 var ma = [];
 for (var i = 0; i < settings.marks.length; i++) {
 ma.push(cropFloat(settings.marks[i].x) + "/" + cropFloat(settings.marks[i].y));
 }
 settings.mk = ma.join(",");
 }
 };
-// returns URL and query string for Scaler
-var getScalerString = function (settings) {
-var keys = settings.scalerParamNames;
-var queryString = getParamString(settings, keys);
-var url = settings.scalerBaseUrl + '?' + queryString;
-return url;
-};
 // 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 display = function ($img, settings) {
+var redisplay = function (data) {
-// TODO: update location.href (browser URL) in fullscreen mode
+var settings = data.settings;
-var scalerUrl = getScalerString(settings);
+if (settings.interactionMode === 'fullscreen') {
-$img.attr('src', scalerUrl);
+// update location.href (browser URL) in fullscreen mode
-// TODO: update bird view?
+var url = getDigilibUrl(data);
+var history = window.history;
+if (typeof(history.pushState) === 'function') {
+console.debug("we could modify history, but we don't...");
+}
+window.location = url;
+} else {
+// embedded mode -- just change img src
+var url = getScalerUrl(data);
+data.$img.attr('src', url);
+}
 };
 // creates HTML structure for digilib in elem
 var setupScalerDiv = function (data) {
 var settings = data.settings;
 // fullscreen
 var imgSize = getFullscreenImgSize($elem);
 settings.dw = imgSize.width;
 settings.dh = imgSize.height;
 $img = $('<img/>');
-display($img, settings); // TODO: is display the right thing here?
+var scalerUrl = getScalerUrl(data);
+$img.attr('src', scalerUrl);
 } else {
 // embedded mode -- try to keep img tag
 $img = $elem.find('img');
 if ($img.length > 0) {
 console.debug("img detach:",$img);
 $img.detach();
 } else {
 $img = $('<img/>');
-display($img, settings); // dito
+var scalerUrl = getScalerUrl(data);
+$img.attr('src', scalerUrl);
 }
 }
 // create new html
 $elem.empty(); // TODO: should we keep stuff for customization?
 var $scaler = $('<div class="scaler"/>');
 $elem.append($scaler);
 $scaler.append($img);
 $img.addClass('pic');
-data.img = $img;
+data.$img = $img;
-$img.load(scalerImgLoadedFn(data));
+$img.load(scalerImgLoadedHandler(data));
 };
 // creates HTML structure for buttons in elem
 var setupButtons = function (data, actionGroup) {
 var $elem = data.target;
 }
 return isVisible;
 };
 // returns function for load event of scaler img
-var scalerImgLoadedFn = function (data) {
+var scalerImgLoadedHandler = function (data) {
 var settings = data.settings;
 var $elem = data.target;
-var $img = data.img;
+var $img = data.$img;
 return function () {
 console.debug("img loaded! this=", this, " data=", data);
 var area = settings.zoomArea;
 // create Transform from current area and picsize
 // auxiliary function to crop senseless precision
 var cropFloat = function (x) {
 return parseInt(10000 * x) / 10000;
 };
 // hook plugin into jquery
 $.fn.digilib = function(method) {
 if (methods[method]) {
 // call method on this with the remaining arguments
 return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));