jqtree 1.8.1 → 1.8.3

package/docs/_entries/options/selectable.md

@@ -1,18 +0,0 @@
----
-title: selectable
-name: options-selectable
----
-
-Turn on selection of nodes.
-
-* **true (default)**: turn on selection of nodes
-* **false**: turn off selection of nodes
-
-Example: turn off selection of nodes.
-
-{% highlight js %}
-$('#tree1').tree({
-    data: data,
-    selectable: false
-});
-{% endhighlight %}

package/docs/_entries/options/showemptyfolder.md

@@ -1,26 +0,0 @@
----
-title: showEmptyFolder
-name: options-showemptyfolder
----
-
-* **true**: A node with empty children is considered a folder. Meaning: the node has a 'children' attribute, but it's an empty array.
-    * Show folder icon
-    * Folder can be opened and closed
-* **false (default)**: A node with empty children is considered a child node
-
-Example with option true:
-
-{% highlight js %}
-const data = [
-    {
-        name: 'node1',
-        id: 123,
-        children: []
-    }
-];
-
-$('#tree1').tree({
-    data: data,
-    showEmptyFolder: true
-});
-{% endhighlight %}

package/docs/_entries/options/slide.md

@@ -1,12 +0,0 @@
----
-title: slide
-name: options-slide
----
-
-Turn slide animation on or off. Default is true.
-
-{% highlight js %}
-$('#tree1').tree({
-    slide: false
-});
-{% endhighlight %}

package/docs/_entries/options/start_dnd_delay.md

@@ -1,13 +0,0 @@
----
-title: startDndDelay
-name: options-start-dnd-delay
----
-
-Sets the delay before drag-and-drop is started. The default is 300 milliseconds.
-
-{% highlight js %}
-$tree.tree({
-  dragAndDrop: true,
-  startDndDelay: 3000,
-});
-{% endhighlight %}

package/docs/_entries/options/tabindex.md

@@ -1,14 +0,0 @@
----
-title: tabIndex
-name: tabIndex-slide
----
-
-Set the tabindex of the tree. The default is `0`.
-
-Note that the tabindex is set to the selected node.
-
-{% highlight js %}
-$('#tree1').tree({
-    tabIndex: 5
-});
-{% endhighlight %}

package/docs/_entries/options/usecontextmenu.md

@@ -1,14 +0,0 @@
----
-title: useContextMenu
-name: usecontextmenu
----
-
-Bind the context menu event (true/false).
-
-**true** (default)
-
-A right mouse-click will trigger a [tree.contextmenu](#event-tree-contextmenu) event. This overrides the native contextmenu of the browser.
-
-**false**
-
-A right mouse-click will trigger the native contextmenu of the browser.

package/docs/_examples/01_load_json_data.html

@@ -1,45 +0,0 @@
----
-title: Load json data in javascript tree
-js: examples/load_json_data.js
----
-
-<p class="flex justify-between">
-    <a href="../../index.html">&laquo; Documentation</a>
-    <a href="../02_load_json_data_from_server/">Example 2 &raquo;</a>
-</p>
-
-<h1>Example 1 - load json data</h1>
-
-<div id="tree1" class="not-prose"></div>
-
-<p>
-    In this example we load the data using the <strong>data</strong> option.
-    As you can see, the data is an array of objects.
-</p>
-<ul>
-    <li>The <strong>name</strong> property defines the name of the node.</li>
-    <li>The <strong>id</strong> is the unique id of the node.</li>
-    <li>The <strong>children</strong> property is an array of nodes.</li>
-</ul>
-
-{% highlight js %}
-var data = [
-    {
-        name: 'node1', id: 1,
-        children: [
-            { name: 'child1', id: 2 },
-            { name: 'child2', id: 3 }
-        ]
-    },
-    {
-        name: 'node2', id: 4,
-        children: [
-            { name: 'child3', id: 5 }
-        ]
-    }
-];
-
-$('#tree1').tree({
-    data: data
-});
-{% endhighlight %}

package/docs/_examples/02_load_json_data_from_server.html

@@ -1,29 +0,0 @@
----
-title: Load json data from the server in javascript tree
-js: examples/load_json_data_from_server.js
----
-
-<p class="flex justify-between">
-    <a href="../01_load_json_data/">&laquo; Example 1</a>
-    <a href="../03_drag_and_drop/">Example 3 &raquo;</a>
-</p>
-
-<h1>Example 2 - load json data from the server</h1>
-
-<div id="tree1" class="not-prose" data-url="/example_data/"></div>
-
-<p>
-    In this example we load the data from the server using the <strong>data-url</strong> property on the dom element.
-</p>
-
-<h3>html</h3>
-
-{% highlight html %}
-<div id="tree1" data-url="/example_data/"></div>
-{% endhighlight %}
-
-<h3>javascript</h3>
-
-{% highlight js %}
-$('#tree1').tree();
-{% endhighlight %}

package/docs/_examples/03_drag_and_drop.html

@@ -1,42 +0,0 @@
----
-title: Javascript tree with drag and drop
-js: examples/drag_and_drop.js
----
-
-<p class="flex justify-between">
-    <a href="../02_load_json_data_from_server/">&laquo; Example 2</a>
-    <a href="../04_save_state/">Example 4 &raquo;</a>    
-</p>
-
-<h1>Example 3 - Drag and drop</h1>
-
-<div id="tree1" class="not-prose" data-url="/example_data/"></div>
-
-<p>
-   Let's add drag-and-drop support by setting the option <strong>dragAndDrop</strong> to true.
-   You can now drag tree nodes to another position.
-</p>
-
-<p>
-    Other options:
-</p>
-
-<ul>
-    <li>The option <strong>autoOpen</strong> is set to 0 to open the first level of nodes.</li>
-</ul>
-
-<h3>html</h3>
-
-{% highlight html %}
-<div id="tree1" data-url="/example_data/"></div>
-{% endhighlight %}
-
-<h3>javascript</h3>
-
-{% highlight js %}
-var $tree = $('#tree1');
-$tree.tree({
-  dragAndDrop: true,
-  autoOpen: 0
-});
-{% endhighlight %}

package/docs/_examples/04_save_state.html

@@ -1,46 +0,0 @@
----
-title: Save the state in javascript tree
-js: examples/save_state.js
----
-
-<p class="flex justify-between">
-    <a href="../03_drag_and_drop/">&laquo; Example 3</a>
-    <a href="../05_load_on_demand/">Example 5 &raquo;</a>
-</p>
-
-<h1>Example 4 - Save the state</h1>
-
-<div id="tree1" class="not-prose" data-url="/example_data/"></div>
-
-<p>
-   If you set the option <strong>saveState</strong> to true, then jqtree remembers the tree state after a page reload.
-</p>
-<ul>
-    <li>
-        JqTree save the state into localStorage.
-    </li>
-</ul>
-
-<h3>html</h3>
-
-{% highlight html %}
-<div id="tree1" data-url="/example_data/"></div>
-{% endhighlight %}
-
-<h3>javascript</h3>
-
-{% highlight js %}
-$('#tree1').tree({
-    saveState: true
-});
-{% endhighlight %}
-
-<p>
-    Giving the <strong>saveState</strong> a string value sets the storage key. The default key is 'tree'.
-</p>
-
-{% highlight js %}
-$('#tree1').tree({
-    saveState: 'my-tree'
-});
-{% endhighlight %}

package/docs/_examples/05_load_on_demand.html

@@ -1,68 +0,0 @@
----
-title: Load nodes on demand from the server in javascript tree
-js: examples/load_on_demand.js
----
-
-<p class="flex justify-between">
-    <a href="../04_save_state/">&laquo; Example 4</a>
-    <a href="../06_autoescape/">Example 6 &raquo;</a>
-</p>
-
-<h1>Example 5 - Load nodes on demand from the server</h1>
-
-
-<div id="tree1" class="not-prose" data-url="/nodes/"></div>
-
-<p>
-    In this example, the data is loaded on demand from the server.
-    <br>
-    To use load on demand, you must do the following:
-</p>
-
-<ul>
-    <li>
-        You must specify a <strong>data url</strong>. In this example this is done using the <strong>data-url</strong>
-        html data attribute.
-    </li>
-    <li>
-        Folders that must be loaded on demand must have the <strong>load_on_demand</strong> property. You can specify this in the data.
-    </li>
-    <li>
-        In this example, the url <strong>/nodes/</strong> returns the first level of data (Saurischia and Ornithischians).
-    </li>
-    <li>
-        The url for the load on demand data is <strong>&lt;data-url&gt;?node=&lt;node-id&gt;</strong>. So, for node 23  this would be
-        <strong>/nodes/?node=23</strong>.
-    </li>
-</ul>
-
-<h3>first level of data</h3>
-
-{% highlight js %}
-[
-    {
-        "name": "Saurischia",
-        "id": 1,
-        "load_on_demand": true
-    },
-    {
-        "name": "Ornithischians",
-        "id": 23,
-        "load_on_demand": true
-    }
-]
-{% endhighlight %}
-
-<h3>html</h3>
-
-{% highlight html %}
-<div id="tree1" data-url="/nodes/"></div>
-{% endhighlight %}
-
-<h3>javascript</h3>
-
-{% highlight js %}
-$('#tree1').tree({
-    dragAndDrop: true
-});
-{% endhighlight %}

package/docs/_examples/06_autoescape.html

@@ -1,45 +0,0 @@
----
-title: Javascript tree with autoescape
-js: examples/autoescape.js
----
-
-<p class="flex justify-between">
-    <a href="../05_load_on_demand/">&laquo; Example 5</a>
-    <a href="../07_autoscroll/">Example 7 &raquo;</a>
-</p>
-
-<h1>Example 6 - autoEscape</h1>
-
-<p>
-    You can put html in the node titles setting the <a href="../index.html#tree-options-autoescape">autoEscape</a> option to <strong>false</strong>.
-</p>
-
-<div id="tree1" class="not-prose"></div>
-
-<h3>html</h3>
-
-{% highlight html %}
-<div id="tree1"></div>
-{% endhighlight %}
-
-<h3>javascript</h3>
-
-{% highlight js %}
-var data = [
-  {
-    name: 'examples',
-      children: [
-        { name: '<a href="example1.html">Example 1</a>' },
-        { name: '<a href="example2.html">Example 2</a>' },
-        '<a href="example3.html">Example </a>'
-      ]
-  }
-];
-
-// set autoEscape to false
-$('#tree1').tree({
-  data: data,
-  autoEscape: false,
-  autoOpen: true
-});
-{% endhighlight %}

package/docs/_examples/07_autoscroll.html

@@ -1,42 +0,0 @@
----
-title: Javascript tree with autoscroll
-js: examples/autoscroll.js
----
-
-<p class="flex justify-between">
-    <a href="../06_autoescape/">&laquo; Example 6</a>
-    <a href="../08_multiple_select/">Example 8 &raquo;</a>
-</p>
-
-<h1>Example 7 - autoscroll</h1>
-
-<div id="scroll-container"><div id="tree1" class="not-prose"></div></div>
-
-<p>
-    This is an example of autoscroll. The tree will scroll automatically if you
-    drag an item outside of the tree. <br />
-    Autoscroll will work automatically. There is no option for it.
-</p>
-
-<h3>html</h3>
-
-{% highlight html %}
-<div id="scroll-container">
-    <div id="tree1"></div>
-</div>
-{% endhighlight %}
-
-<h3>css</h3>
-
-{% highlight css %}
-#scroll-container {
-    height: 200px;
-    overflow-y: scroll;
-    user-select: none;
-}
-{% endhighlight %}
-
-<h3>js</h3>
-
-{% highlight js %} $('#tree1').tree({ data: ExampleData.exampleData }); {%
-endhighlight %}

package/docs/_examples/08_multiple_select.html

@@ -1,60 +0,0 @@
----
-title: Javascript tree with multiple select
-js: examples/multiple_select.js
----
-
-<p class="flex justify-between">
-    <a href="../07_autoscroll/">&laquo; Example 7</a>
-    <a href="../09_custom_html/">Example 9 &raquo;</a>
-</p>
-
-<h1>Example 8 - multiple select</h1>
-
-<p>
-    This example implements multiple select using the following functions and
-    events:
-</p>
-<ul>
-    <li><strong>addToSelection</strong>: add node to selections</li>
-    <li><strong>isNodeSelected</strong>: is this node selected?</li>
-    <li><strong>removeFromSelection</strong>: unselect this node</li>
-    <li>
-        <strong>tree.click event</strong>: this event is fired when a user
-        clicks on a node
-    </li>
-</ul>
-
-<div id="tree1" class="not-prose"></div>
-
-<h3>html</h3>
-
-{% highlight html %}
-<div id="tree1" data-url="/nodes/"></div>
-{% endhighlight %}
-
-<h3>javascript</h3>
-
-{% highlight js %}
-var $tree = $('#tree1');
-
-$tree.tree({
-    data: ExampleData.exampleData,
-    autoOpen: true
-});
-
-$tree.on( 'tree.click', function(e) {
-    // Disable single selection
-    e.preventDefault();
-    var selected_node = e.node;
-
-    if (selected_node.id === undefined) {
-        console.warn('The multiple selection functions require that nodes have an id');
-    }
-
-    if ($tree.tree('isNodeSelected', selected_node)) {
-        $tree.tree('removeFromSelection', selected_node);
-    } else {
-        $tree.tree('addToSelection', selected_node);
-    }
-});
-{% endhighlight %}

package/docs/_examples/09_custom_html.html

@@ -1,61 +0,0 @@
----
-title: Javascript tree with custom html
-js: examples/custom_html.js
----
-
-<p class="flex justify-between">
-    <a href="../08_multiple_select/">&laquo; Example 8</a>
-    <a href="../10_icon_buttons/">Example 10 &raquo;</a>
-</p>
-
-<h1>Example 9 - custom html</h1>
-
-<style>
-    .jqtree-tree .edit {
-        margin-left: 8px;
-        vertical-align: middle;
-    }
-</style>
-<p>
-    This example uses the <strong>onCreateLi</strong> option to create an edit
-    link next to the tree node.
-</p>
-<div id="tree1" class="not-prose"></div>
-
-<h3>html</h3>
-
-{% highlight html %}
-<div id="tree1"></div>
-{% endhighlight %}
-
-<h3>javascript</h3>
-
-{% highlight js %}
-var $tree = $('#tree1');
-
-$tree.tree({
-    data: ExampleData.exampleData,
-    autoOpen: 1,
-    onCreateLi: function(node, $li) {
-        // Append a link to the jqtree-element div.
-        // The link has an url '#node-[id]' and a data property 'node-id'.
-        $li.find('.jqtree-element').append(
-            '<a href="#node-'+ node.id +'" class="edit" data-node-id="'+ node.id +'">edit</a>'
-        );
-    }
-});
-
-// Handle a click on the edit link
-$tree.on( 'click', '.edit', function(e) {
-    // Get the id from the 'node-id' data property
-    var node_id = $(e.target).data('node-id');
-
-    // Get the node from the tree
-    var node = $tree.tree('getNodeById', node_id);
-
-    if (node) {
-        // Display the node name
-        alert(node.name);
-    }
-}
-{% endhighlight %}

package/docs/_examples/10_icon_buttons.html

@@ -1,26 +0,0 @@
----
-title: Use icon toggle buttons
-js: examples/icon_buttons.js
----
-
-<p class="flex justify-between">
-    <a href="../09_custom_html/">&laquo; Example 9</a>
-    <a href="../11_right-to-left/">Example 11 &raquo;</a>
-</p>
-
-<h1>Example 10 - use icon toggle buttons</h1>
-
-<p>
-    You can use the <strong>openedIcon</strong> and <strong>closedIcon</strong> options to use html for
-    the toggle buttons. You can for example use <a href="https://github.com/FortAwesome/Font-Awesome">Fontawesome icons</a>.
-</p>
-<div id="tree1" class="not-prose" data-url="/example_data/"></div>
-
-<h3>javascript</h3>
-
-{% highlight js %}
-$('#tree1').tree({
-    closedIcon: $('<i class="fas fa-arrow-circle-right"></i>'),
-    openedIcon: $('<i class="fas fa-arrow-circle-down"></i>')
-});
-{% endhighlight %}

package/docs/_examples/11_right-to-left.html

@@ -1,25 +0,0 @@
----
-title: Right-to-left support
-js: examples/right-to-left.js
----
-
-<p class="flex justify-between">
-    <a href="../10_icon_buttons/">&laquo; Example 10</a>
-    <a href="../12_button_on_right/">Example 12 &raquo;</a>
-</p>
-
-<h1>Example 11 - right-to-left support</h1>
-
-<p>
-    You can display the tree from right to left with the <strong>rtl</strong> option.
-</p>
-
-<div id="tree1" class="not-prose" data-url="/example_data/"></div>
-
-<h3>javascript</h3>
-
-{% highlight js %}
-$('#tree1').tree({
-    rtl: true
-});
-{% endhighlight %}

package/docs/_examples/12_button_on_right.html

@@ -1,26 +0,0 @@
----
-title: Button on right
-js: examples/button-on-right.js
----
-
-<p class="flex justify-between">
-    <a href="../11_right-to-left/">&laquo; Example 11</a>
-    <a href="../13_drag_outside/">Example 13 &raquo;</a>
-</p>
-
-<h1>Example 12 - button on right</h1>
-
-<p>
-    You can put the toggle button on the right by setting the <strong>buttonLeft</strong> option to <strong>false</strong>.
-</p>
-
-<div id="tree1" class="block-style not-prose" data-url="/example_data/"></div>
-
-<h3>javascript</h3>
-
-{% highlight js %}
-$('#tree1').tree({
-    buttonLeft: false,
-    autoOpen: 0
-});
-{% endhighlight %}

package/docs/_examples/13_drag_outside.html

@@ -1,48 +0,0 @@
----
-title: Drag outside tree
-js: examples/drag-outside.js
----
-
-<p class="flex justify-between">
-    <a href="../12_button_on_right/">&laquo; Example 12</a>
-    <a href="../14_filter/">Example 14 &raquo;</a>
-</p>
-
-<h1>Example 13 - drag node outside tree</h1>
-
-<div id="tree1" class="not-prose" data-url="/example_data/"></div>
-
-<div id="targetDiv">drag here (see the console)</div>
-
-<h3>javascript</h3>
-
-{% highlight js %}
-var targetCollisionDiv = $("#targetDiv");
-
-function isOverTarget(e) {
-    return (
-        e.clientX > targetCollisionDiv.position().left &&
-        e.clientX <
-            targetCollisionDiv.position().left +
-                targetCollisionDiv.width() &&
-        e.clientY > targetCollisionDiv.position().top &&
-        e.clientY <
-            targetCollisionDiv.position().top + targetCollisionDiv.height()
-    );
-}
-
-function handleMove(node, e) {
-    if (isOverTarget(e)) {
-        console.log("the node is over the target div");
-    }
-}
-
-function handleStop(node, e) {
-    console.log("stopped over target: ", isOverTarget(e));
-}
-
-$('#tree1').tree({
-    onDragMove: handleMove,
-    onDragStop: handleStop
-});
-{% endhighlight %}