diff --git a/pinry/static/css/pinry.css b/pinry/static/css/pinry.css index b495c30..374c5fb 100644 --- a/pinry/static/css/pinry.css +++ b/pinry/static/css/pinry.css @@ -3,6 +3,10 @@ body { background: #eee; } +a { + cursor: pointer; +} + #bookmarklet { cursor: move; } diff --git a/pinry/static/js/bookmarklet.js b/pinry/static/js/bookmarklet.js index 4039325..73d8ded 100644 --- a/pinry/static/js/bookmarklet.js +++ b/pinry/static/js/bookmarklet.js @@ -71,7 +71,7 @@ $(document).ready(function() { }); $(image).click(function() { var popUrl = getFormUrl()+imageUrl; - window.open(popUrl, '', 'width=600,height=500,toolbar=0,menubar=0'); + window.open(popUrl, '', 'width=590,height=439,toolbar=0,menubar=0'); $('#pinry-images').remove(); }); return $('#pinry-images').append(image); diff --git a/pinry/static/js/helpers.js b/pinry/static/js/helpers.js index 8668ff6..4e52b0d 100644 --- a/pinry/static/js/helpers.js +++ b/pinry/static/js/helpers.js @@ -18,7 +18,7 @@ function cleanTags(tags) { tags = tags.split(','); for (var i in tags) tags[i] = tags[i].trim(); } - return tags + return tags; } @@ -26,3 +26,21 @@ function getPinData(pinId) { var apiUrl = '/api/v1/pin/'+pinId+'/?format=json'; return $.get(apiUrl); } + +function postPinData(data) { + return $.ajax({ + type: "post", + url: "/api/v1/pin/", + contentType: 'application/json', + data: JSON.stringify(data) + }); +} + + +function getUrlParameter(name) { + var decode = decodeURI( + (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] + ); + if (decode == 'null') return null; + else return decode; +} diff --git a/pinry/static/js/pin-form.js b/pinry/static/js/pin-form.js index aaea594..3b3e575 100644 --- a/pinry/static/js/pin-form.js +++ b/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 - 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] - ); + // Start View Functions + function createPinForm() { + $('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 + - if ($('#display-pin-form').length >= 1) createPinForm(); + // Start Init + window.pinForm = function() { + createPinForm(); + } - $('#call-pin-form').click(function() { + if (getUrlParameter('pin-image-url')) { createPinForm(); - }); + } + // End Init }); diff --git a/pinry/templates/base.html b/pinry/templates/base.html index bfd5787..4e0474e 100644 --- a/pinry/templates/base.html +++ b/pinry/templates/base.html @@ -47,7 +47,7 @@