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 3099 deletions
src/LIB-NOT-USED/jquery.fancytree/demo/sample-ext-awesome-3.html deleted 100644 → 0
View file @ dd43884b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Fancytree - Example: Awesome Extension</title>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<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 rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link href="../src/skin-awesome/ui.fancytree.css" rel="stylesheet" class="skinswitcher">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.glyph.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="../demo/sample.css" rel="stylesheet">
<script src="../demo/sample.js"></script>
<style type="text/css">
ul.fancytree-container {
/*font-size: 2em;*/
}
</style>
<!-- End_Exclude -->
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
// Initialize Fancytree
$("#tree").fancytree({
extensions: ["glyph"],
checkbox: true,
selectMode: 3,
glyph: {
map: {
doc: "icon-file-alt",
docOpen: "icon-file-alt",
checkbox: "icon-check-empty",
checkboxSelected: "icon-check",
checkboxUnknown: "icon-check icon-muted",
error: "icon-exclamation-sign",
expanderClosed: "icon-caret-right",
expanderLazy: "icon-angle-right",
// expanderLazy: "icon-refresh icon-spin",
expanderOpen: "icon-caret-down",
folder: "icon-folder-close-alt",
folderOpen: "icon-folder-open-alt",
loading: "icon-refresh icon-spin"
// loading: "icon-spinner icon-spin"
}
},
// source: {url: "ajax-tree-plain.json", debugDelay: 1000},
source: {url: "ajax-tree-taxonomy.json", debugDelay: 1000},
lazyLoad: function(event, ctx) {
ctx.result = {url: "ajax-sub2.json", debugDelay: 1000};
}
});
});
</script>
<!-- Start_Exclude: This block is not part of the sample code -->
<script>
$(function(){
// Adjust skinswitcher for current folder layout
function setSize(event, ui){
$("#tree .fancytree-container").css("font-size", ui.value + "pt");
$("#curSize").text(ui.value + " pt");
}
$( "#fontSlider" ).slider({
min: 4,
max: 64,
value: 10,
change: setSize,
slide: setSize
}).slider("value", 10);
/*
$("#skinswitcher")
// .skinswitcher("option", "base", "../../src/")
.skinswitcher("addChoices", [
{name: "Awesome", value: "awesome", href: "skin-awesome/ui.fancytree.css"}
])
.skinswitcher("change", "awesome");
*/
/*
addSampleButton({
label: "Generate <input> elements",
code: function(){
$("#tree").fancytree("getTree").generateInput();
$("#tree2").fancytree("getTree").generateInput();
}
});
*/
});
</script>
<!-- End_Exclude -->
</head>
<body class="example">
<h1>Example: 'glyph' extension with awesome theme</h1>
<div class="description">
<p>
The 'glyph' extension adds <code>icon-...</code> classes to the
node's <code>span</code> tags, so scalable vector icons as provided by
<a href="http://fortawesome.github.io/Font-Awesome/" class="external" target="_blank">Font Awesome</a>
can be used.
</p>
<p>
<b>Status</b>: pre-alpha
</p>
</div>
<!--
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
-->
<hr>
Font size: <span id="curSize"></span>
<div id="fontSlider"></div>
<hr>
<div id="tree">
</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/">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>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-ext-awesome.html deleted 100644 → 0
View file @ dd43884b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Fancytree - Example: font-awesome</title>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<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 rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="../src/skin-awesome/ui.fancytree.css" rel="stylesheet" class="skinswitcher">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.glyph.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="../demo/sample.css" rel="stylesheet">
<script src="../demo/sample.js"></script>
<style type="text/css">
ul.fancytree-container {
/*font-size: 2em;*/
}
</style>
<!-- End_Exclude -->
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
// Initialize Fancytree
$("#tree").fancytree({
extensions: ["glyph"],
checkbox: true,
selectMode: 3,
glyph: {
map: {
doc: "fa fa-file-o",
docOpen: "fa fa-file-o",
checkbox: "fa fa-square-o",
checkboxSelected: "fa fa-check-square-o",
checkboxUnknown: "fa fa-square",
dragHelper: "fa fa-arrow-right",
dropMarker: "fa fa-long-arrow-right",
error: "fa fa-warning",
expanderClosed: "fa fa-caret-right",
expanderLazy: "fa fa-angle-right",
expanderOpen: "fa fa-caret-down",
folder: "fa fa-folder-o",
folderOpen: "fa fa-folder-open-o",
loading: "fa fa-spinner fa-pulse"
}
},
source: {url: "ajax-tree-taxonomy.json", debugDelay: 1000},
lazyLoad: function(event, ctx) {
ctx.result = {url: "ajax-sub2.json", debugDelay: 1000};
}
});
});
</script>
<!-- Start_Exclude: This block is not part of the sample code -->
<script>
$(function(){
// Adjust skinswitcher for current folder layout
function setSize(event, ui){
$("#tree .fancytree-container").css("font-size", ui.value + "pt");
$("#curSize").text(ui.value + " pt");
}
$( "#fontSlider" ).slider({
min: 4,
max: 64,
value: 10,
change: setSize,
slide: setSize
}).slider("value", 10);
/*
$("#skinswitcher")
// .skinswitcher("option", "base", "../../src/")
.skinswitcher("addChoices", [
{name: "Awesome", value: "awesome", href: "skin-awesome/ui.fancytree.css"}
])
.skinswitcher("change", "awesome");
*/
/*
addSampleButton({
label: "Generate <input> elements",
code: function(){
$("#tree").fancytree("getTree").generateInput();
$("#tree2").fancytree("getTree").generateInput();
}
});
*/
});
</script>
<!-- End_Exclude -->
</head>
<body class="example">
<h1>Example: 'glyph' extension with font-awesome theme</h1>
<div class="description">
<p>
The 'glyph' extension adds <code>fa-...</code> classes to the
node's <code>span</code> tags, so scalable vector icons as provided by
<a href="http://fontawesome.io/" class="external" target="_blank">Font Awesome</a>
can be used.
</p>
</div>
<hr>
Font size: <span id="curSize"></span>
<div id="fontSlider"></div>
<hr>
<div id="tree">
</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/">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>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-ext-bootstrap.html deleted 100644 → 0
View file @ dd43884b
<!DOCTYPE html>
<html>
<head>
<title>Fancytree - Example: Glyph Extension / Bootstrap Theme</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!--
<meta name="viewport" content="width=device-width, initial-scale=1">
-->
<!--
NOTE: "Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3"
-->
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!--
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link href="../src/skin-awesome/ui.fancytree.css" rel="stylesheet" class="skinswitcher">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
-->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="../src/skin-bootstrap/ui.fancytree.css" rel="stylesheet"
class="skinswitcher">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.dnd.js"></script>
<script src="../src/jquery.fancytree.edit.js"></script>
<script src="../src/jquery.fancytree.glyph.js"></script>
<script src="../src/jquery.fancytree.table.js"></script>
<script src="../src/jquery.fancytree.wide.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="../demo/sample.css" rel="stylesheet">
<script src="../demo/sample.js"></script>
<style type="text/css">
body {
padding: 15px;
}
ul.fancytree-container {
border: none;
}
/* Reduce bootstrap's default 'panel' padding: */
div#tree {
padding: 3px 5px;
}
</style>
<!-- End_Exclude -->
<style type="text/css">
/* Define custom width and alignment of table columns */
#treetable {
table-layout: fixed;
}
#treetable tr td:nth-of-type(1) {
text-align: right;
}
#treetable tr td:nth-of-type(2) {
text-align: center;
}
#treetable tr td:nth-of-type(3) {
min-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
glyph_opts = {
map: {
doc: "glyphicon glyphicon-file",
docOpen: "glyphicon glyphicon-file",
checkbox: "glyphicon glyphicon-unchecked",
checkboxSelected: "glyphicon glyphicon-check",
checkboxUnknown: "glyphicon glyphicon-share",
dragHelper: "glyphicon glyphicon-play",
dropMarker: "glyphicon glyphicon-arrow-right",
error: "glyphicon glyphicon-warning-sign",
expanderClosed: "glyphicon glyphicon-menu-right",
expanderLazy: "glyphicon glyphicon-menu-right", // glyphicon-plus-sign
expanderOpen: "glyphicon glyphicon-menu-down", // glyphicon-collapse-down
folder: "glyphicon glyphicon-folder-close",
folderOpen: "glyphicon glyphicon-folder-open",
loading: "glyphicon glyphicon-refresh glyphicon-spin"
}
};
$(function(){
// Initialize Fancytree
$("#tree").fancytree({
extensions: ["dnd", "edit", "glyph", "wide"],
checkbox: true,
dnd: {
focusOnClick: true,
dragStart: function(node, data) { return true; },
dragEnter: function(node, data) { return false; },
dragDrop: function(node, data) { data.otherNode.copyTo(node, data.hitMode); }
},
glyph: glyph_opts,
selectMode: 2,
source: {url: "ajax-tree-taxonomy.json", debugDelay: 1000},
toggleEffect: { effect: "drop", options: {direction: "left"}, duration: 400 },
wide: {
iconWidth: "1em", // Adjust this if @fancy-icon-width != "16px"
iconSpacing: "0.5em", // Adjust this if @fancy-icon-spacing != "3px"
labelSpacing: "0.1em", // Adjust this if padding between icon and label != "3px"
levelOfs: "1.5em" // Adjust this if ul padding != "16px"
},
icon: function(event, data){
// if( data.node.isFolder() ) {
// return "glyphicon glyphicon-book";
// }
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json", debugDelay: 1000};
}
});
$("#treetable").fancytree({
extensions: ["dnd", "edit", "glyph", "table"],
checkbox: true,
dnd: {
focusOnClick: true,
dragStart: function(node, data) { return true; },
dragEnter: function(node, data) { return true; },
dragDrop: function(node, data) { data.otherNode.copyTo(node, data.hitMode); }
},
glyph: glyph_opts,
source: {url: "ajax-tree-taxonomy.json", debugDelay: 1000},
table: {
checkboxColumnIdx: 1,
nodeColumnIdx: 2
},
activate: function(event, data) {
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json", debugDelay: 1000};
},
renderColumns: function(event, data) {
var node = data.node,
$tdList = $(node.tr).find(">td");
$tdList.eq(0).text(node.getIndexHier());
$tdList.eq(3).text(!!node.folder);
}
});
});
</script>
<!-- Start_Exclude: This block is not part of the sample code -->
<script>
$(function(){
$("#btnExpandAll").click(function(){
$("#tree").fancytree("getTree").visit(function(node){
node.setExpanded(true);
});
});
$("#btnCollapseAll").click(function(){
$("#tree").fancytree("getTree").visit(function(node){
node.setExpanded(false);
});
});
$( "#fontSize" ).change(function(){
$("#tree .fancytree-container").css("font-size", $(this).prop("value") + "pt");
});//.prop("value", 12);
$("#plainTreeStyles").on("change", "input", function(e){
$("#tree ul").toggleClass($(this).data("class"), $(this).is(":checked"));
});
$("#bootstrapTableStyles").on("change", "input", function(e){
$("#treetable").toggleClass($(this).data("class"), $(this).is(":checked"));
});
});
</script>
<!-- End_Exclude -->
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<h1>Example: Bootstrap theme</h1>
</div>
<div class="panel-body">
<p>
The 'glyph' extension adds <code>icon-...</code> classes to the
node's <code>span</code> tags, so scalable vector icons as provided by
<a href="http://fortawesome.github.io/Font-Awesome/" class="external" target="_blank">Font Awesome</a> or <a href="http://getbootstrap.com/components/" class="external" target="_blank">Bootstrap Glyphicons</a> can be used.
</p>
<p>
The theme defines some colors from bootstrap. To change it, run
<a href="https://github.com/mar10/fancytree/wiki/HowtoContribute">grunt dev</a> and edit the
<a href="https://github.com/mar10/fancytree/blob/master/src/skin-bootstrap/ui.fancytree.less" class="external" target="_blank">LESS definition</a>.
</p>
<p>
<b>Status</b>: alpha
</p>
</div>
</div>
<p>
Font size: <span id="curSize"></span>
<input id="fontSize" type="number" min="4" max="48" value="10"> pt
</p>
<h3> Plain tree </h3>
<p id="plainTreeStyles">
<b>Add container class:</b><br>
<!--
<label><input type="checkbox" data-class="fancytree-colorize-hover"> fancytree-colorize-hover</label>
-->
<label><input type="checkbox" data-class="fancytree-colorize-selected"> fancytree-colorize-selected</label>
</p>
<div class="panel panel-default">
<div class="panel-heading">
<b>Taxonomy</b>
</div>
<div id="tree" class="panel-body fancytree-colorize-hover fancytree-fade-expander">
</div>
<div class="panel-footer">
<button id="btnExpandAll" class="btn btn-xs btn-primary">Expand all</button>
<button id="btnCollapseAll" class="btn btn-xs btn-warning">Collapse all</button>
</div>
</div>
<h3> Table tree </h3>
<p id="bootstrapTableStyles">
<b>Add table class:</b><br>
<label><input type="checkbox" data-class="table-bordered"> table-bordered</label>
<label><input type="checkbox" data-class="table-condensed" checked="checked"> table-condensed</label>
<label><input type="checkbox" data-class="table-striped" checked="checked"> table-striped</label>
<label><input type="checkbox" data-class="table-hover" checked="checked"> table-hover</label>
<label><input type="checkbox" data-class="table-responsive"> table-responsive</label>
<label><input type="checkbox" data-class="fancytree-colorize-selected"> fancytree-colorize-selected</label>
</p>
<table id="treetable" class="table table-condensed table-hover table-striped fancytree-fade-expander">
<colgroup>
<col width="80px"></col>
<col width="30px"></col>
<col width="*"></col>
<col width="100px"></col>
<col width="100px"></col>
<col width="100px"></col>
</colgroup>
<thead>
<tr> <th></th> <th></th> <th>Classification</th> <th>Folder</th> <th></th> <th></th> </tr>
</thead>
<tbody>
<tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>
</tbody>
</table>
<!-- 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>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-ext-childcounter.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: childcounter</title>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.childcounter.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>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
$("#tree").fancytree({
extensions: ["childcounter"],
source: {
url: "ajax-tree-plain.json"
},
childcounter: {
deep: true,
hideZeros: true,
hideExpanded: true
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json"}
},
loadChildren: function(event, data) {
// update node and parent counters after lazy loading
data.node.updateCounters();
}
});
});
</script>
</head>
<body class="example">
<h1>Example: 'childcounter' extension</h1>
<div class="description">
<p>
Display count of children at parent node.
</p>
<p>
The main puropse of this extension is to serve as an example for
Fanytree's the general extension concept:
<br>
See the
<a class="external" href="../doc/annotated-src/jquery.fancytree.childcounter.html">annotated source</a>
to learn how to write a Fancytree extension.<br>
Click the [View source code] link below, to see how an extension is used.
</p>
<p>
<b>Status</b>: beta
</p>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<!-- Add a <table> element where the tree should appear: -->
<div id="tree">
</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-ext-clones.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: ext-clones</title>
<!--
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
-->
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.custom.js"></script>
<link href="../src/skin-win8/ui.fancytree.css" class="skinswitcher" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.clones.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">
span.fancytree-node.fancytree-clone span.fancytree-title {
color: blue;
}
span.fancytree-node.fancytree-clone span.fancytree-title:after {
content: "";
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAFVBMVEVmmcwzmcyZzP8AZswAZv////////9E6giVAAAAB3RSTlP///////8AGksDRgAAADhJREFUGFcly0ESAEAEA0Ei6/9P3sEcVB8kmrwFyni0bOeyyDpy9JTLEaOhQq7Ongf5FeMhHS/4AVnsAZubxDVmAAAAAElFTkSuQmCC") 100% 50% no-repeat;
padding-right: 13px;
}
span.fancytree-node.fancytree-active-clone {
border-color: blue;
-moz-animation: flash 1s ease-out;
-moz-animation-iteration-count: 1;
-webkit-animation: flash 1s ease-out;
-webkit-animation-iteration-count: 1;
-ms-animation: flash 1s ease-out;
-ms-animation-iteration-count: 1;
}
@-ms-keyframes flash {
0% { background-color:none;}
50% { background-color:#fbf8b2;}
100% {background-color:none;}
}
@-moz-keyframes flash {
0% { background-color:none;}
50% { background-color:#fbf8b2;}
100% {background-color:none;}
}
@-ms-keyframes flash {
0% { background-color:none;}
50% { background-color:#fbf8b2;}
100% {background-color:none;}
}
</style>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
var SOURCE = [
{title: "Item 1", key: "node1"},
{title: "Folder 2", folder: true, expanded: true, key: "node2",
children: [
{title: "Sub-item 2.1, refKey=3", key: "node2.1", refKey: "3"},
{title: "Sub-item 2.2", key: "node2.2", refKey: "2"}
]
},
{title: "Folder 3", folder: true, expanded: true, key: "node3",
children: [
{title: "Sub-item 2.1", key: "node3.1", selected: false,
children: [
{title: "Sub-item 3.1.1", key: "node3.1.1"},
{title: "Sub-item 3.1.2", key: "node3.1.2", refKey: "2"}
]
},
{title: "Sub-item 2.2", key: "node3.2"}
]
},
{title: "Folder 4", folder: true, expanded: true, key: "node4",
children: [
{title: "Sub-item 2.1", key: "node4.1", refKey: "1"},
{title: "Sub-item 2.2", key: "node4.2", refKey: "1", selected: false},
{title: "Sub-item 2.3 (unselectable)", key: "node4.3", selected: false, unselectable: true}
]
},
{title: "Item 3", key: "node5", lazy: true}
];
// Lazy sub nodes
var SOURCE_2 = [
{title: "Lazy Folder 3.1", folder: true, expanded: true,
children: [
{title: "Lazy Sub-item 3.1.1", selected: false, refKey: "rk311",
children: [
{title: "Sub-item 3.1.1.1", refKey: "rk3111"},
{title: "Sub-item 3.1.1.2", refKey: "rk3112", selected: false}
]
},
{title: "Sub-item 3.1.2"}
]
}
];
$(function(){
$("#tree").fancytree({
extensions: ["clones"],
// source: { url: "ajax-tree-plain.json" },
source: SOURCE,
clones: {
highlightClones: true
},
lazyLoad: function(e, data) {
// data.result = {url: "ajax-sub2.json"}
data.result = SOURCE_2
},
activate: function(e, data){
var clones = data.node.getCloneList();
if( clones ) {
// alert("Clones: "+ $.map(clones, function(n){ return "" + n;}).join(", "));
}
}
});
});
</script>
<!-- Start_Exclude: This block is not part of the sample code -->
<script>
$(function(){
addSampleButton({
label: "find clones",
newline: false,
code: function(){
var tree = $("#tree").fancytree("getTree"),
node3 = tree.getNodeByKey("node3");
alert("refKey '2' = " + tree.getNodesByRef("2"));
alert("refKey '2' below 'node3'' = " + tree.getNodesByRef("2", node3));
}
});
addSampleButton({
label: "remove",
newline: false,
code: function(){
var tree = $("#tree").fancytree("getTree"),
node = tree.getActiveNode();
node.remove();
}
});
});
</script>
<!-- End_Exclude -->
</head>
<body class="example">
<h1>Example: 'clones' extension</h1>
<div class="description">
<p>
Support linked nodes, i.e. multiple tree nodes representing the same
data instance.
</p>
<p>
</p>
<p>
<b>Status:</b> production.
<b>Details:</b>
<a href="https://github.com/mar10/fancytree/wiki/ExtClones"
target="_blank" class="external">ext-clones</a>.
</p>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<p id="sampleButtons">
</p>
<!-- Add a <table> element where the tree should appear: -->
<div id="tree">
</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-ext-columnview.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: columnview</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-lion/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.columnview.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-ext-columnview {
border-collapse: collapse;
width: 100%;
}
table.fancytree-container tbody tr td{
max-width: 300px; /* width does not work */
}
span.fancytree-node{
white-space: nowrap; /* prevent long lines to wrap */
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
/*
display: inline;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
*/
}
span.fancytree-title{
display: inline; /* prevent long lines to start with a break after the icon */
}
span.selTag{
border: 1px outset #dec;
display: inline-block;
padding: 0 5px;
margin: 1px 5px;
background-color: #dec;
border-radius: 5px;
cursor: pointer;
}
span.selTag button.close{
border: 1px solid transparent;
border-radius: 4px;
padding: 0px 1px 2px 1px;
margin-left: 8px;
background-color: transparent;
visibility: hidden;
}
span.selTag:hover button.close{
border-color: gray;
background-color: #f99;
visibility: visible;
}
</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:
$("#columnview").fancytree({
extensions: ["columnview"],
checkbox: true,
source: {
url: "ajax-tree-plain.json"
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json"};
},
activate: function(event, data) {
$("td#preview").text("activate " + data.node);
},
select: function(event, data) {
// create a tag, when node is selected
var node = data.node;
$("span#tag-" + node.key).remove();
if(node.selected){
$("<span>", {
id: "tag-" + node.key,
text: node.title,
"class": "selTag"
})
.data("key", node.key)
.append("<button class='close'>&times;</button>")
.appendTo($("td#tags"));
}
}
});
$("td#tags").on("click", "button.close", function(e){
// Bind live handler that deselects the node when user clicks 'x' of a tag
var key = $(e.target).parent().data("key"),
node = $(":ui-fancytree").fancytree("getNodeByKey", key);
node.setSelected(false);
return false; // do not bubble and trigger span click
}).on("click", "span.selTag", function(e){
// Bind live handler that activates the node, when tag is clicked
var key = $(e.target).data("key"),
node = $(":ui-fancytree").fancytree("getNodeByKey", key);
node.setActive();
});
});
</script>
</head>
<body class="example">
<h1>Example: 'columnview' extension</h1>
<div class="description">
<p>
Display tree data in a column view as known from Apple Macintosh / OSX.
</p>
<p>
<b>Status</b>: experimental
</p>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<!-- Add a <table> element where the tree should appear: -->
<table id="columnview">
<colgroup>
<col width="300px"></col>
<col width="300px"></col>
<col width="300px"></col>
</colgroup>
<thead>
<tr> <th>1</th> <th>2</th> <th>3</th> </tr>
</thead>
<tbody>
<tr> <td>?</td> <td>?</td> <td>?</td> </tr>
<tr> <td id="tags" colspan="3">Selected nodes: </td> </tr>
<tr> <td id="preview" colspan="3">preview</td> </tr>
</tbody>
</table>
<!-- 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-ext-dnd.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: Drag'n'drop</title>
<script src="//code.jquery.com/jquery-1.12.1.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.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>
<script src="../src/jquery.fancytree.edit.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">
#draggableSample, #droppableSample {
height:100px;
padding:0.5em;
width:150px;
border:1px solid #AAAAAA;
}
#draggableSample {
background-color: silver;
color:#222222;
}
#droppableSample {
background-color: maroon;
color: white;
}
#droppableSample.drophover {
border: 1px solid green;
}
</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({
extensions: ["dnd", "edit"],
// titlesTabbable: true,
source: {
url: "ajax-tree-fs.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) {
/** This function MUST be defined to enable dragging for the tree.
* Return false to cancel dragging of node.
*/
return true;
},
dragEnter: function(node, data) {
/** data.otherNode may be null for non-fancytree droppables.
* Return false to disallow dropping on node. In this case
* dragOver and dragLeave are not called.
* Return 'over', 'before, or 'after' to force a hitMode.
* Return ['before', 'after'] to restrict available hitModes.
* Any other return value will calc the hitMode from the cursor position.
*/
// Prevent dropping a parent below another parent (only sort
// nodes under the same parent)
/* if(node.parent !== data.otherNode.parent){
return false;
}
// Don't allow dropping *over* a node (would create a child)
return ["before", "after"];
*/
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);
}
},
activate: function(event, data) {
// alert("activate " + data.node);
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json"}
}
});
});
</script>
</head>
<body class="example">
<h1>Example: 'dnd' extension</h1>
<div class="description">
<p>
jQuery UI based Drag-and-Drop support:
</p>
<ul>
<li>Support drag-and-drop of tree nodes (inside the same or between
different trees).</li>
<li>Behave like a standard jQuery UI draggable, i.e. allow
dropping of nodes on standard droppables.</li>
<li>Behave like a standard jQuery UI droppable, i.e. allow
dropping of standard draggables.</li>
</ul>
<p>
<b>Note:</b> Consider using the <a href="sample-ext-dnd5.html">
<i>native</i> drag-and-drop</a> extension instead.<br>
<b>Status:</b> production.
<b>Details:</b>
<a href="https://github.com/mar10/fancytree/wiki/ExtDnd"
target="_blank" class="external">ext-dnd</a>.
</p>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<!-- Add a <table> element where the tree should appear: -->
<div id="tree">
</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-ext-dnd5.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: Drag'n'drop</title>
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.custom.js"></script>
<!--
<script src="//code.jquery.com/jquery-1.12.1.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
-->
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.dnd5.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">
#draggableSample, #droppableSample {
height:100px;
padding:0.5em;
width:150px;
border:1px solid #AAAAAA;
}
#draggableSample {
background-color: silver;
color:#222222;
}
#droppableSample {
background-color: maroon;
color: white;
}
#droppableSample.drophover {
border: 1px solid green;
}
#droppableSample.drophover {
border: 1px solid green;
}
span.drag-source {
border: 1px solid grey;
border-radius: 3px;
padding: 2px;
background-color: silver
}
ul.fancytree-container {
max-height: 200px;
overflow-y: scroll;
}
span.fancytree-node.fancytree-drag-source {
outline: 1px dotted grey;
}
/*
span.fancytree-node.fancytree-drag-source.fancytree-drag-remove {
opacity: 0.4;
}
span.fancytree-node.fancytree-drop-over {
outline: 1px solid gray;
}
*/
span.fancytree-node.fancytree-drop-accept {
outline: 1px dotted green;
}
span.fancytree-node.fancytree-drop-reject {
outline: 1px dotted red;
}
</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({
extensions: ["dnd5"],
// titlesTabbable: true,
source: {
url: "ajax-tree-fs.json"
},
dnd5: {
// autoExpandMS: 400,
// preventForeignNodes: true,
// preventNonNodes: true,
// preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
// preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
// scroll: true,
// scrollSpeed: 7,
// scrollSensitivity: 10,
// --- Drag-support:
dragStart: function(node, data) {
/* This function MUST be defined to enable dragging for the tree.
*
* Return false to cancel dragging of node.
* data.dataTransfer.setData() and .setDragImage() is available
* here.
*/
// data.dataTransfer.setDragImage($("<div>hurz</div>").appendTo("body")[0], -10, -10);
return true;
},
dragDrag: function(node, data) {
data.dataTransfer.dropEffect = "move";
},
dragEnd: function(node, data) {
},
// --- Drop-support:
dragEnter: function(node, data) {
// node.debug("dragEnter", data);
data.dataTransfer.dropEffect = "move";
// data.dataTransfer.effectAllowed = "copy";
return true;
},
dragOver: function(node, data) {
data.dataTransfer.dropEffect = "move";
// data.dataTransfer.effectAllowed = "copy";
},
dragLeave: function(node, data) {
},
dragDrop: function(node, data) {
/* This function MUST be defined to enable dropping of items on
* the tree.
*/
var transfer = data.dataTransfer;
node.debug("drop", data);
// alert("Drop on " + node + ":\n"
// + "source:" + JSON.stringify(data.otherNodeData) + "\n"
// + "hitMode:" + data.hitMode
// + ", dropEffect:" + transfer.dropEffect
// + ", effectAllowed:" + transfer.effectAllowed);
if( data.otherNode ) {
// Drop another Fancytree node from same frame
// (maybe from another tree however)
var sameTree = (data.otherNode.tree === data.tree);
data.otherNode.moveTo(node, data.hitMode);
} else if( data.otherNodeData ) {
// Drop Fancytree node from different frame or window, so we only have
// JSON representation available
node.addChild(data.otherNodeData, data.hitMode);
} else {
// Drop a non-node
node.addNode({
title: transfer.getData("text")
}, data.hitMode);
}
node.setExpanded();
}
},
activate: function(event, data) {
// alert("activate " + data.node);
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json"}
}
});
});
</script>
</head>
<body class="example">
<h1>Example: 'dnd5' extension</h1>
<div class="description">
<p>
Native Drag-and-Drop support:
</p>
<ul>
<li>Support drag and drop of tree nodes (inside the same or between
different trees).</li>
<li>Support drag and drop between different frames, browser tabs,
windows, or desktop.</li>
<li>Requires IE 11 or later.</li>
</ul>
<p>
<b>Status:</b> experimental.
<b>Details:</b>
<a href="https://github.com/mar10/fancytree/wiki/ExtDnd5"
target="_blank" class="external">ext-dnd5</a>.
</p>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<p>
<span class="drag-source" draggable="true"
ondragstart="event.dataTransfer.setData('text/plain', 'Drag me');">
Drag me</span>
<br>
<label>Drop here:
<input type="text" class="drag-taget" placeholder="Drop here">
</label>
</p>
<!-- Add a <table> element where the tree should appear: -->
<div id="tree">
</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-ext-edit.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 - Editable Nodes</title>
<script src="//code.jquery.com/jquery-1.12.1.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.edit.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">
span.pending span.fancytree-title {
font-style: italic;
}
span.pending span.fancytree-title:after {
content: "\2026"; /* ellipsis */
}
</style>
<script type="text/javascript">
$(function(){
$("#tree").fancytree({
extensions: ["edit"],
source: {url: "ajax-tree-plain.json"},
lazyLoad: function(event, data) {
data.result = { url: "ajax-sub2.json", debugDelay: 1000 };
},
edit: {
triggerStart: ["f2", "dblclick", "shift+click", "mac+enter"],
beforeEdit: function(event, data){
// Return false to prevent edit mode
},
edit: function(event, data){
// Editor was opened (available as data.input)
},
beforeClose: function(event, data){
// Return false to prevent cancel/save (data.input is available)
console.log(event.type, event, data);
if( data.originalEvent.type === "mousedown" ) {
// We could prevent the mouse click from generating a blur event
// (which would then again close the editor) and return `false` to keep
// the editor open:
// data.originalEvent.preventDefault();
// return false;
// Or go on with closing the editor, but discard any changes:
// data.save = false;
}
},
save: function(event, data){
// Save data.input.val() or return false to keep editor open
console.log("save...", this, data);
// Simulate to start a slow ajax request...
setTimeout(function(){
$(data.node.span).removeClass("pending");
// Let's pretend the server returned a slightly modified
// title:
data.node.setTitle(data.node.title + "!");
}, 2000);
// We return true, so ext-edit will set the current user input
// as title
return true;
},
close: function(event, data){
// Editor was removed
if( data.save ) {
// Since we started an async request, mark the node as preliminary
$(data.node.span).addClass("pending");
}
}
}
});
});
</script>
<!-- Start_Exclude: This block is not part of the sample code -->
<script>
$(function(){
addSampleButton({
label: "Add child",
newline: false,
code: function(){
var node = $("#tree").fancytree("getActiveNode");
if( !node ) {
alert("Please activate a parent node.");
return;
}
node.editCreateNode("child", "Node title");
}
});
addSampleButton({
label: "Add sibling folder",
newline: false,
code: function(){
var node = $("#tree").fancytree("getActiveNode");
node.editCreateNode("after", {
title: "Node title",
folder: true
});
}
});
});
</script>
<!-- End_Exclude -->
</head>
<body class="example">
<h1>Example: 'edit' extension</h1>
<div class="description">
<p>
Rename or create nodes using inline editing.
</p>
<p>
Edit the node titles with `dblclick`, `Shift + click` [F2], or [Enter] (on Mac only).
</p>
<p>
<b>Status:</b> production.
<b>Details:</b>
<a href="https://github.com/mar10/fancytree/wiki/ExtEdit"
target="_blank" class="external">ext-edit</a>.
</p>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<div id="tree">
</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/">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>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-ext-filter.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: Filter</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="../src/jquery.fancytree.filter.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>
<!-- 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({
extensions: ["filter"],
quicksearch: true,
source: {
url: "ajax-tree-local.json"
},
filter: {
autoApply: true, // Re-apply last filter if lazy data is loaded
autoExpand: false, // Expand all branches that contain matches while filtered
counter: true, // Show a badge with number of matching child nodes near parent icons
fuzzy: false, // Match single characters in order, e.g. 'fb' will match 'FooBar'
hideExpandedCounter: true, // Hide counter badge if parent is expanded
hideExpanders: false, // Hide expanders if all child nodes are hidden by filter
highlight: true, // Highlight matches by wrapping inside <mark> tags
leavesOnly: false, // Match end nodes only
nodata: true, // Display a 'no data' status node if result is empty
mode: "dimm" // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
},
activate: function(event, data) {
// alert("activate " + data.node);
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json"}
}
// }).on("keydown", function(e){
// var c = String.fromCharCode(e.which);
// if( c === "F" && e.ctrlKey ) {
// $("input[name=search]").focus();
// }
});
var tree = $("#tree").fancytree("getTree");
/*
* Event handlers for our little demo interface
*/
$("input[name=search]").keyup(function(e){
var n,
tree = $.ui.fancytree.getTree(),
args = "autoApply autoExpand fuzzy hideExpanders highlight leavesOnly nodata".split(" "),
opts = {},
filterFunc = $("#branchMode").is(":checked") ? tree.filterBranches : tree.filterNodes,
match = $(this).val();
$.each(args, function(i, o) {
opts[o] = $("#" + o).is(":checked");
});
opts.mode = $("#hideMode").is(":checked") ? "hide" : "dimm";
if(e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === ""){
$("button#btnResetSearch").click();
return;
}
if($("#regex").is(":checked")) {
// Pass function to perform match
n = filterFunc.call(tree, function(node) {
return new RegExp(match, "i").test(node.title);
}, opts);
} else {
// Pass a string to perform case insensitive matching
n = filterFunc.call(tree, match, opts);
}
$("button#btnResetSearch").attr("disabled", false);
$("span#matches").text("(" + n + " matches)");
}).focus();
$("button#btnResetSearch").click(function(e){
$("input[name=search]").val("");
$("span#matches").text("");
tree.clearFilter();
}).attr("disabled", true);
$("fieldset input:checkbox").change(function(e){
var id = $(this).attr("id"),
flag = $(this).is(":checked");
// Some options can only be set with general filter options (not method args):
switch( id ){
case "counter":
case "hideExpandedCounter":
tree.options.filter[id] = flag;
break;
}
tree.clearFilter();
$("input[name=search]").keyup();
});
addSampleButton({
label: "Filter active branch",
newline: false,
code: function(){
if( !tree.getActiveNode() ) {
alert("Please activate a folder.");
return;
}
tree.filterBranches(function(node){
return node.isActive();
});
}
});
addSampleButton({
label: "Reset filter",
newline: false,
code: function(){
tree.clearFilter();
}
});
});
</script>
</head>
<body class="example">
<h1>Example: 'filter' extension</h1>
<div class="description">
<p>
Allow to dimm or hide nodes based on a matching expression.
</p>
<p>
<b>Status:</b> production.
<b>Details:</b>
<a href="https://github.com/mar10/fancytree/wiki/ExtFilter"
target="_blank" class="external">ext-filter</a>.
</p>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<p>
<label>Filter:</label>
<input name="search" placeholder="Filter..." autocomplete="off">
<button id="btnResetSearch">&times;</button>
<span id="matches"></span>
</p>
<!-- Start_Exclude: This block is not part of the sample code -->
<fieldset>
<legend>Options</legend>
<label for="regex">
<input type="checkbox" id="regex">
Regular expression
</label>
<br>
<label for="hideMode">
<input type="checkbox" id="hideMode">
Hide unmatched nodes
</label>
<label for="autoExpand">
<input type="checkbox" id="autoExpand" checked="checked">
Auto expand
</label>
<label for="branchMode">
<input type="checkbox" id="branchMode">
Match whole branch
</label>
<label for="leavesOnly">
<input type="checkbox" id="leavesOnly">
Match end nodes only
</label>
<br>
<label for="fuzzy">
<input type="checkbox" id="fuzzy">
Fuzzy
</label>
<label for="hideExpanders">
<input type="checkbox" id="hideExpanders">
hideExpanders
</label>
<label for="highlight">
<input type="checkbox" id="highlight" checked="checked">
Highlight
</label>
<label for="nodata">
<input type="checkbox" id="nodata" checked="checked">
nodata
</label>
<br>
<label for="counter">
<input type="checkbox" id="counter" checked="checked">
Add counter badges
</label>
<label for="hideExpandedCounter">
<input type="checkbox" id="hideExpandedCounter" checked="checked">
hideExpandedCounter
</label>
</fieldset>
<p id="sampleButtons">
</p>
<!-- End_Exclude -->
<!-- Add a <table> element where the tree should appear: -->
<div id="tree">
</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-ext-fixed.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: Fixed Headers</title>
<script src="//code.jquery.com/jquery-1.12.1.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style type="text/css">
/* Set alternating row colors (define BEFORE standard css). */
/*
table.fancytree-ext-table tbody tr:nth-child(even){
background-color: #f4f4f8;
}
*/
/* custom alignment (set by 'renderColumns'' event) */
/* td.alignRight {
text-align: right;
} */
table th {
background-color: lightgrey;
}
td, th {
/* height: 30px; */
border: 1px solid #ededed;
text-align: center;
vertical-align: middle;
padding: 5px;
white-space: pre;
}
table {
border-collapse: collapse;
}
/* span.fancytree-node {
white-space: pre;
} */
#tableWrapper {
width: 1200px;
height: 600px;
overflow: auto;
position: relative;
}
table.fancytree-container.fancytree-ext-fixed tbody tr {
height: 22px;
}
table.fancytree-container.fancytree-ext-fixed tbody tr td:nth-child(1) {
width: 22px;
}
</style>
<link href="../src/skin-win7/ui.fancytree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.fancytree.js" type="text/javascript"></script>
<script src="../src/jquery.fancytree.table.js" type="text/javascript"></script>
<script src="../src/jquery.fancytree.fixed.js" type="text/javascript"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="../lib/prettify.css" rel="stylesheet">
<script src="../lib/prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>
<!-- End_Exclude -->
<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:
window.console.time("Fancytree - postProcess");
window.console.time("Fancytree - init");
$("#treetable").fancytree({
extensions: ["table", "fixed"],
checkbox: true,
fixed: {
fixCols: 3, // Fix leftmost n columns
// fixColWidths: [16, 50, 200],
fixRows: 2 // Fix topmost n rows (true: whole <thead>)
},
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: "ajax-tree-mass-data.json"
},
postProcess: function(event, data) {
window.console.timeEnd("Fancytree - postProcess");
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json"}
},
init: function(event, data) {
window.console.timeEnd("Fancytree - init");
window.console.info("node count:" + data.tree.count() + ", tr count: " + data.tree.$container.find("tbody>tr").length);
$("#fixedRows").val(data.options.fixed.fixRows);
$("#fixedCols").val(data.options.fixed.fixCols);
},
renderColumns: function(event, data) {
var node = data.node,
$tr = $(node.tr),
$tdList = $tr.find(">td"),
idx = node.getIndexHier();
// (index #0 is rendered by fancytree by adding the checkbox)
$tdList.eq(1).text(idx).addClass("alignRight");
// (index #2 is rendered by fancytree)
$tdList.eq(3).text(node.key);
$tdList.eq(4).html("<input type='checkbox' name='like' value='" + node.key + "'>");
for (var i = 5; i < 34; i++) {
$tdList.eq(i).text("Body R" + idx + " C" + (i+1));
}
},
collapse: function(event, data) {
data.node.discardMarkup(false);
}
});
});
</script>
<!-- Start_Exclude: This block is not part of the sample code -->
<script type="text/javascript">
$(function(){
/* Handle custom checkbox clicks */
$("#treetable").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());
}
});
$("#fixedRows").keyup(function(evt) {
var rows = parseInt($(this).val());
if (!isNaN(rows) && evt.keyCode === 13) {
var tree = $("#treetable").fancytree("getTree");
tree.options.fixed.fixRows = rows;
tree.reload();
}
});
$("#fixedCols").keyup(function(evt) {
var cols = parseInt($(this).val());
if (!isNaN(cols) && evt.keyCode === 13) {
var tree = $("#treetable").fancytree("getTree");
tree.options.fixed.fixCols = cols;
tree.reload();
}
});
addSampleButton({
label: "Expand all",
code: function(){
var t = $.ui.fancytree.getTree();
var $tree = $("#treetable");
window.console.time("expand all");
$tree.fancytree("getTree").visit(function(n){
n.setExpanded();
});
window.console.timeEnd("expand all");
}
});
addSampleButton({
label: "Collapse all",
newline: false,
code: function(){
window.console.time("collapse all");
$("#treetable").fancytree("getTree").visit(function(n){
n.setExpanded(false);
});
window.console.timeEnd("collapse all");
}
});
});
</script>
<!-- End_Exclude -->
</head>
<body class="example">
<h1>Example: 'fixed' extension</h1>
<div class="description">
<p>
Provide fixed table headers and columns for the table extension.
</p>
<p>
<b>Status:</b> experimental / work in progress.
<b>Details:</b>
<a href="https://github.com/mar10/fancytree/wiki/ExtFixed"
target="_blank" class="external">ext-fixed</a>.
</p>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
<label for="fixedCols">Fixed Columns</label> <input id="fixedCols">
<label for="fixedRows">Fixed Rows:</label> <input id="fixedRows">
</div>
<p id="sampleButtons">
</p>
<!-- Add a <table> element where the tree should appear: -->
<div id="tableWrapper">
<table id="treetable">
<!-- <colgroup>
<col width="30px"></col>
<col width="30px"></col>
<col width="*"></col>
<col width="50px"></col>
<col width="30px"></col>
</colgroup> -->
<thead>
<tr>
<th></th>
<th>#</th>
<th>Title</th>
<th>Key</th>
<th>Head R1 C5</th>
<th>Head R1 C6</th>
<th>Head R1 C7</th>
<th>Head R1 C8</th>
<th>Head R1 C9</th>
<th>Head R1 C10</th>
<th>Head R1 C11</th>
<th>Head R1 C12</th>
<th>Head R1 C13</th>
<th>Head R1 C14</th>
<th>Head R1 C15</th>
<th>Head R1 C16</th>
<th>Head R1 C17</th>
<th>Head R1 C18</th>
<th>Head R1 C19</th>
<th>Head R1 C20</th>
<th>Head R1 C21</th>
<th>Head R1 C22</th>
<th>Head R1 C23</th>
<th>Head R1 C24</th>
<th>Head R1 C25</th>
<th>Head R1 C26</th>
<th>Head R1 C27</th>
<th>Head R1 C28</th>
<th>Head R1 C29</th>
<th>Head R1 C30</th>
<th>Head R1 C31</th>
<th>Head R1 C32</th>
<th>Head R1 C33</th>
<th>Head R1 C34</th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th>Head R2 C5</th>
<th>Head R2 C6</th>
<th>Head R2 C7</th>
<th>Head R2 C8</th>
<th>Head R2 C9</th>
<th>Head R2 C10</th>
<th>Head R2 C11</th>
<th>Head R2 C12</th>
<th>Head R2 C13</th>
<th>Head R2 C14</th>
<th>Head R2 C15</th>
<th>Head R2 C16</th>
<th>Head R2 C17</th>
<th>Head R2 C18</th>
<th>Head R2 C19</th>
<th>Head R2 C20</th>
<th>Head R2 C21</th>
<th>Head R2 C22</th>
<th>Head R2 C23</th>
<th>Head R2 C24</th>
<th>Head R2 C25</th>
<th>Head R2 C26</th>
<th>Head R2 C27</th>
<th>Head R2 C28</th>
<th>Head R2 C29</th>
<th>Head R2 C30</th>
<th>Head R2 C31</th>
<th>Head R2 C32</th>
<th>Head R2 C33</th>
<th>Head R2 C34</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</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>
<p>
<dl>
<dt>2016-12-23</dt>
<dd>13 Sek.</dd>
</dl>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-ext-menu-deprecated.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: Menu</title>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<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="http://view.jqueryui.com/menubar/ui/jquery.ui.popup.js"></script>
<!--
<script src="http://view.jqueryui.com/menubar/ui/jquery.ui.menu.js"></script>
-->
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.menu.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;
}
</style>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
$("#tree").fancytree({
extensions: ["menu"],
source: {
url: "ajax-tree-local.json"
},
menu: {
selector: "#myMenu",
position: {my: "center"},
create: function(event, data){
$.ui.fancytree.debug("Menu create ", data.$menu);
},
beforeOpen: function(event, data){
$.ui.fancytree.debug("Menu beforeOpen ", data.$menu, data.node);
},
open: function(event, data){
$.ui.fancytree.debug("Menu open ", data.$menu, data.node);
},
focus: function(event, data){
$.ui.fancytree.debug("Menu focus ", data.menuId, data.node);
},
select: function(event, data){
alert("Menu select " + data.menuId + ", " + data.node);
},
close: function(event, data){
$.ui.fancytree.debug("Menu close ", data.$menu, data.node);
}
},
activate: function(event, data) {
// alert("activate " + data.node);
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json"}
}
});
var tree = $("#tree").fancytree("getTree");
/*
* Event handlers for our little demo interface
*/
$("button#btnResetSearch").click(function(e){
}).attr("disabled", true);
});
</script>
</head>
<body class="example">
<h1>DEPRECATED: 'menu' extension</h1>
<div class="description">
<p>
Utilize the standard jQuery menu plugin <a href="http://api.jqueryui.com/menu/" target="_blank" class="external">
http://api.jqueryui.com/menu/</a> (requires jQueryUI 1.9+).
</p>
<p>
<b>Status: DEPRECATED!</b><br>
See <a href="index.html#sample-ext-menu.html" target="_top">explanation and alternatives</a>.
</p>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<!-- Add a <table> element where the tree should appear: -->
<div id="tree">
</div>
<!-- Definition of context menu -->
<ul id="myMenu" class="contextMenu ui-helper-hidden">
<li class="edit"><a href="#edit">Edit</a></li>
<li class="cut"><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="ui-state-disabled"><a href="#delete">Delete</a></li>
<li>---</li>
<li class="quit"><a href="#quit">Quit</a></li>
<li><a href="#save"><span class="ui-icon ui-icon-disk"></span>Save</a></li>
</ul>
<!-- 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-ext-menu.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: Menu</title>
<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 -->
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
});
</script>
</head>
<body class="example">
<h1>Example: 'menu' extension</h1>
<div class="description">
<p>
Fancytree does <b>not</b> include a native context menu extension.<br>
A context menu is typically used for multiple elements of a web
application and the appearance should be consistent everywhere.
</p><p>
However, using an <i>existing</i> context menu plugin is easy.
It normally only requires to call <code>$.ui.fancytree.getNode(element)</code>
in the respective callback handler and then trigger the desired
operation.
</p><p>
Examples of existing third party context menus include:
<ul>
<li><b>jQuery contextMenu</b><br>
A popular, free context menu and polyfil
(<a href="https://github.com/swisnl/jQuery-contextMenu" target="_blank" class="external">project site</a>).<br>
See here for a <a href="index.html#sample-3rd-jQuery-contextMenu.html" target="_top">Fancytree demo</a>.
<li><b>jQuery contextMenu (using a Fancytree extension)</b><br>
The <code>ext-contextMenu</code> extension is a thin wrapper that
integrates the above plugin into Fancytree (
<a href="index.html#../3rd-party/extensions/contextmenu/contextmenu.html" target="_top">demo</a> ).
<li><b>jquery.ui-contextmenu</b><br>
A free jQuery plugin that turns a <a href="http://jqueryui.com/menu/" target="_blank" class="external">jQuery UI Menu</a>
widget into a context menu
(<a href="https://github.com/mar10/jquery-ui-contextmenu" target="_blank" class="external">project site</a>).<br>
See here for a <a href="index.html#sample-3rd-ui-contextmenu.html" target="_top">Fancytree demo</a>.
<li><b>Plenty of other menus &hellip;</b><br>
<a href="https://github.com/tweego/JeeGooContext" target="_blank" class="external">JeeGooContext</a> and
<a href="https://www.npmjs.com/search?q=contextmenu" target="_blank" class="external">more</a>&hellip;
</ul>
</p>
</div>
</body>
</html>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-ext-persist.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: Persist</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="../lib/jquery.cookie.js"></script>
-->
<script src="//cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.1/js.cookie.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.persist.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>
<!-- 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({
extensions: ["persist"],
checkbox: true,
selectMode: 3,
source: {
url: "ajax-tree-plain.json"
},
persist: {
expandLazy: true,
// fireActivate: false, // false: suppress `activate` event after active node was restored
// overrideSource: false, // true: cookie takes precedence over `source` data attributes.
store: "auto" // 'cookie', 'local': use localStore, 'session': sessionStore
},
// don't use this in production code:
ajax: {
debugDelay: [200, 1000]
},
init: function(event, data) {
data.tree.debug(event.type, data);
},
restore: function(event, data) {
data.tree.debug(event.type, data);
},
activate: function(event, data) {
data.node.debug(event.type, data);
},
loadChildren: function(event, data) {
data.node.debug(event.type, data);
},
postProcess: function(event, data) {
// Create predictable, **unique** keys, which we need for our lazy
// persistence example. This is only required for this demo,
// because our lazyLoad handler will always return the same
// fake 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 + ")";
}
})
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json"};
}
});
var tree = $("#tree").fancytree("getTree");
addSampleButton({
label: "Reset Cookie",
newline: false,
code: function(){
tree.clearCookies();
}
});
});
</script>
</head>
<body class="example">
<h1>Example: 'persist' extension</h1>
<div class="description">
<p>
Store and restore tree status using cookies or local storage.
</p>
<p>
- Set options<br>
- click, expand, and select nodes<br>
- press [F5] to reload.
</p>
<p>
<b>Status:</b> production.
<b>Details:</b>
<a href="https://github.com/mar10/fancytree/wiki/ExtPersist"
target="_blank" class="external">ext-persist</a>.
</p>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<p id="sampleButtons">
</p>
<!-- Add a <table> element where the tree should appear: -->
<div id="tree">
</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-ext-select.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: ext-select</title>
<!--
<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
-->
<script src="//code.jquery.com/jquery-3.1.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="../src/jquery.fancytree.select.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">
.fancytree-container {
height: 250px;
overflow: auto;
}
</style>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
$("#tree").fancytree({
extensions: ["select"],
checkbox: true,
source: {url: "ajax-tree-local.json"},
select: {
checkbox: "radio"
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json"}
}
});
$("#tree2").fancytree({
extensions: ["select"],
checkbox: true,
source: {url: "ajax-tree-local.json"},
select: {
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json"}
}
});
});
</script>
</head>
<body class="example">
<h1>Example: 'select' extension</h1>
<div class="description">
<p>
Support hierarchical selection.
</p>
<p>
<b>Status:</b> experimental / work in progress.
<b>Details:</b>
<a href="https://github.com/mar10/fancytree/wiki/ExtSelect"
target="_blank" class="external">ext-select</a>.
</p>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<p id="sampleButtons">
</p>
<!-- Add a <table> element where the tree should appear: -->
<h3>ext-select: sample 1</h3>
<div id="tree">
</div>
<h3>ext-select: sample 1</h3>
<div id="tree2">
</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-ext-table.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: Table</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>
<style type="text/css">
/* Set alternating row colors (define BEFORE standard css). */
/*
table.fancytree-ext-table tbody tr:nth-child(even){
background-color: #f4f4f8;
}
*/
/* custom alignment (set by 'renderColumns'' event) */
td.alignRight {
text-align: right;
}
</style>
<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 -->
<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:
$("#treetable").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: "ajax-tree-products.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).html("<input type='checkbox' name='like' value='" + node.key + "'>");
}
});
/* Handle custom checkbox clicks */
$("#treetable").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());
}
});
});
</script>
</head>
<body class="example">
<h1>Example: 'table' extension</h1>
<div class="description">
<p>
Render tree as a table (aka tree grid) and support keyboard navigation
in a grid with embedded input controls.
</p>
<p>
<b>Status:</b> production.
<b>Details:</b>
<a href="https://github.com/mar10/fancytree/wiki/ExtTable"
target="_blank" class="external">ext-table</a>.
</p>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<!-- Add a <table> element where the tree should appear: -->
<table id="treetable">
<colgroup>
<col width="30px"></col>
<col width="30px"></col>
<col width="*"></col>
<col width="50px"></col>
<col width="30px"></col>
</colgroup>
<thead>
<tr> <th></th> <th>#</th> <th></th> <th>Key</th> <th>Like</th> </tr>
</thead>
<tbody>
</tbody>
</table>
<!-- 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-ext-themeroller.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: ThemeRoller</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="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<link href="../src/skin-themeroller/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.columnview.js"></script>
<script src="../src/jquery.fancytree.table.js"></script>
<script src="../src/jquery.fancytree.themeroller.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>
<script src="../lib/Super-Theme-Switcher/jquery.themeswitcher.js"></script>
<style type="text/css">
ul.fancytree-container,
table.fancytree-container{
font-size: 0.8em;
}
</style>
<script type="text/javascript">
$(function(){
$("#switcher").themeswitcher({
jqueryuiversion: "1.12.1",
imgpath: "../lib/Super-Theme-Switcher/images/",
loadTheme: "base",
additionalthemes: [{
title: "Base",
name: "base",
icon: "theme_90_base.png"
}]
});
});
</script>
<!-- End_Exclude -->
<style type="text/css">
/* Fancytree extension 'table' */
table.fancytree-ext-table {
width: 100%;
}
/* Fancytree extension 'columnview' */
table.fancytree-ext-columnview {
border-collapse: collapse;
width: 100%;
}
table.fancytree-ext-columnview tbody tr[0] {
height: 200px;
}
</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({
extensions: ["themeroller"],
checkbox: true,
themeroller: {
addClass: "" // no rounded corners
// selectedClass: "ui-state-active"
},
source: [
{title: "Node 1"},
{title: "Node 2",
children: [{title: "Subnode 2.1"}, {title: "Subnode 2.2"}]
},
{title: "Node 3",
children: [{title: "Subnode 3.1"}, {title: "Subnode 3.2"}]
},
{title: "Node 4"}
]
});
$("#treetable").fancytree({
extensions: ["table", "themeroller"],
checkbox: true,
themeroller: {
// addClass: "",
// selectedClass: "ui-state-active"
},
source: {
url: "ajax-tree-plain.json"
},
activate: function(event, data) {
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json"}
},
renderColumns: function(event, data) {
var node = data.node,
$tdList = $(node.tr).find(">td");
$tdList.eq(1).text(node.key);
$tdList.eq(2).text(!!node.folder);
}
});
$("#columnview").fancytree({
extensions: ["columnview", "themeroller"],
checkbox: true,
source: {
url: "ajax-tree-plain.json"
},
activate: function(event, data) {
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json"}
}
});
});
</script>
</head>
<body class="example">
<h1>Example: 'themeroller' extension</h1>
<div class="description">
<p>
Allow to apply <a href="http://jqueryui.com/themeroller/" target="_blank">jQuery ThemeRoller</a>
styles.
</p>
<p>
<b>Status</b>: beta
</p>
</div>
<div>
<label for="switcher">Theme:</label> <div id="switcher"></div>
<!--
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
-->
</div>
<!-- Add a <table> element where the tree should appear: -->
<p class="description">
Standard tree:
</p>
<div id="tree"></div>
<!-- Add a <table> element where the tree should appear: -->
<p class="description">
Table tree:
</p>
<table id="treetable">
<colgroup>
<col width="*"></col>
<col width="200px"></col>
<col width="100px"></col>
</colgroup>
<thead>
<tr> <th></th> <th>Key</th> <th>Folder</th> </tr>
</thead>
<tbody>
<tr> <td></td> <td></td> <td></td> </tr>
</tbody>
</table>
<!-- Add a <table> element where the tree should appear: -->
<p class="description">
Columnview tree:
</p>
<table id="columnview">
<colgroup>
<col width="300px"></col>
<col width="300px"></col>
<col width="300px"></col>
</colgroup>
<thead>
<tr> <th>1</th> <th>2</th> <th>3</th> </tr>
</thead>
<tbody>
<tr> <td>?</td> <td>?</td> <td>?</td> </tr>
</tbody>
</table>
<!-- 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-ext-wide.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: ext-wide</title>
<!--
<script src="//code.jquery.com/jquery-1.7.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
-->
<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="../src/jquery.fancytree.dnd.js"></script>
<script src="../src/jquery.fancytree.wide.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">
.fancytree-container {
height: 250px;
overflow: auto;
}
</style>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
$("#tree").fancytree({
extensions: ["dnd", "wide"],
autoScroll: true,
checkbox: true,
source: {url: "ajax-tree-local.json"},
toggleEffect: { effect: "blind", options: {direction: "vertical", scale: "box"}, duration: 200 },
// toggleEffect: { effect: "drop", options: {direction: "left"}, duration: 400 },
// toggleEffect: false,
wide: {
// iconWidth: "32px", // Adjust this if @fancy-icon-width != "16px"
// iconSpacing: "6px", // Adjust this if @fancy-icon-spacing != "3px"
// labelSpacing: "6px", // Adjust this if padding between icon and label != "3px"
// levelOfs: "32px" // Adjust this if ul padding != "16px"
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json"}
}
});
$("#tree2").fancytree({
extensions: [],
checkbox: true,
source: {url: "ajax-tree-local.json"},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json"}
}
});
});
</script>
</head>
<body class="example">
<h1>Example: 'wide' extension</h1>
<div class="description">
<p>
Stretch the selection bar to 100% of the container width
(<a href="https://github.com/mar10/fancytree/wiki/ExtWide"
target="_blank" class="external">details...</a>).
</p>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<p id="sampleButtons">
</p>
<!-- Add a <table> element where the tree should appear: -->
<h3>ext-wide: on</h3>
<div id="tree">
</div>
<h3>ext-wide: off</h3>
<div id="tree2">
</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-form.html deleted 100644 → 0
View file @ dd43884b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Fancytree - Example: Forms</title>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<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 -->
<style type="text/css">
</style>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
$("#tree").fancytree({
aria: true,
checkbox: true,
selectMode: 2,
source: [
// {title: "Item 1 with embedded html: <input type='input' name='node1info'>", key: "node1"},
{title: "Item 1", key: "node1"},
{title: "Folder 2", folder: true, expanded: true, key: "node2",
children: [
{title: "Sub-item 2.1", key: "node2.1"},
{title: "Sub-item 2.2", key: "node2.2"}
]
},
{title: "Item 3", key: "node3"}
]
});
$("#tree2").fancytree({
aria: true,
checkbox: false,
selectMode: 3,
source: [
{title: "Item 1", key: "node1"},
{title: "Folder 2", folder: true, key: "node2",
children: [
{title: "Sub-item 2.1", key: "node2.1"},
{title: "Sub-item 2.2", key: "node2.2"}
]
},
{title: "Item 3", key: "node3"}
]
});
$("form").submit(function() {
// Render hidden <input> elements for active and selected nodes
$("#tree").fancytree("getTree").generateFormElements();
$("#tree2").fancytree("getTree").generateFormElements();
alert("POST data:\n" + jQuery.param($(this).serializeArray()));
// return false to prevent submission of this sample
return false;
});
});
</script>
<!-- Start_Exclude: This block is not part of the sample code -->
<script>
$(function(){
/*
addSampleButton({
label: "Generate <input> elements",
code: function(){
$("#tree").fancytree("getTree").generateInput();
$("#tree2").fancytree("getTree").generateInput();
}
});
*/
});
</script>
<!-- End_Exclude -->
</head>
<body class="example">
<h1>Example: Form</h1>
<!-- Start_Exclude: This block is not part of the sample code -->
<div class="description">
Two Fancytrees embedded in a form, together with some standard elements.
<ul>
<li>Use the <kbd>TAB</kbd> key to move the focus between form elements.<br>
Note that a tree behaves like a single control (like a radio button group)
<li>Experimental support for <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA</a>
<li>The submit handler is hooked to generate hidden checkbox elements for
selected and active nodes.<br>
Note that in select mode 3 only the topmost nodes are considered.<br>
Click the <kbd>Submit</kbd> button at the bottom of this page to POST
these values to the server (together with the other form elements).
</ul>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<hr>
<!-- End_Exclude -->
<!--
<form action="http://127.0.0.1:8001/submit_data" method="POST">
-->
<form action="/submit_data" method="POST">
<textarea name="comment"></textarea>
<br>
<fieldset>
<legend>Radioboxes</legend>
<input type="radio" name="rb1" value="foo" checked> Foo
<input type="radio" name="rb1" value="bar"> Bar
<input type="radio" name="rb1" value="baz"> Baz
</fieldset>
<br>
<fieldset>
<legend>Checkboxes</legend>
<input type="checkbox" name="cb1" value="John" checked>John
<input type="checkbox" name="cb1" value="Paul">Paul
<input type="checkbox" name="cb1" value="George">George
<input type="checkbox" name="cb1" value="Ringo">Ringo
</fieldset>
<br>
<fieldset>
<legend>Lists</legend>
<select name="list1" multiple="multiple">
<option value="up">Up</option>
<option value="down">Down</option>
<option value="charm">Charm</option>
<option value="strange">Strange</option>
</select>
</fieldset>
Username: <input type="text" name="userName" />
<br>
<!-- The name attribute is used by tree.serializeArray() -->
<fieldset>
<legend>Select 1</legend>
<div id="tree" name="selNodes">
</div>
</fieldset>
<fieldset>
<legend>Select 2</legend>
<div id="tree2" name="selNodes2">
</div>
</fieldset>
<input type="submit" value="Submit Form">
</form>
<!-- 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/">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>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-iframe-1.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">
<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>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
$("#btnExpand").click(function(){
var $tree = parent.$("#tree");
var rootNode = parent.$("#tree").fancytree("getRootNode");
$.ui.fancytree.debug("rootNode: %o", rootNode);
$.ui.fancytree.debug("rootNode: %o", rootNode.visit);
parent.$("#tree").fancytree("getRootNode").visit(function(node){
node.toggleExpanded();
});
});
});
</script>
</head>
<body class="example">
<p class="description">
This page lives inside an iframe<br>
Click a link in the tree to load some content here.
<br>
This button demonstrates, ho to access a tree in another frame:
<button id="btnExpand">Toggle tree</button>
<br>
View the source of <a href="sample-iframe-1.html" target="_blank">this iframe content</a>,
to see how it can be done.
</p>
</body>
</html>