Class: JsTreeBuilder

Inherits:
Object
  • Object
show all
Defined in:
lib/jstreebuilder.rb

Defined Under Namespace

Classes: TreeBuilder

Constant Summary collapse

TREE_CSS = 
%q[
/* Remove default bullets */
ul, #myUL {
  list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#myUL {
  margin: 0;
  padding: 0;
}

/* Style the caret/arrow */
.caret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
  transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
  display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
  display: block;
}
]
TREE_CSS + %q[

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  width: 25%;
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 10px;
  height: 90%;
  overflow: auto;
  background: #eee;
  overflow-x: hidden;
  padding: 12px 0;
}

.sidenav a {
  padding: 2px 8px 2px 6px;
  text-decoration: none;
  font-size: 23px;
  color: #2166F3;

}

.sidenav a:hover {
  color: #064579;
}

.main {
  margin-left: 25%; /* Same width as the sidebar + left position in px */
  font-size: 26px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 19 px;}
}
]
PLAIN_CSS = 
"
ul {
  list-style-type: none;
  background-color: transparent;
  margin: 0.1em 0.1em; padding: 0.3em 1.3em
}
ul li {
  background-color: transparent;
  margin: 0.1em 0.1em; padding: 0.3em 0.3em
}
"
TREE_JS = 
<<EOF
var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}
EOF
TREE_JS
PLAIN_JS = 
''

Instance Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(unknown = nil, options = {}) ⇒ JsTreeBuilder

Returns a new instance of JsTreeBuilder.



327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
 
# File 'lib/jstreebuilder.rb', line 327

def initialize(unknown=nil, options={})

  if unknown.is_a? String or unknown.is_a? Symbol then
    type = unknown.to_sym
  elsif unknown.is_a? Hash
    options = {type: :tree}.merge(unknown)
    type = options[:type]
  end

  @debug = options[:debug]

  @types = %i(tree sidebar plain)

  build(type, options) if type

end

Instance Attribute Details

#css ⇒ Object (readonly)

Returns the value of attribute css.



325
326
327
 
# File 'lib/jstreebuilder.rb', line 325

def css
  @css
end

#html ⇒ Object (readonly)

Returns the value of attribute html.



325
326
327
 
# File 'lib/jstreebuilder.rb', line 325

def html
  @html
end

#js ⇒ Object (readonly)

Returns the value of attribute js.



325
326
327
 
# File 'lib/jstreebuilder.rb', line 325

def js
  @js
end

Instance Method Details

#to_css ⇒ Object 



344
345
346
 
# File 'lib/jstreebuilder.rb', line 344

def to_css()
  @css
end

#to_html ⇒ Object 



348
349
350
 
# File 'lib/jstreebuilder.rb', line 348

def to_html()
  @html
end

#to_js ⇒ Object 



352
353
354
 
# File 'lib/jstreebuilder.rb', line 352

def to_js()
  @js
end

#to_ul ⇒ Object 



356
357
358
 
# File 'lib/jstreebuilder.rb', line 356

def to_ul()
  @ul
end

#to_webpage ⇒ Object 



360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
 
# File 'lib/jstreebuilder.rb', line 360

def to_webpage()

  a = RexleBuilder.build do |xml|
    xml.html do
      xml.head do
        xml.meta name: "viewport", content: \
            "width=device-width, initial-scale=1"
        xml.style "\nbody {font-family: Arial;}\n\n" + @css
      end
      xml.body @ul
    end
  end

  doc = Rexle.new(a)

  doc.root.element('body').add \
      Rexle::Element.new('script').add_text "\n" +
      @js.gsub(/^ +\/\/[^\n]+\n/,'')

  "<!DOCTYPE html>\n" + doc.xml(pretty: true, declaration: false)\
      .gsub(/<\/div>/,'\0' + "\n").gsub(/\n *<!--[^>]+>/,'')

end

#to_xml ⇒ Object 



384
385
386
 
# File 'lib/jstreebuilder.rb', line 384

def to_xml()
  @xml
end