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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fd23b52dcb671b18e2fc149ff7c4c0f131acc7b36c5a83df0003c22cc341d8cd
-  data.tar.gz: 502e57c0df6a007731a21dce2f382f54ea3e940c6548e914e91aab25d233a995
+  metadata.gz: 35c07868db0fc9f06cc95b5af64d1228ede7894c8acdb63570c368acf8d179f8
+  data.tar.gz: 80e712a56c6e421a922e109ba7cdfcf4807f24aa2b1a8aac9e8d6b334f483986
 SHA512:
-  metadata.gz: 41ddf35603690caa50d3685eb398ebbfd65ecc13630827731ec11493667a2bcd4db8616e530ae11cb8f05fa450d258b9e734ad4ee10fbe1bcaaf1c256ee681e7
-  data.tar.gz: ac3f2b5a3d44a8209436955dd5ebb74eff9e2bfbc0f107e572488859de78cb133817db3c5362c09198aee71b9381dfa56646e036ebd885b5cf05231b23231a7b
+  metadata.gz: 3cda7d6fd762ae09f8376b344f3e1a2a28c32605cfc9c5afb51117f31868e5ea9e05f299e587937ad045d4bb2c0e24bc4dc4b3351a02cae840ebe3a7cca56b1b
+  data.tar.gz: 68e26c82a72335b2ff799d816f3e8562367b7d14e0de78794ac19b3bcc36a98b4dc51f9d6b9f06d82d5769d87cb132ada8b8a8fd31706434a001428b772367b8

data/CHANGELOG.adoc

@@ -4,6 +4,38 @@
 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
+
+* In tabs script, add `tab` class to tab element
+* Sync tab selection across tabs blocks if `sync` option is set on tabs block or `tabs-sync-option` attribute is set on document (#28)
+* Delist tabs block from sync if `nosync` option is set on block (#28)
+
+=== Changed
+
+* When inline anchor is used for tab ID, promote value of id attribute to id attribute on tab and remove anchor
+
+=== Fixed
+
+* Apply normal substitutions to principal text (first paragraph) of tab's content (#29)
+
+=== Details
+
+{url-repo}/releases/tag/v1.0.0-alpha.7[git tag] | {url-repo}/compare/v1.0.0-alpha.6\...v1.0.0-alpha.7[full diff]
+
 == 1.0.0-alpha.6 (2022-11-16) - @mojavelinux
 
 === Added
@@ -111,7 +143,7 @@ For a detailed view of what has changed, refer to the {url-repo}/commits/main[co
 
 == 1.0.0-alpha.1 (2022-10-01) - @mojavelinux
 
-_Initial release._
+_Initial prerelease._
 
 === Details
 

data/README.adoc

@@ -1,6 +1,6 @@
 = Asciidoctor Tabs
 Dan Allen <https://github.com/mojavelinux[@mojavelinux]>
-v1.0.0-alpha.6, 2022-11-16
+v1.0.0-alpha.8, 2022-11-30
 :idprefix:
 :idseparator: -
 ifndef::env-github[:icons: font]
@@ -84,7 +84,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 decide to extend the block delimiter length instead of using the typical 4 characters to avoid conflicts with any example blocks inside the tab block (or just as a manner 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 tab block (or just as a matter of style).
 
 [,asciidoc]
 ----
@@ -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

@@ -1,70 +1,74 @@
-/*! Asciidoctor Tabs | Copyright (c) 2018-present Dan Allen | MIT License */
-;(function () {
+;(function () { /*! Asciidoctor Tabs | Copyright (c) 2018-present Dan Allen | MIT License */
   'use strict'
 
-  var tabsets = find('.tabset')
-  if (!tabsets.length) return
-  var fragment = decodeFragment(window.location.hash)
+  var forEach = Array.prototype.forEach
 
-  tabsets.forEach(function (tabset) {
-    var active
-    var tabs = tabset.querySelector('.tabs')
-    if (tabs) {
-      var first
-      find('li', tabs).forEach(function (tab, idx) {
-        var id = (tab.querySelector('a[id]') || tab).id
-        if (!id) return
+  init(document.querySelectorAll('.tabset'))
+
+  function init (tabsets) {
+    if (!tabsets.length) return
+    forEach.call(tabsets, function (tabset) {
+      var tabs = tabset.querySelectorAll('.tabs li')
+      var syncIds = tabset.classList.contains('is-sync') ? {} : undefined
+      forEach.call(tabs, function (tab, idx) {
+        var id = tab.id
+        if (!id) {
+          var anchor = tab.querySelector('a[id]')
+          if (!anchor) return // invalid state
+          tab.id = id = anchor.parentNode.removeChild(anchor).id
+        }
+        tab.className = idx ? 'tab' : 'tab is-active'
         var pane = tabset.querySelector('.tab-pane[aria-labelledby~="' + id + '"]')
-        if (!pane) return
-        if (!idx) first = { tab: tab, pane: pane }
-        if (!active && fragment === id && (active = true)) {
-          tab.classList.add('is-active')
-          if (pane) pane.classList.add('is-active')
-        } else if (!idx) {
-          tab.classList.remove('is-active')
-          if (pane) pane.classList.remove('is-active')
+        if (!pane) return // invalid state
+        if (!idx) pane.classList.add('is-active')
+        var onClick = activateTab
+        var instance = { tabset: tabset, tab: tab, pane: pane }
+        var syncId
+        if (syncIds && !((syncId = tab.textContent.trim()) in syncIds)) {
+          syncIds[(tab.dataset.syncId = syncId)] = true
+          onClick = activateTabSync
         }
-        tab.addEventListener('click', activateTab.bind({ tabset: tabset, tab: tab, pane: pane }))
+        tab.addEventListener('click', onClick.bind(instance))
       })
-      if (!active && first) {
-        first.tab.classList.add('is-active')
-        if (first.pane) first.pane.classList.add('is-active')
-      }
-    }
-    tabset.classList.remove('is-loading')
-  })
-
-  tabsets = undefined
-  window.addEventListener('hashchange', onHashChange)
+    })
+    onHashChange()
+    forEach.call(tabsets, function (tabset) {
+      tabset.classList.remove('is-loading')
+    })
+    window.addEventListener('hashchange', onHashChange)
+  }
 
   function activateTab (e) {
     var tab = this.tab
-    var pane = this.pane
-    find('.tabs li, .tab-pane', this.tabset).forEach(function (it) {
-      it === tab || it === pane ? it.classList.add('is-active') : it.classList.remove('is-active')
+    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')
     })
     if (!e) return
-    var hashIdx = window.location.hash ? window.location.href.indexOf('#') : -1
-    if (~hashIdx) window.history.replaceState(null, '', window.location.href.slice(0, hashIdx))
+    var loc = window.location
+    var hashIdx = loc.hash ? loc.href.indexOf('#') : -1
+    if (~hashIdx) window.history.replaceState(null, '', loc.href.slice(0, hashIdx))
     e.preventDefault()
   }
 
-  function decodeFragment (hash) {
-    return hash && (~hash.indexOf('%') ? decodeURIComponent(hash.slice(1)) : hash.slice(1))
+  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 })
+    })
+    var shiftedBy = tabset.getBoundingClientRect().y - initialY
+    if (shiftedBy && (shiftedBy = Math.round(shiftedBy))) window.scrollBy({ top: shiftedBy, behavior: 'instant' })
   }
 
   function onHashChange () {
-    var id = decodeFragment(window.location.hash)
+    var id = window.location.hash.slice(1)
     if (!id) return
-    var tab = document.getElementById(id)
-    if (!(tab && document.querySelector('.tabset .tabs [id="' + id + '"]'))) return
-    if (tab.tagName === 'A') tab = tab.parentNode
-    var tabset = tab.closest('.tabset')
-    var pane = tabset.querySelector('.tab-pane[aria-labelledby~="' + id + '"]')
-    activateTab.call({ tabset: tabset, tab: tab, pane: pane })
-  }
-
-  function find (selector, from) {
-    return Array.prototype.slice.call((from || document).querySelectorAll(selector))
+    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/block.rb

@@ -18,7 +18,8 @@ module Asciidoctor
         end
         tabset_number = doc.counter 'tabset-number'
         tabs_id = attrs['id'] || (generate_id %(tabset #{tabset_number}), doc)
-        parent << (create_html_fragment parent, %(<div id="#{tabs_id}" class="tabset is-loading">))
+        sync = !(block.option? 'nosync') && ((block.option? 'sync') || (doc.option? 'tabs-sync')) ? ' is-sync' : nil
+        parent << (create_html_fragment parent, %(<div id="#{tabs_id}" class="tabset#{sync || ''} is-loading">))
         if (title = attrs['title'])
           parent << (create_html_fragment parent, %(<div class="title">#{parent.apply_subs title}</div>))
         end
@@ -35,7 +36,9 @@ module Asciidoctor
             tab_id
           end
           if content
-            tab_blocks = content.text? ? [(create_paragraph parent, (content.instance_variable_get :@text), nil)] : []
+            tab_blocks = content.text? ?
+              [(create_paragraph parent, (content.instance_variable_get :@text), nil, subs: :normal)]
+              : []
             if content.blocks?
               if (block0 = (blocks = content.blocks)[0]).context == :open && blocks.size == 1 && block0.blocks?
                 blocks = block0.blocks

data/lib/asciidoctor/tabs/version.rb

@@ -2,6 +2,6 @@
 
 module Asciidoctor
   module Tabs
-    VERSION = '1.0.0.alpha.6'
+    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.6
+  version: 1.0.0.alpha.8
 platform: ruby
 authors:
 - Dan Allen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-11-16 00:00:00.000000000 Z
+date: 2022-11-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: asciidoctor
@@ -101,7 +101,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubygems_version: 3.3.7
+rubygems_version: 3.3.26
 signing_key: 
 specification_version: 4
 summary: An Asciidoctor extension that adds a tabs block to the AsciiDoc syntax.