Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • faproietti/XRF-App
  • chnet/XRF-App
2 results
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 0 additions and 2430 deletions
src/LIB-NOT-USED/jquery.fancytree/demo/ajax-tree-plain.json deleted 100644 → 0
View file @ dd43884b
[
{"title": "simple node (no explicit id, so a default key is generated)" },
{"key": "2", "title": "item1 with key and tooltip", "tooltip": "Look, a tool tip!" },
{"key": "3", "title": "<span>item2 with <b>html</b> inside a span tag</span>" },
{"key": "4", "title": "node 4" },
{"key": "5", "title": "using href", "href": "http://www.wwWendt.de/" },
{"key": "6", "title": "node with some extra classes (will be added to the generated markup)", "extraClasses": "my-extra-class" },
{"key": "10", "title": "Folder 1", "folder": true, "children": [
{"key": "10_1", "title": "Sub-item 1.1", "children": [
{"key": "10_1_1", "title": "Sub-item 1.1.1"},
{"key": "10_1_2", "title": "Sub-item 1.1.2"}
]},
{"key": "10_2", "title": "Sub-item 1.2", "children": [
{"key": "10_2_1", "title": "Sub-item 1.2.1"},
{"key": "10_2_2", "title": "Sub-item 1.2.2"}
]}
]},
{"key": "20", "title": "Simple node with active children (expand)", "expanded": true, "children": [
{"key": "20_1", "title": "Sub-item 2.1", "children": [
{"key": "20_1_1", "title": "Sub-item 2.1.1", "children": [
{"key": "20_1_1_1", "title": "Sub-item 2.1.1.1"}
]},
{"key": "20_1_2", "title": "Sub-item 2.1.2"}
]},
{"key": "20_2", "title": "Sub-item 2.2", "children": [
{"key": "20_2_1", "title": "Sub-item 2.2.1"},
{"key": "20_2_2", "title": "Sub-item 2.2.2"}
]}
]},
{"key": "30", "title": "Lazy folder", "folder": true, "lazy": true },
{"key": "31", "title": "Lazy folder 2", "folder": true, "lazy": true },
{"key": "32", "title": "Lazy folder 3", "folder": true, "lazy": true }
]
src/LIB-NOT-USED/jquery.fancytree/demo/ajax-tree-products.json deleted 100644 → 0
View file @ dd43884b
[
{"title": "Books & Audible", "expanded": true, "folder": true, "children": [
{"title": "Books", "expanded": true, "folder": true, "children": [
{"title": "General Books"},
{"title": "Kindle Books"},
{"title": "Books For Study"},
{"title": "Audiobooks"}
]},
{"title": "Movies, TV, Music, Games", "folder": true, "children": [
{"title": "Music"},
{"title": "MP3 Downloads"},
{"title": "Musical Instruments & DJ"},
{"title": "Film & TV"},
{"title": "Blue-ray"},
{"title": "PC & Video Games"}
]},
{"title": "Electronics & Computers", "expanded": true, "folder": true, "children": [
{"title": "Electronics", "folder": true, "children": [
{"title": "Camera & Photo"},
{"title": "TV & Home Cinema"},
{"title": "Audio & HiFi"},
{"title": "Sat Nav & Car Electronics"},
{"title": "Phones"},
{"title": "Electronic Accessories"}
]},
{"title": "Computers", "folder": true, "children": [
{"title": "Laptops"},
{"title": "Tablets"},
{"title": "Computer & Accessories"},
{"title": "Computer Components"},
{"title": "Software"},
{"title": "Printers & Ink"}
]}
]}
]}
]
src/LIB-NOT-USED/jquery.fancytree/demo/ajax-tree-taxonomy.json deleted 100644 → 0
View file @ dd43884b
[
{"title": "Animalia", "expanded": true, "folder": true, "children": [
{"title": "Chordate", "folder": true, "children": [
{"title": "Mammal", "children": [
{"title": "Primate", "children": [
{"title": "Primate", "children": [
]},
{"title": "Carnivora", "children": [
]}
]},
{"title": "Carnivora", "children": [
{"title": "Felidae", "lazy": true}
]}
]}
]},
{"title": "Arthropoda", "expanded": true, "folder": true, "children": [
{"title": "Insect", "children": [
{"title": "Diptera", "lazy": true}
]}
]}
]}
]
src/LIB-NOT-USED/jquery.fancytree/demo/ajax-tree.json deleted 100644 → 0
View file @ dd43884b
[
{"title": "simple node (no explicit id, so a default key is generated)" },
{"key": "2", "title": "item1 with key and tooltip", "tooltip": "Look, a tool tip!" },
{"key": "3", "title": "<span>item2 with <b>html</b> inside a span tag</span>" },
{"key": "4", "title": "this nodes uses 'nolink', so no &lt;a> tag is generated", "nolink": true},
{"key": "5", "title": "using href", "href": "http://www.wwWendt.de/" },
{"key": "6", "title": "node with some extra classes (will be added to the generated markup)", "extraClasses": "my-extra-class" },
{"key": "10", "title": "Folder 1", "folder": true, "children": [
{"key": "10_1", "title": "Sub-item 1.1", "children": [
{"key": "10_1_1", "title": "Sub-item 1.1.1"},
{"key": "10_1_2", "title": "Sub-item 1.1.2"}
]},
{"key": "10_2", "title": "Sub-item 1.2", "children": [
{"key": "10_2_1", "title": "Sub-item 1.2.1"},
{"key": "10_2_2", "title": "Sub-item 1.2.2"}
]}
]},
{"key": "20", "title": "Simple node with active children (expand)", "expanded": true, "children": [
{"key": "20_1", "title": "Sub-item 2.1", "children": [
{"key": "20_1_1", "title": "Sub-item 2.1.1"},
{"key": "20_1_2", "title": "Sub-item 2.1.2"}
]},
{"key": "20_2", "title": "Sub-item 2.2", "children": [
{"key": "20_2_1", "title": "Sub-item 2.2.1"},
{"key": "20_2_2", "title": "Sub-item 2.2.2"}
]}
]},
{"key": "30", "title": "Lazy folder", "folder": true, "lazy": true },
{"key": "31", "title": "Lazy folder (preload)", "folder": true, "lazy": true, "preload": true },
{"key": "32", "title": "Lazy folder (expand on load)", "folder": true, "lazy": true, "expanded": true }
]
src/LIB-NOT-USED/jquery.fancytree/demo/ajax-tree.xml deleted 100644 → 0
View file @ dd43884b
<children>
<node>
<title> Node 1</title>
</node>
<node folder="true" expanded="true" key="42">
<title> Node 2 (expanded folder)</title>
<children>
<node>
<title> Node 2.1</title>
</node>
<node>
<title> Node 2.2</title>
</node>
</children>
</node>
<node folder="true">
<title> Node 3 (collapsed folder)</title>
<children>
<node>
<title> Node 3.1</title>
</node>
<node>
<title> Node 3.2</title>
</node>
</children>
</node>
<node folder="true" lazy="true">
<title> Node 4 (lazy)</title>
</node>
</children>
src/LIB-NOT-USED/jquery.fancytree/demo/fancytree-server.js deleted 100644 → 0
View file @ dd43884b
/*
* TODO: implement a simple nose-based server that
*
* - serves the demo folder, so we don't need to use restricted local file
* file://... access
* - act as an ajax server that send lazy subnodes
* - See https://gist.github.com/701407
*/
/*jshint node:true */
// TODO enable strict mode again
//"use strict";
var assert = require("assert"),
http = require("http"),
url = require("url");
/*
* Helpers
*/
var NODE_ATTRS = ["title", "key"];
function copyNode(node, deep){
var i, l, name,
node2 = {};
for(i=0, l=NODE_ATTRS.length; i<l; i++){
name = NODE_ATTRS[i];
node2[name] = node[name];
}
return node2;
}
/*
* Class TreeModel
* Simple tree data structure
*/
var TreeModel = function(){
this.children = [];
this.keyMap = {};
};
TreeModel.prototype.find = function(key){
return this.keyMap[key];
};
TreeModel.prototype.append = function(node, obj){
// Calling append(obj) -> append(root, obj)
if(obj === undefined){
obj = node;
node = this;
}
assert.ok(obj.key && this.keyMap[obj.key] === undefined);
if(node.children){
node.children.push(obj);
}else{
node.children = [ obj ];
}
this.keyMap[obj.key] = obj;
obj.parent = node;
return obj;
};
TreeModel.prototype.remove = function(key){
var node = this.keyMap[key],
parent = node.parent,
idx = parent.children.indexOf(node);
parent.children.splice(idx, 1);
delete this.keyMap[key];
};
/*
* Init a new tree with some sample data
*/
var _tree = new TreeModel();
var n = _tree.append({title: "node 1", key: "1", folder: true});
_tree.append(n, {title: "node 1.1", key: "1.1"});
_tree.append(n, {title: "node 1.2", key: "1.2"});
n = _tree.append({title: "node 2", key: "2"});
_tree.append(n, {title: "node 2.1", key: "2.1"});
/**
* Ajax server
*/
http.createServer(function (request, response) {
var i,
args = url.parse(request.url, true),
query = args.query,
parts = args.pathname.substring(1).split("/"),
cmd = parts[0],
node = _tree.find(query.key),
res = {error: "invalid command"};
console.log("args", args, parts);
switch(cmd){
case "get":
res = copyNode(node);
break;
case "children":
res = [];
if(node.children){
for(i=0; i<node.children.length; i++){
res.push(copyNode(node.children[i]));
}
}
break;
}
console.log("children", node.children);
console.log("json", copyNode(node));
response.writeHead(200, {"Content-Type": "application/json"});
response.end(JSON.stringify(res));
}).listen(8124);
console.log("Server running at http://127.0.0.1:8124/");
src/LIB-NOT-USED/jquery.fancytree/demo/index.html deleted 100644 → 0
View file @ dd43884b
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="noindex,follow">
<script src="../lib/jquery.js"></script>
<script src="sample.js"></script>
<title>Fancytree - Example Browser</title>
</head>
<frameset rows="50,1*" frameborder="no" framespacing="0">
<frame src="top.html" name="top" scrolling="NO" noresize
marginwidth="0" marginheight="0">
<frameset cols="200,1*" >
<frame src="nav.html" name="nav" scrolling="NO"
marginwidth="0" marginheight="0">
<frame src="welcome.html" name="content">
</frameset>
</frameset>
<noframes>
<body>
<p>This page requires frames.</p>
</body>
</noframes>
</html>
src/LIB-NOT-USED/jquery.fancytree/demo/nav.html deleted 100644 → 0
View file @ dd43884b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="noindex,follow">
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.custom.js"></script>
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<script src="sample.js"></script>
<title>Fancytree - Example Browser Nav</title>
<style type="text/css">
body {
background-color: #39414A;
color: white;
font-family: Helvetica, Arial, sans-serif;
font-size: smaller;
background-image: url("nav_bg.png");
background-repeat: repeat-x;
}
div#tree {
position: absolute;
height: 95%;
width: 95%;
padding: 5px;
margin-right: 16px;
}
ul.fancytree-container {
height: 100%;
width: 100%;
overflow: auto;
background-color: transparent;
}
span.fancytree-node span.fancytree-title {
color: white;
text-decoration: none;
}
span.fancytree-focused span.fancytree-title {
outline-color: white;
}
span.fancytree-node:hover span.fancytree-title,
span.fancytree-active span.fancytree-title,
span.fancytree-active.fancytree-focused span.fancytree-title,
.fancytree-treefocus span.fancytree-title:hover,
.fancytree-treefocus span.fancytree-active span.fancytree-title {
color: #39414A;
}
span.external span.fancytree-title:after {
content: "";
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAFVBMVEVmmcwzmcyZzP8AZswAZv////////9E6giVAAAAB3RSTlP///////8AGksDRgAAADhJREFUGFcly0ESAEAEA0Ei6/9P3sEcVB8kmrwFyni0bOeyyDpy9JTLEaOhQq7Ongf5FeMhHS/4AVnsAZubxDVmAAAAAElFTkSuQmCC") 100% 50% no-repeat;
padding-right: 13px;
}
/* Remove system outline for focused container */
.ui-fancytree.fancytree-container:focus {
outline: none;
}
.ui-fancytree.fancytree-container {
border: none;
}
</style>
<script type="text/javascript">
$(function(){
// --- Initialize sample trees
$("#tree").fancytree({
autoActivate: false, // we use scheduleAction()
autoCollapse: true,
// autoFocus: true,
autoScroll: true,
clickFolderMode: 3, // expand with single click
minExpandLevel: 2,
tabindex: "-1", // we don't want the focus frame
// toggleEffect: { effect: "blind", options: {direction: "vertical", scale: "box"}, duration: 2000 },
// scrollParent: null, // use $container
focus: function(event, data) {
var node = data.node;
// Auto-activate focused node after 1 second
if(node.data.href){
node.scheduleAction("activate", 1000);
}
},
blur: function(event, data) {
data.node.scheduleAction("cancel");
},
beforeActivate: function(event, data){
var node = data.node;
if( node.data.href && node.data.target === "_blank") {
window.open(node.data.href, "_blank");
return false; // don't activate
}
},
activate: function(event, data){
var node = data.node,
orgEvent = data.originalEvent || {};
// Open href (force new window if Ctrl is pressed)
if(node.data.href){
window.open(node.data.href, (orgEvent.ctrlKey || orgEvent.metaKey) ? "_blank" : node.data.target);
}
// When an external link was clicked, we don't want the node to become
// active. Also the URL fragment should not be changed
if( node.data.target === "_blank") {
return false;
}
// Append #HREF to URL without actually loading content
// (We check for this value on page load re-activate the node.)
if( window.parent && parent.history && parent.history.pushState ) {
parent.history.pushState({title: node.title}, "", "#" + (node.data.href || ""));
}
},
click: function(event, data){
// We implement this in the `click` event, because `activate` is not
// triggered if the node already was active.
// We want to allow re-loads by clicking again.
var node = data.node,
orgEvent = data.originalEvent;
// Open href (force new window if Ctrl is pressed)
if(node.isActive() && node.data.href){
window.open(node.data.href, (orgEvent.ctrlKey || orgEvent.metaKey) ? "_blank" : node.data.target);
}
}
});
// On page load, activate node if node.data.href matches the url#href
var tree = $(":ui-fancytree").fancytree("getTree"),
frameHash = window.parent && window.parent.location.hash;
if( frameHash ) {
frameHash = frameHash.replace("#", "");
tree.visit(function(n) {
if( n.data.href && n.data.href === frameHash ) {
n.setActive();
return false; // done: break traversal
}
});
}
});
</script>
</head>
<body>
<div id="tree">
<ul>
<li class="folder expanded">Documentation
<ul>
<li class="external">
<a target="_blank" href="https://github.com/mar10/fancytree/">Project home</a>
<li class="external">
<a target="_blank" href="https://github.com/mar10/fancytree/wiki/">Documentation</a>
<li class="external">
<a target="_blank" href="../doc/jsdoc/">API reference</a>
</ul>
<li class="folder expanded"> Examples
<ul>
<li><a target="content" href="welcome.html">Welcome</a>
<li><a target="content" href="sample-default.html">Default options</a>
<li><a target="content" href="sample-playground.html">Playground</a>
<li><a target="content" href="sample-configurator.html">Option configurator</a>
<li><a target="content" href="sample-multi-ext.html">Complex demo</a>
<li><a target="content" href="sample-source.html">Initialization</a>
<li><a target="content" href="sample-events.html">Event handling</a>
<li><a target="content" href="sample-api.html">Programming API</a>
<li><a target="content" href="sample-select.html">Checkbox &amp; select</a>
<li><a target="content" href="sample-theming.html">Theming</a>
<li><a target="content" href="sample-ext-bootstrap.html">Bootstrap</a>
<li><a target="content" href="sample-form.html">Embed in forms</a>
<li class="external">
<a target="_blank" href="sample-aria.html">WAI-ARIA</a>
<li class="external">
<a target="_blank" href="http://wwwendt.de/tech/fancytree/demo/taxonomy-browser/">
Taxonomy Browser</a>
<li class="folder">Extensions
<ul>
<li><a target="content" href="sample-ext-childcounter.html">Child counter</a>
<li><a target="content" href="sample-ext-clones.html">Clones</a>
<li><a target="content" href="sample-ext-columnview.html">Column view</a>
<li><a target="content" href="sample-ext-menu.html">Context menu</a>
<li><a target="content" href="sample-ext-dnd.html">Drag'n'drop (jQuery UI)</a>
<li><a target="content" href="sample-ext-dnd5.html">Drag'n'drop (HTML5)</a>
<li><a target="content" href="sample-ext-filter.html">Filter</a>
<li><a target="content" href="sample-ext-fixed.html">Fixed headers</a>
<li><a target="content" href="sample-ext-bootstrap.html">Glyph fonts</a>
<li><a target="content" href="sample-ext-edit.html">Inline edit</a>
<li class="external"><a target="_blank" href="sample-ext-persist.html">Persist</a>
<li><a target="content" href="sample-ext-table.html">Table</a>
<li><a target="content" href="sample-ext-themeroller.html">ThemeRoller</a>
<li><a target="content" href="sample-ext-select.html">Select</a>
<li><a target="content" href="sample-ext-wide.html">Wide</a>
</ul>
<li class="folder">Tweaks
<ul>
<li><a target="content" href="sample-iframe.html">URL navigation and &lt;iframe></a>
<li><a target="content" href="sample-accordion.html">Accordion</a>
<li><a target="content" href="sample-3rd-ui-contextmenu.html">ui-contextmenu</a>
<li><a target="content" href="sample-3rd-jQuery-contextMenu.html">jQuery contextMenu</a>
<li><a target="content" href="sample-3rd-contextmenu-abs.html">Context menu (ABS), Copy/paste</a>
<li><a target="content" href="sample-ext-awesome.html">font-awesome</a>
<li><a target="content" href="sample-load-errors.html">Lazy load errors handling</a>
<li><a target="content" href="sample-rtl.html">RTL</a>
<li><a target="content" href="sample-multiline.html">Large nodes</a>
<li><a target="content" href="sample-multi-dnd.html">Drag multiple nodes</a>
<li><a target="content" href="sample-scroll.html">Smart scrolling</a>
<li><a target="content" href="sample-webservice.html">Webservice</a>
<li><a target="content" href="../test/test-ext-keyboard.html">Keyboard nav.</a>
</ul>
<li class="folder">Test
<ul>
<li class="external"><a target="_blank" href="../test/unit/test-core.html">Core unit tests</a>
<li class="external"><a target="_blank" href="../test/unit/test-suite.html">Suite</a>
<li><a target="content" href="../test/test-ext-dnd.html">Drag'n'drop</a>
<li class="external"><a target="_blank" href="../test/unit/test-bench.html">Benchmarks</a>
<!--
<li><a target="content" href="sample-pyserver.html">Local server</a>
-->
<li class="folder">DTD
<ul>
<li><a target="content" href="../test/doctypes/doctype-none.html">No DTD</a>
<li><a target="content" href="../test/doctypes/doctype-html4-loose.html">HTML4 transitional</a>
<li><a target="content" href="../test/doctypes/doctype-html4-strict.html">HTML4 strict</a>
<li><a target="content" href="../test/doctypes/doctype-html5.html">HTML5</a>
<li><a target="content" href="../test/doctypes/doctype-xml-transitional.html">XHTML transitional</a>
<li><a target="content" href="../test/doctypes/doctype-xml-strict.html">XHTML strict</a>
</ul>
</ul>
</ul>
<li class="folder expanded">3rd party
<ul>
<li class="folder">Extensions
<ul>
<li><a target="content" href="../3rd-party/extensions/contextmenu/contextmenu.html">jQuery contextMenu</a>
<li><a target="content" href="../3rd-party/extensions/hotkeys/hotkeys.html">hotkeys</a>
</ul>
<li class="folder">Samples
<ul>
<li><a target="content" href="sample-3rd-ui-contextmenu.html">ui-contextmenu</a>
</ul>
</ul>
</ul>
</div>
</body>
</html>
src/LIB-NOT-USED/jquery.fancytree/demo/nav_bg.png deleted 100644 → 0
View file @ dd43884b
src/LIB-NOT-USED/jquery.fancytree/demo/nav_bg.png

372 B

src/LIB-NOT-USED/jquery.fancytree/demo/sample-3rd-contextmenu-abs.html deleted 100644 → 0
View file @ dd43884b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - Example: Context Menu</title>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="../../jquery/dist/jquery.min.js"></script>
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.dnd.js"></script>
<!-- jquery.contextmenu, A Beautiful Site (http://abeautifulsite.net/) -->
<script src="../lib/contextmenu-abs/jquery.contextMenu-custom.js"></script>
<link href="../lib/contextmenu-abs/jquery.contextMenu.css" rel="stylesheet" >
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="../lib/prettify.css" rel="stylesheet">
<script src="../lib/prettify.js"></script>
<link href="sample.css" rel="stylesheet">
<script src="sample.js"></script>
<!-- End_Exclude -->
<script type="text/javascript">
// --- Implement Cut/Copy/Paste --------------------------------------------
var clipboardNode = null;
var pasteMode = null;
function copyPaste(action, node) {
switch( action ) {
case "cut":
case "copy":
clipboardNode = node;
pasteMode = action;
break;
case "paste":
if( !clipboardNode ) {
alert("Clipoard is empty.");
break;
}
if( pasteMode == "cut" ) {
// Cut mode: check for recursion and remove source
var cb = clipboardNode.toDict(true);
if( node.isDescendantOf(cb) ) {
alert("Cannot move a node to it's sub node.");
return;
}
node.addChildren(cb);
node.render();
clipboardNode.remove();
} else {
// Copy mode: prevent duplicate keys:
var cb = clipboardNode.toDict(true, function(dict){
dict.title = "Copy of " + dict.title;
delete dict.key; // Remove key, so a new one will be created
});
alert("cb = " + JSON.stringify(cb));
// node.addChildren(cb);
// node.render();
node.applyPatch(cb);
}
clipboardNode = pasteMode = null;
break;
default:
alert("Unhandled clipboard action '" + action + "'");
}
};
// --- Contextmenu helper --------------------------------------------------
function bindContextMenu(span) {
// Add context menu to this node:
$(span).contextMenu({menu: "myMenu"}, function(action, el, pos) {
// The event was bound to the <span> tag, but the node object
// is stored in the parent <li> tag
var node = $.ui.fancytree.getNode(el);
switch( action ) {
case "cut":
case "copy":
case "paste":
copyPaste(action, node);
break;
default:
alert("Todo: appply action '" + action + "' to node " + node);
}
});
};
// --- Init fancytree during startup ----------------------------------------
$(function(){
$("#tree").fancytree({
extensions: ["dnd"],
activate: function(event, data) {
var node = data.node;
$("#echoActivated").text(node.title + ", key=" + node.key);
},
click: function(event, data) {
// Close menu on click
if( $(".contextMenu:visible").length > 0 ){
$(".contextMenu").hide();
// return false;
}
},
keydown: function(event, data) {
var node = data.node;
// Eat keyboard events, when a menu is open
if( $(".contextMenu:visible").length > 0 )
return false;
switch( event.which ) {
// Open context menu on [Space] key (simulate right click)
case 32: // [Space]
$(node.span).trigger("mousedown", {
preventDefault: true,
button: 2
})
.trigger("mouseup", {
preventDefault: true,
pageX: node.span.offsetLeft,
pageY: node.span.offsetTop,
button: 2
});
return false;
// Handle Ctrl-C, -X and -V
case 67:
if( event.ctrlKey ) { // Ctrl-C
copyPaste("copy", node);
return false;
}
break;
case 86:
if( event.ctrlKey ) { // Ctrl-V
copyPaste("paste", node);
return false;
}
break;
case 88:
if( event.ctrlKey ) { // Ctrl-X
copyPaste("cut", node);
return false;
}
break;
}
},
/*Bind context menu for every node when its DOM element is created.
We do it here, so we can also bind to lazy nodes, which do not
exist at load-time. (abeautifulsite.net menu control does not
support event delegation)*/
createNode: function(event, data){
bindContextMenu(data.node.span);
},
/*Load lazy content (to show that context menu will work for new items too)*/
lazyLoad: function(event, data){
data.result = {url: "sample-data2.json"};
},
/* D'n'd, just to show it's compatible with a context menu.
See http://code.google.com/p/dynatree/issues/detail?id=174 */
dnd: {
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
autoExpandMS: 400,
dragStart: function(node, data) {
return true;
},
dragEnter: function(node, data) {
// return true;
if(node.parent !== data.otherNode.parent)
return false;
return ["before", "after"];
},
dragDrop: function(node, data) {
data.otherNode.moveTo(node, data.hitMode);
}
}
});
});
</script>
</head>
<body class="example">
<h1>Example: Context Menu</h1>
<div class="description">
Implementation of a context menu. Right-click a node and see what happens.
<ul>
<li>Also [space] key is supported to open the menu.
<li>This example also demonstrates, how to copy or move branches and how
to implement clipboard functionality.
<li>A keyboard handler implements Cut, Copy, and Paste with <code>Ctrl-X</code>,
<code>Ctrl-C</code>, <code>Ctrl-V</code>.
</ul>
This sample uses the jQuery Context Menu Plugin by Cory S.N. LaViska.
Visit <a href="http://abeautifulsite.net/">A Beautiful Site</a> for usage and more information.
<br>
<b>NOTE:</b></br>
I had to <a href="http://code.google.com/p/dynatree/issues/detail?id=174">patch Cory's code</a> in order to make it work. Please understand, that I am not able to support this plugin. There are many other context menus
out there :-)
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<!-- Definition of context menu -->
<ul id="myMenu" class="contextMenu">
<li class="edit"><a href="#edit">Edit</a></li>
<li class="cut separator"><a href="#cut">Cut</a></li>
<li class="copy"><a href="#copy">Copy</a></li>
<li class="paste"><a href="#paste">Paste</a></li>
<li class="delete"><a href="#delete">Delete</a></li>
<li class="quit separator"><a href="#quit">Quit</a></li>
</ul>
<!-- Definition tree structure -->
<div id="tree">
<ul>
<li id="id1" title="Look, a tool tip!">item1 with key and tooltip
<li id="id2" class="activate">item2: activated on init
<li id="id3" class="folder">Folder with some children
<ul>
<li id="id3.1">Sub-item 3.1
<li id="id3.2">Sub-item 3.2
</ul>
<li id="id4" class="expanded">Document with some children (expanded on init)
<ul>
<li id="id4.1">Sub-item 4.1
<li id="id4.2">Sub-item 4.2
</ul>
<li id="id5" class="lazy folder">Lazy folder
</ul>
</div>
<div>Selected node: <span id="echoActivated">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="https://github.com/mar10/fancytree">jquery.fancytree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="index.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-3rd-jQuery-contextMenu.html deleted 100644 → 0
View file @ dd43884b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - 3rd Party Example: jQuery contextMenu</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/start/jquery-ui.css" />
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<!-- jquery-contextmenu (https://github.com/swisnl/jQuery-contextMenu) -->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.3/jquery.contextMenu.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.3/jquery.contextMenu.min.js">
</script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="../lib/prettify.css" rel="stylesheet">
<script src="../lib/prettify.js"></script>
<link href="sample.css" rel="stylesheet">
<script src="sample.js"></script>
<!-- End_Exclude -->
<style type="text/css">
</style>
<script type="text/javascript">
$(function() {
$("#tree").fancytree({
extensions: [],
source: {
url: "ajax-tree-plain.json"
},
lazyLoad: function(event, data) {
data.result = { url: "ajax-sub2.json" }
}
});
$.contextMenu({
selector: "#tree span.fancytree-title",
items: {
"cut": {name: "Cut", icon: "cut",
callback: function(key, opt){
var node = $.ui.fancytree.getNode(opt.$trigger);
alert("Clicked on " + key + " on " + node);
}
},
"copy": {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste", disabled: false },
"sep1": "----",
"edit": {name: "Edit", icon: "edit", disabled: true },
"delete": {name: "Delete", icon: "delete", disabled: true },
"more": {name: "More", items: {
"sub1": {name: "Sub 1"},
"sub1": {name: "Sub 2"}
}}
},
callback: function(itemKey, opt) {
var node = $.ui.fancytree.getNode(opt.$trigger);
alert("select " + itemKey + " on " + node);
}
});
});
</script>
</head>
<body class="example">
<h1>Example: use 'jQuery contextMenu'</h1>
<div class="description">
<p>
This example integrates the
<a href="https://github.com/mar10/jquery-ui-contextmenu" target="_blank" class="external">jQuery contextMenu plugin</a>,
which is maintained independantly from Fancytree and is based on
<a href="http://api.jqueryui.com/menu/">jQuery UI Menu</a>
(part of jQuery UI 1.9+).
</p>
<p>
This is only one of more options. See the
<a href="index.html#sample-ext-menu.html">menu overview</a> for details.
</p>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<!-- Tree wrapper -->
<div id="tree"></div>
<hr />
<div id="selected-action">Click right mouse button on node</div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="https://github.com/mar10/fancytree">jquery.fancytree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="index.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-3rd-ui-contextmenu.html deleted 100644 → 0
View file @ dd43884b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - 3rd Party Example: jquery.ui-contextmenu</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<!-- jquery-contextmenu (https://github.com/mar10/jquery-ui-contextmenu/) -->
<script src="//cdn.jsdelivr.net/jquery.ui-contextmenu/1/jquery.ui-contextmenu.min.js"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="../lib/prettify.css" rel="stylesheet">
<script src="../lib/prettify.js"></script>
<link href="sample.css" rel="stylesheet">
<script src="sample.js"></script>
<!-- End_Exclude -->
<style type="text/css">
.ui-menu {
width: 100px;
font-size: 63%;
z-index: 3; /* over ext-wide titles */
}
</style>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function() {
$("#tree").fancytree({
extensions: [],
source: {
url: "ajax-tree-plain.json"
},
lazyLoad: function(event, data) {
data.result = { url: "ajax-sub2.json" }
}
});
$("#tree").contextmenu({
delegate: "span.fancytree-title",
autoFocus: true,
// menu: "#options",
menu: [
{title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors"},
{title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"},
{title: "Paste", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: false },
{title: "----"},
{title: "Edit", cmd: "edit", uiIcon: "ui-icon-pencil", disabled: true },
{title: "Delete", cmd: "delete", uiIcon: "ui-icon-trash", disabled: true },
{title: "More", children: [
{title: "Sub 1", cmd: "sub1"},
{title: "Sub 2", cmd: "sub1"}
]}
],
beforeOpen: function(event, ui) {
var node = $.ui.fancytree.getNode(ui.target);
// Modify menu entries depending on node status
$("#tree").contextmenu("enableEntry", "paste", node.isFolder());
// Show/hide single entries
// $("#tree").contextmenu("showEntry", "cut", false);
// Activate node on right-click
node.setActive();
// Disable tree keyboard handling
ui.menu.prevKeyboard = node.tree.options.keyboard;
node.tree.options.keyboard = false;
},
close: function(event, ui) {
// Restore tree keyboard handling
// console.log("close", event, ui, this)
// Note: ui is passed since v1.15.0
var node = $.ui.fancytree.getNode(ui.target);
node.tree.options.keyboard = ui.menu.prevKeyboard;
node.setFocus();
},
select: function(event, ui) {
var node = $.ui.fancytree.getNode(ui.target);
alert("select " + ui.cmd + " on " + node);
}
});
});
</script>
</head>
<body class="example">
<h1>Example: use 'jquery.ui-contextmenu'</h1>
<div class="description">
<p>
This example integrates the
<a href="https://github.com/mar10/jquery-ui-contextmenu" target="_blank" class="external">jquery-ui-contextmenu plugin</a>,
which is maintained independantly from Fancytree and is based on
<a href="http://api.jqueryui.com/menu/">jQuery UI Menu</a>
(part of jQuery UI 1.9+).
</p>
<p>
This is only one of more options. See the
<a href="index.html#sample-ext-menu.html">menu overview</a> for details.
</p>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<!-- Tree wrapper -->
<div id="tree"></div>
<hr />
<div id="selected-action">Click right mouse button on node</div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="https://github.com/mar10/fancytree">jquery.fancytree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="index.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-accordion.html deleted 100644 → 0
View file @ dd43884b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - Example: Accordion</title>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<!-- Themeroller switcher -->
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="../lib/prettify.css" rel="stylesheet">
<script src="../lib/prettify.js"></script>
<link href="sample.css" rel="stylesheet">
<script src="sample.js"></script>
<!-- End_Exclude -->
<style type="text/css">
ul.fancytree-container {
border: 1px solid gray;
width: 200px;
}
ul.fancytree-container >li {
width: 100%;
}
ul.fancytree-container >li >ul { /* don't indent level-2 nodes */
padding-left: 0;
}
ul.fancytree-container >li >.fancytree-node {
display: inline-block;
width: 100%;
background-color: #d0d0d0;
}
ul.fancytree-container >li >.fancytree-node .fancytree-title{
width: 100%;
}
/* Hide icons and expanders for top-level nodes*/
ul.fancytree-container >li >.fancytree-node .fancytree-icon,
ul.fancytree-container >li >.fancytree-node .fancytree-expander
/*ul.fancytree-container >li >ul >li >span.fancytree-node span.fancytree-expander*/
{
display: none;
}
</style>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
// Attach the fancytree widget to an existing <div id="tree"> element
// and pass the tree options as an argument to the fancytree() function:
$("#tree").fancytree({
autoCollapse: true,
icon: false,
renderNode: function(event, data){
if(data.node.getLevel() === 1){
$(data.node.span).addClass("ui-accordion-header");
}
}
});
});
</script>
</head>
<body class="example">
<h1>Example: accordion</h1>
<div class="description">
This sample skin that mimics an accordion.
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<!-- Add a <table> element where the tree should appear: -->
<div id="tree">
<ul>
<li class="folder">Foo
<ul>
<li>Node foo 1
<ul>
<li>Node foo 1.1
<li>Node foo 1.2
<li>Node foo 1.3
</ul>
<li>Node foo 2
<li>Node foo 3
</ul>
<li class="folder">Bar
<ul>
<li>Node bar 1
<li>Node bar 2
<li>Node bar 3
</ul>
<li class="folder">Baz
<ul>
<li>Node baz 1
<li>Node baz 2
<li>Node baz 3
</ul>
</ul>
</div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="https://github.com/mar10/fancytree">jquery.fancytree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="index.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-api.html deleted 100644 → 0
View file @ dd43884b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - Example</title>
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.custom.js"></script>
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="../lib/prettify.css" rel="stylesheet">
<script src="../lib/prettify.js"></script>
<link href="sample.css" rel="stylesheet">
<script src="sample.js"></script>
<!-- End_Exclude -->
<script type="text/javascript">
$(function(){
// Initialize the tree inside the <div>element.
// The tree structure is read from the contained <ul> tag.
$("#tree").fancytree({
checkbox: true,
activate: function(event, data) {
$("#echoActive").text(data.node.title);
// alert(node.getKeyPath());
if( data.node.url )
window.open(data.node.url, data.node.target);
},
deactivate: function(event, data) {
$("#echoSelected").text("-");
},
focus: function(event, data) {
$("#echoFocused").text(data.node.title);
},
blur: function(event, data) {
$("#echoFocused").text("-");
},
lazyLoad: function(event, data){
// Simulate a slow ajax request
var dfd = new $.Deferred();
data.result = dfd.promise();
window.setTimeout(function(){
dfd.resolve([
{ title: "Lazy node 1", lazy: true },
{ title: "Simple node 2", select: true }
]);
}, 1500);
}
});
});
</script>
<!-- Start_Exclude: This block is not part of the sample code -->
<script>
$(function(){
addSampleButton({
label: "Disable",
id: "btnDisable",
code: function(){
if( $("#tree").fancytree("option", "disabled") ){
$("#tree").fancytree("enable");
$("#btnDisable").text("Disable");
}else{
$("#tree").fancytree("disable");
$("#btnDisable").text("Enable");
}
}
});
addSampleButton({
label: "Expand all",
newline: false,
code: function(){
$("#tree").visit(function(node){
node.setExpanded();
});
}
});
addSampleButton({
label: "Collapse all",
newline: false,
code: function(){
$("#tree").visit(function(node){
node.setExpanded(false);
});
}
});
addSampleButton({
label: "Toggle expand",
code: function(){
$("#tree").visit(function(node){
node.toggleExpanded();
});
}
});
addSampleButton({
label: "tree.getActiveNode()",
newline: false,
code: function(){
var node = $("#tree").fancytree("getActiveNode");
if( node ){
alert("Currently active: " + node.title);
}else{
alert("No active node.");
}
}
});
addSampleButton({
label: "tree.toDict()",
code: function(){
// Convert the whole tree into an dictionary
var tree = $("#tree").fancytree("getTree");
var d = tree.toDict(true);
alert(JSON.stringify(d));
}
});
addSampleButton({
label: "activateKey('id4.3.2')",
code: function(){
$("#tree").fancytree("getTree").activateKey("id4.3.2");
// also possible:
// $("#tree").fancytree("getTree").getNodeByKey("id4.3.2").setActive();
}
});
addSampleButton({
label: "setTitle()",
code: function(){
var node = $("#tree").fancytree("getActiveNode");
if( !node ) return;
node.setTitle(node.title + ", " + new Date());
// this is a shortcut for
// node.fromDict({title: data.node.title + new Date()});
}
});
addSampleButton({
label: "Sort tree",
newline: false,
code: function(){
var node = $("#tree").fancytree("getRootNode");
node.sortChildren(null, true);
}
});
addSampleButton({
label: "Sort active banch",
code: function(){
var node = $("#tree").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);
}
});
addSampleButton({
header: "Create nodes",
tooltip: "Use node.addChildren() with single objects",
label: "Add single nodes",
newline: false,
code: function(){
// Sample: add an hierarchic branch using code.
// This is how we would add tree nodes programatically
var rootNode = $("#tree").fancytree("getRootNode");
var childNode = rootNode.addChildren({
title: "Programatically addded nodes",
tooltip: "This folder and all child nodes were added programmatically.",
folder: true
});
childNode.addChildren({
title: "Document using a custom icon",
icon: "customdoc1.gif"
});
}
});
addSampleButton({
tooltip: "Use node.appendSibling()",
label: "Apppend a sibling node",
newline: false,
code: function(){
var tree = $("#tree").fancytree("getTree"),
node = tree.getActiveNode(),
newData = {title: "New Node"},
newSibling = node.appendSibling(newData);
}
});
addSampleButton({
label: "ROOT.addChildren()",
tooltip: "Use node.addChildren() with recursive arrays",
code: function(){
// Sample: add an hierarchic branch using an array
var obj = [
{ title: "Lazy node 1", lazy: true },
{ title: "Lazy node 2", lazy: true },
{ title: "Folder node 3", folder: true,
children: [
{ title: "node 3.1" },
{ title: "node 3.2",
children: [
{ title: "node 3.2.1" },
{ title: "node 3.2.2",
children: [
{ title: "node 3.2.2.1" }
]
}
]
}
]
}
];
$("#tree").fancytree("getRootNode").addChildren(obj);
}
});
addSampleButton({
label: "node.fromDict()",
code: function(){
var node = $("#tree").fancytree("getActiveNode");
if( !node ) return;
// Set node data and - optionally - replace children
node.fromDict({
title: node.title + new Date(),
children: [{title: "t1"}, {title: "t2"}]
});
}
});
CLIPBOARD = null;
addSampleButton({
label: "Clipboard = node.toDict()",
newline: false,
code: function(){
// Convert active node (and descendants) to a dictionary and store
// in
var node = $("#tree").fancytree("getActiveNode");
var d = node.toDict(true, function(dict){
// Remove keys, so they will be re-generated when this dict is
// passed to addChildren()
delete dict.key;
});
// Store in a globael variable
CLIPBOARD = d;
alert("CLIPBOARD = " + JSON.stringify(d));
}
});
addSampleButton({
label: "node.fromDict(Clipboard)",
code: function(){
var node = $("#tree").fancytree("getActiveNode");
if( !node ) return;
// Set node data and - optionally - replace children
node.fromDict(CLIPBOARD);
}
});
addSampleButton({
label: "Remove selected nodes (but keep children)",
newline: true,
code: function(){
var tree = $("#tree").fancytree("getTree"),
selNodes = tree.getSelectedNodes();
selNodes.forEach(function(node) {
while( node.hasChildren() ) {
node.getFirstChild().moveTo(node.parent, "child");
}
node.remove();
});
}
});
});
</script>
<!-- End_Exclude -->
</head>
<body class="example">
<h1>Fancytree API</h1>
<div class="description">
Demonstrate some Fancytree and FancytreeNode API methods.
<br>
See the <a href="https://github.com/mar10/fancytree/wiki/TutorialApi"
target="_blank" class="external">API Tutorial</a>
for details.
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<div id="tree">
<ul>
<li>This simple node (and the following) have been created from html.
<li id="id1" title="This is item #1">item1 with key and tooltip
<li id="id2">item2 with key "id2"
<li id="id3" class="folder">Standard Folder with some children
<ul>
<li id="id3.1">Sub-item 3.1
<li id="id3.2">Sub-item 3.2
</ul>
<li id="id4">item 4. Note that also non-folders (i.e. 'documents') may have child nodes
<ul>
<li id="id4.1">Sub-item 4.1
<li id="id4.2">Sub-item 4.2
<li id="id4.3">Sub-item 4.3
<ul>
<li id="id4.3.1">Sub-item 4.3.1
<li id="id4.3.2">Sub-item 4.3.2
<ul>
<li id="id4.3.2.1">Sub-item 4.3.2.1
<li id="id4.3.2.2">Sub-item 4.3.2.2
</ul>
</ul>
<li id="id4.4">Sub-item 4.4
</ul>
<li id="id5" class="expanded folder">Advanced examples
<ul>
<li data="key: 'node5.1'">item5.1: Using data attribute as an alternative way to specify a key.
<li data="key: 'node5.3', folder: true">item5.1: Using data attribute as an alternative way to specify a folder.
<li id="id5.2">Sub-item 5.2
<li>Item without a key. Keys are optional (generated automatically), but may be used in the callbacks
</ul>
</ul>
</div>
<div>Active node: <span id="echoActive">-</span></div>
<div>Focused node: <span id="echoFocused">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<p id="sampleButtons">
</p>
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="https://github.com/mar10/fancytree">jquery.fancytree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="index.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-aria-treegrid-old.html deleted 100644 → 0
View file @ dd43884b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - WAI-ARIA Tree Grid</title>
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.custom.js"></script>
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.table.js"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="../lib/prettify.css" rel="stylesheet">
<script src="../lib/prettify.js"></script>
<link href="sample.css" rel="stylesheet">
<script src="sample.js"></script>
<!-- End_Exclude -->
<style type="text/css">
/* table.fancytree-container {
width: 90%;
}*/
</style>
<script type="text/javascript">
$(function(){
$("#treegrid").fancytree({
extensions: ["table"],
aria: true,
checkbox: true,
quicksearch: true,
source: {url: "ajax-tree-products.json"},
table: {
checkboxColumnIdx: 0, // render the checkboxes into the 1st column
nodeColumnIdx: 1 // render the node title into the 2nd column
},
keydown: function(event, data) {
// WAI-ARIA suggests that numpad '*' expands all siblings at
// the current node's level.
switch( $.ui.fancytree.eventToString(event) ) {
case "*":
$.each(data.node.parent.children, function(i, node){
node.setExpanded({noAnimation: true, noEvents: false});
});
break;
};
},
renderColumns: function(event, data) {
var node = data.node,
$tdList = $(node.tr).find(">td");
$tdList.eq(2).text(node.getIndexHier());
}
});
});
</script>
</head>
<body class="example">
<h1>Example: WAI-ARIA Tree Grid</h1>
<div class="description">
<p>
This Fancytree Tree Grid has
<a href="https://www.w3.org/TR/wai-aria-practices/#TreeGrid">WAI-ARIA</a>
enabled.<br>
<strong>Note:</strong> please
<a href="https://github.com/mar10/fancytree/issues/655">provide feedback</a>
if you have suggestions for improvement.
</p>
<p>
See also the <a href="sample-aria.html">ARIA Tree View example</a>.
</p>
</div>
<!-- <div role="application"> -->
<div>
<label for="lblBefore">Text 1<input type="text" id="lblBefore"></label>
<table id="treegrid">
<colgroup>
<col width="30px"></col>
<col width="400px"></col>
<col width="100px"></col>
</colgroup>
<thead>
<tr> <th></th> <th>Item</th> <th>Index</th> </tr>
</thead>
<tbody>
</tbody>
</table>
<label for="lblAfter">Text 2</label><input type="text" id="lblAfter">
</div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="https://github.com/mar10/fancytree">jquery.fancytree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="index.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-aria-treegrid.html deleted 100644 → 0
View file @ dd43884b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - WAI-ARIA Tree Grid</title>
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.custom.js"></script>
<link href="../src/skin-lion/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.table.js"></script>
<script src="../src/jquery.fancytree.ariagrid.js"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="../lib/prettify.css" rel="stylesheet">
<script src="../lib/prettify.js"></script>
<link href="sample.css" rel="stylesheet">
<script src="sample.js"></script>
<!-- End_Exclude -->
<style type="text/css">
td.stretch input,
td.stretch select {
box-sizing: border-box;
margin: 2px;
width: 100%;
}
td.center {
text-align: center;
}
table.fancytree-container > thead > tr > th {
background-color: #d4d4d4;
}
/* --- ext-ariagrid specific ---------------------------------------- */
table.fancytree-cell-mode > tbody > tr.fancytree-active > td {
/*background-color: #cbe8f6;*/
background-color: #eee;
}
table.fancytree-cell-mode > tbody > tr > td.fancytree-active-cell {
background-color: #3875d7;
}
table.fancytree-cell-mode.fancytree-cell-nav-mode > tbody > tr > td.fancytree-active-cell {
background-color: #cbe8f6;
}
/* --- Debug helpers: ----------------------------------------------- */
/*
[tabindex="-1"] {
border: 2px dotted green !important;
}
[tabindex="0"] {
border: 2px dotted red !important;
}
*/
</style>
<script type="text/javascript">
/*global $ */
$( function() {
// --- Demo GUI: ---------------------------------------------------
var store = window.sessionStorage;
$( "#optionsForm [name=cellFocus]" ).change( function( e ) {
store.setItem( "cellFocus", $( this ).find( ":selected" ).val() );
}).val( store.getItem( "cellFocus" ) || "allow" );
$( "#optionsForm [name=extendedMode]" ).change( function( e ) {
store.setItem( "extendedMode", $( this ).prop( "checked" ) || "" );
}).prop( "checked", !!store.getItem( "extendedMode" ) );
// --- Fancytree widget --------------------------------------------
$( "#treegrid" ).fancytree({
extensions: [ "table", "ariagrid" ],
aria: true,
generateIds: true,
// rtl: true,
checkbox: true,
// quicksearch: true,
source: { url: "ajax-tree-products.json" },
table: {
checkboxColumnIdx: 0, // render the checkboxes into the 1st column
nodeColumnIdx: 1 // render the node title into the 2nd column
},
ariagrid: {
cellFocus: $( "#optionsForm [name=cellFocus]" ).find( ":selected" ).val(),
extendedMode: $( "#optionsForm [name=extendedMode]" ).is( ":checked" ),
label: "Fancytree ARIA sample"
},
init: function( event, data ) {
// We could switch to cell-mode here:
// data.tree.getFirstChild().setActive(true, {cell: 1});
},
defaultCellAction: function( event, data ) {
// Called when ENTER is pressed in cell-mode.
// Return false to prevent default
if ( data.colIdx === 4 ) {
// eslint-disable-next-line no-alert
alert( "Custom default action: " + data.node.title );
return false;
}
},
renderColumns: function( event, data ) {
var node = data.node,
$tdList = $( node.tr ).find( ">td" );
// The row template inserts controls, so we have to remove
// them herer for folders:
if ( node.isFolder() ) {
$tdList.eq( 2 ).empty();
$tdList.eq( 3 ).empty();
$tdList.eq( 5 ).empty();
$tdList.eq( 6 ).empty();
$tdList.eq( 7 ).empty();
}
$tdList.eq( 4 ).text( "Lorem ipsum " + node.title );
}
});
});
</script>
</head>
<body class="example">
<h1>Example: WAI-ARIA Tree Grid - Prototype</h1>
<div class="description">
<p>
This Fancytree Tree Grid has uses a prototypical extension to
explore ARIA support as discussed here:<br>
<!--
<a href="https://github.com/aleventhal/treegrid-example">
aleventhal/treegrid-example </a>,
<a href="https://github.com/aleventhal/treegrid-tab-active-cells">
aleventhal/treegrid-tab-active-cells </a>
<br>
and here
-->
<a href="https://rawgit.com/w3c/aria-practices/treegrid/examples/treegrid/treegrid-1.html">
w3c/aria-practices/treegrid/examples/treegrid/treegrid-1.html
</a>
</p> <p>
Extended mode adds this behavior:
<ul>
<li>Embedded inputs get the focus, but we distinguish cell-nav-mode
and cell-edit-mode. cell-nav-mode steals <kbd>Up</kbd>, <kbd>Down</kbd>,
<kbd>Left</kbd>, <kbd>Right</kbd>, <kbd>Home</kbd>, <kbd>End</kbd>
fromt input controls to always allow cell navigation.</li>
<li><kbd>Enter</kbd>: In row-mode: switch to cell-nav-mode. In cell-nav-mode: execute default action or switch to cell-edit-mode for embedded text input.
In cell-edit-mode: switch back to cell-nav-mode.</li>
<li><kbd>Esc</kbd>: In cell-nav-mode: switch to row-mode. In cell-edit-mode: switch to cell-nav-mode.</li>
</ul>
<!--
</p><p>
<strong>Note:</strong> please
<a href="https://github.com/mar10/fancytree/issues/655">provide feedback</a>
if you have suggestions for improvement on the Fancytree implementation.
-->
</p> <p>
See also the <a href="sample-aria.html">ARIA Tree View example</a>.
</p>
</div>
<div>
<form id="optionsForm">
<label>cellFocus:
<select name="cellFocus">
<option value="start">start</option>
<option value="allow" selected="selected">allow</option>
<option value="force">force</option>
</select>
</label>
<label>Extended mode <input type="checkbox" name="extendedMode"></label>
(Please reload page for changes to take effect.)
</form>
<hr>
<table id="treegrid">
<colgroup>
<col width="20px">
<col width="400px">
<col width="30px">
<col width="30px">
<col width="400px">
<col width="100px">
<col width="100px">
<col width="100px">
</colgroup>
<thead>
<tr> <th>Select</th> <th>Item</th> <th>In Stock</th> <th>Favorite</th> <th>Details</th> <th>Qty</th> <th>Link</th> <th>Drop</th> </tr>
</thead>
<tbody>
<tr>
<td class="center">></td>
<td></td>
<td class="center"><input type="checkbox" tabindex="-1"></td>
<td class="center"><input type="checkbox" tabindex="-1"></td>
<td class="stretch"><input type="text" tabindex="-1"></td>
<td class="stretch"><input type="number" min="0" value="0" tabindex="-1"></td>
<td class="center"><a href='http://google.com' target='_blank' tabindex='-1'>link</a></td>
<td class="stretch"><select tabindex="-1"><option>a</option><option>b</option></select></td>
</tr>
</tbody>
</table>
<label for="lblAfter">Text 2</label><input type="text" id="lblAfter">
</div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="https://github.com/mar10/fancytree">jquery.fancytree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="index.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-aria.html deleted 100644 → 0
View file @ dd43884b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - WAI-ARIA Tree View</title>
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.custom.js"></script>
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="../lib/prettify.css" rel="stylesheet">
<script src="../lib/prettify.js"></script>
<link href="sample.css" rel="stylesheet">
<script src="sample.js"></script>
<!-- End_Exclude -->
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$("#tree").fancytree({
aria: true,
// selectMode: 1,
checkbox: true,
// generateIds: true,
quicksearch: true,
source: { url: "ajax-tree-products.json" },
keydown: function(event, data) {
// WAI-ARIA suggests that numpad '*' expands all siblings at
// the current node's level.
switch( $.ui.fancytree.eventToString(event) ) {
case "*":
$.each(data.node.parent.children, function(i, node){
node.setExpanded({noAnimation: true});
});
break;
};
}
});
});
</script>
</head>
<body class="example">
<h1>Example: WAI-ARIA Tree View</h1>
<div class="description">
<p>
This Fancytree Tree View has
<a href="https://www.w3.org/TR/wai-aria-practices/#TreeView">WAI-ARIA</a>
enabled.<br>
<strong>Note:</strong> please
<a href="https://github.com/mar10/fancytree/issues/656">provide feedback</a>
if you have suggestions for improvement.
</p>
<p>
See also the <a href="sample-aria-treegrid.html">ARIA Tree Grid example</a>.
</p>
</div>
<div>
<label for="lblBefore">Text 1<input type="text" id="lblBefore"></label>
<div id="tree">
</div>
<label for="lblAfter">Text 2</label><input type="text" id="lblAfter">
</div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="https://github.com/mar10/fancytree">jquery.fancytree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="index.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-configurator.html deleted 100644 → 0
View file @ dd43884b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - Configurator</title>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet"">
<script src="../src/jquery.fancytree.js"></script>
<script src="../lib/jquery.configurator.js"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&amp;skin=sunburst"></script>
<!--
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sons-of-obsidian"></script>
-->
<link href="sample.css" rel="stylesheet">
<script src="sample.js"></script>
<!-- End_Exclude -->
<style type="text/css">
fieldset {
border: 1px solid;
padding: 2px;
margin-left: 8px;
}
fieldset.tree {
float: left;
}
div#tree{
width: 400px;
}
ul.fancytree-container {
border: none;
max-height: 400px;
overflow: auto;
}
fieldset.options {
}
div#options {
padding: 2px;
margin: 2px;
}
div#options ul {
padding: 4px;
margin: 0px;
font-size: 90%;
}
div#options ul li {
list-style-type: none;
}
</style>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
var OPT_LIST = [
{name: "activeVisible", value: true,
hint: "Make sure, active nodes are visible (expanded)"},
{name: "aria", value: true,
hint: "Enable WAI-ARIA support"},
{name: "autoActivate", value: true,
hint: "Automatically activate a node when it is focused using keyboard"},
{name: "autoCollapse", value: false,
hint: "Automatically collapse all siblings, when a node is expanded"},
{name: "autoScroll", value: false,
hint: "Automatically scroll nodes into visible area"},
{name: "clickFolderMode", value: [{name: "activate", value: 1},
{name: "expand", value: 2},
{name: "activate and expand", value: 3},
{name: "activate (dblclick expands)", value: 4, selected: true}],
hint: "1:activate, 2:expand, 3:activate and expand, 4:activate (dblclick expands)"},
{name: "checkbox", value: false,
hint: "Show checkboxes"},
{name: "debugLevel", value: [{name: "quiet", value: 0},
{name: "normal", value: 1},
{name: "debug", value: 2}],
hint: "0:quiet, 1:normal, 2:debug"},
{name: "disabled", value: false,
hint: "Disable control"},
{name: "focusOnSelect", value: false,
hint: "Set focus when node is checked by a mouse click"},
{name: "escapeTitles", value: false,
hint: "Escape `node.title` content for display"},
{name: "generateIds", value: false,
hint: "Generate id attributes like <span id='fancytree-id-KEY'>"},
{name: "idPrefix", value: "ft_",
hint: "Used to generate node id´s like <span id='fancytree-id-<key>'>"},
{name: "icon", value: true,
hint: "Display node icons"},
{name: "keyboard", value: true,
hint: "Support keyboard navigation"},
{name: "keyPathSeparator", value: "/",
hint: "Used by node.getKeyPath() and tree.loadKeyPath()"},
{name: "minExpandLevel", value: 1,
hint: "1: root node is not collapsible"},
{name: "quicksearch", value: false,
hint: "Navigate to next node by typing the first letters"},
{name: "rtl", value: false,
hint: "Enable RTL (right-to-left) mode"},
{name: "selectMode", value: [{name: "single", value: 1},
{name: "multi", value: 2, selected: true},
{name: "multi-hier", value: 3}],
hint: "1:single, 2:multi, 3:multi-hier"},
{name: "tabindex", value: [{name: "tabbable", value: "0"},
{name: "focusable", value: "-1"},
{name: "off", value: ""}],
hint: "Whole tree behaves as one single control"},
{name: "titlesTabbable", value: false,
hint: "Node titles can receive keyboard focus"},
{name: "tooltip", value: false,
hint: "Use title as tooltip (also a callback could be specified)"}
];
$(function(){
// Attach the fancytree widget to an existing <div id="tree"> element
// and pass the tree options as an argument to the fancytree() function:
$("#tree").fancytree({
source: {
url: "ajax-tree-plain.json"
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json"}
}
});
// Attach configurator plugin
$("#tree").configurator({
pluginName: "fancytree",
optionTarget: "div#options",
sourceTarget: "pre#sourceCode",
optionList: OPT_LIST,
render: function(event, name, value){
// var w = window.code_google_com_googleprettify;
$("#sourceCode").removeClass("prettyprinted");
// alert("change: " + name + "=" + value + "; " + PR.prettyPrint);
PR.prettyPrint();
}
});
$("input[name=showComments]").change(function(event){
$("#tree").configurator("option", "showComments", $(this).is(":checked"));
});
$("input[name=hideDefaults]").change(function(event){
$("#tree").configurator("option", "hideDefaults", $(this).is(":checked"));
});
});
</script>
</head>
<body class="example">
<h1>Fancytree Option Configurator</h1>
<div class="description">
Live preview of some Fancytree options.
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<p>
<fieldset class="tree">
<legend>Sample Fancytree</legend>
<div id="tree"> </div>
</fieldset>
<fieldset class="options">
<legend>Widget Options</legend>
<div id="options">OPTIONS</div>
</fieldset>
</p>
<label><input name="showComments" type="checkbox" checked="checked"> Render hint comments</label>
<label><input name="hideDefaults" type="checkbox"> Hide default settings</label>
<!--?prettify linenums=false?-->
<pre id="sourceCode" class="prettyprint">
</pre>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="https://github.com/mar10/fancytree">jquery.fancytree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="index.html">Example Browser</a>
<!--
<a href="#" id="codeExample">View source code</a>
-->
</p>
<!-- End_Exclude -->
</body>
</html>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-default.html deleted 100644 → 0
View file @ dd43884b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - Example</title>
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.custom.js"></script>
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="../lib/prettify.css" rel="stylesheet">
<script src="../lib/prettify.js"></script>
<link href="sample.css" rel="stylesheet">
<script src="sample.js"></script>
<!-- End_Exclude -->
<script type="text/javascript">
$(function(){
// using default options
$("#tree").fancytree();
});
</script>
</head>
<body class="example">
<h1>Example: Default</h1>
<div class="description">
This tree uses default options.<br>
It is initialized from a hidden &lt;ul> element on this page.
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<div id="tree">
<ul id="treeData" style="display: none;">
<li id="id1" title="Look, a tool tip!">item1 with key and tooltip
<li id="id2">item2
<li id="id3" class="folder">Folder <em>with some</em> children
<ul>
<li id="id3.1">Sub-item 3.1
<ul>
<li id="id3.1.1">Sub-item 3.1.1
<li id="id3.1.2">Sub-item 3.1.2
<li id="id3.1.3">Sub-item 3.1.3
</ul>
<li id="id3.2">Sub-item 3.2
<ul>
<li id="id3.2.1">Sub-item 3.2.1
<li id="id3.2.2">Sub-item 3.2.2
</ul>
</ul>
<li id="id4" class="expanded">Document with some children (expanded on init)
<ul>
<li id="id4.1" class="active focused">Sub-item 4.1 (active and focus on init)
<ul>
<li id="id4.1.1">Sub-item 4.1.1
<li id="id4.1.2">Sub-item 4.1.2
</ul>
<li id="id4.2">Sub-item 4.2
<ul>
<li id="id4.2.1">Sub-item 4.2.1
<li id="id4.2.2">Sub-item 4.2.2
</ul>
</ul>
</ul>
</div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="https://github.com/mar10/fancytree">jquery.fancytree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="index.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-events.html deleted 100644 → 0
View file @ dd43884b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - Example: Events</title>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="../lib/prettify.css" rel="stylesheet">
<script src="../lib/prettify.js"></script>
<link href="sample.css" rel="stylesheet">
<script src="sample.js"></script>
<!-- End_Exclude -->
<script type="text/javascript">
$.ui.fancytree.debugLevel = 1; // silence debug output
function logEvent(event, data, msg){
// var args = $.isArray(args) ? args.join(", ") :
msg = msg ? ": " + msg : "";
$.ui.fancytree.info("Event('" + event.type + "', node=" + data.node + ")" + msg);
}
$(function(){
$("#tree").fancytree({
checkbox: true,
// --- Tree events -------------------------------------------------
blurTree: function(event, data) {
logEvent(event, data);
},
create: function(event, data) {
logEvent(event, data);
},
init: function(event, data, flag) {
logEvent(event, data, "flag=" + flag);
},
focusTree: function(event, data) {
logEvent(event, data);
},
restore: function(event, data) {
logEvent(event, data);
},
// --- Node events -------------------------------------------------
activate: function(event, data) {
logEvent(event, data);
var node = data.node;
// acces node attributes
$("#echoActive").text(node.title);
if( !$.isEmptyObject(node.data) ){
// alert("custom node data: " + JSON.stringify(node.data));
}
},
beforeActivate: function(event, data) {
logEvent(event, data, "current state=" + data.node.isActive());
// return false to prevent default behavior (i.e. activation)
// return false;
},
beforeExpand: function(event, data) {
logEvent(event, data, "current state=" + data.node.isExpanded());
// return false to prevent default behavior (i.e. expanding or collapsing)
// return false;
},
beforeSelect: function(event, data) {
// console.log("select", event.originalEvent);
logEvent(event, data, "current state=" + data.node.isSelected());
// return false to prevent default behavior (i.e. selecting or deselecting)
// if( data.node.isFolder() ){
// return false;
// }
},
blur: function(event, data) {
logEvent(event, data);
$("#echoFocused").text("-");
},
click: function(event, data) {
logEvent(event, data, ", targetType=" + data.targetType);
// return false to prevent default behavior (i.e. activation, ...)
//return false;
},
collapse: function(event, data) {
logEvent(event, data);
},
createNode: function(event, data) {
// Optionally tweak data.node.span or bind handlers here
logEvent(event, data);
},
dblclick: function(event, data) {
logEvent(event, data);
// data.node.toggleSelect();
},
deactivate: function(event, data) {
logEvent(event, data);
$("#echoActive").text("-");
},
expand: function(event, data) {
logEvent(event, data);
},
enhanceTitle: function(event, data) {
logEvent(event, data);
},
focus: function(event, data) {
logEvent(event, data);
$("#echoFocused").text(data.node.title);
},
keydown: function(event, data) {
logEvent(event, data);
switch( event.which ) {
case 32: // [space]
data.node.toggleSelected();
return false;
}
},
keypress: function(event, data) {
// currently unused
logEvent(event, data);
},
lazyLoad: function(event, data) {
logEvent(event, data);
// return children or any other node source
data.result = {url: "ajax-sub2.json"};
// data.result = [
// {title: "A Lazy node", lazy: true},
// {title: "Another node", selected: true}
// ];
},
loadChildren: function(event, data) {
logEvent(event, data);
},
loadError: function(event, data) {
logEvent(event, data);
},
modifyChild: function(event, data) {
logEvent(event, data, "operation=" + data.operation +
", child=" + data.childNode);
},
postProcess: function(event, data) {
logEvent(event, data);
// either modify the ajax response directly
data.response[0].title += " - hello from postProcess";
// or setup and return a new response object
// data.result = [{title: "set by postProcess"}];
},
renderNode: function(event, data) {
// Optionally tweak data.node.span
// $(data.node.span).text(">>" + data.node.title);
logEvent(event, data);
},
renderTitle: function(event, data) {
// NOTE: may be removed!
// When defined, must return a HTML string for the node title
logEvent(event, data);
// return "new title";
},
select: function(event, data) {
logEvent(event, data, "current state=" + data.node.isSelected());
var s = data.tree.getSelectedNodes().join(", ");
$("#echoSelected").text(s);
}
}).bind("fancytreeactivate", function(event, data){
// alternative way to bind to 'activate' event
// logEvent(event, data);
}).on("mouseenter mouseleave", ".fancytree-title", function(event){
// Add a hover handler to all node titles (using event delegation)
var node = $.ui.fancytree.getNode(event);
node.info(event.type);
});
});
</script>
<!-- Start_Exclude: This block is not part of the sample code -->
<script>
$(function(){
addSampleButton({
label: "(De)Select active node",
newline: false,
code: function(){
var node = $("#tree").fancytree("getActiveNode");
node.setSelected( !node.isSelected() );
}
});
addSampleButton({
label: "Remove active node",
newline: false,
code: function(){
var node = $("#tree").fancytree("getActiveNode");
node.remove();
}
});
});
</script>
<!-- End_Exclude -->
</head>
<body class="example">
<h1>Example: Events</h1>
<div class="description">
Implements all callbacks: Open your browser's console to see the event log.
<br>
The 'links' folders contain nodes with a custom data.url option.
This is used to open the URL in the onActivate event.
<br>
See the <a href="https://github.com/mar10/fancytree/wiki/TutorialEvents"
target="_blank" class="external">Events Tutorial</a>
for details.
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<p id="sampleButtons">
</p>
<div id="tree">
<ul>
<li class="folder">jQuery links
<ul>
<li data-foo="bar">jQuery home
<li data-json='{"url": "http://docs.jquery.com"}'>jQuery docs
</ul>
<li class="folder">Other links
<ul>
<li data-url="http://code.google.com">Google Code
</ul>
<li class="folder">Lazy loading
<ul>
<li id="k123" class="lazy">This is a lazy loading document with key k123.
<li id="k234" class="lazy folder">This is a lazy loading folder with key k234.
</ul>
</ul>
</div>
<div>Active node: <span id="echoActive">-</span></div>
<div>Selected node list: <span id="echoSelected">-</span></div>
<div>Focused node: <span id="echoFocused">-</span></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="https://github.com/mar10/fancytree/">Fancytree project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="index.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>