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