Mercurial > hg > digilib-old
changeset 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 |
files | client/digitallibrary/jquery/jquery.digilib.js |
diffstat | 1 files changed, 90 insertions(+), 50 deletions(-) [+] |
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery.digilib.js Tue Jan 18 19:27:20 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.js Tue Jan 18 21:30:03 2011 +0100 @@ -2,6 +2,15 @@ * digilib jQuery plugin * */ + +// fallback for console.log calls +if (typeof(console) === 'undefined') { + var console = { + log : function(){}, + debug : function(){}, + error : function(){} + }; +} (function($) { var actions = { @@ -177,9 +186,6 @@ }; - // parameters from the query string - var queryParams = {}; - // affine geometry classes var geom = dlGeometry(); @@ -188,10 +194,11 @@ 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 isFullscreen = settings.interactionMode === 'fullscreen'; + var queryParams = {}; if (isFullscreen) { queryParams = parseQueryParams(); - } + } return this.each(function() { var $elem = $(this); var data = $elem.data('digilib'); @@ -208,7 +215,8 @@ elemSettings.digilibRoot = $elem; data = { target : $elem, - settings : elemSettings + settings : elemSettings, + queryParams : queryParams }; // store in data element $elem.data('digilib', data); @@ -227,33 +235,34 @@ // clean up digilib destroy : function() { return this.each(function(){ - var $this = $(this); - var data = $this.data('digilib'); + var $elem = $(this); + 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 data = $this.data('digilib'); + var $elem = $(this); + 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 data = $this.data('digilib'); + var $elem = $(this); + 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 @@ -269,11 +278,11 @@ return false; } } - // TODO: keepMarks - var $root = settings.digilibRoot; - var $img = $root.find('img.pic'); - display($img, settings); - return false; + // add pn to param list and remove mk and others(?) + data.queryParams.pn = pn; + delete data.queryParams.mk; + // then reload + redisplay(data); } }; @@ -292,10 +301,10 @@ // 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) { @@ -306,22 +315,23 @@ 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) { @@ -340,14 +350,38 @@ 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; - - // read marks + // marks var marks = []; var mk = settings.mk || ''; if (mk.indexOf(";") >= 0) { @@ -367,12 +401,14 @@ // 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++) { @@ -382,14 +418,6 @@ } }; - // 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(); @@ -399,11 +427,21 @@ }; // (re)load the img from a new scaler URL - var display = function ($img, settings) { - // TODO: update location.href (browser URL) in fullscreen mode - var scalerUrl = getScalerString(settings); - $img.attr('src', scalerUrl); - // TODO: update bird view? + var redisplay = function (data) { + var settings = data.settings; + if (settings.interactionMode === 'fullscreen') { + // update location.href (browser URL) in fullscreen mode + 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 @@ -417,7 +455,8 @@ 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'); @@ -426,7 +465,8 @@ $img.detach(); } else { $img = $('<img/>'); - display($img, settings); // dito + var scalerUrl = getScalerUrl(data); + $img.attr('src', scalerUrl); } } // create new html @@ -435,8 +475,8 @@ $elem.append($scaler); $scaler.append($img); $img.addClass('pic'); - data.img = $img; - $img.load(scalerImgLoadedFn(data)); + data.$img = $img; + $img.load(scalerImgLoadedHandler(data)); }; // creates HTML structure for buttons in elem @@ -550,10 +590,10 @@ }; // 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); @@ -600,7 +640,7 @@ var cropFloat = function (x) { return parseInt(10000 * x) / 10000; }; - + // hook plugin into jquery $.fn.digilib = function(method) { if (methods[method]) {