asciidoctor-html 2.0.0 → 2.0.2

data/lib/asciidoctor/html/book.rb

@@ -51,7 +51,8 @@ module Asciidoctor
                          :chaptitle,
                          :chapheading,
                          :chapsubheading,
-                         :index)
+                         :index,
+                         :outline)
 
       # opts:
       # - title
@@ -134,7 +135,8 @@ module Asciidoctor
           chaptitle: chapsubheading,
           chapheading: (chapref unless index.zero?),
           chapsubheading:,
-          index:
+          index:,
+          outline: outline(key, doc)
         )
         process_doc key, doc, tdata, chapref
       end
@@ -152,7 +154,8 @@ module Asciidoctor
           chaptitle: BookTemplate.appendix_title(chapname, chapnum, chapsubheading, num_appendices),
           chapheading: chapref,
           chapsubheading:,
-          index:
+          index:,
+          outline: outline(key, doc)
         )
         process_doc key, doc, tdata, chapref
       end
@@ -202,22 +205,18 @@ module Asciidoctor
         ].reject(&:empty?).join(" and ")
       end
 
-      def outline(doc)
-        return doc.attr("outline") if doc.attr?("outline")
-
+      def outline(key, doc, absolute: true)
         items = []
         doc.sections.each do |section|
           next unless section.id && section.level == 1
 
           prefix = Utils.display_sectnum(section) if section.numbered
-          items << BookTemplate.nav_item("##{section.id}", "#{prefix}#{section.title}")
+          url = "#{"#{key}.html" if absolute}##{section.id}"
+          items << BookTemplate.nav_item(url, "#{prefix}#{section.title}")
         end
         return "" unless items.size > 1
 
-        doc.set_attr("has-subnav", true)
-        outline = "<ul>#{items.join "\n"}</ul>"
-        doc.set_attr("outline", outline)
-        outline
+        "<ul>#{items.join "\n"}</ul>"
       end
 
       def html(docs)
@@ -235,7 +234,7 @@ module Asciidoctor
       def nav_items(active_key = -1, doc = nil)
         items = @templates.map do |k, td|
           active = (k == active_key)
-          subnav = active && doc ? outline(doc) : ""
+          subnav = active && doc ? outline(k, doc, absolute: false) : ""
           navtext = BookTemplate.nav_text td.chapprefix, td.chaptitle
           BookTemplate.nav_item "#{k}.html", navtext, subnav, active:
         end
@@ -251,13 +250,12 @@ module Asciidoctor
       def build_template(key, doc)
         tdata = @templates[key]
         nav_items = nav_items key, doc
-        has_subnav = doc.attr?("has-subnav")
-        subnav = has_subnav ? outline(doc) : ""
+        outline = outline key, doc, absolute: false
         content = ERB.new(doc.convert).result(binding)
         BookTemplate.html(
           content,
           nav_items,
-          has_subnav:,
+          has_subnav: !outline.empty?,
           title: @title,
           short_title: @short_title,
           authors: display_authors(doc),

data/lib/asciidoctor/html/book_template.rb

@@ -99,7 +99,7 @@ module Asciidoctor
       def self.main(opts)
         <<~HTML
           <main id="main" class="main">
-          <div id="content-container" class="content-container dynamic-width">
+          <div id="content-container" class="content-container dynamic-width"  tabindex="0">
           #{chapheader opts[:chapheading], opts[:chapsubheading]}
           <div class="chaphead d-block">
             #{toggle_button opts[:pagestyle] if opts[:has_subnav]}

data/lib/asciidoctor/html/flip.rb

@@ -17,6 +17,8 @@ module Asciidoctor
           const sectsById = { "page": []};
 
           const page = document.getElementById('page');
+          const focusEl = document.getElementById('content-container');
+          const searchForm = document.getElementById('search-form');
           const chapheading = page.querySelector('.chapheading');
           const chaptitle = page.querySelector('.chaptitle');
 
@@ -45,6 +47,12 @@ module Asciidoctor
             sects[sects.length - 1].classList.add('last-section-multipage');
           }
 
+          function focusOnLoad() {
+            if(searchForm) return;
+
+            focusEl.focus({preventScroll: true});
+          }
+
           function updatePaginator(prev, next) {
             const paginator = document.querySelector('.paginator');
             if(!paginator) return;
@@ -53,6 +61,7 @@ module Asciidoctor
             if(next) {
               const nextH = next.querySelector(':scope > h2');
               const nextLink = document.createElement('a');
+              nextLink.id = "flip-forward"
               const nextSectText = nextH && nextH.innerHTML;
               nextLink.href = '#' + next.id;
               nextLink.innerHTML = `
@@ -68,6 +77,7 @@ module Asciidoctor
               const prevH = prev.querySelector(':scope > h2');
               const prevSectitle = prevH && (prevH.innerHTML + ' ');
               const prevLink = document.createElement('a');
+              prevLink.id = "flip-back"
               let prevSectText = prevSectitle || chapheading &&
                 ('<span class="title-prefix">' + chapheading.textContent + '</span><br>');
               if(!prevH) prevSectText += chaptitle.textContent;
@@ -85,7 +95,10 @@ module Asciidoctor
           }
 
           function flip(e) {
-            if(!page.classList.contains('multi')) return;
+            if(!page.classList.contains('multi')) {
+              focusOnLoad();
+              return;
+            }
 
             e && e.preventDefault();
 
@@ -119,8 +132,7 @@ module Asciidoctor
 
             nav.forEach(el => {
               const a = el.querySelector('a');
-              const href = a && a.getAttribute('href');
-              el.classList.toggle('active', id == href.substring(1));
+              a && a.hash && el.classList.toggle('active', id == a.hash.substring(1));
             });
 
             ADHT.nudgeMenuBtn();
@@ -137,6 +149,8 @@ module Asciidoctor
                 left: 0
               });
             }
+
+            focusOnLoad();
           }
           flip();
 
@@ -158,25 +172,11 @@ module Asciidoctor
             });
           }
           function move(direction) {
-              const activeTopLevelLi = document.querySelector('#sidebar nav > ul > li.active');
-              if(!activeTopLevelLi) return;
-
-              const activeSubLi = activeTopLevelLi.querySelector('ul > li.active');
-              let href = '#page';
-              if(direction == 'left') {
-                const prevLi = activeSubLi && activeSubLi.previousElementSibling ||
-                  !activeSubLi && activeTopLevelLi.previousElementSibling;
-                if(prevLi) href = prevLi.firstElementChild.href;
-              } else if(direction == 'right') {
-                const nextLi = !activeSubLi &&
-                  (page.classList.contains('multi') && activeTopLevelLi.querySelector('ul > li') ||
-                    activeTopLevelLi.nextElementSibling) ||
-                  activeSubLi &&
-                  (activeSubLi.nextElementSibling || activeTopLevelLi.nextElementSibling) ||
-                  activeSubLi || activeTopLevelLi;
-                href = nextLi.firstElementChild.href;
-              }
-              navigation.navigate(href);
+            let link;
+            if(direction == 'right' && (link = document.getElementById('flip-forward')))
+              navigation.navigate(link.href);
+            else if (direction == 'left' && (link = document.getElementById('flip-back')))
+              navigation.navigate(link.href);
           }
           addEventListener('hashchange', flip);
           addEventListener('keyup', function(e) {
@@ -194,6 +194,8 @@ module Asciidoctor
             const viewmode = link.dataset.viewmode;
             changeViewmode(viewmode);
           }));
+
+          page.classList.add('loaded');
         })();
       JS
     end

data/lib/asciidoctor/html/list.rb

@@ -13,7 +13,7 @@ module Asciidoctor
           "list",
           "list-#{node.context}",
           ("level-#{level} pseudocode" if flat),
-          node.role
+          node.title? ? nil : node.role
         ].compact
         classes << "list-checklist" if node.option?("checklist")
         classes << "list-unmarked" if node.option?("unmarked")
@@ -25,7 +25,8 @@ module Asciidoctor
           result << display_list_item(item, inside:)
         end
         result << %(</#{tag_name}> <!-- .level-#{level} -->\n)
-        Utils.wrap_id_classes_with_title result.join("\n"), node, node.id, "list-wrapper"
+        wrap_classes = %(list-wrapper#{" #{node.role}" if node.title? && node.role})
+        Utils.wrap_id_classes_with_title result.join("\n"), node, node.id, wrap_classes
       end
 
       def self.display_list_item(item, inside: false)

data/lib/asciidoctor/html/pagination.rb

@@ -16,7 +16,7 @@ module Asciidoctor
         ]
         html << if prv
                   <<~HTML
-                    <a href="#{prv.url}">
+                    <a id="flip-back" href="#{prv.url}">
                       <div><i class="bi bi-chevron-compact-left"></i></div>
                       <div>#{%(<span class="title-prefix">#{prv.title}</span><br>) if prv.title}#{prv.text}</div>
                     </a>
@@ -26,7 +26,7 @@ module Asciidoctor
                 end
         html << if nxt
                   <<~HTML
-                    <a href="#{nxt.url}">
+                    <a id="flip-forward" href="#{nxt.url}">
                       <div>#{%(<span class="title-prefix">#{nxt.title}</span><br>) if nxt.title}#{nxt.text}</div>
                       <div><i class="bi bi-chevron-compact-right"></i></div>
                     </a>

data/lib/asciidoctor/html/subnav_block_macro.rb

@@ -1,29 +1,29 @@
 # frozen_string_literal: true
 
 require "asciidoctor"
+require "pathname"
 
 module Asciidoctor
   module Html
-    # Inserts a subnav for current chapter
+    # Inserts a subnav for a chapter
     class SubnavBlockMacro < Asciidoctor::Extensions::BlockMacroProcessor
       use_dsl
 
       named :subnav
       name_positional_attributes "title"
 
-      def process(parent, _target, attrs)
-        title = %(<h5 class="block-title">#{attrs["title"]}</h5>) if attrs.include?("title")
+      def process(parent, target, attrs)
+        doc_key = Pathname(target).sub_ext "" unless target.empty?
+        title = %(<h5 class="block-title">#{parent.apply_subs attrs["title"]}</h5>) if attrs.include?("title")
         bordered_class = " bordered" if attrs.include?("border")
         border_width = attrs["border"].to_i if bordered_class
         style = %( style="border-top-width: #{border_width}px; border-bottom-width: #{border_width}px;") if border_width
-        roles = attrs["role"] if attrs.include?("role")
-        roles = attrs["roles"] if attrs.include?("roles")
-        role = " #{roles.tr ",", " "}" if roles
+        roles = " #{attrs["role"]}" if attrs.include?("role")
         content = <<~HTML
-          <div class="subnav#{bordered_class}#{role}"#{style}>
+          <div class="subnav#{bordered_class}#{roles}"#{style}>
             #{title}
             <nav>
-            <%= subnav %>
+            <%= templates.dig("#{doc_key}", "outline") || outline %>
             </nav>
           </div>
         HTML

data/lib/asciidoctor/html/version.rb

@@ -2,6 +2,6 @@
 
 module Asciidoctor
   module Html
-    VERSION = "2.0.0"
+    VERSION = "2.0.2"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: asciidoctor-html
 version: !ruby/object:Gem::Version
-  version: 2.0.0
+  version: 2.0.2
 platform: ruby
 authors:
 - Ravi Rajani