tree_html 0.1.6 → 0.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: f77234678d84b3d33b037d9ee4e751b24bdfc6d7
-  data.tar.gz: 71bc45162df3b72a4afc35a71a50b0bc60c2af73
+SHA256:
+  metadata.gz: 9cbc5537a5398b73c215f6f9c7dfb581681339b3545de6238f5b020fbb94ebe3
+  data.tar.gz: '04715792d8c13be85ad51724a2f0ac7c996cd3aba8fb64d18fbf4d73aeff5d7f'
 SHA512:
-  metadata.gz: 5870241f2cf857d0d056c7ec7d99db4a7d4f60a0ef1076ce839dd3655f380451d742592d6a3d948f22d20ca38f5b856acef4f43cfc883e95d90e25c043e336f7
-  data.tar.gz: d017c395743a8251d1422d71cf82304a5036152ce426aabefdc6effe84985787980714a4a9f952de62b64f93a71a52591c0431952fd42bf221ac6a309fce88d8
+  metadata.gz: f8f109200650e9a75aef6b0fd3d83cab75ac24c9b4de806508d76706a33a97e2cc6127ab12257af3f6eb484d05dd9c9273a7f1a77635cf7a4a4d4f3f21fc05f1
+  data.tar.gz: b502548e6a53e8bef302843747d3da49d5e209870ace083da123713ffd12c324fa2c2cd29448bc7b8d0efa79856741a6089eed113c50ef4c1335286223c8540d

data/README.md

@@ -28,3 +28,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.rb

@@ -7,7 +7,7 @@ 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(';')
 
   def tree_html
     "<ul class='tree-html'>#{li_for_tree_html}</ul>"

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.7"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tree_html
 version: !ruby/object:Gem::Version
-  version: 0.1.6
+  version: 0.1.7
 platform: ruby
 authors:
 - ken
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-02-07 00:00:00.000000000 Z
+date: 2019-05-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -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
@@ -92,7 +93,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.8
+rubygems_version: 2.7.6
 signing_key: 
 specification_version: 4
 summary: generate plain css tree structure