asciidoctor-tabs 1.0.0.alpha.11 → 1.0.0.beta.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7fabd40d3903b96a2982c4bb90a3a6d783fe55369bea21e06f98e4ec97a306bd
-  data.tar.gz: b6259434eb0eafd0c3c8a5a51bc1f786a111120fe68786ad21b4ad52b737412b
+  metadata.gz: 461e1d2d860df917423ed9dea49891739dd1129bda4aabb4bb9a9fc9bfbd09d8
+  data.tar.gz: 85189a9d92e881b4570f395357673b42d3bdd272fed80d2b1b718a3d67ff13a7
 SHA512:
-  metadata.gz: 8990b67f318bbe16cb3441dadc8f8af8cbb78b4e8f31f53da1c4e8ef855e51eb458a024e1ed2886ceb66bc58bc38ab860c244e2a500bf13c43f87bf2b4212155
-  data.tar.gz: baca94e8a45013ef881a2a2bc689225225892d145a877a6ec51d7bb4cf697fb98ae7bdd57f516fa831170b9e8e7b6c1c60e0310a5f850ddefcb046225ba7077b
+  metadata.gz: 1d3cf0e88c3852b1660f133bff1253d674b0ffa2ed38d0e1e700cbb1e7d41449582c007df86d8f1af20539717d5bdcbff85f8f732b47255b0198eddaa87378bd
+  data.tar.gz: fe30e9640c17b3cdbd64f78ead25dc37735eaf5275c1a75f918b00d185caceb3499673aad700938ed117be83c7ffa6e30b4e5e84ae08f46b55df47d2571d72f1

data/CHANGELOG.adoc

@@ -4,6 +4,31 @@
 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.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
+
+* Wrap div with class `tablecontainer` around tables inside tabpanel to prevent tables from overflowing bounds while honoring width (#41)
+
+=== Details
+
+{url-repo}/releases/tag/v1.0.0-alpha.12[git tag] | {url-repo}/compare/v1.0.0-alpha.11\...v1.0.0-alpha.12[full diff]
+
 == 1.0.0-alpha.11 (2022-12-08) - @mojavelinux
 
 === Changed

data/README.adoc

@@ -1,6 +1,6 @@
 = Asciidoctor Tabs
 Dan Allen <https://github.com/mojavelinux[@mojavelinux]>
-v1.0.0-alpha.11, 2022-12-08
+v1.0.0-beta.1, 2023-01-30
 :idprefix:
 :idseparator: -
 ifndef::env-github[:icons: font]
@@ -128,6 +128,10 @@ Tab B:: Contents of tab B in second tabset.
 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

@@ -58,12 +58,6 @@
   padding: 1.25em;
 }
 
-.tabpanel > table.tableblock {
-  border-width: 0;
-  display: block;
-  overflow-x: auto;
-}
-
 .tablist > ul li,
 .tabpanel {
   border: 1px solid #dcdcdc;
@@ -73,7 +67,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;
 }
@@ -82,8 +76,21 @@
   margin-top: 0;
 }
 
+/* #content is a signature of the Asciidoctor standalone HTML output */
 #content .tabpanel > :last-child,
 #content .tabpanel > :last-child > :last-child,
 #content .tabpanel > :last-child > :last-child > li:last-child > :last-child {
   margin-bottom: 0;
 }
+
+.tablecontainer {
+  overflow-x: auto;
+}
+
+#content .tablecontainer {
+  margin-bottom: 1.25em;
+}
+
+#content .tablecontainer > table.tableblock {
+  margin-bottom: 0;
+}

data/data/js/tabs.js

@@ -1,38 +1,45 @@
 ;(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'))
 
   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
       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
         }
         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))
         tab.setAttribute('aria-controls', panel.id)
         panel.setAttribute('role', 'tabpanel')
-        idx ? toggleHidden(panel, true) : toggleSelected(tab, true)
-        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))
+        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 (!selectedTab && first) toggleSelected(first.tab, true) || toggleHidden(first.panel, false)
     })
     onHashChange()
     forEach.call(tabsBlocks, function (tabs) {
@@ -51,6 +58,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 (!e) return
     var loc = window.location
     var hashIdx = loc.hash ? loc.href.indexOf('#') : -1
@@ -64,7 +74,7 @@
     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 })
+      if (tab !== thisTab && tab.dataset.syncId === thisTab.dataset.syncId) activateTab.call({ tab: tab, isSync: true })
     })
     var shiftedBy = tabs.getBoundingClientRect().y - initialY
     if (shiftedBy && (shiftedBy = Math.round(shiftedBy))) window.scrollBy({ top: shiftedBy, behavior: 'instant' })
@@ -75,7 +85,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
   }
@@ -85,6 +95,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 })
+    tab.dataset.syncId === undefined ? activateTab.call({ tab: tab }) : activateTabSync.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.11'
+    VERSION = '1.0.0.beta.1'
   end
 end

metadata

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