[bknr-cvs] hans changed trunk/projects/quickhoney/
BKNR Commits
bknr at bknr.net
Mon Aug 25 01:24:05 UTC 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>
More information about the Bknr-cvs
mailing list