Mercurial > hg > digilib
annotate client/digitallibrary/jquery/jquery.digilib.js @ 615:ca1cdfe7b064 jquery
factored out display function
| author | hertzhaft |
|---|---|
| date | Mon, 17 Jan 2011 14:35:17 +0100 |
| parents | 6ad1880eb29f |
| children | 89f53fb8fd13 |
| rev | line source |
|---|---|
| 597 | 1 /* |
| 2 * digilib jQuery plugin | |
| 3 * | |
| 4 */ | |
| 5 | |
| 6 (function($) { | |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
7 var actions = { |
| 603 | 8 reference : { |
| 9 onclick : "javascript:getRefWin()", | |
| 10 tooltip : "get a reference URL", | |
| 11 img : "reference.png" | |
| 12 }, | |
| 13 zoomin : { | |
| 14 onclick : "javascript:dl.zoomBy(1.4)", | |
| 15 tooltip : "zoom in", | |
| 16 img : "zoom-in.png" | |
| 17 }, | |
| 18 zoomout : { | |
| 19 onclick : "javascript:zoomBy(0.7)", | |
| 20 tooltip : "zoom out", | |
| 21 img : "zoom-out.png" | |
| 22 }, | |
| 23 zoomarea : { | |
| 24 onclick : "javascript:zoomArea()", | |
| 25 tooltip : "zoom area", | |
| 26 img : "zoom-area.png" | |
| 27 }, | |
| 28 zoomfull : { | |
| 29 onclick : "javascript:zoomFullpage()", | |
| 30 tooltip : "view the whole image", | |
| 31 img : "zoom-full.png" | |
| 32 }, | |
| 33 pagewidth : { | |
| 34 onclick : "javascript:zoomFullpage('width')", | |
| 35 tooltip : "page width", | |
| 36 img : "pagewidth.png" | |
| 37 }, | |
| 38 back : { | |
| 39 onclick : "javascript:gotoPage('-1')", | |
| 40 tooltip : "goto previous image", | |
| 41 img : "back.png" | |
| 42 }, | |
| 43 fwd : { | |
| 44 onclick : "javascript:gotoPage('+1')", | |
| 45 tooltip : "goto next image", | |
| 46 img : "fwd.png" | |
| 47 }, | |
| 48 page : { | |
| 49 onclick : "javascript:gotoPageWin()", | |
| 50 tooltip : "specify image", | |
| 51 img : "page.png" | |
| 52 }, | |
| 53 bird : { | |
|
610
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
54 onclick : "toggleBirdDiv", |
| 603 | 55 tooltip : "show bird's eye view", |
| 56 img : "birds-eye.png" | |
| 57 }, | |
| 58 help : { | |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
59 onclick : ["toggleAboutDiv", 0.2], |
| 603 | 60 tooltip : "about Digilib", |
| 61 img : "help.png" | |
| 62 }, | |
| 63 reset : { | |
| 64 onclick : "javascript:resetImage()", | |
| 65 tooltip : "reset image", | |
| 66 img : "reset.png" | |
| 67 }, | |
| 68 mark : { | |
| 69 onclick : "javascript:setMark()", | |
| 70 tooltip : "set a mark", | |
| 71 img : "mark.png" | |
| 72 }, | |
| 73 delmark : { | |
| 74 onclick : "javascript:removeMark()", | |
| 75 tooltip : "delete the last mark", | |
| 76 img : "delmark.png" | |
| 77 }, | |
| 78 hmir : { | |
| 79 onclick : "javascript:mirror('h')", | |
| 80 tooltip : "mirror horizontally", | |
| 81 img : "mirror-horizontal.png" | |
| 82 }, | |
| 83 vmir : { | |
| 84 onclick : "javascript:mirror('v')", | |
| 85 tooltip : "mirror vertically", | |
| 86 img : "mirror-vertical.png" | |
| 87 }, | |
| 88 rot : { | |
| 89 onclick : "javascript:setParamWin('rot', 'Rotate (0..360) clockwise')", | |
| 90 tooltip : "rotate image", | |
| 91 img : "rotate.png" | |
| 92 }, | |
| 93 brgt : { | |
| 94 onclick : "javascript:setParamWin('brgt', 'Brightness (-255..255)')", | |
| 95 tooltip : "set brightness", | |
| 96 img : "brightness.png" | |
| 97 }, | |
| 98 cont : { | |
| 99 onclick : "javascript:setParamWin('cont', 'Contrast (0..8)')", | |
| 100 tooltip : "set contrast", | |
| 101 img : "contrast.png" | |
| 102 }, | |
| 103 rgb : { | |
| 104 onclick : "javascript:setParamWin('rgb', '...')", | |
| 105 tooltip : "set rgb values", | |
| 106 img : "rgb.png" | |
| 107 }, | |
| 108 quality : { | |
| 109 onclick : "javascript:setQualityWin('Quality (0..2)')", | |
| 110 tooltip : "set image quality", | |
| 111 img : "quality.png" | |
| 112 }, | |
| 113 size : { | |
| 114 onclick : "javascript:toggleSizeMenu()", | |
| 115 tooltip : "set page size", | |
| 116 img : "size.png" | |
| 117 }, | |
| 118 calibrationx : { | |
| 119 onclick : "javascript:calibrate('x')", | |
| 120 tooltip : "calibrate screen x-ratio", | |
| 121 img : "calibration-x.png" | |
| 122 }, | |
| 123 scale : { | |
| 124 onclick : "javascript:toggleScaleMenu()", | |
| 125 tooltip : "change image scale", | |
| 126 img : "original-size.png" | |
| 127 }, | |
| 128 options : { | |
| 129 onclick : "javascript:toggleOptionDiv()", | |
| 130 tooltip : "hide options", | |
| 131 img : "options.png" | |
| 132 }, | |
| 133 SEP : { | |
| 134 img : "sep.png" | |
| 135 } | |
| 136 }; | |
|
610
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
137 |
| 598 | 138 var defaults = { |
|
610
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
139 // the root digilib element, for easy retrieval |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
140 'digilibRoot' : null, |
| 609 | 141 // version of this script |
| 142 'version' : 'jquery.digilib.js 1.0', | |
| 143 // logo url | |
| 144 'logoUrl' : '../img/digilib-logo-text1.png', | |
| 145 // repository url | |
| 146 'reposUrl' : 'http://digilib.berlios.de', | |
| 603 | 147 // base URL to Scaler servlet |
| 148 'scalerBaseUrl' : 'http://digilib.mpiwg-berlin.mpg.de/digitallibrary/servlet/Scaler', | |
| 149 // list of Scaler parameters | |
| 602 | 150 'scalerParamNames' : ['fn','pn','dw','dh','ww','wh','wx','wy','ws','mo', |
| 151 'rot','cont','brgt','rgbm','rgba','ddpi','ddpix','ddpiy'], | |
| 603 | 152 // mode of operation. |
| 153 // fullscreen: takes parameters from page URL, keeps state in page URL | |
| 154 // embedded: takes parameters from Javascript options, keeps state inside object | |
| 155 'interactionMode' : 'fullscreen', | |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
156 // actions |
|
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
157 'actions' : actions, |
| 605 | 158 // path to button images (must end with a slash) |
| 159 'buttonsImagePath' : '../greyskin/', | |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
160 // actions groups |
|
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
161 'actionsStandard' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","bird","SEP","help","reset","options"], |
|
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
162 'actionsSpecial' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","SEP","options"], |
|
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
163 'actionsCustom' : [], |
| 609 | 164 // is birdView shown? |
| 165 'isBirdDivVisible' : false, | |
| 608 | 166 // dimensions of bird's eye window |
| 167 'birdMaxX' : 200, | |
| 609 | 168 'birdMaxY' : 200, |
| 169 // is the "about" window shown? | |
| 170 'isAboutDivVisible' : false | |
| 171 | |
| 603 | 172 }; |
| 598 | 173 |
| 601 | 174 // parameters from the query string |
| 600 | 175 var queryParams = {}; |
| 601 | 176 |
| 177 // affine geometry classes | |
| 178 var geom = dlGeometry(); | |
| 597 | 179 |
| 180 var methods = { | |
| 601 | 181 // digilib initialization |
| 597 | 182 init : function(options) { |
| 601 | 183 // settings for this digilib instance are merged from defaults and options |
| 600 | 184 var settings = $.extend({}, defaults, options); |
| 185 var isFullscreen = settings.interactionMode === 'fullscreen'; | |
| 186 if (isFullscreen) { | |
| 187 queryParams = parseQueryParams(); | |
| 188 }; | |
| 597 | 189 return this.each(function() { |
| 598 | 190 var $elem = $(this); |
| 191 var data = $elem.data('digilib'); | |
| 600 | 192 var elemSettings; |
| 601 | 193 // if the plugin hasn't been initialized yet |
| 597 | 194 if (!data) { |
| 598 | 195 // merge query parameters |
| 600 | 196 if (isFullscreen) { |
| 197 elemSettings = $.extend({}, settings, queryParams); | |
| 198 } else { | |
| 199 elemSettings = $.extend({}, settings, parseImgParams($elem)); | |
| 200 }; | |
|
610
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
201 // store $(this) element in the settings |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
202 elemSettings.digilibRoot = $elem; |
| 598 | 203 // store in data element |
| 204 $elem.data('digilib', { | |
| 205 target : $elem, | |
| 600 | 206 settings : elemSettings |
| 597 | 207 }); |
| 208 } | |
| 601 | 209 // create HTML structure |
| 210 setupScalerDiv($elem, elemSettings); | |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
211 setupButtons($elem, elemSettings, 'actionsStandard'); |
|
610
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
212 // bird's eye view creation - could be deferred? |
| 608 | 213 setupBirdviewDiv($elem, elemSettings); |
|
610
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
214 // about window creation - could be deferred? restrict to only one item? |
| 609 | 215 setupAboutDiv($elem, elemSettings); |
| 597 | 216 }); |
| 217 }, | |
| 601 | 218 |
| 219 // clean up digilib | |
| 597 | 220 destroy : function() { |
| 221 return this.each(function(){ | |
| 222 var $this = $(this); | |
| 223 var data = $this.data('digilib'); | |
| 224 // Namespacing FTW | |
| 598 | 225 $(window).unbind('.digilib'); // unbinds all digilibs(?) |
| 597 | 226 data.digilib.remove(); |
| 227 $this.removeData('digilib'); | |
| 228 }); | |
|
610
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
229 }, |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
230 |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
231 // event handler: toggles the visibility of the 'about' window |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
232 toggleAboutDiv : function () { |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
233 var $elem = $(this); // the clicked button |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
234 var settings = $elem.data('digilib').settings; |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
235 var $root = settings.digilibRoot; |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
236 var $about = $root.find('div.about'); |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
237 settings.isAboutDivVisible = !settings.isAboutDivVisible; |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
238 if (settings.isAboutDivVisible) { |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
239 $about.fadeIn(); |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
240 } else { |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
241 $about.fadeOut(); |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
242 }; |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
243 return false; |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
244 }, |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
245 |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
246 // event handler: toggles the visibility of the bird's eye window |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
247 toggleBirdDiv : function () { |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
248 // xxx: red frame functionality still to be done! |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
249 var $elem = $(this); // the clicked button |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
250 var settings = $elem.data('digilib').settings; |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
251 var $root = settings.digilibRoot; |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
252 var $bird = $root.find('div.birdview'); |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
253 settings.isBirdDivVisible = !settings.isBirdDivVisible; |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
254 if (settings.isBirdDivVisible) { |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
255 $bird.fadeIn(); |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
256 } else { |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
257 $bird.fadeOut(); |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
258 }; |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
259 return false; |
| 597 | 260 } |
| 598 | 261 }; |
| 597 | 262 |
| 601 | 263 // returns parameters from page url |
| 600 | 264 var parseQueryParams = function() { |
| 265 return parseQueryString(location.search.slice(1)); | |
| 266 }; | |
| 267 | |
| 601 | 268 // returns parameters taken from embedded img-element |
| 600 | 269 var parseImgParams = function($elem) { |
|
606
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
270 var src = $elem.find('img').first().attr('src'); |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
271 if (!src) { |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
272 return null; |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
273 } |
| 600 | 274 var pos = src.indexOf('?'); |
| 275 var query = (pos < 0) ? '' : src.substring(pos + 1); | |
| 276 var scalerUrl = src.substring(0, pos); | |
| 277 var hash = parseQueryString(query); | |
| 602 | 278 hash.scalerBaseUrl = scalerUrl; |
| 600 | 279 // console.log(hash); |
| 280 return hash; | |
| 281 }; | |
| 282 | |
| 601 | 283 // parses query parameter string into parameter object |
| 600 | 284 var parseQueryString = function(query) { |
| 285 var pairs = query.split("&"); | |
| 286 var hash = {}; | |
| 287 for (var i = 0; i < pairs.length; i++) { | |
| 288 var pair = pairs[i].split("="); | |
| 289 if (pair.length === 2) { | |
| 601 | 290 hash[pair[0]] = pair[1]; |
| 600 | 291 }; |
| 292 }; | |
| 293 return hash; | |
| 294 }; | |
| 597 | 295 |
| 608 | 296 // returns a query string from key names from a parameter hash |
| 297 var makeParamString = function (settings, keys) { | |
| 298 var paramString = ''; | |
| 299 var latter = false; | |
| 300 for (i = 0; i < keys.length; ++i) { | |
| 301 var key = keys[i]; | |
| 302 if (settings[key]) { | |
| 303 // first param gets no '&' | |
| 304 paramString += latter ? '&' : ''; | |
| 305 latter = true; | |
| 306 // add parm=val | |
| 307 paramString += key + '=' + settings[key]; | |
| 308 }; | |
| 309 } | |
| 310 return paramString; | |
| 311 }; | |
| 312 | |
| 601 | 313 // returns URL and query string for Scaler |
| 314 var getScalerString = function (settings) { | |
| 608 | 315 var keys = settings.scalerParamNames; |
| 316 var queryString = makeParamString(settings, keys); | |
| 317 var url = settings.scalerBaseUrl + '?' + queryString; | |
| 602 | 318 return url; |
| 319 }; | |
| 608 | 320 |
| 602 | 321 // returns maximum size for scaler img in fullscreen mode |
| 322 var getFullscreenImgSize = function($elem) { | |
| 323 var winH = $(window).height(); | |
| 324 var winW = $(window).width(); | |
| 325 // TODO: account for borders? | |
| 326 return geom.size(winW, winH); | |
| 601 | 327 }; |
| 328 | |
| 615 | 329 // (re)load the img from a new scaler URL |
| 330 var display = function ($img, settings) { | |
| 331 var scalerUrl = getScalerString(settings); | |
| 332 $img.attr('src', scalerUrl); | |
| 333 $img.load(scalerImgLoadedFn(settings)); | |
| 334 }; | |
| 335 | |
| 601 | 336 // creates HTML structure for digilib in elem |
| 337 var setupScalerDiv = function ($elem, settings) { | |
|
606
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
338 var rewrite; |
| 601 | 339 if (settings.interactionMode === 'fullscreen') { |
| 602 | 340 // fullscreen |
| 341 var imgSize = getFullscreenImgSize($elem); | |
| 342 settings.dw = imgSize.width; | |
| 343 settings.dh = imgSize.height; | |
|
606
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
344 $img = $('<img/>'); |
| 615 | 345 display($img, settings); |
| 602 | 346 } else { |
|
606
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
347 // embedded mode -- try to keep img tag |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
348 var $img = $elem.find('img'); |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
349 if ($img.length > 0) { |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
350 console.debug("img detach:",$img); |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
351 $img.detach(); |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
352 } else { |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
353 $img = $('<img/>'); |
| 615 | 354 display($img, settings); |
|
606
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
355 } |
| 601 | 356 } |
|
606
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
357 // create new html |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
358 $elem.empty(); // TODO: should we keep stuff for customization? |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
359 var $scaler = $('<div class="scaler"/>'); |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
360 $elem.append($scaler); |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
361 $scaler.append($img); |
| 615 | 362 $img.addClass('pic'); |
| 601 | 363 }; |
| 608 | 364 |
| 603 | 365 // creates HTML structure for buttons in elem |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
366 var setupButtons = function ($elem, settings, actionGroup) { |
| 603 | 367 if (settings.interactionMode === 'fullscreen') { |
| 368 // fullscreen -- create new | |
| 605 | 369 var $buttonsDiv = $('<div class="buttons"></div>'); |
| 370 $elem.append($buttonsDiv); | |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
371 var actionNames = settings[actionGroup]; |
|
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
372 for (var i = 0; i < actionNames.length; i++) { |
|
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
373 var actionName = actionNames[i]; |
|
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
374 var actionSettings = settings.actions[actionName]; |
| 605 | 375 // construct the button html |
| 376 var $button = $('<div class="button"></div>'); | |
| 377 var $a = $('<a/>'); | |
| 607 | 378 var $img = $('<img class="button"/>'); |
| 605 | 379 $buttonsDiv.append($button); |
| 380 $button.append($a); | |
| 381 $a.append($img); | |
| 382 // add attributes and bindings | |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
383 $button.attr('title', actionSettings.tooltip); |
|
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
384 $button.addClass('button-' + actionName); |
| 605 | 385 // let the clicked <a> element know about the digilib context |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
386 $a.data('digilib', { 'action' : actionName, 'settings' : settings } ); |
|
606
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
387 $a.bind('click', function() { |
| 612 | 388 var $elem = $(this); |
| 389 // get the context data | |
| 390 var data = $elem.data('digilib'); | |
| 605 | 391 // find the action for the clicked element |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
392 var method = data.settings.actions[data.action].onclick; |
| 612 | 393 if ($.isArray(method)) { |
| 394 $elem.digilib.apply(this, method); | |
| 395 } else { | |
| 396 $elem.digilib(method); | |
| 397 }; | |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
398 console.log(method); |
| 605 | 399 }); |
| 400 // binding mit closure | |
| 612 | 401 //(function(){ var action = actionSettings.onclick; |
| 605 | 402 // $a.bind('click', function(){ console.log( action )} ); |
| 403 //})(); | |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
404 $img.attr('src', settings.buttonsImagePath + actionSettings.img); |
| 604 | 405 }; |
| 406 } | |
| 605 | 407 return $buttonsDiv; |
| 603 | 408 }; |
| 608 | 409 |
| 410 // creates HTML structure for the bird's eye view in elem | |
| 411 var setupBirdviewDiv = function ($elem, settings) { | |
| 412 // use only the relevant parameters | |
| 413 var keys = ['fn','pn','dw','dh']; | |
| 414 var birdDimensions = { | |
| 415 'dw' : settings.birdMaxX, | |
| 416 'dh' : settings.birdMaxY | |
| 417 }; | |
| 418 var birdSettings = $.extend({}, settings, birdDimensions); | |
| 419 var birdUrl = settings.scalerBaseUrl + '?' + makeParamString(birdSettings, keys); | |
| 420 // the bird's eye div | |
| 421 var $birdviewDiv = $('<div class="birdview"/>'); | |
| 422 // the detail indicator frame | |
| 423 var $birdzoomDiv = $('<div class="birdzoom"/>'); | |
| 424 // the small image | |
| 425 var $birdImg = $('<img class="birdimg"/>'); | |
| 426 $elem.append($birdviewDiv); | |
| 427 $birdviewDiv.append($birdzoomDiv); | |
| 428 $birdviewDiv.append($birdImg); | |
| 429 $birdImg.attr('src', birdUrl); | |
| 430 }; | |
| 431 | |
| 609 | 432 // creates HTML structure for the bird's eye view in elem |
| 433 var setupAboutDiv = function ($elem, settings) { | |
| 434 var $aboutDiv = $('<div class="about"/>'); | |
| 435 var $header = $('<p>Digilib Graphic Viewer</p>'); | |
| 436 var $link = $('<a/>'); | |
| 437 var $logo = $('<img class="logo" title="digilib"/>'); | |
| 438 var $content = $('<p/>'); | |
| 439 $elem.append($aboutDiv); | |
| 440 $aboutDiv.append($header); | |
| 441 $aboutDiv.append($link); | |
| 442 $aboutDiv.append($content); | |
| 443 $link.append($logo); | |
| 444 $logo.attr('src', settings.logoUrl); | |
| 445 $link.attr('href', settings.reposUrl); | |
| 446 $content.text('Version: ' + settings.version); | |
| 612 | 447 // let the element know about the digilib context |
| 448 $aboutDiv.data('digilib', { 'settings' : settings } ); | |
| 449 $aboutDiv.bind('click', function() { | |
| 450 console.log($(this)); | |
| 451 $(this).digilib('toggleAboutDiv'); | |
| 452 }); | |
| 609 | 453 }; |
| 454 | |
|
606
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
455 // returns function for load event of scaler img |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
456 var scalerImgLoadedFn = function(settings) { |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
457 return function() { |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
458 console.debug("img loaded! settings=", settings); |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
459 }; |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
460 }; |
| 598 | 461 // hook plugin into jquery |
| 462 $.fn.digilib = function(method) { | |
| 463 if (methods[method]) { | |
| 464 return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); | |
| 465 } else if (typeof(method) === 'object' || !method) { | |
| 466 return methods.init.apply(this, arguments); | |
| 467 } else { | |
| 468 $.error( 'Method ' + method + ' does not exist on jQuery.digilib' ); | |
| 469 } | |
| 470 }; | |
| 597 | 471 |
| 472 })(jQuery); |