Further improve lightbox by getting rid of all the data tags and use ajax call for pin

pinry/static/js/helpers.js

@@ -20,3 +20,9 @@ function cleanTags(tags) {
     }
     return tags
 }
+
+
+function getPinData(pinId) {
+    var apiUrl = '/api/v1/pin/'+pinId+'/?format=json';
+    return $.get(apiUrl);
+}

pinry/static/js/lightbox.js

@@ -30,13 +30,6 @@ $(window).load(function() {
             $(window).scrollTop($('body').data('scroll-level'));
         }
     }
-
-    function getLightboxData(link) {
-        var data = link.data();
-        data.tags = cleanTags(data.tags);
-        data.image = link.attr('href');
-        return data;
-    }
     // End Helper Functions
 
 
@@ -46,15 +39,15 @@ $(window).load(function() {
         $('body').append(renderTemplate('#lightbox-template', context));
         var box = $('.lightbox-background');
         box.css('height', $(document).height());
-        $('.lightbox-image-wrapper').css('height', context.height);
+        $('.lightbox-image-wrapper').css('height', context.image.standard.height);
         box.fadeIn(200);
         $('.lightbox-image').load(function() {
             $(this).fadeIn(200);
         });
         $('.lightbox-wrapper').css({
-            'width': context.width,
+            'width': context.image.standard.width,
             'margin-top': 70,
-            'margin-left': -context.width/2
+            'margin-left': -context.image.standard.width/2
         });
 
         box.click(function() {
@@ -74,8 +67,11 @@ $(window).load(function() {
         return links.each(function() {
             $(this).off('click');
             $(this).click(function(e) {
-                createBox(getLightboxData($(this)));
                 e.preventDefault();
+                var promise = getPinData($(this).data('id'));
+                promise.success(function(pin) {
+                    createBox(pin);
+                });
             });
         });
     }

pinry/static/js/pin-form.js

@@ -1,13 +1,6 @@
 $(window).load(function() {
     var currentPin;
 
-    function cleanTags() {
-        var tags = $('#pin-form-tags').val()
-        tags = tags.split(',')
-        for (var tag in tags) tags[tag] = tags[tag].trim();
-        return tags
-    }
-
     function createPin() {
         var template = Handlebars.compile($('#pins-template').html());
         var html = template({
@@ -22,7 +15,7 @@ $(window).load(function() {
                     }
                 },
                 description: $('#pin-form-description').val(),
-                tags: cleanTags()
+                tags: cleanTags($('#pin-form-tags').val())
             }]
         });
         currentPin = html;
@@ -63,7 +56,7 @@ $(window).load(function() {
         }
 
         $('#pin-form-submit').click(function(e) {
-            var tags = cleanTags();
+            var tags = cleanTags($('#pin-form-tags').val());
             $.ajax({
                 type: "post",
                 url: "/api/v1/pin/",

pinry/templates/includes/lightbox.html

@@ -3,7 +3,7 @@
         <div class="lightbox-background">
             <div class="lightbox-wrapper">
                 <div class="lightbox-image-wrapper">
-                    <img class="lightbox-image" src="{{image}}" />
+                    <img class="lightbox-image" src="{{image.standard.image}}" />
                 </div>
                 <div class="lightbox-data clearfix">
                 {{#if description}}
@@ -12,10 +12,10 @@
                     </div>
                 {{/if}}
                     <div class="avatar pull-left">
-                        <img src="http://gravatar.com/avatar/{{gravatar}}.jpg">
+                        <img src="http://gravatar.com/avatar/{{submitter.gravatar}}.jpg">
                     </div>
                     <div class="text pull-left">
-                        <span class="dim">pinned by</span> {{username}}
+                        <span class="dim">pinned by</span> {{submitter.username}}
                         {{#if tags}}
                             <br /><span class="dim">in</span>
                         {{#each tags}}

pinry/templates/includes/pins.html

@@ -9,14 +9,7 @@
                     </div>
                 </div>
             {{/if}}
-            <a href="{{image.standard.image}}"
+            <a href="{{image.standard.image}}" class="lightbox" data-id="{{id}}">
-               class="lightbox"
-               data-username="{{submitter.username}}"
-               data-tags="{{tags}}"
-               data-gravatar="{{submitter.gravatar}}"
-               data-description="{{description}}"
-               data-width="{{image.standard.width}}"
-               data-height="{{image.standard.height}}">
                 <img src="{{image.thumbnail.image}}" />
             </a>
             {{#if description}}
@@ -24,7 +17,7 @@
             {{/if}}
             <div class="pin-footer clearfix">
                 <div class="avatar pull-left">
-                    <img src="http://gravatar.com/avatar/{{submitter.gravatar}}.jpg">
+                    <img src="http://gravatar.com/avatar/{{submitter.gravatar}}">
                 </div>
                 <div class="text pull-right">
                     <span class="dim">pinned by</span> {{submitter.username}}