Refactored the draggable setup into the plempable jQuery plugin
This commit is contained in:
parent
33f5f1511e
commit
5b3edc5e53
1 changed files with 38 additions and 27 deletions
|
@ -1,5 +1,5 @@
|
|||
$(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_form #cancel").click(hide_add_dialog);
|
||||
if ($.browser.mozilla) {
|
||||
|
@ -9,50 +9,59 @@ $(document).ready(function() {
|
|||
$(document).keyup(key_handler);
|
||||
}
|
||||
|
||||
// The plempable jQuery plugin containing most of the Plemp! UI
|
||||
// functionality.
|
||||
$.fn.plempable = function(data) {
|
||||
console.log(data);
|
||||
this.draggable({ stack: ".draggable",
|
||||
containment: "window",
|
||||
stop: update_drag_info })
|
||||
.hover(function() { $(this).find(".comments").fadeIn(); },
|
||||
function() { $(this).find(".comments").fadeOut(); });
|
||||
this.find(".delete").click({ id: this.id,
|
||||
element: this },
|
||||
delete_draggable);
|
||||
this.find(".title").editable('draggables/' + this.id,
|
||||
{ tooltip: "Click to edit…",
|
||||
name: 'title',
|
||||
submit: 'OK',
|
||||
cancel: 'Discard',
|
||||
style: 'inherit' });
|
||||
// FIXME: actually get the comments!
|
||||
this.find(".comments").text("Comments (0)").hide();
|
||||
// Highlight contained code.
|
||||
this.find("pre code").each(function(idx, elem) {
|
||||
hljs.highlightBlock(elem, ' ');
|
||||
});
|
||||
};
|
||||
|
||||
// Populate the canvas with the draggables.
|
||||
$.get("draggables", function(data) {
|
||||
var last_drag;
|
||||
$.each(data, function(key, val) {
|
||||
$.get("draggables/" + key, 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:
|
||||
last_drag = $(".draggable").last();
|
||||
last_drag.draggable({ stack: ".draggable",
|
||||
containment: "window",
|
||||
stop: update_drag_info });
|
||||
last_drag.find(".delete").click({ id: last_drag[0].id,
|
||||
element: last_drag },
|
||||
delete_draggable);
|
||||
last_drag.find(".title").editable('draggables/' + last_drag[0].id,
|
||||
{ tooltip: "Click to edit…",
|
||||
name: 'title',
|
||||
submit: 'OK',
|
||||
cancel: 'Discard',
|
||||
style: 'inherit' });
|
||||
last_drag.hover(function() { $(this).find(".comments").fadeIn(); },
|
||||
function() { $(this).find(".comments").fadeOut(); });
|
||||
// FIXME: get the comments!
|
||||
last_drag.find(".comments").text("Comments (0)").hide();
|
||||
// Highlight contained code.
|
||||
last_drag.find("pre code").each(function(idx, elem) {
|
||||
hljs.highlightBlock(elem, ' ');
|
||||
});
|
||||
})
|
||||
})
|
||||
$(".draggable").last().plempable(drag_info);
|
||||
});
|
||||
});
|
||||
}, "json");
|
||||
});
|
||||
|
||||
// Callback functions.
|
||||
|
||||
// Show the add dialog with a visual effect.
|
||||
function show_add_dialog() {
|
||||
$('#add_dialog').fadeIn('slow');
|
||||
}
|
||||
|
||||
// Hide the add dialog with a visual effect and reset the form when finished.
|
||||
function hide_add_dialog() {
|
||||
$("#add_dialog").fadeOut('fast', function() {
|
||||
$("#add_form")[0].reset();
|
||||
});
|
||||
}
|
||||
|
||||
// Delete a draggable on the server; remove it with a visual effect.
|
||||
function delete_draggable(event) {
|
||||
drag_id = event.data.id
|
||||
$.post("draggables/" + drag_id, {"_method": "delete"}, function(data) {
|
||||
|
@ -63,10 +72,12 @@ function delete_draggable(event) {
|
|||
}, "json");
|
||||
}
|
||||
|
||||
// Update the position of a draggable on the server.
|
||||
function update_drag_info(event, ui) {
|
||||
$.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) {
|
||||
switch (event.keyCode) {
|
||||
case 27: /* Escape */
|
||||
|
|
Reference in a new issue