Dockery/Pinry
1
0
Fork 0
mirror of https://github.com/pinry/pinry.git synced 2025-11-15 17:35:50 +01:00
Code Issues Packages Projects Releases Activity

Pins are now editable

Browse Source
This commit is contained in:
Isaac Bythewood
2013-03-12 06:12:09 +00:00
parent bcf480e639
commit 28c791fd1e
2 changed files with 77 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
pinry/static/js/pin-form.js
View File

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

12
pinry/static/js/pinry.js
View File

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