Pins are now editable

pinry/static/js/pin-form.js

@@ -10,6 +10,7 @@
 
 $(window).load(function() {
     var uploadedImage = false;
+    var editedPin = null;
 
     // Start Helper Functions
     function getFormData() {
@@ -37,7 +38,6 @@ $(window).load(function() {
         if (getFormData().url == "")
             preview.find('.image-wrapper').height(278);
         preview.find('.image-wrapper img').fadeIn(300);
-        console.log(preview.find('.pin').height());
         setTimeout(function() {
             if (preview.find('.pin').height() > 305) {
                 $('#pin-form .modal-body').animate({
@@ -57,12 +57,25 @@ $(window).load(function() {
 
 
     // Start View Functions
-    function createPinForm() {
+    function createPinForm(editPinId) {
         $('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');
+        // If editable grab existing data
+        if (editPinId) {
+            var promise = getPinData(editPinId);
+            promise.success(function(data) {
+                editedPin = data;
+                $('#pin-form-image-url').val(editedPin.image.thumbnail.image);
+                $('#pin-form-image-url').parent().parent().hide();
+                $('#pin-form-image-upload').parent().parent().hide();
+                $('#pin-form-description').val(editedPin.description);
+                $('#pin-form-tags').val(editedPin.tags);
+                createPinPreviewFromForm();
+            });
+        }
         modal.modal('show');
         // Auto update preview on field changes
         var timer;
@@ -117,6 +130,34 @@ $(window).load(function() {
             e.preventDefault();
             $(this).off('click');
             $(this).addClass('disabled');
+            if (editedPin) {
+                var apiUrl = '/api/v1/pin/'+editedPin.id+'/?format=json';
+                var data = {
+                    description: $('#pin-form-description').val(),
+                    tags: cleanTags($('#pin-form-tags').val())
+                }
+                var promise = $.ajax({
+                    type: "put",
+                    url: apiUrl,
+                    contentType: 'application/json',
+                    data: JSON.stringify(data)
+                });
+                promise.success(function(pin) {
+                    pin.editable = true;
+                    var renderedPin = renderTemplate('#pins-template', {
+                        pins: [
+                            pin
+                        ]
+                    });
+                    $('#pins').find('.pin[data-id="'+pin.id+'"]').replaceWith(renderedPin);
+                    tileLayout();
+                    dismissModal(modal);
+                    editedPin = null;
+                });
+                promise.error(function() {
+                    message('Problem updating image.', 'alert alert-error');
+                });
+            } else {
                 var data = {
                     submitter: '/api/v1/user/'+currentUser.id+'/',
                     description: $('#pin-form-description').val(),
@@ -136,6 +177,7 @@ $(window).load(function() {
                 promise.error(function() {
                     message('Problem saving image.', 'alert alert-error');
                 });
+            }
         });
         $('#pin-form-close').click(function() {
             if (pinFromUrl) return window.close();
@@ -147,8 +189,9 @@ $(window).load(function() {
 
 
     // Start Init
-    window.pinForm = function() {
-        createPinForm();
+    window.pinForm = function(editPinId) {
+        editPinId = typeof editPinId !== 'undefined' ? editPinId : null;
+        createPinForm(editPinId);
     }
 
     if (getUrlParameter('pin-image-url')) {

pinry/static/js/pinry.js

@@ -13,7 +13,7 @@ $(window).load(function() {
      * was put into a function in order to adjust frequently on screen size 
      * changes.
      */
-    function tileLayout() {
+    window.tileLayout = function() {
         var blockContainer = $('#pins'),
             blocks = blockContainer.children('.pin'),
             blockMargin = 15,
@@ -48,6 +48,16 @@ $(window).load(function() {
             colHeights[sCol] += block.height()+(blockMargin);
         }
 
+        // Edit pin if pencil icon clicked
+        $('.icon-pencil').each(function() {
+            var thisPin = $(this);
+            $(this).off('click');
+            $(this).click(function() {
+                $(this).off('click');
+                pinForm($(this).data('id'));
+            });
+        });
+
         // Delete pin if trash icon clicked
         $('.icon-trash').each(function() {
             var thisPin = $(this);