asciidoctor-tabs 1.0.0.alpha.7 → 1.0.0.alpha.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 53a90833ce2142600152bf87248d9470058d6e39495863c644ac7e7bcc8c8ef0
-  data.tar.gz: fd0c9ab6d3e8a27c7bcb48489115b7c7a069a5aee6985626ffb91dc827830baa
+  metadata.gz: 35c07868db0fc9f06cc95b5af64d1228ede7894c8acdb63570c368acf8d179f8
+  data.tar.gz: 80e712a56c6e421a922e109ba7cdfcf4807f24aa2b1a8aac9e8d6b334f483986
 SHA512:
-  metadata.gz: 7f187bad924fd98d618d23b452f5d06551392bb3c2acc25990793af0a2d0a55897a3d1557790df64a9658d9c4dc9a533b7da6e0ae4abb53e9993121a356c2e8e
-  data.tar.gz: '039a9561293145c0717da9f98942d027ee18e89bdd23ab975deec004461e14ac85a1d4aa0540e52d28e9b531d495428f3c4bf74bf3f3c5ea118694ac703547d1'
+  metadata.gz: 3cda7d6fd762ae09f8376b344f3e1a2a28c32605cfc9c5afb51117f31868e5ea9e05f299e587937ad045d4bb2c0e24bc4dc4b3351a02cae840ebe3a7cca56b1b
+  data.tar.gz: 68e26c82a72335b2ff799d816f3e8562367b7d14e0de78794ac19b3bcc36a98b4dc51f9d6b9f06d82d5769d87cb132ada8b8a8fd31706434a001428b772367b8

data/CHANGELOG.adoc

@@ -4,6 +4,18 @@
 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-alpha.8 (2022-11-30) - @mojavelinux
+
+=== Fixed
+
+* Sync tab selection on hash change (#32)
+* Lock position of content when synchronizing tab selection (#34)
+* Remove bottom margin from last block in tab pane for the most common cases
+
+=== Details
+
+{url-repo}/releases/tag/v1.0.0-alpha.8[git tag] | {url-repo}/compare/v1.0.0-alpha.7\...v1.0.0-alpha.8[full diff]
+
 == 1.0.0-alpha.7 (2022-11-28) - @mojavelinux
 
 === Added

data/README.adoc

@@ -1,6 +1,6 @@
 = Asciidoctor Tabs
 Dan Allen <https://github.com/mojavelinux[@mojavelinux]>
-v1.0.0-alpha.7, 2022-11-28
+v1.0.0-alpha.8, 2022-11-30
 :idprefix:
 :idseparator: -
 ifndef::env-github[:icons: font]
@@ -100,6 +100,33 @@ Tab B:: Just text.
 ======
 ----
 
+== Tabs Sync
+
+If you want to synchronize the tab selection across tabsets, set the `tabs-sync-option` on the document.
+
+.document-with-tabs-sync.adoc
+[,asciidoc]
+----
+:tabs-sync-option:
+
+[tabs]
+====
+Tab A:: Contents of tab A in first tabset.
+Tab B:: Contents of tab B in first tabset.
+====
+
+...
+
+[tabs]
+====
+Tab A:: Contents of tab A in second tabset.
+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.
+
 == Usage
 
 === CLI

data/data/css/tabs.css

@@ -65,6 +65,8 @@
   margin-top: 0;
 }
 
-.tab-pane > :last-child > :last-child {
+#content .tab-pane > :last-child,
+#content .tab-pane > :last-child > :last-child,
+#content .tab-pane > :last-child > :last-child > li:last-child > :last-child {
   margin-bottom: 0;
 }

data/data/js/tabs.js

@@ -7,11 +7,8 @@
 
   function init (tabsets) {
     if (!tabsets.length) return
-    var fragment = getFragment()
     forEach.call(tabsets, function (tabset) {
       var tabs = tabset.querySelectorAll('.tabs li')
-      if (!tabs.length) return tabset.classList.remove('is-loading')
-      var active, first, syncId
       var syncIds = tabset.classList.contains('is-sync') ? {} : undefined
       forEach.call(tabs, function (tab, idx) {
         var id = tab.id
@@ -20,26 +17,22 @@
           if (!anchor) return // invalid state
           tab.id = id = anchor.parentNode.removeChild(anchor).id
         }
-        tab.className = 'tab'
+        tab.className = idx ? 'tab' : 'tab is-active'
         var pane = tabset.querySelector('.tab-pane[aria-labelledby~="' + id + '"]')
         if (!pane) return // invalid state
+        if (!idx) pane.classList.add('is-active')
+        var onClick = activateTab
         var instance = { tabset: tabset, tab: tab, pane: pane }
-        if (!idx) first = instance
-        if (!active && fragment === id && (active = true)) {
-          tab.classList.add('is-active')
-          pane.classList.add('is-active')
-        }
+        var syncId
         if (syncIds && !((syncId = tab.textContent.trim()) in syncIds)) {
           syncIds[(tab.dataset.syncId = syncId)] = true
-          tab.addEventListener('click', activateTabSync.bind(instance))
-        } else {
-          tab.addEventListener('click', activateTab.bind(instance))
+          onClick = activateTabSync
         }
+        tab.addEventListener('click', onClick.bind(instance))
       })
-      if (!active && first) {
-        first.tab.classList.add('is-active')
-        first.pane.classList.add('is-active')
-      }
+    })
+    onHashChange()
+    forEach.call(tabsets, function (tabset) {
       tabset.classList.remove('is-loading')
     })
     window.addEventListener('hashchange', onHashChange)
@@ -47,7 +40,7 @@
 
   function activateTab (e) {
     var tab = this.tab
-    var tabset = this.tabset || tab.closest('.tabset')
+    var tabset = this.tabset || (this.tabset = tab.closest('.tabset'))
     var pane = this.pane || tabset.querySelector('.tab-pane[aria-labelledby~="' + tab.id + '"]')
     forEach.call(tabset.querySelectorAll('.tabs li, .tab-pane'), function (el) {
       el === tab || el === pane ? el.classList.add('is-active') : el.classList.remove('is-active')
@@ -61,20 +54,21 @@
 
   function activateTabSync (e) {
     activateTab.call(this, e)
+    var tabset = this.tabset
     var thisTab = this.tab
+    var initialY = tabset.getBoundingClientRect().y
     forEach.call(document.querySelectorAll('.tabs li'), function (tab) {
       if (tab !== thisTab && tab.dataset.syncId === thisTab.dataset.syncId) activateTab.call({ tab: tab })
     })
-  }
-
-  function getFragment (hash) {
-    return (hash = window.location.hash) && (~hash.indexOf('%') ? decodeURIComponent(hash.slice(1)) : hash.slice(1))
+    var shiftedBy = tabset.getBoundingClientRect().y - initialY
+    if (shiftedBy && (shiftedBy = Math.round(shiftedBy))) window.scrollBy({ top: shiftedBy, behavior: 'instant' })
   }
 
   function onHashChange () {
-    var id = getFragment()
+    var id = window.location.hash.slice(1)
     if (!id) return
-    var tab = document.getElementById(id)
-    if (tab && tab.classList.contains('tab')) activateTab.call({ tab: tab })
+    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 })
   }
 })()

data/lib/asciidoctor/tabs/version.rb

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

metadata

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