allow to run with the slideshow toggled
[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 $head_code = <<'EOF'
27 <link rev="made" href="http://zarb.org/~gc/html/booh.html" />
28 <script language="JavaScript1.1" type="text/JavaScript">
29
30 var images = new Array(~~images~~);
31 var captions = new Array(~~captions~~);
32
33 var images_ary = new Array();
34 var images_loaded = new Array();
35 var current = 0;
36 var slideshow = 0;
37 var slideshow_pause = 3;
38 var slideshow_timer = null;
39
40 for (i = 0; i < images.length; i++) { 
41     /* this array will contain 0 if image not yet loaded, 1 when loading,
42      * 2 when complete */
43     images_loaded[i] = 0;
44 }
45
46 function dbg(t) {
47     document.getElementById('dbg_text').firstChild.data += t + "\n";
48 }
49
50 /* load image, return 1 if image is finished loading */
51 function load(i) {
52     if (images_loaded[i] == 0) {
53         images_ary[i] = new Image();
54         images_ary[i].src = images[i];
55         images_loaded[i] = 1;
56     }
57     if (images_loaded[i] == 1) {
58         if (images_ary[i].complete) {
59             images_loaded[i] = 2;
60         } else {
61             return 0;
62         }
63     }
64     return 1;
65 }
66
67 function preload() { 
68
69     /* favor current image, if user clicked on `last' or something */
70     load(current);
71
72     for (i = 0; i < images.length; i++) { 
73         /* don't blindly preload all images at the beginning,
74          * but rather load them one by one, in order to get
75          * next ones faster
76          */
77         if (load(i) == 0) {
78             setTimeout("preload()", 500);
79             return;
80         }
81     }
82 }
83
84 function init() {
85     preload();
86   
87     /* retrieve GET parameters */
88     all_params = location.href.split("?")
89     if (all_params.length > 1) {
90         params = all_params[1].split("&");
91         for (i = 0; i < params.length; i++) {
92             keyvalue = params[i].split("=");
93             if (keyvalue[0] == "slideshow_pause") {
94                 slideshow_pause = keyvalue[1];
95             }
96             if (keyvalue[0] == "run_slideshow") {
97                 toggle_slideshow();
98             }
99         }
100     }
101 }
102
103 function update_sensibilities() {
104     if (current == 0) {
105         document.getElementById("b_first").disabled = true;
106         document.getElementById("b_previous").disabled = true;
107         document.getElementById("b_next").disabled = false;
108         document.getElementById("b_last").disabled = false;
109     } else if (current == images.length - 1) {
110         document.getElementById("b_first").disabled = false;
111         document.getElementById("b_previous").disabled = false;
112         document.getElementById("b_next").disabled = true;
113         document.getElementById("b_last").disabled = true;
114     } else {
115         document.getElementById("b_first").disabled = false;
116         document.getElementById("b_previous").disabled = false;
117         document.getElementById("b_next").disabled = false;
118         document.getElementById("b_last").disabled = false;
119     }
120 }
121
122 function set_cursor_(value, element) {
123
124     if (!element || !element.style) {
125         return;
126     }
127
128     element.style.cursor = value;
129
130     children = element.childNodes;
131     for (i = 0; i < children.length; i++) {
132         set_cursor_(value, children.item[i]);
133     }
134 }
135
136 function set_cursor(value) {
137     set_cursor_(value, document.getElementById('body'));
138 }
139
140 function show_current_text() {
141     /* don't show text if image not yet loaded because navigator
142      * won't refresh it during load */
143     if (images_loaded[current] == 2) {
144         eval("document.getElementById('image_counter')" +
145                      ".firstChild.data = '" + ( current + 1 ) + "/" + images.length + "'");
146         eval("document.getElementById('main_text')" +
147                      ".firstChild.data = '" + ( captions[current] || images[current] ) + "'");
148         set_cursor("default");
149     } else {
150         setTimeout("show_current_text()", 100);
151         set_cursor("wait");
152     }
153 }
154
155 function display_current() {
156     eval("document.main_img.src = images[" + current + "]");
157     show_current_text();
158     update_sensibilities();
159 }
160
161 function first() {
162     if (slideshow == 1) {
163         toggle_slideshow(true);
164     }
165     
166     current = 0;
167     display_current();
168 }
169
170 function next() {
171     if (slideshow == 1) {
172         toggle_slideshow(true);
173     }
174
175     if (current < images.length - 1) {
176         current++;
177         display_current();
178     }
179 }
180
181 function previous() {
182     if (slideshow == 1) {
183         toggle_slideshow(true);
184     }
185
186     if (current > 0) {
187         current--;
188         display_current();
189     }
190 }
191
192 function last() {
193     if (slideshow == 1) {
194         toggle_slideshow(true);
195     }
196
197     current = images.length - 1;
198     display_current();
199 }
200
201 function toggle_slideshow(now) {
202     if (slideshow == 0) {
203         document.getElementById("b_slideshow").value = "~~stop_slideshow~~";
204         slideshow = 1;
205         if (current == images.length - 1) {
206             current = -1;
207         }
208         if (now) {
209             dbg("now");
210             run_slideshow();
211         } else {
212             setTimeout("run_slideshow()", slideshow_pause * 1000);
213         }
214     } else {
215         clearTimeout(slideshow_timer);
216         document.getElementById("b_slideshow").value = "~~run_slideshow~~";
217         slideshow = 0;
218     }
219 }
220
221 function run_slideshow() {
222     if (slideshow == 0) {
223         return;
224     }
225
226     if (images_loaded[current + 1] == 2) {
227         current++;
228         display_current();
229         slideshow_timer = setTimeout("run_slideshow()", slideshow_pause * 1000);
230     } else {
231         slideshow_timer = setTimeout("run_slideshow()", 500);
232     }
233
234     if (current == images.length - 1) {
235         toggle_slideshow(true);
236     }
237 }
238 </script>
239 EOF
240
241 $head_code.sub!('~~run_slideshow~~', _('Run slideshow!'))
242 $head_code.sub!('~~stop_slideshow~~', _('Stop slideshow'))
243
244 $body_additions = <<'EOF'
245 onload="init()" id="body"
246 EOF
247
248 $button_first = '
249     <form><input type="button"
250                  onclick="first()"
251                  value="' + _('<<- First') + '"
252                  id="b_first"></form>';
253
254 $button_previous = '
255     <form><input type="button"
256                  onclick="previous()"
257                  value="' + _('<- Previous') + '"
258                  id="b_previous"></form>';
259
260 $button_next = '
261     <form><input type="button"
262                  onclick="next()"
263                  value="' + _('Next ->') + '"
264                  id="b_next"></form>';
265
266 $button_last = '
267     <form><input type="button"
268                  onclick="last()"
269                  value="' + _('Last ->>') + '"
270                  id="b_last"></form>';
271
272 $button_slideshow = '
273   <form><input type="button"
274                onclick="toggle_slideshow(true)"
275                value="' + _('Run slideshow!') + '"
276                id="b_slideshow">
277   </form>';
278
279 $image = <<'EOF'
280   <img name="main_img">
281 EOF
282
283 $image_counter_additions = <<'EOF'
284   id="image_counter"
285 EOF
286
287 $caption_additions = <<'EOF'
288   id="main_text"
289 EOF
290
291 $body_code = <<'EOF'
292   <script language="JavaScript1.1" type="text/JavaScript">
293     display_current();
294   </script>
295 EOF
296