From 20a7d0ddbfcbc7eaab6f3ad47db0483d39b36107 Mon Sep 17 00:00:00 2001
From: machiav3lli <antonios.hazim@tutanota.com>
Date: Thu, 17 Aug 2023 09:55:14 +0000
Subject: [PATCH] Add: Tabs shortcode (inspired by https://rayramble.com/blog/test-tab-group/)

---
 assets/sass/_components.sass |   56 ++++++++++++++++++++++++++++
 layouts/shortcodes/tabs.html |   10 +++++
 layouts/shortcodes/tab.html  |   17 ++++++++
 3 files changed, 83 insertions(+), 0 deletions(-)

diff --git a/assets/sass/_components.sass b/assets/sass/_components.sass
index bdcb13e..ffa7d4f 100644
--- a/assets/sass/_components.sass
+++ b/assets/sass/_components.sass
@@ -321,3 +321,59 @@
     background-size: 12%
     background-position: 50% 50%
     background-repeat: no-repeat
+
+.tabs
+  display: flex
+  flex-wrap: wrap
+  margin: 2rem 0 2rem 0
+  position: relative
+
+  &.tabs-left
+    justify-content: flex-start
+
+    label.tab-label
+      margin-right: 0.5rem
+
+    .tab-content
+      border-radius: 0px 6px 6px 6px
+
+  &.tabs-right
+    justify-content: flex-end
+
+    label.tab-label
+      margin-left: 0.5rem
+
+    .tab-content
+      border-radius: 6px 6px 6px 6px
+
+  input.tab-input
+    display: none
+
+  label.tab-label
+    background-color: var(--accent) transparent
+    border-color: var(--theme)
+    border-radius: 6px 6px 0px 0px
+    border-style: solid
+    border-bottom-style: hidden
+    border-width: 2px
+    cursor: pointer
+    display: inline-block
+    order: 1
+    padding: 0.3rem 0.6rem
+    position: relative
+    top: 2px
+    user-select: none
+
+  input.tab-input:checked + label.tab-label
+    background-color: var(--accent)
+    border-color: var(--theme)
+
+  .tab-content
+    background-color: var(--accent)
+    border-color: var(--theme)
+    border-style: solid
+    border-width: 2px
+    display: none
+    order: 2
+    padding: 1rem
+    width: 100%
diff --git a/layouts/shortcodes/tab.html b/layouts/shortcodes/tab.html
new file mode 100644
index 0000000..3e55038
--- /dev/null
+++ b/layouts/shortcodes/tab.html
@@ -0,0 +1,17 @@
+{{- $name := .Get 0 | default "Name Me!" }}
+{{ $group := .Page.Scratch.Get "tabGroupIndex" | default 0 }}
+{{ $index := .Page.Scratch.Get "tabElementIndex" | default 0 }}
+
+<style>
+  .tabs input#tab-{{ $group }}-{{ $index }}:checked ~ .tab-content-{{ $group }}-{{ $index }} {
+    display: block;
+  }
+</style>
+
+<input type="radio" class="tab-input" name="tab-select-{{ $group }}" id="tab-{{ $group }}-{{ $index }}" {{ if eq $index 0 }}checked{{ end }}/>
+<label for="tab-{{ $group }}-{{ $index }}" class="tab-label">{{ $name }}</label>
+<div class="tab-content tab-content-{{ $group }}-{{ $index }}">
+  {{ markdownify .Inner }}
+</div>
+
+{{ .Page.Scratch.Set "tabElementIndex" (add 1 $index) }}
diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html
new file mode 100644
index 0000000..9508e8b
--- /dev/null
+++ b/layouts/shortcodes/tabs.html
@@ -0,0 +1,10 @@
+{{ $id := .Get 0 | default "id" }}
+{{ $align := .Get "align" | default "left" }}
+{{ $group := .Page.Scratch.Get "tabGroupIndex" | default 0 }}
+{{ $index := .Page.Scratch.Set "tabElementIndex" 0 }}
+
+<div class="tabs tabs-{{ $align }}">
+  {{ .Inner }}
+</div>
+
+{{ .Page.Scratch.Set "tabGroupIndex" (add 1 $group) }}

--
Gitblit v1.10.0