paul/plemp-node
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Refactored the draggable setup into the plempable jQuery plugin

Browse source
This commit is contained in:
Paul van Tilburg 2012-01-16 10:22:22 +01:00
parent 33f5f1511e
commit 5b3edc5e53
1 changed files with 38 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
public/javascripts/plemp-ui.js
View file

@ -1,5 +1,5 @@
$(document).ready(function() { $(document).ready(function() {
// Handlers for showing/hiding the upload dialog via buttons & keys. // Handlers for showing/hiding the upload dialog via clicks & keys.
$("#add").click(show_add_dialog); $("#add").click(show_add_dialog);
$("#add_form #cancel").click(hide_add_dialog); $("#add_form #cancel").click(hide_add_dialog);
if ($.browser.mozilla) { if ($.browser.mozilla) {
@ -9,50 +9,59 @@ $(document).ready(function() {
$(document).keyup(key_handler); $(document).keyup(key_handler);
} }
// Populate the canvas with the draggables. // The plempable jQuery plugin containing most of the Plemp! UI
$.get("draggables", function(data) { // functionality.
var last_drag; $.fn.plempable = function(data) {
$.each(data, function(key, val) { console.log(data);
$.get("draggables/" + key, function(data) { this.draggable({ stack: ".draggable",
$("#draggables").append(data);
// Assume we have appended one draggable here:
last_drag = $(".draggable").last();
last_drag.draggable({ stack: ".draggable",
containment: "window", containment: "window",
stop: update_drag_info }); stop: update_drag_info })
last_drag.find(".delete").click({ id: last_drag[0].id, .hover(function() { $(this).find(".comments").fadeIn(); },
element: last_drag }, function() { $(this).find(".comments").fadeOut(); });
this.find(".delete").click({ id: this.id,
element: this },
delete_draggable); delete_draggable);
last_drag.find(".title").editable('draggables/' + last_drag[0].id, this.find(".title").editable('draggables/' + this.id,
{ tooltip: "Click to edit…", { tooltip: "Click to edit…",
name: 'title', name: 'title',
submit: 'OK', submit: 'OK',
cancel: 'Discard', cancel: 'Discard',
style: 'inherit' }); style: 'inherit' });
last_drag.hover(function() { $(this).find(".comments").fadeIn(); }, // FIXME: actually get the comments!
function() { $(this).find(".comments").fadeOut(); }); this.find(".comments").text("Comments (0)").hide();
// FIXME: get the comments!
last_drag.find(".comments").text("Comments (0)").hide();
// Highlight contained code. // Highlight contained code.
last_drag.find("pre code").each(function(idx, elem) { this.find("pre code").each(function(idx, elem) {
hljs.highlightBlock(elem, ' '); hljs.highlightBlock(elem, ' ');
}); });
}) };
})
// Populate the canvas with the draggables.
$.get("draggables", function(data) {
$.each(data, function(drag_id, drag_info) {
$.get("draggables/" + drag_id, function(data) {
$("#draggables").append(data);
// Assume we have appended one draggable here:
$(".draggable").last().plempable(drag_info);
});
});
}, "json"); }, "json");
}); });
// Callback functions. // Callback functions.
// Show the add dialog with a visual effect.
function show_add_dialog() { function show_add_dialog() {
$('#add_dialog').fadeIn('slow'); $('#add_dialog').fadeIn('slow');
} }
// Hide the add dialog with a visual effect and reset the form when finished.
function hide_add_dialog() { function hide_add_dialog() {
$("#add_dialog").fadeOut('fast', function() { $("#add_dialog").fadeOut('fast', function() {
$("#add_form")[0].reset(); $("#add_form")[0].reset();
}); });
} }
// Delete a draggable on the server; remove it with a visual effect.
function delete_draggable(event) { function delete_draggable(event) {
drag_id = event.data.id drag_id = event.data.id
$.post("draggables/" + drag_id, {"_method": "delete"}, function(data) { $.post("draggables/" + drag_id, {"_method": "delete"}, function(data) {
@ -63,10 +72,12 @@ function delete_draggable(event) {
}, "json"); }, "json");
} }
// Update the position of a draggable on the server.
function update_drag_info(event, ui) { function update_drag_info(event, ui) {
$.post("draggables/" + ui.helper.context.id, ui.position, "json"); $.post("draggables/" + ui.helper.context.id, ui.position, "json");
} }
// Handle the Escape and Plus keys for hiding/showing the add dialog.
function key_handler(event) { function key_handler(event) {
switch (event.keyCode) { switch (event.keyCode) {
case 27: /* Escape */ case 27: /* Escape */