[bknr-cvs] hans changed trunk/projects/quickhoney/ - bknr-cvs@common-lisp.net - mailman3.common-lisp.net

25 Aug 2008

Revision: 3732
Author: hans
URL: http://bknr.net/trac/changeset/3732
Improve button display dynamics.
Correct some element positions.
U   trunk/projects/quickhoney/src/handlers.lisp
U   trunk/projects/quickhoney/website/static/javascript.js
U   trunk/projects/quickhoney/website/static/styles.css
U   trunk/projects/quickhoney/website/templates/index.xml
Modified: trunk/projects/quickhoney/src/handlers.lisp
===================================================================

--- trunk/projects/quickhoney/src/handlers.lisp	2008-08-22 23:14:51 UTC (rev 3731)
+++ trunk/projects/quickhoney/src/handlers.lisp	2008-08-25 01:24:05 UTC (rev 3732)
@@ -459,7 +459,9 @@
   (:method ((item quickhoney-news-item))
     (encode-object-element "type" "news")
     (encode-object-element "title" (quickhoney-news-item-title item))
-    (encode-object-element "text" (quickhoney-news-item-text item))))
+    (encode-object-element "text" (quickhoney-news-item-text item))
+    (encode-object-element "width" (store-image-width item))
+    (encode-object-element "height" (store-image-height item))))
(defmethod handle-object ((handler json-news-handler) (channel rss-channel))
   (with-json-response ()
Modified: trunk/projects/quickhoney/website/static/javascript.js
===================================================================
--- trunk/projects/quickhoney/website/static/javascript.js	2008-08-22 23:14:51 UTC (rev 3731)
+++ trunk/projects/quickhoney/website/static/javascript.js	2008-08-25 01:24:05 UTC (rev 3732)
@@ -6,6 +6,8 @@
/* directory definitions */
+var home_buttons = ['pixel', 'vector', 'news', 'shop'];
+
 var subcategories = {
     pixel: ['birdview', 'parts', 'icons', 'editorial', 'animation', 'smallworld'],
     vector: ['portraits', 'celebrities', 'blackwhite', 'icons', 'editorial', 'nudes']
@@ -231,7 +233,7 @@
     return result;
 }
-function make_upload_item(item)
+function make_upload_item(item, revealer)
 {
     item.category = (findValue(item.keywords, 'pixel') == -1) ? 'vector' : 'pixel';
     item.subcategory = intersection(item.keywords, subcategories[item.category])[0];
@@ -240,10 +242,10 @@
                       onclick: function () { jump_to(item.category + '/' + item.subcategory + '/' + item.name) } };
     return DIV({ 'class': 'newsentry autonews news_' + item.category },
                A(link_dest,
-                 IMG({ src: "/image/" + item.name + '/cutout-button,,' + color + ',98,98,4,' + item.category,
-                       style: 'visibility: hidden', 
-                       width: 98, height: 98,
-                       onload: 'reveal_image(this)' })),
+                 revealer.IMG({ src: "/image/" + item.name + '/cutout-button,,' + color + ',98,98,4,' + item.category,
+                                style: 'visibility: hidden', 
+                                width: 98, height: 98,
+                                onload: 'reveal_image(this)' })),
                DIV(null,
                    H1(null, item.name),
                    item.date, ' by ', item.owner, ' | ',
@@ -252,12 +254,12 @@
                    item.description));
 }
-function make_news_item(item)
+function make_news_item(item, revealer)
 {
     return DIV({ 'class': 'newsentry' },
-               IMG({ src: "/image/" + item.name + '/news-article-cutout',
-                     style: 'visibility: hidden', 
-                     onload: 'reveal_image(this)' }),
+               revealer.IMG({ src: "/image/" + item.name + '/news-article-cutout',
+                              style: 'visibility: hidden',
+                              onload: 'reveal_image(this)' }),
                DIV(null,
                    H1(null, item.title),
                    item.date, ' by ', item.owner, ' | ',
@@ -269,12 +271,13 @@
 function load_news(data)
 {
     try {
+        var revealer = new ImageGroupRevealer(function () { hide_cue(); $('newsentries').style.visibility = 'inherit' });
         if (data.items.length > max_news_items) {
             data.items.length = max_news_items;
         }
         replaceChildNodes('newsentries',
                           map(function (item) {
-                                  return [ ((item.type == 'upload') ? make_upload_item : make_news_item)(item),
+                                  return [ ((item.type == 'upload') ? make_upload_item : make_news_item)(item, revealer),
                                            DIV({ 'class': 'news_sep' }) ];
                               }, data.items));
         $('archive-navigation').style.visibility = 'inherit';
@@ -303,7 +306,8 @@
     }
if (month || !year) {
-        replaceChildNodes('newsentries');
+        show_cue('loading news');
+        $('newsentries').style.visibility = 'hidden';
         loadJSONDoc('/json-news/quickhoney' + (month ? ('?month=' + subpath) : ''))
             .addCallbacks(load_news, alert);
     }
@@ -351,7 +355,6 @@
 var query_result = [];
 var query_result_pages = [];
 var query_position = 0;
-var wait_count = 0;
 var reload_query = false;
function display_query_result() {
@@ -377,15 +380,30 @@
     display_path();
 }
-function check_query_result() {
+var display_cue = false;
+var wait_count = 0;
-    if (query_result.length == 0) {
-        wait_count++;
-        $("cue").innerHTML = 'query database ' + "-\|/".charAt(wait_count % 4);
-        setTimeout("check_query_result()", 250);
+function animate_cue() {
+
+    if (display_cue) {
+        $("cue").innerHTML = display_cue + ' ' + "-\|/".charAt(wait_count++ % 4);
+        setTimeout("animate_cue()", 100);
     }
 }
+function show_cue(text) {
+    $("cue").style.visibility = 'visible';
+    $('footer').style.visibility = 'hidden';
+    display_cue = text;
+    animate_cue();
+}
+
+function hide_cue() {
+    $("cue").style.visibility = 'hidden';
+    $('footer').style.visibility = 'inherit';
+    display_cue = false;
+}
+
 var db_cache = {};
function process_query_result(key, json_result) {
@@ -408,9 +426,8 @@
     }
debug('got ', query_result.length.toString(), ' images');
-    $("cue").style.visibility = 'hidden';
     display_query_result();
-    wait_count = 0;
+    hide_cue();
 }
function query_imagedb(directory, subdirectory, force) {
@@ -429,12 +446,9 @@
         process_query_result(key, db_cache[key]);
} else {
-	$("cue").style.visibility = 'visible';
-
+	show_cue('querying database');
    loadJSONDoc("/json-image-query/" + key)
             .addCallbacks(partial(process_query_result, key), alert);
-
-	check_query_result();
     }
 }
@@ -446,7 +460,7 @@
 }
var pages = {
-    home: new Page('953cfd'),
+    home: new Page('953cfd', function() { current_directory = 'home'; shuffle_button_images() }),
     pixel: new Page('ff00ff',
                     partial(directory, 'pixel')),
     vector: new Page('00ccff',
@@ -624,13 +638,16 @@
 function shuffle_button_images(category) {
     if (!category || category == current_directory) {
         try {
+            $('home_pixel').animator.reset();
             map(function (directory) {
                     var id = 'home_' + directory;
                     $(id).style.visibility = 'hidden';
                     $(id).src = random_button_image('home', directory, 318, 208, directory);
-                }, ['pixel', 'vector', 'news', 'shop']);
+                }, home_buttons);
if (subcategories[current_directory]) {
+                $('button0').animator.reset();
+                var buttons_loaded = 0;
                 var i = 0;
                 map(function (subdirectory_name) {
                         var id = 'button' + i++;
@@ -646,12 +663,57 @@
     }
 }
+function ImageLoadAnimator (images) {
+
+    this.images = images;
+    this.reset = function () {
+        show_cue('loading images');
+        this.revealer && this.revealer.cancel();
+        this.loaded = 0;
+    }
+
+    function reveal_images(animator, images, n) {
+        try {
+            $(images[n]).style.visibility = 'inherit';
+            if (++n != images.length) {
+                animator.revealer = callLater(0.1, reveal_images, animator, images, n);
+            } else {
+                animator.loaded = 0;
+            }
+        }
+        catch (e) { alert(e.message); }
+    }
+
+    this.imageLoaded = function () {
+        if (++this.loaded == this.images.length) {
+            hide_cue();
+            reveal_images(this, this.images, 0);
+        }
+    }
+    var animator = this;
+    map(function (image) {
+            $(image).animator = animator;
+            $(image).reveal = function (image) { image.animator.imageLoaded() }
+        }, images);
+}
+
+function seq(start, end) {
+    var retval = [];
+    for (var i = start; i < end; i++) {
+        retval.push(i);
+    }
+    return retval;
+}
+
 function load_button_images() {
map(function (button) {
             button.style.visibility = 'hidden';
         }, getElementsByTagAndClassName('img', 'button-image'));
+    new ImageLoadAnimator(map(partial(operator['add'], 'button'), seq(0, 6)));
+    new ImageLoadAnimator(map(partial(operator['add'], 'home_'), home_buttons));
+
     loadJSONDoc('/json-buttons'
                 + '/home/pixel,vector,news,shop'
                 + '/pixel/' + subcategories['pixel'].join(',')
@@ -811,7 +873,12 @@
 }
function reveal_image(image) {
-    image.style.visibility = 'inherit';
+    /* log('reveal_image ' + image.src + ' reveal ' + image.reveal); */
+    if (image.reveal) {
+        image.reveal(image);
+    } else {
+        image.style.visibility = 'inherit';
+    }
 }
function display_thumbnail_page() {
@@ -1093,9 +1160,11 @@
load_button_images();
     loadJSONDoc('/json-news-archive/quickhoney').addCallbacks(initialize_news_archive, alert);
-    
-    jump_to(((document.location.href + "#").split("#")[1]) || "home");
+    if (!document.location.href.match(/#/)) {
+        document.location.href += '#home';
+    }
+
     poll_path();
 }
@@ -1334,9 +1403,40 @@
     return '/image/' + name + '/color,ff00ff,' + pages[current_directory].link_color;
 }
-function make_image_action_button(name, action, height)
+function IMG$(obj) {
+    obj.style = 'visibility: hidden';
+    obj.onload = 'reveal_image(this)';
+    return IMG(obj);
+}
+
+function ImageGroupRevealer (done_callback) {
+
+    this.images = [];
+    this.loaded = 0;
+    this.done_callback = done_callback;
+
+    this.IMG = function(obj) {
+        var image = IMG$(obj);
+        image.revealer = this;
+        image.reveal = function (image) { image.revealer.imageLoaded() }
+        this.images.push(image);
+        return image;
+    }
+    this.imageLoaded = function () {
+        if (++this.loaded == this.images.length) {
+            if (this.done_callback) {
+                this.done_callback();
+            }
+            map(function (image) {
+                    image.style.visibility = 'inherit';
+                }, this.images);
+        }
+    }
+}
+
+function make_image_action_button(name, action, height, revealer)
 {
-    var div = DIV(null, IMG({ src: recolored_image_path(name), width: 127, height: height }));
+    var div = DIV(null, revealer.IMG({ src: recolored_image_path(name), width: 127, height: height }));
     div.onclick = function() { action(); return false; };
     return div;
 }
@@ -1346,20 +1446,21 @@
     var buttons = [];
     var buyable = false;
     var height = 23;
+    var revealer = new ImageGroupRevealer();
     map(function (keyword) {
             if (current_image.keywords[keyword]) {
                 buyable = true;
                 height += 22;
-                buttons.push(make_image_action_button(keyword, partial(make_buy_form, keyword), 22));
+                buttons.push(make_image_action_button(keyword, partial(make_buy_form, keyword), 22, revealer));
             }
         }, ['buy-file', 'buy-print', 'buy-t-shirt']);
-    buttons.push(make_image_action_button('hey', make_hey_form, 23));
+    buttons.push(make_image_action_button('hey', make_hey_form, 23, revealer));
     replaceChildNodes('image_action_buttons', buttons);
     if (buyable) {
-        appendChildNodes('image_action_buttons', IMG({ id: 'buy', src: recolored_image_path('buy'), width: 37, height: 22}));
-        appendChildNodes('image_action_buttons', IMG({ id: 'buy-top', src: recolored_image_path('buy-top'), width: 90, height: 1}));
+        appendChildNodes('image_action_buttons', revealer.IMG({ id: 'buy', src: recolored_image_path('buy'), width: 37, height: 22}));
+        appendChildNodes('image_action_buttons', revealer.IMG({ id: 'buy-top', src: recolored_image_path('buy-top'), width: 90, height: 1}));
     }
-    appendChildNodes('image_action_buttons', IMG({ id: 'buy-right-line', src: recolored_image_path('buy-right-line'), width: 1, height: height}));
+    appendChildNodes('image_action_buttons', revealer.IMG({ id: 'buy-right-line', src: recolored_image_path('buy-right-line'), width: 1, height: height}));
     var animator = new YAHOO.util.Anim('image_action_buttons', {}, 0.3,
                                        YAHOO.util.Easing.easeBoth);
     $('image_action_buttons').onmouseover = function () {
Modified: trunk/projects/quickhoney/website/static/styles.css
===================================================================
--- trunk/projects/quickhoney/website/static/styles.css	2008-08-22 23:14:51 UTC (rev 3731)
+++ trunk/projects/quickhoney/website/static/styles.css	2008-08-25 01:24:05 UTC (rev 3732)
@@ -308,7 +308,7 @@
a.home_button {
    visibility: inherit;
-	margin: 0px 12px 0px 0px;
+	margin: 0px 7px 0px 0px;
    border-width: 0px;
 }
@@ -318,14 +318,14 @@
 }
#home div {
-	padding-bottom: 12px;
+	padding-bottom: 10px;
 }
/* directory */
a.button {
    visibility: inherit;
-	margin: 0px 12px 0px 0px;
+	margin: 0px 7px 0px 0px;
    border-width: 0px;
 }
@@ -335,7 +335,7 @@
 }
#directory div {
-	padding-bottom: 12px;
+	padding-bottom: 10px;
 }
/* footer */
@@ -348,15 +348,15 @@
/* cue bar */
-p#cue {
+#cue {
    position: absolute;
    visibility: hidden;
    left: 0px;
    top: 0px;
-	width: 120px;
    text-align: left;
    color: white;
    background-color: red;
+        padding: 0em 0.5em 0em 0.5em;
 }
/* iframes for javascript loading */
@@ -584,14 +584,14 @@
 }
#overlay td.t-shirt-sample {
-	width: 188px;
+	width: 196px;
    height: 132px;
    background-image: url(/image/t-shirt-sample-background);
    background-repeat: no-repeat;
 }
#overlay img#t-shirt-sample {
-	padding-left: 43px;
+	padding-left: 44px;
    padding-top: 16px;
 }
@@ -602,9 +602,9 @@
         visibility: hidden;
 }
-.archive span.title, .archive a.year { font-size: 1.5em; }
+.archive span.title, .archive a.year { font-size: 1.5em; margin-bottom: 1em; }
 .archive a.month.active { display: block; }
-.archive a.month { display: none; }
+.archive a.month { display: none; padding: 0px 5px 2px 5px; margin-top: 2px; }
 #archive-navigation.m1 a.m1 { color: #fff; background-color: #30be01; }
 #archive-navigation.m2 a.m2 { color: #fff; background-color: #30be01; }
 #archive-navigation.m3 a.m3 { color: #fff; background-color: #30be01; }
Modified: trunk/projects/quickhoney/website/templates/index.xml
===================================================================
--- trunk/projects/quickhoney/website/templates/index.xml	2008-08-22 23:14:51 UTC (rev 3731)
+++ trunk/projects/quickhoney/website/templates/index.xml	2008-08-25 01:24:05 UTC (rev 3732)
@@ -388,9 +388,9 @@
       </p>
     </div>
-    <p id="cue">
+    <div id="cue">
       query database
-    </p>
+    </div>
<div id="edit_frame" class="hidden_iframe">
       <iframe src="about:blank" height="0" width="0" name="edit_iframe"> </iframe>

    