tree_html 0.1.6 → 0.1.9
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 +5 -5
- data/.gitignore +1 -0
- data/README.md +31 -1
- data/lib/tree_html/group.js +88 -0
- data/lib/tree_html/{tree_html.js → shortkey.js} +0 -0
- data/lib/tree_html/version.rb +1 -1
- data/lib/tree_html.rb +12 -1
- data/tree_html.gemspec +2 -2
- metadata +13 -13
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
|
-
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: 20504c724cbd2859c9bfc6c6235f17cabd109932adc86ed84ee60f2549e540e5
|
4
|
+
data.tar.gz: 4b2f5d2ca583f0f79d6ba403f1e566966ba3a582ae1d8a507d72c66a74d51aa6
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 21139d38408d2be9a12e9f1e0b7396a6371568d7467d780827935248c959ada040613e0c801e8e74e5cb1f4982ad87edc6b00c98027d86b461d51ecc488c95ef
|
7
|
+
data.tar.gz: a6d3e49ee00f675c8acd0a5ee89c7555c1fb4ef8805aa82a4c89fd8d7d85814fc5bf12414173e3237b091059b0ac08a434b0cb2cf4692d8120b0563d154a5bdf
|
data/.gitignore
CHANGED
data/README.md
CHANGED
@@ -20,7 +20,13 @@ Or install it yourself as:
|
|
20
20
|
|
21
21
|
## Usage
|
22
22
|
|
23
|
-
In Node class, `include TreeHtml
|
23
|
+
In Node class, `include TreeHtml`.
|
24
|
+
|
25
|
+
Then implement `label_for_tree_html` and `children_for_tree_html` for Branch class, and `label_for_tree_html` for Leaf class.
|
26
|
+
|
27
|
+
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.
|
28
|
+
|
29
|
+
By Default, any object can be leaf, and renders as `to_s`.
|
24
30
|
|
25
31
|
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
32
|
|
@@ -28,3 +34,27 @@ In generated html, hover a branch and press `f`/`u` to fold/unfold it's children
|
|
28
34
|
|
29
35
|
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
36
|
|
37
|
+
## Extending
|
38
|
+
|
39
|
+
You may register more handlers for responsing key press. For example, to do something when hovering on any `li` and pressing `r`
|
40
|
+
|
41
|
+
```javascript
|
42
|
+
TreeHtml.hover_press('r', function(li){
|
43
|
+
// actions
|
44
|
+
})
|
45
|
+
```
|
46
|
+
|
47
|
+
You may also group `li`s with same key under additional `ul`:
|
48
|
+
|
49
|
+
```javascript
|
50
|
+
var switch = TreeHtmlGroup({
|
51
|
+
name: 'by_whatever_key',
|
52
|
+
key: function get_path(li) {
|
53
|
+
var p = li.querySelector('a').innerText.replace(/* key calculation here */)
|
54
|
+
return '<b>' + p + '</b>'
|
55
|
+
}
|
56
|
+
})
|
57
|
+
|
58
|
+
switch('by_whatever_key')
|
59
|
+
switch('') // switch back
|
60
|
+
```
|
@@ -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
|
+
})();
|
File without changes
|
data/lib/tree_html/version.rb
CHANGED
data/lib/tree_html.rb
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
require "tree_html/version"
|
2
|
+
require "cgi"
|
2
3
|
|
3
4
|
module TreeHtml
|
4
5
|
|
@@ -7,7 +8,17 @@ module TreeHtml
|
|
7
8
|
BLANK = ''.freeze
|
8
9
|
NO_CUSTOM_JS = [].freeze
|
9
10
|
Css = File.read File.expand_path('../tree_html/tree_html.css', __FILE__)
|
10
|
-
Js =
|
11
|
+
Js = Dir.glob("#{File.expand_path(__dir__)}/tree_html/*.js").map{|f| File.read f }.join(';')
|
12
|
+
|
13
|
+
class ::Object
|
14
|
+
def li_for_tree_html
|
15
|
+
"<li>#{NO_CHECKBOX}<a>#{label_for_tree_html}</a></li>"
|
16
|
+
end
|
17
|
+
|
18
|
+
def label_for_tree_html
|
19
|
+
CGI::escapeHTML(to_s)
|
20
|
+
end
|
21
|
+
end
|
11
22
|
|
12
23
|
def tree_html
|
13
24
|
"<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", "
|
24
|
-
spec.add_development_dependency "rake", "
|
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.
|
4
|
+
version: 0.1.9
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- ken
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2022-05-27 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:
|
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:
|
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:
|
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:
|
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
|
-
|
95
|
-
rubygems_version: 2.6.8
|
95
|
+
rubygems_version: 3.0.3
|
96
96
|
signing_key:
|
97
97
|
specification_version: 4
|
98
98
|
summary: generate plain css tree structure
|