jqtree 1.5.2 → 1.6.2

package/.eslintrc

@@ -34,6 +34,7 @@
         "jest/no-hooks": "off",
         "jest/no-identical-title": "off",
         "jest/prefer-strict-equal": "off",
+        "jest/require-hook": "off",
         "jest/require-top-level-describe": "off"
     },
     "parserOptions": {

package/.github/workflows/ci.yml

@@ -0,0 +1,54 @@
+name: Continuous integration
+
+on: [push]
+
+jobs:
+    runner-job:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Check out repository code
+              uses: actions/checkout@v2
+            - name: Setup node
+              uses: actions/setup-node@v1
+              with:
+                  node-version: "14"
+            - name: Get yarn cache directory path
+              id: yarn-cache-dir-path
+              run: echo "::set-output name=dir::$(yarn cache dir)"
+            - name: Cache javascript packages
+              uses: actions/cache@v2
+              with:
+                  path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
+                  restore-keys: |
+                      ${{ runner.os }}-yarn-
+            - name: Install packages
+              run: |
+                  yarn --prefer-offline
+            - name: Build
+              run: |
+                  yarn run production
+            - name: Lint
+              run: |
+                  yarn run lint
+            - name: Check types
+              run: |
+                  yarn run tsc
+            - name: Run tests
+              run: |
+                  yarn run clean-coverage
+                  yarn run test
+            - name: Merge coverage
+              run: |
+                  yarn run merge-coverage
+                  yarn run print-coverage
+            - name: Coveralls
+              run: |
+                  yarn run coveralls
+              env:
+                  COVERALLS_REPO_TOKEN: ${{ secrets.github_token }}
+                  COVERALLS_SERVICE_NAME: github
+                  COVERALLS_GIT_COMMIT: ${{ github.sha }}
+                  COVERALLS_GIT_BRANCH: ${{ github.ref }}
+                  COVERALLS_SERVICE_JOB_ID: ${{ github.run_id }}

package/.github/workflows/codeql-analysis.yml

@@ -0,0 +1,28 @@
+name: "CodeQL"
+
+on: [push]
+
+jobs:
+    analyze:
+        name: Analyze
+        runs-on: ubuntu-latest
+
+        strategy:
+            fail-fast: false
+            matrix:
+                language: ["javascript"]
+
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v2
+
+            - name: Initialize CodeQL
+              uses: github/codeql-action/init@v1
+              with:
+                  languages: ${{ matrix.language }}
+
+            - name: Autobuild
+              uses: github/codeql-action/autobuild@v1
+
+            - name: Perform CodeQL Analysis
+              uses: github/codeql-action/analyze@v1

package/README.md

@@ -1,4 +1,4 @@
-[![Travis Status](https://api.travis-ci.org/mbraak/jqTree.svg)](http://travis-ci.org/mbraak/jqTree) [![Coverage Status](https://img.shields.io/coveralls/mbraak/jqTree.svg)](https://coveralls.io/r/mbraak/jqTree)
+![Build](https://github.com/mbraak/jqTree/workflows/Continuous%20integration/badge.svg) [![Coverage Status](https://img.shields.io/coveralls/mbraak/jqTree.svg)](https://coveralls.io/r/mbraak/jqTree)
 
 [![NPM version](https://img.shields.io/npm/v/jqtree.svg)](https://www.npmjs.com/package/jqtree)
 

package/_config.yml

@@ -11,7 +11,7 @@ collections:
     examples:
         output: true
 
-jqtree_version: 1.5.2
+jqtree_version: 1.6.2
 
 # Build settings
 markdown: kramdown

package/_entries/10_changelog.md

@@ -3,6 +3,26 @@ title: Changelog
 name: changelog
 ---
 
+#### 1.6.2 (december 15 2021)
+
+-   Issue #662: fix left alignment for option buttonLeft: false (thanks to Odungern)
+-   Issue #669: restore focus after load on demand (thanks to Jaccoky)
+
+#### 1.6.1 (june 24 2021)
+
+-   Issues #652 and #655: add filter example
+-   Issue #655: add refresh method
+
+#### 1.6.0 (february 9 2021)
+
+-   Issue #647: improve performance of internal node lookup
+    -   Changed: getNodeById doesn't convert strings to numbers anymore
+-   Issue #648: fix drag-and-drop on ie11
+
+##### 1.5.3 (january 12 2021)
+
+-   Issue #640: add startDndDelay option (thanks to Erik van Eykelen)
+
 ##### 1.5.2 (october 25 2020)
 
 -   Issue #621: decrease build size using Rollup

package/_entries/{36_showemptynode.md → 36_showemptyfolder.md}

@@ -1,9 +1,9 @@
 ---
-title: showEmptyNode
-name: options-showemptynode
+title: showEmptyFolder
+name: options-showemptyfolder
 ---
 
-* **true**: A node with empty children is considered a folder
+* **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
@@ -15,12 +15,12 @@ const data = [
     {
         name: 'node1',
         id: 123,
-        childen: []
+        children: []
     }
 ];
 
 $('#tree1').tree({
     data: data,
-    showEmptyNode: true
+    showEmptyFolder: true
 });
 {% endhighlight %}

package/_entries/38_start_dnd_delay.md

@@ -0,0 +1,13 @@
+---
+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/_entries/62_refresh.md

@@ -0,0 +1,12 @@
+---
+title: refresh
+name: functions-refresh
+---
+
+**function refresh();**
+
+Refresh the rendered nodes. In most cases you will not use this, because tree functions will rerender automatically. E.g. The functions `openNode` and `updateNode` rerender automatically.
+
+{% highlight js %}
+$('#tree1').tree('refresh');
+{% endhighlight %}

package/_examples/13_drag_outside.html

@@ -6,7 +6,8 @@ css: example.css
 ---
 
 <p id="nav">
-    <a href="../12_button_on_right/">&laquo; Example 11</a>
+    <a href="../12_button_on_right/">&laquo; Example 12</a>
+    <a href="../14_filter/" class="next">Example 14 &raquo;</a>
 </p>
 
 <h1>Example 13 - drag node outside tree</h1>

package/_examples/14_filter.html

@@ -0,0 +1,113 @@
+---
+title: Filter
+layout: page
+js: examples/filter.js
+css: example.css
+---
+
+<p id="nav">
+    <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>
+<div id="tree1"></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();
+
+    if (!searchTerm) {
+        foundMatch = false;
+
+        tree.iterate((node) => {
+            node['openForMatch'] = false;
+            node["matches"] = false;
+            return true;
+        });
+
+        $tree.tree("refresh");
+        return;
+    }
+
+    const tree = $tree.tree("getTree");
+    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/_layouts/base.html

@@ -13,28 +13,6 @@
         <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" />
-
-        <script>
-            ;(function(i, s, o, g, r, a, m) {
-                i["GoogleAnalyticsObject"] = r
-                ;(i[r] =
-                    i[r] ||
-                    function() {
-                        ;(i[r].q = i[r].q || []).push(arguments)
-                    }),
-                    (i[r].l = 1 * new Date())
-                ;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
-                a.async = 1
-                a.src = g
-                m.parentNode.insertBefore(a, m)
-            })(window, document, "script", "//www.google-analytics.com/analytics.js", "ga")
-
-            ga("create", "UA-33742133-1", "auto")
-            ga("require", "displayfeatures")
-            ga("require", "linkid", "linkid.js")
-            ga("send", "pageview")
-        </script>
-
         {% if page.css %}
         <link rel="stylesheet" href="{{ site.baseurl }}/static/{{ page.css }}" />
         {% endif %}
@@ -44,7 +22,7 @@
     </body>
 
     <script src="{{ site.baseurl }}/static/bower_components/jquery/dist/jquery.min.js"></script>
-    <script src="{{ site.baseurl }}/build/tree.jquery.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>

package/babel.config.json

@@ -0,0 +1,11 @@
+{
+    "presets": ["@babel/preset-typescript", "@babel/preset-env"],
+    "env": {
+        "test": {
+            "presets": [
+                "@babel/preset-typescript",
+                ["@babel/preset-env", { "targets": { "node": "current" } }]
+            ]
+        }
+    }
+}

package/babel.coverage.config.json

@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/preset-typescript", "@babel/preset-env"],
+    "plugins": ["istanbul"]
+}

package/bower.json

@@ -1,6 +1,6 @@
 {
     "name": "jqTree",
-    "version": "1.5.2",
+    "version": "1.6.2",
     "main": ["jqtree.css", "jqtree-circle.png", "tree.jquery.js"],
     "dependencies": {
         "jquery": ">=1.9"

package/jest-browser.config.js

@@ -8,9 +8,6 @@ module.exports = {
     preset: "jest-playwright-preset",
     testRegex: "\\/src\\/playwright\\/.*\\.test\\.ts",
     setupFilesAfterEnv: ["expect-playwright", "givens/setup.js"],
-    transform: {
-        "^.+\\.ts$": "ts-jest",
-    },
     coveragePathIgnorePatterns: [
         "<rootDir>/node_modules/",
         "<rootDir>/src/playwright/",

package/jest-jsdom.config.js

@@ -5,11 +5,10 @@ module.exports = {
         "<rootDir>/_site/",
         "<rootDir>/static/",
     ],
-    preset: "ts-jest",
     setupFilesAfterEnv: [
         "<rootDir>/src/test/support/setupTests.ts",
         "givens/setup.js",
-        "jest-extended",
+        "jest-extended/all",
     ],
     testEnvironment: "jsdom",
     testRegex: "\\/src\\/test\\/.*\\.test\\.ts",

package/jqtree.css

@@ -60,10 +60,13 @@ ul.jqtree-tree {
     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.jqtree-title-folder {
+    ul.jqtree-tree .jqtree-title-button-left.jqtree-title-folder {
             margin-left: 0;
         }
 

package/jqtree.postcss

@@ -59,6 +59,9 @@ ul.jqtree-tree {
     .jqtree-title {
         color: #1c4257;
         vertical-align: middle;
+    }
+
+    .jqtree-title-button-left {
         margin-left: 1.5em;
 
         &.jqtree-title-folder {