new static files.
Signed-off-by: rscnt <rascnt@gmail.com>
This commit is contained in:
parent
5da7cfab99
commit
bb68c32ba5
772 changed files with 71557 additions and 0 deletions
314
static/treebeard/treebeard-admin.js
Normal file
314
static/treebeard/treebeard-admin.js
Normal file
|
|
@ -0,0 +1,314 @@
|
|||
(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);
|
||||
Loading…
Add table
Add a link
Reference in a new issue