django-fast-treenode 2.0.11__py3-none-any.whl → 2.1.0__py3-none-any.whl

treenode/static/treenode/js/treenode_admin.js

@@ -1,171 +1,131 @@
-/* 
-TreeNode Admin JavaScript
-
-This script enhances the Django admin interface with interactive 
-tree structure visualization. It provides expand/collapse functionality 
-for hierarchical data representation.
-
-Features:
-- Dynamically detects parent-child relationships in the admin table.
-- Allows nodes to be expanded and collapsed with smooth animations.
-- Saves expanded/collapsed states in localStorage for persistence.
-- Optimizes tree traversal with efficient DOM manipulation.
-
-Version: 2.0.0
-Author: Timur Kady
-Email: timurkady@yandex.com
-*/
-
-(function($) {
-    $(document).ready(function() {
-        // Mapping parent node -> list of child nodes
-        var childrenMap = {};
-
-        // Iterate over all tree nodes to build a mapping of parent-child relationships
-        $('.treenode, .treenode-wrapper').each(function() {
-            var parent = $(this).data('treenode-parent'); // Get parent ID
-            var pk = $(this).data('treenode-pk'); // Get node primary key
-            
-            if (parent) {
-                if (!childrenMap[parent]) {
-                    childrenMap[parent] = [];
-                }
-                childrenMap[parent].push(pk);
-            }
-        });
-
-        // Initialize tree nodes, set up toggles
-        $('.treenode, .treenode-wrapper').each(function() {
-            var $node = $(this);
-            var pk = $node.data('treenode-pk'); // Get current node ID
-            var depth = parseInt($node.data('treenode-depth'), 10) || 0; // Get tree depth level
-            var $tr = $node.closest('tr'); // Find the corresponding row in the table
-            $tr.attr('data-treenode-depth', depth);
-            $tr.attr('data-treenode-pk', pk);
-
-            var $th = $tr.find('th:first');
-            if ($th.find('.treenode-space, .treenode-toggle').length === 0) {
-                var $placeholder = $('<span class="treenode-space"> </span>')
-                    .css('margin-left', (depth * 20) + 'px'); // Indentation based on depth
-                $th.prepend($placeholder);
-            }
-
-            // If node has children, add expand/collapse toggle
-            if (childrenMap[pk]) {
-                var expanded = loadState(pk);
-                var $placeholder = $th.find('.treenode-space');
-                var $toggle = $('<span class="treenode-toggle button"></span>')
-                    .css('margin-left', (depth * 20) + 'px');
-                
-                if (expanded) {
-                    $toggle.addClass('expanded').text('-');
-                } else {
-                    $toggle.addClass('collapsed').text('+');
-                }
-                $placeholder.replaceWith($toggle);
-                
-                if (!expanded) {
-                    collapseNode($tr, true);
-                }
-
-                // Toggle node expansion/collapse on click
-                $toggle.on('click', function() {
-                    if ($(this).hasClass('expanded')) {
-                        collapseNode($tr, false);
-                        $(this).removeClass('expanded').addClass('collapsed').text('+');
-                        saveState(pk, false);
-                    } else {
-                        expandNode($tr);
-                        $(this).removeClass('collapsed').addClass('expanded').text('-');
-                        saveState(pk, true);
-                    }
-                });
-            }
-        });
-
-        // Apply initial collapsed states based on saved preferences
-        function applyCollapsedStates() {
-            $('tr').each(function() {
-                var $tr = $(this);
-                var currentDepth = parseInt($tr.attr('data-treenode-depth'), 10);
-                var hide = false;
-                
-                // Check if any ancestor is collapsed
-                $tr.prevAll('tr').each(function() {
-                    var $prev = $(this);
-                    var prevDepth = parseInt($prev.attr('data-treenode-depth'), 10);
-                    if (prevDepth < currentDepth) {
-                        var parentPk = $prev.attr('data-treenode-pk');
-                        if (loadState(parentPk) === false) {
-                            hide = true;
-                        }
-                        return false;
-                    }
-                });
-                
-                if (hide) {
-                    $tr.hide();
-                }
-            });
-        }
-        applyCollapsedStates();
-
-        // Collapse a node and all its descendants
-        function collapseNode($tr, immediate) {
-            var parentDepth = parseInt($tr.attr('data-treenode-depth'), 10);
-            var $nextRows = $tr.nextAll('tr');
-            $nextRows.each(function() {
-                var $row = $(this);
-                var rowDepth = parseInt($row.attr('data-treenode-depth'), 10);
-                if (rowDepth > parentDepth) {
-                    if (immediate) {
-                        $row.hide();
-                    } else {
-                        $row.slideUp(300);
-                    }
-                    var childPk = $row.attr('data-treenode-pk');
-                    saveState(childPk, false);
-                } else {
-                    return false;
-                }
-            });
-        }
-
-        // Expand a node and reveal its immediate children
-        function expandNode($tr) {
-            var parentDepth = parseInt($tr.attr('data-treenode-depth'), 10);
-            var $nextRows = $tr.nextAll('tr');
-            $nextRows.each(function() {
-                var $row = $(this);
-                var rowDepth = parseInt($row.attr('data-treenode-depth'), 10);
-                if (rowDepth > parentDepth) {
-                    if (rowDepth === parentDepth + 1) {
-                        $row.slideDown('slow');
-                        var childPk = $row.attr('data-treenode-pk');
-                        if (loadState(childPk)) {
-                            expandNode($row);
-                        }
-                    }
-                } else {
-                    return false;
-                }
-            });
-        }
-
-        // Save expansion state to localStorage
-        function saveState(pk, isExpanded) {
-            if (window.localStorage) {
-                localStorage.setItem('treenode_state_' + pk, isExpanded ? '1' : '0');
-            }
-        }
-
-        // Load expansion state from localStorage
-        function loadState(pk) {
-            if (window.localStorage) {
-                var state = localStorage.getItem('treenode_state_' + pk);
-                return state === '1';
-            }
-            return true;
-        }
-    });
-})(django.jQuery || window.jQuery);
+(function($) {
+  // Function "debounce" to delay execution
+  function debounce(func, wait) {
+    var timeout;
+    return function() {
+      var context = this, args = arguments;
+      clearTimeout(timeout);
+      timeout = setTimeout(function() {
+        func.apply(context, args);
+      }, wait);
+    };
+  }
+  
+  // Function to recursively delete descendants of the current child
+  function removeAllDescendants(nodeId) {
+    var $children = $tableBody.find(`tr[data-parent-of="${nodeId}"]`);
+
+    $children.each(function () {
+        var childId = $(this).data('node-id');
+        removeAllDescendants(childId); 
+    });
+
+    $children.remove();
+  }
+  
+  // Function to reveal nodes stored in storage
+  function restoreExpandedNodes() {
+    var expandedNodes = JSON.parse(localStorage.getItem('expandedNodes')) || [];
+    if (expandedNodes.length === 0) return;
+
+    function expandNext(nodes) {
+      if (nodes.length === 0) return;
+
+      var nodeId = nodes.shift();
+
+      $.getJSON('change_list/', { tn_parent_id: nodeId }, function (response) {
+        if (response.html) {
+          var $btn = $tableBody.find(`.treenode-toggle[data-node-id="${nodeId}"]`);
+          var $parentRow = $btn.closest('tr');
+          $parentRow.after(response.html);
+          $btn.html('▼').data('expanded', true);
+          // Раскрываем следующий узел после завершения AJAX-запроса
+          expandNext(nodes);
+        }
+      });
+    }
+
+    // Начинаем раскрытие узлов по порядку
+    expandNext([...expandedNodes]);
+  }
+  
+  // Global variables ---------------------------------
+  var $tableBody;
+  var originalTableHtml;
+  
+  var expandedNodes = JSON.parse(localStorage.getItem('expandedNodes')) || [];
+
+  // Events -------------------------------------------
+
+  $(document).ready(function () {
+      // Сохраняем оригинальное содержимое таблицы (корневые узлы)
+      $tableBody = $('table#result_list tbody');
+      originalTableHtml = $tableBody.html();
+      restoreExpandedNodes();
+  });
+
+  // Обработчик клика для кнопок treenode-toggle через делегирование на document
+  $(document).on('click', '.treenode-toggle', function(e) {
+    e.preventDefault();
+    var $btn = $(this);
+    var nodeId = $btn.data('node-id');
+
+    // Если узел уже развёрнут, сворачиваем его
+    if ($btn.data('expanded')) {
+      removeAllDescendants(nodeId);
+      $btn.html('►').data('expanded', false);
+      
+      // Убираем узел из списка сохранённых
+      expandedNodes = expandedNodes.filter(id => id !== nodeId);
+
+    } else {
+      // Иначе запрашиваем дочерние узлы через AJAX
+      $.getJSON('change_list/', { tn_parent_id: nodeId }, function(response) {
+        if (response.html) {
+          var $parentRow = $btn.closest('tr');
+          $parentRow.after(response.html);
+          $btn.html('▼').data('expanded', true);
+          
+          // Сохраняем узел в localStorage
+          if (!expandedNodes.includes(nodeId)) {
+            expandedNodes.push(nodeId);
+          }
+          localStorage.setItem('expandedNodes', JSON.stringify(expandedNodes));
+        }
+      });
+    }
+    localStorage.setItem('expandedNodes', JSON.stringify(expandedNodes));
+  });
+
+
+  // Обработчик ввода для поля поиска с делегированием на document
+  $(document).on('keyup', 'input[name="q"]', debounce(function(e) {
+    var query = $.trim($(this).val());
+    
+    if (query === '') {
+      $tableBody.html(originalTableHtml);
+      return;
+    }
+    
+    $.getJSON('search/', { q: query }, function(response) {
+      var rowsHtml = '';
+      if (response.results && response.results.length > 0) {
+        $.each(response.results, function(index, node) {
+          var dragCell = '<td class="drag-cell"><span class="treenode-drag-handle">↕</span></td>';
+          var toggleCell = '';
+          if (!node.is_leaf) {
+            toggleCell = '<td class="toggle-cell"><button class="treenode-toggle" data-node-id="' + node.id + '">▶</button></td>';
+          } else {
+            toggleCell = '<td class="toggle-cell"><div class="treenode-space">&nbsp;</div></td>';
+          }
+          var displayCell = '<td class="display-cell">' + node.text + '</td>';
+          rowsHtml += '<tr>' + dragCell + toggleCell + displayCell + '</tr>';
+        });
+      } else {
+        rowsHtml = '<tr><td colspan="3">Ничего не найдено</td></tr>';
+      }
+      $tableBody.html(rowsHtml);
+    });
+  }, 500));
+
+})(django.jQuery || window.jQuery);

treenode/templates/admin/tree_node_changelist.html

@@ -11,3 +11,9 @@
     </li>
     {% endif %}
 {% endblock %}
+
+{% block extrahead %}
+
+  {{ block.super }}
+
+{% endblock %}

treenode/templates/admin/treenode_ajax_rows.html

@@ -0,0 +1,7 @@
+{% for row in rows %}
+<tr data-node-id="{{ row.node_id }}" data-parent-of="{{ row.parent_id }}">
+  {% for cell, class in row.cells %}
+    <td class="{{ class }}">{{ cell|safe }}</td>
+  {% endfor %}
+</tr>
+{% endfor %}