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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 461e1d2d860df917423ed9dea49891739dd1129bda4aabb4bb9a9fc9bfbd09d8
-  data.tar.gz: 85189a9d92e881b4570f395357673b42d3bdd272fed80d2b1b718a3d67ff13a7
+  metadata.gz: 79ee9882999f6e27787ce575352f3382272a502fa99c3e33090c265110290ab8
+  data.tar.gz: 1c8d5d2001a1b8f277ae84fc0c4e0f0d54f65266d97bd948e78835de7d5a91ae
 SHA512:
-  metadata.gz: 1d3cf0e88c3852b1660f133bff1253d674b0ffa2ed38d0e1e700cbb1e7d41449582c007df86d8f1af20539717d5bdcbff85f8f732b47255b0198eddaa87378bd
-  data.tar.gz: fe30e9640c17b3cdbd64f78ead25dc37735eaf5275c1a75f918b00d185caceb3499673aad700938ed117be83c7ffa6e30b4e5e84ae08f46b55df47d2571d72f1
+  metadata.gz: 4bf6818b2492f96aee01f2d29658e09a5bac3614e3c6e6565a83a817d0b1c5cf80897da04ca7859f0fe2fa6ce587cd5f10e37b74688a78e3c4d07a94a0b8d350
+  data.tar.gz: 12a6df3597b1c1da6fbff9f3bf130d1ec34d0485102bf780a27d8cde79596a22ca44b8f6620ab202ca6ac03d386da94e155d58b49d186e47117a02864ea5998e

data/CHANGELOG.adoc

@@ -4,6 +4,38 @@
 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.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
+
+* Only sync congruent tabs blocks (i.e., tabs blocks that have the same tablist) (#47)
+* Store sync tab selection by sync group (e.g., `preferred-tab-a|b|c`) (#47)
+
+=== Fixed
+
+* Turn off :focus-visible outline on tab selected by URL fragment
+
+=== Details
+
+{url-repo}/releases/tag/v1.0.0-beta.2[git tag] | {url-repo}/compare/v1.0.0-beta.1\...v1.0.0-beta.2[full diff]
+
 == 1.0.0-beta.1 (2023-01-30) - @mojavelinux
 
 === Added

data/README.adoc

@@ -1,6 +1,6 @@
 = Asciidoctor Tabs
 Dan Allen <https://github.com/mojavelinux[@mojavelinux]>
-v1.0.0-beta.1, 2023-01-30
+v1.0.0-beta.3, 2023-02-01
 :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.
 
@@ -85,7 +86,7 @@ The term is used as the tab's label and the description is used as the tab's con
 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.
 
-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 tab block (or just as a matter of style).
+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).
 
 [,asciidoc]
 ----
@@ -125,12 +126,18 @@ Tab B:: Contents of tab B in second 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`).
+
 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.
 
 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

@@ -22,6 +22,10 @@
   position: relative;
 }
 
+.tablist > ul li:focus-visible {
+  outline: none;
+}
+
 .tablist.ulist,
 .tablist.ulist > ul li {
   margin: 0;

data/data/js/tabs.js

@@ -8,14 +8,11 @@
 
   function init (tabsBlocks) {
     if (!tabsBlocks.length) return
-    var preferredSyncId = 'syncStorageKey' in config
-      ? window[(config.syncStorageScope || 'local') + 'Storage'].getItem(config.syncStorageKey)
-      : undefined
     forEach.call(tabsBlocks, function (tabs) {
       var syncIds = tabs.classList.contains('is-sync') ? {} : undefined
       var tablist = tabs.querySelector('.tablist ul')
       tablist.setAttribute('role', 'tablist')
-      var first, selectedTab
+      var initial
       forEach.call(tablist.querySelectorAll('li'), function (tab, idx) {
         tab.setAttribute('role', (tab.className = 'tab')) // NOTE converter may not have set class on li
         var id, anchor, syncId
@@ -25,11 +22,10 @@
         }
         var panel = tabs.querySelector('.tabpanel[aria-labelledby~="' + id + '"]')
         if (!panel) return // invalid state
-        if (!idx) first = { tab: tab, panel: panel }
         tab.tabIndex = -1
-        syncIds && !((syncId = tab.textContent.trim()) in syncIds) && (syncIds[(tab.dataset.syncId = syncId)] = true)
-          ? syncId === preferredSyncId ? toggleSelected((selectedTab = tab), true) : toggleHidden(panel, true)
-          : (syncId = toggleHidden(panel, true))
+        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)
         tab.setAttribute('aria-controls', panel.id)
         panel.setAttribute('role', 'tabpanel')
         forEach.call(panel.querySelectorAll('table.tableblock'), function (table) {
@@ -39,12 +35,24 @@
         var onClick = syncId === undefined ? activateTab : activateTabSync
         tab.addEventListener('click', onClick.bind({ tabs: tabs, tab: tab, panel: panel }))
       })
-      if (!selectedTab && first) toggleSelected(first.tab, true) || toggleHidden(first.panel, false)
+      if (syncIds && initial) {
+        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 + '-' + 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)
+      }
     })
     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)
   }
 
@@ -58,8 +66,9 @@
     forEach.call(tabs.querySelectorAll('.tabpanel'), function (el) {
       toggleHidden(el, el !== panel)
     })
-    if (!this.isSync && 'syncStorageKey' in config && tab.dataset.syncId !== undefined) {
-      window[(config.syncStorageScope || 'local') + 'Storage'].setItem(config.syncStorageKey, tab.dataset.syncId)
+    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
     var loc = window.location
@@ -70,23 +79,32 @@
 
   function activateTabSync (e) {
     activateTab.call(this, e)
-    var tabs = this.tabs
+    var thisTabs = this.tabs
     var thisTab = this.tab
-    var initialY = tabs.getBoundingClientRect().y
-    forEach.call(document.querySelectorAll('.tabs .tablist .tab'), function (tab) {
-      if (tab !== thisTab && tab.dataset.syncId === thisTab.dataset.syncId) activateTab.call({ tab: tab, isSync: true })
+    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) {
+        if (tab.dataset.syncId === thisTab.dataset.syncId) activateTab.call({ tabs: tabs, tab: tab, isSync: true })
+      })
     })
-    var shiftedBy = tabs.getBoundingClientRect().y - initialY
+    var shiftedBy = thisTabs.getBoundingClientRect().y - initialY
     if (shiftedBy && (shiftedBy = Math.round(shiftedBy))) window.scrollBy({ top: shiftedBy, behavior: 'instant' })
   }
 
+  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
   }
 
@@ -95,6 +113,6 @@
     if (!id) return
     var tab = document.getElementById(~id.indexOf('%') ? decodeURIComponent(id) : id)
     if (!(tab && tab.classList.contains('tab'))) return
-    tab.dataset.syncId === undefined ? activateTab.call({ tab: tab }) : activateTabSync.call({ tab: tab })
+    'syncId' in tab.dataset ? activateTabSync.call({ tab: tab }) : activateTab.call({ tab: tab })
   }
 })()

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.1'
+    VERSION = '1.0.0.beta.3'
   end
 end

metadata

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