RubyGems - tree_html - Versions diffs - 0.1.4 → 0.1.5 - Mend

tree_html 0.1.4 → 0.1.5

Files changed (7) hide show

checksums.yaml CHANGED

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9821ccd545e0f33c61a66334678756dd76cd3469
-  data.tar.gz: 4a959045dde16108369f743bd1605cebf5e949c1
+  metadata.gz: 42717ea15b10916a6a8edf195ad8ea170e7ed4b6
+  data.tar.gz: dc36cbe0dde1587310dd1f7f7b8acb986ed0e76c
 SHA512:
-  metadata.gz: 9aa8bceb50ff91d99f1d6f52a3a5de640d0625ff2dd6c02926e4071c95aec147774049571aa4800ea750867f89121edb89d073ffeb3f85a99b9522eb43c37486
-  data.tar.gz: 961d699aa74346477e187740f943c7b0a6b074396f38a14d3929b99752322425bb6145256178bd5f1f7b9e245c0d95265393a87b322011c2dd5a4ab2a08194fa
+  metadata.gz: 4c0917b87a483e89be53197c16b8ecdc783f167d3e3dc9dd60b03def406f1d40d00061b84041458d82104cceef4df921e2d49e6a49605cdc5d4b1439496f7efb
+  data.tar.gz: 897658a24ec968849c3924f46b6a9c4f566fe2c4c5db445e54ffe116998df144a7452a14e64fdf17d05acd87235f5ce614899d470085c4d65c8a2b711cf13380

data/README.md CHANGED

@@ -20,9 +20,11 @@ Or install it yourself as:
 ## Usage
-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.
+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.
-You may overwrite `css_for_tree_html` to specify your own style.
+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.
+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`.
 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.

data/lib/tree_html.rb CHANGED

@@ -5,6 +5,9 @@ module TreeHtml
   NO_DATA_IN_A = {}.freeze
   NO_CHECKBOX = "<label class='placeholder'></label>".freeze
   BLANK = ''.freeze
+  NO_CUSTOM_JS = [].freeze
+  Css = File.read File.expand_path('../tree_html/tree_html.css', __FILE__)
+  Js = File.read File.expand_path('../tree_html/tree_html.js', __FILE__)
   def tree_html
     "<ul class='tree-html'>#{li_for_tree_html}</ul>"
@@ -12,48 +15,67 @@ module TreeHtml
   def tree_html_full
     "<!DOCTYPE HTML><html>"\
-      "<head><meta charset='utf-8'/><style>#{main_css_for_tree_html + css_for_tree_html}</style></head>"\
-      "<body>#{tree_html}</body>"\
+      "<head>"\
+        "<meta charset='utf-8'/>"\
+        "<style>#{Css + css_for_tree_html}</style>"\
+        "#{custom_js head_js_for_tree_html}"\
+      "</head>"\
+      "<body>"\
+        "#{tree_html}"\
+        "<script>#{Js}</script>"\
+        "#{custom_js body_js_for_tree_html}"\
+      "</body>"\
     "</html>"
   end
-  Css = File.expand_path('../tree_html/tree_html.css', __FILE__)
+  protected
-  def main_css_for_tree_html
-    File.read(Css)
+  def li_for_tree_html
+    "<li>#{checkbox}<a #{data_in_a}>#{label_for_tree_html}</a>#{sub_ul}</li>"
   end
-  protected
+  def data_for_tree_html
+    NO_DATA_IN_A
+  end
-  def li_for_tree_html
-    "<li>#{checkbox_for_tree_html}<a #{data_in_a_for_tree_html}>#{label_for_tree_html}</a>#{sub_ul_for_tree_html}</li>"
+  def css_for_tree_html
+    BLANK
   end
-  def data_in_a_for_tree_html
-    data_for_tree_html.map{ |k, v| "data-#{k}='#{v}'" }.join(" ")
+  def head_js_for_tree_html
+    NO_CUSTOM_JS
   end
-  def data_for_tree_html
-    NO_DATA_IN_A
+  def body_js_for_tree_html
+    NO_CUSTOM_JS
   end
-  def checkbox_for_tree_html
+  private
+  def sub_ul
     if children_for_tree_html.empty?
-      NO_CHECKBOX
+      BLANK
     else
-      "<input type='checkbox' id='#{object_id}'><label for='#{object_id}'></label>"
+      "<ul>#{children_for_tree_html.map{|c| c.li_for_tree_html}.join}</ul>"
     end
   end
-  def sub_ul_for_tree_html
+  def checkbox
     if children_for_tree_html.empty?
-      BLANK
+      NO_CHECKBOX
     else
-      "<ul>#{children_for_tree_html.map{|c| c.li_for_tree_html}.join}</ul>"
+      "<input type='checkbox' id='#{object_id}'><label for='#{object_id}'></label>"
     end
   end
-  def css_for_tree_html
-    BLANK
+  def data_in_a
+    data_for_tree_html.map{ |k, v| "data-#{k}='#{v}'" }.join(" ")
+  end
+  def custom_js scripts
+    scripts.map do |s|
+      src = s[:src] ? "src='#{s[:src]}'" : BLANK
+      "<script #{src}>#{s[:text]}</script>"
+    end.join
   end
 end

data/lib/tree_html/tree_html.css CHANGED

@@ -56,6 +56,12 @@ ul.tree-html>li:first-child::before {
     background-color: #d3d3d3;
 }
+.tree-html a.twinkle,
+.tree-html li a.twinkle:hover, .tree-html li a:hover+ul li a.twinkle,
+.tree-html li a.twinkle:focus, .tree-html li a:focus+ul li a.twinkle {
+  background-color: #00bcd4;
+}
 .tree-html label {
   margin: .2em 0 0 -.6em;
   position: absolute;

data/lib/tree_html/tree_html.js ADDED

@@ -0,0 +1,104 @@
+var key_cmds = {f: 'fold', u: 'unfold', p: 'prev', n: 'next'};
+(function(){
+  var cmd, node, action;
+  var id = 0;
+  function hovering() {
+    var hover = document.querySelector('a:hover');
+    return hover && hover.parentNode;
+  }
+  function match_key(e) {
+    var char_code = (typeof e.which == "number") ? e.which : e.keyCode;
+    return char_code > 0 && key_cmds[String.fromCharCode(char_code)];
+  }
+  function check_if_not(li, tf) {
+    var checkbox = li.children[0];
+    (checkbox.nodeName === 'INPUT') &&
+      (checkbox.checked === tf || (checkbox.checked = tf));
+  }
+  function check_all(lis, tf) {
+    for(var i = 0; i < lis.length; i++) {
+      check_if_not(lis[i], tf);
+    }
+  }
+  function check_children(node, tf) {
+    var ul, lis;
+    (ul = node.querySelector('ul')) &&
+      (lis = ul.children) &&
+      check_all(lis, tf);
+  }
+  function id_of(li) {
+    return li.id || (li.id = 'i' + id++);
+  }
+  function twinkle(a, num) {
+    a.className = 'twinkle';
+    setTimeout(function(){_twinkle(a, num);}, 200);
+  }
+  function _twinkle(a, num) {
+    a.className = '';
+    (num > 0) && setTimeout(function(){twinkle(a, num - 1);}, 200);
+  }
+  Element.prototype.documentOffsetTop = function () {
+    return this.offsetTop + (this.offsetParent ? this.offsetParent.documentOffsetTop() : 0);
+  };
+  function go(start, end, duration, interval, fun) {
+    (function _go(from, step, to){
+      setTimeout(function(){
+        fun(from);
+        if(from === to) return;
+        next_target = from + step;
+        if ((step < 0) ? (next_target < to) : (next_target > to)){ return _go(to, step, to); }
+        _go(from + step, step, to);
+      }, interval);
+    })(start, (end-start)/(duration/interval), end);
+  }
+  function jump_and_twinkle(li) {
+    if(!li) return;
+    var to = li.documentOffsetTop() - (window.innerHeight / 2);
+    if(Math.abs(to - window.scrollY) < (window.innerHeight * 5)){
+      window.scroll({
+        top: to,
+        left: 0,
+        behavior: 'smooth'
+      });
+    }else{
+      go(window.scrollY, to, 200, 20, function(y){window.scroll(0, y)});
+    }
+    twinkle(li.querySelector('a'), 6);
+  }
+  var actions = {
+    fold: function(node) {
+      check_children(node, true);
+    },
+    unfold: function(node) {
+      check_children(node, false);
+    },
+    prev: function(node) {
+      twinkle(node.querySelector('a'), 6);
+      jump_and_twinkle(node.previousSibling);
+    },
+    next: function(node) {
+      twinkle(node.querySelector('a'), 6);
+      jump_and_twinkle(node.nextSibling);
+    }
+  };
+  document.onkeypress = function(e) {
+    e = e || window.event;
+    (cmd = match_key(e)) &&
+      (action = actions[cmd]) &&
+      (node = hovering()) &&
+      action(node);
+  };
+})();

data/lib/tree_html/version.rb CHANGED

@@ -1,3 +1,3 @@
 module TreeHtml
-  VERSION = "0.1.4"
+  VERSION = "0.1.5"
 end

metadata CHANGED

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tree_html
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.1.5
 platform: ruby
 authors:
 - ken
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2017-11-11 00:00:00.000000000 Z
+date: 2017-12-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -69,6 +69,7 @@ files:
 - bin/setup
 - lib/tree_html.rb
 - lib/tree_html/tree_html.css
+- lib/tree_html/tree_html.js
 - lib/tree_html/version.rb
 - tree_html.gemspec
 homepage: https://github.com/turnon/tree_html
@@ -91,7 +92,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project:
-rubygems_version: 2.6.8
+rubygems_version: 2.2.2
 signing_key:
 specification_version: 4
 summary: generate plain css tree structure