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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 9821ccd545e0f33c61a66334678756dd76cd3469
4
- data.tar.gz: 4a959045dde16108369f743bd1605cebf5e949c1
3
+ metadata.gz: 42717ea15b10916a6a8edf195ad8ea170e7ed4b6
4
+ data.tar.gz: dc36cbe0dde1587310dd1f7f7b8acb986ed0e76c
5
5
  SHA512:
6
- metadata.gz: 9aa8bceb50ff91d99f1d6f52a3a5de640d0625ff2dd6c02926e4071c95aec147774049571aa4800ea750867f89121edb89d073ffeb3f85a99b9522eb43c37486
7
- data.tar.gz: 961d699aa74346477e187740f943c7b0a6b074396f38a14d3929b99752322425bb6145256178bd5f1f7b9e245c0d95265393a87b322011c2dd5a4ab2a08194fa
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
 
@@ -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><meta charset='utf-8'/><style>#{main_css_for_tree_html + css_for_tree_html}</style></head>"\
16
- "<body>#{tree_html}</body>"\
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
- Css = File.expand_path('../tree_html/tree_html.css', __FILE__)
31
+ protected
21
32
 
22
- def main_css_for_tree_html
23
- File.read(Css)
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
- protected
37
+ def data_for_tree_html
38
+ NO_DATA_IN_A
39
+ end
27
40
 
28
- def li_for_tree_html
29
- "<li>#{checkbox_for_tree_html}<a #{data_in_a_for_tree_html}>#{label_for_tree_html}</a>#{sub_ul_for_tree_html}</li>"
41
+ def css_for_tree_html
42
+ BLANK
30
43
  end
31
44
 
32
- def data_in_a_for_tree_html
33
- data_for_tree_html.map{ |k, v| "data-#{k}='#{v}'" }.join(" ")
45
+ def head_js_for_tree_html
46
+ NO_CUSTOM_JS
34
47
  end
35
48
 
36
- def data_for_tree_html
37
- NO_DATA_IN_A
49
+ def body_js_for_tree_html
50
+ NO_CUSTOM_JS
38
51
  end
39
52
 
40
- def checkbox_for_tree_html
53
+ private
54
+
55
+ def sub_ul
41
56
  if children_for_tree_html.empty?
42
- NO_CHECKBOX
57
+ BLANK
43
58
  else
44
- "<input type='checkbox' id='#{object_id}'><label for='#{object_id}'></label>"
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 sub_ul_for_tree_html
63
+ def checkbox
49
64
  if children_for_tree_html.empty?
50
- BLANK
65
+ NO_CHECKBOX
51
66
  else
52
- "<ul>#{children_for_tree_html.map{|c| c.li_for_tree_html}.join}</ul>"
67
+ "<input type='checkbox' id='#{object_id}'><label for='#{object_id}'></label>"
53
68
  end
54
69
  end
55
70
 
56
- def css_for_tree_html
57
- BLANK
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
@@ -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
+ })();
@@ -1,3 +1,3 @@
1
1
  module TreeHtml
2
- VERSION = "0.1.4"
2
+ VERSION = "0.1.5"
3
3
  end
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
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-11 00:00:00.000000000 Z
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.6.8
95
+ rubygems_version: 2.2.2
95
96
  signing_key:
96
97
  specification_version: 4
97
98
  summary: generate plain css tree structure