From ceda2d2cb0ce3ccb4acb712b6a3c91dcea1f6dba Mon Sep 17 00:00:00 2001
From: Isaac Bythewood <isaac@bythewood.me>
Date: Fri, 28 Sep 2012 05:28:31 +0000
Subject: [PATCH] Allow basic sorting by tag.

---
 pinry/api/api.py                     |   1 +
 pinry/core/static/core/css/pinry.css |   9 ++
 pinry/core/static/core/js/pinry.js   | 191 +++++++++++++++++++----------------
 pinry/core/templates/core/base.html  |   4 +-
 4 files changed, 115 insertions(+), 90 deletions(-)

diff --git a/pinry/api/api.py b/pinry/api/api.py
index 55d0204..cd67d36 100644
--- a/pinry/api/api.py
+++ b/pinry/api/api.py
@@ -27,6 +27,7 @@ class PinResource(ModelResource):  # pylint: disable-msg=R0904
 
         if 'tag' in filters:
             orm_filters['tags__name__in'] = filters['tag'].split(',')
+
         return orm_filters
 
     def dehydrate_tags(self, bundle):
diff --git a/pinry/core/static/core/css/pinry.css b/pinry/core/static/core/css/pinry.css
index 5b22576..c673dfc 100644
--- a/pinry/core/static/core/css/pinry.css
+++ b/pinry/core/static/core/css/pinry.css
@@ -59,6 +59,15 @@ body {
     text-align: center;
 }
 
+
+.tags {
+    padding: 13px 0;
+}
+
+    .tag {
+        cursor: pointer;
+    }
+
 #pins {
     top: 70px;
     position: absolute;
diff --git a/pinry/core/static/core/js/pinry.js b/pinry/core/static/core/js/pinry.js
index f1f5483..6c9f95b 100644
--- a/pinry/core/static/core/js/pinry.js
+++ b/pinry/core/static/core/js/pinry.js
@@ -1,99 +1,112 @@
 /**
  * Based on Wookmark's endless scroll.
  */
-$(window).ready(function () {
-    var apiURL = '/api/pin/?format=json&offset='
-    var page = 0;
-    var handler = null;
-    var isLoading = false;
-    
-    /**
-     * 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();
-      }
-    };
-    
-    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
-          });
+var apiURL = '/api/pin/?format=json&offset='
+var page = 0;
+var handler = null;
+var globalTag = null;
+var isLoading = false;
+
+/**
+ * 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();
+  }
+};
+
+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;
+    }
+
+    if (tag !== undefined && page != 0) {
+        $('#pins').html('');
+        page = 0;
+        if (tag != null) $('.tags').html('<span class="label tag" onclick="loadData(null)">' + tag + ' x</span>');
+        else $('.tags').html('');
+    }
+
+    var loadURL = apiURL+(page*20);
+    if (globalTag !== null) loadURL += "&tag=" + tag;
     
-    /**
-     * Loads data from the API.
-     */
-    function loadData() {
-        isLoading = true;
-        $('#loader').show();
-        
-        $.ajax({
-            url: apiURL+(page*20),
-            success: onLoadData
-        });
-    };
+    $.ajax({
+        url: loadURL,
+        success: onLoadData
+    });
+};
+
+/**
+ * Receives data from the API, creates HTML for images and updates the layout
+ */
+function onLoadData(data) {
+    data = data.objects;
+    isLoading = false;
+    $('#loader').hide();
     
-    /**
-     * 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<length; i++) {
-          image = data[i];
-          html += '<div class="pin">';
-              html += '<div class="pin-options">';
-                  html += '<a href="/pins/delete-pin/'+image.id+'">';
-                      html += '<i class="icon-trash"></i>';
-                  html += '</a>';
-              html += '</div>';
-              html += '<a class="fancybox" rel="pins" href="'+image.image+'">';
-                  html += '<img src="'+image.thumbnail+'" width="200" >';
+    page++;
+    
+    var html = '';
+    var i=0, length=data.length, image;
+    for(; i<length; i++) {
+      image = data[i];
+      html += '<div class="pin">';
+          html += '<div class="pin-options">';
+              html += '<a href="/pins/delete-pin/'+image.id+'">';
+                  html += '<i class="icon-trash"></i>';
               html += '</a>';
-              if (image.description) html += '<p>'+image.description+'</p>';
-              if (image.tags) {
-                  html += '<p>';
-                  for (tag in image.tags) {
-                      html += image.tags[tag] + ', ';
-                  }
-                  html += '</p>';
-              }
           html += '</div>';
-        }
-        
-        $('#pins').append(html);
-        
-        applyLayout();
-    };
-  
-    $(document).ready(new function() {
-        $(document).bind('scroll', onScroll);
-        loadData();
-    });
+          html += '<a class="fancybox" rel="pins" href="'+image.image+'">';
+              html += '<img src="'+image.thumbnail+'" width="200" >';
+          html += '</a>';
+          if (image.description) html += '<p>'+image.description+'</p>';
+          if (image.tags) {
+              html += '<p>';
+              for (tag in image.tags) {
+                  html += '<span class="label tag" onclick="loadData(\'' + image.tags[tag] + '\')">' + image.tags[tag] + '</span> ';
+              }
+              html += '</p>';
+          }
+      html += '</div>';
+    }
+    
+    $('#pins').append(html);
+    
+    applyLayout();
+};
 
-    /**
-     * On clicking an image show fancybox original.
-     */
-    $('.fancybox').fancybox({
-        openEffect: 'none',
-        closeEffect: 'none'
-    });
+$(document).ready(new function() {
+    $(document).bind('scroll', onScroll);
+    loadData();
+});
+
+/**
+ * On clicking an image show fancybox original.
+ */
+$('.fancybox').fancybox({
+    openEffect: 'none',
+    closeEffect: 'none'
 });
diff --git a/pinry/core/templates/core/base.html b/pinry/core/templates/core/base.html
index 773c915..6380ffb 100644
--- a/pinry/core/templates/core/base.html
+++ b/pinry/core/templates/core/base.html
@@ -18,7 +18,9 @@
     <body>
         <div class="navbar navbar-fixed-top">
             <div class="navbar-inner">
-                <a href="{% url core:home %}" class="brand">{{ site_name }}</a>
+                <a href="{% url core:home %}" class="brand pull-left">{{ site_name }}</a>
+
+                <div class="tags pull-left"></div>
 
                 <ul class="nav pull-right">
                     {% if user.is_authenticated %}