mini_tree 0.0.4 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cfcc12efe875d58a64a005b8bcf01c4287521f929dafe941e55abfe0774bd64e
-  data.tar.gz: 6314c4eecfbe0c7cf0df0b2db8e952515bb3bba14158c94aeb250eb89f5763e4
+  metadata.gz: 26a99772164b7332c0f3f41e6c546bb54169d22ebe6cbc1b0948b859b72afd13
+  data.tar.gz: ba98b4540ee1473d84801c3384b20ed08c7b1ea6054699f7765dce0999f644e6
 SHA512:
-  metadata.gz: 264d652696e5c73cfda4b8b6e7094e9b8596d9ba30bf71be3361712845a41929fab44017fda6d6b9834b7c8eecf73ab3c5ca74469def6cb35119dcd1698a21d5
-  data.tar.gz: f3139e7a2cd685933b07341c2503aa3ba553c0279cfd6e52d41fed823f1d3eb7e8a0351f83bd7a29c6aa40280e2494133e6f74a9fab2c9aa0c77b03c01b71b0f
+  metadata.gz: 5ed1aa746b44b269c9b70341363127fc1670a80672eed0c73e3e2ce48a05c4f75a6ba6378ca9b6df5c6634b3bcfe5349e574ed48d0efe0a23e57058e0097e799
+  data.tar.gz: e8bbf9cf71eb303c2388d52e436632568e2907c5334cf3696edcfb9bb96229b8256efaf80b66394de15143d0aea6eb2e74534afeddd618f9ef3e5a9d1a34b835

data/README.md

@@ -1,5 +1,3 @@
-# UNDER CONSTRUCTION
-
 # MiniTree
 
 [![Gem Version](https://img.shields.io/gem/v/mini_tree?color=168AFE&logo=rubygems&logoColor=FE1616)](https://rubygems.org/gems/mini_tree)
@@ -65,9 +63,9 @@ end
 
 You may specify your view of an item in the treeview:
 ~~~Ruby
-# ./app/views/mini_trees/_mini_tree_title.html.erb
+# ./app/views/application/_mini_tree_title.html.erb
 # id and legend are defined
-<%= link_to "action", edit_<model>(id:), class: 'button' %>
+<%= link_to "action", edit_<model>(id:) %>
 <%= legend %>
 ~~~
 
@@ -75,9 +73,9 @@ You may specify your view of an item in the treeview:
 
 ~~~Ruby
 <Model>Tree.refresh
-<Model>Tree.refresh_item(<id>, <legend>)
 <Model>Tree.create_item(<id>, <legend>)
-<Model>Tree.del_item(<id>)
+<Model>Tree.destroy_item(<id>)
+<Model>Tree.update_item(<id>, <legend>)
 ~~~
 
 ## Usage
@@ -103,7 +101,7 @@ gem "mini_tree"
 and run "bundle install".
 
 Furthermore, copy manually *app/javascript/controllers/tree_controller.js*
-from the _gem  mini-tree_
+from the _gem  mini_tree_
 into your own _app/javascript/controllers/_ directory.
 
 
@@ -112,7 +110,7 @@ into your own _app/javascript/controllers/_ directory.
 This software has been developed and tested with:
 - Ubuntu 24.04
 - Ruby 3.4.7
-- Rails 8.1.0
+- Rails 8.1.1
 
 See also:
 - ./.github/workflows/rake.yml

data/app/javascript/controllers/tree_controller.js

@@ -5,8 +5,8 @@ export default class extends Controller {
   static values = {owner: String}
 
   connect() {
-    this.expanded = "\u25BE" // down triangle
-    this.collapsed = "\u25b8" // right triangle
+    this.expanded = "\u25BC" // down triangle
+    this.collapsed = "\u25bA" // right triangle
     this.itemTargets.forEach(item => this.attach(item))
   }
 
@@ -20,7 +20,6 @@ export default class extends Controller {
   dragStart(e, el) {
     e.stopPropagation()
 
-    // ev.dataTransfer.setData("text/plain", "")
     this.dragged = el
     e.dataTransfer.effectAllowed = "move"
     el.classList.add("dragging")
@@ -30,10 +29,35 @@ export default class extends Controller {
     e.stopPropagation()
     this.dragged.classList.remove("dragging")
     this.dragged = null
+    this.removeTraversed()
   }
 
   dragOver(e, el) {
     e.preventDefault()
+    e.stopPropagation()
+    this.removeTraversed()
+
+    const title = el.querySelector("span.title")
+    if (this.topPart(e, el)) {
+      title.classList.add("topline")
+    } else {
+      title.classList.add("bottomline")
+    }
+    this.traversed = title
+  }
+
+  removeTraversed() {
+    if (!this.traversed) { return }
+
+    this.traversed.classList.remove("topline")
+    this.traversed.classList.remove("bottomline")
+    this.traversed = null
+  }
+
+  topPart(event, elem) {
+    const rect = elem.getBoundingClientRect()
+    const offset = event.clientY - rect.top
+    return offset < (rect.height / 3) * 2
   }
 
   drop(e) {
@@ -60,11 +84,7 @@ export default class extends Controller {
       }
     }
 
-    const rect = target.getBoundingClientRect()
-    const offset = e.clientY - rect.top
-    const threshold = (rect.height / 3) * 2
-
-    const target2 = (offset > threshold) ? target.nextSibling : target
+    const target2 = this.topPart(e, target) ? target : target.nextSibling
     target.parentNode.insertBefore(dragged, target2)
   }
 
@@ -94,8 +114,10 @@ export default class extends Controller {
 
   toNode(elem) {
     var row = elem.firstElementChild
-    const newRow = this.create("button", {className: "toggle-btn",
-      type: "button", textContent: this.expanded})
+    const newRow = this.create("a", {className: "toggle-btn",
+      textContent: this.expanded})
+    //  type: "button", textContent: this.expanded})
+    newRow.dataset.action = "click->tree#toggle"
 
     this.removeUl(elem)
     const ulRow2 = this.create("ul", {className: "nested"})
@@ -212,41 +234,11 @@ export default class extends Controller {
   }
 }
 
-
-
-//  over(e, el) {
-//console.log("over")
-//    e.preventDefault()
-//    if (this.dragged === el) return
-//    const rect = el.getBoundingClientRect()
-//    const offset = e.clientY - rect.top
-//    const third = rect.height / 3
-//
-//    if (offset < third) {
-//      el.parentNode.insertBefore(this.placeholder, el)
-//    } else if (offset > 2 * third) {
-//      el.parentNode.insertBefore(this.placeholder, el.nextSibling)
-//    } else {
-//      let ul = el.querySelector(".nested")
-//      if (!ul) {
-//        ul = document.createElement("ul")
-//        ul.className = "nested"
-//        el.appendChild(ul)
-//      }
-//      ul.classList.remove("hidden")
-//      ul.appendChild(this.placeholder)
-//    }
-//  }
-//
-//  removePlaceholder() {
-//    this.placeholder?.remove()
-//  }
-//
-//
-// // rails javascript no jquery no sortablejs use stimulus sortable treeview
-// // expand collapse support
-// // nested reordering
+// rails javascript no jquery no sortablejs use stimulus sortable treeview
+// expand collapse support
+// nested reordering
 //
 //
-// // https://wiki.selfhtml.org/wiki/JavaScript/Drag_%26_Drop
-// // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
+// https://wiki.selfhtml.org/wiki/JavaScript/Drag_%26_Drop
+// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
+// simple rails 8 program with two javascript classes

data/app/views/mini_trees/_index.html.erb

@@ -1,8 +1,17 @@
 <style>
 .mini-tree {
-  xbackground: yellow;
   .mini-tree-view, .nested {
     list-style: none;
+  }
+  span.title.topline {
+    border-top: solid 2px red;
+    border-top: solid 1px red;
+  }
+  span.title.bottomline {
+    border-bottom: solid 2px red;
+    border-bottom: solid 1px red;
+  }
+  .nested {
     padding-left: 1rem;
   }
   .tree-row {
@@ -11,7 +20,7 @@
   }
   .toggle-btn {
     background: transparent;
-    border: none;
+    cursor: pointer;
   }
   .dragging { opacity: 0.5; }
   .hidden { display: none; }
@@ -25,6 +34,7 @@
   owner = list.first.class.name[0..-5]
 %>
 <div class="mini-tree" data-item-id="0"
+    data-turbo-prefetch="false"
     data-controller="tree" data-tree-owner-value="<%= owner %>">
   <ul class="mini-tree-view" data-tree-target="top">
     <%= render partial: "mini_trees/item",

data/app/views/mini_trees/_index.html.erb.bak

@@ -0,0 +1,45 @@
+<style>
+.mini-tree {
+  .mini-tree-view, .nested {
+    list-style: none;
+    xpadding-left: 1rem;
+  }
+  span.title.topline {
+    border-top: solid 2px red;
+    border-top: solid 1px red;
+  }
+  span.title.bottomline {
+    border-bottom: solid 2px red;
+    border-bottom: solid 1px red;
+  }
+  .nested {
+    padding-left: 1rem;
+  }
+  .tree-row {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .toggle-btn {
+    background: transparent;
+    cursor: pointer;
+  }
+  .dragging { opacity: 0.5; }
+  .hidden { display: none; }
+  .toggle-btn, .toggle-space { width: 1rem; }
+  .tree-row:hover { background: rgba(0,0,0,0.05); }
+}
+</style>
+
+<%
+  list = locals[:list]
+  owner = list.first.class.name[0..-5]
+%>
+<div class="mini-tree" data-item-id="0"
+    data-turbo-prefetch="false"
+    data-controller="tree" data-tree-owner-value="<%= owner %>">
+  <ul class="mini-tree-view" data-tree-target="top">
+    <%= render partial: "mini_trees/item",
+      collection: list.where(parent_id: 0).order(:position)
+    %>
+  </ul>
+</div>

data/app/views/mini_trees/_item.html.erb

@@ -1,13 +1,14 @@
 <%
-  icon = (item.collapsed ? "\u25b8" : "\u25be").html_safe
+  icon = (item.collapsed ? "\u25ba" : "\u25bc").html_safe
   klass = item.collapsed ? "nested hidden" : "nested"
 %>
 
 <li class="tree-item" data-tree-target="item"
     data-item-id="<%= item.id %>" draggable="true">
-  <div class="tree-row" data-action="click-&gt;tree#toggle">
+  <div class="tree-row">
     <% if item.kind == "node" %>
-      <button class="toggle-btn" type="button"><%= icon %></button>
+      <a class="toggle-btn" type="button"
+        data-action="click-&gt;tree#toggle"> <%= icon %> </a>
     <% else %>
       <span class="toggle-space"></span>
     <% end %>
@@ -23,5 +24,4 @@
       <%= render partial: "mini_trees/item", collection: item.children %>
     </ul>
   <% end %>
-
 </li>

data/lib/mini_tree/utils.rb

@@ -24,28 +24,35 @@ module MiniTree::Utils
         missing_cnt += 1
       }
       (ids - owner_ids).each { |id|
-        del_item(id)
+        destroy_item(id)
         delete_cnt += 1
       }
       (owner_ids & ids).each { |id|
-        refresh_item(id, owner_class.find_by(id:).legend)
+        update_item(id, owner_class.find_by(id:).legend)
         refresh_cnt += 1
       }
       [missing_cnt, delete_cnt, refresh_cnt]
     end
 
-    def refresh_item(id, legend)
-      find_by(id:).update!(legend:)
-    end
-
     def create_item(id, legend)
       create! id:, legend:, parent_id: 0, position: id, kind: "leaf"
     end
 
-    def del_item(id)
+    def destroy_item(id)
       where(id:).delete_all
     end
 
+    def update_item(id, legend)
+      find_by(id:).update!(legend:)
+    end
+
+    def ancestors(id)
+      parent_id = find(id).parent_id
+      return [id] if parent_id == 0
+
+      ancestors(parent_id) << id
+    end
+
     # used by tests
     def flat
       res = []

data/lib/mini_tree/version.rb

@@ -1,5 +1,7 @@
 module MiniTree
-  VERSION = "0.0.4" # 2025-10-29
+  VERSION = "0.1.1" # 2025-12-06
+  # VERSION = "0.1.0" # 2025-12-06
+  # VERSION = "0.0.4" # 2025-10-29
   # VERSION = "0.0.3" # 2025-10-28
   # VERSION = "0.0.2" # 2025-10-27
   # VERSION = "0.0.1" # 2025-10-26

data/lib/mini_tree/version.rb.bak

@@ -1,5 +1,7 @@
 module MiniTree
-  VERSION = "0.0.3" # 2025-10-28
+  VERSION = "0.1.0" # 2025-12-06
+  # VERSION = "0.0.4" # 2025-10-29
+  # VERSION = "0.0.3" # 2025-10-28
   # VERSION = "0.0.2" # 2025-10-27
   # VERSION = "0.0.1" # 2025-10-26
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mini_tree
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 0.1.1
 platform: ruby
 authors:
 - Dittmar Krall
@@ -99,6 +99,7 @@ files:
 - app/javascript/controllers/tree_controller.js
 - app/views/application/_mini_tree_title.html.erb
 - app/views/mini_trees/_index.html.erb
+- app/views/mini_trees/_index.html.erb.bak
 - app/views/mini_trees/_item.html.erb
 - config/routes.rb
 - lib/mini_tree.rb
@@ -115,7 +116,7 @@ require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
-  - - "~>"
+  - - ">"
     - !ruby/object:Gem::Version
       version: '3'
 required_rubygems_version: !ruby/object:Gem::Requirement