Commits

Isaac Bythewood committed 28c791f

Pins are now editable

Comments (0)

Files changed (2)

pinry/static/js/pin-form.js

 
 $(window).load(function() {
     var uploadedImage = false;
+    var editedPin = null;
 
     // Start Helper Functions
     function getFormData() {
         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({
 
 
     // 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;
             e.preventDefault();
             $(this).off('click');
             $(this).addClass('disabled');
-            var data = {
-                submitter: '/api/v1/user/'+currentUser.id+'/',
-                description: $('#pin-form-description').val(),
-                tags: cleanTags($('#pin-form-tags').val())
-            };
-            if (uploadedImage) data.image = '/api/v1/image/'+uploadedImage+'/';
-            else data.url = $('#pin-form-image-url').val();
-            var promise = postPinData(data);
-            promise.success(function(pin) {
-                if (pinFromUrl) return window.close();
-                pin.editable = true;
-                pin = renderTemplate('#pins-template', {pins: [pin]});
-                $('#pins').prepend(pin);
-                dismissModal(modal);
-                uploadedImage = false;
-            });
-            promise.error(function() {
-                message('Problem saving image.', 'alert alert-error');
-            });
+            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(),
+                    tags: cleanTags($('#pin-form-tags').val())
+                };
+                if (uploadedImage) data.image = '/api/v1/image/'+uploadedImage+'/';
+                else data.url = $('#pin-form-image-url').val();
+                var promise = postPinData(data);
+                promise.success(function(pin) {
+                    if (pinFromUrl) return window.close();
+                    pin.editable = true;
+                    pin = renderTemplate('#pins-template', {pins: [pin]});
+                    $('#pins').prepend(pin);
+                    dismissModal(modal);
+                    uploadedImage = false;
+                });
+                promise.error(function() {
+                    message('Problem saving image.', 'alert alert-error');
+                });
+            }
         });
         $('#pin-form-close').click(function() {
             if (pinFromUrl) return window.close();
 
 
     // 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

      * 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,
             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);