copy key shortcuts support in album from albumshaper
[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     if (navigator.userAgent.indexOf('Opera') == -1) {
158         document.onkeydown = keyDownEvent;
159     }
160 }
161
162 function update_sensibilities() {
163     if (current == 0) {
164         document.getElementById("b_first").disabled = true;
165         document.getElementById("b_previous").disabled = true;
166     } else {
167         document.getElementById("b_first").disabled = false;
168         document.getElementById("b_previous").disabled = false;
169     }
170
171     if (current == images.length - 1) {
172         document.getElementById("b_next").disabled = true;
173         document.getElementById("b_last").disabled = true;
174     } else {
175         document.getElementById("b_next").disabled = false;
176         document.getElementById("b_last").disabled = false;
177     }
178 }
179
180 function set_cursor_(value, element) {
181
182     if (!element || !element.style) {
183         return;
184     }
185
186     element.style.cursor = value;
187
188     children = element.childNodes;
189     for (i = 0; i < children.length; i++) {
190         set_cursor_(value, children.item[i]);
191     }
192 }
193
194 function set_cursor(value) {
195     set_cursor_(value, document.getElementById('body'));
196 }
197
198 function show_current_text() {
199     /* don't show text if image not yet loaded because navigator
200      * won't refresh it during load */
201     if (images_loaded[current] == 2) {
202         document.getElementById('image_counter').firstChild.data = ( current + 1 ) + "/" + images.length;
203         document.getElementById('main_text').firstChild.data = captions[current] || images[current];
204         for (i = 0; i < other_sizes.length; i++) { 
205             if (other_sizes[i] == "original") {
206                 document.getElementById('link' + other_sizes[i]).href = eval("images_" + other_sizes[i] + "[current]");
207             } else {
208                 document.getElementById('link' + other_sizes[i]).href = 'image-' + other_sizes[i] + '.html?current=' + eval("images_" + other_sizes[i] + "[current]");
209             }
210         }
211         document.getElementById('thumbnails').href = 'thumbnails-~~current_size~~.html#' + images[current];
212         set_cursor("default");
213     } else {
214         setTimeout("show_current_text()", 100);
215         set_cursor("wait");
216     }
217 }
218
219 function display_current() {
220     eval("document.main_img.src = images[" + current + "]");
221     show_current_text();
222     update_sensibilities();
223 }
224
225 function first() {
226     if (slideshow == 1) {
227         toggle_slideshow(true);
228     }
229     
230     current = 0;
231     display_current();
232 }
233
234 function next() {
235     if (slideshow == 1) {
236         toggle_slideshow(true);
237     }
238
239     if (current < images.length - 1) {
240         current++;
241         display_current();
242     }
243 }
244
245 function previous() {
246     if (slideshow == 1) {
247         toggle_slideshow(true);
248     }
249
250     if (current > 0) {
251         current--;
252         display_current();
253     }
254 }
255
256 function last() {
257     if (slideshow == 1) {
258         toggle_slideshow(true);
259     }
260
261     current = images.length - 1;
262     display_current();
263 }
264
265 function keyDownEvent(key) {
266     if (!key) {
267         key = event;
268         key.which = key.keyCode;
269     }
270     switch (key.which) {
271       case 36: // home
272         first();
273         break;
274       case 35: // end
275         last();
276         break;
277       case 37: // left
278         previous();
279         break;
280       case 39: // right
281         next();
282         break;
283       case 38: // up
284         for (i = 0; i < 10; i++) { 
285             previous();
286         }
287         break;
288       case 40: // down
289         for (i = 0; i < 10; i++) { 
290             next();
291         }
292         break;
293     }
294 }
295
296 function toggle_slideshow(now) {
297     if (slideshow == 0) {
298         slideshow_pause = document.getElementById('secs').value;
299         add_cookie('booh-slideshow-pause-~~theme~~=' + slideshow_pause)
300         document.getElementById("b_slideshow").value = "~~stop_slideshow~~";
301         slideshow = 1;
302         if (current == images.length - 1) {
303             current = -1;
304         }
305         if (now) {
306             run_slideshow();
307         } else {
308             setTimeout("run_slideshow()", slideshow_pause * 1000);
309         }
310     } else {
311         clearTimeout(slideshow_timer);
312         document.getElementById("b_slideshow").value = "~~run_slideshow~~";
313         slideshow = 0;
314     }
315 }
316
317 function run_slideshow() {
318     if (slideshow == 0) {
319         return;
320     }
321
322     if (images_loaded[current + 1] == 2) {
323         current++;
324         display_current();
325         slideshow_timer = setTimeout("run_slideshow()", slideshow_pause * 1000);
326     } else {
327         slideshow_timer = setTimeout("run_slideshow()", 500);
328     }
329
330     if (current == images.length - 1) {
331         toggle_slideshow(true);
332     }
333 }
334 </script>
335 EOF
336
337 $image_head_code.sub!('~~run_slideshow~~', utf8(_('Run slideshow!')))
338 $image_head_code.sub!('~~stop_slideshow~~', utf8(_('Stop slideshow')))
339
340 $body_additions = <<'EOF'
341 onload="init()" id="body"
342 EOF
343
344 $button_first = '
345     <form><input type="button"
346                  onclick="first()"
347                  value="' + utf8(_('<<- First')) + '"
348                  id="b_first"/></form>'
349
350 $button_previous = '
351     <form><input type="button"
352                  onclick="previous()"
353                  value="' + utf8(_('<- Previous')) + '"
354                  id="b_previous"/></form>'
355
356 $button_next = '
357     <form><input type="button"
358                  onclick="next()"
359                  value="' + utf8(_('Next ->')) + '"
360                  id="b_next"/></form>'
361
362 $button_last = '
363     <form><input type="button"
364                  onclick="last()"
365                  value="' + utf8(_('Last ->>')) + '"
366                  id="b_last"/></form>'
367
368 $button_slideshow = '
369     <input type="button"
370            onclick="toggle_slideshow(true)"
371            value="' + utf8(_('Run slideshow!')) + '"
372            id="b_slideshow"/>'
373
374 $pause_slideshow = '
375     <font size="-2">' + utf8(_('pause:')) + '<input type="text" id="secs" size="1" value="3"/>' + utf8(_('secs')) + '</font>'
376
377
378 $image = <<'EOF'
379   <img name="main_img">
380 EOF
381
382 $image_counter_additions = <<'EOF'
383   id="image_counter"
384 EOF
385
386 $caption_additions = <<'EOF'
387   id="main_text"
388 EOF
389
390 $body_code = <<'EOF'
391 EOF
392
393
394 $thumbnails_head_code = <<'EOF'
395 <script language="JavaScript1.1" type="text/JavaScript">
396     var expires = new Date(new Date().getTime() + (30 * 86400000));  // 30 days
397     document.cookie = 'booh-preferred-size-~~theme~~=~~current_size~~'
398                       + '; expires=' + expires.toGMTString()
399                       + '; path=/';
400 </script>
401 EOF
402
403
404 $preferred_size_reloader = <<'EOF'
405 <html>
406     <head>
407         <script language="JavaScript1.1" type="text/JavaScript">
408
409 function getPreferredSize() {
410     if (document.cookie) {
411         var index = document.cookie.indexOf('booh-preferred-size-~~theme~~');
412         if (index != -1) {
413             var oleft = (document.cookie.indexOf('=', index) + 1);
414             var oright = document.cookie.indexOf(';', index);
415             if (oright == -1) {
416                 oright = document.cookie.length;
417             }
418             return 'thumbnails-' + document.cookie.substring(oleft, oright) + '.html';
419         }
420     }
421     return 'thumbnails-~~default_size~~.html';
422 }
423
424 window.location.href = getPreferredSize();
425
426         </script>
427     </head>
428 </html>
429 EOF