314 lines
14 KiB
JavaScript
314 lines
14 KiB
JavaScript
|
(function ($) {
|
||
|
|
// Ok, let's do eeet
|
||
|
|
|
||
|
|
ACTIVE_NODE_BG_COLOR = '#B7D7E8';
|
||
|
|
RECENTLY_MOVED_COLOR = '#FFFF00';
|
||
|
|
RECENTLY_MOVED_FADEOUT = '#FFFFFF';
|
||
|
|
ABORT_COLOR = '#EECCCC';
|
||
|
|
DRAG_LINE_COLOR = '#AA00AA';
|
||
|
|
|
||
|
|
RECENTLY_FADE_DURATION = 2000;
|
||
|
|
|
||
|
|
// This is the basic Node class, which handles UI tree operations for each 'row'
|
||
|
|
var Node = function (elem) {
|
||
|
|
var $elem = $(elem);
|
||
|
|
var node_id = $elem.attr('node');
|
||
|
|
var parent_id = $elem.attr('parent');
|
||
|
|
var level = parseInt($elem.attr('level'));
|
||
|
|
var children_num = parseInt($elem.attr('children-num'));
|
||
|
|
return {
|
||
|
|
elem: elem,
|
||
|
|
$elem: $elem,
|
||
|
|
node_id: node_id,
|
||
|
|
parent_id: parent_id,
|
||
|
|
level: level,
|
||
|
|
has_children: function () {
|
||
|
|
return children_num > 0;
|
||
|
|
},
|
||
|
|
node_name: function () {
|
||
|
|
// Returns the text of the node
|
||
|
|
return $elem.find('th a:not(.collapse)').text();
|
||
|
|
},
|
||
|
|
is_collapsed: function () {
|
||
|
|
return $elem.find('a.collapse').hasClass('collapsed');
|
||
|
|
},
|
||
|
|
children: function () {
|
||
|
|
return $('tr[parent=' + node_id + ']');
|
||
|
|
},
|
||
|
|
collapse: function () {
|
||
|
|
// For each children, hide it's childrens and so on...
|
||
|
|
$.each(this.children(),function () {
|
||
|
|
var node = new Node(this);
|
||
|
|
node.collapse();
|
||
|
|
}).hide();
|
||
|
|
// Swicth class to set the proprt expand/collapse icon
|
||
|
|
$elem.find('a.collapse').removeClass('expanded').addClass('collapsed');
|
||
|
|
},
|
||
|
|
parent_node: function () {
|
||
|
|
// Returns a Node object of the parent
|
||
|
|
return new Node($('tr[node=' + parent_id + ']', $elem.parent())[0]);
|
||
|
|
},
|
||
|
|
expand: function () {
|
||
|
|
// Display each kid (will display in collapsed state)
|
||
|
|
this.children().show();
|
||
|
|
// Swicth class to set the proprt expand/collapse icon
|
||
|
|
$elem.find('a.collapse').removeClass('collapsed').addClass('expanded');
|
||
|
|
|
||
|
|
},
|
||
|
|
toggle: function () {
|
||
|
|
if (this.is_collapsed()) {
|
||
|
|
this.expand();
|
||
|
|
} else {
|
||
|
|
this.collapse();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
clone: function () {
|
||
|
|
return $elem.clone();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
$(document).ready(function () {
|
||
|
|
|
||
|
|
// begin csrf token code
|
||
|
|
// Taken from http://docs.djangoproject.com/en/dev/ref/contrib/csrf/#ajax
|
||
|
|
$(document).ajaxSend(function (event, xhr, settings) {
|
||
|
|
function getCookie(name) {
|
||
|
|
var cookieValue = null;
|
||
|
|
if (document.cookie && document.cookie != '') {
|
||
|
|
var cookies = document.cookie.split(';');
|
||
|
|
for (var i = 0; i < cookies.length; i++) {
|
||
|
|
var cookie = jQuery.trim(cookies[i]);
|
||
|
|
// Does this cookie string begin with the name we want?
|
||
|
|
if (cookie.substring(0, name.length + 1) == (name + '=')) {
|
||
|
|
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return cookieValue;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
|
||
|
|
// Only send the token to relative URLs i.e. locally.
|
||
|
|
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// end csrf token code
|
||
|
|
|
||
|
|
|
||
|
|
// Don't activate drag or collapse if GET filters are set on the page
|
||
|
|
if ($('#has-filters').val() === "1") {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
$body = $('body');
|
||
|
|
|
||
|
|
// Activate all rows for drag & drop
|
||
|
|
// then bind mouse down event
|
||
|
|
$('td.drag-handler span').addClass('active').bind('mousedown', function (evt) {
|
||
|
|
$ghost = $('<div id="ghost"></div>');
|
||
|
|
$drag_line = $('<div id="drag_line"><span></span></div>');
|
||
|
|
$ghost.appendTo($body);
|
||
|
|
$drag_line.appendTo($body);
|
||
|
|
|
||
|
|
var stop_drag = function () {
|
||
|
|
$ghost.remove();
|
||
|
|
$drag_line.remove();
|
||
|
|
$body.enableSelection().unbind('mousemove').unbind('mouseup');
|
||
|
|
node.elem.removeAttribute('style');
|
||
|
|
};
|
||
|
|
|
||
|
|
// Create a clone create the illusion that we're moving the node
|
||
|
|
var node = new Node($(this).closest('tr')[0]);
|
||
|
|
cloned_node = node.clone();
|
||
|
|
node.$elem.css({
|
||
|
|
'background': ACTIVE_NODE_BG_COLOR
|
||
|
|
});
|
||
|
|
|
||
|
|
$targetRow = null;
|
||
|
|
as_child = false;
|
||
|
|
|
||
|
|
// Now make the new clone move with the mouse
|
||
|
|
$body.disableSelection().bind('mousemove',function (evt2) {
|
||
|
|
$ghost.html(cloned_node).css({ // from FeinCMS :P
|
||
|
|
'opacity': .8,
|
||
|
|
'position': 'absolute',
|
||
|
|
'top': evt2.pageY,
|
||
|
|
'left': evt2.pageX - 30,
|
||
|
|
'width': 600
|
||
|
|
});
|
||
|
|
// Iterate through all rows and see where am I moving so I can place
|
||
|
|
// the drag line accordingly
|
||
|
|
rowHeight = node.$elem.height();
|
||
|
|
$('tr', node.$elem.parent()).each(function (index, element) {
|
||
|
|
$row = $(element);
|
||
|
|
rtop = $row.offset().top;
|
||
|
|
// The tooltop will display whether I'm droping the element as
|
||
|
|
// child or sibling
|
||
|
|
$tooltip = $drag_line.find('span');
|
||
|
|
$tooltip.css({
|
||
|
|
'left': node.$elem.width() - $tooltip.width(),
|
||
|
|
'height': rowHeight,
|
||
|
|
});
|
||
|
|
node_top = node.$elem.offset().top;
|
||
|
|
// Check if you are dragging over the same node
|
||
|
|
if (evt2.pageY >= node_top && evt2.pageY <= node_top + rowHeight) {
|
||
|
|
$targetRow = null;
|
||
|
|
$tooltip.text(gettext('Abort'));
|
||
|
|
$drag_line.css({
|
||
|
|
'top': node_top,
|
||
|
|
'height': rowHeight,
|
||
|
|
'borderWidth': 0,
|
||
|
|
'opacity': 0.8,
|
||
|
|
'backgroundColor': ABORT_COLOR
|
||
|
|
});
|
||
|
|
} else
|
||
|
|
// Check if mouse is over this row
|
||
|
|
if (evt2.pageY >= rtop && evt2.pageY <= rtop + rowHeight / 2) {
|
||
|
|
// The mouse is positioned on the top half of a $row
|
||
|
|
$targetRow = $row;
|
||
|
|
as_child = false;
|
||
|
|
$drag_line.css({
|
||
|
|
'left': node.$elem.offset().left,
|
||
|
|
'width': node.$elem.width(),
|
||
|
|
'top': rtop,
|
||
|
|
'borderWidth': '5px',
|
||
|
|
'height': 0,
|
||
|
|
'opacity': 1
|
||
|
|
});
|
||
|
|
$tooltip.text(gettext('As Sibling'));
|
||
|
|
} else if (evt2.pageY >= rtop + rowHeight / 2 && evt2.pageY <= rtop + rowHeight) {
|
||
|
|
// The mouse is positioned on the bottom half of a row
|
||
|
|
$targetRow = $row;
|
||
|
|
target_node = new Node($targetRow[0]);
|
||
|
|
if (target_node.is_collapsed()) {
|
||
|
|
target_node.expand();
|
||
|
|
}
|
||
|
|
as_child = true;
|
||
|
|
$drag_line.css({
|
||
|
|
'top': rtop,
|
||
|
|
'left': node.$elem.offset().left,
|
||
|
|
'height': rowHeight,
|
||
|
|
'opacity': 0.4,
|
||
|
|
'width': node.$elem.width(),
|
||
|
|
'borderWidth': 0,
|
||
|
|
'backgroundColor': DRAG_LINE_COLOR
|
||
|
|
});
|
||
|
|
$tooltip.text(gettext('As child'));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}).bind('mouseup',function () {
|
||
|
|
if ($targetRow !== null) {
|
||
|
|
target_node = new Node($targetRow[0]);
|
||
|
|
if (target_node.node_id !== node.node_id) {
|
||
|
|
/*alert('Insert node ' + node.node_name() + ' as child of: '
|
||
|
|
+ target_node.parent_node().node_name() + '\n and sibling of: '
|
||
|
|
+ target_node.node_name());*/
|
||
|
|
// Call $.ajax so we can handle the error
|
||
|
|
// On Drop, make an XHR call to perform the node move
|
||
|
|
$.ajax({
|
||
|
|
url: window.MOVE_NODE_ENDPOINT,
|
||
|
|
type: 'POST',
|
||
|
|
data: {
|
||
|
|
node_id: node.node_id,
|
||
|
|
parent_id: target_node.parent_id,
|
||
|
|
sibling_id: target_node.node_id,
|
||
|
|
as_child: as_child ? 1 : 0
|
||
|
|
},
|
||
|
|
complete: function (req, status) {
|
||
|
|
// http://stackoverflow.com/questions/1439895/add-a-hash-with-javascript-to-url-without-scrolling-page/1439910#1439910
|
||
|
|
node.$elem.remove();
|
||
|
|
window.location.hash = 'node-' + node.node_id;
|
||
|
|
window.location.reload();
|
||
|
|
},
|
||
|
|
error: function (req, status, error) {
|
||
|
|
// On error (!200) also reload to display
|
||
|
|
// the message
|
||
|
|
node.$elem.remove();
|
||
|
|
window.location.hash = 'node-' + node.node_id;
|
||
|
|
window.location.reload();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
stop_drag();
|
||
|
|
}).bind('keyup', function (kbevt) {
|
||
|
|
// Cancel drag on escape
|
||
|
|
if (kbevt.keyCode === 27) {
|
||
|
|
stop_drag();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$('a.collapse').click(function () {
|
||
|
|
var node = new Node($(this).closest('tr')[0]); // send the DOM node, not jQ
|
||
|
|
node.toggle();
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
var hash = window.location.hash;
|
||
|
|
// This is a hack, the actual element's id ends in '-id' but the url's hash
|
||
|
|
// doesn't, I'm doing this to avoid scrolling the page... is that a good thing?
|
||
|
|
if (hash) {
|
||
|
|
$(hash + '-id').animate({
|
||
|
|
backgroundColor: RECENTLY_MOVED_COLOR
|
||
|
|
}, RECENTLY_FADE_DURATION, function () {
|
||
|
|
$(this).animate({
|
||
|
|
backgroundColor: RECENTLY_MOVED_FADEOUT
|
||
|
|
}, RECENTLY_FADE_DURATION, function () {
|
||
|
|
this.removeAttribute('style');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})(django.jQuery);
|
||
|
|
|
||
|
|
// http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor/2302005#2302005
|
||
|
|
(function (d) {
|
||
|
|
d.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function (f, e) {
|
||
|
|
d.fx.step[e] = function (g) {
|
||
|
|
if (!g.colorInit) {
|
||
|
|
g.start = c(g.elem, e);
|
||
|
|
g.end = b(g.end);
|
||
|
|
g.colorInit = true
|
||
|
|
}
|
||
|
|
g.elem.style[e] = "rgb(" + [Math.max(Math.min(parseInt((g.pos * (g.end[0] - g.start[0])) + g.start[0]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[1] - g.start[1])) + g.start[1]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[2] - g.start[2])) + g.start[2]), 255), 0)].join(",") + ")"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
function b(f) {
|
||
|
|
var e;
|
||
|
|
if (f && f.constructor == Array && f.length == 3) {
|
||
|
|
return f
|
||
|
|
}
|
||
|
|
if (e = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)) {
|
||
|
|
return[parseInt(e[1]), parseInt(e[2]), parseInt(e[3])]
|
||
|
|
}
|
||
|
|
if (e = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)) {
|
||
|
|
return[parseFloat(e[1]) * 2.55, parseFloat(e[2]) * 2.55, parseFloat(e[3]) * 2.55]
|
||
|
|
}
|
||
|
|
if (e = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)) {
|
||
|
|
return[parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)]
|
||
|
|
}
|
||
|
|
if (e = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)) {
|
||
|
|
return[parseInt(e[1] + e[1], 16), parseInt(e[2] + e[2], 16), parseInt(e[3] + e[3], 16)]
|
||
|
|
}
|
||
|
|
if (e = /rgba\(0, 0, 0, 0\)/.exec(f)) {
|
||
|
|
return a.transparent
|
||
|
|
}
|
||
|
|
return a[d.trim(f).toLowerCase()]
|
||
|
|
}
|
||
|
|
|
||
|
|
function c(g, e) {
|
||
|
|
var f;
|
||
|
|
do {
|
||
|
|
f = d.css(g, e);
|
||
|
|
if (f != "" && f != "transparent" || d.nodeName(g, "body")) {
|
||
|
|
break
|
||
|
|
}
|
||
|
|
e = "backgroundColor"
|
||
|
|
} while (g = g.parentNode);
|
||
|
|
return b(f)
|
||
|
|
}
|
||
|
|
|
||
|
|
var a = {aqua: [0, 255, 255], azure: [240, 255, 255], beige: [245, 245, 220], black: [0, 0, 0], blue: [0, 0, 255], brown: [165, 42, 42], cyan: [0, 255, 255], darkblue: [0, 0, 139], darkcyan: [0, 139, 139], darkgrey: [169, 169, 169], darkgreen: [0, 100, 0], darkkhaki: [189, 183, 107], darkmagenta: [139, 0, 139], darkolivegreen: [85, 107, 47], darkorange: [255, 140, 0], darkorchid: [153, 50, 204], darkred: [139, 0, 0], darksalmon: [233, 150, 122], darkviolet: [148, 0, 211], fuchsia: [255, 0, 255], gold: [255, 215, 0], green: [0, 128, 0], indigo: [75, 0, 130], khaki: [240, 230, 140], lightblue: [173, 216, 230], lightcyan: [224, 255, 255], lightgreen: [144, 238, 144], lightgrey: [211, 211, 211], lightpink: [255, 182, 193], lightyellow: [255, 255, 224], lime: [0, 255, 0], magenta: [255, 0, 255], maroon: [128, 0, 0], navy: [0, 0, 128], olive: [128, 128, 0], orange: [255, 165, 0], pink: [255, 192, 203], purple: [128, 0, 128], violet: [128, 0, 128], red: [255, 0, 0], silver: [192, 192, 192], white: [255, 255, 255], yellow: [255, 255, 0], transparent: [255, 255, 255]}
|
||
|
|
})(django.jQuery);
|