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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0e0a17ea54a3c9b7c4c8e152b8cb6c80e4aceb4e7aaa9a03b7cf3dfdf5783d0c
-  data.tar.gz: e9f4f8844fbdf8435bbb1fc99ac600b35820cabe0a22c4b51902cf39c851e203
+  metadata.gz: 79ee9882999f6e27787ce575352f3382272a502fa99c3e33090c265110290ab8
+  data.tar.gz: 1c8d5d2001a1b8f277ae84fc0c4e0f0d54f65266d97bd948e78835de7d5a91ae
 SHA512:
-  metadata.gz: 0e296393e9638c0131b2e4c1a20ec388944de811295d28c30548befda9d786b5131c2039c2b46096a315218bb4a5335532603b0dd9cb557388f5283af7ddc04d
-  data.tar.gz: e53ca031e1b78d56b80612403323254cd29ecf38c5a757af1996e3c08fb3a02bbe644ad9010c7a034c55062ec4b4752b669c02978ea6a90c9435d5568f280dce
+  metadata.gz: 4bf6818b2492f96aee01f2d29658e09a5bac3614e3c6e6565a83a817d0b1c5cf80897da04ca7859f0fe2fa6ce587cd5f10e37b74688a78e3c4d07a94a0b8d350
+  data.tar.gz: 12a6df3597b1c1da6fbff9f3bf130d1ec34d0485102bf780a27d8cde79596a22ca44b8f6620ab202ca6ac03d386da94e155d58b49d186e47117a02864ea5998e

data/CHANGELOG.adoc

@@ -4,6 +4,23 @@
 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

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.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.
 
@@ -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/js/tabs.js

@@ -23,7 +23,7 @@
         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 && (((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)
@@ -36,18 +36,23 @@
         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 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)
       }
     })
     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)
   }
 
@@ -61,8 +66,8 @@
     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
+    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 +83,28 @@
     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
+      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 = 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
   }
 

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.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.2
+  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