/* ------------------------------------------------------------------------------
*
* # Dynamic tree views
*
* Specific JS code additions for extra_trees.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// Basic setup
// ------------------------------
// Basic example
$(".tree-default").fancytree({
init: function(event, data) {
$('.has-tooltip .fancytree-title').tooltip();
}
});
// Load JSON data
$(".tree-ajax").fancytree({
source: {
url: "assets/demo_data/fancytree/fancytree.json"
},
init: function(event, data) {
$('.has-tooltip .fancytree-title').tooltip();
}
});
// Embed JSON data
$(".tree-json").fancytree({
init: function(event, data) {
$('.has-tooltip .fancytree-title').tooltip();
}
});
// Child counter
$(".tree-child-count").fancytree({
extensions: ["childcounter"],
source: {
url: "assets/demo_data/fancytree/fancytree.json"
},
childcounter: {
deep: true,
hideZeros: true,
hideExpanded: true
},
init: function(event, data) {
$('.has-tooltip .fancytree-title').tooltip();
}
});
// Drag and drop support
$(".tree-drag").fancytree({
extensions: ["dnd"],
source: {
url: "assets/demo_data/fancytree/fancytree.json"
},
dnd: {
autoExpandMS: 400,
focusOnClick: true,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
dragStart: function(node, data) {
return true;
},
dragEnter: function(node, data) {
return true;
},
dragDrop: function(node, data) {
// This function MUST be defined to enable dropping of items on the tree.
data.otherNode.moveTo(node, data.hitMode);
}
},
init: function(event, data) {
$('.has-tooltip .fancytree-title').tooltip();
}
});
// Editable nodes
$(".tree-editable").fancytree({
extensions: ["edit"],
source: {
url: "assets/demo_data/fancytree/fancytree.json"
},
edit: {
adjustWidthOfs: 0,
inputCss: {minWidth: "0"},
triggerStart: ["f2", "dblclick", "shift+click", "mac+enter"],
save: function(event, data) {
alert("save " + data.input.val()); // Save data.input.val() or return false to keep editor open
}
}
});
// Selectable nodes
// ------------------------------
// Single selection
$(".tree-radio").fancytree({
checkbox: true,
selectMode: 1,
source: {
url: "assets/demo_data/fancytree/fancytree.json"
}
});
// Multiple selection
$(".tree-checkbox").fancytree({
checkbox: true,
selectMode: 2,
source: {
url: "assets/demo_data/fancytree/fancytree.json"
}
});
// Disable selections
$(".tree-checkbox-options").fancytree({
checkbox: true,
selectMode: 2
});
// Hierarchical select
$(".tree-checkbox-hierarchical").fancytree({
checkbox: true,
selectMode: 3
});
//
// Toggle checkbox state
//
// Initialize
$(".tree-checkbox-toggle").fancytree({
checkbox: true,
selectMode: 2,
source: {
url: "assets/demo_data/fancytree/fancytree.json"
}
});
// Initialize switchery toggle
var switcherySelect = document.querySelector('.switchery-select');
var initSelect = new Switchery(switcherySelect);
// Change checkbox states
switcherySelect.onchange = function() {
if(switcherySelect.checked) {
$(".tree-checkbox-toggle").fancytree("getTree").visit(function(node){
node.setSelected(true);
});
return false;
}
else {
$(".tree-checkbox-toggle").fancytree("getTree").visit(function(node){
node.setSelected(false);
});
return false;
}
};
// Advanced examples
// ------------------------------
//
// Toggle state
//
// Initialize switchery toggle
var switchery = document.querySelector('#tree-disabled');
var init = new Switchery(switchery);
// Do something on state change
switchery.onchange = function() {
if(switchery.checked) {
$(".tree-toggle").fancytree("disable");
}
else {
$(".tree-toggle").fancytree("enable");
}
};
// Initialize
$(".tree-toggle").fancytree({
source: {
url: "assets/demo_data/fancytree/fancytree.json"
},
init: function(event, data) {
$('.has-tooltip .fancytree-title').tooltip();
}
});
//
// Sorting
//
// Initialize
$(".tree-sorting").fancytree();
// Sort tree
$('.sort-tree').on('click', function() {
var node = $(".tree-sorting").fancytree("getRootNode");
node.sortChildren(null, true);
});
// Sort active nodes
$('.sort-branch').on('click', function() {
var node = $(".tree-sorting").fancytree("getActiveNode");
// Custom compare function (optional) that sorts case insensitive
var cmp = function(a, b) {
a = a.title.toLowerCase();
b = b.title.toLowerCase();
return a > b ? 1 : a < b ? -1 : 0;
};
node.sortChildren(cmp, false);
});
//
// Tree persistence
//
// Initialize
$(".tree-persistence").fancytree({
extensions: ["persist"],
source: {
url: "assets/demo_data/fancytree/fancytree.json"
},
checkbox: true,
persist: {
overrideSource: false, // true: cookie takes precedence over `source` data attributes.
store: "auto" // 'cookie', 'local': use localStore, 'session': sessionStore
},
postProcess: function(event, data) {
var prefix = data.node.getIndexHier() + ".";
$.each(data.response, function(idx, childEntry) {
if( childEntry.key == null ) {
childEntry.key = prefix + (idx + 1);
childEntry.title += " (" + childEntry.key + ")";
}
})
}
});
var tree5 = $(".tree-persistence").fancytree("getTree");
// Reset cookies on button click
$('.reset-cookies').on('click', function() {
tree5.clearCookies();
});
//
// Table tree
//
$(".tree-table").fancytree({
extensions: ["table"],
checkbox: true,
table: {
indentation: 20, // indent 20px per node level
nodeColumnIdx: 2, // render the node title into the 2nd column
checkboxColumnIdx: 0 // render the checkboxes into the 1st column
},
source: {
url: "assets/demo_data/fancytree/fancytree.json"
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json"}
},
renderColumns: function(event, data) {
var node = data.node,
$tdList = $(node.tr).find(">td");
// (index #0 is rendered by fancytree by adding the checkbox)
$tdList.eq(1).text(node.getIndexHier()).addClass("alignRight");
// (index #2 is rendered by fancytree)
$tdList.eq(3).text(node.key);
$tdList.eq(4).addClass('text-center').html("");
// Style checkboxes
$(".styled").uniform({radioClass: 'choice'});
}
});
// Handle custom checkbox clicks
$(".tree-table").delegate("input[name=like]", "click", function (e){
var node = $.ui.fancytree.getNode(e),
$input = $(e.target);
e.stopPropagation(); // prevent fancytree activate for this row
if($input.is(":checked")){
alert("like " + $input.val());
}
else{
alert("dislike " + $input.val());
}
});
});