jqtree 1.6.0 → 1.6.3

package/{_examples → docs/_examples}/04_save_state.html

@@ -1,18 +1,16 @@
 ---
 title: Save the state in javascript tree
-layout: page
 js: examples/save_state.js
-css: example.css
 ---
 
-<p id="nav">
+<p class="flex justify-between">
     <a href="../03_drag_and_drop/">&laquo; Example 3</a>
-    <a href="../05_load_on_demand/" class="next">Example 5 &raquo;</a>
+    <a href="../05_load_on_demand/">Example 5 &raquo;</a>
 </p>
 
 <h1>Example 4 - Save the state</h1>
 
-<div id="tree1" data-url="/example_data/"></div>
+<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.

package/{_examples → docs/_examples}/05_load_on_demand.html

@@ -1,19 +1,17 @@
 ---
 title: Load nodes on demand from the server in javascript tree
-layout: page
 js: examples/load_on_demand.js
-css: example.css
 ---
 
-<p id="nav">
+<p class="flex justify-between">
     <a href="../04_save_state/">&laquo; Example 4</a>
-    <a href="../06_autoescape/" class="next">Example 6 &raquo;</a>
+    <a href="../06_autoescape/">Example 6 &raquo;</a>
 </p>
 
 <h1>Example 5 - Load nodes on demand from the server</h1>
 
 
-<div id="tree1" data-url="/nodes/"></div>
+<div id="tree1" class="not-prose" data-url="/nodes/"></div>
 
 <p>
     In this example, the data is loaded on demand from the server.

package/{_examples → docs/_examples}/06_autoescape.html

@@ -1,13 +1,11 @@
 ---
 title: Javascript tree with autoescape
-layout: page
 js: examples/autoescape.js
-css: example.css
 ---
 
-<p id="nav">
+<p class="flex justify-between">
     <a href="../05_load_on_demand/">&laquo; Example 5</a>
-    <a href="../07_autoscroll/" class="next">Example 7 &raquo;</a>
+    <a href="../07_autoscroll/">Example 7 &raquo;</a>
 </p>
 
 <h1>Example 6 - autoEscape</h1>
@@ -16,7 +14,7 @@ css: example.css
     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"></div>
+<div id="tree1" class="not-prose"></div>
 
 <h3>html</h3>
 

package/{_examples → docs/_examples}/07_autoscroll.html

@@ -1,18 +1,16 @@
 ---
 title: Javascript tree with autoscroll
-layout: page
 js: examples/autoscroll.js
-css: example.css
 ---
 
-<p id="nav">
+<p class="flex justify-between">
     <a href="../06_autoescape/">&laquo; Example 6</a>
-    <a href="../08_multiple_select/" class="next">Example 8 &raquo;</a>
+    <a href="../08_multiple_select/">Example 8 &raquo;</a>
 </p>
 
 <h1>Example 7 - autoscroll</h1>
 
-<div id="scroll-container"><div id="tree1"></div></div>
+<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

package/{_examples → docs/_examples}/08_multiple_select.html

@@ -1,13 +1,11 @@
 ---
 title: Javascript tree with multiple select
-layout: page
 js: examples/multiple_select.js
-css: example.css
 ---
 
-<p id="nav">
+<p class="flex justify-between">
     <a href="../07_autoscroll/">&laquo; Example 7</a>
-    <a href="../09_custom_html/" class="next">Example 9 &raquo;</a>
+    <a href="../09_custom_html/">Example 9 &raquo;</a>
 </p>
 
 <h1>Example 8 - multiple select</h1>
@@ -26,7 +24,7 @@ css: example.css
     </li>
 </ul>
 
-<div id="tree1"></div>
+<div id="tree1" class="not-prose"></div>
 
 <h3>html</h3>
 

package/{_examples → docs/_examples}/09_custom_html.html

@@ -1,13 +1,11 @@
 ---
 title: Javascript tree with custom html
-layout: page
 js: examples/custom_html.js
-css: example.css
 ---
 
-<p id="nav">
+<p class="flex justify-between">
     <a href="../08_multiple_select/">&laquo; Example 8</a>
-    <a href="../10_icon_buttons/" class="next">Example 10 &raquo;</a>
+    <a href="../10_icon_buttons/">Example 10 &raquo;</a>
 </p>
 
 <h1>Example 9 - custom html</h1>
@@ -22,7 +20,7 @@ css: example.css
     This example uses the <strong>onCreateLi</strong> option to create an edit
     link next to the tree node.
 </p>
-<div id="tree1"></div>
+<div id="tree1" class="not-prose"></div>
 
 <h3>html</h3>
 

package/{_examples → docs/_examples}/10_icon_buttons.html

@@ -1,13 +1,11 @@
 ---
 title: Use icon toggle buttons
-layout: page
 js: examples/icon_buttons.js
-css: example.css
 ---
 
-<p id="nav">
+<p class="flex justify-between">
     <a href="../09_custom_html/">&laquo; Example 9</a>
-    <a href="../11_right-to-left/" class="next">Example 11 &raquo;</a>
+    <a href="../11_right-to-left/">Example 11 &raquo;</a>
 </p>
 
 <h1>Example 10 - use icon toggle buttons</h1>
@@ -16,7 +14,7 @@ css: example.css
     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" data-url="/example_data/"></div>
+<div id="tree1" class="not-prose" data-url="/example_data/"></div>
 
 <h3>javascript</h3>
 

package/{_examples → docs/_examples}/11_right-to-left.html

@@ -1,13 +1,11 @@
 ---
 title: Right-to-left support
-layout: page
 js: examples/right-to-left.js
-css: example.css
 ---
 
-<p id="nav">
+<p class="flex justify-between">
     <a href="../10_icon_buttons/">&laquo; Example 10</a>
-    <a href="../12_button_on_right/" class="next">Example 12 &raquo;</a>
+    <a href="../12_button_on_right/">Example 12 &raquo;</a>
 </p>
 
 <h1>Example 11 - right-to-left support</h1>
@@ -16,7 +14,7 @@ css: example.css
     You can display the tree from right to left with the <strong>rtl</strong> option.
 </p>
 
-<div id="tree1" data-url="/example_data/"></div>
+<div id="tree1" class="not-prose" data-url="/example_data/"></div>
 
 <h3>javascript</h3>
 

package/{_examples → docs/_examples}/12_button_on_right.html

@@ -1,13 +1,11 @@
 ---
 title: Button on right
-layout: page
 js: examples/button-on-right.js
-css: example.css
 ---
 
-<p id="nav">
+<p class="flex justify-between">
     <a href="../11_right-to-left/">&laquo; Example 11</a>
-    <a href="../13_drag_outside/" class="next">Example 13 &raquo;</a>
+    <a href="../13_drag_outside/">Example 13 &raquo;</a>
 </p>
 
 <h1>Example 12 - button on right</h1>
@@ -16,7 +14,7 @@ css: example.css
     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" data-url="/example_data/"></div>
+<div id="tree1" class="block-style not-prose" data-url="/example_data/"></div>
 
 <h3>javascript</h3>
 

package/docs/_examples/13_drag_outside.html

@@ -0,0 +1,48 @@
+---
+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 %}

package/docs/_examples/14_filter.html

@@ -0,0 +1,111 @@
+---
+title: Filter
+js: examples/filter.js
+---
+
+<p class="flex justify-between">
+    <a href="../13_drag_outside/">&laquo; Example 13</a>
+</p>
+
+<h1>Example 14 - filter</h1>
+
+<div class="pb-6">
+    <input id="search-term" class="shadow-sm border px-4 py-1 focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md mr-4" autofocus></input>
+    <button id="search" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Search</button>
+</div>
+<div id="tree1" class="not-prose"></div>
+
+<h3>javascript</h3>
+
+{% highlight js %}
+const $tree = $("#tree1");
+
+let foundMatch = false;
+
+$tree.tree({
+    autoOpen: false,
+    data: ExampleData.exampleData,
+    useContextMenu: false,
+    onCreateLi: (node, $el) => {
+        if (foundMatch && !node.openForMatch && !node.parent.matches) {
+            $el.addClass("hidden-node");
+        }
+
+        if (node.matches) {
+            $el.addClass("highlight-node");
+        }
+    },
+});
+
+$("#search").on("click", () => {
+    const searchTerm = $("#search-term").val().toLowerCase();
+    const tree = $tree.tree("getTree");
+
+    if (!searchTerm) {
+        foundMatch = false;
+
+        tree.iterate((node) => {
+            node['openForMatch'] = false;
+            node["matches"] = false;
+            return true;
+        });
+
+        $tree.tree("refresh");
+        return;
+    }
+
+    foundMatch = false;
+
+    tree.iterate((node) => {
+        const matches = node.name.toLowerCase().includes(searchTerm);
+        node["openForMatch"] = matches;
+        node["matches"] = matches;
+
+        if (matches) {
+            foundMatch = true;
+
+            if (node.isFolder()) {
+                node.is_open = true;
+            }
+
+            let parent = node.parent;
+            while (parent) {
+                parent["openForMatch"] = true;
+                parent.is_open = true;
+                parent = parent.parent;
+            }
+        }
+
+        return true;
+    });
+
+    $tree.tree("refresh");
+});
+{% endhighlight %}
+
+<h3>html</h3>
+
+{% highlight html %}
+<div">
+    <input id="search-term" autofocus></input>
+    <button id="search">Search</button>
+</div>
+<div id="tree1"></div>
+{% endhighlight %}
+
+<h3>css</h3>
+
+{% highlight css %}
+.hidden-node {
+    display: none;
+}
+
+.highlight-node > .jqtree-element > .jqtree-title {
+    font-weight: bold;
+}
+
+#search-term {
+    margin-bottom: 16px;
+    margin-right: 8px;
+}
+{% endhighlight %}

package/docs/_layouts/example.html

@@ -0,0 +1,7 @@
+---
+layout: page
+---
+
+<div class="mx-auto max-w-8xl mt-4 prose px-8">
+  {{ content }}
+</div>

package/docs/_layouts/page.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="JqTree is a jQuery widget for displaying a tree structure in html" />
+        <link rel="stylesheet" href="{{ site.baseurl }}/static/monokai.css" />
+        <link rel="stylesheet" href="{{ site.baseurl }}/static/bower_components/fontawesome/css/all.min.css" />
+        <link rel="stylesheet" href="{{ site.baseurl }}/static/documentation.css" />
+        <link rel="stylesheet" href="{{ site.baseurl }}/jqtree.css" />
+        <link rel="stylesheet" href="{{ site.baseurl }}/static/example.css" />
+    </head>
+    <body>
+        {{ content }}
+    </body>
+
+    <script src="{{ site.baseurl }}/static/bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="{{ site.baseurl }}/tree.jquery.js"></script>
+    <script src="{{ site.baseurl }}/static/bower_components/jquery-mockjax/dist/jquery.mockjax.js"></script>
+    <script src="{{ site.baseurl }}/static/example_data.js"></script>
+
+    {% if page.js %}
+        <script src="{{ site.baseurl }}/static/{{ page.js }}"></script>
+    {% endif %}
+</html>

package/docs/documentation.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/docs/index.html

@@ -0,0 +1,65 @@
+---
+layout: page
+js: documentation.js
+---
+
+<div class="mx-auto max-w-8xl">
+    <div class="hidden lg:block fixed inset-0 px-8 left-[max(0px,calc(50%-45rem))] right-auto w-[19.5rem] overflow-y-auto">
+        <nav>
+            <ul>
+                {% assign level = 0 %}
+
+                {% for entry in site.entries %}
+                    {% if entry.section %}
+                        {% if level == 1 %}
+                                </ul>
+                            </li>
+                        {% endif %}
+                        <li class="mt-8">
+                            <a class="mb-3 block font-semibold text-slate-700 hover:text-slate-900" href="#{{ entry.name }}">{{ entry.title }}</a>
+                            <ul class="space-y-2 border-l border-slate-100">
+                        {% assign level = 1 %}
+                    {% else %}
+                        <li>
+                            <a class="block border-l pl-4 border-transparent hover:border-slate-400 text-slate-700 hover:text-slate-900" href="#{{ entry.name }}">{{ entry.title }}</a>
+                        </li>
+                    {% endif %}
+                {% endfor %}
+
+                {% if level == 1 %}
+                        </ul>
+                    </li>
+                {% endif %}
+            </ul>
+        </nav>
+    </div>
+    <div class="lg:pl-[19.5rem]">
+        <div class="bg-gray-50 text-center pt-16 pb-24 px-8">
+            <h1 class="text-gray-900 tracking-tight font-extrabold text-6xl">
+                <span class="text-indigo-600">jqTree</span> is a jQuery widget for displaying a tree
+            </h1>
+            <p class="mt-5 text-xl text-gray-500">
+                It supports json data, loading via ajax and drag-and-drop.
+            </p>
+            <div class="mt-8">
+                <a class="rounded-md shadow text-lg text-white px-10 py-4 bg-indigo-600 hover:bg-indigo-700" href="https://github.com/mbraak/jqTree/tarball/master">Download jqTree</a>
+            </div>
+        </div>
+        <div class="px-8 py-8">
+            {% for entry in site.entries %}
+                {% if entry.hide_title %}
+                    <div id="{{ entry.name }}"></div>
+                {% elsif entry.section %}
+                    <h3 class="text-4xl mb-8 font-extrabold text-slate-900 tracking-tight" id="{{ entry.name }}">{{ entry.title }}</h3>
+                {% else %}
+                    <h4 class="text-xl mb-4 font-bold text-slate-900 tracking-tight" id="{{ entry.name }}">{{ entry.title }}</h4>
+                {% endif %}
+                {% if entry.output.size > 1 %}
+                    <div class="mb-16 text-slate-700 doc-entry prose">
+                        {{ entry.output }}
+                    </div>
+                {% endif %}
+            {% endfor %}
+        </div>
+    </div>
+</div>

package/docs/jqtree.css

@@ -0,0 +1,189 @@
+ul.jqtree-tree {
+    list-style: none outside;
+    margin-left: 0;
+    margin-bottom: 0;
+    padding: 0;
+}
+
+    ul.jqtree-tree.jqtree-dnd {
+        touch-action: none;
+    }
+
+    ul.jqtree-tree ul.jqtree_common {
+        list-style: none outside;
+        margin-left: 12px;
+        margin-right: 0;
+        margin-bottom: 0;
+        padding: 0;
+        display: block;
+    }
+
+    ul.jqtree-tree li.jqtree-closed > ul.jqtree_common {
+        display: none;
+    }
+
+    ul.jqtree-tree li.jqtree_common {
+        clear: both;
+        list-style-type: none;
+    }
+
+    ul.jqtree-tree .jqtree-toggler {
+        border-bottom: none;
+        color: #333;
+        text-decoration: none;
+        vertical-align: middle;
+    }
+
+    ul.jqtree-tree .jqtree-toggler:hover {
+            color: #000;
+            text-decoration: none;
+        }
+
+    ul.jqtree-tree .jqtree-toggler.jqtree-closed {
+            background-position: 0 0;
+        }
+
+    ul.jqtree-tree .jqtree-toggler.jqtree-toggler-left {
+            margin-right: 0.5em;
+        }
+
+    ul.jqtree-tree .jqtree-toggler.jqtree-toggler-right {
+            margin-left: 0.5em;
+        }
+
+    ul.jqtree-tree .jqtree-element {
+        cursor: pointer;
+        position: relative;
+        display: flex;
+    }
+
+    ul.jqtree-tree .jqtree-title {
+        color: #1c4257;
+        vertical-align: middle;
+    }
+
+    ul.jqtree-tree .jqtree-title-button-left {
+        margin-left: 1.5em;
+    }
+
+    ul.jqtree-tree .jqtree-title-button-left.jqtree-title-folder {
+            margin-left: 0;
+        }
+
+    ul.jqtree-tree li.jqtree-folder {
+        margin-bottom: 4px;
+    }
+
+    ul.jqtree-tree li.jqtree-folder.jqtree-closed {
+            margin-bottom: 1px;
+        }
+
+    ul.jqtree-tree li.jqtree-ghost {
+        position: relative;
+        z-index: 10;
+        margin-right: 10px;
+    }
+
+    ul.jqtree-tree li.jqtree-ghost span {
+            display: block;
+        }
+
+    ul.jqtree-tree li.jqtree-ghost span.jqtree-circle {
+            border: solid 2px #0000ff;
+            border-radius: 100px;
+            height: 8px;
+            width: 8px;
+            position: absolute;
+            top: -4px;
+            left: -6px;
+            box-sizing: border-box;
+        }
+
+    ul.jqtree-tree li.jqtree-ghost span.jqtree-line {
+            background-color: #0000ff;
+            height: 2px;
+            padding: 0;
+            position: absolute;
+            top: -1px;
+            left: 2px;
+            width: 100%;
+        }
+
+    ul.jqtree-tree li.jqtree-ghost.jqtree-inside {
+            margin-left: 48px;
+        }
+
+    ul.jqtree-tree span.jqtree-border {
+        position: absolute;
+        display: block;
+        left: -2px;
+        top: 0;
+        border: solid 2px #0000ff;
+        border-radius: 6px;
+        margin: 0;
+        box-sizing: content-box;
+    }
+
+    ul.jqtree-tree li.jqtree-selected > .jqtree-element,
+    ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover {
+        background-color: #97bdd6;
+        background: linear-gradient(#bee0f5, #89afca);
+        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+    }
+
+    ul.jqtree-tree .jqtree-moving > .jqtree-element .jqtree-title {
+        outline: dashed 1px #0000ff;
+    }
+
+ul.jqtree-tree.jqtree-rtl {
+    direction: rtl;
+}
+
+ul.jqtree-tree.jqtree-rtl ul.jqtree_common {
+        margin-left: 0;
+        margin-right: 12px;
+    }
+
+ul.jqtree-tree.jqtree-rtl .jqtree-toggler {
+        margin-left: 0.5em;
+        margin-right: 0;
+    }
+
+ul.jqtree-tree.jqtree-rtl .jqtree-title {
+        margin-left: 0;
+        margin-right: 1.5em;
+    }
+
+ul.jqtree-tree.jqtree-rtl .jqtree-title.jqtree-title-folder {
+            margin-right: 0;
+        }
+
+ul.jqtree-tree.jqtree-rtl li.jqtree-ghost {
+        margin-right: 0;
+        margin-left: 10px;
+    }
+
+ul.jqtree-tree.jqtree-rtl li.jqtree-ghost span.jqtree-circle {
+            right: -6px;
+        }
+
+ul.jqtree-tree.jqtree-rtl li.jqtree-ghost span.jqtree-line {
+            right: 2px;
+        }
+
+ul.jqtree-tree.jqtree-rtl li.jqtree-ghost.jqtree-inside {
+            margin-left: 0;
+            margin-right: 48px;
+        }
+
+ul.jqtree-tree.jqtree-rtl span.jqtree-border {
+        right: -2px;
+    }
+
+span.jqtree-dragging {
+    color: #fff;
+    background: #000;
+    opacity: 0.6;
+    cursor: pointer;
+    padding: 2px 8px;
+}