don't do javascript key shortcuts when modifiers are pressed
[booh] / lib / booh / html-merges.rb
1 #
2 #                         *  BOOH  *
3 #
4 # A.k.a `Best web-album Of the world, Or your money back, Humerus'.
5 #
6 # The acronyn sucks, however this is a tribute to Dragon Ball by
7 # Akira Toriyama, where the last enemy beaten by heroes of Dragon
8 # Ball is named "Boo". But there was already a free software project
9 # called Boo, so this one will be it "Booh". Or whatever.
10 #
11 #
12 # Copyright (c) 2004 Guillaume Cottenceau <gc3 at bluewin.ch>
13 #
14 # This software may be freely redistributed under the terms of the GNU
15 # public license version 2.
16 #
17 # You should have received a copy of the GNU General Public License
18 # along with this program; if not, write to the Free Software
19 # Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA.
20
21 # holds static data to merge in the html "themes"
22
23 require 'gettext'
24 bindtextdomain("booh")
25
26 require 'booh/booh-lib'
27 require 'booh/version.rb'
28 include Booh
29
30 $image_head_code = '<meta name="generator" content="Booh-' + $VERSION + <<'EOF'
31  http://zarb.org/~gc/html/booh.html"/>
32
33 <script language="JavaScript1.1" type="text/JavaScript">
34 var images = new Array(~~images~~);
35 ~~other_images~~
36 var other_sizes = new Array(~~other_sizes~~);
37 var captions = new Array(~~captions~~);
38
39 var images_ary = new Array();
40 var images_loaded = new Array();
41 var current = 0;
42 var slideshow = 0;
43 var slideshow_pause = null;
44 var slideshow_timer = null;
45
46 for (i = 0; i < images.length; i++) { 
47     /* this array will contain 0 if image not yet loaded, 1 when loading,
48      * 2 when complete */
49     images_loaded[i] = 0;
50 }
51
52 function dbg(t) {
53     document.getElementById('dbg_text').innerHTML += t + "\n";
54 }
55
56 /* load image, return 1 if image is finished loading */
57 function load(i) {
58     if (images_loaded[i] == 0) {
59         images_ary[i] = new Image();
60         images_ary[i].src = images[i];
61         images_loaded[i] = 1;
62     }
63     if (images_loaded[i] == 1) {
64         if (images_ary[i].complete) {
65             images_loaded[i] = 2;
66         } else {
67             return 0;
68         }
69     }
70     return 1;
71 }
72
73 function getparam(key) {
74     all_params = location.href.split("#")
75     if (all_params.length > 1) {
76         params = all_params[1].split("&");
77         for (i = 0; i < params.length; i++) {
78             keyvalue = params[i].split("=");
79             if (keyvalue[0] == key) {
80                 return keyvalue[1];
81             }
82         }
83     }
84     return null;
85 }
86
87 function loadcurrent(img) {
88     for (i = 0; i < images.length; i++) {
89         if (images[i] == img) {
90             current = i;
91             display_current();
92             return;
93         }
94     }
95     current = 0;
96     display_current();
97 }
98
99 function browser_href() {
100     all = location.href.split("/");
101     return all[all.length - 1];
102 }
103
104 /* check URL for changes; allows the URL to reflect currently showed image */
105 var currentURL = '';
106 function checkURL() {
107     if (currentURL == 'ignore1') {
108         // do nothing
109     } else if (currentURL == 'ignore2') {
110         currentURL = browser_href();
111     } else {
112         href = browser_href();
113         if (href != currentURL) {
114             currentURL = href;
115             img = getparam('current');
116             loadcurrent(img);
117         }
118     }
119     setTimeout("checkURL()", 100);
120 }
121
122 function preload() { 
123
124     /* favor current image, if user clicked on `last' or something */
125     load(current);
126
127     /* don't blindly preload all images at the beginning,
128      * but rather load them one by one, in order to get
129      * next ones faster, beginning with next to current
130      */
131     if (current + 1 < images.length && load(current + 1) == 0) {
132         setTimeout("preload()", 500);
133         return;
134     }
135     if (current - 1 >= 0 && load(current - 1) == 0) {
136         setTimeout("preload()", 500);
137         return;
138     }
139
140     for (i = current + 2; i < images.length && i <= current + 5; i++) { 
141         if (load(i) == 0) {
142             setTimeout("preload()", 500);
143             return;
144         }
145     }
146     for (i = current - 2; i >= current - 3; i--) { 
147         if (i >= 0) {
148             if (load(i) == 0) {
149                 setTimeout("preload()", 500);
150                 return;
151             }
152         }
153     }
154
155     setTimeout("preload()", 500);
156 }
157
158 function add_cookie(val) {
159     var expires = new Date(new Date().getTime() + (30 * 86400000));  // 30 days
160     document.cookie = val
161                       + '; expires=' + expires.toGMTString()
162                       + '; path=/';
163 }
164
165 function get_cookie(key) {
166     if (document.cookie) {
167         var index = document.cookie.indexOf(key);
168         if (index != -1) {
169             var oleft = (document.cookie.indexOf('=', index) + 1);
170             var oright = document.cookie.indexOf(';', index);
171             if (oright == -1) {
172                 oright = document.cookie.length;
173             }
174             return document.cookie.substring(oleft, oright);
175         }
176     }
177     return null;
178 }
179
180 function init() {
181
182     preferred_pause = get_cookie('booh-slideshow-pause-~~theme~~');
183     if (preferred_pause != null) {
184         document.getElementById('secs').value = preferred_pause;
185     }
186
187     if (getparam('run_slideshow')) {
188         toggle_slideshow();
189     }
190
191     checkURL();
192
193     preload();
194     if (images.length == 1) {
195         document.getElementById("b_slideshow").disabled = true;
196         document.getElementById("b_slideshow").setAttribute("class", "disabled");
197     }
198
199     if (navigator.userAgent.indexOf('Opera') == -1) {
200         document.onkeydown = keyDownEvent;
201     }
202 }
203
204 function update_sensibilities() {
205     if (current == 0) {
206         document.getElementById("b_first").disabled = true;
207         document.getElementById("b_previous").disabled = true;
208         document.getElementById("b_first").setAttribute("class", "disabled");
209         document.getElementById("b_previous").setAttribute("class", "disabled");
210     } else {
211         document.getElementById("b_first").disabled = false;
212         document.getElementById("b_previous").disabled = false;
213         document.getElementById("b_first").removeAttribute("class");
214         document.getElementById("b_previous").removeAttribute("class");
215     }
216
217     if (current == images.length - 1) {
218         document.getElementById("b_next").disabled = true;
219         document.getElementById("b_last").disabled = true;
220         document.getElementById("b_next").setAttribute("class", "disabled");
221         document.getElementById("b_last").setAttribute("class", "disabled");
222     } else {
223         document.getElementById("b_next").disabled = false;
224         document.getElementById("b_last").disabled = false;
225         document.getElementById("b_next").removeAttribute("class");
226         document.getElementById("b_last").removeAttribute("class");
227     }
228 }
229
230 function set_cursor_(value, element) {
231
232     if (!element || !element.style) {
233         return;
234     }
235
236     element.style.cursor = value;
237
238     children = element.childNodes;
239     for (i = 0; i < children.length; i++) {
240         set_cursor_(value, children.item[i]);
241     }
242 }
243
244 function set_cursor(value) {
245     set_cursor_(value, document.getElementById('body'));
246     set_cursor_(value, document.getElementById('b_first'));
247     set_cursor_(value, document.getElementById('b_previous'));
248     set_cursor_(value, document.getElementById('b_next'));
249     set_cursor_(value, document.getElementById('b_last'));
250 }
251
252 function show_current_text() {
253     /* don't show text if image not yet loaded because navigator
254      * won't refresh it during load */
255     if (images_loaded[current] == 2) {
256         document.getElementById('image_counter').innerHTML = ( current + 1 ) + "/" + images.length;
257         document.getElementById('main_text').innerHTML = captions[current];
258         for (i = 0; i < other_sizes.length; i++) { 
259             if (other_sizes[i] == "original") {
260                 document.getElementById('link' + other_sizes[i]).href = eval("images_" + other_sizes[i] + "[current]");
261             } else {
262                 document.getElementById('link' + other_sizes[i]).href = 'image-' + other_sizes[i] + '.html#current=' + eval("images_" + other_sizes[i] + "[current]");
263             }
264         }
265         document.getElementById('thumbnails').href = 'thumbnails-~~current_size~~.html#' + images[current];
266         set_cursor("default");
267     } else {
268         setTimeout("show_current_text()", 100);
269         set_cursor("wait");
270     }
271 }
272
273 function display_current() {
274     document.main_img.src = images[current];
275     oldhref = browser_href();
276     newhref = 'image-~~current_size~~.html#current=' + images[current];
277     if (oldhref != newhref) {
278         currentURL = 'ignore1';
279         location.href = newhref;
280         currentURL = 'ignore2';
281     }
282     show_current_text();
283     update_sensibilities();
284 }
285
286 function first() {
287     if (slideshow == 1) {
288         toggle_slideshow(true);
289     }
290     
291     current = 0;
292     display_current();
293 }
294
295 function next() {
296     if (slideshow == 1) {
297         toggle_slideshow(true);
298     }
299
300     if (current < images.length - 1) {
301         current++;
302         display_current();
303     }
304 }
305
306 function next10() {
307     if (slideshow == 1) {
308         toggle_slideshow(true);
309     }
310
311     if (current < images.length - 11) {
312         current += 10;
313     } else {
314         current = images.length - 1;
315     }
316     display_current();
317 }
318
319 function previous() {
320     if (slideshow == 1) {
321         toggle_slideshow(true);
322     }
323
324     if (current > 0) {
325         current--;
326         display_current();
327     }
328 }
329
330 function previous10() {
331     if (slideshow == 1) {
332         toggle_slideshow(true);
333     }
334
335     if (current > 10) {
336         current -= 10;
337     } else {
338         current = 0;
339     }
340     display_current();
341 }
342
343 function last() {
344     if (slideshow == 1) {
345         toggle_slideshow(true);
346     }
347
348     current = images.length - 1;
349     display_current();
350 }
351
352 function keyDownEvent(key) {
353     if (!key) {
354         key = event;
355         key.which = key.keyCode;
356     }
357     if (key.altKey || key.ctrlKey || key.shiftKey) {
358         return;
359     }
360     switch (key.which) {
361       case 36: // home
362         first();
363         break;
364       case 35: // end
365         last();
366         break;
367       case 37: // left
368         previous();
369         break;
370       case 39: // right
371         next();
372         break;
373       case 38: // up
374         previous10();
375         break;
376       case 40: // down
377         next10();
378         break;
379     }
380 }
381
382 function toggle_slideshow(now) {
383     if (slideshow == 0) {
384         slideshow_pause = document.getElementById('secs').value;
385         add_cookie('booh-slideshow-pause-~~theme~~=' + slideshow_pause)
386         document.getElementById("b_slideshow").value = "~~stop_slideshow~~";
387         slideshow = 1;
388         if (current == images.length - 1) {
389             current = -1;
390         }
391         if (now) {
392             run_slideshow();
393         } else {
394             setTimeout("run_slideshow()", slideshow_pause * 1000);
395         }
396     } else {
397         clearTimeout(slideshow_timer);
398         document.getElementById("b_slideshow").value = "~~run_slideshow~~";
399         slideshow = 0;
400     }
401 }
402
403 function run_slideshow() {
404     if (slideshow == 0) {
405         return;
406     }
407
408     if (images_loaded[current + 1] == 2) {
409         current++;
410         display_current();
411         slideshow_timer = setTimeout("run_slideshow()", slideshow_pause * 1000);
412     } else {
413         slideshow_timer = setTimeout("run_slideshow()", 500);
414     }
415
416     if (current == images.length - 1) {
417         toggle_slideshow(true);
418     }
419 }
420 </script>
421 EOF
422
423 $image_head_code.sub!('~~run_slideshow~~', utf8(_('Run slideshow!')))
424 $image_head_code.sub!('~~stop_slideshow~~', utf8(_('Stop slideshow')))
425
426 $body_additions = <<'EOF'
427 onload="init()" id="body"
428 EOF
429
430 $button_first = '
431     <form action="fake"><input type="button"
432                  onclick="first()"
433                  value="' + utf8(_('<<- First')) + '"
434                  id="b_first"/></form>'
435
436 $button_previous = '
437     <form action="fake"><input type="button"
438                  onclick="previous()"
439                  value="' + utf8(_('<- Previous')) + '"
440                  id="b_previous"/></form>'
441
442 $button_next = '
443     <form action="fake"><input type="button"
444                  onclick="next()"
445                  value="' + utf8(_('Next ->')) + '"
446                  id="b_next"/></form>'
447
448 $button_last = '
449     <form action="fake"><input type="button"
450                  onclick="last()"
451                  value="' + utf8(_('Last ->>')) + '"
452                  id="b_last"/></form>'
453
454 $button_slideshow = '
455     <input type="button"
456            onclick="toggle_slideshow(true)"
457            value="' + utf8(_('Run slideshow!')) + '"
458            id="b_slideshow"/>'
459
460 $pause_slideshow = '
461     <font size="-2">' + utf8(_('pause:')) + '<input type="text" id="secs" size="1" value="3"/>' + utf8(_('secs')) + '</font>'
462
463
464 $image = <<'EOF'
465   <img name="main_img" class="image" src="fake" alt="main image"/>
466 EOF
467
468 $image_counter_additions = <<'EOF'
469   id="image_counter"
470 EOF
471
472 $caption_additions = <<'EOF'
473   id="main_text"
474 EOF
475
476 $body_code = <<'EOF'
477 EOF
478
479
480 $thumbnails_head_code = '<meta name="generator" content="Booh-' + $VERSION + <<'EOF'
481  http://zarb.org/~gc/html/booh.html"/>
482
483 <script language="JavaScript1.1" type="text/JavaScript">
484     var expires = new Date(new Date().getTime() + (30 * 86400000));  // 30 days
485     document.cookie = 'booh-preferred-size-~~theme~~=~~current_size_js~~'
486                       + '; expires=' + expires.toGMTString()
487                       + '; path=/';
488 </script>
489 EOF
490
491
492 $preferred_size_reloader = <<'EOF'
493 <html>
494     <head>
495         <script language="JavaScript1.1" type="text/JavaScript">
496
497 var sizes = new Array(~~all_sizes~~);
498
499 function getPreferredSize() {
500     if (document.cookie) {
501         var index = document.cookie.indexOf('booh-preferred-size-~~theme~~');
502         if (index != -1) {
503             var oleft = (document.cookie.indexOf('=', index) + 1);
504             var oright = document.cookie.indexOf(';', index);
505             if (oright == -1) {
506                 oright = document.cookie.length;
507             }
508             size = document.cookie.substring(oleft, oright);
509             for (i = 0; i < sizes.length; i++) {
510                 if (sizes[i] == size) {
511                     return 'thumbnails-' + size + '.html';
512                 }
513             }
514         }
515     }
516     return 'thumbnails-~~default_size~~.html';
517 }
518
519 window.location.href = getPreferredSize();
520
521         </script>
522     </head>
523 </html>
524 EOF
525
526
527 $index_head_code = '<meta name="generator" content="Booh-' + $VERSION + ' http://zarb.org/~gc/html/booh.html"/>
528 <script language="JavaScript1.1" type="text/JavaScript">
529 function init() {
530     if (!document.cookie || document.cookie.indexOf("booh-not-a-newbie") == -1) {
531         document.getElementById("title").innerHTML += "<br/><br/>' + utf8(_("<i>Hint: you can click on the images to open the albums!</i>")) + '";
532     }
533     var expires = new Date(new Date().getTime() + (10 * 86400000));  // 10 days
534     document.cookie = "booh-not-a-newbie=true"
535                       + "; expires=" + expires.toGMTString()
536                       + "; path=/";
537 }
538 </script>'