asciidoctor-tabs 1.0.0.beta.2 → 1.0.0.beta.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0e0a17ea54a3c9b7c4c8e152b8cb6c80e4aceb4e7aaa9a03b7cf3dfdf5783d0c
-  data.tar.gz: e9f4f8844fbdf8435bbb1fc99ac600b35820cabe0a22c4b51902cf39c851e203
+  metadata.gz: e73997158c47ea046d9c2016a25cac989e0f0e12e013bdc17f0c3cde8128e55f
+  data.tar.gz: 2dd6e9907c7c2498c1ff2226f25d00d654b872644063b02230882a2090f35e45
 SHA512:
-  metadata.gz: 0e296393e9638c0131b2e4c1a20ec388944de811295d28c30548befda9d786b5131c2039c2b46096a315218bb4a5335532603b0dd9cb557388f5283af7ddc04d
-  data.tar.gz: e53ca031e1b78d56b80612403323254cd29ecf38c5a757af1996e3c08fb3a02bbe644ad9010c7a034c55062ec4b4752b669c02978ea6a90c9435d5568f280dce
+  metadata.gz: d530e0bb402fd7aa9346c5dc747efe5224436ef8d2e1fd4139a64fb84ed3f3c044069ba0fb807f12ecfe78104d6665395d979aeb1aac77465cef6bb831b1e0ad
+  data.tar.gz: c1c756f94280e8d70394c13abdfeb541f226b5eb39cfe86b514211781e5ab80bf1208e7faad6162db45571b26801ada288ae656143d074a7184ba40674afac32

data/CHANGELOG.adoc

@@ -4,6 +4,40 @@
 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.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
+
+* Allow storage of sync tab selection to be configured using `tabs-sync-storage-key` and `tabs-sync-storage-scope` document attributes
+* Add `is-loaded` class to tabs blocks on next tick after initialization for binding transitions (#50)
+* Allow sync group ID to be specified rather than derived using the `sync-group-id` attribute on the tabs block (#52)
+
+=== Changed
+
+* Rename data-sync-group attribute to data-sync-group-id
+* Don't lowercase sync group ID
+
+=== Details
+
+{url-repo}/releases/tag/v1.0.0-beta.3[git tag] | {url-repo}/compare/v1.0.0-beta.2\...v1.0.0-beta.3[full diff]
+
 == 1.0.0-beta.2 (2023-01-30) - @mojavelinux
 
 === Changed

data/README.adoc

@@ -1,6 +1,6 @@
 = Asciidoctor Tabs
 Dan Allen <https://github.com/mojavelinux[@mojavelinux]>
-v1.0.0-beta.2, 2023-01-30
+v1.0.0-beta.4, 2023-05-22
 :idprefix:
 :idseparator: -
 ifndef::env-github[:icons: font]
@@ -19,9 +19,10 @@ See the xref:js/README.adoc[README in the js folder] for details.
 
 == Overview
 
-Each set of tabs (a "`tabset`") is constructed from a description list (dlist) enclosed in an example block marked with the tabs style (i.e., `[tab]`).
-The tabbed interface that this block produces can help to organize information by code language, operating system, or product variant.
+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]`).
+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.
 The benefit of organizing information in this way is that it condenses the use of vertical space by only showing what's relevant to the reader (and thus hiding information that's irrelevant or redundant).
 The result is that readers enjoy a better user experience when reading your documentation.
 
@@ -125,8 +126,10 @@ Tab B:: Contents of tab B in second tabset.
 ====
 ----
 
-Note that only tabs blocks with congruent tablists are synchronized.
+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`).
 
 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.
@@ -134,6 +137,7 @@ If you want to delist a tabs block from sync, set the `nosync` option on that bl
 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.
 
 == Usage
 

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,42 +12,48 @@
       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
-        syncIds && (((syncId = tab.textContent.toLowerCase().trim()) in syncIds) ? (syncId = undefined) : true) &&
+        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) {
-        var syncGroup = tabs.dataset.syncGroup = Object.keys(syncIds).sort().join('|')
+      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
+          tabs.dataset.syncGroupId = syncGroupId = lst.remove(className) || className.slice(19).replace(/\u00a0/g, ' ')
+          break
+        }
+        if (syncGroupId === undefined) tabs.dataset.syncGroupId = syncGroupId = Object.keys(syncIds).sort().join('|')
         var preferredSyncId = 'syncStorageKey' in config &&
-          window[(config.syncStorageScope || 'local') + 'Storage'].getItem(config.syncStorageKey + '-' + syncGroup)
+          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()
-    forEach.call(tabsBlocks, function (tabs) {
-      tabs.classList.remove('is-loading')
-    })
+    toggleClassOnEach(tabsBlocks, 'is-loading', 'remove')
+    window.setTimeout(toggleClassOnEach.bind(null, tabsBlocks, 'is-loaded', 'add'), 0)
     window.addEventListener('hashchange', onHashChange)
   }
 
@@ -55,14 +61,14 @@
     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 && 'syncGroup' in tabs.dataset) {
-      var storageKey = config.syncStorageKey + '-' + tabs.dataset.syncGroup
+    if (!this.isSync && 'syncStorageKey' in config && 'syncGroupId' in tabs.dataset) {
+      var storageKey = config.syncStorageKey + '-' + tabs.dataset.syncGroupId
       window[(config.syncStorageScope || 'local') + 'Storage'].setItem(storageKey, tab.dataset.syncId)
     }
     if (!e) return
@@ -78,23 +84,36 @@
     var thisTab = this.tab
     var initialY = thisTabs.getBoundingClientRect().y
     forEach.call(document.querySelectorAll('.tabs'), function (tabs) {
-      if (tabs !== thisTabs && tabs.dataset.syncGroup === thisTabs.dataset.syncGroup) {
-        forEach.call(tabs.querySelectorAll('.tablist .tab'), function (tab) {
-          if (tab.dataset.syncId === thisTab.dataset.syncId) activateTab.call({ tabs: tabs, tab: tab, isSync: true })
-        })
-      }
+      if (tabs === thisTabs || tabs.dataset.syncGroupId !== thisTabs.dataset.syncGroupId) return
+      querySelectorWithSiblings(tabs, '.tablist .tab', 'tab').forEach(function (tab) {
+        if (tab.dataset.syncId === thisTab.dataset.syncId) activateTab.call({ tabs: tabs, tab: tab, isSync: true })
+      })
     })
     var shiftedBy = thisTabs.getBoundingClientRect().y - initialY
     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)
+    })
+  }
+
   function toggleHidden (el, state) {
-    el.classList.toggle('is-hidden', (el.hidden = state))
+    el.classList[(el.hidden = state) ? 'add' : 'remove']('is-hidden')
   }
 
   function toggleSelected (el, state) {
     el.setAttribute('aria-selected', '' + state)
-    el.classList.toggle('is-selected', state)
+    el.classList[state ? 'add' : 'remove']('is-selected')
     el.tabIndex = state ? 0 : -1
   }
 

data/lib/asciidoctor/tabs/block.rb

@@ -18,10 +18,10 @@ module Asciidoctor
         end
         tabs_number = doc.counter 'tabs-number'
         tabs_id = attrs['id'] || (generate_id %(tabs #{tabs_number}), doc)
-        tabs_sync = !(block.option? 'nosync') && ((block.option? 'sync') || (doc.option? 'tabs-sync')) ? ' is-sync' : ''
-        tabs_role = (tabs_role = attrs['role']) ? %( #{tabs_role}) : ''
-        tabs = create_open_block parent, nil, { 'id' => tabs_id, 'role' => %(tabs#{tabs_sync}#{tabs_role} is-loading) }
-        tabs.title = attrs['title']
+        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') : '')
+        tabs_role += (tabs_user_role = attrs['role']) ? %( #{tabs_user_role} is-loading) : ' is-loading'
+        (tabs = create_open_block parent, nil, { 'id' => tabs_id, 'role' => tabs_role }).title = attrs['title']
         tablist = create_list parent, :ulist, { 'role' => 'tablist' }
         panes = {}
         set_id_on_tab = (doc.backend == 'html5') || (list_item_supports_id? doc)

data/lib/asciidoctor/tabs/docinfo.rb

@@ -35,11 +35,19 @@ module Asciidoctor
         JAVASCRIPT_FILE = ::File.join DATA_DIR, 'js/tabs.js'
 
         def process doc
+          if doc.attr? 'tabs-sync-storage-key'
+            config_attrs = %( data-sync-storage-key="#{doc.attr 'tabs-sync-storage-key'}")
+            if doc.attr? 'tabs-sync-storage-scope'
+              config_attrs += %( data-sync-storage-scope="#{doc.attr 'tabs-sync-storage-scope'}")
+            end
+          else
+            config_attrs = ''
+          end
           if doc.attr? 'linkcss'
             src = doc.normalize_web_path 'asciidoctor-tabs.js', (doc.attr 'scriptsdir')
-            %(<script src="#{src}"></script>)
+            %(<script src="#{src}"#{config_attrs}></script>)
           elsif (script = doc.read_asset JAVASCRIPT_FILE)
-            %(<script>\n#{script.chomp}\n</script>)
+            %(<script#{config_attrs}>\n#{script.chomp}\n</script>)
           end
         end
       end

data/lib/asciidoctor/tabs/version.rb

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

metadata

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