tree_html 0.1.6 → 0.1.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: f77234678d84b3d33b037d9ee4e751b24bdfc6d7
-  data.tar.gz: 71bc45162df3b72a4afc35a71a50b0bc60c2af73
+SHA256:
+  metadata.gz: 20504c724cbd2859c9bfc6c6235f17cabd109932adc86ed84ee60f2549e540e5
+  data.tar.gz: 4b2f5d2ca583f0f79d6ba403f1e566966ba3a582ae1d8a507d72c66a74d51aa6
 SHA512:
-  metadata.gz: 5870241f2cf857d0d056c7ec7d99db4a7d4f60a0ef1076ce839dd3655f380451d742592d6a3d948f22d20ca38f5b856acef4f43cfc883e95d90e25c043e336f7
-  data.tar.gz: d017c395743a8251d1422d71cf82304a5036152ce426aabefdc6effe84985787980714a4a9f952de62b64f93a71a52591c0431952fd42bf221ac6a309fce88d8
+  metadata.gz: 21139d38408d2be9a12e9f1e0b7396a6371568d7467d780827935248c959ada040613e0c801e8e74e5cb1f4982ad87edc6b00c98027d86b461d51ecc488c95ef
+  data.tar.gz: a6d3e49ee00f675c8acd0a5ee89c7555c1fb4ef8805aa82a4c89fd8d7d85814fc5bf12414173e3237b091059b0ac08a434b0cb2cf4692d8120b0563d154a5bdf

data/.gitignore

@@ -9,3 +9,4 @@
 /tmp/
 *.swp
 *.gem
+.tool-versions

data/README.md

@@ -20,7 +20,13 @@ Or install it yourself as:
 
 ## Usage
 
-In Node class, `include TreeHtml`, then implement `label_for_tree_html` and `children_for_tree_html`, then call `tree_html` on node object to get ul/li fragment, or `tree_html_full` to get a html file with pre-defined style.
+In Node class, `include TreeHtml`.
+
+Then implement `label_for_tree_html` and `children_for_tree_html` for Branch class, and `label_for_tree_html` for Leaf class.
+
+Finally, call `tree_html` on node object to get ul/li fragment, or `tree_html_full` to get a html file with pre-defined style.
+
+By Default, any object can be leaf, and renders as `to_s`.
 
 You may overwrite `data_for_tree_html`, `head_js_for_tree_html`, `body_js_for_tree_html`, `css_for_tree_html` to specify your own style.
 
@@ -28,3 +34,27 @@ In generated html, hover a branch and press `f`/`u` to fold/unfold it's children
 
 Or checkout [test/tree_html_test.rb](https://github.com/turnon/tree_html/blob/master/test/tree_html_test.rb) to see how to use.
 
+## Extending
+
+You may register more handlers for responsing key press. For example, to do something when hovering on any `li` and pressing `r`
+
+```javascript
+TreeHtml.hover_press('r', function(li){
+  // actions
+})
+```
+
+You may also group `li`s with same key under additional `ul`:
+
+```javascript
+var switch = TreeHtmlGroup({
+  name: 'by_whatever_key',
+  key: function get_path(li) {
+    var p = li.querySelector('a').innerText.replace(/* key calculation here */)
+    return '<b>' + p + '</b>'
+  }
+})
+
+switch('by_whatever_key')
+switch('') // switch back
+```

data/lib/tree_html/group.js

@@ -0,0 +1,88 @@
+var TreeHtmlGroup = (function () {
+  var tree = document.querySelector('ul')
+  var group_id = 0
+  var tree_id_prefix = 0
+
+  function group_by_key(ul, key_func) {
+    var last_key = null
+    var lis_groups = []
+
+    function last_group() {
+      return lis_groups[lis_groups.length - 1]
+    }
+
+    var children_count = ul.children.length
+    for (var i = 0; i < children_count; i++) {
+      var li = ul.children[i]
+      callee_path = key_func(li)
+      if (last_key !== callee_path) {
+        last_key = callee_path
+        lis_groups.push([])
+      }
+      last_group().push(li)
+    }
+
+    if (lis_groups.length == 1 && key_func(lis_groups[0][0]) == key_func(ul.parentElement)) {
+      return
+    }
+
+    lis_groups.forEach(function (group) {
+      var key = key_func(group[0])
+      wrap_into_group(group, key)
+    })
+  }
+
+  function wrap_into_group(lis, key) {
+    var id = 'g' + group_id++
+    var html = '<li>' +
+      '<input type="checkbox" id="' + id + '">' +
+      '<label for="' + id + '"></label>' +
+      '<a>' + key + '</a>' +
+      '<ul></ul>' +
+      '</li>'
+
+    lis[0].insertAdjacentHTML('beforebegin', html)
+    var ul = document.querySelector('#' + id + ' ~ ul')
+    lis.forEach(function (li) {
+      ul.insertAdjacentElement('beforeend', li)
+    })
+  }
+
+  function switch_tree(name) {
+    var id = name === '' ? name : name_to_id(name)
+    document.querySelectorAll('.tree-html').forEach(function (tree) {
+      if (tree.id !== id) {
+        tree.style = 'display:none'
+      } else {
+        tree.style = ''
+      }
+    })
+  }
+
+  function name_to_id(name) {
+    return 'tree-html-group-' + name
+  }
+
+  return function (opt) {
+    var id = name_to_id(opt['name'])
+    if (document.getElementById(id)) {
+      return switch_tree
+    }
+
+    var id_pattern = '$1p-' + tree_id_prefix++ + '$2$3'
+    var li_ids_changed = tree.innerHTML
+      .replace(/(<input type="checkbox" id=")(.+?)(">)/, id_pattern)
+      .replace(/(<label for=")(.+?)(">)/, id_pattern)
+
+    tree.insertAdjacentHTML('beforebegin', '<ul id="' + id + '" class="tree-html" style="display:none">' + li_ids_changed + '</ul>')
+
+    var uls = document.querySelectorAll('#' + id + ',#' + id + ' ul')
+    var key_func = opt['key']
+    for (var i = uls.length - 1; i > 0; i--) {
+      var ul = uls[i]
+      group_by_key(ul, key_func)
+    }
+
+    return switch_tree
+  }
+})();

data/lib/tree_html/version.rb

@@ -1,3 +1,3 @@
 module TreeHtml
-  VERSION = "0.1.6"
+  VERSION = "0.1.9"
 end

data/lib/tree_html.rb

@@ -1,4 +1,5 @@
 require "tree_html/version"
+require "cgi"
 
 module TreeHtml
 
@@ -7,7 +8,17 @@ module TreeHtml
   BLANK = ''.freeze
   NO_CUSTOM_JS = [].freeze
   Css = File.read File.expand_path('../tree_html/tree_html.css', __FILE__)
-  Js = File.read File.expand_path('../tree_html/tree_html.js', __FILE__)
+  Js = Dir.glob("#{File.expand_path(__dir__)}/tree_html/*.js").map{|f| File.read f }.join(';')
+
+  class ::Object
+    def li_for_tree_html
+      "<li>#{NO_CHECKBOX}<a>#{label_for_tree_html}</a></li>"
+    end
+
+    def label_for_tree_html
+      CGI::escapeHTML(to_s)
+    end
+  end
 
   def tree_html
     "<ul class='tree-html'>#{li_for_tree_html}</ul>"

data/tree_html.gemspec

@@ -20,7 +20,7 @@ Gem::Specification.new do |spec|
   spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
   spec.require_paths = ["lib"]
 
-  spec.add_development_dependency "bundler", "~> 1.14"
-  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "bundler", ">= 2.2.33"
+  spec.add_development_dependency "rake", ">= 12.3.3"
   spec.add_development_dependency "minitest", "~> 5.0"
 end

metadata

@@ -1,43 +1,43 @@
 --- !ruby/object:Gem::Specification
 name: tree_html
 version: !ruby/object:Gem::Version
-  version: 0.1.6
+  version: 0.1.9
 platform: ruby
 authors:
 - ken
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-02-07 00:00:00.000000000 Z
+date: 2022-05-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '1.14'
+        version: 2.2.33
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '1.14'
+        version: 2.2.33
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '10.0'
+        version: 12.3.3
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '10.0'
+        version: 12.3.3
 - !ruby/object:Gem::Dependency
   name: minitest
   requirement: !ruby/object:Gem::Requirement
@@ -68,8 +68,9 @@ files:
 - bin/console
 - bin/setup
 - lib/tree_html.rb
+- lib/tree_html/group.js
+- lib/tree_html/shortkey.js
 - lib/tree_html/tree_html.css
-- lib/tree_html/tree_html.js
 - lib/tree_html/version.rb
 - tree_html.gemspec
 homepage: https://github.com/turnon/tree_html
@@ -91,8 +92,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.6.8
+rubygems_version: 3.0.3
 signing_key: 
 specification_version: 4
 summary: generate plain css tree structure