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 3223 deletions
src/LIB-NOT-USED/jquery.fancytree/demo/sample-iframe.html deleted 100644 → 0
View file @ 1de84b06
<!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 -->
<style type="text/css">
#tree {
vertical-align: top;
width: 250px;
}
iframe {
border: 1px dotted gray;
}
</style>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
// Attach the dynatree widget to an existing <div id="tree"> element
// and pass the tree options as an argument to the dynatree() function:
$("#tree").fancytree({
// autoCollapse: true,
minExpandLevel: 1,
postinit: function(isReloading, isError) {
this.reactivate();
},
focus: function(event, data) {
// Auto-activate focused node after 2 seconds
data.node.scheduleAction("activate", 2000);
},
activate: function(event, data) {
var node = data.node;
// Use <a> href and target attributes to load the content:
if( node.data.href ){
// Open target
window.open(node.data.href, node.data.target);
// or open target in iframe
// $("[name=contentFrame]").attr("src", node.data.href);
}
}
});
});
</script>
</head>
<body class="example">
<h1>Example: URL navigation and iframes</h1>
<p class="description">
Use Fancytree as a navigation menu.
<br>
The tree initialization uses <code>&lt;a href='URL', target='TARGET'>title&lt;/a></code>
tags.<br>
The <code>activate</code> handler then uses <code>node.data.href</code>
to open the the pages in the embedded iframe.<br>
Note that the navigation will fallback to standard HTML links,
when JavaScript is disabled.<br>
A focused node will automatically be activated after 2 seconds (use the
keyboard to try this out).<br>
<br>
The <kbd>Toggle tree</kbd> button in the embedded welcome page also gives
an example on how to access a tree that exists outside the own frame.
</p>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<table>
<colgroup>
<col width="300px" valign="top">
<col width="90%">
</colgroup>
<tr>
<td valign="top">
<!-- Add a <div> element where the tree should appear: -->
<div id="tree">
<ul>
<li class="expanded folder">Search engines
<ul>
<li><a href="http://duckduckgo.com" target="contentFrame">DuckDuckGo</a>
<li><a href="http://duckduckgo.com" target="_self">DuckDuckGo (target='_self')</a>
<li><a href="http://duckduckgo.com" target="_top" title="This link replaces the current page">DuckDuckGo (target='_top')</a>
<li><a href="http://www.bing.com" target="contentFrame">Bing</a>
<li><a href="http://www.wolframalpha.com/" target="contentFrame">WolframAlpha</a>
</ul>
<li class="expanded folder">jQuery
<ul>
<li><a href="http://www.jquery.com/" target="contentFrame">jQuery</a>
<li><a href="http://ui.jquery.com/" target="contentFrame">jQuery UI</a>
<li><a href="http://api.jquery.com/" target="contentFrame">API browser</a>
<li><a href="http://wwwendt.de/tech/fancytree/doc/jsdoc/index.html" target="contentFrame">Fancytree</a>
</ul>
<li class="expanded folder">Misc
<ul>
<li><a href="sample-iframe-1.html" target="contentFrame">Welcome</a>
</ul>
</ul>
</div>
</td>
<td>
<iframe src="sample-iframe-1.html" name="contentFrame" width="100%" height="500"
scrolling="yes" marginheight="0" marginwidth="0" frameborder="0">
<p>Your browser does not support iframes</p>
</iframe>
</td>
</tr>
</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-json.html deleted 100644 → 0
View file @ 1de84b06
<!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 -->
<style type="text/css">
/* span.fancytree-node span.fancytree-icon {
background-image: url("skin-custom/bug.png");
background-position: 0 0;
}*/
span.fancytree-node.no span.fancytree-icon {
background-position: 0 0;
background-image: url("skin-custom/exclamation.png");
}
span.fancytree-node.yes span.fancytree-icon {
background-position: 0 0;
background-image: url("skin-custom/accept.png");
}
span.fancytree-node.link span.fancytree-icon {
background-position: 0 0;
background-image: url("skin-custom/arrow_right.png");
}
span.fancytree-node.answer span.fancytree-icon {
background-position: 0 0;
background-image: url("skin-custom/emoticon_smile.png");
}
</style>
<script type="text/javascript">
$(function(){
// using default options
$("#tree").fancytree({
source: {url: "ajax-tree-decide.json"}
});
});
</script>
<!-- Start_Exclude: This block is not part of the sample code -->
<script type="text/javascript">
$(function(){
addSampleButton({
label: "Products",
code: function(){
$("#tree").fancytree("getTree").reload({url: "ajax-tree-products.json"});
}
});
addSampleButton({
label: "Files",
code: function(){
$("#tree").fancytree("getTree").reload({url: "ajax-tree-fs.json"});
}
});
});
</script>
<!-- End_Exclude -->
</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"></div>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p id="sampleButtons">
</p>
<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-keyboard.html deleted 100644 → 0
View file @ 1de84b06
<!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>
<script src="../src/jquery.fancytree.gridnav.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>
<style type="text/css">
.fancytree-node input {
margin-left: 10px;
}
</style>
<!-- End_Exclude -->
<script type="text/javascript">
function createNode(e, ctx) {
// add fake <input/> to the node
var $input = $("<input/>").val(ctx.node.title);
$("span.fancytree-title", ctx.node.li).before($input);
}
$(function () {
var source = [
{
title: "Item 1",
children: [
{ title: "Item 1.1" },
{ title: "Item 1.2" }
]
}, {
title: "Item 2",
children: [
{ title: "Item 2.1" },
{ title: "Item 2.2" }
]
}, {
title: "Item 3",
children: [
{ title: "Item 3.1" },
{ title: "Item 3.2" }
]
}, {
title: "Item 4",
children: [
{ title: "Item 4.1" },
{ title: "Item 4.2" }
]
}
];
$("#tree1").fancytree({
source: source,
checkbox: true,
createNode: createNode,
tabbable: true
});
$("#tree2").fancytree({
source: source,
checkbox: true,
createNode: createNode,
tabbable: false
});
$("#tree3").fancytree({
source: source,
checkbox: true,
createNode: createNode,
tabbable: "nodes"
});
});
</script>
</head>
<body class="example">
<h1>Example: keyboard navigation</h1>
<!-- Start_Exclude: This block is not part of the sample code -->
<div class="description">
This example demonstrates the navigation inside and outside of the tree with TAB and arrow keys.<br/>
There are three trees with different values of tabbable option.<br/>
NOTE: The example is experimental: backspace, spacebar and arrow keys don't work correctly in input fields for now.
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<hr>
<!-- End_Exclude -->
<div>
<label>Fake input:<input id="input1"/></label>
</div>
<br/>
<div>
<label>Tree with 'tabbable = true':</label>
<div id="tree1"></div>
</div>
<br/>
<div>
<label>Fake input:<input id="input2"/></label>
</div>
<br/>
<div>
<label>Tree with 'tabbable = false':</label>
<div id="tree2"></div>
</div>
<br/>
<div>
<label>Fake input:<input id="input3"/></label>
</div>
<br/>
<div>
<label>Tree with 'tabbable = "nodes"' (it's a new experimental feature):</label>
<div id="tree3"></div>
</div>
<br/>
<div>
<label>Fake input:<input id="input4"/></label>
</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-load-errors.html deleted 100644 → 0
View file @ 1de84b06
<!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>
<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 createNode(e, ctx) {
// add fake <input/> to the node
var $input = $("<input/>").val(ctx.node.title);
$("span.fancytree-title", ctx.node.li).before($input);
}
$(function () {
var source = [
{ key: "ajax", title: "Successful lazy loading via ajax", lazy: true },
{ key: "custom", title: "Successful lazy loading via custom source", lazy: true },
{ key: "ajax-error", title: "Ajax error while lazy loading", lazy: true },
{ key: "custom-error", title: "Custom error while lazy loading", lazy: true }
];
function lazyLoad(event, data) {
switch (data.node.key) {
case "ajax":
data.result = { url: "ajax-sub2.json" /*, debugDelay: 5000*/ };
break;
case "custom":
data.result = $.Deferred(function (dfd) {
setTimeout(function () {
dfd.resolve([
{ title: "Sub item 1" },
{ title: "Sub item 2" }
]);
}, 1000);
});
break;
case "ajax-error":
data.result = { url: "not-found.json" };
break;
case "custom-error":
data.result = $.Deferred(function (dfd) {
setTimeout(function () {
dfd.reject(new Error("TEST ERROR"));
}, 1000);
});
break;
default:
data.result = [];
}
}
function loadError(e,data) {
var error = data.error;
if (error.status && error.statusText) {
data.message = "Ajax error: " + data.message;
data.details = "Ajax error: " + error.statusText + ", status code = " + error.status;
} else {
data.message = "Custom error: " + data.message;
data.details = "An error occurred during loading: " + error;
}
}
$("#tree1").fancytree({
source: source,
ajax: { debugDelay: 1000 },
lazyLoad: lazyLoad
});
$("#tree2").fancytree({
source: source,
ajax: { debugDelay: 1000 },
lazyLoad: lazyLoad,
loadError: loadError
});
$("#table1").fancytree({
source: source,
ajax: { debugDelay: 1000 },
lazyLoad: lazyLoad,
extensions: ["table"]
});
$("#table2").fancytree({
source: source,
ajax: { debugDelay: 1000 },
lazyLoad: lazyLoad,
loadError: loadError,
extensions: ["table"]
});
});
</script>
</head>
<body class="example">
<h1>Example: lazy load errors handling</h1>
<!-- Start_Exclude: This block is not part of the sample code -->
<div class="description">
This example demonstrates how to handle errors which can occur during lazy loading.
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<hr>
<!-- End_Exclude -->
<div>
<label>No 'loadError' handler:</label>
<div id="tree1"></div>
</div>
<br/>
<div>
<label>'loadError' handler is specified:</label>
<div id="tree2"></div>
</div>
<br/>
<div>
<label>No 'loadError' handler (table extension):</label>
<table id="table1" style="width:100%">
<thead style="display: none"><tr><th></th></tr>
</thead>
<tbody></tbody>
</table>
</div>
<br/>
<div>
<label>'loadError' handler is specified (table extension):</label>
<table id="table2" style="width:100%">
<thead style="display: none"><tr><th></th></tr>
</thead>
<tbody></tbody>
</table>
</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-load-errors2.html deleted 100644 → 0
View file @ 1de84b06
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test Case | Fancytree</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="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.custom.js"></script>
-->
<link href="../src/skin-win7/ui.fancytree.css" rel="stylesheet" class="skinswitcher">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.dnd.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>
<!-- End_Exclude -->
<style type="text/css">
ul.fancytree-container{
/*height: 150px;*/
}
</style>
<script type="text/javascript">
$(function(){
// Adjust skinswitcher for current folder layout
$("select#skinswitcher").skinswitcher("option", "base", "../src/");
// Initialize Fancytree
$("#tree").fancytree({
extensions: [],
source: [
{title: "pws ok", source: "ajax-pws-ok.json", lazy: true},
{title: "empty", source: "ajax-empty.json", lazy: true},
{title: "not found", source: "not_found.json", lazy: true},
{title: "parse error", source: "ajax-parse-error.json", lazy: true},
{title: "pws error", source: "ajax-pws-error.json", lazy: true},
{title: "sample.json", source: "ajax-sub2.json", lazy: true}
],
postProcess: function(event, data) {
/*
This example handles a custom return format for node data of this form:
{"status": "ok",
"result": [ (... list of child nodes...) ] }.
Error conditions are passed like:
{"status": "error",
"faultMsg": "Bad luck :-/"
}
*/
var response = data.response;
if( response.status != null ) { // this line is only required, because this sample
if( response.status === "ok" ) {
data.result = response.result;
} else {
data.result = {
error: response.faultMsg
}
}
}
},
lazyLoad: function(event, data) {
data.node.debug("lazyLoad", data);
data.result = {url: data.node.data.source};
},
loadError: function(event, data) {
data.node.debug("loadError", data);
// return false;
}
});
});
</script>
<script>
$(function(){
addSampleButton({
label: "Remove",
newline: false,
code: function(){
var tree = $("#tree").fancytree("getTree"),
node = tree.getActiveNode();
// node = tree.getNodeByKey("node1");
node.remove();
}
});
addSampleButton({
label: "Add Child",
newline: false,
code: function(){
var node,
tree = $("#tree").fancytree("getTree");
tree.getActiveNode().addChildren({title: "new node" + new Date()});
}
});
});
</script>
</head>
<body class="example">
<h1>Testcase for issue #XXX</h1>
<div class="description">
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<hr>
<p id="sampleButtons">
</p>
<hr>
<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/">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-load-xml.html deleted 100644 → 0
View file @ 1de84b06
<!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">
/** Return a list of NodeData objects, assuming $xml points to a list of
* nodes, e.g.:
*
* <children>
* <node folder="true" expanded="true" key="id_1">
* <title> Node 1</title>
* <children>
* <node key="id_1_1">
* <title> Node 1.1</title>
* <node>
* </children>
* </node>
* <node folder="true" lazy="true" key="id_2">
* <title> Node 2 (expanded folder)</title>
* </node>
*
*/
function parseFancytreeXml($xml) {
var children = [];
$xml.children("node").each(function() {
var $node = $(this),
subnodes = $node.children("children");
// Create Fancytree NodeData object from <node> element
children.push({
title: $node.children("title").text(),
expanded: $node.attr("expanded"),
folder: $node.attr("folder"),
key: $node.attr("key"),
lazy: $node.attr("lazy"),
children: subnodes.length ? parseFancytreeXml(subnodes) : null
});
});
return children;
}
$(function(){
$("#tree").fancytree({
// Explicitly pass XML as data type
source: { url: "ajax-tree.xml", dataType: "xml" },
lazyLoad: function(event, data) {
// Lazy folders also request XML data
data.result = { url: "ajax-sub.xml", dataType: "xml" };
},
postProcess: function(event, data) {
// Convert the xml responses to a Fancytree NodeData list.
// data.response is a `#document` root, so we get the outer
// `<children>` element:
data.result = parseFancytreeXml($(">children", data.response));
}
});
});
</script>
</head>
<body class="example">
<h1>Example: Load XML</h1>
<div class="description">
This tree uses a custom XML parser.
</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 -->
<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-multi-dnd.html deleted 100644 → 0
View file @ 1de84b06
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test D'n'D - Fancytree</title>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<!--
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.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.columnview.js"></script>
<script src="../src/jquery.fancytree.dnd.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="../demo/sample.css" rel="stylesheet">
<script src="../demo/sample.js"></script>
<!-- End_Exclude -->
<style type="text/css">
.draggable,
.droppable {
border: 1px solid green;
padding: 3px;
background-color: silver;
}
/* Prevent scrolling while DND */
ul.fancytree-container {
/*
height: 200px;
overflow: auto;
*/
/* position: inherit;*/
}
</style>
<script type="text/javascript">
$(function(){
var count = 1;
/*
TODO: option 'preventTextSelect'?
Already implemented, but doesn't always work:
}).on("selectstart" + ns, "span.fancytree-title", function(event){
// prevent mouse-drags to select text ranges
// tree.debug("<span title> got event " + event.type);
event.preventDefault();
TODO: disable auto-scroll by default:
seems to have problems to calculate helper position,
--> see here http://api.jqueryui.com/draggable/#event-drag
for a possible fix?
and enabling scrolling would always require custom changes, like
setting the container height?
TODO: Revert always flies to top-left corner of container
*/
// 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"],
checkbox: true,
// debugLevel: 1,
source: {
url: "ajax-tree-plain.json"
},
activate: function(event, data) {
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json"}
},
dnd: {
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
autoExpandMS: 400,
// focusOnClick: true,
refreshPositions: true,
draggable: {
appendTo: "body", // We don't want to clip the helper inside container
// scroll: false,
// containment: "parent", // $("ul.fancytree-container"),
// cursorAt: { left: 5 },
revert: "invalid"
// revert: function(dropped) {
// return
// }
},
dragStart: function(node, data) {
// allow dragging `node`:
return true;
},
dragEnter: function(node, data) {
return true;
},
initHelper: function(node, data) {
// Helper was just created: modify markup
var helper = data.ui.helper,
sourceNodes = data.tree.getSelectedNodes();
// Store a list of active + all selected nodes
if( !node.isSelected() ) {
sourceNodes.unshift(node);
}
helper.data("sourceNodes", sourceNodes);
// Mark selected nodes also as drag source (active node is already)
$(".fancytree-active,.fancytree-selected", tree.$container)
.addClass("fancytree-drag-source");
// Add a counter badge to helper if dragging more than one node
if( sourceNodes.length > 1 ) {
helper.append($("<span class='fancytree-childcounter'/>")
.text("+" + (sourceNodes.length - 1)));
}
// Prepare an indicator for copy-mode
helper.prepend($("<span class='fancytree-dnd-modifier'/>")
.text("+").hide());
},
updateHelper: function(node, data) {
// Mouse was moved or key pressed: update helper according to modifiers
// NOTE: pressing modifier keys stops dragging in jQueryUI 1.11
// http://bugs.jqueryui.com/ticket/14461
var event = data.originalEvent,
tree = node.tree,
copyMode = event.ctrlKey || event.altKey;
// Adjust the drop marker icon
// data.dropMarker.toggleClass("fancytree-drop-copy", copyMode);
// Show/hide the helper's copy indicator (+)
data.ui.helper.find(".fancytree-dnd-modifier").toggle(copyMode);
// tree.debug("1", $(".fancytree-active,.fancytree-selected", tree.$container).length)
// tree.debug("2", $(".fancytree-active,.fancytree-selected").length)
// Dim the source node(s) in move-mode
$(".fancytree-drag-source", tree.$container)
.toggleClass("fancytree-drag-remove", !copyMode);
// data.dropMarker.toggleClass("fancytree-drop-move", !copyMode);
},
dragDrop: function(node, data) {
var sourceNodes = data.ui.helper.data("sourceNodes"),
event = data.originalEvent,
copyMode = event.ctrlKey || event.altKey;
if( copyMode ) {
$.each(sourceNodes, function(i, o){
o.copyTo(node, data.hitMode, function(n){
delete n.key;
n.selected = false;
n.title = "Copy of " + n.title;
});
});
}else{
$.each(sourceNodes, function(i, o){
o.moveTo(node, data.hitMode);
});
}
}
}
});
$(".droppable").droppable({
drop: function(event, ui){
var node = $(ui.helper).data("ftSourceNode"),
tree = node.tree,
copyMode = event.ctrlKey || event.altKey,
sourceNodes = ui.helper.data("sourceNodes");
if( !copyMode ) {
$.each(sourceNodes, function(i, o){
o.remove();
});
}
$(this).append((copyMode ? "Copied " : "Moved ") + sourceNodes.length + " nodes. ");
}
});
});
</script>
</head>
<body class="example">
<h1>Example: extended drag'n'drop sample</h1>
<div class="description">
This sample shows how to
<ul>
<li>implement drag'n'drop with multiple selected nodes
<li>allow modfier keys <kbd>Ctrl</kbd> or <kbd>Alt</kbd> to force copy
instead of move operations
</ul>
<b>Note:</b> Due to <a href="http://bugs.jqueryui.com/ticket/14461">a draggable issue with modifier keys in jQuery UI 1.11</a>, this sample uses jQuery UI 1.10.
</div>
<p class="warning">
This is work in progress.
</p>
<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>
<p class="droppable">
Droppable.
</p>
<!-- 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-multi-ext.html deleted 100644 → 0
View file @ 1de84b06
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Multiple Extensions - Fancytree</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>
<!-- jquery-contextmenu (https://github.com/mar10/jquery-ui-contextmenu/) -->
<script src="//cdn.jsdelivr.net/jquery.ui-contextmenu/1/jquery.ui-contextmenu.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.edit.js"></script>
<script src="../src/jquery.fancytree.gridnav.js"></script>
<script src="../src/jquery.fancytree.table.js"></script>
<!--
<script src="../../build/jquery.fancytree-all.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="../demo/sample.css" rel="stylesheet">
<script src="../demo/sample.js"></script>
<!-- End_Exclude -->
<style type="text/css">
.ui-menu {
width: 180px;
font-size: 63%;
}
.ui-menu kbd { /* Keyboard shortcuts for ui-contextmenu titles */
float: right;
}
/* custom alignment (set by 'renderColumns'' event) */
td.alignRight {
text-align: right;
}
td.alignCenter {
text-align: center;
}
td input[type=input] {
width: 40px;
}
</style>
<script type="text/javascript">
var CLIPBOARD = null;
/*
SOURCE = [
{title: "node 1", folder: true, expanded: true, children: [
{title: "node 1.1", foo: "a"},
{title: "node 1.2", foo: "b"}
]},
{title: "node 2", folder: true, expanded: false, children: [
{title: "node 2.1", foo: "c"},
{title: "node 2.2", foo: "d"}
]}
];
*/
$(function(){
$("#tree").fancytree({
checkbox: true,
titlesTabbable: true, // Add all node titles to TAB chain
quicksearch: true, // Jump to nodes when pressing first character
// source: SOURCE,
source: { url: "ajax-tree-products.json"},
extensions: ["edit", "dnd", "table", "gridnav"],
dnd: {
preventVoidMoves: true,
preventRecursiveMoves: true,
autoExpandMS: 400,
dragStart: function(node, data) {
return true;
},
dragEnter: function(node, data) {
// return ["before", "after"];
return true;
},
dragDrop: function(node, data) {
data.otherNode.moveTo(node, data.hitMode);
}
},
edit: {
triggerStart: ["f2", "shift+click", "mac+enter"],
close: function(event, data) {
if( data.save && data.isNew ){
// Quick-enter: add new nodes until we hit [enter] on an empty title
$("#tree").trigger("nodeCommand", {cmd: "addSibling"});
}
}
},
table: {
indentation: 20,
nodeColumnIdx: 2,
checkboxColumnIdx: 0
},
gridnav: {
autofocusInput: false,
handleCursorKeys: true
},
lazyLoad: function(event, data) {
data.result = {url: "../demo/ajax-sub2.json"};
},
createNode: function(event, data) {
var node = data.node,
$tdList = $(node.tr).find(">td");
// Span the remaining columns if it's a folder.
// We can do this in createNode instead of renderColumns, because
// the `isFolder` status is unlikely to change later
if( node.isFolder() ) {
$tdList.eq(2)
.prop("colspan", 6)
.nextAll().remove();
}
},
renderColumns: function(event, data) {
var node = data.node,
$tdList = $(node.tr).find(">td");
// (Index #0 is rendered by fancytree by adding the checkbox)
// Set column #1 info from node data:
$tdList.eq(1).text(node.getIndexHier());
// (Index #2 is rendered by fancytree)
// Set column #3 info from node data:
$tdList.eq(3).find("input").val(node.key);
$tdList.eq(4).find("input").val(node.data.foo);
// Static markup (more efficiently defined as html row template):
// $tdList.eq(3).html("<input type='input' value='" + "" + "'>");
// ...
}
}).on("nodeCommand", function(event, data){
// Custom event handler that is triggered by keydown-handler and
// context menu:
var refNode, moveMode,
tree = $(this).fancytree("getTree"),
node = tree.getActiveNode();
switch( data.cmd ) {
case "moveUp":
refNode = node.getPrevSibling();
if( refNode ) {
node.moveTo(refNode, "before");
node.setActive();
}
break;
case "moveDown":
refNode = node.getNextSibling();
if( refNode ) {
node.moveTo(refNode, "after");
node.setActive();
}
break;
case "indent":
refNode = node.getPrevSibling();
if( refNode ) {
node.moveTo(refNode, "child");
refNode.setExpanded();
node.setActive();
}
break;
case "outdent":
if( !node.isTopLevel() ) {
node.moveTo(node.getParent(), "after");
node.setActive();
}
break;
case "rename":
node.editStart();
break;
case "remove":
refNode = node.getNextSibling() || node.getPrevSibling() || node.getParent();
node.remove();
if( refNode ) {
refNode.setActive();
}
break;
case "addChild":
node.editCreateNode("child", "");
break;
case "addSibling":
node.editCreateNode("after", "");
break;
case "cut":
CLIPBOARD = {mode: data.cmd, data: node};
break;
case "copy":
CLIPBOARD = {
mode: data.cmd,
data: node.toDict(function(n){
delete n.key;
})
};
break;
case "clear":
CLIPBOARD = null;
break;
case "paste":
if( CLIPBOARD.mode === "cut" ) {
// refNode = node.getPrevSibling();
CLIPBOARD.data.moveTo(node, "child");
CLIPBOARD.data.setActive();
} else if( CLIPBOARD.mode === "copy" ) {
node.addChildren(CLIPBOARD.data).setActive();
}
break;
default:
alert("Unhandled command: " + data.cmd);
return;
}
// }).on("click dblclick", function(e){
// console.log( e, $.ui.fancytree.eventToString(e) );
}).on("keydown", function(e){
var cmd = null;
// console.log(e.type, $.ui.fancytree.eventToString(e));
switch( $.ui.fancytree.eventToString(e) ) {
case "ctrl+shift+n":
case "meta+shift+n": // mac: cmd+shift+n
cmd = "addChild";
break;
case "ctrl+c":
case "meta+c": // mac
cmd = "copy";
break;
case "ctrl+v":
case "meta+v": // mac
cmd = "paste";
break;
case "ctrl+x":
case "meta+x": // mac
cmd = "cut";
break;
case "ctrl+n":
case "meta+n": // mac
cmd = "addSibling";
break;
case "del":
case "meta+backspace": // mac
cmd = "remove";
break;
// case "f2": // already triggered by ext-edit pluging
// cmd = "rename";
// break;
case "ctrl+up":
cmd = "moveUp";
break;
case "ctrl+down":
cmd = "moveDown";
break;
case "ctrl+right":
case "ctrl+shift+right": // mac
cmd = "indent";
break;
case "ctrl+left":
case "ctrl+shift+left": // mac
cmd = "outdent";
}
if( cmd ){
$(this).trigger("nodeCommand", {cmd: cmd});
// e.preventDefault();
// e.stopPropagation();
return false;
}
});
/*
* Tooltips
*/
// $("#tree").tooltip({
// content: function () {
// return $(this).attr("title");
// }
// });
/*
* Context menu (https://github.com/mar10/jquery-ui-contextmenu)
*/
$("#tree").contextmenu({
delegate: "span.fancytree-node",
menu: [
{title: "Edit <kbd>[F2]</kbd>", cmd: "rename", uiIcon: "ui-icon-pencil" },
{title: "Delete <kbd>[Del]</kbd>", cmd: "remove", uiIcon: "ui-icon-trash" },
{title: "----"},
{title: "New sibling <kbd>[Ctrl+N]</kbd>", cmd: "addSibling", uiIcon: "ui-icon-plus" },
{title: "New child <kbd>[Ctrl+Shift+N]</kbd>", cmd: "addChild", uiIcon: "ui-icon-arrowreturn-1-e" },
{title: "----"},
{title: "Cut <kbd>Ctrl+X</kbd>", cmd: "cut", uiIcon: "ui-icon-scissors"},
{title: "Copy <kbd>Ctrl-C</kbd>", cmd: "copy", uiIcon: "ui-icon-copy"},
{title: "Paste as child<kbd>Ctrl+V</kbd>", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true }
],
beforeOpen: function(event, ui) {
var node = $.ui.fancytree.getNode(ui.target);
$("#tree").contextmenu("enableEntry", "paste", !!CLIPBOARD);
node.setActive();
},
select: function(event, ui) {
var that = this;
// delay the event, so the menu can close and the click event does
// not interfere with the edit control
setTimeout(function(){
$(that).trigger("nodeCommand", {cmd: ui.cmd});
}, 100);
}
});
});
</script>
</head>
<body class="example">
<h1>Example: tree grid with keyboard navigation, DnD, and editing capabilites </h1>
<div class="description">
Bringing it all together: this sample combines different extensions and
custom events to implement an editable tree grid:
<ul>
<li>'ext-dnd' to re-order nodes using drag-and-drop.</li>
<li>'ext-table' + 'ext-gridnav' to implement a tree grid.<br>
Try <kbd>UP / DOWN / LEFT / RIGHT</kbd>, <kbd>TAB</kbd>, <kbd>Shift+TAB</kbd>
to navigate between grid cells. Note that embedded input controls
remain functional.
</li>
<li>'ext-edit': inline editing.<br>
Try <kbd>F2</kbd> to rename a node.<br>
<kbd>Ctrl+N</kbd>, <kbd>Ctrl+Shift+N</kbd> to add nodes (Quick-enter: add new nodes until
[enter] is hit on an empty title).
</li>
<li>Extended keyboard shortcuts:<br>
<kbd>Ctrl+C</kbd>, <kbd>Ctrl+X</kbd>, <kbd>Ctrl+P</kbd> for copy/paste,<br>
<kbd>Ctrl+UP</kbd>, <kbd>Ctrl+DOWN</kbd>, <kbd>Ctrl+LEFT</kbd>, <kbd>Ctrl+RIGHT</kbd> to move nodes around and change indentation.
</li>
<li>3rd-party <a href="https://github.com/mar10/jquery-ui-contextmenu">contextmenu</a> for additional edit commands</li>
</ul>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<h1>Table Tree</h1>
<div>
<label>Fake input:<input id="input1"/></label>
</div>
<table id="tree">
<colgroup>
<col width="30px">
<col width="50px">
<col width="350px">
<col width="50px">
<col width="50px">
<col width="30px">
<col width="30px">
<col width="50px">
</colgroup>
<thead>
<tr> <th></th> <th>#</th> <th></th> <th>Ed1</th> <th>Ed2</th> <th>Rb1</th> <th>Rb2</th> <th>Cb</th></tr>
</thead>
<tbody>
<!-- Define a row template for all invariant markup: -->
<tr>
<td class="alignCenter"></td>
<td></td>
<td></td>
<td><input name="input1" type="input"></td>
<td><input name="input2" type="input"></td>
<td class="alignCenter"><input name="cb1" type="checkbox"></td>
<td class="alignCenter"><input name="cb2" type="checkbox"></td>
<td>
<select name="sel1" id="">
<option value="a">A</option>
<option value="b">B</option>
</select>
</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-multiline.html deleted 100644 → 0
View file @ 1de84b06
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - Example</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.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>
/*
ul.fancytree-container {
position: relative;
}
*/
/*
span {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*/
/*
span.fancytree-node {
-moz-display: flex;
-webkit-display: flex;
-ms-display: flex;
display: flex;
}
*/
span.ws-wrap span.fancytree-title {
white-space: normal;
}
span.ws-nowrap span.fancytree-title { white-space: nowrap; }
span.ws-pre span.fancytree-title { white-space: pre; }
</style>
<script type="text/javascript">
function drawCanvas() {
var canvas = document.getElementById("canvas1"),
ctx = canvas && canvas.getContext("2d");
if(ctx) {
var lingrad = ctx.createLinearGradient( 0, 0, 0, 150 );
lingrad.addColorStop( 0, "#0099cc" );
lingrad.addColorStop( 0.5, "#fff" );
lingrad.addColorStop( 0.5, "#99cc00");
lingrad.addColorStop( 1, "#0099ff");
ctx.fillStyle = lingrad;
ctx.fillRect(0, 0, 400 ,100 );
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect( 10, 10, 55, 55 );
}
}
$(function(){
$("#tree").fancytree({
// extensions: ["wide"],
// canvas and video child nodes do not exist before the parent is
// expanded, so we trigger rendering on demand
expand: function(event, data) {
var node = data.node;
switch( node.key ) {
case "videoParent1":
var video = document.getElementById("video1");
video.play();
break;
case "canvasParent1":
setTimeout(drawCanvas, 1000);
// drawCanvas();
break;
}
}
});
// Fancytree renders nodes 'lazily', i.e. when they are first expanded.
// So we to use live event binding for embedded elements.
$("#tree").on("click", "#btn1", function(){
alert("Thank you for clicking.");
return false;
});
});
</script>
</head>
<body class="example">
<h1>Example: formatted and multi-line titles</h1>
<p class="description">
This example shows how multi-line and non-text contents is displayed.
</p>
<div id="tree">
<ul>
<li>Using some <b>bold</b> markup in the text (&lt;li&gt; tag only).
<li><span>Using some <b>bold</b> markup in the text (&lt;li&gt;&lt;span&gt; tag).</span>
<li class="folder">Long line (nowrap)
<ul>
<li><span>
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</span>
<li>Node 2
</ul>
<li class="folder">Long line (wrapping)
<ul>
<li class="ws-wrap"><span>
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</span>
<li>Node 2
</ul>
<li class="folder">Long line (pre formatted)
<ul>
<li class="ws-pre"><span>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</span>
<li>Node 2
</ul>
<li class="folder">Long paragraph, with H3, P, and BR
<ul>
<li><span><h3>Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
<br>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
<br>
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
<br>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</span>
<li>Node 2
</ul>
<li class="folder">Long text using BR and P
<ul>
<li><span>
<p>
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed <br>
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, <br>
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br>
</p>
<p>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit <br>
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <br>
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, <br>
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br>
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <br>
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <br>
At vero eos et accusam et justo duo dolores et ea rebum. <br>
</p>
<p>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br>
</p>
</span>
<li>Node 2
</ul>
<li class="folder">Form elements
<ul>
<li><span>
Name: <input type="text" name="name2" />
</span>
<li><span>
Comment:<br><textarea name="comment2"></textarea>
</span>
<li data-icon="false"><span>
<input type="radio" id="rb1_1" name="rb1" value="v1" checked>
<label for="rb1_1">Foo</label>
<input type="radio" id="rb1_2" name="rb1" value="v2">
<label for="rb1_2">Bar</label>
<input type="radio" id="rb1_3" name="rb1" value="v3">
<label for="rb1_3">Baz</label>
</span>
<li><span>
<button id="btn1" value="123">Click me</button>
</span>
</ul>
<li id="videoParent1" class="folder">Video
<ul>
<li id="videoNode1" data-icon="false"><span>
<video id="video1" src="http://simpl.info/video/video/chrome.mp4"
controls="controls">
Your browser does not support the <code>video</code> element.
</video>
</span>
</ul>
<!--
<li id="canvasParent1" class="folder">Canvas
<ul>
<li id="canvasNode1" data-icon="false"><span>
<canvas id="canvas1" width="400" height="100">
Your browser does not support the <code>canvas</code> element.
</canvas>
</span>
</ul>
-->
<li>item3
</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/">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-playground.html deleted 100644 → 0
View file @ 1de84b06
<!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="sample.css" rel="stylesheet">
<script src="sample.js"></script>
<!-- End_Exclude -->
</head>
<body class="example">
<h1>Example: Playground</h1>
<div class="description">
This tree is initialized from a data structure.
</div>
<a class="jsbin-embed embedded-jsbin"
href="http://jsbin.com/boyiwo/embed?js,output&height=500px">
JS Bin on jsbin.com</a>
<script src="http://static.jsbin.com/js/embed.min.js?3.41.9"></script>
<hr>
<div class="description">
This tree is initialized from a hidden &lt;ul> element on the page.
</div>
<!--
<iframe class="embedded-plunkr"
src="http://embed.plnkr.co/XnFTEf?t=code&f=script.js"
allowfullscreen="allowfullscreen">
Loading plunk...
</iframe>
-->
<a class="jsbin-embed embedded-jsbin"
href="http://jsbin.com/rerebov/embed?html,js,output&height=500px">
JS Bin on jsbin.com</a>
<script src="http://static.jsbin.com/js/embed.min.js?3.41.9"></script>
</body>
</html>
src/LIB-NOT-USED/jquery.fancytree/demo/sample-rtl.html deleted 100644 → 0
View file @ 1de84b06
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - Example: RTL</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-xp/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.dnd.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: ["dnd"],
rtl: true,
source: {url: "ajax-tree-products.json"},
dnd: {
focusOnClick: true,
dragStart: function(node, data) {
return true;
},
dragEnter: function(node, data) {
return true;
},
dragDrop: function(node, data) {
data.otherNode.moveTo(node, data.hitMode);
}
},
init: function(event, data){
},
keydown: function(event, data) {
var KC = $.ui.keyCode,
oe = event.originalEvent;
// Swap LEFT/RIGHT keys
switch( event.which ) {
case KC.LEFT:
oe.keyCode = KC.RIGHT;
oe.which = KC.RIGHT;
break;
case KC.RIGHT:
oe.keyCode = KC.LEFT;
oe.which = KC.LEFT;
break;
}
}
});
});
</script>
</head>
<body class="example">
<h1>Example: RTL</h1>
<p class="description">
This tree uses some extra styles to provide RTL support (experimental).
</p>
<div>
Skin:<select id="skinswitcher"></select>
</div>
<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-scroll.html deleted 100644 → 0
View file @ 1de84b06
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - Example: Scrolling</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.columnview.js"></script>
<script src="../src/jquery.fancytree.dnd.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">
ul.fancytree-container {
width: 200px;
height: 100px;
overflow: auto;
position: relative;
}
</style>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
// http://lions-mark.com/jquery/scrollTo/
/*
$.fn.scrollTo = function( target, options, callback ){
if(typeof options == 'function' && arguments.length == 2){ callback = options; options = target; }
var settings = $.extend({
scrollTarget: target,
offsetTop: 0, //50,
duration: 500,
easing: "swing"
}, options);
return this.each(function(){
var scrollPane = $(this);
var scrollTarget = (typeof settings.scrollTarget == "number") ? settings.scrollTarget : $(settings.scrollTarget);
var scrollY = (typeof scrollTarget == "number") ? scrollTarget : scrollTarget.offset().top + scrollPane.scrollTop() - parseInt(settings.offsetTop);
scrollPane.animate({scrollTop : scrollY }, parseInt(settings.duration), settings.easing, function(){
if (typeof callback == 'function') { callback.call(this); }
});
});
}
*/
$(function(){
<!-- Start_Exclude: This block is not part of the sample code -->
<!-- End_Exclude -->
// 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: [],
checkbox: true,
autoScroll: true,
source: {
url: "../test/unit/ajax-tree-plain.json"
},
lazyLoad: function(event, data) {
data.result = {url: "../test/unit/ajax-sub2.json"}
}
// expand: function(event, data){
// // scroll down to last node, but keep current node visible
// data.node.getLastChild().scrollIntoView(true, {topNode: data.node});
// }
});
});
</script>
</head>
<body class="example">
<h1>Example: scrolling</h1>
<p class="description">
</p>
<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>
<!-- 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-select.html deleted 100644 → 0
View file @ 1de84b06
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - Example: Select</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 -->
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
// --- Initialize sample trees
$("#tree1").fancytree({
checkbox: "radio",
selectMode: 1,
// tooltip: true,
// tooltip: function(event, data) { return data.node.title + "!"},
source: [
{title: "n1 (checkbox: false)", expanded: true, checkbox: false, children: [
{title: "n1.1"},
{title: "n1.2 (selected)", selected: true},
{title: "n1.3"}
]},
{title: "n2", expanded: true, checkbox: false, children: [
{title: "n2.1"},
{title: "n2.2"},
{title: "n2.3"}
]}
],
init: function(event, data) {
// Set key from first part of title (just for this demo output)
data.tree.visit(function(n) {
n.key = n.title.split(" ")[0];
});
},
activate: function(event, data) {
$("#echoActive1").text(data.node.title);
},
select: function(event, data) {
// Display list of selected nodes
var s = data.tree.getSelectedNodes().join(", ");
$("#echoSelection1").text(s);
}
});
// ---------------------------------------------------------------------
$("#btnDeselectAll2").click(function(){
$("#tree2").fancytree("getTree").visit(function(node){
node.setSelected(false);
});
return false;
});
$("#btnSelectAll2").click(function(){
$("#tree2").fancytree("getTree").visit(function(node){
node.setSelected(true);
});
return false;
});
$("#tree2").fancytree({
checkbox: true,
selectMode: 2,
source: [
{title: "n1 (selected)", expanded: true, selected: true, children: [
{title: "n1.1"},
{title: "n1.2 (selected)", selected: true},
{title: "n1.3"}
]},
{title: "n2 (checkbox: false)", expanded: true, checkbox: false, children: [
{title: "n2.1"},
{title: "n2.2"},
{title: "n2.3"}
]},
{title: "n3 (radiogroup, checkbox: false)", expanded: true,
checkbox: false, radiogroup: true, children: [
{title: "n3.1"},
{title: "n3.2"},
{title: "n3.3"}
]}
],
init: function(event, data) {
// Set key from first part of title (just for this demo output)
data.tree.visit(function(n) {
n.key = n.title.split(" ")[0];
});
},
select: function(event, data) {
// Display list of selected nodes
var selNodes = data.tree.getSelectedNodes();
// convert to title/key array
var selKeys = $.map(selNodes, function(node){
return "[" + node.key + "]: '" + node.title + "'";
});
$("#echoSelection2").text(selKeys.join(", "));
},
// The following options are only required, if we have more than one tree on one page:
cookieId: "fancytree-Cb2",
idPrefix: "fancytree-Cb2-"
});
// ---------------------------------------------------------------------
$("#btnDeselectAll3").click(function(){
$("#tree3").fancytree("getTree").visit(function(node){
node.setSelected(false);
});
return false;
});
$("#btnSelectAll3").click(function(){
$("#tree3").fancytree("getTree").visit(function(node){
node.setSelected(true);
});
return false;
});
$("#tree3").fancytree({
checkbox: true,
selectMode: 3,
source: [
{title: "n1", expanded: true, children: [
{title: "n1.1 (selected)"},
{title: "n1.2"},
{title: "n1.3"}
]},
{title: "n2", expanded: true, children: [
{title: "n2.1 (selected)", selected: true},
{title: "n2.2", selected: false},
{title: "n2.3", selected: null}
]},
{title: "n3", expanded: true, children: [
{title: "n3.1", expanded: true, children: [
{title: "n3.1.1 (unselectable)", unselectable: true},
{title: "n3.1.2 (unselectable)", unselectable: true},
{title: "n3.1.3"}
]},
{title: "n3.2", expanded: true, children: [
{title: "n3.2.1 (unselectableStatus: true)", unselectableStatus: true},
{title: "n3.2.2 (unselectableStatus: false)", unselectableStatus: false},
{title: "n3.2.3"}
]},
{title: "n3.3", expanded: true, children: [
{title: "n3.3.1 (unselectableStatus: true, unselectableIgnore)",
unselectableStatus: true, unselectableIgnore: true},
{title: "n3.3.2 (unselectableStatus: false, unselectableIgnore)",
unselectableStatus: false, unselectableIgnore: true},
{title: "n3.3.3"}
]}
]}
],
init: function(event, data) {
// Set key from first part of title (just for this demo output)
data.tree.visit(function(n) {
n.key = n.title.split(" ")[0];
n.expanded = true;
});
},
lazyLoad: function(event, ctx) {
ctx.result = {url: "ajax-sub2.json", debugDelay: 1000};
},
loadChildren: function(event, ctx) {
ctx.node.fixSelection3AfterClick();
},
select: function(event, data) {
// Get a list of all selected nodes, and convert to a key array:
var selKeys = $.map(data.tree.getSelectedNodes(), function(node){
return node.key;
});
$("#echoSelection3").text(selKeys.join(", "));
// Get a list of all selected TOP nodes
var selRootNodes = data.tree.getSelectedNodes(true);
// ... and convert to a key array:
var selRootKeys = $.map(selRootNodes, function(node){
return node.key;
});
$("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
// $("#echoSelectionRoots3").text(selRootNodes.join(", "));
},
// The following options are only required, if we have more than one tree on one page:
cookieId: "fancytree-Cb3",
idPrefix: "fancytree-Cb3-"
});
});
</script>
</head>
<body class="example">
<h1>Example: Selection and Checkboxes</h1>
<p class="description">
Use different select modes for the tree and distinct nodes.
</p>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<!-- Tree #1 -->
<p class="description">
This tree has <b>checkoxes and selectMode 1 (single-selection)</b> enabled.<br>
The checkbox icons are replaced by radio buttons by adding
the <code>tree.checkbox: "radio"</code> option.
</p>
<div id="tree1">
</div>
<div>Active node: <span id="echoActive1">-</span></div>
<div>Selection: <span id="echoSelection1">-</span></div>
<!-- Tree #2 -->
<p class="description">
This tree has <b>selectMode 2 (multi-selection)</b> enabled.<br>
Node `n3` uses the 'radiogroup' option and hides the checkbox.
</p>
<p>
<a href="#" id="btnSelectAll2">Select all</a> -
<a href="#" id="btnDeselectAll2">Deselect all</a>
</p>
<div id="tree2"></div>
<div>Selected keys: <span id="echoSelection2">-</span></div>
<!-- Tree #3 -->
<p class="description">
This tree has <b>checkoxes and selectMode 3 (hierarchical multi-selection)</b> enabled.<br>
Node `n3` features different variations of the <code>unselectable</code> mode.
</p>
<p>
<a href="#" id="btnSelectAll3">Select all</a> -
<a href="#" id="btnDeselectAll3">Deselect all</a>
</p>
<div id="tree3"></div>
<div>Selected keys: <span id="echoSelection3">-</span></div>
<div>Selected root keys: <span id="echoSelectionRootKeys3">-</span></div>
<!-- <div>Selected root nodes: <span id="echoSelectionRoots3">-</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-source.html deleted 100644 → 0
View file @ 1de84b06
<!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(){
var FT = $.ui.fancytree;
// attach to instance 1 and 3
$("#tree1, #tree3").fancytree({
checkbox: true,
selectMode: 1,
activate: function(event, data){
var node = data.node;
FT.debug("activate: event=", event, ", data=", data);
if(!$.isEmptyObject(node.data)){
alert("custom node data: " + JSON.stringify(node.data));
}
},
lazyLoad: function(event, data){
// we can't `return` values from an event handler, so we
// pass the result as `data.result` attribute:
data.result = {url: "ajax-sub2.json"};
}
// }).bind("fancytreeactivate", function(event, data){
// $.ui.fancytree.debug("fancytreeactivate: event=", event, ", data=", data);
// return false;
});
// Load tree from Ajax JSON
$("#tree2").fancytree({
source: {
url: "ajax-tree-plain.json"
},
lazyLoad: function(event, data){
data.result = $.ajax({
url: "ajax-sub2.json",
dataType: "json"
});
}
});
});
</script>
<!-- Start_Exclude: This block is not part of the sample code -->
<script>
$(function(){
addSampleButton({
label: "destroy all",
newline: false,
code: function(){
$(":ui-fancytree").fancytree("destroy");
}
});
addSampleButton({
label: "init all",
newline: false,
code: function(){
$(".sampletree").fancytree();
}
});
addSampleButton({
label: "Reload() #1",
newline: false,
code: function(){
$.ui.fancytree.getTree("#tree1").reload([
{title: "node1"},
{title: "node2"}
]).done(function(){
alert("reloaded");
});
}
});
addSampleButton({
label: "Set 'source' option (all)",
newline: false,
code: function(){
$(".sampletree").fancytree("option", "source", [
{title: "node1"}
]);
}
});
});
</script>
<!-- End_Exclude -->
</head>
<body class="example">
<h1>Example: Initialization Methods</h1>
<p class="description">
Use different methods to initialize the tree (Ajax, embedded &lt;ul>,
embedded JSON).
<br>
Also distinct nodes contain custom data using `data="..."` attributes.
<br>
See the <a href="https://github.com/mar10/fancytree/wiki/TutorialLoadData"
target="_blank" class="external">LoadData Tutorial</a>
for details.
</p>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<p id="sampleButtons">
</p>
<p>Load from embedded &lt;UL> markup:</p>
<div id="tree1" class="sampletree">
<ul id="treeData" styleXXX="display: none;">
<li>simple node (no explicit id, so a default key is generated)
<li id="id1" title="Look, a tool tip!">Define key and tooltip using 'id' and 'title' attributes
<li id="id2"><span>item2 with <b>html</b> inside a span tag</span>
<li class="nolink">this nodes adds class 'nolink', so no &lt;a> tag is generated
<li><a href="http:/wwwwendt.de/">using single a-tag to pass href (this would be clickable even if JavaScript is off)</a>
<li data-foo="bar">defining custom node.data.foo = 'bar' using a data-foo attribute
<li data-json='{"foo": "bar"}'>defining node.data.foo = 'bar' using a data-json attribute
<li class="my-extra-class">node with some extra classes (will be added to the generated markup)
<li id="id3" class="folder">Folder with some 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
</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 focus">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>
<li class="lazy folder" data-source="foo">Lazy loading folder
<li id="id6" class="lazy folder expanded">Lazy loading folder (expand on init)
</ul>
</div>
<p>Load from Ajax data:</p>
<div id="tree2" data-source="ajax" class="sampletree">
</div>
<p>Load from embedded JSON data:</p>
<div id="tree3" class="sampletree" data-type="json">
{"foo": "bazbaz", "children":
[
{"title": "node 1"},
{"title": "node 2", "folder": true }
]}
</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-theming.html deleted 100644 → 0
View file @ 1de84b06
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - Example: Theming</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>
<!-- Include the basic stylesheet: -->
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<!-- Add som custom fonts -->
<link href="http://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet">
<!-- Override CSS with a custom stylesheet : -->
<link href="skin-custom/custom.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">
span.fancytree-node.custom1 > span.fancytree-title {
color: maroon;
font-family: "Audiowide";
}
span.fancytree-node.custom1 > span.fancytree-icon {
background-position: 0 0;
background-image: url("skin-custom/customDoc2.gif");
}
</style>
<script type="text/javascript">
$(function(){
$("#tree").fancytree({
// Image folder used for data.icon attribute.
imagePath: "skin-custom/",
// icon: false,
renderNode: function(event, data) {
// Optionally tweak data.node.span
var node = data.node;
if(node.data.cstrender){
var $span = $(node.span);
$span.find("> span.fancytree-title").text(">> " + node.title).css({
fontStyle: "italic"
});
$span.find("> span.fancytree-icon").css({
// border: "1px solid green",
backgroundImage: "url(skin-custom/customDoc2.gif)",
backgroundPosition: "0 0"
});
}
}
});
});
</script>
<!-- Start_Exclude: This block is not part of the sample code -->
<script>
$(function(){
addSampleButton({
label: "Set icons",
code: function(){
var tree = $("#tree").fancytree("getTree"),
node = tree.getNodeByKey("node_4.1");
node.extraClasses = "custom1";
node.renderTitle();
node = tree.getNodeByKey("node_4.2");
node.icon = "customDoc1.gif";
node.renderTitle();
}
});
});
</script>
<!-- End_Exclude -->
</head>
<body class="example">
<h1>Example: Theming</h1>
<p class="description">
Include a custom CSS <i>after</i> the standard CSS to override theming.<br>
Some nodes have their <code>data.addClass</code> attribute set.<br>
Finally, the last two nodes use the <code>data.icon</code> attribute.
<br>
See the <a href="https://github.com/mar10/fancytree/wiki/TutorialTheming"
target="_blank" class="external">Theming Tutorial</a>
for details.
</p>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<p id="sampleButtons">
</p>
<div id="tree">
<ul>
<li class="folder expanded">Standard nodes, modified by extra CSS rules
<ul>
<li id="node_4.1">Sub-item 4.1
<li id="node_4.2">Sub-item 4.2
</ul>
<li class="folder expanded">Override CSS style per node
<ul>
<li class="custom1">class="custom1": Additional classes are copied over to outer &lt;span>
<li class="folder custom1">class="custom1": Additional classes are copied over to outer &lt;span>
</ul>
<li class="folder expanded">Use 'data-NAME' attributes to define additional data
<ul>
<li data-icon="customDoc1.gif">Node with standard CSS, but custom icon
<li class="folder" data-icon="folder_docs.gif">Folder with standard CSS but custom icon
<li data-icon="ui-icon ui-icon-heart">'icon' is directly added to the image &lt;span>, so jQuery stock icons may be used
</ul>
<li class="folder expanded">Use 'data-json' attribute to define additional data
<ul>
<li data-json='{"icon": "customDoc1.gif"}'>Node with standard CSS, but custom 'data-icon'
</ul>
<li class="folder expanded">Use render callback
<ul>
<li id="renderNode1" data-cstrender="true">Node hat will be handled by 'render' calback
</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/">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-tooltip.html deleted 100644 → 0
View file @ 1de84b06
<!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 rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/start/jquery-ui.css" />
<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>
<!-- 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();
$("#tree span.fancytree-title").tooltip();
});
</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
</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-webservice.html deleted 100644 → 0
View file @ 1de84b06
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - Webservice 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(){
$("#taxonTree").fancytree({
source: {
url: "http://www.itis.gov/ITISWebService/jsonservice/getKingdomNames",
data: {
jsonp: "itis_data"
},
cache: true,
jsonpCallback: "itis_data",
dataType: "jsonp"
},
lazyLoad: function(event, data) {
data.result = {
url: "http://www.itis.gov/ITISWebService/jsonservice/getHierarchyDownFromTSN",
data: {
jsonp: "itis_data",
tsn: data.node.key
},
cache: true,
jsonpCallback: "itis_data",
dataType: "jsonp"
};
},
postProcess: function(event, data) {
// Convert incoming ITIS format to native Fancytree
var response = data.response;
data.node.info(response);
switch( response.class ) {
case "gov.usgs.itis.itis_service.metadata.SvcKingdomNameList":
data.result = $.map(response.kingdomNames, function(o){
return o && {title: o.kingdomName, key: o.tsn, folder: true, lazy: true};
});
break;
case "gov.usgs.itis.itis_service.data.SvcHierarchyRecordList":
data.result = $.map(response.hierarchyList, function(o){
return o && {title: o.taxonName, key: o.tsn, folder: true, lazy: true};
});
break;
default:
$.error("Unsupported class: " + response.class);
}
}
});
});
</script>
<!-- Start_Exclude: This block is not part of the sample code -->
<script>
$(function(){
addSampleButton({
label: "Goto 'Homo Sapiens'",
code: function(){
var tree = $("#taxonTree").fancytree("getTree"),
path = "/202423/914154/914156/158852/331030/914179/914181/179913/179916/179925/180089/943773/943778/943782/180090/943805/180091/180092";
tree.loadKeyPath(path, function(node, status){
switch( status ) {
case "loaded":
node.makeVisible();
break;
case "ok":
node.setActive();
break;
}
});
}
});
});
</script>
<!-- End_Exclude -->
</head>
<body class="example">
<h1>Example: Accessing external Webservices</h1>
<div class="description">
Load realtime data from the public
<a href="http://www.itis.gov/web_service.html" target="_blank" class="external">
<abbr title="Integrated Taxonomic Information System">ITIS</abbr>
Web Services
</a>
and convert the provided JSON data to Fancytree format.
<br>
See the <a href="http://wwwendt.de/tech/fancytree/demo/taxonomy-browser/">Taxonomy Browser</a>
for a more sophisticated example.
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<p id="sampleButtons">
</p>
<fieldset>
<legend>Integrated Taxonomic Information System</legend>
<div id="taxonTree">
</div>
</fieldset>
<!-- 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-xxl.html deleted 100644 → 0
View file @ 1de84b06
<!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(){
$("#skinswitcher")
// .skinswitcher("option", "base", "../../src/")
.skinswitcher("addChoices", [
{name: "win8-xxl", value: "win8-xxl", href: "skin-win8-xxl/ui.fancytree.css"}
])
.skinswitcher("change", "win8-xxl");
// 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 with some 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
</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.css deleted 100644 → 0
View file @ 1de84b06
a.external {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAFVBMVEVmmcwzmcyZzP8AZswAZv////////9E6giVAAAAB3RSTlP///////8AGksDRgAAADhJREFUGFcly0ESAEAEA0Ei6/9P3sEcVB8kmrwFyni0bOeyyDpy9JTLEaOhQq7Ongf5FeMhHS/4AVnsAZubxDVmAAAAAElFTkSuQmCC") 100% 50% no-repeat;
padding-right: 13px;
}
body.example {
margin: 15px;
font-family: sans-serif;
font-size: 1em;
}
body.example h1 {
font-size: 1.2em;
}
body.example h2 {
font-size: 1em;
}
body.example .description,
body.example .sample-links {
/* border: thin solid gray; */
background-color: #d0d0f0;
padding: 5px;
margin: 5px 0;
font-size: small;
}
p.version-info {
color: gray;
font-size: 0.6em;
}
p.warning,
p.info,
div.info {
font-size: small;
background-color: #ffffa0;
background-image: url(../doc/iconInfo_32x32.png);
background-repeat: no-repeat;
padding: 5px;
padding-left: 40px;
min-height: 25px;
}
.sampleButtonContainer
{
margin-right: 10px;
}
.sampleButtonContainer a
{
color: navy;
text-decoration: none;
padding: 1px 3px;
font-size: 50%;
}
p#sampleButtons h5
{
font-size: 9pt;
margin-top: 3px;
margin-bottom: 3px;
font-weight: bold;
}
p.sample-links a,
p.sample-links a:visited
{
color: navy;
text-decoration: none;
margin-left: 15px;
padding: 1px 3px;
font-size: small;
}
p.sample-links a:hover
{
text-decoration: underline;
}
pre{
background:#eee;
border:1px solid #999;
padding:.5em;
margin:.5em;
font-size:.9em;
}
ul.fancytree-container {
margin: 4px; /* leave some room for the safari focus border */
}
iframe.embedded-plunkr {
border: 1px solid #999;
width: 100%;
height: 500px;
}
iframe.embedded-jsbin {
border: 1px solid #999;
width: 100%;
height: 500px;
}
src/LIB-NOT-USED/jquery.fancytree/demo/sample.js deleted 100644 → 0
View file @ 1de84b06
/*************************************************************************
(c) 2008-2012 Martin Wendt
*************************************************************************/
/*******************************************************************************
* jQuery.skinswitcher plugin.
*
* Change CSS include when combobox selection changes.
* Copyright (c) 2012 Martin Wendt
*
* Usage:
$("select#skinswitcher").skinswitcher({
base: "../src/",
choices: [{name: "XP", value: "xp", href: "skin/ui.fancytree.css"},
{name: "Vista", value: "vista", href: "skin-vista/ui.fancytree.css"},
{name: "Lion", value: "lion", href: "skin-lion/ui.fancytree.css"}
],
init: "lion"
});
*/
/*globals alert, prettyPrint */
(function( $ ) {
var PLUGIN_NAME = "skinswitcher",
defaultOptions = {
/**RegEx that returns prefix, tag, and suffix of the CSS href.*/
// skinPattern: "^(\W/skin-)().css$",
// mode: "combo", // {String} mode 'combo' or 'radio'
base: "",
choices: [],
// extraChoices: [],
// Events:
change: $.noop
},
methods = {
init: function(options) {
var i,
opts = $.extend({}, defaultOptions, options),
hrefs = [],
$link = null,
initialChoice;
// $('').skinswitcher did not match a selector
if( !this.length ){
return this;
}
// Attach options to skinswitcher combobox for later access
this.data("options", opts);
// Find the <link> tag that is used to includes our skin CSS.
// Add a class for later access.
$.each(opts.choices, function(){
hrefs.push(this.href.toLowerCase());
});
$("head link").each(function(){
for(i=0; i<hrefs.length; i++){
if(this.href.toLowerCase().indexOf(hrefs[i]) >= 0){
$link = $(this);
$link.addClass(PLUGIN_NAME);
initialChoice = opts.choices[i];
}
}
});
if( !$link ){
$link = $("link." + PLUGIN_NAME);
}
if( !$link.length ){
$.error("Unable to find <link> tag for skinswitcher. Either set `href` to a known skin url or add a `skinswitcher` class.");
}
//
return this.each(function() {
// Add options to dropdown list
var $combo = $(this);
$combo
.empty()
.skinswitcher("addChoices", opts.choices)
.change(function(event){
var choice = $(":selected", this).data("choice");
$("link." + PLUGIN_NAME).attr("href", opts.base + choice.href);
opts.change(choice);
});
// Find out initial selection
if(opts.init){
$combo.val(opts.init).change();
}else if (initialChoice){
// select combobox value to match current <link> tag
// decouple this call to prevent IE6 exception
setTimeout(function(){
$combo.val(initialChoice.value);
opts.change(initialChoice);
}, 100);
}
});
},
option: function(name, value) {
var opts = this.data("options");
if(typeof value !== "undefined"){
opts[name] = value;
return this;
}else{
return opts[name];
}
},
addChoices: function(choices) {
var $combo = $(this);
if( $.isPlainObject(choices) ){
choices = [ choices ];
}
$.each(choices, function(i, choice){
var $opt = $("<option>", {
text: choice.name,
value: choice.value
}).data("choice", choice);
$combo.append($opt);
});
return this;
},
change: function(value) {
$(this).val(value).change();
return this;
},
reset: function() {
$(this).val("").change();
return this;
}
};
$.fn[PLUGIN_NAME] = function(method) {
// Method calling logic
if ( methods[method] ) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if ( typeof method === "object" || ! method ) {
return methods.init.apply(this, arguments);
} else {
$.error("Method " + method + " does not exist on jQuery." + PLUGIN_NAME);
}
};
})( jQuery );
/**
* Replacement for $().toggle(func1, func2), which was deprecated with jQuery 1.8
* and removed in 1.9.;
* Taken from http://stackoverflow.com/a/4911660/19166
* By Felix Kling
*/
(function($) {
var _gaq = _gaq || [],
SAMPLE_BUTTON_DEFAULTS = {
id: undefined,
label: "Sample",
newline: true,
code: function(){ alert("not implemented"); }
};
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data("toggleclicked", 0);
this.click(function() {
var data = $(this).data(),
tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
window.addSampleButton = function(options) {
var sourceCode,
opts = $.extend({}, SAMPLE_BUTTON_DEFAULTS, options),
$buttonBar = $("#sampleButtons"),
$container = $("<span />", {
"class": "sampleButtonContainer"
});
$("<button />", {
id: opts.id,
title: opts.tooltip,
text: opts.label
}).click(function(e){
e.preventDefault();
opts.code();
}).appendTo($container);
$("<a />", {
text: "Source code",
href: "#",
"class": "showCode"
}).appendTo($container)
.click(function(e){
try {
prettyPrint();
} catch (e2) {
alert(e2);
}
var $pre = $container.find("pre");
if($pre.is(":visible")){
$(this).text("Source code");
}else{
$(this).text("Hide source");
}
$pre.toggle("slow");
return false;
});
sourceCode = "" + opts.code;
// Remove outer function(){ CODE }
// sourceCode = sourceCode.match(/[]\{(.*)\}/);
sourceCode = sourceCode.substring(
sourceCode.indexOf("{") + 1,
sourceCode.lastIndexOf("}"));
// sourceCode = $.trim(sourceCode);
// Reduce tabs from 8 to 2 characters
sourceCode = sourceCode.replace(/\t/g, " ");
// Format code samples
$("<pre />", {
text: sourceCode,
"class": "prettyprint"
}).hide().appendTo($container);
if(opts.newline){
$container.append($("<br />"));
}
if(opts.header){
$("<h5 />", {text: opts.header}).appendTo($("p#sampleButtons"));
}
if( !$("#sampleButtons").length ){
$.error("addSampleButton() needs a container with id #sampleButtons");
}
$container.appendTo($buttonBar);
};
function initCodeSamples() {
var info,
$source = $("#sourceCode");
$("#codeExample").clickToggle(
function(){
$source.show("fast");
if( !this.old ){
this.old = $(this).html();
$.get(this.href, function(code){
// Remove <!-- Start_Exclude [...] End_Exclude --> blocks:
code = code.replace(/<!-- Start_Exclude(.|\n|\r)*?End_Exclude -->/gi, "<!-- (Irrelevant source removed.) -->");
// Reduce tabs from 8 to 2 characters
code = code.replace(/\t/g, " ");
$source.text(code);
// Format code samples
try {
prettyPrint();
} catch (e) {
alert(e);
}
}, "html");
}
$(this).html("Hide source code");
},
function(){
$(this).html(this.old);
$source.hide("fast");
}
);
if(jQuery.ui){
info = "Fancytree " + jQuery.ui.fancytree.version +
", jQuery UI " + jQuery.ui.version +
", jQuery " + jQuery.fn.jquery;
/*
info += "\n<br>";
info += "document.compatMode: " + document.compatMode + "\n";
for(e in jQuery.support){
info += "<br>\n" + e + ": " + jQuery.support[e];
}
*/
$("p.sample-links").after("<p class='version-info'>" + info + "</p>");
}
}
$(function(){
// Log to Google Analytics, when not running locally
if ( document.URL.toLowerCase().indexOf("wwwendt.de/") >= 0 ) {
_gaq.push(["_setAccount", "UA-316028-1"]);
_gaq.push(["_trackPageview"]);
(function() {
var s, ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
ga.src = ("https:" === document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
})();
}
// Show some elements only, if (not) inside the Example Browser
if (top.location === window.location){
$(".hideOutsideFS").hide();
}else{
$(".hideInsideFS").hide();
}
initCodeSamples();
$("select#skinswitcher").skinswitcher({
base: "../src/",
choices: [{name: "XP", value: "xp", href: "skin-xp/ui.fancytree.css"},
{name: "Vista (classic Dynatree)", value: "vista", href: "skin-vista/ui.fancytree.css"},
{name: "Win7", value: "win7", href: "skin-win7/ui.fancytree.css"},
{name: "Win8", value: "win8", href: "skin-win8/ui.fancytree.css"},
{name: "Win8-N", value: "win8n", href: "skin-win8-n/ui.fancytree.css"},
{name: "Win8 xxl", value: "win8xxl", href: "skin-win8-xxl/ui.fancytree.css"},
{name: "Lion", value: "lion", href: "skin-lion/ui.fancytree.css"}
],
change: function(choice) {
// console.log("choice: " + choice.value)
$("#connectorsSwitch").toggle(choice.value !== "xp");
}
}).after($("<label id='connectorsSwitch'><input name='cbConnectors' type='checkbox'>Connectors</label>"));
$("input[name=cbConnectors]").on("change", function(e){
$(".fancytree-container").toggleClass("fancytree-connectors", $(this).is(":checked"));
});
});
}(jQuery));