286 lines
9.7 KiB
JavaScript
286 lines
9.7 KiB
JavaScript
$(document).ready(function() {
|
|
// 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) {
|
|
$(document).keypress(key_handler);
|
|
}
|
|
else {
|
|
$(document).keyup(key_handler);
|
|
}
|
|
|
|
// The plempable jQuery plugin containing most of the Plemp! UI
|
|
// functionality.
|
|
$.fn.plempable = function(data) {
|
|
var type = data.mime.split("/")[0];
|
|
this.draggable({ stack: ".draggable",
|
|
containment: "window",
|
|
cancel: "audio, video",
|
|
distance: 10,
|
|
stop: update_drag_info })
|
|
.click(raise_draggable);
|
|
// Make it resizable with parameters based on the type:
|
|
// FIXME: is there a better way than repeating the common options?
|
|
switch(type) {
|
|
case "image":
|
|
case "video":
|
|
this.resizable({ distance: 10,
|
|
start: raise_draggable,
|
|
stop: update_drag_info,
|
|
handles: "se",
|
|
minHeight: 250,
|
|
aspectRatio: true });
|
|
break;
|
|
case "audio":
|
|
this.resizable({ distance: 10,
|
|
start: raise_draggable,
|
|
stop: update_drag_info,
|
|
handles: "e",
|
|
minWidth: 300 });
|
|
break;
|
|
case "text":
|
|
case "application":
|
|
this.resizable({ distance: 10,
|
|
start: raise_draggable,
|
|
stop: update_drag_info,
|
|
handles: "se",
|
|
minWidth: 300,
|
|
minHeight: 150,
|
|
alsoResize: "#" + this.attr("id") + " pre" });
|
|
}
|
|
// Configure events for child elements.
|
|
this.find(".download").click({ id: this.attr("id") }, download_draggable);
|
|
this.find(".delete").click({ id: this.attr("id") }, confirm_delete_draggable);
|
|
this.find(".title").editable('draggables/' + this.attr("id"),
|
|
{ tooltip: "Click to edit…",
|
|
name: 'title',
|
|
submit: 'OK',
|
|
cancel: 'Cancel',
|
|
style: 'inherit' });
|
|
// FIXME: actually get the comments!
|
|
//this.find(".comments").text("Comments (0)");
|
|
// Fix the height of the pre block. FIXME: can this be improved?
|
|
this.find("pre").css({ height: (this.height() - 50) + "px" });
|
|
// Highlight contained code in the pre block.
|
|
this.find("pre code").each(function(idx, elem) {
|
|
hljs.highlightBlock(elem, ' ');
|
|
});
|
|
return $(this);
|
|
};
|
|
|
|
// Set up the dialogs.
|
|
$("#add_dialog").dialog({ autoOpen: false,
|
|
width: "auto",
|
|
show: "fade",
|
|
hide: "fade",
|
|
resizable: false,
|
|
modal: true,
|
|
close: clear_add_dialog_form,
|
|
buttons: { "Cancel": hide_add_dialog,
|
|
"Upload!": function() {
|
|
$("#add_form")[0].submit();
|
|
}}});
|
|
$("#delete_confirm").dialog({ autoOpen: false,
|
|
show: "fade",
|
|
hide: "fade",
|
|
resizable: false,
|
|
buttons: { "Cancel": function() {
|
|
$(this).dialog("close");
|
|
},
|
|
"Delete": function() {
|
|
$(this).dialog("close");
|
|
delete_draggable($(this).data("id"));
|
|
}}});
|
|
|
|
// For drag & drop file uploading via the filedrop jQuery plugin and HTML5.
|
|
$("body").filedrop({ url: '/draggables',
|
|
paramname: 'file',
|
|
data: { type: 'dnd' },
|
|
maxfiles: 1,
|
|
maxfilesize: 50,
|
|
error: handle_filedrop_error
|
|
});
|
|
|
|
// Populate the canvas with the draggables.
|
|
$.get("draggables", function(data) {
|
|
var timestamp = data.timestamp;
|
|
|
|
// Retrieve each draggable from the list and add it to the canvas.
|
|
$.each(data.list, function(drag_id, drag_info) {
|
|
add_draggable_to_canvas(drag_id, drag_info);
|
|
});
|
|
|
|
// Start a (long-poll) loop for update events from the server.
|
|
poll_server(timestamp);
|
|
}, "json");
|
|
});
|
|
|
|
// Callback functions
|
|
|
|
// Clear the form of the add dialog.
|
|
function clear_add_dialog_form() {
|
|
$("#add_form")[0].reset();
|
|
}
|
|
|
|
// Show the add dialog with a visual effect.
|
|
function show_add_dialog() {
|
|
$("#add_dialog").dialog("open");
|
|
}
|
|
|
|
// Hide the add dialog with a visual effect and reset the form when finished.
|
|
function hide_add_dialog() {
|
|
$("#add_dialog").dialog("close");
|
|
}
|
|
|
|
// Add a draggable element to the canvas.
|
|
function add_draggable_to_canvas(drag_id, drag_info) {
|
|
$.get("draggables/" + drag_id, function(data) {
|
|
$("#draggables").append(data);
|
|
// Assume we have appended a signle draggable here:
|
|
$(".draggable").last().plempable(drag_info).fadeIn('slow');
|
|
});
|
|
}
|
|
|
|
// Delete a draggable element from the canvas.
|
|
function delete_draggable_from_canvas(drag_id) {
|
|
$("#draggables #" + drag_id).hide('fade', 'slow', function() {
|
|
$(this).remove();
|
|
});
|
|
}
|
|
|
|
// Confirm the deletion of the draggable using the confirm dialog.
|
|
function confirm_delete_draggable(event) {
|
|
event.preventDefault();
|
|
$("#delete_confirm").data("id", event.data.id)
|
|
.dialog("open");
|
|
}
|
|
|
|
// Deletion has been confirmed, delete the draggable from the server and
|
|
// then the canvas.
|
|
function delete_draggable(drag_id) {
|
|
$.post("draggables/" + drag_id, {"_method": "delete"}, function(data) {
|
|
if (data) delete_draggable_from_canvas(drag_id);
|
|
}, "json");
|
|
}
|
|
|
|
// Download a draggable from the server.
|
|
function download_draggable(event) {
|
|
event.preventDefault();
|
|
window.open("download/" + event.data.id);
|
|
}
|
|
|
|
// Raise the draggable to the foreground.
|
|
function raise_draggable(event) {
|
|
var max = 0;
|
|
$(".draggable").each(function() {
|
|
var cur = parseFloat($(this).css("z-index"));
|
|
max = cur > max ? cur : max;
|
|
});
|
|
$(this).css("z-index", max + 1);
|
|
}
|
|
|
|
// Update the position of a draggable on the server.
|
|
function update_drag_info(event, ui) {
|
|
if (ui.size) {
|
|
$.post("draggables/" + ui.helper.context.id, ui.size, "json");
|
|
}
|
|
else {
|
|
$.post("draggables/" + ui.helper.context.id, ui.position, "json");
|
|
}
|
|
}
|
|
|
|
// Poll for server events via AJAX.
|
|
function poll_server(timestamp) {
|
|
$.ajax({ url: "events?timestamp=" + timestamp,
|
|
success: handle_server_event,
|
|
error: function(event) {
|
|
switch (event.statusText) {
|
|
case "timeout":
|
|
// Got a timeout, retry with the same timestamp.
|
|
poll_server(timestamp);
|
|
break;
|
|
case "abort":
|
|
case "error":
|
|
// Lost connection to the server for some reason!
|
|
set_message("Lost contact to the server somehow! " +
|
|
"Reload this page to try to fix that.");
|
|
}},
|
|
dataType: "json", timeout: 60 * 1000 });
|
|
};
|
|
|
|
// Handle server events.
|
|
function handle_server_event(event) {
|
|
var drag = $("#draggables #" + event.data.id);
|
|
switch(event.type) {
|
|
case "reposition":
|
|
drag.animate({ top: event.data.top, left: event.data.left });
|
|
break;
|
|
case "resize":
|
|
drag.animate({ width: event.data.width, height: event.data.height })
|
|
// Fix the height of the pre. FIXME: can this be improved?
|
|
.find("pre").animate({ height: event.data.height - 50 });
|
|
break;
|
|
case "title update":
|
|
$("#draggables #" + event.data.id + " h2 .title").text(event.data.title);
|
|
break;
|
|
case "add":
|
|
add_draggable_to_canvas(event.data.id, event.data.info);
|
|
break;
|
|
case "delete":
|
|
delete_draggable_from_canvas(event.data.id);
|
|
break;
|
|
default:
|
|
console.log("Unsupported event type!");
|
|
console.log(event);
|
|
}
|
|
poll_server(event.timestamp);
|
|
}
|
|
|
|
// Handle filedrop (drag & drop uploading) errors.
|
|
function handle_filedrop_error(err, file) {
|
|
switch(err) {
|
|
case 'BrowserNotSupported':
|
|
flash_message("Your browser does not support drag & drop! " +
|
|
"Please click this button to upload:");
|
|
break;
|
|
case 'TooManyFiles':
|
|
// user uploaded more than 'maxfiles'
|
|
flash_message("You can only upload a single file at once!");
|
|
break;
|
|
case 'FileTooLarge':
|
|
// program encountered a file whose size is greater than 'maxfilesize'
|
|
// FileTooLarge also has access to the file which was too large
|
|
// use file.name to reference the filename of the culprit file
|
|
flash_message("The file is too large! " +
|
|
"Ensure it is smaller than than 50MB.");
|
|
break;
|
|
default:
|
|
console.log(err, file);
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Flash some messsage.
|
|
function flash_message(msg) {
|
|
$("#message").html(msg)
|
|
$("#message").fadeIn('slow').delay(5000).fadeOut('fast');
|
|
}
|
|
|
|
// Set some messsage (permanent version of flash_message).
|
|
function set_message(msg) {
|
|
$("#message").html(msg)
|
|
$("#message").fadeIn('slow');
|
|
}
|
|
|
|
// Handle the Escape and Plus keys for hiding/showing the add dialog.
|
|
function key_handler(event) {
|
|
switch (event.keyCode) {
|
|
case 27: /* Escape */
|
|
hide_add_dialog();
|
|
break;
|
|
case 187: /* Plus (numpad) */
|
|
show_add_dialog();
|
|
break;
|
|
}
|
|
}
|