tree_html 0.1.5 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
- SHA1:
3
- metadata.gz: 42717ea15b10916a6a8edf195ad8ea170e7ed4b6
4
- data.tar.gz: dc36cbe0dde1587310dd1f7f7b8acb986ed0e76c
2
+ SHA256:
3
+ metadata.gz: 38b6feffd5a7b44acca5b51ac501b4de6a714d5eda38700d867b1d7a345b145b
4
+ data.tar.gz: 1efb12cbe56fe1c97b658e086f7f639d82ad2190198b6868262b341964ab3fad
5
5
  SHA512:
6
- metadata.gz: 4c0917b87a483e89be53197c16b8ecdc783f167d3e3dc9dd60b03def406f1d40d00061b84041458d82104cceef4df921e2d49e6a49605cdc5d4b1439496f7efb
7
- data.tar.gz: 897658a24ec968849c3924f46b6a9c4f566fe2c4c5db445e54ffe116998df144a7452a14e64fdf17d05acd87235f5ce614899d470085c4d65c8a2b711cf13380
6
+ metadata.gz: 281f428f38623f6b4ba961348073a1f4e9fe1a9e7f2204a857efe6950974c15a854ac2426de0b471b1d843e55a9d33fadda75302e7c8b9fceecbe399aab34769
7
+ data.tar.gz: 2279a74ba2795b54a6347edbd51b95b355a45645777020135a74b84979d7eaff05a1943537554cdcf9f9accdc39e82e9aca81439a0b233de933039d780f12f5e
data/.gitignore CHANGED
@@ -9,3 +9,4 @@
9
9
  /tmp/
10
10
  *.swp
11
11
  *.gem
12
+ .tool-versions
data/README.md CHANGED
@@ -22,9 +22,35 @@ Or install it yourself as:
22
22
 
23
23
  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.
24
24
 
25
+ By Default, any object can be leaf, and renders as `to_s`.
26
+
25
27
  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.
26
28
 
27
29
  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`.
28
30
 
29
31
  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.
30
32
 
33
+ ## Extending
34
+
35
+ You may register more handlers for responsing key press. For example, to do something when hovering on any `li` and pressing `r`
36
+
37
+ ```javascript
38
+ TreeHtml.hover_press('r', function(li){
39
+ // actions
40
+ })
41
+ ```
42
+
43
+ You may also group `li`s with same key under additional `ul`:
44
+
45
+ ```javascript
46
+ var switch = TreeHtmlGroup({
47
+ name: 'by_whatever_key',
48
+ key: function get_path(li) {
49
+ var p = li.querySelector('a').innerText.replace(/* key calculation here */)
50
+ return '<b>' + p + '</b>'
51
+ }
52
+ })
53
+
54
+ switch('by_whatever_key')
55
+ switch('') // switch back
56
+ ```
@@ -0,0 +1,88 @@
1
+ var TreeHtmlGroup = (function () {
2
+ var tree = document.querySelector('ul')
3
+ var group_id = 0
4
+ var tree_id_prefix = 0
5
+
6
+ function group_by_key(ul, key_func) {
7
+ var last_key = null
8
+ var lis_groups = []
9
+
10
+ function last_group() {
11
+ return lis_groups[lis_groups.length - 1]
12
+ }
13
+
14
+ var children_count = ul.children.length
15
+ for (var i = 0; i < children_count; i++) {
16
+ var li = ul.children[i]
17
+ callee_path = key_func(li)
18
+ if (last_key !== callee_path) {
19
+ last_key = callee_path
20
+ lis_groups.push([])
21
+ }
22
+ last_group().push(li)
23
+ }
24
+
25
+ if (lis_groups.length == 1 && key_func(lis_groups[0][0]) == key_func(ul.parentElement)) {
26
+ return
27
+ }
28
+
29
+ lis_groups.forEach(function (group) {
30
+ var key = key_func(group[0])
31
+ wrap_into_group(group, key)
32
+ })
33
+ }
34
+
35
+ function wrap_into_group(lis, key) {
36
+ var id = 'g' + group_id++
37
+ var html = '<li>' +
38
+ '<input type="checkbox" id="' + id + '">' +
39
+ '<label for="' + id + '"></label>' +
40
+ '<a>' + key + '</a>' +
41
+ '<ul></ul>' +
42
+ '</li>'
43
+
44
+ lis[0].insertAdjacentHTML('beforebegin', html)
45
+ var ul = document.querySelector('#' + id + ' ~ ul')
46
+ lis.forEach(function (li) {
47
+ ul.insertAdjacentElement('beforeend', li)
48
+ })
49
+ }
50
+
51
+ function switch_tree(name) {
52
+ var id = name === '' ? name : name_to_id(name)
53
+ document.querySelectorAll('.tree-html').forEach(function (tree) {
54
+ if (tree.id !== id) {
55
+ tree.style = 'display:none'
56
+ } else {
57
+ tree.style = ''
58
+ }
59
+ })
60
+ }
61
+
62
+ function name_to_id(name) {
63
+ return 'tree-html-group-' + name
64
+ }
65
+
66
+ return function (opt) {
67
+ var id = name_to_id(opt['name'])
68
+ if (document.getElementById(id)) {
69
+ return switch_tree
70
+ }
71
+
72
+ var id_pattern = '$1p-' + tree_id_prefix++ + '$2$3'
73
+ var li_ids_changed = tree.innerHTML
74
+ .replace(/(<input type="checkbox" id=")(.+?)(">)/, id_pattern)
75
+ .replace(/(<label for=")(.+?)(">)/, id_pattern)
76
+
77
+ tree.insertAdjacentHTML('beforebegin', '<ul id="' + id + '" class="tree-html" style="display:none">' + li_ids_changed + '</ul>')
78
+
79
+ var uls = document.querySelectorAll('#' + id + ',#' + id + ' ul')
80
+ var key_func = opt['key']
81
+ for (var i = uls.length - 1; i > 0; i--) {
82
+ var ul = uls[i]
83
+ group_by_key(ul, key_func)
84
+ }
85
+
86
+ return switch_tree
87
+ }
88
+ })();
@@ -1,5 +1,4 @@
1
- var key_cmds = {f: 'fold', u: 'unfold', p: 'prev', n: 'next'};
2
- (function(){
1
+ var TreeHtml = (function(){
3
2
  var cmd, node, action;
4
3
  var id = 0;
5
4
 
@@ -94,11 +93,41 @@ var key_cmds = {f: 'fold', u: 'unfold', p: 'prev', n: 'next'};
94
93
  }
95
94
  };
96
95
 
97
- document.onkeypress = function(e) {
96
+ var key_cmds = {f: 'fold', u: 'unfold', p: 'prev', n: 'next'};
97
+
98
+ var resp_keypress = [function(e) {
98
99
  e = e || window.event;
99
100
  (cmd = match_key(e)) &&
100
101
  (action = actions[cmd]) &&
101
102
  (node = hovering()) &&
102
103
  action(node);
104
+ }];
105
+
106
+ document.onkeypress = function(e) {
107
+ for(var i = 0; i < resp_keypress.length; i++) {
108
+ resp_keypress[i](e);
109
+ }
110
+ };
111
+
112
+ return {
113
+ debug: function() {
114
+ debugger;
115
+ },
116
+ more_onkeypress: function(f) {
117
+ resp_keypress.push(f);
118
+ },
119
+ hover_press: function(key, fun) {
120
+ var conn = Math.random().toString();
121
+ key_cmds[key] = conn;
122
+ actions[conn] = fun;
123
+ },
124
+ no_hover_press: function(key) {
125
+ delete actions[key_cmds[key]];
126
+ delete key_cmds[key];
127
+ },
128
+ sub_hover_press: function(old, neo) {
129
+ key_cmds[neo] = key_cmds[old];
130
+ delete key_cmds[old];
131
+ },
103
132
  };
104
133
  })();
@@ -1,3 +1,3 @@
1
1
  module TreeHtml
2
- VERSION = "0.1.5"
2
+ VERSION = "0.1.8"
3
3
  end
data/lib/tree_html.rb CHANGED
@@ -7,7 +7,13 @@ module TreeHtml
7
7
  BLANK = ''.freeze
8
8
  NO_CUSTOM_JS = [].freeze
9
9
  Css = File.read File.expand_path('../tree_html/tree_html.css', __FILE__)
10
- Js = File.read File.expand_path('../tree_html/tree_html.js', __FILE__)
10
+ Js = Dir.glob("#{File.expand_path(__dir__)}/tree_html/*.js").map{|f| File.read f }.join(';')
11
+
12
+ class ::Object
13
+ def li_for_tree_html
14
+ "<li>#{NO_CHECKBOX}<a>#{to_s}</a></li>"
15
+ end
16
+ end
11
17
 
12
18
  def tree_html
13
19
  "<ul class='tree-html'>#{li_for_tree_html}</ul>"
data/tree_html.gemspec CHANGED
@@ -20,7 +20,7 @@ Gem::Specification.new do |spec|
20
20
  spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
21
21
  spec.require_paths = ["lib"]
22
22
 
23
- spec.add_development_dependency "bundler", "~> 1.14"
24
- spec.add_development_dependency "rake", "~> 10.0"
23
+ spec.add_development_dependency "bundler", ">= 2.2.33"
24
+ spec.add_development_dependency "rake", ">= 12.3.3"
25
25
  spec.add_development_dependency "minitest", "~> 5.0"
26
26
  end
metadata CHANGED
@@ -1,43 +1,43 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: tree_html
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.5
4
+ version: 0.1.8
5
5
  platform: ruby
6
6
  authors:
7
7
  - ken
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2017-12-04 00:00:00.000000000 Z
11
+ date: 2022-05-21 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
15
15
  requirement: !ruby/object:Gem::Requirement
16
16
  requirements:
17
- - - "~>"
17
+ - - ">="
18
18
  - !ruby/object:Gem::Version
19
- version: '1.14'
19
+ version: 2.2.33
20
20
  type: :development
21
21
  prerelease: false
22
22
  version_requirements: !ruby/object:Gem::Requirement
23
23
  requirements:
24
- - - "~>"
24
+ - - ">="
25
25
  - !ruby/object:Gem::Version
26
- version: '1.14'
26
+ version: 2.2.33
27
27
  - !ruby/object:Gem::Dependency
28
28
  name: rake
29
29
  requirement: !ruby/object:Gem::Requirement
30
30
  requirements:
31
- - - "~>"
31
+ - - ">="
32
32
  - !ruby/object:Gem::Version
33
- version: '10.0'
33
+ version: 12.3.3
34
34
  type: :development
35
35
  prerelease: false
36
36
  version_requirements: !ruby/object:Gem::Requirement
37
37
  requirements:
38
- - - "~>"
38
+ - - ">="
39
39
  - !ruby/object:Gem::Version
40
- version: '10.0'
40
+ version: 12.3.3
41
41
  - !ruby/object:Gem::Dependency
42
42
  name: minitest
43
43
  requirement: !ruby/object:Gem::Requirement
@@ -68,8 +68,9 @@ files:
68
68
  - bin/console
69
69
  - bin/setup
70
70
  - lib/tree_html.rb
71
+ - lib/tree_html/group.js
72
+ - lib/tree_html/shortkey.js
71
73
  - lib/tree_html/tree_html.css
72
- - lib/tree_html/tree_html.js
73
74
  - lib/tree_html/version.rb
74
75
  - tree_html.gemspec
75
76
  homepage: https://github.com/turnon/tree_html
@@ -91,8 +92,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
91
92
  - !ruby/object:Gem::Version
92
93
  version: '0'
93
94
  requirements: []
94
- rubyforge_project:
95
- rubygems_version: 2.2.2
95
+ rubygems_version: 3.1.6
96
96
  signing_key:
97
97
  specification_version: 4
98
98
  summary: generate plain css tree structure