tree_html 0.1.5 → 0.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 42717ea15b10916a6a8edf195ad8ea170e7ed4b6
-  data.tar.gz: dc36cbe0dde1587310dd1f7f7b8acb986ed0e76c
+SHA256:
+  metadata.gz: 38b6feffd5a7b44acca5b51ac501b4de6a714d5eda38700d867b1d7a345b145b
+  data.tar.gz: 1efb12cbe56fe1c97b658e086f7f639d82ad2190198b6868262b341964ab3fad
 SHA512:
-  metadata.gz: 4c0917b87a483e89be53197c16b8ecdc783f167d3e3dc9dd60b03def406f1d40d00061b84041458d82104cceef4df921e2d49e6a49605cdc5d4b1439496f7efb
-  data.tar.gz: 897658a24ec968849c3924f46b6a9c4f566fe2c4c5db445e54ffe116998df144a7452a14e64fdf17d05acd87235f5ce614899d470085c4d65c8a2b711cf13380
+  metadata.gz: 281f428f38623f6b4ba961348073a1f4e9fe1a9e7f2204a857efe6950974c15a854ac2426de0b471b1d843e55a9d33fadda75302e7c8b9fceecbe399aab34769
+  data.tar.gz: 2279a74ba2795b54a6347edbd51b95b355a45645777020135a74b84979d7eaff05a1943537554cdcf9f9accdc39e82e9aca81439a0b233de933039d780f12f5e

data/.gitignore

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

data/README.md

@@ -22,9 +22,35 @@ Or install it yourself as:
 
 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.
 
+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.
 
 In generated html, hover a branch and press `f`/`u` to fold/unfold it's children, press `p`/`n` to jump to it's previous/next sibling branch. You may change these function keys in `body_js_for_tree_html`.
 
 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/{tree_html.js → shortkey.js}

@@ -1,5 +1,4 @@
-var key_cmds = {f: 'fold', u: 'unfold', p: 'prev', n: 'next'};
-(function(){
+var TreeHtml = (function(){
   var cmd, node, action;
   var id = 0;
 
@@ -94,11 +93,41 @@ var key_cmds = {f: 'fold', u: 'unfold', p: 'prev', n: 'next'};
     }
   };
 
-  document.onkeypress = function(e) {
+  var key_cmds = {f: 'fold', u: 'unfold', p: 'prev', n: 'next'};
+
+  var resp_keypress = [function(e) {
     e = e || window.event;
     (cmd = match_key(e)) &&
       (action = actions[cmd]) &&
       (node = hovering()) &&
       action(node);
+  }];
+
+  document.onkeypress = function(e) {
+    for(var i = 0; i < resp_keypress.length; i++) {
+      resp_keypress[i](e);
+    }
+  };
+
+  return {
+    debug: function() {
+      debugger;
+    },
+    more_onkeypress: function(f) {
+      resp_keypress.push(f);
+    },
+    hover_press: function(key, fun) {
+      var conn = Math.random().toString();
+      key_cmds[key] = conn;
+      actions[conn] = fun;
+    },
+    no_hover_press: function(key) {
+      delete actions[key_cmds[key]];
+      delete key_cmds[key];
+    },
+    sub_hover_press: function(old, neo) {
+      key_cmds[neo] = key_cmds[old];
+      delete key_cmds[old];
+    },
   };
 })();

data/lib/tree_html/version.rb

@@ -1,3 +1,3 @@
 module TreeHtml
-  VERSION = "0.1.5"
+  VERSION = "0.1.8"
 end

data/lib/tree_html.rb

@@ -7,7 +7,13 @@ 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>#{to_s}</a></li>"
+    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.5
+  version: 0.1.8
 platform: ruby
 authors:
 - ken
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-12-04 00:00:00.000000000 Z
+date: 2022-05-21 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.2.2
+rubygems_version: 3.1.6
 signing_key: 
 specification_version: 4
 summary: generate plain css tree structure