Mercurial > hg > digilib-old
annotate webapp/src/main/webapp/jquery/jquery.digilib.buttons.js @ 1020:0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
| author | hertzhaft |
|---|---|
| date | Tue, 21 Feb 2012 00:08:04 +0100 |
| parents | 287e2d2d2ae8 |
| children | 9aa282ceec8a |
| rev | line source |
|---|---|
| 946 | 1 /** |
| 2 digilib buttons plugin | |
| 3 */ | |
| 4 | |
| 5 (function($) { | |
| 6 | |
| 7 // plugin object with digilib data | |
| 996 | 8 var digilib = null; |
| 968 | 9 // the functions made available by digilib |
| 996 | 10 var fn = null; |
| 968 | 11 // affine geometry plugin |
| 996 | 12 var geom = null; |
| 946 | 13 |
| 14 var buttons = { | |
| 998 | 15 reference : { |
| 16 onclick : "reference", | |
| 17 tooltip : "get a reference URL", | |
| 18 icon : "reference.png" | |
| 19 }, | |
| 20 zoomin : { | |
| 21 onclick : ["zoomBy", 1.4], | |
| 22 tooltip : "zoom in", | |
| 23 icon : "zoom-in.png" | |
| 24 }, | |
| 25 zoomout : { | |
| 26 onclick : ["zoomBy", 0.7], | |
| 27 tooltip : "zoom out", | |
| 28 icon : "zoom-out.png" | |
| 29 }, | |
| 30 zoomarea : { | |
| 31 onclick : "zoomArea", | |
| 32 tooltip : "zoom area", | |
| 33 icon : "zoom-area.png" | |
| 34 }, | |
| 35 zoomfull : { | |
| 36 onclick : "zoomFull", | |
| 37 tooltip : "view the whole image", | |
| 38 icon : "zoom-full.png" | |
| 39 }, | |
| 40 pagewidth : { | |
| 41 onclick : ["zoomFull", "width"], | |
| 42 tooltip : "page width", | |
| 43 icon : "pagewidth.png" | |
| 44 }, | |
| 45 back : { | |
| 46 onclick : ["gotoPage", "-1"], | |
| 47 tooltip : "goto previous image", | |
| 48 icon : "back.png" | |
| 49 }, | |
| 50 fwd : { | |
| 51 onclick : ["gotoPage", "+1"], | |
| 52 tooltip : "goto next image", | |
| 53 icon : "fwd.png" | |
| 54 }, | |
| 55 page : { | |
| 56 onclick : "gotoPage", | |
| 57 tooltip : "goto image number", | |
| 58 icon : "page.png" | |
| 59 }, | |
| 60 help : { | |
| 61 onclick : "showAboutDiv", | |
| 62 tooltip : "about Digilib", | |
| 63 icon : "help.png" | |
| 64 }, | |
| 65 reset : { | |
| 66 onclick : "reset", | |
| 67 tooltip : "reset image", | |
| 68 icon : "reset.png" | |
| 69 }, | |
| 70 hmir : { | |
| 71 onclick : ["mirror", "h"], | |
| 72 tooltip : "mirror horizontally", | |
| 73 icon : "mirror-horizontal.png" | |
| 74 }, | |
| 75 vmir : { | |
| 76 onclick : ["mirror", "v"], | |
| 77 tooltip : "mirror vertically", | |
| 78 icon : "mirror-vertical.png" | |
| 79 }, | |
| 80 rot : { | |
|
1020
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
81 onclick : "sliderRotate", |
| 998 | 82 tooltip : "rotate image", |
| 83 icon : "rotate.png" | |
| 84 }, | |
| 85 brgt : { | |
|
1020
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
86 onclick : "sliderBrightness", |
| 998 | 87 tooltip : "set brightness", |
| 88 icon : "brightness.png" | |
| 89 }, | |
| 90 cont : { | |
|
1020
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
91 onclick : "sliderContrast", |
| 998 | 92 tooltip : "set contrast", |
| 93 icon : "contrast.png" | |
| 94 }, | |
| 95 rgb : { | |
|
1019
287e2d2d2ae8
fix flicker in Firefox by leaving scaler background visible.
robcast
parents:
1018
diff
changeset
|
96 onclick : "setRGB", |
|
1020
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
97 // onclick : sliderRGB, |
| 998 | 98 tooltip : "set rgb values", |
| 99 icon : "rgb.png" | |
| 100 }, | |
| 101 quality : { | |
| 102 onclick : "setQuality", | |
| 103 tooltip : "set image quality", | |
| 104 icon : "quality.png" | |
| 105 }, | |
| 106 size : { | |
|
1019
287e2d2d2ae8
fix flicker in Firefox by leaving scaler background visible.
robcast
parents:
1018
diff
changeset
|
107 onclick : "setSize", |
| 998 | 108 tooltip : "set page size", |
| 109 icon : "size.png" | |
| 110 }, | |
| 111 calibrationx : { | |
| 112 onclick : "showCalibrationDiv", | |
| 113 tooltip : "calibrate screen resolution", | |
| 114 icon : "calibration-x.png" | |
| 115 }, | |
| 116 scale : { | |
| 117 onclick : "showScaleModeSelector", | |
| 118 tooltip : "change image scale", | |
| 119 icon : "original-size.png" | |
| 120 }, | |
| 121 toggleoptions : { | |
| 122 onclick : "moreButtons", | |
| 123 tooltip : "more options", | |
| 124 icon : "options.png" | |
| 125 }, | |
| 126 moreoptions : { | |
| 127 onclick : ["moreButtons", "+1"], | |
| 128 tooltip : "more options", | |
| 129 icon : "options.png" | |
| 130 }, | |
| 131 lessoptions : { | |
| 132 onclick : ["moreButtons", "-1"], | |
| 133 tooltip : "less options", | |
| 134 icon : "options.png" | |
| 135 }, | |
| 136 SEP : { | |
| 137 icon : "sep.png" | |
| 138 } | |
| 139 }; | |
| 140 | |
| 141 var sliders = { | |
| 142 rot : { | |
| 143 label : "Rotation angle", | |
| 144 tooltip : "rotate image", | |
| 145 icon : "rotate.png", | |
| 146 'min' : 0, | |
| 147 'max' : 360, | |
| 1004 | 148 'start' : 90 |
| 998 | 149 }, |
| 150 brgt : { | |
| 1004 | 151 label : "Brightness", |
| 152 tooltip : "set numeric value to be added", | |
| 998 | 153 icon : "brightness.png", |
| 154 'min' : -255, | |
| 155 'max' : 255, | |
| 1004 | 156 'start' : 0 |
| 998 | 157 }, |
| 158 cont : { | |
| 1004 | 159 label : "Contrast", |
| 160 tooltip : "set numeric value to be multiplied", | |
| 998 | 161 icon : "contrast.png", |
|
1020
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
162 'min' : -4, |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
163 'max' : 4, |
| 1004 | 164 'start' : 0 |
| 998 | 165 }, |
| 166 red : { | |
| 167 label : "Red value", | |
| 168 tooltip : "set red value", | |
| 169 icon : "rgb.png", | |
| 170 'min' : 0, | |
| 171 'max' : 255, | |
| 1004 | 172 'start' : 127 |
| 998 | 173 }, |
| 174 | |
| 175 green : { | |
| 176 label : "Green value", | |
| 177 tooltip : "set green value", | |
| 178 icon : "rgb.png", | |
| 179 'min' : 0, | |
| 180 'max' : 255, | |
| 1004 | 181 'start' : 127 |
| 998 | 182 }, |
| 183 | |
| 184 blue : { | |
| 185 label : "Blue value", | |
| 186 tooltip : "set blue value", | |
| 187 icon : "rgb.png", | |
| 188 'min' : 0, | |
| 189 'max' : 255, | |
| 1004 | 190 'start' : 127 |
| 191 }, | |
| 998 | 192 }; |
| 946 | 193 |
| 968 | 194 var modes = [ |
| 998 | 195 { name : "screen", |
| 196 label : "fit to screen", | |
| 197 tooltip : "scales the graphic file so that it fills the screen" | |
| 198 }, | |
| 199 { name : "pixel", | |
| 200 label : "pixel by pixel", | |
| 201 tooltip : "all pixels of the current part of the graphic file are shown" | |
| 202 }, | |
| 203 { name : "size", | |
| 204 label : "original size", | |
| 205 tooltip : "tries to display the current part of the graphic file in the size of the orginal resource (after screen calibration)" | |
| 206 } | |
| 207 ]; | |
| 968 | 208 |
| 946 | 209 var defaults = { |
| 985 | 210 // buttons (reference added later) |
| 211 'buttons' : null, | |
| 212 // defaults for digilib buttons | |
| 213 'buttonSettings' : { | |
| 214 'fullscreen' : { | |
| 215 // path to button images (must end with a slash) | |
| 216 'imagePath' : 'img/fullscreen/', | |
| 217 'buttonSetWidth' : 36, | |
| 218 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","help","reset","toggleoptions"], | |
| 219 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","lessoptions"], | |
| 220 'buttonSets' : ['standardSet', 'specialSet'] | |
| 221 }, | |
| 222 'embedded' : { | |
| 223 'imagePath' : 'img/embedded/16/', | |
| 224 'buttonSetWidth' : 18, | |
| 225 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","help","reset","toggleoptions"], | |
| 226 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","scale","lessoptions"], | |
| 227 'buttonSets' : ['standardSet', 'specialSet'] | |
| 228 } | |
| 229 }, | |
| 230 // number of visible button groups | |
| 231 'visibleButtonSets' : 1 | |
| 946 | 232 }; |
| 233 | |
| 234 var actions = { | |
| 235 // display more (or less) button sets | |
| 236 moreButtons : function (data, more) { | |
| 237 var settings = data.settings; | |
| 238 if (more == null) { | |
| 239 // toggle more or less (only works for 2 sets) | |
| 240 var maxbtns = settings.buttonSettings[settings.interactionMode].buttonSets.length; | |
| 241 if (settings.visibleButtonSets >= maxbtns) { | |
| 242 more = '-1'; | |
| 243 } else { | |
| 244 more = '+1'; | |
| 245 } | |
| 246 } | |
| 247 if (more === '-1') { | |
| 248 // remove set | |
| 249 var setIdx = settings.visibleButtonSets - 1; | |
| 250 if (showButtons(data, false, setIdx, true)) { | |
| 251 settings.visibleButtonSets--; | |
| 252 } | |
| 253 } else { | |
| 254 // add set | |
| 255 var setIdx = settings.visibleButtonSets; | |
| 256 if (showButtons(data, true, setIdx, true)) { | |
| 257 settings.visibleButtonSets++; | |
| 258 } | |
| 259 } | |
|
989
f4757bf6ab65
new arrows plugin for scroll arrows next to the image.
robcast
parents:
988
diff
changeset
|
260 // adjust insets |
|
f4757bf6ab65
new arrows plugin for scroll arrows next to the image.
robcast
parents:
988
diff
changeset
|
261 data.currentInsets['buttons'] = getInsets(data); |
| 946 | 262 // persist setting |
| 968 | 263 fn.storeOptions(data); |
| 264 }, | |
|
1020
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
265 |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
266 // slider to set a rotation angle |
| 1018 | 267 sliderRotate : function (data) { |
| 985 | 268 var $elem = data.$elem; |
| 1018 | 269 var $panel = fn.setupPanel(data); |
| 270 if ($panel == null) { | |
| 1004 | 271 return; |
| 1018 | 272 }; |
|
1020
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
273 var opts = { 'start' : parseFloat(data.settings.rot) }; |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
274 var $slider = fn.setupSlider(data, 'rot', opts); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
275 var ok = function(d) { |
| 1018 | 276 var angle = $slider.slider('getval'); |
| 277 digilib.actions.rotate(d, angle); | |
| 278 }; | |
|
1020
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
279 $panel.data['ok'] = ok; |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
280 $panel.fadeIn(); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
281 $panel.prepend($slider); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
282 centerOnScreen(data, $panel); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
283 $slider.slider('show'); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
284 }, |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
285 |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
286 // slider to set a brightness value |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
287 sliderBrightness : function (data) { |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
288 var $elem = data.$elem; |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
289 var $panel = fn.setupPanel(data); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
290 if ($panel == null) { |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
291 return; |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
292 }; |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
293 var opts = { 'start' : parseFloat(data.settings.brgt) }; |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
294 var $slider = fn.setupSlider(data, 'brgt', opts); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
295 var ok = function(d) { |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
296 var brgt = $slider.slider('getval'); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
297 digilib.actions.brightness(d, brgt); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
298 }; |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
299 $panel.data['ok'] = ok; |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
300 $panel.fadeIn(); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
301 $panel.prepend($slider); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
302 centerOnScreen(data, $panel); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
303 $slider.slider('show'); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
304 }, |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
305 |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
306 // slider to set a contrast value |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
307 sliderContrast : function (data) { |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
308 var $elem = data.$elem; |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
309 var $panel = fn.setupPanel(data); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
310 if ($panel == null) { |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
311 return; |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
312 }; |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
313 var opts = { 'start' : parseFloat(data.settings.cont) }; |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
314 var $slider = fn.setupSlider(data, 'cont', opts); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
315 var ok = function(d) { |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
316 var cont = $slider.slider('getval'); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
317 digilib.actions.contrast(d, cont, true); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
318 }; |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
319 $panel.data['ok'] = ok; |
| 1018 | 320 $panel.fadeIn(); |
| 321 $panel.prepend($slider); | |
| 322 centerOnScreen(data, $panel); | |
| 323 $slider.slider('show'); | |
| 985 | 324 }, |
| 1018 | 325 |
| 974 | 326 // shows Calibration Div |
| 327 showCalibrationDiv : function (data) { | |
| 328 var $elem = data.$elem; | |
| 996 | 329 var cssPrefix = data.settings.cssPrefix; |
| 330 var $calDiv = $elem.find('.'+cssPrefix+'calibration'); | |
| 331 var $input = $elem.find('.'+cssPrefix+'calibration-input'); | |
| 974 | 332 $calDiv.fadeIn(); |
| 978 | 333 $input.focus(); |
| 974 | 334 }, |
| 335 | |
| 968 | 336 // shows ScaleModeSelector |
| 337 showScaleModeSelector : function (data) { | |
| 338 var $elem = data.$elem; | |
| 996 | 339 var cssPrefix = data.settings.cssPrefix; |
| 340 var $div = $elem.find('div#'+cssPrefix+'scalemode'); | |
| 341 if ($div.is(':visible')) { | |
| 968 | 342 $div.fadeOut(); |
| 343 return; | |
| 344 } | |
| 975 | 345 // select current mode |
| 346 var mode = data.scaleMode; | |
| 347 $div.find('option').each(function () { | |
| 996 | 348 $(this).prop('selected', $(this).attr('name') == mode); |
| 975 | 349 }); |
| 996 | 350 var $button = $elem.find('div.'+cssPrefix+'button-scale'); |
| 968 | 351 var buttonRect = geom.rectangle($button); |
| 977 | 352 $('body').on("click.scalemode", function(event) { |
| 968 | 353 $div.fadeOut(); |
| 354 }); | |
| 355 $div.fadeIn(); | |
| 996 | 356 var divRect = geom.rectangle($div); |
| 968 | 357 $div.offset({ |
| 358 left : Math.abs(buttonRect.x - divRect.width - 4), | |
| 359 top : buttonRect.y + 4 | |
| 360 }); | |
| 965 | 361 } |
| 968 | 362 }; |
| 946 | 363 |
| 364 // plugin installation called by digilib on plugin object. | |
| 365 var install = function(plugin) { | |
| 366 digilib = plugin; | |
| 367 console.debug('installing buttons plugin. digilib:', digilib); | |
| 968 | 368 fn = digilib.fn; |
| 369 // import geometry classes | |
| 370 geom = fn.geometry; | |
| 946 | 371 // add defaults, actions, buttons |
|
989
f4757bf6ab65
new arrows plugin for scroll arrows next to the image.
robcast
parents:
988
diff
changeset
|
372 $.extend(digilib.buttons, buttons); |
|
f4757bf6ab65
new arrows plugin for scroll arrows next to the image.
robcast
parents:
988
diff
changeset
|
373 $.extend(true, digilib.defaults, defaults); // make deep copy |
| 946 | 374 $.extend(digilib.actions, actions); |
| 947 | 375 // update buttons reference in defaults |
| 376 digilib.defaults.buttons = digilib.buttons; | |
| 946 | 377 // export functions |
| 968 | 378 fn.createButton = createButton; |
| 379 fn.highlightButtons = highlightButtons; | |
| 1018 | 380 fn.setupSlider = setupSlider; |
| 381 fn.setupPanel = setupPanel; | |
| 946 | 382 }; |
| 383 | |
| 384 // plugin initialization | |
| 385 var init = function (data) { | |
| 386 console.debug('initialising buttons plugin. data:', data); | |
| 996 | 387 // add insets |
|
989
f4757bf6ab65
new arrows plugin for scroll arrows next to the image.
robcast
parents:
988
diff
changeset
|
388 data.currentInsets['buttons'] = getInsets(data); |
| 946 | 389 // install event handler |
| 390 var $data = $(data); | |
| 391 $data.bind('setup', handleSetup); | |
| 985 | 392 sliderPlugin(jQuery, data); |
| 946 | 393 }; |
| 394 | |
| 395 var handleSetup = function (evt) { | |
| 968 | 396 console.debug("buttons: handleSetup"); |
| 946 | 397 var data = this; |
|
989
f4757bf6ab65
new arrows plugin for scroll arrows next to the image.
robcast
parents:
988
diff
changeset
|
398 var settings = data.settings; |
| 946 | 399 // create buttons before scaler |
|
989
f4757bf6ab65
new arrows plugin for scroll arrows next to the image.
robcast
parents:
988
diff
changeset
|
400 for (var i = 0; i < settings.visibleButtonSets; ++i) { |
| 946 | 401 showButtons(data, true, i); |
| 402 } | |
| 968 | 403 // create ScaleMode selector; |
| 404 setupScaleModeDiv(data); | |
| 974 | 405 // create Calibration div; |
| 406 setupCalibrationDiv(data); | |
| 407 }; | |
| 408 | |
|
989
f4757bf6ab65
new arrows plugin for scroll arrows next to the image.
robcast
parents:
988
diff
changeset
|
409 /** |
|
f4757bf6ab65
new arrows plugin for scroll arrows next to the image.
robcast
parents:
988
diff
changeset
|
410 * returns insets for buttons (based on visibleButtonSets and buttonSetWidth |
|
f4757bf6ab65
new arrows plugin for scroll arrows next to the image.
robcast
parents:
988
diff
changeset
|
411 */ |
|
f4757bf6ab65
new arrows plugin for scroll arrows next to the image.
robcast
parents:
988
diff
changeset
|
412 var getInsets = function (data) { |
|
f4757bf6ab65
new arrows plugin for scroll arrows next to the image.
robcast
parents:
988
diff
changeset
|
413 var settings = data.settings; |
|
f4757bf6ab65
new arrows plugin for scroll arrows next to the image.
robcast
parents:
988
diff
changeset
|
414 var bw = settings.visibleButtonSets * settings.buttonSettings[settings.interactionMode].buttonSetWidth; |
|
f4757bf6ab65
new arrows plugin for scroll arrows next to the image.
robcast
parents:
988
diff
changeset
|
415 var insets = {'x' : bw, 'y' : 0}; |
|
f4757bf6ab65
new arrows plugin for scroll arrows next to the image.
robcast
parents:
988
diff
changeset
|
416 return insets; |
|
f4757bf6ab65
new arrows plugin for scroll arrows next to the image.
robcast
parents:
988
diff
changeset
|
417 }; |
| 998 | 418 |
| 985 | 419 var centerOnScreen = function (data, $div) { |
| 420 var r = geom.rectangle($div); | |
| 421 var s = fn.getFullscreenRect(data); | |
| 422 r.setCenter(s.getCenter()); | |
| 423 r.adjustDiv($div); | |
| 424 }; | |
| 425 | |
| 426 // slider | |
| 427 var sliderPlugin = function($, digilibdata) { | |
| 998 | 428 var cssPrefix = digilibdata.settings.cssPrefix; |
| 985 | 429 var defaults = { |
| 1002 | 430 'cssclass' : cssPrefix+'slider', |
| 998 | 431 'label' : 'Slider', |
| 985 | 432 'direction' : 'x', |
| 998 | 433 'handlesize' : 16, |
| 985 | 434 'min' : 0, |
| 435 'max' : 100, | |
| 1004 | 436 'start' : 33, |
| 437 'numberoffset' : -24, | |
| 438 'labeloffset' : 16, | |
| 1018 | 439 'rect' : null, |
| 440 'factor' : null, | |
| 441 'onmove' : null // callback function | |
| 985 | 442 }; |
| 443 var methods = { | |
| 988 | 444 init : function( options ) { |
| 445 // make a slider from each element | |
| 985 | 446 return this.each(function() { |
| 447 var $this = $(this); | |
| 448 // var settings = data.settings; | |
| 449 var settings = $.extend( defaults, options); | |
| 1018 | 450 console.debug('new slider: ', $this, ' settings:', settings); |
| 985 | 451 $this.data('digilib', digilibdata); |
| 452 var data = $this.data('settings'); | |
| 453 if (!data) { | |
| 454 $this.data('settings', settings); | |
| 1002 | 455 $this.addClass(settings.cssclass); |
| 1004 | 456 var $handle = $('<div class="'+settings.cssclass+'handle" />'); |
| 457 var $label = $('<div class="'+settings.cssclass+'label">' | |
| 458 +settings.label+': '+settings.start+'</div>'); | |
| 459 var $min = $('<div class="'+settings.cssclass+'number">'+settings.min+'</div>'); | |
| 460 var $max = $('<div class="'+settings.cssclass+'number">'+settings.max+'</div>'); | |
| 461 $this.append($handle); | |
| 462 $this.append($label); | |
| 463 $this.append($min); | |
| 464 $this.append($max); | |
| 465 $.extend(settings, { | |
| 466 '$handle' : $handle, | |
| 467 '$label' : $label, | |
| 468 '$min' : $min, | |
| 1018 | 469 '$max' : $max, |
| 470 'diff' : settings.max - settings.min, | |
| 471 'vertical' : settings.direction == 'y', | |
| 472 'val' : settings.start, | |
| 473 'handlerect' : geom.rectangle(0, 0, settings.handlesize, settings.handlesize) | |
| 1004 | 474 }); |
| 985 | 475 } |
| 1004 | 476 }); |
| 985 | 477 }, |
| 478 getval : function(data) { | |
| 1018 | 479 // returns the slider value |
| 480 var $this = this; | |
| 481 var settings = $this.data('settings'); | |
| 482 return settings.val; | |
| 483 }, | |
| 484 setval : function(data, val) { | |
| 485 // sets the slider value and moves the handle acordingly | |
| 486 var $this = this; | |
| 487 var settings = $this.data('settings'); | |
| 488 if (val != null) settings.val = val; | |
| 489 var ratio = (settings.val - settings.min) / settings.diff; | |
| 490 var r = settings.rect; | |
| 491 var newpos = settings.vertical | |
| 492 ? geom.position(r.x + r.width / 2, r.y + ratio * r.height) | |
| 493 : geom.position(r.x + ratio * r.width, r.y + r.height / 2); | |
| 494 $this.slider('moveto', newpos); | |
| 495 }, | |
| 496 moveto : function(data, pos, calc) { | |
| 497 // move the handle in response to a mouse position | |
| 988 | 498 var $this = this; |
| 985 | 499 var settings = $this.data('settings'); |
| 1018 | 500 var r = settings.rect; |
| 501 var h = settings.handlerect; | |
| 502 var handlepos = r.getCenter(); | |
| 503 if (settings.vertical) { | |
| 504 handlepos.y = Math.min(Math.max(r.y, pos.y), r.y + r.height) | |
| 505 } else { | |
| 506 handlepos.x = Math.min(Math.max(r.x, pos.x), r.x + r.width) | |
| 507 } | |
| 508 h.setCenter(handlepos); | |
| 509 h.adjustDiv(settings.$handle); | |
| 510 if (calc) { | |
| 511 // calculate new slider value | |
| 512 var temp = settings.vertical | |
| 513 ? (handlepos.y - r.y) | |
| 514 : (handlepos.x - r.x); | |
| 515 settings.val = fn.cropFloat(temp * settings.factor + settings.min); | |
| 516 } | |
| 517 if (settings.onmove) { | |
| 518 settings.onmove($this); | |
| 519 } | |
| 985 | 520 }, |
| 521 show : function(data) { | |
| 988 | 522 var $this = this; |
| 1004 | 523 $this.fadeIn(); |
| 988 | 524 var settings = $this.data('settings'); |
| 1004 | 525 // the jquery elements we need |
| 988 | 526 var $body = $('body'); |
| 1004 | 527 // some variables for easier calculation |
| 528 var label = settings.label + ': '; | |
| 1018 | 529 // calculate positions for the slider elements |
| 988 | 530 var r = geom.rectangle($this); |
| 1018 | 531 settings.rect = r; |
| 532 var v = settings.vertical; | |
| 533 settings.factor = v | |
| 534 ? settings.diff / r.height | |
| 535 : settings.diff / r.width; | |
| 1004 | 536 var labelpos = geom.position(r.x, r.y + settings.labeloffset); |
| 1018 | 537 var minpos = v |
| 1004 | 538 ? geom.position(r.x + settings.numberoffset, r.y) |
| 539 : geom.position(r.x, r.y + settings.numberoffset); | |
| 1018 | 540 var maxpos = v |
| 1004 | 541 ? geom.position(r.x + settings.numberoffset, r.y + r.width) |
| 542 : geom.position(r.x + r.width - settings.$max.width(), r.y + settings.numberoffset); | |
| 1018 | 543 // adjust elements |
| 544 labelpos.adjustDiv(settings.$label); | |
| 545 minpos.adjustDiv(settings.$min); | |
| 1004 | 546 maxpos.adjustDiv(settings.$max); |
| 1018 | 547 // set the handle |
| 548 $this.slider('setval'); | |
| 985 | 549 |
| 550 // mousedown handler: start sliding | |
| 551 var sliderStart = function (event) { | |
| 552 $body.on("mousemove.slider", sliderMove); | |
| 553 $body.on("mouseup.slider", sliderEnd); | |
| 554 return false; | |
| 555 }; | |
| 556 | |
| 557 // mousemove handler: move slider | |
| 558 var sliderMove = function (event) { | |
| 1004 | 559 var pos = geom.position(event); |
| 1018 | 560 $this.slider('moveto', pos, true); |
| 561 settings.$label.text(label + settings.val); | |
| 985 | 562 return false; |
| 563 }; | |
| 988 | 564 |
| 985 | 565 // mouseup handler: end sliding |
| 566 var sliderEnd = function (event) { | |
| 567 $body.off("mousemove.slider"); | |
| 568 $body.off("mouseup.slider"); | |
| 569 return false; | |
| 570 }; | |
| 571 | |
| 1004 | 572 // bind mousedown handler to sliderhandle |
| 1018 | 573 settings.$handle.on('mousedown.slider', sliderStart); |
| 574 console.debug('show slider: ', $this, ' settings:', settings); | |
| 985 | 575 }, |
| 988 | 576 destroy : function( ) { |
| 577 var $this = this; | |
| 578 var settings = $this.data('settings'); | |
| 1004 | 579 var $handle = settings.$handle; |
| 580 $handle.off('mousedown.slider'); | |
| 988 | 581 $this.fadeOut(function(){ |
| 582 $this.remove() | |
| 583 }); | |
| 985 | 584 } |
| 585 }; | |
| 1004 | 586 |
| 988 | 587 // TODO: |
| 588 // - take start value from a given param | |
| 589 // - set the param after sliding | |
| 590 // - show min/max/current values on slider | |
| 985 | 591 $.fn.slider = function( method ) { |
| 592 if ( methods[method] ) { | |
| 593 // call a method | |
| 594 var $elem = $(this); | |
| 595 var data = $elem.data('digilib'); | |
| 596 var args = Array.prototype.slice.call(arguments, 1); | |
| 597 args.unshift(data); | |
| 598 return methods[method].apply(this, args); | |
| 599 } | |
| 600 else if ( !method || typeof method === 'object' ) { | |
| 601 // call init(), with an optional object containing options | |
| 602 return methods.init.apply( this, arguments ); | |
| 603 } | |
| 604 else { | |
| 999 | 605 $.error( 'Method ' + method + ' does not exist on digilib.buttons.slider!' ); |
| 985 | 606 } |
| 607 }; | |
| 608 }; | |
| 609 | |
| 1018 | 610 /** creates the HTML structure for a panel div |
| 611 */ | |
|
1020
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
612 var setupPanel = function (data) { |
| 1018 | 613 var $elem = data.$elem; |
| 614 var panelClass = data.settings.cssPrefix + 'panel'; | |
| 615 var $panel = $elem.find('.' + panelClass); | |
|
1020
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
616 // remove panel if it exists already |
| 1018 | 617 if ($panel.length > 0) { |
| 618 $panel.fadeOut(function() { | |
| 619 $panel.remove(); | |
| 620 }); | |
| 621 return null; | |
| 622 } | |
|
1020
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
623 $panel = $('<div/>'); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
624 $panel.addClass(panelClass); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
625 var $okcancel = setupOkCancel(data); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
626 $panel.append($okcancel); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
627 $elem.append($panel); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
628 return $panel; |
| 1018 | 629 }; |
| 630 | |
| 631 /** creates the HTML structure for a slider div | |
| 632 */ | |
|
1020
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
633 var setupSlider = function (data, paramname, opts) { |
| 1018 | 634 var id = paramname + "-slider"; |
| 635 var $div = $('#' + id); | |
| 636 if ($div.length == 0) { | |
| 637 // slider not yet created | |
| 638 $div = $('<div/>'); | |
| 639 var options = sliders[paramname]; | |
|
1020
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
640 if (opts != null) { |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
641 $.extend(options, opts); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
642 } |
| 1018 | 643 $div.attr('id', paramname + "-slider"); |
| 644 $div.slider(options); | |
| 645 } | |
| 646 return $div; | |
| 647 }; | |
| 648 | |
| 649 /** creates the HTML structure for a ok and cancel div | |
| 650 */ | |
| 651 var setupOkCancel = function (data) { | |
| 652 var settings = data.settings; | |
| 653 var cssPrefix = settings.cssPrefix; | |
| 654 var html = '\ | |
| 655 <div>\ | |
| 656 <button class="'+cssPrefix+'button" id="'+cssPrefix+'Ok">OK</button>\ | |
| 657 <button class="'+cssPrefix+'button" id="'+cssPrefix+'Cancel">Cancel</button>\ | |
| 658 </div>'; | |
| 659 var $div = $(html); | |
| 660 var handler = function(event) { | |
| 661 var $panel = $(this).parents('.'+cssPrefix+'panel'); | |
| 662 if (event.keyCode == 27 || event.target.id == cssPrefix+'Cancel') { | |
|
1020
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
663 var callback = $panel.data['cancel']; |
| 1018 | 664 if (callback) { |
| 665 callback(data); | |
| 666 } | |
|
1020
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
667 } |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
668 if (event.keyCode == 13 || event.target.id == cssPrefix+'Ok') { |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
669 var callback = $panel.data['ok']; |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
670 if (callback) { |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
671 callback(data); |
|
0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
hertzhaft
parents:
1019
diff
changeset
|
672 } |
| 1018 | 673 } |
| 674 $panel.fadeOut(function() { | |
| 675 $panel.remove(); | |
| 676 }); | |
| 677 return false; | |
| 678 }; | |
| 679 $div.children().on('click', handler); | |
| 680 return $div; | |
| 681 }; | |
| 682 | |
| 683 | |
| 974 | 684 /** creates HTML structure for the calibration div |
| 685 */ | |
| 686 var setupCalibrationDiv = function (data) { | |
| 687 var $elem = data.$elem; | |
| 688 var settings = data.settings; | |
| 996 | 689 var cssPrefix = settings.cssPrefix; |
| 974 | 690 var html = '\ |
| 996 | 691 <div id="'+cssPrefix+'calibration" class="'+cssPrefix+'calibration">\ |
| 692 <div class="'+cssPrefix+'ruler">\ | |
| 693 <div class="'+cssPrefix+'cm">Please enter the length of this scale on your screen</div>\ | |
| 978 | 694 <div>\ |
| 996 | 695 <input id="'+cssPrefix+'calibration-input" size="5"/> cm\ |
| 1018 | 696 <button class="'+cssPrefix+'button" id="'+cssPrefix+'calibrationOk">OK</button>\ |
| 697 <button class="'+cssPrefix+'button" id="'+cssPrefix+'calibrationCancel">Cancel</button>\ | |
| 978 | 698 </div>\ |
| 996 | 699 <div class="'+cssPrefix+'calibration-error">Please enter a numeric value like this: 12.3</div>\ |
| 974 | 700 </div>\ |
| 701 </div>'; | |
| 702 var $calDiv = $(html); | |
| 703 $elem.append($calDiv); | |
| 996 | 704 var $input = $calDiv.find('input'); |
| 705 var $ok = $calDiv.find('#'+cssPrefix+'calibrationOk'); | |
| 978 | 706 var $cancel = $calDiv.find("#calibrationCancel"); |
| 707 data.calibrationDiv = $calDiv; | |
| 996 | 708 data.calibrationErrorDiv = $calDiv.find('div.'+cssPrefix+'calibration-error'); |
| 978 | 709 data.calibrationInput = $input; |
| 985 | 710 centerOnScreen(data, $calDiv); |
| 978 | 711 var handler = function(event) { |
| 712 var _data = data; | |
| 996 | 713 if (event.keyCode == 27 || event.target.id == cssPrefix+'calibrationCancel') { |
| 978 | 714 $calDiv.fadeOut(); |
| 715 return false; | |
| 716 } | |
| 996 | 717 if (event.keyCode == 13 || event.target.id == cssPrefix+'calibrationOk') { |
| 978 | 718 changeCalibration(_data); |
| 719 return false; | |
| 720 } | |
| 996 | 721 _data.calibrationInput.removeClass(cssPrefix+'error'); |
| 978 | 722 }; |
| 723 $ok.on("click", handler); | |
| 724 $cancel.on("click", handler); | |
| 725 $input.on("keypress", handler); | |
| 968 | 726 }; |
| 727 | |
| 728 /** creates HTML structure for the scale mode menu | |
| 729 */ | |
| 730 var setupScaleModeDiv = function (data) { | |
| 731 var $elem = data.$elem; | |
| 732 var settings = data.settings; | |
| 996 | 733 var cssPrefix = settings.cssPrefix; |
| 968 | 734 var currentMode = digilib.fn.getScaleMode(data); |
| 996 | 735 var $scaleModeDiv = $('<div id="'+cssPrefix+'scalemode" style="display:none; z-index:9999; position:absolute"/>'); |
| 968 | 736 data.scaleModeDiv = $scaleModeDiv; |
| 996 | 737 var $scaleModeSelect = $('<select class="'+cssPrefix+'scalemode" />'); |
| 968 | 738 $elem.append($scaleModeDiv); |
| 739 $scaleModeDiv.append($scaleModeSelect); | |
| 740 for (var i = 0; i < modes.length; i++) { | |
| 741 var mode = modes[i]; | |
| 996 | 742 var selected = (mode.name == currentMode) ? ' selected="selected"' : ''; |
| 968 | 743 $scaleModeSelect.append($('<option name="' |
| 996 | 744 + mode.name + '"' + selected + '>' |
| 968 | 745 + mode.label + '</option>')); |
| 746 } | |
| 747 $scaleModeDiv.on("click.scalemode", function(event) { | |
| 748 return false; | |
| 749 }); | |
| 750 $scaleModeSelect.on('change.scalemode', function(event) { | |
| 751 var d = data; | |
| 752 changeMode(event, d); | |
| 753 }); | |
| 754 }; | |
| 755 | |
| 756 /** event handler | |
| 757 */ | |
| 758 var changeMode = function (event, data) { | |
| 759 var $select = $(event.target); | |
| 760 var newMode = $select.find("option:selected").attr("name"); | |
| 761 console.debug('setting mode to:', newMode); | |
| 762 var $div = data.scaleModeDiv; | |
| 977 | 763 $('body').off("click.scalemode"); |
| 968 | 764 $div.fadeOut(); |
| 974 | 765 digilib.actions.setScaleMode(data, newMode); |
| 946 | 766 }; |
| 767 | |
| 978 | 768 /** event handler |
| 769 */ | |
| 770 var changeCalibration = function (data) { | |
| 771 var $calDiv = data.calibrationDiv; | |
| 772 var $input = data.calibrationInput; | |
| 773 var cm = $input.val(); | |
| 774 var w = $calDiv.width(); | |
| 775 var dpi = fn.cropFloat(w / parseFloat(cm) * 2.54); | |
| 776 console.debug('width', w, 'cm', cm, 'input dpi:', dpi); | |
| 777 if(!fn.isNumber(dpi)) { | |
| 996 | 778 $input.addClass(data.settings.cssPrefix+'error'); |
| 978 | 779 return; |
| 780 } | |
| 781 digilib.actions.calibrate(data, dpi); | |
| 782 $calDiv.fadeOut(); | |
| 783 }; | |
| 784 | |
| 996 | 785 /** |
| 786 * creates HTML structure for a single button | |
| 787 */ | |
| 946 | 788 var createButton = function (data, $div, buttonName) { |
| 789 var $elem = data.$elem; | |
| 790 var settings = data.settings; | |
| 996 | 791 var cssPrefix = settings.cssPrefix; |
| 946 | 792 var mode = settings.interactionMode; |
| 793 var imagePath = settings.buttonSettings[mode].imagePath; | |
| 794 // make relative imagePath absolute | |
| 795 if (imagePath.charAt(0) !== '/' && imagePath.substring(0,3) !== 'http') { | |
| 796 imagePath = settings.digilibBaseUrl + '/jquery/' + imagePath; | |
| 797 } | |
| 798 var buttonConfig = settings.buttons[buttonName]; | |
|
1017
c3931ec5485f
write a console error when a button is not defined
hertzhaft
parents:
1007
diff
changeset
|
799 if (buttonConfig == null) { |
|
c3931ec5485f
write a console error when a button is not defined
hertzhaft
parents:
1007
diff
changeset
|
800 console.error('Could not create button: ' + buttonName); |
|
c3931ec5485f
write a console error when a button is not defined
hertzhaft
parents:
1007
diff
changeset
|
801 return; |
|
c3931ec5485f
write a console error when a button is not defined
hertzhaft
parents:
1007
diff
changeset
|
802 } |
| 946 | 803 // button properties |
| 804 var action = buttonConfig.onclick; | |
| 805 var tooltip = buttonConfig.tooltip; | |
| 806 var icon = imagePath + buttonConfig.icon; | |
| 807 // construct the button html | |
| 996 | 808 var $button = $('<div class="'+cssPrefix+'button"></div>'); |
|
989
f4757bf6ab65
new arrows plugin for scroll arrows next to the image.
robcast
parents:
988
diff
changeset
|
809 var $a = $('<a href=""/>'); |
| 996 | 810 var $img = $('<img class="'+cssPrefix+'button"/>'); |
| 946 | 811 $div.append($button); |
| 812 $button.append($a); | |
| 813 $a.append($img); | |
| 814 // add attributes and bindings | |
| 815 $button.attr('title', tooltip); | |
| 996 | 816 $button.addClass(cssPrefix+'button-'+buttonName); |
| 946 | 817 $img.attr('src', icon); |
| 818 // create handler for the buttons | |
| 819 $button.on('click.digilib', (function () { | |
| 820 // we create a new closure to capture the value of action | |
| 821 if ($.isArray(action)) { | |
| 822 // the handler function calls digilib with action and parameters | |
| 823 return function (evt) { | |
| 824 console.debug('click action=', action, ' evt=', evt); | |
| 825 $elem.digilib.apply($elem, action); | |
| 826 return false; | |
| 827 }; | |
| 828 } else { | |
| 829 // the handler function calls digilib with action | |
| 830 return function (evt) { | |
| 831 console.debug('click action=', action, ' evt=', evt); | |
| 832 $elem.digilib(action); | |
| 833 return false; | |
| 834 }; | |
| 835 } | |
| 836 })()); | |
| 837 }; | |
| 838 | |
| 839 // creates HTML structure for buttons in elem | |
| 840 var createButtons = function (data, buttonSetIdx) { | |
| 841 var $elem = data.$elem; | |
| 842 var settings = data.settings; | |
| 843 var mode = settings.interactionMode; | |
| 996 | 844 var cssPrefix = settings.cssPrefix; |
| 946 | 845 var buttonSettings = settings.buttonSettings[mode]; |
| 846 var buttonGroup = buttonSettings.buttonSets[buttonSetIdx]; | |
| 847 if (buttonGroup == null) { | |
| 848 // no buttons here | |
| 849 return; | |
| 850 } | |
| 851 // button divs are marked with class "keep" | |
| 996 | 852 var $buttonsDiv = $('<div class="'+cssPrefix+'keep '+cssPrefix+'buttons"/>'); |
| 946 | 853 var buttonNames = buttonSettings[buttonGroup]; |
| 854 for (var i = 0; i < buttonNames.length; i++) { | |
| 855 var buttonName = buttonNames[i]; | |
| 856 createButton(data, $buttonsDiv, buttonName); | |
| 857 } | |
| 858 // make buttons div scroll if too large for window | |
| 859 if ($buttonsDiv.height() > $(window).height() - 10) { | |
| 860 $buttonsDiv.css('position', 'absolute'); | |
| 861 } | |
| 862 // buttons hidden at first | |
| 863 $buttonsDiv.hide(); | |
| 864 $elem.append($buttonsDiv); | |
| 865 if (data.$buttonSets == null) { | |
| 866 // first button set | |
| 867 data.$buttonSets = [$buttonsDiv]; | |
| 868 } else { | |
| 869 $elem.append($buttonsDiv); | |
| 870 data.$buttonSets[buttonSetIdx] = $buttonsDiv; | |
| 871 } | |
| 872 return $buttonsDiv; | |
| 873 }; | |
| 874 | |
| 875 // display more (or less) button sets | |
| 876 var showButtons = function (data, more, setIdx, animated) { | |
| 877 var atime = animated ? 'fast': 0; | |
| 996 | 878 var cssPrefix = data.settings.cssPrefix; |
| 946 | 879 // get button width from settings |
| 880 var mode = data.settings.interactionMode; | |
| 881 var btnWidth = data.settings.buttonSettings[mode].buttonSetWidth; | |
| 882 if (more) { | |
| 883 // add set | |
| 996 | 884 var $otherSets = data.$elem.find('div.'+cssPrefix+'buttons:visible'); |
| 946 | 885 var $set; |
| 886 if (data.$buttonSets && data.$buttonSets[setIdx]) { | |
| 887 // set exists | |
| 888 $set = data.$buttonSets[setIdx]; | |
| 889 } else { | |
| 890 $set = createButtons(data, setIdx); | |
| 891 } | |
| 892 if ($set == null) return false; | |
| 893 // include border in calculation | |
| 894 //var btnWidth = $set.outerWidth(); | |
| 895 // console.debug("btnWidth", btnWidth); | |
| 896 // move remaining sets left and show new set | |
| 897 if ($otherSets.length > 0) { | |
| 898 $otherSets.animate({right : '+='+btnWidth+'px'}, atime, | |
| 899 function () {$set.show();}); | |
| 900 } else { | |
| 901 $set.show(); | |
| 902 } | |
| 903 } else { | |
| 904 // remove set | |
| 905 var $set = data.$buttonSets[setIdx]; | |
| 906 if ($set == null) return false; | |
| 907 //var btnWidth = $set.outerWidth(); | |
| 908 // hide last set | |
| 909 $set.hide(); | |
| 910 // take remaining sets and move right | |
| 996 | 911 var $otherSets = data.$elem.find('div.'+cssPrefix+'buttons:visible'); |
| 946 | 912 $otherSets.animate({right : '-='+btnWidth+'px'}, atime); |
| 913 } | |
| 914 return true; | |
| 915 }; | |
| 916 | |
| 917 // check for buttons to highlight TODO: improve this! | |
| 918 var highlightButtons = function (data, name, on) { | |
| 996 | 919 var cssPrefix = data.settings.cssPrefix; |
| 920 var $buttons = data.$elem.find('div.'+cssPrefix+'buttons:visible'); // include hidden? | |
| 946 | 921 // add a class for highlighted button |
| 922 var highlight = function (name, on) { | |
| 996 | 923 var $button = $buttons.find('div.'+cssPrefix+'button-' + name); |
| 946 | 924 if (on) { |
| 996 | 925 $button.addClass(cssPrefix+'button-on'); |
| 946 | 926 } else { |
| 996 | 927 $button.removeClass(cssPrefix+'button-on'); |
| 946 | 928 } |
| 929 }; | |
| 930 if (name != null) { | |
| 931 return highlight(name, on); | |
| 932 } | |
| 933 var flags = data.scalerFlags; | |
| 934 var settings = data.settings; | |
| 935 highlight('rot', settings.rot); | |
| 936 highlight('brgt', settings.brgt); | |
| 937 highlight('cont', settings.cont); | |
| 938 highlight('bird', settings.isBirdDivVisible); | |
| 939 highlight('help', settings.isAboutDivVisible); | |
| 940 highlight('hmir', flags.hmir); | |
| 941 highlight('vmir', flags.vmir); | |
| 942 highlight('quality', flags.q1 || flags.q2); | |
| 943 highlight('zoomin', ! isFullArea(data.zoomArea)); | |
| 944 }; | |
| 945 | |
| 946 // plugin object with name and init | |
| 947 // shared objects filled by digilib on registration | |
| 948 var plugin = { | |
| 949 name : 'buttons', | |
| 950 install : install, | |
| 951 init : init, | |
| 947 | 952 buttons : {}, |
| 946 | 953 actions : {}, |
| 954 fn : {}, | |
| 955 plugins : {} | |
| 956 }; | |
| 957 | |
| 958 if ($.fn.digilib == null) { | |
| 959 $.error("jquery.digilib.buttons must be loaded after jquery.digilib!"); | |
| 960 } else { | |
| 961 $.fn.digilib('plugin', plugin); | |
| 962 } | |
| 963 })(jQuery); |