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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 79ee9882999f6e27787ce575352f3382272a502fa99c3e33090c265110290ab8
-  data.tar.gz: 1c8d5d2001a1b8f277ae84fc0c4e0f0d54f65266d97bd948e78835de7d5a91ae
+  metadata.gz: e73997158c47ea046d9c2016a25cac989e0f0e12e013bdc17f0c3cde8128e55f
+  data.tar.gz: 2dd6e9907c7c2498c1ff2226f25d00d654b872644063b02230882a2090f35e45
 SHA512:
-  metadata.gz: 4bf6818b2492f96aee01f2d29658e09a5bac3614e3c6e6565a83a817d0b1c5cf80897da04ca7859f0fe2fa6ce587cd5f10e37b74688a78e3c4d07a94a0b8d350
-  data.tar.gz: 12a6df3597b1c1da6fbff9f3bf130d1ec34d0485102bf780a27d8cde79596a22ca44b8f6620ab202ca6ac03d386da94e155d58b49d186e47117a02864ea5998e
+  metadata.gz: d530e0bb402fd7aa9346c5dc747efe5224436ef8d2e1fd4139a64fb84ed3f3c044069ba0fb807f12ecfe78104d6665395d979aeb1aac77465cef6bb831b1e0ad
+  data.tar.gz: c1c756f94280e8d70394c13abdfeb541f226b5eb39cfe86b514211781e5ab80bf1208e7faad6162db45571b26801ada288ae656143d074a7184ba40674afac32

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

data/README.adoc

@@ -1,6 +1,6 @@
 = Asciidoctor Tabs
 Dan Allen <https://github.com/mojavelinux[@mojavelinux]>
-v1.0.0-beta.3, 2023-02-01
+v1.0.0-beta.4, 2023-05-22
 :idprefix:
 :idseparator: -
 ifndef::env-github[:icons: font]

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,30 +12,31 @@
       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
+        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) {
+      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
@@ -46,8 +47,8 @@
         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)
+        tab && Object.assign(start, { tab: tab, panel: document.getElementById(tab.getAttribute('aria-controls')) })
+        toggleSelected(start.tab, true) || toggleHidden(start.panel, false)
       }
     })
     onHashChange()
@@ -60,10 +61,10 @@
     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 && 'syncGroupId' in tabs.dataset) {
@@ -84,7 +85,7 @@
     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) {
+      querySelectorWithSiblings(tabs, '.tablist .tab', 'tab').forEach(function (tab) {
         if (tab.dataset.syncId === thisTab.dataset.syncId) activateTab.call({ tabs: tabs, tab: tab, isSync: true })
       })
     })
@@ -92,6 +93,14 @@
     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)

data/lib/asciidoctor/tabs/version.rb

@@ -2,6 +2,6 @@
 
 module Asciidoctor
   module Tabs
-    VERSION = '1.0.0.beta.3'
+    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.3
+  version: 1.0.0.beta.4
 platform: ruby
 authors:
 - Dan Allen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-02-01 00:00:00.000000000 Z
+date: 2023-05-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: asciidoctor