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 +5 -5
- data/.gitignore +1 -0
- data/README.md +26 -0
- data/lib/tree_html/group.js +88 -0
- data/lib/tree_html/{tree_html.js → shortkey.js} +32 -3
- data/lib/tree_html/version.rb +1 -1
- data/lib/tree_html.rb +7 -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: 38b6feffd5a7b44acca5b51ac501b4de6a714d5eda38700d867b1d7a345b145b
|
4
|
+
data.tar.gz: 1efb12cbe56fe1c97b658e086f7f639d82ad2190198b6868262b341964ab3fad
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 281f428f38623f6b4ba961348073a1f4e9fe1a9e7f2204a857efe6950974c15a854ac2426de0b471b1d843e55a9d33fadda75302e7c8b9fceecbe399aab34769
|
7
|
+
data.tar.gz: 2279a74ba2795b54a6347edbd51b95b355a45645777020135a74b84979d7eaff05a1943537554cdcf9f9accdc39e82e9aca81439a0b233de933039d780f12f5e
|
data/.gitignore
CHANGED
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
|
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
|
-
|
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
|
})();
|
data/lib/tree_html/version.rb
CHANGED
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 =
|
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", "
|
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.8
|
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-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:
|
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.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
|