Mercurial > hg > digilib-old
changeset 609:435f81210a33 jquery
start work on scaler call
| author | robcast |
|---|---|
| date | Fri, 14 Jan 2011 13:38:36 +0100 |
| parents | 774a3f60efd5 |
| children | cd9f657d49fa |
| files | client/digitallibrary/jquery/jquery-test-full.html client/digitallibrary/jquery/jquery-test.html client/digitallibrary/jquery/jquery.digilib.js |
| diffstat | 3 files changed, 89 insertions(+), 63 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/digitallibrary/jquery/jquery-test-full.html Fri Jan 14 13:38:36 2011 +0100 @@ -0,0 +1,45 @@ +<?xml version="1.0" ?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Digilib jQuery Test HTML</title> + + <style type="text/css"> + body { + background: silver; + } + + div.digilib { + float: left; + padding: 10px; + } + + </style> + + <script type="text/javascript" src="jquery-1.4.4.js"></script> + <script type="text/javascript" src="dlGeometry.js"></script> + <script type="text/javascript" src="jquery.digilib.js"></script> + + + <script type="text/javascript"> + $(document).ready(function(){ + var opts = {interactionMode : 'fullscreen', + scalerBaseUrl : 'http://digilinx:18080/digitallibrary/servlet/Scaler'}; + $('div.digilib').digilib(opts); + + $('div.digilib').each(function(){ + console.log($(this).data('digilib').settings); + }); + }); + + </script> + </head> + + <body> + + <div id="digilib-1" class="digilib single"> + <img src="http://digilinx:18080/digitallibrary/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/FransHals-WillemVanHeythuysen" /> + </div> + </body> +</html> +
--- a/client/digitallibrary/jquery/jquery-test.html Fri Jan 14 11:23:56 2011 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,54 +0,0 @@ -<?xml version="1.0" ?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<html xmlns="http://www.w3.org/1999/xhtml"> - <head> - <title>Digilib jQuery Test HTML</title> - - <style type="text/css"> - body { - background: silver; - } - - div.digilib { - float: left; - padding: 10px; - } - - </style> - - <script type="text/javascript" src="jquery-1.4.4.js"></script> - <script type="text/javascript" src="jquery.digilib.js"></script> - - - <script type="text/javascript"> - $(document).ready(function(){ - // $('div.digilib').children('img').attr('src', ''); - // $('div.digilib').children('img').remove(); - $('div.digilib').digilib({interactionMode : 'embedded'}); - - $('div.digilib').each(function(){ - console.log($(this).data('digilib').settings); - }); - - }); - - </script> - </head> - - <body> - - <div id="digilib-1" class="digilib single"> - <img src="http://digilinx:18080/digitallibrary/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/FransHals-WillemVanHeythuysen" /> - </div> - <div id="digilib-2" class="digilib"> - <img src="http://digilinx:18080/digitallibrary/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/ferrara" /> - </div> - <div id="digilib-3" class="digilib"> - <img src="http://digilinx:18080/digitallibrary/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/weide" /> - </div> - <div id="digilib-4" class="digilib"> - <img src="http://digilinx:18080/digitallibrary/servlet/Scaler?dw=200&dh=200&fn=/digisprint/jquery/HansHolbein-NikolausKratzer" /> - </div> - </body> -</html> -
--- a/client/digitallibrary/jquery/jquery.digilib.js Fri Jan 14 11:23:56 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.js Fri Jan 14 13:38:36 2011 +0100 @@ -9,9 +9,8 @@ // base URL to Scaler servlet 'scalerBaseUrl' : 'http://digilib.mpiwg-berlin.mpg.de/digitallibrary/servlet/Scaler', // list of Scaler parameters - 'scalerParamNames' : ['fn','pn','dw','dh','ww','wh','wx','wy','ws','mo'], - // digilib image path - 'fn' : '', + 'scalerParamNames' : ['fn','pn','dw','dh','ww','wh','wx','wy','ws','mo', + 'rot','cont','brgt','rgbm','rgba','ddpi','ddpix','ddpiy'], // mode of operation. // fullscreen: takes parameters from page URL, keeps state in page URL // embedded: takes parameters from Javascript options, keeps state inside object @@ -81,7 +80,7 @@ var query = (pos < 0) ? '' : src.substring(pos + 1); var scalerUrl = src.substring(0, pos); var hash = parseQueryString(query); - hash.scalerUrl = scalerUrl; + hash.scalerBaseUrl = scalerUrl; // console.log(hash); return hash; }; @@ -101,18 +100,54 @@ // returns URL and query string for Scaler var getScalerString = function (settings) { - var url = settings.scalerUrl; - + var url = settings.scalerBaseUrl + '?'; + var i, parm, latter; + // go through param names and get values from settings + for (i = 0; i < settings.scalerParamNames.length; ++i) { + parm = settings.scalerParamNames[i]; + if (settings[parm]) { + // first parm gets no '&' + url += latter ? '&' : ''; + latter = 1; + // add parm=val + url += parm + '=' + settings[parm]; + } + } + 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); }; // creates HTML structure for digilib in elem var setupScalerDiv = function ($elem, settings) { if (settings.interactionMode === 'fullscreen') { - // fullscreen -- create new + // fullscreen + var imgSize = getFullscreenImgSize($elem); + settings.dw = imgSize.width; + settings.dh = imgSize.height; + // create new html $elem.empty(); // TODO: should we keep stuff for customization? + var scalerUrl = getScalerString(settings); var scalerHTML = '<div class="scaler"><img class="pic"/></div>'; - $elem.add(scalerHTML); - + $elem.append(scalerHTML); + var $img = $elem.find("img.pic"); + $img.attr('src', scalerUrl); + //$img.load(scalerImgLoaded); + } else { + // embedded mode -- keep inner img + var $img = $elem.detach('img'); + $elem.empty(); // TODO: should we keep stuff for customization? + $img.addClass('pic'); + var $scaler = $('<div class="scaler"/>'); + $scaler.append($img); + $elem.append($scaler); + //$img.load(scalerImgLoaded); } };