Allow pin deleting from interface

pinry/static/js/helpers.js

@@ -37,6 +37,14 @@ function getPinData(pinId) {
     return $.get(apiUrl);
 }
 
+
+function deletePinData(pinId) {
+    var apiUrl = '/api/v1/pin/'+pinId+'/?format=json';
+    return $.ajax(apiUrl, {
+        type: 'DELETE'
+    });
+}
+
 function postPinData(data) {
     return $.ajax({
         type: "post",

pinry/static/js/pin-form.js

@@ -3,7 +3,7 @@
  * 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
+ * Updated: March 3rd, 2013
  * Require: jQuery, Pinry JavaScript Helpers
  */
 
@@ -110,6 +110,7 @@ $(window).load(function() {
             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);

pinry/static/js/pinry.js

@@ -44,6 +44,19 @@ $(window).load(function() {
             colHeights[sCol] += block.height()+(blockMargin);
         }
 
+            // Delete pin if trash icon clicked
+            $('.icon-trash').each(function() {
+                var thisPin = $(this);
+                $(this).click(function() {
+                    $(this).off('click');
+                    var promise = deletePinData($(this).data('id'));
+                    promise.success(function() {
+                        thisPin.parent().parent().parent().remove();
+                        tileLayout();
+                    });
+                });
+            });
+
         $('.spinner').css('display', 'none');
         blockContainer.css('height', colHeights.sort().slice(-1)[0]);
     }

pinry/templates/includes/pins.html

@@ -5,7 +5,10 @@
             {{#if editable}}
                 <div class="editable">
                     <div class="borderable">
-                        <i class="icon-white icon-pencil"></i>
+                        <i class="icon-white icon-trash" data-id="{{id}}"></i>
+                    </div>
+                    <div class="borderable">
+                        <i class="icon-white icon-pencil" data-id="{{id}}"></i>
                     </div>
                 </div>
             {{/if}}