js/css sharing thanks to Jean-Michel Schelcher <jm_ml schelcher.net>
authorgc <gc>
Sat, 2 Feb 2008 15:06:17 +0000 (15:06 +0000)
committergc <gc>
Sat, 2 Feb 2008 15:06:17 +0000 (15:06 +0000)
THEMES
bin/booh-backend
data/booh/themes/simple/root/booh.css [new file with mode: 0644]
data/booh/themes/simple/root/booh.js [new file with mode: 0644]
data/booh/themes/simple/root/video.png [moved from data/booh/themes/simple/video.png with 100% similarity]
data/booh/themes/simple/skeleton_image.html
data/booh/themes/simple/skeleton_index.html
data/booh/themes/simple/skeleton_thumbnails.html
lib/booh/html-merges.rb

diff --git a/THEMES b/THEMES
index 27114b7..bf463fb 100644 (file)
--- a/THEMES
+++ b/THEMES
@@ -11,7 +11,12 @@ Each theme is made of:
 - one image.html skeleton, used for fullscreen images
 
 - any number of resource files these html pages depend on
-  (images, css..)
+  (images, css..), normally they should all go in the 'root'
+  subdirectory, so that they are only copied in the root
+  directory of the final webalbum and avoid wasting too much
+  hosting space; they can be referred from the skeleton by
+  prepending ~~pathtobase~~, which will be the relative path
+  to the root directory of the final webalbum
 
 - a metadata/parameters.rb file holding information about images
   sizes that will fit the best the html pages layout
@@ -79,4 +84,3 @@ of width (thus 124 of height).
 It would be best if the screenshots would show the same contents,
 so just send me your theme if you create a new one and I'll do
 the screenshots.
-
index d33cfc3..9e2f6e2 100755 (executable)
@@ -555,6 +555,16 @@ def substitute_navigation(html, xmldir)
     end
 end
 
+def substitute_pathtobase(html, xmldir)
+    path = ''
+    location = xmldir
+    while location.parent.name == 'dir'
+        path = '../' + path
+        location = location.parent
+    end
+    html.gsub!(/~~pathtobase~~/, path)
+end
+
 def xmldir2destdir(xmldir)
     return make_dest_filename(from_utf8(File.basename(xmldir.attributes['path'])))
 end
@@ -780,7 +790,9 @@ def walk_source_dir
             if !$forgui
                 #- cleanup old images/videos, especially if this directory contained images/videos previously.
                 themestuff = Dir.entries("#{$FPATH}/themes/#{$theme}").
-                                find_all { |e| !%w(. .. skeleton_image.html skeleton_thumbnails.html skeleton_index.html metadata CVS).include?(e) }
+                                find_all { |e| !%w(. .. skeleton_image.html skeleton_thumbnails.html skeleton_index.html metadata root CVS).include?(e) }
+                themestuff_root = Dir.entries("#{$FPATH}/themes/#{$theme}/root").
+                                     find_all { |e| !%w(. .. CVS).include?(e) }
                 if $mode != 'gen_config'
                     rightful_images = [ '.htaccess' ]
                     if xmldir.attributes['thumbnails-caption']
@@ -793,7 +805,7 @@ def walk_source_dir
                         subdir = make_dest_filename(from_utf8(File.basename(child.attributes['path'])))
                         rightful_images << "thumbnails-#{subdir}.jpg"
                     }
-                    to_del = Dir.entries(dest_dir).find_all { |e| !File.directory?("#{dest_dir}/#{e}") && !rightful_images.include?(e) } - themestuff
+                    to_del = Dir.entries(dest_dir).find_all { |e| !File.directory?("#{dest_dir}/#{e}") && !rightful_images.include?(e) } - themestuff - themestuff_root
                     if to_del.size > 0
                         system("rm -f " + to_del.collect { |e| "'#{dest_dir}/#{e}'" }.join(' '))
                     end
@@ -805,6 +817,15 @@ def walk_source_dir
                         psys("cp '#{$FPATH}/themes/#{$theme}/#{entry}' '#{dest_dir}'")
                     end
                 }
+
+                #- copy any root-only resource file that goes with the theme (css, images..)
+                if xmldir.parent.name != 'dir'
+                    themestuff_root.each { |entry|
+                        if !File.exists?("#{dest_dir}/#{entry}")
+                            psys("cp '#{$FPATH}/themes/#{$theme}/root/#{entry}' '#{dest_dir}'")
+                        end
+                    }
+                end
             end
             next
         end
@@ -903,15 +924,17 @@ def walk_source_dir
 
         if !$forgui
             themestuff = Dir.entries("#{$FPATH}/themes/#{$theme}").
-                             find_all { |e| !%w(. .. skeleton_image.html skeleton_thumbnails.html skeleton_index.html metadata CVS).include?(e) }
-
+                            find_all { |e| !%w(. .. skeleton_image.html skeleton_thumbnails.html skeleton_index.html metadata root CVS).include?(e) }
+            themestuff_root = Dir.entries("#{$FPATH}/themes/#{$theme}/root").
+                                 find_all { |e| !%w(. .. CVS).include?(e) }
+            
             #- cleanup old images/videos (for when removing elements or sizes)
             all_elements = fullscreen_images.collect { |e| e[1] }.flatten.
                      concat(thumbnail_images.collect { |e| e[1] }.flatten).
                      concat(thumbnail_videos.collect { |e| e[1] }.flatten).
                      concat(videos).
                      push('.htaccess')
-            to_del = Dir.entries(dest_dir).find_all { |e| !File.directory?("#{dest_dir}/#{e}") && !all_elements.include?(e) && e !~ /^thumbnails-\w+\.jpg/ } - themestuff
+            to_del = Dir.entries(dest_dir).find_all { |e| !File.directory?("#{dest_dir}/#{e}") && !all_elements.include?(e) && e !~ /^thumbnails-\w+\.jpg/ } - themestuff - themestuff_root
             if to_del.size > 0
                 msg 3, _("\tcleaning up: #{to_del.join(', ')}")
                 system("rm -f " + to_del.collect { |e| "#{dest_dir}/#{e}" }.join(' '))
@@ -923,7 +946,16 @@ def walk_source_dir
                     psys("cp '#{$FPATH}/themes/#{$theme}/#{entry}' '#{dest_dir}'")
                 end
             }
-
+            
+            #- copy any root-only resource file that goes with the theme (css, images..)
+            if xmldir.parent.name != 'dir'
+                themestuff_root.each { |entry|
+                    if !File.exists?("#{dest_dir}/#{entry}")
+                        psys("cp '#{$FPATH}/themes/#{$theme}/root/#{entry}' '#{dest_dir}'")
+                    end
+                }
+            end
+            
             msg 3, _("\tgenerating HTML pages...")
             #- fixup max per page
             if $N_per_page && $N_per_row
@@ -1049,6 +1081,7 @@ def walk_source_dir
                             i.gsub!(/~~multiplepagesstuff~~/, mstuff.gsub('%nojs', ''))
                         end
                         substitute_html_sizes(i, sizeobj, 'thumbnails', "-#{pagecount}")
+                        substitute_pathtobase(i, xmldir)
                     end
                     ios = File.open("#{dest_dir}/thumbnails-#{size2js(sizeobj['name'])}-#{pagecount}.html", "w")
                     ios.write(final_html)
@@ -1108,6 +1141,7 @@ def walk_source_dir
                         i.gsub!(/~~indexlink~~/, $indexlink || '')
                         substitute_html_sizes(i, sizeobj, 'image', '')
                         substitute_navigation(i, xmldir)
+                        substitute_pathtobase(i, xmldir)
                     end
                     ios = File.open("#{dest_dir}/image-#{size2js(sizeobj['name'])}.html", "w")
                     ios.write(html)
@@ -1192,6 +1226,7 @@ def walk_source_dir
                 caption = xmldir.attributes['subdirs-caption']
                 i.gsub!(/~~title~~/, caption)
                 substitute_navigation(i, xmldir)
+                substitute_pathtobase(i, xmldir)
                 discover_iterations(iterations, i)
             end
             
diff --git a/data/booh/themes/simple/root/booh.css b/data/booh/themes/simple/root/booh.css
new file mode 100644 (file)
index 0000000..0f50fd7
--- /dev/null
@@ -0,0 +1,105 @@
+body {
+       background: white;
+        color: black;
+        font-family: "Bitstream Vera Sans", "Lucida Sans", Geneva, Arial, Helvetica, sans-serif;
+}
+
+a:link {
+        color: #7B7BA8;
+        text-decoration: none;
+}
+
+a:visited {
+        color: #7B7BA8;
+        text-decoration: none;
+}
+
+a:hover {
+        color: #7B7BA8;
+        text-decoration: underline;
+}
+
+input {
+        border: solid 1px;
+        background-color: #DEDAD6;
+}
+
+input:hover {
+        background-color: #E8E8E8;
+}
+
+img {
+        border: solid 1px;
+        border-color: #000000;
+}
+
+.nothing {
+       border: 0 solid black;
+}
+
+.disabled {
+        font-style: italic;
+}
+.disabled:hover {
+        background-color: #DEDAD6;
+}
+
+
+table.index {
+       width: 100%;
+       padding: 10px;
+       border: 0px solid black;
+}
+
+table.index tr td.image {
+       width: 50%;
+       text-align: right;
+       vertical-align: top;
+}
+
+table.index tr td.caption {
+       width: 50%;
+       text-align: left;
+}
+
+table.footer {
+       width: 100%;
+}
+
+table.footer tr td {
+       font-size: 0.8em;
+}
+
+table.footer tr td.left {
+       text-align: left;
+}
+
+table.footer tr td.left {
+       text-align: right;
+}
+
+table.imgnav tr td.sizes {
+       text-align: center;
+       font-size: 0.7em;
+}
+
+table.image {
+       width: 100%
+}
+
+table.image tr td {
+       text-align: center;
+}
+
+table.image tr td caption {
+       font-size: 1.1em;
+}
+
+table.image tr td caption {
+       font-size: 0.8em;
+
+}
+
+span.img_alb_nav {
+}
+
diff --git a/data/booh/themes/simple/root/booh.js b/data/booh/themes/simple/root/booh.js
new file mode 100644 (file)
index 0000000..3268972
--- /dev/null
@@ -0,0 +1,392 @@
+var images_ary = new Array();
+var images_loaded = new Array();
+var current = 0;
+var slideshow = 0;
+var slideshow_pause = null;
+var slideshow_timer = null;
+
+for (i = 0; i < images.length; i++) { 
+    /* this array will contain 0 if image not yet loaded, 1 when loading,
+     * 2 when complete */
+    images_loaded[i] = 0;
+}
+
+function dbg(t) {
+    document.getElementById('dbg_text').innerHTML += t + "\n";
+}
+
+/* load image, return 1 if image is finished loading */
+function load(i) {
+    if (images_loaded[i] == 0) {
+        images_ary[i] = new Image();
+        images_ary[i].src = images[i];
+        images_loaded[i] = 1;
+    }
+    if (images_loaded[i] == 1) {
+        if (images_ary[i].complete) {
+            images_loaded[i] = 2;
+        } else {
+            return 0;
+        }
+    }
+    return 1;
+}
+
+function getparam(key) {
+    all_params = location.href.split("#")
+    if (all_params.length > 1) {
+        params = all_params[1].split("&");
+        for (i = 0; i < params.length; i++) {
+            keyvalue = params[i].split("=");
+            if (keyvalue[0] == key) {
+                return keyvalue[1];
+            }
+        }
+    }
+    return null;
+}
+
+function loadcurrent(img) {
+    for (i = 0; i < images.length; i++) {
+        if (images[i] == img) {
+            current = i;
+            display_current();
+            return;
+        }
+    }
+    current = 0;
+    display_current();
+}
+
+function browser_href() {
+    all = location.href.split("/");
+    return all[all.length - 1];
+}
+
+/* check URL for changes; allows the URL to reflect currently showed image */
+var currentURL = '';
+function checkURL() {
+    if (currentURL == 'ignore1') {
+        // do nothing
+    } else if (currentURL == 'ignore2') {
+        currentURL = browser_href();
+    } else {
+        href = browser_href();
+        if (href != currentURL) {
+            currentURL = href;
+            img = getparam('current');
+            loadcurrent(img);
+        }
+    }
+    setTimeout("checkURL()", 50);
+}
+
+function preload() { 
+
+    /* favor current image, if user clicked on `last' or something */
+    load(current);
+
+    /* don't blindly preload all images at the beginning,
+     * but rather load them one by one, in order to get
+     * next ones faster, beginning with next to current
+     */
+    if (current + 1 < images.length && load(current + 1) == 0) {
+        setTimeout("preload()", 50);
+        return;
+    }
+    if (current - 1 >= 0 && load(current - 1) == 0) {
+        setTimeout("preload()", 50);
+        return;
+    }
+
+    for (i = current + 2; i < images.length && i <= current + 5; i++) { 
+        if (load(i) == 0) {
+            setTimeout("preload()", 50);
+            return;
+        }
+    }
+    for (i = current - 2; i >= current - 3; i--) { 
+        if (i >= 0) {
+            if (load(i) == 0) {
+                setTimeout("preload()", 50);
+                return;
+            }
+        }
+    }
+
+    setTimeout("preload()", 50);
+}
+
+function add_cookie(val) {
+    var expires = new Date(new Date().getTime() + (30 * 86400000));  // 30 days
+    document.cookie = val
+                      + '; expires=' + expires.toGMTString()
+                      + '; path=/';
+}
+
+function get_cookie(key) {
+    if (document.cookie) {
+        var index = document.cookie.indexOf(key);
+        if (index != -1) {
+            var oleft = (document.cookie.indexOf('=', index) + 1);
+            var oright = document.cookie.indexOf(';', index);
+            if (oright == -1) {
+                oright = document.cookie.length;
+            }
+            return document.cookie.substring(oleft, oright);
+        }
+    }
+    return null;
+}
+
+function init() {
+
+
+    preferred_pause = get_cookie('booh-slideshow-pause-' + dbltilda_theme);
+    if (preferred_pause != null) {
+        document.getElementById('secs').value = preferred_pause;
+    }
+
+    if (getparam('run_slideshow')) {
+        toggle_slideshow();
+    }
+
+    checkURL();
+
+    preload();
+
+    if (images.length == 1) {
+        document.getElementById("b_slideshow").disabled = true;
+        document.getElementById("b_slideshow").setAttribute("class", "disabled");
+    }
+
+    if (navigator.userAgent.indexOf('Opera') == -1) {
+        document.onkeydown = keyDownEvent;
+    }
+}
+
+function update_sensibilities() {
+    if (current == 0) {
+        document.getElementById("b_first").disabled = true;
+        document.getElementById("b_previous").disabled = true;
+        document.getElementById("b_first").setAttribute("class", "disabled");
+        document.getElementById("b_previous").setAttribute("class", "disabled");
+    } else {
+        document.getElementById("b_first").disabled = false;
+        document.getElementById("b_previous").disabled = false;
+        document.getElementById("b_first").removeAttribute("class");
+        document.getElementById("b_previous").removeAttribute("class");
+    }
+
+    if (current == images.length - 1) {
+        document.getElementById("b_next").disabled = true;
+        document.getElementById("b_last").disabled = true;
+        document.getElementById("b_next").setAttribute("class", "disabled");
+        document.getElementById("b_last").setAttribute("class", "disabled");
+    } else {
+        document.getElementById("b_next").disabled = false;
+        document.getElementById("b_last").disabled = false;
+        document.getElementById("b_next").removeAttribute("class");
+        document.getElementById("b_last").removeAttribute("class");
+    }
+}
+
+function set_cursor_(value, element) {
+
+    if (!element || !element.style) {
+        return;
+    }
+
+    element.style.cursor = value;
+
+    children = element.childNodes;
+    for (i = 0; i < children.length; i++) {
+        set_cursor_(value, children.item[i]);
+    }
+}
+
+function set_cursor(value) {
+    set_cursor_(value, document.getElementById('body'));
+    set_cursor_(value, document.getElementById('b_first'));
+    set_cursor_(value, document.getElementById('b_previous'));
+    set_cursor_(value, document.getElementById('b_next'));
+    set_cursor_(value, document.getElementById('b_last'));
+}
+
+function show_current_text() {
+    /* don't show text if image not yet loaded because navigator
+     * won't refresh it during load */
+    if (images_loaded[current] == 2) {
+        document.getElementById('image_counter').innerHTML = ( current + 1 ) + "/" + images.length;
+        document.getElementById('main_text').innerHTML = captions[current];
+        for (i = 0; i < other_sizes.length; i++) { 
+            if (other_sizes[i] == "original") {
+                document.getElementById('link' + other_sizes[i]).href = eval("images_" + other_sizes[i] + "[current]");
+            } else {
+                document.getElementById('link' + other_sizes[i]).href = 'image-' + other_sizes[i] + '.html#current=' + eval("images_" + other_sizes[i] + "[current]");
+            }
+        }
+        document.getElementById('thumbnails').href = 'thumbnails-' + dbltilda_current_size + '-' + thumbnailspages[current] + '.html#' + images[current];
+        set_cursor("default");
+    } else {
+        setTimeout("show_current_text()", 50);
+        set_cursor("wait");
+    }
+}
+
+function display_current() {
+    document.main_img.src = images[current];
+    oldhref = browser_href();
+    newhref = 'image-' + dbltilda_current_size + '.html#current=' + images[current];
+    if (oldhref != newhref) {
+        currentURL = 'ignore1';
+        location.href = newhref;
+        currentURL = 'ignore2';
+    }
+    show_current_text();
+    update_sensibilities();
+}
+
+function first() {
+    if (slideshow == 1) {
+        toggle_slideshow(true);
+    }
+    
+    current = 0;
+    display_current();
+}
+
+function next() {
+    if (slideshow == 1) {
+        toggle_slideshow(true);
+    }
+
+    if (current < images.length - 1) {
+        current++;
+        display_current();
+    }
+}
+
+function next10() {
+    if (slideshow == 1) {
+        toggle_slideshow(true);
+    }
+
+    if (current < images.length - 11) {
+        current += 10;
+    } else {
+        current = images.length - 1;
+    }
+    display_current();
+}
+
+function previous() {
+    if (slideshow == 1) {
+        toggle_slideshow(true);
+    }
+
+    if (current > 0) {
+        current--;
+        display_current();
+    }
+}
+
+function previous10() {
+    if (slideshow == 1) {
+        toggle_slideshow(true);
+    }
+
+    if (current > 10) {
+        current -= 10;
+    } else {
+        current = 0;
+    }
+    display_current();
+}
+
+function last() {
+    if (slideshow == 1) {
+        toggle_slideshow(true);
+    }
+
+    current = images.length - 1;
+    display_current();
+}
+
+function keyDownEvent(key) {
+    if (!key) {
+        key = event;
+        key.which = key.keyCode;
+    }
+    if (key.altKey || key.ctrlKey || key.shiftKey) {
+        return;
+    }
+    switch (key.which) {
+      case 36: // home
+        first();
+        break;
+      case 35: // end
+        last();
+        break;
+      case 37: // left
+        previous();
+        break;
+      case 39: // right
+        next();
+        break;
+      case 38: // up
+        previous10();
+        break;
+      case 40: // down
+        next10();
+        break;
+    }
+}
+
+function toggle_slideshow(now) {
+    if (slideshow == 0) {
+        slideshow_pause = document.getElementById('secs').value;
+        add_cookie('booh-slideshow-pause-' + dbltilda_theme + '=' + slideshow_pause)
+        document.getElementById("b_slideshow").value = dbltilda_stop_slideshow;
+        slideshow = 1;
+        if (current == images.length - 1) {
+            current = -1;
+        }
+        if (now) {
+            run_slideshow();
+        } else {
+            setTimeout("run_slideshow()", slideshow_pause * 1000);
+        }
+    } else {
+        clearTimeout(slideshow_timer);
+        document.getElementById("b_slideshow").value = dbltilda_run_slideshow;
+        slideshow = 0;
+    }
+}
+
+function run_slideshow() {
+    if (slideshow == 0) {
+        return;
+    }
+
+    if (images_loaded[current + 1] == 2) {
+        current++;
+        display_current();
+        slideshow_timer = setTimeout("run_slideshow()", slideshow_pause * 1000);
+    } else {
+        slideshow_timer = setTimeout("run_slideshow()", 50);
+    }
+
+    if (current == images.length - 1) {
+        toggle_slideshow(true);
+    }
+}
+
+function set_preferred_size(val) {
+    var expires = new Date(new Date().getTime() + (30 * 86400000));  // 30 days
+    document.cookie = 'booh-preferred-size-' + dbltilda_theme + '='
+                      + val
+                      + '; expires=' + expires.toGMTString()
+                      + '; path=/';
+}
+
index 960ad68..9b67d91 100644 (file)
@@ -6,97 +6,56 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <meta name="author" content="'Simple' theme - Guillaume Cottenceau"/>
     ~~~image_head_code~~~
-    <style type="text/css" media="screen">
-    <!--
-body {
-        background-color: #ffffff;
-        color: #000000;
-        font-family: "Bitstream Vera Sans", "Lucida Sans", Geneva, Arial, Helvetica, sans-serif;
-}
-
-a:link {
-        color: #7B7BA8;
-        text-decoration: none;
-}
-
-a:visited {
-        color: #7B7BA8;
-        text-decoration: none;
-}
-
-a:hover {
-        color: #7B7BA8;
-        text-decoration: underline;
-}
-
-img {
-        border: solid 1px;
-        border-color: #000000;
-}
-
-input {
-        border: solid 1px;
-        background-color: #DEDAD6;
-}
-input:hover {
-        background-color: #E8E8E8;
-}
-.disabled {
-        font-style: italic;
-}
-.disabled:hover {
-        background-color: #DEDAD6;
-}
-    -->
-    </style>
+    <script type="text/javascript" src="~~pathtobase~~booh.js"></script>
+    <link rel="stylesheet" type="text/css" href="~~pathtobase~~booh.css" media="screen" />
 </head>
 
-<body bgcolor="#FFFFFF" ~~~body_additions~~~>
+<body ~~~body_additions~~~>
 
-<table width="100%">
-<tr>
+<table class='imgnav'>
+  <tr>
     <td width="10%">&nbsp;</td>
     <td width="1%">~~~button_first~~~</td>
     <td width="3%">&nbsp;</td>
     <td width="1%">~~~button_previous~~~</td>
-    <td align="center"><font size="-2">~~sizes~~ | ~~</font></td>
+    <td class='sizes'>~~sizes~~ | ~~</td>
     <td width="1%">~~~button_next~~~</td>
     <td width="3%">&nbsp;</td>
     <td width="1%">~~~button_last~~~</td>
     <td width="10%">&nbsp;</td>
-</tr>
+  </tr>
 </table>
-<table width="100%">
+<table class='image'>
 <!-- <p id="dbg_text">&nbsp;</p> -->
-<tr>
-    <td align="center" colspan="9">
+  <tr>
+    <td>
         ~~~image~~~
     </td>
-</tr>
-<tr>
-    <td align="center" colspan="9">
-        <font size="+1" ~~~caption_additions~~~>&nbsp;</font>
-        <font size="-2" ~~~image_counter_additions~~~>&nbsp;</font>
+  </tr>
+  <tr>
+    <td>
+      <span class='caption' ~~~caption_additions~~~>&nbsp;</span>
+      <span class='counter' ~~~image_counter_additions~~~>&nbsp;</span>
     </td>
-</tr>
+  </tr>
 
 ~~~body_code~~~
 
-<tr>
-    <td colspan="9" align="center">
+  <tr>
+    <td>
         ~~~button_slideshow~~~
         ~~~pause_slideshow~~~
-        <br/>
-        <font size="-1">~~previous_album~~ ~~ifprevious_album?~~|~~fi~~ ~~thumbnails~~ ~~ifnext_album?~~|~~fi~~ ~~next_album~~</font>
+        <br />
+        <span class='img_alb_nav'>~~previous_album~~ ~~ifprevious_album?~~|~~fi~~ ~~thumbnails~~ ~~ifnext_album?~~|~~fi~~ ~~next_album~~</span>
     </td>
-</tr>
+  </tr>
 </table>
 
-<table width="100%" cellpadding="0" border="0">
-<tr>
-  <td align="left"> <font size="-1"><i>~~indexlink~~</i></font></td>
-  <td align="right"><font size="-1"><i>~~madewith~~</i> </font></td>
-</tr>
+<table class='footer'>
+  <tr>
+    <td class='left'>~~indexlink~~</td>
+    <td class='right'>~~madewith~~</td>
+  </tr>
 </table>  
 
 </body>
index 079655f..fc3ed80 100644 (file)
@@ -6,65 +6,33 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <meta name="author" content="'Simple' theme - Guillaume Cottenceau"/>
     ~~~index_head_code~~~
-    <style type="text/css" media="screen">
-    <!--
-body {
-        background-color: #ffffff;
-        color: #000000;
-        font-family: "Bitstream Vera Sans", "Lucida Sans", Geneva, Arial, Helvetica, sans-serif;
-}
-
-a:link {
-        color: #7B7BA8;
-        text-decoration: none;
-}
-
-a:visited {
-        color: #7B7BA8;
-        text-decoration: none;
-}
-
-a:hover {
-        color: #7B7BA8;
-        text-decoration: underline;
-}
-
-input {
-        border: solid 1px;
-}
-
-img {
-        border: solid 1px;
-        border-color: #000000;
-}
-    -->
-    </style>
+    <link rel="stylesheet" type="text/css" href="~~pathtobase~~booh.css" media="screen" />
 </head>
 
-<body bgcolor="#FFFFFF" ~~~body_additions~~~>
+<body ~~~body_additions~~~>
 
 ~~ifnavigation?~~<p>~~navigation~~</p>~~fi~~
 
 <p align="center" id="title"><font size="+3">~~title~~</font></p>
 
-<table width="100%" cellpadding="10" border="0">
+<table class='index'>
 ~~iterate1_open~~
 <tr>
-    <td width="50%" align="right" valign="top">
+    <td class='image'>
        ~~image_iteration~~
     </td>
-    <td width="50%" align="left">
+    <td class='caption'>
        <p>~~caption_iteration~~</p>
     </td>
 </tr>
 ~~iterate1_close~~
 </table>
 
-<table width="100%" cellpadding="0" border="0">
-<tr>
-  <td align="left"> <font size="-1"><i>~~indexlink~~</i></font></td>
-  <td align="right"><font size="-1"><i>~~madewith~~</i> </font></td>
-</tr>
+<table class='footer'>
+  <tr>
+    <td class='left'>~~indexlink~~</td>
+    <td class='right'>~~madewith~~</td>
+  </tr>
 </table>  
 
 </body>
index ace2dab..12646be 100644 (file)
@@ -6,45 +6,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <meta name="author" content="'Simple' theme - Guillaume Cottenceau"/>
     ~~~thumbnails_head_code~~~
-    <style type="text/css" media="screen">
-    <!--
-body {
-        background-color: #ffffff;
-        color: #000000;
-        font-family: "Bitstream Vera Sans", "Lucida Sans", Geneva, Arial, Helvetica, sans-serif;
-}
-
-a:link {
-        color: #7B7BA8;
-        text-decoration: none;
-}
-
-a:visited {
-        color: #7B7BA8;
-        text-decoration: none;
-}
-
-a:hover {
-        color: #7B7BA8;
-        text-decoration: underline;
-}
-
-input {
-        border: solid 1px;
-}
-
-img {
-        border: solid 1px;
-        border-color: #000000;
-}
-.nothing {
-        border: solid 0px;
-}
-    -->
-    </style>
+    <link rel="stylesheet" type="text/css" href="~~pathtobase~~booh.css" media="screen" />
 </head>
 
-<body bgcolor="#FFFFFF">
+<body>
+
+~~ifnavigation?~~<p>~~navigation~~</p>~~fi~~
 
 <p align="center">
     <font size="+3">~~title~~</font>
@@ -63,7 +30,7 @@ img {
     ~~iterate2_open_maxN~~
     <td align="center" valign="top" ~~colspan~~>
        ~~image_iteration~~
-       <p>~~ifvideo?~~<img src="video.png" alt="video" class="nothing"/>~~fi~~ ~~caption_iteration~~</p>
+       <p>~~ifvideo?~~<img src="~~pathtobase~~video.png" alt="video" class="nothing"/>~~fi~~ ~~caption_iteration~~</p>
     </td>
     ~~iterate2_close~~
 </tr>
@@ -74,11 +41,11 @@ img {
 
 <p align="center">~~previous_album~~ ~~ifprevious_album?~~|~~fi~~ ~~return_to_albums~~ ~~ifnext_album?~~|~~fi~~ ~~next_album~~</p>
 
-<table width="100%" cellpadding="0" border="0">
-<tr>
-  <td align="left"> <font size="-1"><i>~~indexlink~~</i></font></td>
-  <td align="right"><font size="-1"><i>~~madewith~~</i> </font></td>
-</tr>
+<table class='footer'>
+  <tr>
+    <td class='left'>~~indexlink~~</td>
+    <td class='right'>~~madewith~~</td>
+  </tr>
 </table>  
 
 </body>
index 01f1c20..ee89dd8 100644 (file)
@@ -31,401 +31,16 @@ $image_head_code = '<meta name="generator" content="Booh-' + $VERSION + <<'EOF'
  http://booh.org/"/>
 
 <script language="JavaScript1.1" type="text/JavaScript">
-var images = new Array(~~images~~);
+images = new Array(~~images~~);
 ~~other_images~~
-var thumbnailspages = new Array(~~thumbnailspages~~);
-var other_sizes = new Array(~~other_sizes~~);
-var captions = new Array(~~captions~~);
-
-var images_ary = new Array();
-var images_loaded = new Array();
-var current = 0;
-var slideshow = 0;
-var slideshow_pause = null;
-var slideshow_timer = null;
-
-for (i = 0; i < images.length; i++) { 
-    /* this array will contain 0 if image not yet loaded, 1 when loading,
-     * 2 when complete */
-    images_loaded[i] = 0;
-}
-
-function dbg(t) {
-    document.getElementById('dbg_text').innerHTML += t + "\n";
-}
-
-/* load image, return 1 if image is finished loading */
-function load(i) {
-    if (images_loaded[i] == 0) {
-        images_ary[i] = new Image();
-        images_ary[i].src = images[i];
-        images_loaded[i] = 1;
-    }
-    if (images_loaded[i] == 1) {
-        if (images_ary[i].complete) {
-            images_loaded[i] = 2;
-        } else {
-            return 0;
-        }
-    }
-    return 1;
-}
-
-function getparam(key) {
-    all_params = location.href.split("#")
-    if (all_params.length > 1) {
-        params = all_params[1].split("&");
-        for (i = 0; i < params.length; i++) {
-            keyvalue = params[i].split("=");
-            if (keyvalue[0] == key) {
-                return keyvalue[1];
-            }
-        }
-    }
-    return null;
-}
-
-function loadcurrent(img) {
-    for (i = 0; i < images.length; i++) {
-        if (images[i] == img) {
-            current = i;
-            display_current();
-            return;
-        }
-    }
-    current = 0;
-    display_current();
-}
-
-function browser_href() {
-    all = location.href.split("/");
-    return all[all.length - 1];
-}
-
-/* check URL for changes; allows the URL to reflect currently showed image */
-var currentURL = '';
-function checkURL() {
-    if (currentURL == 'ignore1') {
-        // do nothing
-    } else if (currentURL == 'ignore2') {
-        currentURL = browser_href();
-    } else {
-        href = browser_href();
-        if (href != currentURL) {
-            currentURL = href;
-            img = getparam('current');
-            loadcurrent(img);
-        }
-    }
-    setTimeout("checkURL()", 50);
-}
-
-function preload() { 
-
-    /* favor current image, if user clicked on `last' or something */
-    load(current);
-
-    /* don't blindly preload all images at the beginning,
-     * but rather load them one by one, in order to get
-     * next ones faster, beginning with next to current
-     */
-    if (current + 1 < images.length && load(current + 1) == 0) {
-        setTimeout("preload()", 50);
-        return;
-    }
-    if (current - 1 >= 0 && load(current - 1) == 0) {
-        setTimeout("preload()", 50);
-        return;
-    }
-
-    for (i = current + 2; i < images.length && i <= current + 5; i++) { 
-        if (load(i) == 0) {
-            setTimeout("preload()", 50);
-            return;
-        }
-    }
-    for (i = current - 2; i >= current - 3; i--) { 
-        if (i >= 0) {
-            if (load(i) == 0) {
-                setTimeout("preload()", 50);
-                return;
-            }
-        }
-    }
-
-    setTimeout("preload()", 50);
-}
-
-function add_cookie(val) {
-    var expires = new Date(new Date().getTime() + (30 * 86400000));  // 30 days
-    document.cookie = val
-                      + '; expires=' + expires.toGMTString()
-                      + '; path=/';
-}
-
-function get_cookie(key) {
-    if (document.cookie) {
-        var index = document.cookie.indexOf(key);
-        if (index != -1) {
-            var oleft = document.cookie.indexOf('=', index) + 1;
-            var oright = document.cookie.indexOf(';', index);
-            if (oright == -1) {
-                oright = document.cookie.length;
-            }
-            return document.cookie.substring(oleft, oright);
-        }
-    }
-    return null;
-}
-
-function init() {
-
-    preferred_pause = get_cookie('booh-slideshow-pause-~~theme~~');
-    if (preferred_pause != null) {
-        document.getElementById('secs').value = preferred_pause;
-    }
-
-    if (getparam('run_slideshow')) {
-        toggle_slideshow();
-    }
-
-    checkURL();
-
-    preload();
-    if (images.length == 1) {
-        document.getElementById("b_slideshow").disabled = true;
-        document.getElementById("b_slideshow").setAttribute("class", "disabled");
-    }
-
-    if (navigator.userAgent.indexOf('Opera') == -1) {
-        document.onkeydown = keyDownEvent;
-    }
-}
-
-function update_sensibilities() {
-    if (current == 0) {
-        document.getElementById("b_first").disabled = true;
-        document.getElementById("b_previous").disabled = true;
-        document.getElementById("b_first").setAttribute("class", "disabled");
-        document.getElementById("b_previous").setAttribute("class", "disabled");
-    } else {
-        document.getElementById("b_first").disabled = false;
-        document.getElementById("b_previous").disabled = false;
-        document.getElementById("b_first").removeAttribute("class");
-        document.getElementById("b_previous").removeAttribute("class");
-    }
-
-    if (current == images.length - 1) {
-        document.getElementById("b_next").disabled = true;
-        document.getElementById("b_last").disabled = true;
-        document.getElementById("b_next").setAttribute("class", "disabled");
-        document.getElementById("b_last").setAttribute("class", "disabled");
-    } else {
-        document.getElementById("b_next").disabled = false;
-        document.getElementById("b_last").disabled = false;
-        document.getElementById("b_next").removeAttribute("class");
-        document.getElementById("b_last").removeAttribute("class");
-    }
-}
-
-function set_cursor_(value, element) {
-
-    if (!element || !element.style) {
-        return;
-    }
-
-    element.style.cursor = value;
-
-    children = element.childNodes;
-    for (i = 0; i < children.length; i++) {
-        set_cursor_(value, children.item[i]);
-    }
-}
-
-function set_cursor(value) {
-    set_cursor_(value, document.getElementById('body'));
-    set_cursor_(value, document.getElementById('b_first'));
-    set_cursor_(value, document.getElementById('b_previous'));
-    set_cursor_(value, document.getElementById('b_next'));
-    set_cursor_(value, document.getElementById('b_last'));
-}
-
-function show_current_text() {
-    /* don't show text if image not yet loaded because navigator
-     * won't refresh it during load */
-    if (images_loaded[current] == 2) {
-        document.getElementById('image_counter').innerHTML = ( current + 1 ) + "/" + images.length;
-        document.getElementById('main_text').innerHTML = captions[current];
-        for (i = 0; i < other_sizes.length; i++) { 
-            if (other_sizes[i] == "original") {
-                document.getElementById('link' + other_sizes[i]).href = eval("images_" + other_sizes[i] + "[current]");
-            } else {
-                document.getElementById('link' + other_sizes[i]).href = 'image-' + other_sizes[i] + '.html#current=' + eval("images_" + other_sizes[i] + "[current]");
-            }
-        }
-        document.getElementById('thumbnails').href = 'thumbnails-~~current_size~~-' + thumbnailspages[current] + '.html#' + images[current];
-        set_cursor("default");
-    } else {
-        setTimeout("show_current_text()", 50);
-        set_cursor("wait");
-    }
-}
-
-function display_current() {
-    document.main_img.src = images[current];
-    oldhref = browser_href();
-    newhref = 'image-~~current_size~~.html#current=' + images[current];
-    if (oldhref != newhref) {
-        currentURL = 'ignore1';
-        location.href = newhref;
-        currentURL = 'ignore2';
-    }
-    show_current_text();
-    update_sensibilities();
-}
-
-function first() {
-    if (slideshow == 1) {
-        toggle_slideshow(true);
-    }
-    
-    current = 0;
-    display_current();
-}
-
-function next() {
-    if (slideshow == 1) {
-        toggle_slideshow(true);
-    }
-
-    if (current < images.length - 1) {
-        current++;
-        display_current();
-    }
-}
-
-function next10() {
-    if (slideshow == 1) {
-        toggle_slideshow(true);
-    }
-
-    if (current < images.length - 11) {
-        current += 10;
-    } else {
-        current = images.length - 1;
-    }
-    display_current();
-}
-
-function previous() {
-    if (slideshow == 1) {
-        toggle_slideshow(true);
-    }
-
-    if (current > 0) {
-        current--;
-        display_current();
-    }
-}
-
-function previous10() {
-    if (slideshow == 1) {
-        toggle_slideshow(true);
-    }
-
-    if (current > 10) {
-        current -= 10;
-    } else {
-        current = 0;
-    }
-    display_current();
-}
-
-function last() {
-    if (slideshow == 1) {
-        toggle_slideshow(true);
-    }
-
-    current = images.length - 1;
-    display_current();
-}
-
-function keyDownEvent(key) {
-    if (!key) {
-        key = event;
-        key.which = key.keyCode;
-    }
-    if (key.altKey || key.ctrlKey || key.shiftKey) {
-        return;
-    }
-    switch (key.which) {
-      case 36: // home
-        first();
-        break;
-      case 35: // end
-        last();
-        break;
-      case 37: // left
-        previous();
-        break;
-      case 39: // right
-        next();
-        break;
-      case 38: // up
-        previous10();
-        break;
-      case 40: // down
-        next10();
-        break;
-    }
-}
-
-function toggle_slideshow(now) {
-    if (slideshow == 0) {
-        slideshow_pause = document.getElementById('secs').value;
-        add_cookie('booh-slideshow-pause-~~theme~~=' + slideshow_pause)
-        document.getElementById("b_slideshow").value = "~~stop_slideshow~~";
-        slideshow = 1;
-        if (current == images.length - 1) {
-            current = -1;
-        }
-        if (now) {
-            run_slideshow();
-        } else {
-            setTimeout("run_slideshow()", slideshow_pause * 1000);
-        }
-    } else {
-        clearTimeout(slideshow_timer);
-        document.getElementById("b_slideshow").value = "~~run_slideshow~~";
-        slideshow = 0;
-    }
-}
-
-function run_slideshow() {
-    if (slideshow == 0) {
-        return;
-    }
-
-    if (images_loaded[current + 1] == 2) {
-        current++;
-        display_current();
-        slideshow_timer = setTimeout("run_slideshow()", slideshow_pause * 1000);
-    } else {
-        slideshow_timer = setTimeout("run_slideshow()", 50);
-    }
-
-    if (current == images.length - 1) {
-        toggle_slideshow(true);
-    }
-}
-
-function set_preferred_size(val) {
-    var expires = new Date(new Date().getTime() + (30 * 86400000));  // 30 days
-    document.cookie = 'booh-preferred-size-~~theme~~='
-                      + val
-                      + '; expires=' + expires.toGMTString()
-                      + '; path=/';
-}
+thumbnailspages = new Array(~~thumbnailspages~~);
+other_sizes = new Array(~~other_sizes~~);
+captions = new Array(~~captions~~);
+
+dbltilda_current_size = '~~current_size~~';
+dbltilda_theme = '~~theme~~';
+dbltilda_stop_slideshow = '~~stop_slideshow~~';
+dbltilda_run_slideshow = '~~run_slideshow~~';
 </script>
 EOF