95ee5a64d481e982314644c78cc1dff9b6154f96
[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 include Booh
28
29 $image_head_code = <<'EOF'
30 <meta name="generator" content="Generated by Booh! http://zarb.org/~gc/html/booh.html">
31
32 <script language="JavaScript1.1" type="text/JavaScript">
33 var images = new Array(~~images~~);
34 ~~other_images~~
35 var other_sizes = new Array(~~other_sizes~~);
36 var captions = new Array(~~captions~~);
37
38 var images_ary = new Array();
39 var images_loaded = new Array();
40 var current = 0;
41 var slideshow = 0;
42 var slideshow_pause = null;
43 var slideshow_timer = null;
44
45 for (i = 0; i < images.length; i++) { 
46     /* this array will contain 0 if image not yet loaded, 1 when loading,
47      * 2 when complete */
48     images_loaded[i] = 0;
49 }
50
51 function dbg(t) {
52     document.getElementById('dbg_text').innerHTML += t + "\n";
53 }
54
55 /* load image, return 1 if image is finished loading */
56 function load(i) {
57     if (images_loaded[i] == 0) {
58         images_ary[i] = new Image();
59         images_ary[i].src = images[i];
60         images_loaded[i] = 1;
61     }
62     if (images_loaded[i] == 1) {
63         if (images_ary[i].complete) {
64             images_loaded[i] = 2;
65         } else {
66             return 0;
67         }
68     }
69     return 1;
70 }
71
72 function getparam(key) {
73     all_params = location.href.split("#")
74     if (all_params.length > 1) {
75         params = all_params[1].split("&");
76         for (i = 0; i < params.length; i++) {
77             keyvalue = params[i].split("=");
78             if (keyvalue[0] == key) {
79                 return keyvalue[1];
80             }
81         }
82     }
83     return null;
84 }
85
86 function loadcurrent(img) {
87     for (i = 0; i < images.length; i++) {
88         if (images[i] == img) {
89             current = i;
90             display_current();
91             return;
92         }
93     }
94     current = 0;
95     display_current();
96 }
97
98 /* check URL for changes; allows the URL to reflect currently showed image */
99 var currentURL = '';
100 function checkURL() {
101     if (window.location.href != currentURL) {
102         currentURL = window.location.href;
103         img = getparam('current');
104         loadcurrent(img);
105     }
106     setTimeout("checkURL()", 100);
107 }
108
109 function preload() { 
110
111     /* favor current image, if user clicked on `last' or something */
112     load(current);
113
114     /* don't blindly preload all images at the beginning,
115      * but rather load them one by one, in order to get
116      * next ones faster, beginning with next to current
117      */
118     if (current + 1 < images.length && load(current + 1) == 0) {
119         setTimeout("preload()", 500);
120         return;
121     }
122     if (current - 1 >= 0 && load(current - 1) == 0) {
123         setTimeout("preload()", 500);
124         return;
125     }
126
127     for (i = current + 2; i < images.length && i <= current + 5; i++) { 
128         if (load(i) == 0) {
129             setTimeout("preload()", 500);
130             return;
131         }
132     }
133     for (i = current - 2; i >= current - 3; i--) { 
134         if (i >= 0) {
135             if (load(i) == 0) {
136                 setTimeout("preload()", 500);
137                 return;
138             }
139         }
140     }
141
142     setTimeout("preload()", 500);
143 }
144
145 function add_cookie(val) {
146     var expires = new Date(new Date().getTime() + (30 * 86400000));  // 30 days
147     document.cookie = val
148                       + '; expires=' + expires.toGMTString()
149                       + '; path=/';
150 }
151
152 function get_cookie(key) {
153     if (document.cookie) {
154         var index = document.cookie.indexOf(key);
155         if (index != -1) {
156             var oleft = (document.cookie.indexOf('=', index) + 1);
157             var oright = document.cookie.indexOf(';', index);
158             if (oright == -1) {
159                 oright = document.cookie.length;
160             }
161             return document.cookie.substring(oleft, oright);
162         }
163     }
164     return null;
165 }
166
167 function init() {
168
169     add_cookie('booh-preferred-size-~~theme~~=~~current_size~~')
170
171     if (getparam('run_slideshow')) {
172         toggle_slideshow();
173     }
174
175     checkURL();
176
177     preload();
178     if (images.length == 1) {
179         document.getElementById("b_slideshow").disabled = true;
180     }
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 (navigator.userAgent.indexOf('Opera') == -1) {
188         document.onkeydown = keyDownEvent;
189     }
190 }
191
192 function update_sensibilities() {
193     if (current == 0) {
194         document.getElementById("b_first").disabled = true;
195         document.getElementById("b_previous").disabled = true;
196     } else {
197         document.getElementById("b_first").disabled = false;
198         document.getElementById("b_previous").disabled = false;
199     }
200
201     if (current == images.length - 1) {
202         document.getElementById("b_next").disabled = true;
203         document.getElementById("b_last").disabled = true;
204     } else {
205         document.getElementById("b_next").disabled = false;
206         document.getElementById("b_last").disabled = false;
207     }
208 }
209
210 function set_cursor_(value, element) {
211
212     if (!element || !element.style) {
213         return;
214     }
215
216     element.style.cursor = value;
217
218     children = element.childNodes;
219     for (i = 0; i < children.length; i++) {
220         set_cursor_(value, children.item[i]);
221     }
222 }
223
224 function set_cursor(value) {
225     set_cursor_(value, document.getElementById('body'));
226     set_cursor_(value, document.getElementById('b_first'));
227     set_cursor_(value, document.getElementById('b_previous'));
228     set_cursor_(value, document.getElementById('b_next'));
229     set_cursor_(value, document.getElementById('b_last'));
230 }
231
232 function show_current_text() {
233     /* don't show text if image not yet loaded because navigator
234      * won't refresh it during load */
235     if (images_loaded[current] == 2) {
236         document.getElementById('image_counter').innerHTML = ( current + 1 ) + "/" + images.length;
237         document.getElementById('main_text').innerHTML = captions[current];
238         for (i = 0; i < other_sizes.length; i++) { 
239             if (other_sizes[i] == "original") {
240                 document.getElementById('link' + other_sizes[i]).href = eval("images_" + other_sizes[i] + "[current]");
241             } else {
242                 document.getElementById('link' + other_sizes[i]).href = 'image-' + other_sizes[i] + '.html#current=' + eval("images_" + other_sizes[i] + "[current]");
243             }
244         }
245         document.getElementById('thumbnails').href = 'thumbnails-~~current_size~~.html#' + images[current];
246         set_cursor("default");
247     } else {
248         setTimeout("show_current_text()", 100);
249         set_cursor("wait");
250     }
251 }
252
253 function display_current() {
254     document.main_img.src = images[current];
255     window.location.href = 'image-~~current_size~~.html#current=' + images[current];
256     show_current_text();
257     update_sensibilities();
258 }
259
260 function first() {
261     if (slideshow == 1) {
262         toggle_slideshow(true);
263     }
264     
265     current = 0;
266     display_current();
267 }
268
269 function next() {
270     if (slideshow == 1) {
271         toggle_slideshow(true);
272     }
273
274     if (current < images.length - 1) {
275         current++;
276         display_current();
277     }
278 }
279
280 function next10() {
281     if (slideshow == 1) {
282         toggle_slideshow(true);
283     }
284
285     if (current < images.length - 11) {
286         current += 10;
287     } else {
288         current = images.length - 1;
289     }
290     display_current();
291 }
292
293 function previous() {
294     if (slideshow == 1) {
295         toggle_slideshow(true);
296     }
297
298     if (current > 0) {
299         current--;
300         display_current();
301     }
302 }
303
304 function previous10() {
305     if (slideshow == 1) {
306         toggle_slideshow(true);
307     }
308
309     if (current > 10) {
310         current -= 10;
311     } else {
312         current = 0;
313     }
314     display_current();
315 }
316
317 function last() {
318     if (slideshow == 1) {
319         toggle_slideshow(true);
320     }
321
322     current = images.length - 1;
323     display_current();
324 }
325
326 function keyDownEvent(key) {
327     if (!key) {
328         key = event;
329         key.which = key.keyCode;
330     }
331     switch (key.which) {
332       case 36: // home
333         first();
334         break;
335       case 35: // end
336         last();
337         break;
338       case 37: // left
339         previous();
340         break;
341       case 39: // right
342         next();
343         break;
344       case 38: // up
345         previous10();
346         break;
347       case 40: // down
348         next10();
349         break;
350     }
351 }
352
353 function toggle_slideshow(now) {
354     if (slideshow == 0) {
355         slideshow_pause = document.getElementById('secs').value;
356         add_cookie('booh-slideshow-pause-~~theme~~=' + slideshow_pause)
357         document.getElementById("b_slideshow").value = "~~stop_slideshow~~";
358         slideshow = 1;
359         if (current == images.length - 1) {
360             current = -1;
361         }
362         if (now) {
363             run_slideshow();
364         } else {
365             setTimeout("run_slideshow()", slideshow_pause * 1000);
366         }
367     } else {
368         clearTimeout(slideshow_timer);
369         document.getElementById("b_slideshow").value = "~~run_slideshow~~";
370         slideshow = 0;
371     }
372 }
373
374 function run_slideshow() {
375     if (slideshow == 0) {
376         return;
377     }
378
379     if (images_loaded[current + 1] == 2) {
380         current++;
381         display_current();
382         slideshow_timer = setTimeout("run_slideshow()", slideshow_pause * 1000);
383     } else {
384         slideshow_timer = setTimeout("run_slideshow()", 500);
385     }
386
387     if (current == images.length - 1) {
388         toggle_slideshow(true);
389     }
390 }
391 </script>
392 EOF
393
394 $image_head_code.sub!('~~run_slideshow~~', utf8(_('Run slideshow!')))
395 $image_head_code.sub!('~~stop_slideshow~~', utf8(_('Stop slideshow')))
396
397 $body_additions = <<'EOF'
398 onload="init()" id="body"
399 EOF
400
401 $button_first = '
402     <form><input type="button"
403                  onclick="first()"
404                  value="' + utf8(_('<<- First')) + '"
405                  id="b_first"/></form>'
406
407 $button_previous = '
408     <form><input type="button"
409                  onclick="previous()"
410                  value="' + utf8(_('<- Previous')) + '"
411                  id="b_previous"/></form>'
412
413 $button_next = '
414     <form><input type="button"
415                  onclick="next()"
416                  value="' + utf8(_('Next ->')) + '"
417                  id="b_next"/></form>'
418
419 $button_last = '
420     <form><input type="button"
421                  onclick="last()"
422                  value="' + utf8(_('Last ->>')) + '"
423                  id="b_last"/></form>'
424
425 $button_slideshow = '
426     <input type="button"
427            onclick="toggle_slideshow(true)"
428            value="' + utf8(_('Run slideshow!')) + '"
429            id="b_slideshow"/>'
430
431 $pause_slideshow = '
432     <font size="-2">' + utf8(_('pause:')) + '<input type="text" id="secs" size="1" value="3"/>' + utf8(_('secs')) + '</font>'
433
434
435 $image = <<'EOF'
436   <img name="main_img" class="image">
437 EOF
438
439 $image_counter_additions = <<'EOF'
440   id="image_counter"
441 EOF
442
443 $caption_additions = <<'EOF'
444   id="main_text"
445 EOF
446
447 $body_code = <<'EOF'
448 EOF
449
450
451 $thumbnails_head_code = <<'EOF'
452 <meta name="generator" content="Generated by Booh! http://zarb.org/~gc/html/booh.html">
453
454 <script language="JavaScript1.1" type="text/JavaScript">
455     var expires = new Date(new Date().getTime() + (30 * 86400000));  // 30 days
456     document.cookie = 'booh-preferred-size-~~theme~~=~~current_size~~'
457                       + '; expires=' + expires.toGMTString()
458                       + '; path=/';
459 </script>
460 EOF
461
462
463 $preferred_size_reloader = <<'EOF'
464 <html>
465     <head>
466         <script language="JavaScript1.1" type="text/JavaScript">
467
468 var sizes = new Array(~~all_sizes~~);
469
470 function getPreferredSize() {
471     if (document.cookie) {
472         var index = document.cookie.indexOf('booh-preferred-size-~~theme~~');
473         if (index != -1) {
474             var oleft = (document.cookie.indexOf('=', index) + 1);
475             var oright = document.cookie.indexOf(';', index);
476             if (oright == -1) {
477                 oright = document.cookie.length;
478             }
479             size = document.cookie.substring(oleft, oright);
480             for (i = 0; i < sizes.length; i++) {
481                 if (sizes[i] == size) {
482                     return 'thumbnails-' + size + '.html';
483                 }
484             }
485         }
486     }
487     return 'thumbnails-~~default_size~~.html';
488 }
489
490 window.location.href = getPreferredSize();
491
492         </script>
493     </head>
494 </html>
495 EOF