allow to change the number of seconds of pause in the slideshow, and keep it in a...
[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
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').firstChild.data += 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 preload() { 
74
75     /* favor current image, if user clicked on `last' or something */
76     load(current);
77
78     /* don't blindly preload all images at the beginning,
79      * but rather load them one by one, in order to get
80      * next ones faster, beginning with next to current
81      */
82     for (i = current + 1; i < images.length && i <= current + 5; i++) { 
83         if (load(i) == 0) {
84             setTimeout("preload()", 500);
85             return;
86         }
87     }
88     for (i = current - 1; i >= current - 3; i--) { 
89         if (i >= 0) {
90             if (load(i) == 0) {
91                 setTimeout("preload()", 500);
92                 return;
93             }
94         }
95     }
96
97     setTimeout("preload()", 500);
98 }
99
100 function add_cookie(val) {
101     var expires = new Date(new Date().getTime() + (30 * 86400000));  // 30 days
102     document.cookie = val
103                       + '; expires=' + expires.toGMTString()
104                       + '; path=/';
105 }
106
107 function get_cookie(key) {
108     if (document.cookie) {
109         var index = document.cookie.indexOf(key);
110         if (index != -1) {
111             var oleft = (document.cookie.indexOf('=', index) + 1);
112             var oright = document.cookie.indexOf(';', index);
113             if (oright == -1) {
114                 oright = document.cookie.length;
115             }
116             return document.cookie.substring(oleft, oright);
117         }
118     }
119     return null;
120 }
121
122 function init() {
123
124     add_cookie('booh-preferred-size-~~theme~~=~~current_size~~')
125
126     /* retrieve GET parameters */
127     all_params = location.href.split("?")
128     if (all_params.length > 1) {
129         params = all_params[1].split("&");
130         for (i = 0; i < params.length; i++) {
131             keyvalue = params[i].split("=");
132             if (keyvalue[0] == "run_slideshow") {
133                 toggle_slideshow();
134             }
135             if (keyvalue[0] == "current") {
136                 for (i = 0; i < images.length; i++) {
137                     if (images[i] == keyvalue[1]) {
138                         current = i;
139                         break;
140                     }
141                 }
142             }
143         }
144     }
145
146     preload();
147     display_current();
148     if (images.length == 1) {
149         document.getElementById("b_slideshow").disabled = true;
150     }
151
152     preferred_pause = get_cookie('booh-slideshow-pause-~~theme~~');
153     if (preferred_pause != null) {
154         document.getElementById('secs').value = preferred_pause;
155     }
156 }
157
158 function update_sensibilities() {
159     if (current == 0) {
160         document.getElementById("b_first").disabled = true;
161         document.getElementById("b_previous").disabled = true;
162     } else {
163         document.getElementById("b_first").disabled = false;
164         document.getElementById("b_previous").disabled = false;
165     }
166
167     if (current == images.length - 1) {
168         document.getElementById("b_next").disabled = true;
169         document.getElementById("b_last").disabled = true;
170     } else {
171         document.getElementById("b_next").disabled = false;
172         document.getElementById("b_last").disabled = false;
173     }
174 }
175
176 function set_cursor_(value, element) {
177
178     if (!element || !element.style) {
179         return;
180     }
181
182     element.style.cursor = value;
183
184     children = element.childNodes;
185     for (i = 0; i < children.length; i++) {
186         set_cursor_(value, children.item[i]);
187     }
188 }
189
190 function set_cursor(value) {
191     set_cursor_(value, document.getElementById('body'));
192 }
193
194 function show_current_text() {
195     /* don't show text if image not yet loaded because navigator
196      * won't refresh it during load */
197     if (images_loaded[current] == 2) {
198         document.getElementById('image_counter').firstChild.data = ( current + 1 ) + "/" + images.length;
199         document.getElementById('main_text').firstChild.data = captions[current] || images[current];
200         for (i = 0; i < other_sizes.length; i++) { 
201             if (other_sizes[i] == "original") {
202                 document.getElementById('link' + other_sizes[i]).href = eval("images_" + other_sizes[i] + "[current]");
203             } else {
204                 document.getElementById('link' + other_sizes[i]).href = 'image-' + other_sizes[i] + '.html?current=' + eval("images_" + other_sizes[i] + "[current]");
205             }
206         }
207         document.getElementById('thumbnails').href = 'thumbnails-~~current_size~~.html#' + images[current];
208         set_cursor("default");
209     } else {
210         setTimeout("show_current_text()", 100);
211         set_cursor("wait");
212     }
213 }
214
215 function display_current() {
216     eval("document.main_img.src = images[" + current + "]");
217     show_current_text();
218     update_sensibilities();
219 }
220
221 function first() {
222     if (slideshow == 1) {
223         toggle_slideshow(true);
224     }
225     
226     current = 0;
227     display_current();
228 }
229
230 function next() {
231     if (slideshow == 1) {
232         toggle_slideshow(true);
233     }
234
235     if (current < images.length - 1) {
236         current++;
237         display_current();
238     }
239 }
240
241 function previous() {
242     if (slideshow == 1) {
243         toggle_slideshow(true);
244     }
245
246     if (current > 0) {
247         current--;
248         display_current();
249     }
250 }
251
252 function last() {
253     if (slideshow == 1) {
254         toggle_slideshow(true);
255     }
256
257     current = images.length - 1;
258     display_current();
259 }
260
261 function toggle_slideshow(now) {
262     if (slideshow == 0) {
263         slideshow_pause = document.getElementById('secs').value;
264         add_cookie('booh-slideshow-pause-~~theme~~=' + slideshow_pause)
265         document.getElementById("b_slideshow").value = "~~stop_slideshow~~";
266         slideshow = 1;
267         if (current == images.length - 1) {
268             current = -1;
269         }
270         if (now) {
271             run_slideshow();
272         } else {
273             setTimeout("run_slideshow()", slideshow_pause * 1000);
274         }
275     } else {
276         clearTimeout(slideshow_timer);
277         document.getElementById("b_slideshow").value = "~~run_slideshow~~";
278         slideshow = 0;
279     }
280 }
281
282 function run_slideshow() {
283     if (slideshow == 0) {
284         return;
285     }
286
287     if (images_loaded[current + 1] == 2) {
288         current++;
289         display_current();
290         slideshow_timer = setTimeout("run_slideshow()", slideshow_pause * 1000);
291     } else {
292         slideshow_timer = setTimeout("run_slideshow()", 500);
293     }
294
295     if (current == images.length - 1) {
296         toggle_slideshow(true);
297     }
298 }
299 </script>
300 EOF
301
302 $image_head_code.sub!('~~run_slideshow~~', utf8(_('Run slideshow!')))
303 $image_head_code.sub!('~~stop_slideshow~~', utf8(_('Stop slideshow')))
304
305 $body_additions = <<'EOF'
306 onload="init()" id="body"
307 EOF
308
309 $button_first = '
310     <form><input type="button"
311                  onclick="first()"
312                  value="' + utf8(_('<<- First')) + '"
313                  id="b_first"/></form>'
314
315 $button_previous = '
316     <form><input type="button"
317                  onclick="previous()"
318                  value="' + utf8(_('<- Previous')) + '"
319                  id="b_previous"/></form>'
320
321 $button_next = '
322     <form><input type="button"
323                  onclick="next()"
324                  value="' + utf8(_('Next ->')) + '"
325                  id="b_next"/></form>'
326
327 $button_last = '
328     <form><input type="button"
329                  onclick="last()"
330                  value="' + utf8(_('Last ->>')) + '"
331                  id="b_last"/></form>'
332
333 $button_slideshow = '
334     <input type="button"
335            onclick="toggle_slideshow(true)"
336            value="' + utf8(_('Run slideshow!')) + '"
337            id="b_slideshow"/>'
338
339 $pause_slideshow = '
340     <font size="-2">' + utf8(_('pause:')) + '<input type="text" id="secs" size="1" value="3"/>' + utf8(_('secs')) + '</font>'
341
342
343 $image = <<'EOF'
344   <img name="main_img">
345 EOF
346
347 $image_counter_additions = <<'EOF'
348   id="image_counter"
349 EOF
350
351 $caption_additions = <<'EOF'
352   id="main_text"
353 EOF
354
355 $body_code = <<'EOF'
356 EOF
357
358
359 $thumbnails_head_code = <<'EOF'
360 <script language="JavaScript1.1" type="text/JavaScript">
361     var expires = new Date(new Date().getTime() + (30 * 86400000));  // 30 days
362     document.cookie = 'booh-preferred-size-~~theme~~=~~current_size~~'
363                       + '; expires=' + expires.toGMTString()
364                       + '; path=/';
365 </script>
366 EOF
367
368
369 $preferred_size_reloader = <<'EOF'
370 <html>
371     <head>
372         <script language="JavaScript1.1" type="text/JavaScript">
373
374 function getPreferredSize() {
375     if (document.cookie) {
376         var index = document.cookie.indexOf('booh-preferred-size-~~theme~~');
377         if (index != -1) {
378             var oleft = (document.cookie.indexOf('=', index) + 1);
379             var oright = document.cookie.indexOf(';', index);
380             if (oright == -1) {
381                 oright = document.cookie.length;
382             }
383             return 'thumbnails-' + document.cookie.substring(oleft, oright) + '.html';
384         }
385     }
386     return 'thumbnails-~~default_size~~.html';
387 }
388
389 window.location.href = getPreferredSize();
390
391         </script>
392     </head>
393 </html>
394 EOF