jsmenubuilder 0.2.3 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9015a21d6ec16f6a1f06b647bb7adb407699be900123a977b754997805f039a5
-  data.tar.gz: 4c6aa4d82b0ce977127ef82dbcc5c26408b32542f534db27f953e345bcc1054b
+  metadata.gz: 2b20f477b9bc4e3a1ec3a489988cb01c2dec96a3487e4e38dcbae5ce73aeedc8
+  data.tar.gz: 187797640e08f8ce47488a67b16310406886e3fc863d6a7a9da786bf71b45e23
 SHA512:
-  metadata.gz: e8af2787182d64270676455f8b7aeae116f75d38a24392a9e2018bb0b609be30b37e2e13fe488528f7729a1944914d1e50ed10f3ed02f732916880b39e539a96
-  data.tar.gz: 4b52b61bbe422c8f533801db7f635ac71d92740f71becf0d890e09344859c80b20d8b5309aa433c53f871940ba0848db1f3c42fc690fd9968848b1d03e9fed85
+  metadata.gz: 0ab2f13ac9f5d3126517bfe48d624910442ee0e578cbb3fbae93fa91ddb6d9ec3abea6382419d19c419615e92364080df45107345e4ffdd50db407aedab9cc4f
+  data.tar.gz: 5474a14409548fb0b9cd77eb4804547db0576f4358f0c36c689fe1ad60a9c5b7bcc9be6b039639881125e506aa7dd89425191b1e1d5ce06350ab90430e2d4577

data/lib/jsmenubuilder.rb

@@ -113,6 +113,45 @@ button.active {
 
 EOF
 
+ACCORDION_CSS = %q(
+.accordion {
+  background-color: #eee;
+  color: #444;
+  cursor: pointer;
+  padding: 18px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+  transition: 0.4s;
+}
+
+.active, .accordion:hover {
+  background-color: #ccc;
+}
+
+.accordion:after {
+  content: '\002B';
+  color: #777;
+  font-weight: bold;
+  float: right;
+  margin-left: 5px;
+}
+
+.active:after {
+  content: "\2212";
+}
+
+.panel {
+  padding: 0 18px;
+  background-color: white;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.2s ease-out;
+}
+)
+
 FULL_PAGE_TABS_JS =<<EOF
 function openPage(pageName,elmnt) {
   var i, tabcontent;
@@ -136,6 +175,23 @@ function openPage(pageName,elmnt) {
 document.getElementById("defaultOpen").click();
 EOF
 
+ACCORDION_JS =<<EOF
+var acc = document.getElementsByClassName("accordion");
+var i;
+
+for (i = 0; i < acc.length; i++) {
+  acc[i].addEventListener("click", function() {
+    this.classList.toggle("active");
+    var panel = this.nextElementSibling;
+    if (panel.style.maxHeight){
+      panel.style.maxHeight = null;
+    } else {
+      panel.style.maxHeight = panel.scrollHeight + "px";
+    } 
+  });
+}
+
+EOF
 
 
   attr_reader :html, :css, :js
@@ -150,7 +206,7 @@ EOF
     
     @debug = options[:debug]
 
-    @types = %i(tabs full_page_tabs)
+    @types = %i(tabs full_page_tabs accordion)
     
     build(type, options) if type
 
@@ -243,6 +299,7 @@ EOF
     return unless @types.include? type.to_sym
     
     doc = method(type.to_sym).call(options)
+    puts 'doc: ' + doc.inspect if @debug
     
     @html = doc.xml(pretty: true, declaration: false)\
       .gsub(/<\/div>/,'\0' + "\n").strip.lines[1..-2]\
@@ -258,19 +315,26 @@ EOF
   def build_xml(type, opt={})
 
     puts 'inside build_xml'.info if @debug
+    puts 'type: ' + type.inspect if @debug
     
-    options = {active: '1'}.merge(opt)
+    options = if type.to_s =~ /tabs\b/ then
+      {active: '1'}.merge(opt)
+    else
+      opt
+    end    
 
-    tabs = if options[:headings] then
+    entries = if options[:headings] then
       headings = options[:headings]
       headings.zip(headings.map {|heading| ['h3', {}, heading]}).to_h
     else
-      options[:tabs]
+      options[type.to_sym]
     end
+    
+    puts 'entries: ' + entries.inspect if @debug
 
     a = RexleBuilder.build do |xml|
       xml.tags({mode: type}) do 
-        tabs.each do |heading, content|
+        entries.each do |heading, content|
           xml.tag({title: heading}, content )
         end
       end
@@ -278,8 +342,10 @@ EOF
 
     doc = Rexle.new(a)
  
-    e = doc.root.element("tag[#{options[:active]}]")
-    e.attributes[:mode] = 'active' if e
+    if options[:active] then
+      e = doc.root.element("tag[#{options[:active]}]")
+      e.attributes[:mode] = 'active' if e
+    end
 
     return doc.xml(pretty: true)
 
@@ -361,5 +427,25 @@ EOF
     
   end
 
+  def accordion(opt={})
+
+    panels = opt[:accordion]
+
+
+    a = RexleBuilder.build do |xml|
+      xml.html do 
+
+        panels.each do |heading, inner_html|
+          xml.button({class:'accordion'}, heading.to_s)
+          xml.div({class:'panel'}, inner_html)
+        end
+
+      end
+    end
+
+    return Rexle.new(a)
+    
+  end
+  
 
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jsmenubuilder
 version: !ruby/object:Gem::Version
-  version: 0.2.3
+  version: 0.2.4
 platform: ruby
 authors:
 - James Robertson
@@ -35,7 +35,7 @@ cert_chain:
   haYJPATx3zs+9jtQoiFg+keM0CPYk/5LgCv9jxxzQcSS20C8O9MWRVvYfIr47ak7
   yXrDPmRvbJLTNjDv6Tkg3vU6
   -----END CERTIFICATE-----
-date: 2019-07-19 00:00:00.000000000 Z
+date: 2019-09-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rexle
@@ -83,7 +83,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.1
+rubygems_version: 3.0.3
 signing_key: 
 specification_version: 4
 summary: Generates HTML based tabs using HTML, CSS, and JavaScript.