jqtree 1.6.2 → 1.6.3

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/{_examples → docs/_examples}/14_filter.html

@@ -1,21 +1,19 @@
 ---
 title: Filter
-layout: page
 js: examples/filter.js
-css: example.css
 ---
 
-<p id="nav">
+<p class="flex justify-between">
     <a href="../13_drag_outside/">&laquo; Example 13</a>
 </p>
 
 <h1>Example 14 - filter</h1>
 
-<div>
-    <input id="search-term" autofocus></input>
-    <button id="search">Search</button>
+<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"></div>
+<div id="tree1" class="not-prose"></div>
 
 <h3>javascript</h3>
 
@@ -41,6 +39,7 @@ $tree.tree({
 
 $("#search").on("click", () => {
     const searchTerm = $("#search-term").val().toLowerCase();
+    const tree = $tree.tree("getTree");
 
     if (!searchTerm) {
         foundMatch = false;
@@ -55,7 +54,6 @@ $("#search").on("click", () => {
         return;
     }
 
-    const tree = $tree.tree("getTree");
     foundMatch = false;
 
     tree.iterate((node) => {
@@ -88,7 +86,7 @@ $("#search").on("click", () => {
 <h3>html</h3>
 
 {% highlight html %}
-<div>
+<div">
     <input id="search-term" autofocus></input>
     <button id="search">Search</button>
 </div>

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/{_layouts/base.html → docs/_layouts/page.html}

@@ -5,17 +5,11 @@
         <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/bower_components/bootstrap/dist/css/bootstrap.min.css" />
-        <link
-            rel="stylesheet"
-            href="{{ site.baseurl }}/static/bower_components/bootstrap/dist/css/bootstrap-theme.min.css"
-        />
-        <link rel="stylesheet" href="{{ site.baseurl }}/jqtree.css" />
         <link rel="stylesheet" href="{{ site.baseurl }}/static/monokai.css" />
         <link rel="stylesheet" href="{{ site.baseurl }}/static/bower_components/fontawesome/css/all.min.css" />
-        {% if page.css %}
-        <link rel="stylesheet" href="{{ site.baseurl }}/static/{{ page.css }}" />
-        {% endif %}
+        <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 }}
@@ -23,11 +17,10 @@
 
     <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/bootstrap/dist/js/bootstrap.min.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>
+        <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;
+}

package/docs/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "jqtree_documentation",
+  "private": true,
+  "scripts": {
+    "jekyll-build": "bundle exec jekyll build",
+    "jekyll-serve": "bundle exec jekyll serve",
+    "build_docs_css": "pnpm tailwind && pnpm build_example_css && pnpm copy_static",
+    "tailwind": "tailwindcss -i documentation.css -o static/documentation.css",
+    "build_example_css": "postcss -o static/example.css static/example.postcss",
+    "copy_static": "cp ../tree.jquery.js . && cp ../jqtree.css ."
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.2",
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.14",
+    "postcss-cli": "^9.1.0",
+    "postcss-import": "^14.1.0",
+    "postcss-load-config": "^4.0.1",
+    "postcss-nested": "^5.0.6",
+    "tailwindcss": "^3.1.2"
+  }
+}