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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 53a90833ce2142600152bf87248d9470058d6e39495863c644ac7e7bcc8c8ef0
-  data.tar.gz: fd0c9ab6d3e8a27c7bcb48489115b7c7a069a5aee6985626ffb91dc827830baa
+  metadata.gz: 5aeccc2d9238859443b65f67f884e6629f95ac3a11e1ef89ccaff2280ac27003
+  data.tar.gz: d88ba56fefb38744e27d059c53d61f25507b47b2a8958e34252fed4278c86215
 SHA512:
-  metadata.gz: 7f187bad924fd98d618d23b452f5d06551392bb3c2acc25990793af0a2d0a55897a3d1557790df64a9658d9c4dc9a533b7da6e0ae4abb53e9993121a356c2e8e
-  data.tar.gz: '039a9561293145c0717da9f98942d027ee18e89bdd23ab975deec004461e14ac85a1d4aa0540e52d28e9b531d495428f3c4bf74bf3f3c5ea118694ac703547d1'
+  metadata.gz: 07a151ea4c94cb145e1bf673c0ceec2d96b6c75acc525a969bd304b8e59c4180057e1ee95d762c16f83c2845b76a2c91b6cf248835c97fa58043e1d8b5b58c3e
+  data.tar.gz: 6d8b2e56e0df595d0c5c05a357d5c5bfbd4de89e412c7d94a56d42aebf2bc9c1f875b8667089154c4c35d28ed931081d27270c9fdaba68a8d3a0e2ccc969a49e

data/CHANGELOG.adoc

@@ -4,6 +4,36 @@
 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.9 (2022-12-07) - @mojavelinux
+
+=== Changed
+
+* Assign `tab` role to each item in tab list
+* Apply border and padding to tab pane element instead of its parent
+* Remove fixed height on tab element; using padding instead
+* Use more subtle color scheme for border and background colors on tabs
+
+=== Fixed
+
+* Configure overflow content in tab panel to scroll horizontally
+* Set background on tabs properly so background does not bleed through
+
+=== Details
+
+{url-repo}/releases/tag/v1.0.0-alpha.9[git tag] | {url-repo}/compare/v1.0.0-alpha.8\...v1.0.0-alpha.9[full diff]
+
+== 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.9, 2022-12-07
 :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

@@ -1,4 +1,8 @@
 /*! Asciidoctor Tabs | Copyright (c) 2018-present Dan Allen | MIT License */
+.tabset {
+  margin-bottom: 1.25em;
+}
+
 .tabs > ul {
   display: flex;
   flex-wrap: wrap;
@@ -9,39 +13,36 @@
 
 .tabs > ul li {
   align-items: center;
-  border: 1px solid black;
-  border-bottom: 0;
+  background-color: #fff;
   cursor: pointer;
   display: flex;
   font-weight: bold;
-  height: 2em;
-  line-height: 1;
-  margin-right: 0.25em;
-  padding: 0 1em;
+  line-height: 1.5;
+  padding: 0.25em 1em;
   position: relative;
 }
 
-.tabs > ul li, .tabs > ul p {
-  margin-bottom: 0;
+.tabs.ulist > ul li {
+  margin: 0;
 }
 
-.tabs > ul li + li[id] {
-  margin-top: 0;
+.tabs > ul p {
+  line-height: inherit;
+  margin-bottom: 0;
 }
 
-.tabset {
-  margin-bottom: 1.25em;
+.tabs.ulist > ul li + li {
+  margin-left: 0.25em;
 }
 
 .tabset.is-loading .tabs li:not(:first-child),
 .tabset:not(.is-loading) .tabs li:not(.is-active) {
-  background-color: black;
-  color: white;
+  background-color: #f5f5f5;
 }
 
 .tabset.is-loading .tabs li:first-child::after,
-.tabs li.is-active::after {
-  background-color: white;
+.tabset:not(.is-loading) .tabs li.is-active::after {
+  background-color: inherit;
   content: "";
   display: block;
   height: 3px; /* Chrome doesn't always paint the line accurately, so add a little extra */
@@ -51,11 +52,22 @@
   right: 0;
 }
 
-.tabset > .content {
-  border: 1px solid gray;
+.tabset .tab-pane {
+  background-color: #fff;
+  display: flex;
+  overflow-x: auto;
   padding: 1.25em;
 }
 
+.tabs > ul li,
+.tabset .tab-pane {
+  border: 1px solid #dcdcdc;
+}
+
+.tabs > ul li {
+  border-bottom: 0;
+}
+
 .tabset.is-loading .tab-pane:not(:first-child),
 .tabset:not(.is-loading) .tab-pane:not(.is-active) {
   display: none;
@@ -65,6 +77,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/block.rb

@@ -23,7 +23,8 @@ module Asciidoctor
         if (title = attrs['title'])
           parent << (create_html_fragment parent, %(<div class="title">#{parent.apply_subs title}</div>))
         end
-        (tabs = create_list parent, :ulist).add_role 'tabs'
+        tabs = create_list parent, :ulist
+        tabs.add_role 'tabs'
         panes = {}
         set_id_on_tab = (doc.backend == 'html5') || (list_item_supports_id? doc)
         source_tabs.items.each do |labels, content|
@@ -32,6 +33,7 @@ module Asciidoctor
             tab_id = generate_id tab.text, doc, tabs_id
             tab_source_text = tab.instance_variable_get :@text
             set_id_on_tab ? (tab.id = tab_id) : (tab.text = %([[#{tab_id}]]#{tab_source_text}))
+            tab.add_role 'tab'
             (doc.register :refs, [tab_id, tab]).set_attr 'reftext', tab_source_text
             tab_id
           end

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.9'
   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.9
 platform: ruby
 authors:
 - Dan Allen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-11-28 00:00:00.000000000 Z
+date: 2022-12-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: asciidoctor