120 lines
3.4 KiB
JavaScript
120 lines
3.4 KiB
JavaScript
// Main function to initialise plemp
|
|
function init_plemp(base_url) {
|
|
setup_pu();
|
|
document.onkeyup=key_handler;
|
|
}
|
|
|
|
// Creates a Draggable for each div with the given ID.
|
|
function setup_draggables() {
|
|
$$('.draggable').each(function(d) { setup_draggable(d.id); });
|
|
}
|
|
|
|
function setup_draggable(id) {
|
|
drag = new Draggable(id, { scroll: window });
|
|
old_endeffect = drag.options.endeffect;
|
|
drag.options.endeffect = function(element) {
|
|
old_endeffect(element);
|
|
element.style.zIndex = new_ZIndex();
|
|
}
|
|
drag_obs = new DragRegObserver($(id));
|
|
Draggables.addObserver(drag_obs);
|
|
$(id).dirty = false;
|
|
$(id).appear();
|
|
}
|
|
|
|
// Observer for draggables that commits the drag changes to the server.
|
|
var DragRegObserver = Class.create();
|
|
DragRegObserver.prototype = {
|
|
initialize: function(element) {
|
|
this.element = $(element);
|
|
},
|
|
onStart: function(eventName, draggable, event) {
|
|
draggable.element.dirty = true;
|
|
},
|
|
onEnd: function (eventName, draggable, event) {
|
|
if (Draggables.activeDraggable.element == this.element) {
|
|
elem = draggable.element;
|
|
new Ajax.Request(document.baseURI + 'savepos/' + elem.id +
|
|
'/' + elem.style.top + '/' + elem.style.left, {
|
|
onSuccess: function(response) { elem.dirty = false; }
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// Global function to handle key presses.
|
|
function key_handler(e) {
|
|
var key_code = e.keyCode;
|
|
|
|
switch(key_code) {
|
|
case 27: /* Escape */
|
|
hide_add_dialog();
|
|
break;
|
|
case 187: /* Plus */
|
|
show_add_dialog();
|
|
break;
|
|
}
|
|
}
|
|
|
|
//// Helper functions
|
|
|
|
// Shows the upload/add dialog.
|
|
function show_add_dialog() {
|
|
if (!$('add_dialog').visible()) {
|
|
$('text').clear();
|
|
$('add_dialog').appear({duration: 0.25});
|
|
}
|
|
}
|
|
|
|
// Hides and clears the upload/add dialog.
|
|
function hide_add_dialog() {
|
|
if ($('add_dialog').visible()) {
|
|
$('add_dialog').fade({duration: 0.25});
|
|
$('add_form').reset();
|
|
}
|
|
}
|
|
|
|
// Returns a Z-index higher with respect to the Z-index of all existing
|
|
// draggables.
|
|
function new_ZIndex() {
|
|
cur_indices = $$('.draggable').map(function(d) { return d.getStyle("z-index") })
|
|
max_index = cur_indices.max();
|
|
return parseInt(max_index) + 1;
|
|
}
|
|
|
|
// Moves a draggable with the given ID to a position unless:
|
|
// it is currently being dragged, or it has been dragged but not this is
|
|
// not registered at the server side yet, or it is already on the right spot.
|
|
function move_draggable_if_needed(id, left, top) {
|
|
var actDrag = Draggables.activeDraggable;
|
|
if ($(id).dirty || (actDrag && actDrag.element == $(id))) {
|
|
return false;
|
|
}
|
|
if ($(id).style.left != left || $(id).style.top != top) {
|
|
new Effect.Move(id, { x: left, y: top, mode: 'absolute' });
|
|
}
|
|
}
|
|
|
|
// Sets up an Ajax periodical updater to retrieve the current global
|
|
// state from the server. Moves the draggables accordingly.
|
|
var pu = null;
|
|
function setup_pu() {
|
|
if (!pu) {
|
|
pu = new Ajax.PeriodicalUpdater('', document.baseURI + "current/", {
|
|
method: 'get',
|
|
frequency: 5,
|
|
evalJSON: 'force',
|
|
onSuccess: function(t) {
|
|
var json = t.responseJSON;
|
|
if (json) {
|
|
$H(json).each(function(pair) {
|
|
move_draggable_if_needed(pair.key, pair.value[0],
|
|
pair.value[1]);
|
|
});
|
|
}
|
|
},
|
|
onFailure: function() { alert("Something went wrong!") }
|
|
});
|
|
}
|
|
}
|