asciidoctor-tabs 1.0.0.beta.3 → 1.0.0.beta.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 79ee9882999f6e27787ce575352f3382272a502fa99c3e33090c265110290ab8
-  data.tar.gz: 1c8d5d2001a1b8f277ae84fc0c4e0f0d54f65266d97bd948e78835de7d5a91ae
+  metadata.gz: 917cc515ced6b0c7599132ddab2d1f72da09b6af4bf7e62774fed3be43363377
+  data.tar.gz: f72d696d910cd046e05acdec439da2f2d407088e2972bbc2a5259049cd3626a0
 SHA512:
-  metadata.gz: 4bf6818b2492f96aee01f2d29658e09a5bac3614e3c6e6565a83a817d0b1c5cf80897da04ca7859f0fe2fa6ce587cd5f10e37b74688a78e3c4d07a94a0b8d350
-  data.tar.gz: 12a6df3597b1c1da6fbff9f3bf130d1ec34d0485102bf780a27d8cde79596a22ca44b8f6620ab202ca6ac03d386da94e155d58b49d186e47117a02864ea5998e
+  metadata.gz: 500f6ee93e370b09e404531abad5d9fae5eea8cbb81ea1bf3b5a5c599dac1a48c961922fe88b9260bf8cf5a536e2db91378314433b5c35eeefff348016313f40
+  data.tar.gz: e0c6683a932a88629d79d72b38bc3c9ff0fd8ac7446a16d264e7579b13b91ebfd83032ab1193e4c389b649c418b680d5790f52e00d7e8ba2e6c6fccf847c8915

data/CHANGELOG.adoc

@@ -4,6 +4,37 @@
 This document provides a curated view of the changes to Asciidoctor Tabs per release.
 For a detailed view of what has changed, refer to the {url-repo}/commits/main[commit history] on GitHub.
 
+== 1.0.0-beta.5 (2023-05-28) - @mojavelinux
+
+=== Changed
+
+* Ensure tab number sequence follows document order when tabs blocks are nested (#61)
+
+=== Fixed
+
+* Only remove open block enclosure around tab content if it is anonymous; preserve nested tabs block (#59)
+
+=== Details
+
+{url-repo}/releases/tag/v1.0.0-beta.5[git tag] | {url-repo}/compare/v1.0.0-beta.4\...v1.0.0-beta.5[full diff]
+
+== 1.0.0-beta.4 (2023-05-22) - @mojavelinux
+
+=== Changed
+
+* Rework styles for tab to make them compatible with a transition effect; stub in effect in built-in stylesheet
+* Add tab class to tab element (if missing) rather than overwriting className property to preserve existing class names
+
+=== Fixed
+
+* Don't alter state of nested tabs when tab is selected (#55)
+* Don't wrap tables inside nested tabs with tablecontainer div multiple times (#55)
+* Fix fallback logic in behavior script when tab is missing ID or does not match a panel
+
+=== Details
+
+{url-repo}/releases/tag/v1.0.0-beta.4[git tag] | {url-repo}/compare/v1.0.0-beta.3\...v1.0.0-beta.4[full diff]
+
 == 1.0.0-beta.3 (2023-02-01) - @mojavelinux
 
 === Added

data/README.adoc

@@ -1,6 +1,6 @@
 = Asciidoctor Tabs
 Dan Allen <https://github.com/mojavelinux[@mojavelinux]>
-v1.0.0-beta.3, 2023-02-01
+v1.0.0-beta.5, 2023-05-28
 :idprefix:
 :idseparator: -
 ifndef::env-github[:icons: font]
@@ -12,14 +12,14 @@ endif::[]
 An Asciidoctor extension that adds a tabs block to the AsciiDoc syntax.
 
 NOTE: This extension is intended to be used with HTML backends (e.g., `html5`).
-For all other backends (i.e., the filetype is not html), the custom block enclosure is taken away and its contents (a dlist) is converted normally.
+For all other backends (i.e., the filetype is not html), the custom block enclosure is discarded and its contents (a dlist) is converted normally.
 
 TIP: This extension is also published as an npm package named `@asciidoctor/tabs` for use with Asciidoctor.js.
 See the xref:js/README.adoc[README in the js folder] for details.
 
 == Overview
 
-Each set of tabs (aka a "`tabset`" or tabs block) is constructed from a description list (dlist) enclosed in an example block marked with the tabs style (i.e., `[tab]`).
+Each set of tabs (i.e., a "`tabset`" or tabs block) is constructed from a description list (dlist) enclosed in an example block annotated with the tabs style (i.e., `[tab]`).
 That nested combination of blocks gets translated by this extension into a single tabs block that is a specialization of an open block.
 
 The tabbed interface produced from this block can help organize information by code language, operating system, or product variant.
@@ -57,37 +57,38 @@ Then use Bundler to install the gem:
 
 == Syntax
 
-A tabset is defined using a description list (dlist) enclosed in an example block marked with the tabs style.
+A tabset is defined using a description list (dlist) enclosed in an example block annotated with the tabs style.
 
-.document-with-tabs.adoc
+.tabs.adoc
 [,asciidoc]
 ----
 [tabs]
 ====
-Tab A:: Contents of tab A.
+Tab A:: Contents of Tab A.
 
 Tab B::
 +
-Contents of tab B.
+Contents of Tab B.
 
 Tab C::
 +
 --
-Contents of tab C.
+Contents of Tab C.
 
 Contains more than one block.
 --
 ====
 ----
 
-The tabbed content is modeled as a dlist.
+The tabs themselves are modeled as a dlist.
 Each item in the dlist becomes a separate tab.
 The term is used as the tab's label and the description is used as the tab's contents.
 The contents can be defined as primary text, attached blocks, or both.
-If the attached blocks are themselves enclosed in a single open block, the open block enclosure itself is discarded upon conversion.
+If the tab has a single attached block, and that block is an open block with no attributes, the open block enclosure itself is discarded upon conversion.
 
 You may choose to extend the block delimiter length from the typical 4 characters to 6 in order to avoid conflicts with any example blocks inside the tabs block (or just as a matter of style).
 
+.tab-with-example-block.adoc
 [,asciidoc]
 ----
 [tabs]
@@ -102,52 +103,172 @@ Tab B:: Just text.
 ======
 ----
 
+Using this technique, you can also create nested tabsets.
+
+.tab-with-nested-tabs.adoc
+[,asciidoc]
+----
+[tabs]
+======
+Tab A::
++
+Selecting Tab A reveals a tabset with Tab Y and Tab Z.
++
+[tabs]
+====
+Tab Y:: Contents of Tab Y, nested inside Tab A.
+Tab Z:: Contents of Tab Z, nested inside Tab A.
+====
+
+Tab B:: Just text.
+======
+----
+
 == Tabs Sync
 
-If you want to synchronize the tab selection across tabsets, set the `tabs-sync-option` on the document.
+If you want to synchronize (i.e., sync) the tab selection across tabsets, set the `tabs-sync-option` on the document.
 
-.document-with-tabs-sync.adoc
+.tabs-sync.adoc
 [,asciidoc]
 ----
 :tabs-sync-option:
 
 [tabs]
 ====
-Tab A:: Contents of tab A in first tabset.
-Tab B:: Contents of tab B in first tabset.
+Tab A:: Triggers selection of Tab A in other congruent tabsets.
+Tab B:: Triggers selection of Tab B in other congruent tabsets.
 ====
 
 ...
 
 [tabs]
 ====
-Tab A:: Contents of tab A in second tabset.
-Tab B:: Contents of tab B in second tabset.
+Tab A:: Triggers selection of Tab A in other congruent tabsets.
+Tab B:: Triggers selection of Tab B in other congruent tabsets.
+====
+----
+
+Only tabsets that have the same sync group ID are synchronized.
+By default, the sync group ID is computed by taking the text of each tab, sorting that list, and joining it on `|` (e.g., `A|B`).
+Each unique combination of tabs--or congruent tablist--implicitly creates a new sync group.
+
+You can override the sync group ID of a tabset using the `sync-group-id` attribute on the block.
+This allows you to control the scope of the sync or to force a tabset to participate in a sync group even if its not congruent.
+
+.tabs-with-custom-sync-groups.adoc
+[,asciidoc]
+----
+:tabs-sync-option:
+
+[tabs,sync-group-id=group-1]
+====
+Tab A:: Triggers selection of Tab A in second tabset.
+Tab B:: Triggers selection of Tab B in second tabset.
+====
+
+[tabs,sync-group-id=group-1]
+====
+Tab A:: Triggers selection of Tab A in first tabset.
+Tab B:: Triggers selection of Tab B in first tabset.
+====
+
+[tabs,sync-group-id=group-2]
+====
+Tab A:: Triggers selection of Tab A in fourth tabset.
+Tab B:: Triggers selection of Tab B in fourth tabset.
+====
+
+[tabs,sync-group-id=group-2]
+====
+Tab A:: Triggers selection of Tab A in third tabset.
+Tab B:: Triggers selection of Tab B in third tabset.
 ====
 ----
 
-Only tabs blocks with congruent tablists are synchronized by default.
-Each unique combination of tabs implicitly creates a new sync group.
-You can override the sync group ID using the `sync-group-id` attribute on a tabs block to force it to participate in a sync group.
-By default, the sync group ID is derived from the text of each tab, sorted, then joined on `|` (e.g., `A|B`).
+Instead of enabling tabs sync globally, you can set the `sync` option on individual tabs blocks.
 
-Alternately, you can set the `sync` option on each tabs block.
-If you want to delist a tabs block from sync, set the `nosync` option on that block.
+.tabs-with-sync-option.adoc
+[,asciidoc]
+----
+[tabs%sync]
+====
+Tab A:: Triggers selection of Tab A in third tabset.
+Tab B:: Triggers selection of Tab B in third tabset.
+====
+
+[tabs]
+====
+Tab A:: Does not trigger selection of Tab A in other tabsets.
+Tab B:: Does not trigger selection of Tab B in other tabsets.
+====
+
+[tabs%sync]
+====
+Tab A:: Triggers selection of Tab A in first tabset.
+Tab B:: Triggers selection of Tab B in first tabset.
+====
+----
+
+Conversely, if you want to delist a tabs block from the global sync, set the `nosync` option on that block.
+
+.tabs-with-nosync-option.adoc
+[,asciidoc]
+----
+:tabs-sync-option:
+
+[tabs]
+====
+Tab A:: Triggers selection of Tab A in third tabset.
+Tab B:: Triggers selection of Tab B in third tabset.
+====
+
+[tabs%nosync]
+====
+Tab A:: Does not trigger selection of Tab A in other tabsets.
+Tab B:: Does not trigger selection of Tab B in other tabsets.
+====
+
+[tabs]
+====
+Tab A:: Triggers selection of Tab A in first tabset.
+Tab B:: Triggers selection of Tab B in first tabset.
+====
+----
 
 If you want to persist the sync selection, assign a value to the `data-sync-storage-key` attribute on the `<script>` tag.
-By default, the sync selection will be assigned to the specified key in local storage.
-You can set the `data-sync-storage-scope` attribute on the `<script>` tag to `session` to use session storage instead.
-When using the extension on a standalone document, you can configure these options using the `tabs-sync-storage-key` and `tabs-sync-storage-scope` document attributes, respectively.
+
+[,js]
+----
+<script data-sync-storage-key="preferred-tab">
+----
+
+By default, the sync selection (per group) will be persisted to local storage (i.e., `data-sync-storage-scope="local"`) using the specified key.
+You can set the `data-sync-storage-scope` attribute on the `<script>` tag to `session` to use session storage instead of local storage.
+
+[,js]
+----
+<script data-sync-storage-key="preferred-tab" data-sync-storage-scope="session">
+----
+
+When using the extension on a standalone document (which will automatically embed the supporting script), you can configure these options using the `tabs-sync-storage-key` and `tabs-sync-storage-scope` document attributes, respectively.
+
+[,asciidoc]
+----
+:tabs-sync-storage-key: tabs
+:tabs-sync-storage-scope: session
+----
+
+In this case, the converter will set the corresponding attributes on the `<script>` tag automatically.
 
 == Usage
 
 === CLI
 
- $ asciidoctor -r asciidoctor-tabs document-with-tabs.adoc
+ $ asciidoctor -r asciidoctor-tabs tabs.adoc
 
 You can specify an alternate stylesheet for tabs using the `tabs-stylesheet` document attribute.
 
- $ asciidoctor -r asciidoctor-tabs -a tabs-stylesheet=my-tabs.css document-with-tabs.adoc
+ $ asciidoctor -r asciidoctor-tabs -a tabs-stylesheet=my-tabs.css tabs.adoc
 
 The value of the `tabs-stylesheet` attribute is handled in the same way as the built-in `stylesheet` document attribute.
 A relative path is resolved starting from the value of the `stylesdir` document attribute, which defaults to the directory of the document.
@@ -164,7 +285,7 @@ You can require `asciidoctor/tabs` to register the extension as a global extensi
 require 'asciidoctor'
 require 'asciidoctor/tabs'
 
-Asciidoctor.convert_file 'document-with-tabs.adoc', safe: :safe
+Asciidoctor.convert_file 'tabs.adoc', safe: :safe
 ----
 
 Or you can pass a registry instance to the `Extensions.register` method to register the extension with a scoped registry.
@@ -177,14 +298,14 @@ require 'asciidoctor/tabs/extensions'
 registry = Asciidoctor::Extensions.create
 Asciidoctor::Tabs::Extensions.register registry
 
-Asciidoctor.convert_file 'document-with-tabs.adoc', extension_registry: registry, safe: :safe
+Asciidoctor.convert_file 'tabs.adoc', extension_registry: registry, safe: :safe
 ----
 
 If you're not using other scoped extensions, you can pass in the extensions group without first creating a registry instance:
 
 [,js]
 ----
-Asciidoctor.convert_file 'document-with-tabs.adoc', extensions: Asciidoctor::Tabs::Extensions.group, safe: :safe
+Asciidoctor.convert_file 'tabs.adoc', extensions: Asciidoctor::Tabs::Extensions.group, safe: :safe
 ----
 
 == How it Works

data/data/css/tabs.css

@@ -35,6 +35,16 @@
   margin-left: 0.25em;
 }
 
+.tabs .tablist li::after {
+  content: "";
+  display: block;
+  height: 1px;
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+}
+
 .tabs.is-loading .tablist li:not(:first-child),
 .tabs:not(.is-loading) .tablist li:not(.is-selected) {
   background-color: #f5f5f5;
@@ -42,15 +52,15 @@
 
 .tabs.is-loading .tablist li:first-child::after,
 .tabs:not(.is-loading) .tablist li.is-selected::after {
-  background-color: inherit;
-  content: "";
-  display: block;
-  height: 3px; /* Chrome doesn't always paint the line accurately, so add a little extra */
-  position: absolute;
-  bottom: -1.5px;
-  left: 0;
-  right: 0;
+  background-color: #fff;
+}
+
+/*
+.tabs:not(.is-loading) .tablist li,
+.tabs:not(.is-loading) .tablist li::after {
+  transition: background-color 200ms ease-in-out;
 }
+*/
 
 .tablist > ul p {
   line-height: inherit;

data/data/js/tabs.js

@@ -12,30 +12,31 @@
       var syncIds = tabs.classList.contains('is-sync') ? {} : undefined
       var tablist = tabs.querySelector('.tablist ul')
       tablist.setAttribute('role', 'tablist')
-      var initial
+      var start
       forEach.call(tablist.querySelectorAll('li'), function (tab, idx) {
-        tab.setAttribute('role', (tab.className = 'tab')) // NOTE converter may not have set class on li
+        tab.tabIndex = -1
+        tab.setAttribute('role', tab.classList.add('tab') || 'tab')
         var id, anchor, syncId
-        if (!(id = tab.id)) {
-          if (!(anchor = tab.querySelector('a[id]'))) return // invalid state
-          tab.id = id = anchor.parentNode.removeChild(anchor).id
+        if (!(id = tab.id) && (anchor = tab.querySelector('a[id]'))) {
+          id = tab.id = anchor.parentNode.removeChild(anchor).id
         }
-        var panel = tabs.querySelector('.tabpanel[aria-labelledby~="' + id + '"]')
-        if (!panel) return // invalid state
-        tab.tabIndex = -1
+        var panel = id && tabs.querySelector('.tabpanel[aria-labelledby~="' + id + '"]')
+        if (!panel) return idx ? undefined : toggleSelected(tab, true) // invalid state
         syncIds && (((syncId = tab.textContent.trim()) in syncIds) ? (syncId = undefined) : true) &&
           (syncIds[(tab.dataset.syncId = syncId)] = tab)
-        idx || (initial = { tab: tab, panel: panel }) && syncIds ? toggleHidden(panel, true) : toggleSelected(tab, true)
+        idx || (syncIds && (start = { tab: tab, panel: panel })) ? toggleHidden(panel, true) : toggleSelected(tab, true)
         tab.setAttribute('aria-controls', panel.id)
         panel.setAttribute('role', 'tabpanel')
-        forEach.call(panel.querySelectorAll('table.tableblock'), function (table) {
-          var container = Object.assign(document.createElement('div'), { className: 'tablecontainer' })
-          table.parentNode.insertBefore(container, table).appendChild(table)
-        })
         var onClick = syncId === undefined ? activateTab : activateTabSync
         tab.addEventListener('click', onClick.bind({ tabs: tabs, tab: tab, panel: panel }))
       })
-      if (syncIds && initial) {
+      if (!tabs.closest('.tabpanel')) {
+        forEach.call(tabs.querySelectorAll('.tabpanel table.tableblock'), function (table) {
+          var container = Object.assign(document.createElement('div'), { className: 'tablecontainer' })
+          table.parentNode.insertBefore(container, table).appendChild(table)
+        })
+      }
+      if (start) {
         var syncGroupId
         for (var i = 0, lst = tabs.classList, len = lst.length, className; i !== len; i++) {
           if (!(className = lst.item(i)).startsWith('data-sync-group-id=')) continue
@@ -46,8 +47,8 @@
         var preferredSyncId = 'syncStorageKey' in config &&
           window[(config.syncStorageScope || 'local') + 'Storage'].getItem(config.syncStorageKey + '-' + syncGroupId)
         var tab = preferredSyncId && syncIds[preferredSyncId]
-        tab && Object.assign(initial, { tab: tab, panel: document.getElementById(tab.getAttribute('aria-controls')) })
-        toggleSelected(initial.tab, true) || toggleHidden(initial.panel, false)
+        tab && Object.assign(start, { tab: tab, panel: document.getElementById(tab.getAttribute('aria-controls')) })
+        toggleSelected(start.tab, true) || toggleHidden(start.panel, false)
       }
     })
     onHashChange()
@@ -60,10 +61,10 @@
     var tab = this.tab
     var tabs = this.tabs || (this.tabs = tab.closest('.tabs'))
     var panel = this.panel || (this.panel = document.getElementById(tab.getAttribute('aria-controls')))
-    forEach.call(tabs.querySelectorAll('.tablist .tab'), function (el) {
+    querySelectorWithSiblings(tabs, '.tablist .tab', 'tab').forEach(function (el) {
       toggleSelected(el, el === tab)
     })
-    forEach.call(tabs.querySelectorAll('.tabpanel'), function (el) {
+    querySelectorWithSiblings(tabs, '.tabpanel', 'tabpanel').forEach(function (el) {
       toggleHidden(el, el !== panel)
     })
     if (!this.isSync && 'syncStorageKey' in config && 'syncGroupId' in tabs.dataset) {
@@ -84,7 +85,7 @@
     var initialY = thisTabs.getBoundingClientRect().y
     forEach.call(document.querySelectorAll('.tabs'), function (tabs) {
       if (tabs === thisTabs || tabs.dataset.syncGroupId !== thisTabs.dataset.syncGroupId) return
-      forEach.call(tabs.querySelectorAll('.tablist .tab'), function (tab) {
+      querySelectorWithSiblings(tabs, '.tablist .tab', 'tab').forEach(function (tab) {
         if (tab.dataset.syncId === thisTab.dataset.syncId) activateTab.call({ tabs: tabs, tab: tab, isSync: true })
       })
     })
@@ -92,6 +93,14 @@
     if (shiftedBy && (shiftedBy = Math.round(shiftedBy))) window.scrollBy({ top: shiftedBy, behavior: 'instant' })
   }
 
+  function querySelectorWithSiblings (scope, selector, siblingClass) {
+    var el = scope.querySelector(selector)
+    if (!el) return []
+    var result = [el]
+    while ((el = el.nextElementSibling) && el.classList.contains(siblingClass)) result.push(el)
+    return result
+  }
+
   function toggleClassOnEach (elements, className, method) {
     forEach.call(elements, function (el) {
       el.classList[method](className)

data/lib/asciidoctor/tabs/block.rb

@@ -7,16 +7,18 @@ module Asciidoctor
       on_context :example
 
       def process parent, reader, attrs
+        tabs_number = (doc = parent.document).counter 'tabs-number'
         block = create_block parent, attrs['cloaked-context'], nil, attrs, content_model: :compound
         children = (parse_content block, reader).blocks
-        return block unless children.size == 1 && (seed_tabs = children[0]).context == :dlist && seed_tabs.items?
-        unless (doc = parent.document).attr? 'filetype', 'html'
+        unless children.size == 1 && (seed_tabs = children[0]).context == :dlist && seed_tabs.items?
+          return (reset_counter doc, 'tabs-number', (tabs_number - 1)) || block
+        end
+        unless doc.attr? 'filetype', 'html'
           (id = attrs['id']) && (doc.register :refs, [(seed_tabs.id = id), seed_tabs]) unless seed_tabs.id
           (reftext = attrs['reftext']) && (seed_tabs.set_attr 'reftext', reftext) unless seed_tabs.reftext?
           parent << seed_tabs
-          return
+          return reset_counter doc, 'tabs-number', (tabs_number - 1)
         end
-        tabs_number = doc.counter 'tabs-number'
         tabs_id = attrs['id'] || (generate_id %(tabs #{tabs_number}), doc)
         tabs_role = 'tabs' + (!(block.option? 'nosync') && ((block.option? 'sync') || (doc.option? 'tabs-sync')) ?
           ((gid = attrs['sync-group-id']) ? %( is-sync data-sync-group-id=#{gid.gsub ' ', ?\u00a0}) : ' is-sync') : '')
@@ -39,7 +41,8 @@ module Asciidoctor
             tab_blocks = content.text? ?
               [(create_paragraph parent, (content.instance_variable_get :@text), nil, subs: :normal)] : []
             if content.blocks?
-              if (block0 = (blocks = content.blocks)[0]).context == :open && blocks.size == 1 && block0.blocks?
+              if (block0 = (blocks = content.blocks)[0]).context == :open && block0.style == 'open' &&
+                  blocks.size == 1 && !(block0.id || block0.title? || block0.attributes.keys.any? {|k| k != 'style' })
                 blocks = block0.blocks
               end
               tab_blocks.push(*blocks)
@@ -81,6 +84,12 @@ module Asciidoctor
           converter.instance_variable_set :@list_item_supports_id, (output.include? ' id="name"')
         end
       end
+
+      def reset_counter doc, name, val
+        doc.counters[name] = val
+        doc.set_attr name, val unless doc.attribute_locked? name
+        nil
+      end
     end
   end
 end

data/lib/asciidoctor/tabs/version.rb

@@ -2,6 +2,6 @@
 
 module Asciidoctor
   module Tabs
-    VERSION = '1.0.0.beta.3'
+    VERSION = '1.0.0.beta.5'
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: asciidoctor-tabs
 version: !ruby/object:Gem::Version
-  version: 1.0.0.beta.3
+  version: 1.0.0.beta.5
 platform: ruby
 authors:
 - Dan Allen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-02-01 00:00:00.000000000 Z
+date: 2023-05-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: asciidoctor