Greatly improved bookmarklet pinning functionality, much better pin form

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
 });