asciidoctor-tabs 1.0.0.alpha.12 → 1.0.0.beta.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 601c6ff5abe598efcbd05754237c29ee0d75412553ab59596a1f44f798f8e340
-  data.tar.gz: 2dc954003e7c3d180c610d5faf0d5e1c29bb49e73434275a81305de55793a170
+  metadata.gz: 0e0a17ea54a3c9b7c4c8e152b8cb6c80e4aceb4e7aaa9a03b7cf3dfdf5783d0c
+  data.tar.gz: e9f4f8844fbdf8435bbb1fc99ac600b35820cabe0a22c4b51902cf39c851e203
 SHA512:
-  metadata.gz: 61ead4d57a662a73f3b754450127ff9ec16dc4ed40ae3a3997e0ce8562cdf3b501cba83bdc6f3c6d32d2dcc08c63900031010c1aeadad1b731f67c838848f8d0
-  data.tar.gz: e2eed95c99e32fbcd9630126ab6b9b73f88181a07f874c4f1aaf8f0b013dde42b873059ac9926b25c7127e800f1c68deddd6a88690a5650631a43a61ade848ca
+  metadata.gz: 0e296393e9638c0131b2e4c1a20ec388944de811295d28c30548befda9d786b5131c2039c2b46096a315218bb4a5335532603b0dd9cb557388f5283af7ddc04d
+  data.tar.gz: e53ca031e1b78d56b80612403323254cd29ecf38c5a757af1996e3c08fb3a02bbe644ad9010c7a034c55062ec4b4752b669c02978ea6a90c9435d5568f280dce

data/CHANGELOG.adoc

@@ -4,6 +4,36 @@
 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.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
+
+* Pass through role attribute on tabs block (#43)
+* Add configuration option to save sync selection (i.e., sync ID) in local or session storage (#44)
+
+=== Fixed
+
+* Use correct selector to unhide panel of first tab while tabs are loading
+
+=== Details
+
+{url-repo}/releases/tag/v1.0.0-beta.1[git tag] | {url-repo}/compare/v1.0.0-alpha.12\...v1.0.0-beta.1[full diff]
+
 == 1.0.0-alpha.12 (2022-12-23) - @mojavelinux
 
 === Fixed

data/README.adoc

@@ -1,6 +1,6 @@
 = Asciidoctor Tabs
 Dan Allen <https://github.com/mojavelinux[@mojavelinux]>
-v1.0.0-alpha.12, 2022-12-23
+v1.0.0-beta.2, 2023-01-30
 :idprefix:
 :idseparator: -
 ifndef::env-github[:icons: font]
@@ -85,7 +85,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,9 +125,16 @@ Tab B:: Contents of tab B in second tabset.
 ====
 ----
 
+Note that only tabs blocks with congruent tablists are synchronized.
+Each unique combination of tabs implicitly creates a new sync group.
+
 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.
+
 == Usage
 
 === CLI

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;
@@ -67,7 +71,7 @@
   border-bottom: 0;
 }
 
-.tabs.is-loading .tabpanel:not(:first-child),
+.tabs.is-loading .tabpanel + .tabpanel,
 .tabs:not(.is-loading) .tabpanel.is-hidden {
   display: none;
 }

data/data/js/tabs.js

@@ -1,6 +1,7 @@
 ;(function () { /*! Asciidoctor Tabs | Copyright (c) 2018-present Dan Allen | MIT License */
   'use strict'
 
+  var config = (document.currentScript || {}).dataset || {}
   var forEach = Array.prototype.forEach
 
   init(document.querySelectorAll('.tabs'))
@@ -11,9 +12,10 @@
       var syncIds = tabs.classList.contains('is-sync') ? {} : undefined
       var tablist = tabs.querySelector('.tablist ul')
       tablist.setAttribute('role', 'tablist')
+      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
+        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
@@ -21,22 +23,26 @@
         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) &&
+          (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')
-        idx ? toggleHidden(panel, true) : toggleSelected(tab, true)
         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 = activateTab
-        var instance = { tabs: tabs, tab: tab, panel: panel }
-        var syncId
-        if (syncIds && !((syncId = tab.textContent.trim()) in syncIds)) {
-          syncIds[(tab.dataset.syncId = syncId)] = true
-          onClick = activateTabSync
-        }
-        tab.addEventListener('click', onClick.bind(instance))
+        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('|')
+        var preferredSyncId = 'syncStorageKey' in config &&
+          window[(config.syncStorageScope || 'local') + 'Storage'].getItem(config.syncStorageKey + '-' + syncGroup)
+        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) {
@@ -55,6 +61,10 @@
     forEach.call(tabs.querySelectorAll('.tabpanel'), function (el) {
       toggleHidden(el, el !== panel)
     })
+    if (!this.isSync && 'syncStorageKey' in config && 'syncGroup' in tabs.dataset) {
+      var storageKey = config.syncStorageKey + '-' + tabs.dataset.syncGroup
+      window[(config.syncStorageScope || 'local') + 'Storage'].setItem(storageKey, tab.dataset.syncId)
+    }
     if (!e) return
     var loc = window.location
     var hashIdx = loc.hash ? loc.href.indexOf('#') : -1
@@ -64,13 +74,17 @@
 
   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 })
+    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 })
+        })
+      }
     })
-    var shiftedBy = tabs.getBoundingClientRect().y - initialY
+    var shiftedBy = thisTabs.getBoundingClientRect().y - initialY
     if (shiftedBy && (shiftedBy = Math.round(shiftedBy))) window.scrollBy({ top: shiftedBy, behavior: 'instant' })
   }
 
@@ -79,7 +93,7 @@
   }
 
   function toggleSelected (el, state) {
-    el.setAttribute('aria-selected', state)
+    el.setAttribute('aria-selected', '' + state)
     el.classList.toggle('is-selected', state)
     el.tabIndex = state ? 0 : -1
   }
@@ -89,6 +103,6 @@
     if (!id) return
     var tab = document.getElementById(~id.indexOf('%') ? decodeURIComponent(id) : id)
     if (!(tab && tab.classList.contains('tab'))) return
-    tab.dataset.syncId ? activateTabSync.call({ tab: tab }) : activateTab.call({ tab: tab })
+    'syncId' in tab.dataset ? activateTabSync.call({ tab: tab }) : activateTab.call({ tab: tab })
   }
 })()

data/lib/asciidoctor/tabs/block.rb

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

data/lib/asciidoctor/tabs/version.rb

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

metadata

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