Working new pin button that makes use of the API and loads new items in real time

pinry/static/css/pinry.css

@@ -105,8 +105,10 @@ body {
 
         .pin p {
             margin-bottom: 0;
-            padding-top: 15px;
-            padding-bottom: 15px;
+            padding: 8px;
+            border-bottom: 1px solid #ddd;
+            font-family: "Georgia", "Times", "Times New Roman", Serif;
+            font-size: 12px;
         }
 
             .pin strong {

pinry/static/js/pin-form.js

@@ -1,25 +1,74 @@
 $(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({
+            pins: [{
+                submitter: currentUser,
+                image: {
+                    standard: {
+                        image: $('#pin-form-image-url').val()
+                    },
+                    thumbnail: {
+                        image: $('#pin-form-image-url').val()
+                    }
+                },
+                description: $('#pin-form-description').val(),
+                tags: cleanTags()
+            }]
+        });
+        currentPin = html;
+        return html
+    }
+
+    function createPreview() {
+        $('#pin-form-image-preview').html(createPin());
+        $('#pin-form-image-preview .pin').css('width', '200px');
+        $('#pin-form-image-preview .pin .text').css('width', '140px');
+        var pinHeight = $('#pin-form-image-preview .pin').height();
+        if (pinHeight > 305)
+            $('#pin-form .modal-body').css('height', String(pinHeight)+'px');
+    }
+
     function createPinForm() {
         var template = Handlebars.compile($('#pin-form-template').html());
         var html = template();
         $('body').append(html);
         $('#pin-form-image-url').bind('propertychange keyup input paste', function() {
-            $('#pin-form-image-preview').html('<img src="'+$(this).val()+'"/>');
+            createPreview();
+        });
+        $('#pin-form-description').bind('propertychange keyup input paste', function() {
+            createPreview();
+        });
+        $('#pin-form-tags').bind('propertychange keyup input paste', function() {
+            createPreview();
         });
         $('#pin-form-submit').click(function(e) {
-            var tags = $('#pin-form-tags').val()
-            tags = tags.split(',')
-            for (var tag in tags) tags[tag] = tags[tag].trim();
+            var tags = cleanTags();
             $.ajax({
                 type: "post",
                 url: "/api/v1/pin/",
                 contentType: 'application/json',
                 data: JSON.stringify({
-                    submitter: '/api/v1/user/'+currentUser+'/',
+                    submitter: '/api/v1/user/'+currentUser.id+'/',
                     url: $('#pin-form-image-url').val(),
                     description: $('#pin-form-description').val(),
                     tags: tags
-                })
+                }),
+                success: function() {
+                    $('#pins').prepend(currentPin);
+                },
+                error: function() {
+                    alert("Something went wrong. :(");
+                }
             });
 
             $('#pin-form-close').click(function() {
@@ -34,7 +83,6 @@ $(window).load(function() {
         $('#pin-form-close').click(function() {
             $('#pin-form').remove();
         });
-        e.preventDefault();
     }
 
     $('#call-pin-form').click(function() {

pinry/static/js/pinry.js

@@ -70,7 +70,7 @@ $(window).load(function() {
         $.get('/api/v1/pin/?format=json&ordering=-id&offset='+String(offset), function(pins) {
             // Set which items are editable by the current user
             for (var i=0; i < pins.objects.length; i++) 
-                pins.objects[i].editable = (pins.objects[i].submitter.id == currentUser);
+                pins.objects[i].editable = (pins.objects[i].submitter.username == currentUser.username);
 
             // Use the fetched pins as our context for our pins template
             var template = Handlebars.compile($('#pins-template').html());

pinry/templates/base.html

@@ -34,8 +34,8 @@
                 <a href="{% url 'core:home' %}" class="brand pull-left">{{ SITE_NAME }}</a>
                 <ul class="nav pull-right">
                 {% if user.is_authenticated %}
-                    <li><a class="bookmarklet-link">Bookmarklet</a></li>
-                    <li><a id="call-pin-form">New Pin</a></li>
+                    <li><a href="#" class="bookmarklet-link">Bookmarklet</a></li>
+                    <li><a href="#" id="call-pin-form">New Pin</a></li>
                     <li><a href="{% url 'core:logout' %}">Logout</a></li>
                 {% else %}
                     <li><a href="{% url 'core:login' %}">Login</a></li>
@@ -64,7 +64,11 @@
         <!-- JavaScript -->
         <script>
             var apiLimitPerPage = {{ API_LIMIT_PER_PAGE }},
-                currentUser = "{{ user.id }}";
+                currentUser = {
+                    id: "{{ user.id }}",
+                    username: "{{ user.username }}",
+                    gravatar: "{{ user.gravatar }}"
+                };
         </script>
         <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
         <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>

pinry/templates/includes/pins.html

@@ -1,7 +1,7 @@
 {% verbatim %}
     <script id="pins-template" type="text/x-handlebars-template">
         {{#each pins}}
-        <div class="pin">
+        <div class="pin" data-id="{{id}}">
             {{#if editable}}
                 <div class="editable">
                     <div class="borderable">