From 8ec96a07ce549a0cd28b575d898dd0b1d95c4930 Mon Sep 17 00:00:00 2001 From: Isaac Bythewood Date: Wed, 27 Feb 2013 04:34:44 +0000 Subject: [PATCH] Greatly improved lightbox view, much cleaner and smoother --- pinry/static/css/lightbox.css | 11 +++ pinry/static/js/helpers.js | 22 +++++ pinry/static/js/lightbox.js | 116 +++++++++++++++---------- pinry/static/js/pinry.js | 3 +- pinry/templates/includes/bookmarklet_link.html | 2 +- pinry/templates/includes/lightbox.html | 4 +- 6 files changed, 111 insertions(+), 47 deletions(-) diff --git a/pinry/static/css/lightbox.css b/pinry/static/css/lightbox.css index ec4cc71..33bdea6 100644 --- a/pinry/static/css/lightbox.css +++ b/pinry/static/css/lightbox.css @@ -5,6 +5,7 @@ right: 0; position: absolute; z-index: 9001; + display: none; } .lightbox-wrapper { @@ -14,6 +15,15 @@ border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; + background: #eee; + background-image: url("../img/loader.gif"); + background-repeat: no-repeat; + background-position: center center; + margin-bottom: 100px; + } + + .lightbox-wrapper img { + display: none; } .lightbox-data { @@ -28,6 +38,7 @@ } .lightbox-data .avatar img { + display: block; width: 40px; height: 40px; margin: 5px; diff --git a/pinry/static/js/helpers.js b/pinry/static/js/helpers.js index e69de29..0989708 100644 --- a/pinry/static/js/helpers.js +++ b/pinry/static/js/helpers.js @@ -0,0 +1,22 @@ +/** + * Helpers for Pinry + * Descrip: A hodgepodge of useful things to help clean up Pinry's JavaScript. + * Authors: Pinry Contributors + * Updated: Feb 26th, 2013 + * Require: jQuery + */ + + +function renderTemplate(templateId, context) { + var template = Handlebars.compile($(templateId).html()); + return template(context); +} + + +function cleanTags(tags) { + if (typeof tags === 'string') { + tags = tags.split(','); + for (var i in tags) tags[i] = tags[i].trim(); + } + return tags +} diff --git a/pinry/static/js/lightbox.js b/pinry/static/js/lightbox.js index 9a7a2b5..39f030d 100644 --- a/pinry/static/js/lightbox.js +++ b/pinry/static/js/lightbox.js @@ -1,55 +1,83 @@ -$(window).load(function() { - var scrollLevel = 0; - - window.lightbox = function(pins) { - var links = pins.find('.lightbox'); +/** + * Lightbox for Pinry + * Descrip: A lightbox plugin for pinry so that I don't have to rely on some of + * the massive code bases of other lightboxes, this one uses data + * fields to acquire the info we need and dynamically loads comments. + * It also has a nice parallax view mode where the top scrolls and the + * background stays stationary. + * Authors: Pinry Contributors + * Updated: Feb 26th, 2013 + * Require: jQuery, Pinry JavaScript Helpers + */ - function createBox(boxData) { - var template = Handlebars.compile($('#lightbox-template').html()); - var html = template(boxData); - $('body').append(html); - scrollLevel = $(window).scrollTop(); +$(window).load(function() { + // Start Helper Functions + function freezeScroll(freeze) { + freeze = typeof freeze !== 'undefined' ? freeze : true; + if (freeze) { + $('body').data('scroll-level', $(window).scrollTop()); $('#pins').css({ - 'margin-top': String(-scrollLevel)+'px', - 'position': 'fixed' + 'position': 'fixed', + 'margin-top': -$('body').data('scroll-level') }); - - $('.lightbox-wrapper img').load(function() { - $('.lightbox-background').css('height', String($(document).height())+'px'); - $('.lightbox-wrapper').css({ - 'width': boxData.width, - 'margin-top': String(100)+'px', - 'margin-left': '-'+String(boxData.width/2)+'px' - }); + $(window).scrollTop(0); + } else { + $('#pins').css({ + 'position': 'static', + 'margin-top': 0 }); - - return $('.lightbox-background'); + $(window).scrollTop($('body').data('scroll-level')); } + } - for (var i=0; i < links.length; i++) { - link = links.eq(i); - link.off('click'); - link.click(function(e) { - var box = createBox({ - image: $(this).attr('href'), - gravatar: $(this).data('gravatar'), - username: $(this).data('username'), - description: $(this).data('description'), - tags: $(this).data('tags').split(','), - width: $(this).data('width'), - height: $(this).data('height') - }); - box.click(function() { - box.remove() - $('#pins').css({ - 'position': 'static', - 'margin-top': 0 - }); - $(window).scrollTop(scrollLevel); - }); + function getLightboxData(link) { + var data = link.data(); + data.tags = cleanTags(data.tags); + data.image = link.attr('href'); + return data; + } + // End Helper Functions + + + // Start View Functions + function createBox(context) { + freezeScroll(); + $('body').append(renderTemplate('#lightbox-template', context)); + var box = $('.lightbox-background'); + box.css('height', $(document).height()); + $('.lightbox-image-wrapper').css('height', context.height); + box.fadeIn(200); + $('.lightbox-image').load(function() { + $(this).fadeIn(200); + }); + $('.lightbox-wrapper').css({ + 'width': context.width, + 'margin-top': 100, + 'margin-left': -context.width/2 + }); + + box.click(function() { + $(this).fadeOut(200); + setTimeout(function() { + box.remove(); + }, 200); + freezeScroll(false); + }); + } + // End View Functions + + + // Start Global Init Function + window.lightbox = function() { + var links = $('body').find('.lightbox'); + return links.each(function() { + $(this).off('click'); + $(this).click(function(e) { + createBox(getLightboxData($(this))); e.preventDefault(); }); - } + }); } + // End Global Init Function }); diff --git a/pinry/static/js/pinry.js b/pinry/static/js/pinry.js index 4f89e07..5e6beee 100644 --- a/pinry/static/js/pinry.js +++ b/pinry/static/js/pinry.js @@ -44,7 +44,6 @@ $(window).load(function() { colHeights[sCol] += block.height()+(blockMargin); } - lightbox(blocks); $('.spinner').css('display', 'none'); blockContainer.css('height', colHeights.sort().slice(-1)[0]); } @@ -77,6 +76,7 @@ $(window).load(function() { $('#pins').ajaxStop(function() { $('img').load(function() { tileLayout(); + lightbox(); }); }); @@ -93,6 +93,7 @@ $(window).load(function() { // If our window gets resized keep the tiles looking clean and in our window $(window).resize(function() { tileLayout(); + lightbox(); }) // If we scroll to the bottom of the document load more pins diff --git a/pinry/templates/includes/bookmarklet_link.html b/pinry/templates/includes/bookmarklet_link.html index 2659b9f..3b64e3d 100644 --- a/pinry/templates/includes/bookmarklet_link.html +++ b/pinry/templates/includes/bookmarklet_link.html @@ -1 +1 @@ -Bookmarklet +Bookmarklet diff --git a/pinry/templates/includes/lightbox.html b/pinry/templates/includes/lightbox.html index 06322b6..eca197d 100644 --- a/pinry/templates/includes/lightbox.html +++ b/pinry/templates/includes/lightbox.html @@ -2,7 +2,9 @@