Revision: 3723 Author: hans URL: http://bknr.net/trac/changeset/3723
Make news work better. Add news article display (not yet finished). Fix action box show/hide animation.
U trunk/bknr/web/src/web/handlers.lisp U trunk/projects/quickhoney/src/handlers.lisp U trunk/projects/quickhoney/src/imageproc.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/bknr/web/src/web/handlers.lisp =================================================================== --- trunk/bknr/web/src/web/handlers.lisp 2008-08-01 15:43:33 UTC (rev 3722) +++ trunk/bknr/web/src/web/handlers.lisp 2008-08-02 22:32:42 UTC (rev 3723) @@ -3,7 +3,6 @@ (enable-interpol-syntax)
(defvar *bknr-debug* nil) -(defvar *website* nil)
(defvar *website-modules* (make-hash-table :test #'equal))
Modified: trunk/projects/quickhoney/src/handlers.lisp =================================================================== --- trunk/projects/quickhoney/src/handlers.lisp 2008-08-01 15:43:33 UTC (rev 3722) +++ trunk/projects/quickhoney/src/handlers.lisp 2008-08-02 22:32:42 UTC (rev 3723) @@ -444,10 +444,13 @@ (encode-object-element "date" (format-date-time (blob-timestamp image) :vms-style t :show-time nil)) (encode-object-element "name" (store-image-name image))) (:method ((image quickhoney-image)) - (let ((vectorp (member :vector (store-image-keywords image)))) - (encode-object-element "category" (if vectorp "vector" "pixel")) - (encode-object-element "subcategory" "unknown"))) + (encode-object-element "type" "upload") + (with-object-element ("keywords") + (with-json-array () + (dolist (keyword (store-image-keywords image)) + (encode-array-element (string-downcase (symbol-name keyword))))))) (: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))))
Modified: trunk/projects/quickhoney/src/imageproc.lisp =================================================================== --- trunk/projects/quickhoney/src/imageproc.lisp 2008-08-01 15:43:33 UTC (rev 3722) +++ trunk/projects/quickhoney/src/imageproc.lisp 2008-08-02 22:32:42 UTC (rev 3723) @@ -30,25 +30,27 @@ (nreverse coords)))
(defun corner-image (&key (image *default-image*) - (radius (/ (max (image-width image) (image-height image)) 40))) + (radius (/ (max (image-width image) (image-height image)) 40)) + corner-color) (with-default-image (image) - (setf (save-alpha-p) t) - (let ((transparent-color (if (true-color-p) #x7f000000 + (unless corner-color + (setf (save-alpha-p) t + corner-color (if (true-color-p) #x7f000000 (or (transparent-color) (allocate-color 255 255 255 :alpha 127) - (error "can't allocate transparent color for button"))))) - (setf (transparent-color) transparent-color) - (let ((coords (corner-cutout-coords (image-width) (image-height) radius))) - (destructuring-bind (x-tx y-tx) (car coords) - (do-rows (y) - (do-pixels-in-row (x) - (when (and (eql x x-tx) - (eql y y-tx)) - (setf (raw-pixel) transparent-color) - (when (cdr coords) - (setf coords (cdr coords) - x-tx (caar coords) - y-tx (cadar coords))))))))))) + (error "can't allocate transparent color for button"))) + (transparent-color) corner-color)) + (let ((coords (corner-cutout-coords (image-width) (image-height) radius))) + (destructuring-bind (x-tx y-tx) (car coords) + (do-rows (y) + (do-pixels-in-row (x) + (when (and (eql x x-tx) + (eql y y-tx)) + (setf (raw-pixel) corner-color) + (when (cdr coords) + (setf coords (cdr coords) + x-tx (caar coords) + y-tx (cadar coords))))))))))
(define-imageproc-handler cutout-button (input-image &optional keyword (background-color "ffffff") (button-size "208") (radius "8")) (declare (ignore background-color)) @@ -87,4 +89,24 @@ (round (/ (- (image-height input-image) height) 2)) 0 0 width height) - thumbnail-image))) \ No newline at end of file + thumbnail-image))) + +(defparameter +news-image-width+ 428 + "Width of news images") +(defparameter +news-image-corner-radius+ 8 + "Corner radius for news images") + +(define-imageproc-handler news-article-cutout (input-image) + (let* ((image-height (floor (* +news-image-width+ + (/ (image-height input-image) (image-width input-image))))) + (output-image (create-image +news-image-width+ image-height t))) + (copy-image input-image output-image + 0 0 + 0 0 + +news-image-width+ image-height + :resize t :resample t + :dest-width +news-image-width+ :dest-height image-height) + (corner-image :image output-image + :radius +news-image-corner-radius+ + :corner-color (allocate-color 255 255 255 :image output-image)) + output-image)) \ No newline at end of file
Modified: trunk/projects/quickhoney/website/static/javascript.js =================================================================== --- trunk/projects/quickhoney/website/static/javascript.js 2008-08-01 15:43:33 UTC (rev 3722) +++ trunk/projects/quickhoney/website/static/javascript.js 2008-08-02 22:32:42 UTC (rev 3723) @@ -1,5 +1,9 @@ // -*- Java -*-
+/* configuration */ + +var max_news_items = 50; /* maximum number of news items to display */ + /* directory definitions */
var directory_button = []; @@ -223,7 +227,8 @@ var year = this.href.match(/#news/(\d+)/)[1]; map(function (element) { if (element.href) { - ((element.href.match(/#news/(\d+)/)[1] == year) ? addElementClass : removeElementClass)(element, 'active'); + ((element.href.match(/#news/(\d+)/)[1] == year) ? addElementClass : removeElementClass) + (element, 'active'); } }, this.parentNode.childNodes); return true; @@ -236,22 +241,62 @@ return true; }
+function intersection(a, b) +{ + var result = []; + map(function (value) { + if (findValue(b, value) != -1) { + result.push(value); + } + }, a); + return result; +} + +function make_upload_item(item) +{ + item.category = (findValue(item.keywords, 'pixel') == -1) ? 'vector' : 'pixel'; + item.subcategory = intersection(item.keywords, directory_button[item.category])[0]; + var color = (item.category == 'pixel') ? 'ff00ff' : '00ccff'; + var image_link = '/index#' + item.category + '/' + item.subcategory + '/' + item.name; + return DIV({ 'class': 'newsentry autonews news_' + item.category }, + A({ href: image_link }, + IMG({ src: "/image/" + item.name + '/cutout-button,,' + color + ',98,4'})), + DIV(null, + H1(null, item.name), + item.date, ' by ', item.owner, ' | ', + A({ href: image_link }, 'permalink'), + BR(), + item.description)); +} + +function make_news_item(item) +{ + return DIV({ 'class': 'newsentry' }, + IMG({ src: "/image/" + item.name + '/news-article-cutout'}), + DIV(null, + H1(null, item.title), + item.date, ' by ', item.owner, ' | ', + A({ href: '#' }, 'permalink'), + BR(), + item.text)); +} + function load_news(data) { - log('load news: ' + data.items.length); - replaceChildNodes('newsentries', - map(function (item) { - var color = (item.category == 'pixel') ? 'ff00ff' : '00ccff'; - return [ DIV({ 'class': 'newsentry autonews news_' + item.category }, - IMG({ src: "/image/" + item.name + '/cutout-button,,' + color + ',98,4'}), - DIV(null, - H1(null, item.name), - item.date, ' by ', item.owner, ' | ', - A({ href: '/index#' + item.category + '/' + item.subcategory + '/' + item.image_name }, 'permalink'), - BR(), - item.description)), - DIV({ 'class': 'news_sep' }) ]; - }, data.items)); + try { + 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), + DIV({ 'class': 'news_sep' }) ]; + }, data.items)); + $('archive-navigation').style.visibility = 'inherit'; + } + catch (e) { + log('error displaying news: ' + e); + } }
function load_news_archive(data) @@ -261,7 +306,6 @@ alert('no archive data found'); } var currentYear; - var active = true; replaceChildNodes('archive-navigation', SPAN({ 'class': 'title' }, 'Archive'), BR(), map(function (entry) { @@ -269,15 +313,12 @@ var month = entry[1]; var result = []; if (year != currentYear) { - if (currentYear) { - active = false; - } currentYear = year; var link = A({ href: '#news/' + year, 'class': 'year' }, year, BR()); link.onclick = select_archive_year; result.push(link); } - var link = A({ href: '#news/' + year + '/' + month, 'class': 'month ' + (active ? ' active' : '')}, + var link = A({ href: '#news/' + year + '/' + month, 'class': 'month '}, month_names[month - 1], BR()); link.onclick = select_archive_month; result.push(link); @@ -460,6 +501,8 @@ '30be01', function() { footer_hide(); + replaceChildNodes('newsentries'); + $('archive-navigation').style.visibility = 'hidden'; loadJSONDoc('/json-news-archive/quickhoney').addCallbacks(load_news_archive, alert); loadJSONDoc('/json-news/quickhoney').addCallbacks(load_news, alert); }); @@ -529,6 +572,8 @@ $('menu').className = pagename; document.body.className = pagename;
+ overlay_remove(); + // Update globals current_directory = pagename; current_subdirectory = null; @@ -826,6 +871,7 @@ var current_page_index = position_to_page(query_position);
make_pages_navbar(); + overlay_remove();
var page = query_result_pages[current_page_index]; var thumbnail_html = ''; @@ -885,6 +931,7 @@ debug('display_image index ' + index);
footer_hide(); + overlay_remove(); display_path(); make_images_navbar(); make_image_action_buttons(); @@ -998,7 +1045,7 @@ { method: 'POST', headers: {"Content-Type":"application/x-www-form-urlencoded"}, sendContent: queryString({ from: $('hey_from').value, text: $('hey_text').value }) }) - .addCallback(hide_overlay); + .addCallback(overlay_remove); make_overlay('send-comment', 'Sending your comment', 300); return false; } @@ -1146,8 +1193,9 @@ document.location.href = document.location.href.replace(//image-browse.*/, "index#"); }
-function hide_overlay() +function overlay_remove() { + replaceChildNodes('overlay'); $('overlay').style.visibility = 'hidden'; return false; } @@ -1168,7 +1216,7 @@ id: 'close', width: 13, height: 13})); overlay.style.width = width + 'px'; $('close').style.left = (width - 23) + 'px'; - $('close').onclick = hide_overlay; + $('close').onclick = overlay_remove; var elements = []; for (var i = 3; i < arguments.length; i++) { elements.push(arguments[i]); @@ -1368,13 +1416,15 @@ appendChildNodes('image_action_buttons', 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})); - var animator = new YAHOO.util.Anim('image_action_buttons', {}, .3, + var animator = new YAHOO.util.Anim('image_action_buttons', {}, 0.3, YAHOO.util.Easing.easeBoth); $('image_action_buttons').onmouseover = function () { + animator.stop(); animator.attributes = { width: { to: 127 }, left: { to: 518 } }; animator.animate(); } $('image_action_buttons').onmouseout = function () { + animator.stop(); animator.attributes = { width: { to: 60 }, left: { to: 584 } }; animator.animate(); }
Modified: trunk/projects/quickhoney/website/static/styles.css =================================================================== --- trunk/projects/quickhoney/website/static/styles.css 2008-08-01 15:43:33 UTC (rev 3722) +++ trunk/projects/quickhoney/website/static/styles.css 2008-08-02 22:32:42 UTC (rev 3723) @@ -431,10 +431,17 @@
.newsentry { width: 428px; - height: 108px; position: relative; }
+.autonews { + height: 108px; +} + +.autonews img { + padding: 0px; +} + .newsentry img { position: absolute; top: 5px; left: 5px; @@ -632,4 +639,4 @@ .archive span.title, .archive a.year { font-size: 1.5em; } .archive a.month.active { display: block; } .archive a.month { display: none; } -.archive { padding-left: 1em; } \ No newline at end of file +.archive { padding-left: 1em; }
Modified: trunk/projects/quickhoney/website/templates/index.xml =================================================================== --- trunk/projects/quickhoney/website/templates/index.xml 2008-08-01 15:43:33 UTC (rev 3722) +++ trunk/projects/quickhoney/website/templates/index.xml 2008-08-02 22:32:42 UTC (rev 3723) @@ -134,23 +134,6 @@ <tbody> <tr> <td valign="top" id="newsentries"> - <div class="newsentry news_vector autonews"> - <img src="/image/TSG_Platforms_web/cutout-button,,00ccff,98,4"/> - <div> - <h1>Jan and Ella</h1> - March 8th, 2008 by Peter | <a href="foo">permalink</a><br/> - description - </div> - </div> - <div class="news_sep"> </div> - <br/> - <div class="newsentry news_pixel autonews"> - <img src="/image/TSG_Platforms_web/cutout-button,,00ccff,98,4"/> - <div> - March 8th, 2008 by Peter | <a href="foo">permalink</a><br/> - description - </div> - </div> </td> <td class="archive" id="archive-navigation" valign="top"> </td>