tree_html 0.1.4 → 0.1.5
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 +4 -4
- data/README.md +4 -2
- data/lib/tree_html.rb +42 -20
- data/lib/tree_html/tree_html.css +6 -0
- data/lib/tree_html/tree_html.js +104 -0
- data/lib/tree_html/version.rb +1 -1
- metadata +4 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 42717ea15b10916a6a8edf195ad8ea170e7ed4b6
|
4
|
+
data.tar.gz: dc36cbe0dde1587310dd1f7f7b8acb986ed0e76c
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 4c0917b87a483e89be53197c16b8ecdc783f167d3e3dc9dd60b03def406f1d40d00061b84041458d82104cceef4df921e2d49e6a49605cdc5d4b1439496f7efb
|
7
|
+
data.tar.gz: 897658a24ec968849c3924f46b6a9c4f566fe2c4c5db445e54ffe116998df144a7452a14e64fdf17d05acd87235f5ce614899d470085c4d65c8a2b711cf13380
|
data/README.md
CHANGED
@@ -20,9 +20,11 @@ Or install it yourself as:
|
|
20
20
|
|
21
21
|
## Usage
|
22
22
|
|
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.
|
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
|
-
You may overwrite `css_for_tree_html` to specify your own style.
|
25
|
+
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
|
+
|
27
|
+
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`.
|
26
28
|
|
27
29
|
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.
|
28
30
|
|
data/lib/tree_html.rb
CHANGED
@@ -5,6 +5,9 @@ module TreeHtml
|
|
5
5
|
NO_DATA_IN_A = {}.freeze
|
6
6
|
NO_CHECKBOX = "<label class='placeholder'></label>".freeze
|
7
7
|
BLANK = ''.freeze
|
8
|
+
NO_CUSTOM_JS = [].freeze
|
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__)
|
8
11
|
|
9
12
|
def tree_html
|
10
13
|
"<ul class='tree-html'>#{li_for_tree_html}</ul>"
|
@@ -12,48 +15,67 @@ module TreeHtml
|
|
12
15
|
|
13
16
|
def tree_html_full
|
14
17
|
"<!DOCTYPE HTML><html>"\
|
15
|
-
"<head
|
16
|
-
|
18
|
+
"<head>"\
|
19
|
+
"<meta charset='utf-8'/>"\
|
20
|
+
"<style>#{Css + css_for_tree_html}</style>"\
|
21
|
+
"#{custom_js head_js_for_tree_html}"\
|
22
|
+
"</head>"\
|
23
|
+
"<body>"\
|
24
|
+
"#{tree_html}"\
|
25
|
+
"<script>#{Js}</script>"\
|
26
|
+
"#{custom_js body_js_for_tree_html}"\
|
27
|
+
"</body>"\
|
17
28
|
"</html>"
|
18
29
|
end
|
19
30
|
|
20
|
-
|
31
|
+
protected
|
21
32
|
|
22
|
-
def
|
23
|
-
|
33
|
+
def li_for_tree_html
|
34
|
+
"<li>#{checkbox}<a #{data_in_a}>#{label_for_tree_html}</a>#{sub_ul}</li>"
|
24
35
|
end
|
25
36
|
|
26
|
-
|
37
|
+
def data_for_tree_html
|
38
|
+
NO_DATA_IN_A
|
39
|
+
end
|
27
40
|
|
28
|
-
def
|
29
|
-
|
41
|
+
def css_for_tree_html
|
42
|
+
BLANK
|
30
43
|
end
|
31
44
|
|
32
|
-
def
|
33
|
-
|
45
|
+
def head_js_for_tree_html
|
46
|
+
NO_CUSTOM_JS
|
34
47
|
end
|
35
48
|
|
36
|
-
def
|
37
|
-
|
49
|
+
def body_js_for_tree_html
|
50
|
+
NO_CUSTOM_JS
|
38
51
|
end
|
39
52
|
|
40
|
-
|
53
|
+
private
|
54
|
+
|
55
|
+
def sub_ul
|
41
56
|
if children_for_tree_html.empty?
|
42
|
-
|
57
|
+
BLANK
|
43
58
|
else
|
44
|
-
"<
|
59
|
+
"<ul>#{children_for_tree_html.map{|c| c.li_for_tree_html}.join}</ul>"
|
45
60
|
end
|
46
61
|
end
|
47
62
|
|
48
|
-
def
|
63
|
+
def checkbox
|
49
64
|
if children_for_tree_html.empty?
|
50
|
-
|
65
|
+
NO_CHECKBOX
|
51
66
|
else
|
52
|
-
"<
|
67
|
+
"<input type='checkbox' id='#{object_id}'><label for='#{object_id}'></label>"
|
53
68
|
end
|
54
69
|
end
|
55
70
|
|
56
|
-
def
|
57
|
-
|
71
|
+
def data_in_a
|
72
|
+
data_for_tree_html.map{ |k, v| "data-#{k}='#{v}'" }.join(" ")
|
73
|
+
end
|
74
|
+
|
75
|
+
def custom_js scripts
|
76
|
+
scripts.map do |s|
|
77
|
+
src = s[:src] ? "src='#{s[:src]}'" : BLANK
|
78
|
+
"<script #{src}>#{s[:text]}</script>"
|
79
|
+
end.join
|
58
80
|
end
|
59
81
|
end
|
data/lib/tree_html/tree_html.css
CHANGED
@@ -56,6 +56,12 @@ ul.tree-html>li:first-child::before {
|
|
56
56
|
background-color: #d3d3d3;
|
57
57
|
}
|
58
58
|
|
59
|
+
.tree-html a.twinkle,
|
60
|
+
.tree-html li a.twinkle:hover, .tree-html li a:hover+ul li a.twinkle,
|
61
|
+
.tree-html li a.twinkle:focus, .tree-html li a:focus+ul li a.twinkle {
|
62
|
+
background-color: #00bcd4;
|
63
|
+
}
|
64
|
+
|
59
65
|
.tree-html label {
|
60
66
|
margin: .2em 0 0 -.6em;
|
61
67
|
position: absolute;
|
@@ -0,0 +1,104 @@
|
|
1
|
+
var key_cmds = {f: 'fold', u: 'unfold', p: 'prev', n: 'next'};
|
2
|
+
(function(){
|
3
|
+
var cmd, node, action;
|
4
|
+
var id = 0;
|
5
|
+
|
6
|
+
function hovering() {
|
7
|
+
var hover = document.querySelector('a:hover');
|
8
|
+
return hover && hover.parentNode;
|
9
|
+
}
|
10
|
+
|
11
|
+
function match_key(e) {
|
12
|
+
var char_code = (typeof e.which == "number") ? e.which : e.keyCode;
|
13
|
+
return char_code > 0 && key_cmds[String.fromCharCode(char_code)];
|
14
|
+
}
|
15
|
+
|
16
|
+
function check_if_not(li, tf) {
|
17
|
+
var checkbox = li.children[0];
|
18
|
+
(checkbox.nodeName === 'INPUT') &&
|
19
|
+
(checkbox.checked === tf || (checkbox.checked = tf));
|
20
|
+
}
|
21
|
+
|
22
|
+
function check_all(lis, tf) {
|
23
|
+
for(var i = 0; i < lis.length; i++) {
|
24
|
+
check_if_not(lis[i], tf);
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
function check_children(node, tf) {
|
29
|
+
var ul, lis;
|
30
|
+
(ul = node.querySelector('ul')) &&
|
31
|
+
(lis = ul.children) &&
|
32
|
+
check_all(lis, tf);
|
33
|
+
}
|
34
|
+
|
35
|
+
function id_of(li) {
|
36
|
+
return li.id || (li.id = 'i' + id++);
|
37
|
+
}
|
38
|
+
|
39
|
+
function twinkle(a, num) {
|
40
|
+
a.className = 'twinkle';
|
41
|
+
setTimeout(function(){_twinkle(a, num);}, 200);
|
42
|
+
}
|
43
|
+
|
44
|
+
function _twinkle(a, num) {
|
45
|
+
a.className = '';
|
46
|
+
(num > 0) && setTimeout(function(){twinkle(a, num - 1);}, 200);
|
47
|
+
}
|
48
|
+
|
49
|
+
Element.prototype.documentOffsetTop = function () {
|
50
|
+
return this.offsetTop + (this.offsetParent ? this.offsetParent.documentOffsetTop() : 0);
|
51
|
+
};
|
52
|
+
|
53
|
+
function go(start, end, duration, interval, fun) {
|
54
|
+
(function _go(from, step, to){
|
55
|
+
setTimeout(function(){
|
56
|
+
fun(from);
|
57
|
+
if(from === to) return;
|
58
|
+
next_target = from + step;
|
59
|
+
if ((step < 0) ? (next_target < to) : (next_target > to)){ return _go(to, step, to); }
|
60
|
+
_go(from + step, step, to);
|
61
|
+
}, interval);
|
62
|
+
})(start, (end-start)/(duration/interval), end);
|
63
|
+
}
|
64
|
+
|
65
|
+
function jump_and_twinkle(li) {
|
66
|
+
if(!li) return;
|
67
|
+
var to = li.documentOffsetTop() - (window.innerHeight / 2);
|
68
|
+
if(Math.abs(to - window.scrollY) < (window.innerHeight * 5)){
|
69
|
+
window.scroll({
|
70
|
+
top: to,
|
71
|
+
left: 0,
|
72
|
+
behavior: 'smooth'
|
73
|
+
});
|
74
|
+
}else{
|
75
|
+
go(window.scrollY, to, 200, 20, function(y){window.scroll(0, y)});
|
76
|
+
}
|
77
|
+
twinkle(li.querySelector('a'), 6);
|
78
|
+
}
|
79
|
+
|
80
|
+
var actions = {
|
81
|
+
fold: function(node) {
|
82
|
+
check_children(node, true);
|
83
|
+
},
|
84
|
+
unfold: function(node) {
|
85
|
+
check_children(node, false);
|
86
|
+
},
|
87
|
+
prev: function(node) {
|
88
|
+
twinkle(node.querySelector('a'), 6);
|
89
|
+
jump_and_twinkle(node.previousSibling);
|
90
|
+
},
|
91
|
+
next: function(node) {
|
92
|
+
twinkle(node.querySelector('a'), 6);
|
93
|
+
jump_and_twinkle(node.nextSibling);
|
94
|
+
}
|
95
|
+
};
|
96
|
+
|
97
|
+
document.onkeypress = function(e) {
|
98
|
+
e = e || window.event;
|
99
|
+
(cmd = match_key(e)) &&
|
100
|
+
(action = actions[cmd]) &&
|
101
|
+
(node = hovering()) &&
|
102
|
+
action(node);
|
103
|
+
};
|
104
|
+
})();
|
data/lib/tree_html/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
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.5
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- ken
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-
|
11
|
+
date: 2017-12-04 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -69,6 +69,7 @@ files:
|
|
69
69
|
- bin/setup
|
70
70
|
- lib/tree_html.rb
|
71
71
|
- lib/tree_html/tree_html.css
|
72
|
+
- lib/tree_html/tree_html.js
|
72
73
|
- lib/tree_html/version.rb
|
73
74
|
- tree_html.gemspec
|
74
75
|
homepage: https://github.com/turnon/tree_html
|
@@ -91,7 +92,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
91
92
|
version: '0'
|
92
93
|
requirements: []
|
93
94
|
rubyforge_project:
|
94
|
-
rubygems_version: 2.
|
95
|
+
rubygems_version: 2.2.2
|
95
96
|
signing_key:
|
96
97
|
specification_version: 4
|
97
98
|
summary: generate plain css tree structure
|