Greatly improved bookmarklet pinning functionality, much better pin form

pinry/static/css/pinry.css

@@ -3,6 +3,10 @@ body {
     background: #eee;
 }
 
+a {
+    cursor: pointer;
+}
+
 #bookmarklet {
     cursor: move;
 }

pinry/static/js/bookmarklet.js

@@ -71,7 +71,7 @@ $(document).ready(function() {
         });
         $(image).click(function() {
             var popUrl = getFormUrl()+imageUrl;
-            window.open(popUrl, '', 'width=600,height=500,toolbar=0,menubar=0');
+            window.open(popUrl, '', 'width=590,height=439,toolbar=0,menubar=0');
             $('#pinry-images').remove();
         });
         return $('#pinry-images').append(image);

pinry/static/js/helpers.js

@@ -18,7 +18,7 @@ function cleanTags(tags) {
         tags = tags.split(',');
         for (var i in tags) tags[i] = tags[i].trim();
     }
-    return tags
+    return tags;
 }
 
 
@@ -26,3 +26,21 @@ function getPinData(pinId) {
     var apiUrl = '/api/v1/pin/'+pinId+'/?format=json';
     return $.get(apiUrl);
 }
+
+function postPinData(data) {
+    return $.ajax({
+        type: "post",
+        url: "/api/v1/pin/",
+        contentType: 'application/json',
+        data: JSON.stringify(data)
+    });
+}
+
+
+function getUrlParameter(name) {
+    var decode = decodeURI(
+        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
+    );
+    if (decode == 'null') return null;
+    else return decode;
+}

pinry/static/js/pin-form.js

@@ -1,97 +1,103 @@
+/**
+ * Pin Form for Pinry
+ * Descrip: This is for creation new pins on everything, the bookmarklet, on the
+ *          site and even editing pins in some limited situations.
+ * Authors: Pinry Contributors
+ * Updated: Feb 27th, 2013
+ * Require: jQuery, Pinry JavaScript Helpers
+ */
+
+
 $(window).load(function() {
     var currentPin;
+    // Start Helper Functions
+    function getFormData() {
+        return {
+            submitter: currentUser,
+            url: $('#pin-form-image-url').val(),
+            description: $('#pin-form-description').val(),
+            tags: cleanTags($('#pin-form-tags').val())
+        }
+    }
 
-    function createPin() {
-        var template = Handlebars.compile($('#pins-template').html());
-        var html = template({
-            pins: [{
+    function createPinPreviewFromForm() {
+        var context = {pins: [{
                 submitter: currentUser,
-                image: {
-                    standard: {
-                        image: $('#pin-form-image-url').val()
-                    },
-                    thumbnail: {
-                        image: $('#pin-form-image-url').val()
-                    }
-                },
+                image: {thumbnail: {image: $('#pin-form-image-url').val()}},
                 description: $('#pin-form-description').val(),
                 tags: cleanTags($('#pin-form-tags').val())
-            }]
-        });
-        currentPin = html;
-        return html
+            }]},
+            html = renderTemplate('#pins-template', context),
+            preview = $('#pin-form-image-preview');
+        preview.html(html);
+        preview.find('.pin').width(200);
+        preview.find('.pin .text').width(140);
+        if (preview.height() > 305)
+            $('#pin-form .modal-body').height(preview.height());
     }
 
-    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 dismissModal(modal) {
+        modal.modal('hide');
+        setTimeout(function() {
+            modal.remove();
+        }, 200);
     }
+    // End Helper Functions
 
+
+    // Start View Functions
     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() {
-            createPreview();
-        });
-        $('#pin-form-description').bind('propertychange keyup input paste', function() {
-            createPreview();
-        });
-        $('#pin-form-tags').bind('propertychange keyup input paste', function() {
-            createPreview();
-        });
-
-        function getURLParameter(name) {
-            return decodeURI(
-                (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
-            );
+        $('body').append(renderTemplate('#pin-form-template', ''));
+        var modal = $('#pin-form'),
+            formFields = [$('#pin-form-image-url'), $('#pin-form-description'),
+            $('#pin-form-tags')],
+            pinFromUrl = getUrlParameter('pin-image-url');
+        modal.modal('show');
+        for (var i in formFields) {
+            formFields[i].bind('propertychange keyup input paste', function() {
+                createPinPreviewFromForm()
+            });
         }
-        if (getURLParameter('pin-image-url') != 'null') {
-            $('#pin-form-image-url').val(getURLParameter('pin-image-url'));
-            createPreview();
+        if (pinFromUrl) {
+            $('#pin-form-image-url').val(pinFromUrl);
+            $('.navbar').css('display', 'none');
+            modal.css({
+                'margin-top': -35,
+                'margin-left': -281
+            });
         }
-
         $('#pin-form-submit').click(function(e) {
-            var tags = cleanTags($('#pin-form-tags').val());
-            $.ajax({
-                type: "post",
-                url: "/api/v1/pin/",
-                contentType: 'application/json',
-                data: JSON.stringify({
+            e.preventDefault();
+            var data = {
                     submitter: '/api/v1/user/'+currentUser.id+'/',
                     url: $('#pin-form-image-url').val(),
                     description: $('#pin-form-description').val(),
-                    tags: tags
-                }),
-                success: function() {
-                    $('#pins').prepend(currentPin);
+                    tags: cleanTags($('#pin-form-tags').val())
                 },
-                error: function() {
-                    alert("Something went wrong. :(");
-                }
+                promise = postPinData(data);
+            promise.success(function() {
+                if (pinFromUrl) return window.close();
+                $('#pins').prepend(currentPin);
+                dismissModal(modal);
             });
 
-            $('#pin-form-close').click(function() {
-                $('#pin-form').remove();
-            });
-
-            $('#pin-form').remove();
-
-            e.preventDefault();
         });
-
         $('#pin-form-close').click(function() {
-            $('#pin-form').remove();
+            if (pinFromUrl) return window.close();
+            dismissModal(modal);
         });
+        createPinPreviewFromForm();
+    }
+    // End View Functions
+
+
+    // Start Init
+    window.pinForm = function() {
+        createPinForm();
     }
 
-    if ($('#display-pin-form').length >= 1) createPinForm();
-
-    $('#call-pin-form').click(function() {
+    if (getUrlParameter('pin-image-url')) {
         createPinForm();
-    });
+    }
+    // End Init
 });

pinry/templates/base.html

@@ -47,7 +47,7 @@
                 <ul class="nav pull-right">
                 {% if user.is_authenticated %}
                     <li>{% include "includes/bookmarklet_link.html" %}</li>
-                    <li><a href="#" id="call-pin-form">New Pin</a></li>
+                    <li><a onclick="pinForm()">New Pin</a></li>
                     <li><a href="{% url 'core:logout' %}">Logout</a></li>
                 {% else %}
                     <li><a href="{% url 'core:login' %}">Login</a></li>

pinry/templates/includes/pin_form.html

@@ -1,6 +1,6 @@
 {% verbatim %}
     <script id="pin-form-template" type="text/x-handlebars-template">
-        <div class="modal" id="pin-form">
+        <div class="modal hide fade" id="pin-form">
             <div class="modal-header">
                 <h3>New Pin</h3>
             </div>