From 8e8bed0efa74c8bfc77e3b794fac8f3d4b824351 Mon Sep 17 00:00:00 2001 From: Isaac Bythewood Date: Wed, 20 Feb 2013 07:59:45 +0000 Subject: [PATCH] Rewrite the display of recent pins without the use of third-party js libs --- pinry/api/api.py | 23 +- pinry/api/urls.py | 10 +- pinry/core/static/core/css/pinry.css | 6 +- pinry/core/static/core/js/pinry.js | 186 +- pinry/core/templates/core/base.html | 31 +- pinry/core/templatetags/verbatim.py | 44 + pinry/pins/templates/pins/recent_pins.html | 2 +- pinry/urls.py | 2 +- .../static/vendor/handlebars/handlebars.js | 2201 +++++++++++++++++ requirements.txt | 2 +- 10 files changed, 2368 insertions(+), 139 deletions(-) create mode 100644 pinry/core/templatetags/verbatim.py create mode 100644 pinry/vendor/static/vendor/handlebars/handlebars.js diff --git a/pinry/api/api.py b/pinry/api/api.py index cd67d36..ba2bab1 100644 --- a/pinry/api/api.py +++ b/pinry/api/api.py @@ -1,15 +1,23 @@ from tastypie.resources import ModelResource from tastypie import fields -from tastypie.authentication import BasicAuthentication -from tastypie.authorization import DjangoAuthorization from django.contrib.auth.models import User from pinry.pins.models import Pin +class UserResource(ModelResource): + class Meta: + queryset = User.objects.all() + resource_name = 'user' + excludes = ['email', 'password', 'is_superuser', 'first_name', + 'last_name', 'is_active', 'is_staff', 'last_login', 'date_joined'] + include_resource_uri = False + + class PinResource(ModelResource): # pylint: disable-msg=R0904 tags = fields.ListField() + submitter = fields.ForeignKey(UserResource, 'submitter', full=True) class Meta: queryset = Pin.objects.all() @@ -17,6 +25,7 @@ class PinResource(ModelResource): # pylint: disable-msg=R0904 include_resource_uri = False filtering = { 'published': ['gt'], + 'submitter': ['exact'] } def build_filters(self, filters=None): @@ -37,13 +46,3 @@ class PinResource(ModelResource): # pylint: disable-msg=R0904 tags = bundle.data.get('tags', []) bundle.obj.tags.set(*tags) return super(PinResource, self).save_m2m(bundle) - - -class UserResource(ModelResource): - class Meta: - queryset = User.objects.all() - resource_name = 'auth/user' - excludes = ['email', 'password', 'is_superuser'] - # Add it here. - authentication = BasicAuthentication() - authorization = DjangoAuthorization() diff --git a/pinry/api/urls.py b/pinry/api/urls.py index 7590b6d..cdfb890 100644 --- a/pinry/api/urls.py +++ b/pinry/api/urls.py @@ -1,14 +1,16 @@ from django.conf.urls import patterns, include, url +from tastypie.api import Api + from .api import PinResource from .api import UserResource -pin_resource = PinResource() -user_resource = UserResource() +v1_api = Api(api_name='v1') +v1_api.register(PinResource()) +v1_api.register(UserResource()) urlpatterns = patterns('', - url(r'', include(pin_resource.urls)), - url(r'', include(user_resource.urls)), + url(r'^api/', include(v1_api.urls)), ) diff --git a/pinry/core/static/core/css/pinry.css b/pinry/core/static/core/css/pinry.css index c673dfc..bd36399 100644 --- a/pinry/core/static/core/css/pinry.css +++ b/pinry/core/static/core/css/pinry.css @@ -70,18 +70,14 @@ body { #pins { top: 70px; - position: absolute; - background: #eee; - z-index: 100; } .pin { background: #fff; width: 200px; - float: left; border: 1px solid #ccc; padding: 20px; - display: none; + position: absolute; } .pin img { diff --git a/pinry/core/static/core/js/pinry.js b/pinry/core/static/core/js/pinry.js index 6f46836..d529497 100644 --- a/pinry/core/static/core/js/pinry.js +++ b/pinry/core/static/core/js/pinry.js @@ -1,121 +1,85 @@ -/** - * Based on Wookmark's endless scroll. - */ -var apiURL = '/api/pin/?format=json&offset=' -var page = 0; -var handler = null; -var globalTag = null; -var isLoading = false; +$(window).load(function() { + function tileLayout() { + // Config + var blockMargin = 20; + var blockWidth = 240; + // End Config -/** - * When scrolled all the way to the bottom, add more tiles. - */ -function onScroll(event) { - if(!isLoading) { - var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100); - if(closeToBottom) loadData(); - } -}; + var blockContainer = $('#pins'); + var blocks = blockContainer.children('.pin'); + var rowSize = Math.floor(blockContainer.width()/blockWidth); + var blockWidth = (blockContainer.width()-blockMargin*(rowSize))/rowSize; + var colHeights = [] -function applyLayout() { - $('#pins').imagesLoaded(function() { - // Clear our previous layout handler. - if(handler) handler.wookmarkClear(); - - // Create a new layout handler. - handler = $('#pins .pin'); - handler.wookmark({ - autoResize: true, - offset: 3, - itemWidth: 242 - }); - }); -}; - -/** - * Loads data from the API. - */ -function loadData(tag) { - isLoading = true; - $('#loader').show(); - - if (tag !== undefined) { - globalTag = tag; - window.history.pushState(tag, 'Pinry - Tag - '+tag, '/pins/tag/'+tag+'/'); - } else if (url(2) == 'tag') { - tag = url(3); - globalTag = tag; - window.history.pushState(tag, 'Pinry - Tag - '+tag, '/pins/tag/'+tag+'/'); - } - - if (tag !== undefined) { - $('#pins').html(''); - page = 0; - if (tag != null) - $('.tags').html('' + tag + ' x'); - else { - $('.tags').html(''); - window.history.pushState(tag, 'Pinry - Recent Pins', '/pins/'); + for (var i=0; i < rowSize; i++) { + colHeights[i] = 0; } + + for (var b=0; b < blocks.length; b++) { + block = blocks.eq(b); + + var col = -1; + var colHeight = 0; + for (var i=0; i < rowSize; i++) { + if (col < 0) { + col = 0; + colHeight = colHeights[col]; + } else { + if (colHeight > colHeights[i]) { + col = i; + colHeight = colHeights[col]; + } + } + } + + block.css({ + 'margin-left': blockWidth*col+col*blockMargin + }); + + blockMarginTop = blockMargin; + block.css({ + 'margin-top': colHeight+blockMarginTop + }); + colHeights[col] += block.height()+blockMarginTop; + + block.css('display', 'block'); + } + + $('.spinner').css('display', 'none'); + blockContainer.css('height', colHeights.sort().slice(-1)[0]); } - var loadURL = apiURL+(page*30); - if (globalTag !== null) loadURL += "&tag=" + tag; - - $.ajax({ - url: loadURL, - success: onLoadData - }); -}; + var offset = 0; -/** - * Receives data from the API, creates HTML for images and updates the layout - */ -function onLoadData(data) { - data = data.objects; - isLoading = false; - $('#loader').hide(); - - page++; - - var html = ''; - var i=0, length=data.length, image; - for(; i'; - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; - if (image.description) html += '

'+image.description+'

'; - if (image.tags) { - html += '

'; - for (tag in image.tags) { - html += '' + image.tags[tag] + ' '; - } - html += '

'; - } - html += ''; + function loadPins() { + $('.spinner').css('display', 'block'); + $.get('/api/v1/pin/?format=json&offset='+String(offset), function(pins) { + console.log(pins.objects[0]) + var source = $('#pins-template').html(); + var template = Handlebars.compile(source); + var context = { + pins: pins.objects + } + var html = template(context); + $('#pins').append(html); + + $('#pins').ajaxStop(function() { + tileLayout(); + }); + + offset += 30; + }); } - - $('#pins').append(html); - - applyLayout(); -}; -$(document).ready(new function() { - $(document).bind('scroll', onScroll); - loadData(); -}); + loadPins(); -/** - * On clicking an image show fancybox original. - */ -$('.fancybox').fancybox({ - openEffect: 'none', - closeEffect: 'none' + $(window).resize(function() { + tileLayout(); + }) + + $(window).scroll(function() { + if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { + loadPins(); + } + }); }); diff --git a/pinry/core/templates/core/base.html b/pinry/core/templates/core/base.html index bf1dca9..a087896 100644 --- a/pinry/core/templates/core/base.html +++ b/pinry/core/templates/core/base.html @@ -1,5 +1,6 @@ {% load new_pin %} {% load compress %} +{% load verbatim %} @@ -46,13 +47,35 @@ {% new_pin request %} + {% verbatim %} + + {% endverbatim %} + {% compress js %} - - - - + + + diff --git a/pinry/core/templatetags/verbatim.py b/pinry/core/templatetags/verbatim.py new file mode 100644 index 0000000..e4bf429 --- /dev/null +++ b/pinry/core/templatetags/verbatim.py @@ -0,0 +1,44 @@ +""" +jQuery templates use constructs like: + + {{if condition}} print something{{/if}} + +This, of course, completely screws up Django templates, +because Django thinks {{ and }} mean something. + +Wrap {% verbatim %} and {% endverbatim %} around those +blocks of jQuery templates and this will try its best +to output the contents with no changes. +""" + +from django import template + +register = template.Library() + + +class VerbatimNode(template.Node): + + def __init__(self, text): + self.text = text + + def render(self, context): + return self.text + + +@register.tag +def verbatim(parser, token): + text = [] + while 1: + token = parser.tokens.pop(0) + if token.contents == 'endverbatim': + break + if token.token_type == template.TOKEN_VAR: + text.append('{{') + elif token.token_type == template.TOKEN_BLOCK: + text.append('{%') + text.append(token.contents) + if token.token_type == template.TOKEN_VAR: + text.append('}}') + elif token.token_type == template.TOKEN_BLOCK: + text.append('%}') + return VerbatimNode(''.join(text)) diff --git a/pinry/pins/templates/pins/recent_pins.html b/pinry/pins/templates/pins/recent_pins.html index f79ca90..7315482 100644 --- a/pinry/pins/templates/pins/recent_pins.html +++ b/pinry/pins/templates/pins/recent_pins.html @@ -4,7 +4,7 @@ {% block yield %}
-
+