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

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.

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