jqtree 1.6.2 → 1.7.0

package/{_entries → docs/_entries}/04_demo.html

@@ -3,8 +3,6 @@ title: Demo
 name: demo
 ---
 
-<div class="row">
-    <div class="col-md-6">
 {% highlight js %}
 var data = [
     {
@@ -27,8 +25,4 @@ $('#tree1').tree({
     dragAndDrop: true
 });
 {% endhighlight %}
-    </div>
-    <div class="col-md-6">
-        <div id="tree1"></div>
-    </div>
-</div>
+<div id="tree1" class="not-prose"></div>

package/{_entries → docs/_entries}/10_changelog.md

@@ -3,6 +3,19 @@ title: Changelog
 name: changelog
 ---
 
+#### 1.7.0 (december 23 2022)
+
+Small breaking change: this release changes the definition of getPreviousNode and getNextNode.
+
+-   Issue #704: dispatch the tree.load_data after initializing the tree
+-   Issue #706: change the functions for getting the next and previous nodes.
+    -   Rename getPreviousNode to getPreviousVisibleNode and getNextNode to getNextVisibleNode.
+    -   Add new getPreviousNode and getNextNode functions that ignores if a node is visible.
+
+#### 1.6.3 (august 7 2022)
+
+-   Issue # 692: openFolderDelay is false disables opening folders during drag and drop
+
 #### 1.6.2 (december 15 2021)
 
 -   Issue #662: fix left alignment for option buttonLeft: false (thanks to Odungern)

package/{_entries → docs/_entries}/23_oncanmoveto.md

@@ -9,8 +9,8 @@ You can override this function to determine if a node can be moved to a certain
 $('#tree1').tree({
     data: data,
     dragAndDrop: true,
-    onCanMoveTo: function(moved_node, target_node, position) {
-        if (target_node.is_menu) {
+    onCanMoveTo: function(movedNode, targetNode, position) {
+        if (targetNode.isMenu) {
             // Example: can move inside menu, not before or after
             return (position == 'inside');
         }

package/{_entries → docs/_entries}/25_oncreateli.md

@@ -9,12 +9,12 @@ The function is called with the following parameters:
 
 * **node**: Node element
 * **$li**: Jquery li element
-* **is_selected**: is the node selected (true/false) 
+* **isSelected**: is the node selected (true/false) 
 
 {% highlight js %}
 $('#tree1').tree({
     data: data,
-    onCreateLi: function(node, $li, is_selected) {
+    onCreateLi: function(node, $li, isSelected) {
         // Add 'icon' span before title
         $li.find('.jqtree-title').before('<span class="icon"></span>');
     }

package/{_entries → docs/_entries}/30_onloading.md

@@ -8,10 +8,10 @@ The onLoading parameter is called when the tree data is loading. This gives us t
 Callback looks like this:
 
 ```js
-function (is_loading, node, $el)
+function (isLoading, node, $el)
 ```
 
-* **is_loading**: boolean
+* **isLoading**: boolean
   * true: data is loading
   * false: data is loaded
 * **node**:

package/{_entries → docs/_entries}/32_openfolderdelay.md

@@ -5,6 +5,8 @@ name: options-openfolderdelay
 
 Set the delay for opening a folder during drag-and-drop. The delay is in milliseconds. The default is 500 ms.
 
+* Setting the option to `false` disables opening folders during drag-and-drop. 
+
 {% highlight js %}
 $('#tree1').tree({
     dataUrl: '/my/data/',

package/{_entries → docs/_entries}/42_addparentnode.md

@@ -3,7 +3,7 @@ title: addParentNode
 name: functions-addparentnode
 ---
 
-**function addParentNode(new_node_info, existing_node);**
+**function addParentNode(newNodeInfo, existingNode);**
 
 Add a new node as parent of this existing node.
 

package/{_entries → docs/_entries}/43_addnodeafter.md

@@ -3,7 +3,7 @@ title: addNodeAfter
 name: functions-addnodeafter
 ---
 
-**function addNodeAfter(new_node_info, existing_node);**
+**function addNodeAfter(newNodeInfo, existingNode);**
 
 Add a new node after this existing node.
 

package/{_entries → docs/_entries}/44_addnodebefore.md

@@ -3,6 +3,6 @@ title: addNodeBefore
 name: functions-addnodebefore
 ---
 
-**function addNodeBefore(new_node_info, existing_node);**
+**function addNodeBefore(newNodeInfo, existingNode);**
 
 Add a new node before this existing node.

package/{_entries → docs/_entries}/45_appendnode.md

@@ -3,12 +3,12 @@ title: appendNode
 name: functions-appendnode
 ---
 
-**function appendNode(new_node_info, parent_node);**
+**function appendNode(newNodeInfo, parentNode);**
 
-Add a node to this parent node. If **parent_node** is empty, then the new node becomes a root node.
+Add a node to this parent node. If **parentNode** is empty, then the new node becomes a root node.
 
 {% highlight js %}
-var parent_node = $tree.tree('getNodeById', 123);
+var parentNode = $tree.tree('getNodeById', 123);
 
 $tree.tree(
     'appendNode',
@@ -16,7 +16,7 @@ $tree.tree(
         name: 'new_node',
         id: 456
     },
-    parent_node
+    parentNode
 );
 {% endhighlight %}
 
@@ -45,6 +45,6 @@ $tree.tree(
             { name: 'child2', id: 458 }
         ]
     },
-    parent_node
+    parentNode
 );
 {% endhighlight %}

package/{_entries → docs/_entries}/50_getnodebyhtmlelement.md

@@ -3,9 +3,9 @@ title: getNodeByHtmlElement
 name: functions-getnodebyhtmlelement
 ---
 
-**function getNodeByHtmlElement(html_element);**
+**function getNodeByHtmlElement(htmlElement);**
 
-Get a tree node by an html element. The html element should be:
+Get a tree node by an html element. The html htmlElement should be:
 
 * The `li` element for the node
 * Or, an element inside the `li`. For example the `span` for the title.

package/{_entries → docs/_entries}/53_gettree.md

@@ -8,5 +8,5 @@ name: functions-gettree
 Get the root node of the tree.
 
 {% highlight js %}
-var tree_data = $('#tree1').tree('getTree');
+var treeData = $('#tree1').tree('getTree');
 {% endhighlight %}

package/{_entries → docs/_entries}/54_isdragging.md

@@ -8,5 +8,5 @@ name: functions-isdragging
 Is currently a node being dragged for drag-and-drop? Returns `True` or `False`.
 
 {% highlight js %}
-const is_dragging = $('#tree1').tree('isDragging');
+const isDragging = $('#tree1').tree('isDragging');
 {% endhighlight %}

package/{_entries → docs/_entries}/55_loaddata.md

@@ -5,7 +5,7 @@ name: functions-loaddata
 
 **function loadData(data);**
 
-**function loadData(data, parent_node);**
+**function loadData(data, parentNode);**
 
 Load data in the tree. The data is array of nodes.
 
@@ -13,7 +13,7 @@ You can **replace the whole tree** or you can **load a subtree**.
 
 {% highlight js %}
 // Assuming the tree exists
-var new_data = [
+var newData = [
     {
         name: 'node1',
         children: [
@@ -28,7 +28,7 @@ var new_data = [
         ]
     }
 ];
-$('#tree1').tree('loadData', new_data);
+$('#tree1').tree('loadData', newData);
 {% endhighlight %}
 
 Load a subtree:

package/{_entries → docs/_entries}/56_loaddatafromurl.md

@@ -5,9 +5,9 @@ name: functions-loaddatafromurl
 
 **function loadDataFromUrl(url);**
 
-**function loadDataFromUrl(url, parent_node);**
+**function loadDataFromUrl(url, parentNode);**
 
-**function loadDataFromUrl(parent_node);**
+**function loadDataFromUrl(parentNode);**
 
 Load data in the tree from an url using ajax. You can **replace the whole tree** or you can **load a subtree**.
 
@@ -39,9 +39,9 @@ $tree.tree('loadDataFromUrl', node);
 
 You can also add an **on_finished** callback parameter that will be called when the data is loaded:
 
-**function loadDataFromUrl(url, parent_node, on_finished);**
+**function loadDataFromUrl(url, parentNode, onFinished);**
 
-**function loadDataFromUrl(parent_node, on_finished);**
+**function loadDataFromUrl(parentNode, onFinished);**
 
 {% highlight js %}
 $('#tree1').tree(

package/{_entries → docs/_entries}/58_movenode.md

@@ -3,13 +3,13 @@ title: moveNode
 name: functions-movenode
 ---
 
-**function moveNode(node, target_node, position);**
+**function moveNode(node, targetNode, position);**
 
 Move a node. Position can be 'before', 'after' or 'inside'.
 
 {% highlight js %}
 var node = $tree.tree('getNodeById', 1);
-var target_node = $tree.tree('getNodeById', 2);
+var targetNode = $tree.tree('getNodeById', 2);
 
-$tree.tree('moveNode', node, target_node, 'after');
+$tree.tree('moveNode', node, targetNode, 'after');
 {% endhighlight %}

package/{_entries → docs/_entries}/60_opennode.md

@@ -7,14 +7,14 @@ name: functions-opennode
 
 **function openNode(node, slide);**
 
-**function openNode(node, on_finished);**
+**function openNode(node, onFinished);**
 
-**function openNode(node, slide, on_finished);**
+**function openNode(node, slide, onFinished);**
 
 Open this node. The node must have child nodes.
 
 Parameter **slide (optional)**: open the node using a slide animation (default is true).
-Parameter **on_finished (optional)**: callback when the node is opened; this also works for nodes that are loaded lazily
+Parameter **onFinished (optional)**: callback when the node is opened; this also works for nodes that are loaded lazily
 
 {% highlight js %}
 // create tree

package/docs/_entries/61_prependnode.md

@@ -0,0 +1,21 @@
+---
+title: prependNode
+name: functions-prependnode
+---
+
+**function prependNode(newNodeInfo, parentNode);**
+
+Add a node to this parent node as the first child. If **parentNode** is empty, then the new node becomes a root node.
+
+{% highlight js %}
+var parentNode = $tree.tree('getNodeById', 123);
+
+$tree.tree(
+    'prependNode',
+    {
+        name: 'new_node',
+        id: 456
+    },
+    parentNode
+);
+{% endhighlight %}

package/{_entries → docs/_entries}/63_reload.md

@@ -5,11 +5,11 @@ name: functions-reload
 
 **function reload();**
 
-**function reload(on_finished);**
+**function reload(onFinished);**
 
 Reload data from the server.
 
-* Call `on_finished` when the data is loaded.
+* Call `onFinished` when the data is loaded.
 
 {% highlight js %}
 $('#tree1').tree('reload');

package/{_entries → docs/_entries}/71_updatenode.md

@@ -28,7 +28,7 @@ $tree.tree(
     {
         name: 'new name',
         id: 1,
-        other_property: 'abc'
+        otherProperty: 'abc'
     }
 );
 {% endhighlight %}

package/{_entries → docs/_entries}/87_is-node-selected.md

@@ -7,5 +7,5 @@ Return if this node is selected.
 
 {% highlight js %}
 var node = $('#tree1').tree('getNodeById', 123);
-var is_selected = $('#tree1').tree('isNodeSelected', node);
+var isSelected = $('#tree1').tree('isNodeSelected', node);
 {% endhighlight %}

package/{_entries → docs/_entries}/91_getdata.md

@@ -3,11 +3,11 @@ title: getData
 name: node-functions-getdata
 ---
 
-**function getData(include_parent = false);**
+**function getData(includeParent = false);**
 
 Get the subtree of this node.
 
-**include_parent**
+**includeParent**
 
 * **true**: include node and children
 * **false**: only include children (default)

package/docs/_entries/93_getnextnode.md

@@ -0,0 +1,15 @@
+---
+title: getNextNode
+name: node-functions-getnextnode
+---
+
+Get the next node in the tree.
+
+-   If the node has children, return the first child.
+-   If the node is the last child, return the next sibling of the parent.
+
+Returns a node or null.
+
+{% highlight js %}
+var node = node.getNextNode();
+{% endhighlight %}

package/{_entries/95_getpreviousnode.md → docs/_entries/95_getnextvisiblenode.md}

@@ -3,7 +3,7 @@ title: getPreviousNode
 name: node-functions-getpreviousnode
 ---
 
-Get the previous node in the tree. Does the same as using the *up* key.
+Return the previous node in the tree.
 
 Returns a node or null.
 

package/docs/_entries/98_getpreviousvisiblenode.md

@@ -0,0 +1,14 @@
+---
+title: getPreviousVisibleNode
+name: node-functions-getpreviousvisiblenode
+---
+
+-   Get the previous visible node in the tree. Does the same as using the _up_ key.
+-   If the previous node is an open parent: return the last child of the node.
+-   If the previous node is a closed parent: skip the child nodes of the previous parent, return the previous parent node.
+
+Returns a node or null.
+
+{% highlight js %}
+var node = node.getPreviousVisibleNode();
+{% endhighlight %}

package/{_entries/97_parent.md → docs/_entries/99_parent.md}

@@ -6,5 +6,5 @@ name: node-functions-parent
 You can access the parent of a node using the **parent** property.
 
 {% highlight js %}
-var parent_node = node.parent;
+var parentNode = node.parent;
 {% endhighlight %}

package/{_examples → docs/_examples}/01_load_json_data.html

@@ -1,18 +1,16 @@
 ---
 title: Load json data in javascript tree
-layout: page
 js: examples/load_json_data.js
-css: example.css
 ---
 
-<p id="nav">
+<p class="flex justify-between">
     <a href="../../index.html">&laquo; Documentation</a>
-    <a href="../02_load_json_data_from_server/" class="next">Example 2 &raquo;</a>
+    <a href="../02_load_json_data_from_server/">Example 2 &raquo;</a>
 </p>
 
 <h1>Example 1 - load json data</h1>
 
-<div id="tree1"></div>
+<div id="tree1" class="not-prose"></div>
 
 <p>
     In this example we load the data using the <strong>data</strong> option.

package/{_examples → docs/_examples}/02_load_json_data_from_server.html

@@ -1,18 +1,16 @@
 ---
 title: Load json data from the server in javascript tree
-layout: page
 js: examples/load_json_data_from_server.js
-css: example.css
 ---
 
-<p id="nav">
+<p class="flex justify-between">
     <a href="../01_load_json_data/">&laquo; Example 1</a>
-    <a href="../03_drag_and_drop/" class="next">Example 3 &raquo;</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" data-url="/example_data/"></div>
+<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.