Working new pin form

pinry/api/api.py

@@ -84,3 +84,4 @@ class PinResource(ModelResource):
         resource_name = 'pin'
         include_resource_uri = False
         authorization = DjangoAuthorization()
+        ordering = '-published'

pinry/static/js/bookmarklet.js

@@ -37,7 +37,14 @@ $(document).ready(function() {
             'cursor': 'pointer'
         });
         wrapper.click(function() {
-            alert('Added');
+            $.ajax({
+                type: "post",
+                url: "http://nebula.bythewood.me/api/v1/pin/",
+                contentType: 'application/json',
+                data: JSON.stringify({
+                    url: imageUrl
+                })
+            });
             $('.pinry-images').remove();
         });
         return wrapper;

pinry/static/js/pin-form.js

@@ -0,0 +1,43 @@
+$(window).load(function() {
+    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() {
+            $('#pin-form-image-preview').html('<img src="'+$(this).val()+'"/>');
+        });
+        $('#pin-form-submit').click(function(e) {
+            var tags = $('#pin-form-tags').val()
+            tags = tags.split(',')
+            for (var tag in tags) tags[tag] = tags[tag].trim();
+            $.ajax({
+                type: "post",
+                url: "/api/v1/pin/",
+                contentType: 'application/json',
+                data: JSON.stringify({
+                    submitter: '/api/v1/user/'+currentUser+'/',
+                    url: $('#pin-form-image-url').val(),
+                    description: $('#pin-form-description').val(),
+                    tags: tags
+                })
+            });
+
+            $('#pin-form-close').click(function() {
+                $('#pin-form').remove();
+            });
+
+            $('#pin-form').remove();
+
+            e.preventDefault();
+        });
+
+        $('#pin-form-close').click(function() {
+            $('#pin-form').remove();
+        });
+        e.preventDefault();
+    }
+
+    $('#call-pin-form').click(function() {
+        createPinForm();
+    });
+});

pinry/static/js/pinry.js

@@ -67,10 +67,10 @@ $(window).load(function() {
         $('.spinner').css('display', 'block');
 
         // Fetch our pins from the api using our current offset
-        $.get('/api/v1/pin/?format=json&offset='+String(offset), function(pins) {
+        $.get('/api/v1/pin/?format=json&ordering=-id&offset='+String(offset), function(pins) {
             // Set which items are editable by the current user
             for (var i=0; i < pins.objects.length; i++) 
-                pins.objects[i].editable = (pins.objects[i].submitter.username == currentUser);
+                pins.objects[i].editable = (pins.objects[i].submitter.id == currentUser);
 
             // Use the fetched pins as our context for our pins template
             var template = Handlebars.compile($('#pins-template').html());

pinry/templates/core/base.html

@@ -24,7 +24,7 @@
                 <ul class="nav pull-right">
                     {% if user.is_authenticated %}
                         <li><a href="#" class="bookmarklet-link">Bookmarklet</a></li>
-                        <li><a href="#new-pin" data-toggle="modal">New Pin</a></li>
+                        <li><a href="#call-pin-form" id="call-pin-form">New Pin</a></li>
                         <li><a href="{% url 'core:logout' %}">Logout</a></li>
                     {% else %}
                         <li><a href="{% url 'core:login' %}">Login</a></li>
@@ -44,14 +44,12 @@
 
         {% block yield %}{% endblock %}
 
-        {% new_pin request %}
-
         {% block templates %}{% endblock %}
 
         {% compress js inline %}
             <script>
                 var apiLimitPerPage = {{ API_LIMIT_PER_PAGE }},
-                    currentUser = "{{ user.username }}";
+                    currentUser = "{{ user.id }}";
             </script>
         {% endcompress %}
 
@@ -62,6 +60,7 @@
             <script src="{{ STATIC_URL }}js/messages.js"></script>
             <script src="{{ STATIC_URL }}js/lightbox.js"></script>
             <script src="{{ STATIC_URL }}js/pinry.js"></script>
+            <script src="{{ STATIC_URL }}js/pin-form.js"></script>
         {% endcompress %}
     </body>
 </html>

pinry/templates/pins/recent_pins.html

@@ -47,8 +47,8 @@
                         </div>
                     </div>
                 {{/if}}
-                <a href="{{images.standard.url}}" class="lightbox" data-username="{{submitter.username}}" data-tags="{{tags}}" data-gravatar="{{submitter.gravatar}}">
+                <a href="{{image.standard.image}}" class="lightbox" data-username="{{submitter.username}}" data-tags="{{tags}}" data-gravatar="{{submitter.gravatar}}">
-                    <img src="{{images.thumbnail.url}}" />
+                    <img src="{{image.thumbnail.image}}" />
                 </a>
                 {{#if description}}
                     <p>{{description}}</p>
@@ -70,5 +70,42 @@
             </div>
             {{/each}}
         </script>
+
+        <script id="pin-form-template" type="text/x-handlebars-template">
+            <div class="modal" id="pin-form">
+                <div class="modal-header">
+                    <h3>New Pin</h3>
+                </div>
+                <div class="modal-body">
+                    <div class="span3" id="pin-form-image-preview">
+                        Image Preview
+                    </div>
+                    <div class="span3">
+                        <div class="control-group">
+                            <label class="control-label" for="pin-form-image-url">Image URL</label>
+                            <div class="controls">
+                                <input type="text" name="pin-form-image-url" id="pin-form-image-url"/>
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label" for="pin-form-description">Description</label>
+                            <div class="controls">
+                                <textarea name="pin-form-description" id="pin-form-description"></textarea>
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label" for="pin-form-tags">Tags</label>
+                            <div class="controls">
+                                <input type="text" name="pin-form-tags" id="pin-form-tags"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-primary" id="pin-form-submit">Post</button>
+                    <button class="btn" id="pin-form-close">Cancel</a>
+                </div>
+            </div>
+        </script>
     {% endverbatim %}
 {% endblock %}