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>