diff --git a/README.md b/README.md index c27176295..490a20265 100644 --- a/README.md +++ b/README.md @@ -138,3 +138,50 @@ To format Enterprise-specific content, wrap it in the `{{% enterprise %}}` short Insert enterprise-specific markdown content here. {{% /enterprise %}} ``` + +### Tabbed Content +Shortcodes are available for creating "tabbed" content (content that is changed by a users' selection). +Ther following three must be used: + +`{{< tabs-wrapper >}}` +This shortcode creates a wrapper or container for the tabbed content. +All UI interactions are limited to the scope of each container. +If you have more than one "group" of tabbed content in a page, each needs its own `tabs-wrapper`. +This shortcode must be closed with `{{< /tabs-wrapper >}}`. + +**Note**: The `<` and `>` characters used in this shortcode indicate that the contents should be processed as HTML. + +`{{% tabs %}}` +This shortcode creates a container for buttons that control the display of tabbed content. +It should contain simple markdown links with anonymous anchors (`#`). +The link text is used as the button text. +This shortcode must be closed with `{{% /tabs %}}`. + +**Note**: The `%` characters used in this shortcode indicate that the contents should be processed as Markdown. + +`{{% tab-content %}}` +This shortcode creates a container for a content block. +Each content block in the tab group needs to be wrapped in this shortcode. +This shortcode must be closed with `{{% /tab-content %}}`. + +**Note**: The `%` characters used in this shortcode indicate that the contents should be processed as Markdown. + +#### Example tabbed content group +```md +{{< tabs-wrapper >}} + +{{% tabs %}} +[Button text for tab 1](#) +[Button text for tab 2](#) +{{% /tabs %}} + +{{% tab-content %}} +Markdown content for tab 1. +{{% /tab-content %}} + +{{% tab-content %}} +Markdown content for tab 2. +{{% /tab-content %}} + +{{< /tabs-wrapper >}} +``` diff --git a/assets/js/content-interactions.js b/assets/js/content-interactions.js index aa39444ed..1b7dc21de 100644 --- a/assets/js/content-interactions.js +++ b/assets/js/content-interactions.js @@ -1,20 +1,53 @@ -// Make headers linkable +///////////////////////////// Make headers linkable ///////////////////////////// + $("h2,h3,h4,h5,h6").each(function() { var link = "" $(this).wrapInner( link ); }) -// Smooth Scroll -var topBuffer = 0; - $('a[href^="#"]').on('click',function (e) { - e.preventDefault(); +///////////////////////////////// Smooth Scroll ///////////////////////////////// - var target = this.hash; - var $target = $(target); +$('a[href^="#"]:not(.tabs p a)').on('click',function (e) { + e.preventDefault(); - $('html, body').stop().animate({ - 'scrollTop': ($target.offset().top - topBuffer) - }, 400, 'swing', function () { - window.location.hash = target; - }); + var target = this.hash; + var $target = $(target); + + $('html, body').stop().animate({ + 'scrollTop': ($target.offset().top) + }, 400, 'swing', function () { + window.location.hash = target; }); +}); + +//////////////////////////////// Tabbed Content //////////////////////////////// + +$(function() { + const container = '.tabs-wrapper' + const tab = '.tabs p a'; + const content = '.tab-content'; + + // Add the active class to the first tab in each tab group, + // in case it wasn't already set in the markup. + $(container).each(function () { + $(tab, this).removeClass('is-active'); + $(tab + ':first', this).addClass('is-active'); + }); + + $(tab).on('click', function(e) { + e.preventDefault(); + + // Make sure the tab being clicked is marked as active, and make the rest inactive. + $(this).addClass('is-active').siblings().removeClass('is-active'); + + // Render the correct tab content based on the position of the tab being clicked. + const activeIndex = $(tab).index(this); + $(content).each(function(i) { + if (i === activeIndex) { + $(this).show(); + $(this).siblings(content).hide(); + } + }); + console.log(activeIndex); + }); +}); diff --git a/assets/styles/layouts/_layout-article.scss b/assets/styles/layouts/_layout-article.scss index 9f07fbe24..a31719819 100644 --- a/assets/styles/layouts/_layout-article.scss +++ b/assets/styles/layouts/_layout-article.scss @@ -362,4 +362,49 @@ } } + /////////////////////////////// Tabbed Content /////////////////////////////// + + .tabs-wrapper{ + margin: 2rem 0 .5rem; + } + .tabs p { + display: flex; + flex-wrap: wrap; + } + .tabs a { + flex-grow: 1; + margin: 2px; + font-size: 0.875rem; + color: $article-tab-text; + padding: .35rem .75rem; + display: inline-block; + text-align: center; + border-radius: $border-radius; + background-color: $article-tab-bg; + transition: background-color .2s, color .2s; + + &:hover { + color: $article-tab-active-text; + background: $article-tab-active-bg; + } + &.is-active { + color: $article-tab-active-text; + background: $article-tab-active-bg; + } + } + + .tab-content { + padding: 1.5rem 0; + width: 100%; + + & > * { + width: 100% !important; + margin-left: 0 !important; + } + } + + .tab-content:not(:first-of-type) { + display: none; + } + } diff --git a/assets/styles/themes/_theme-dark.scss b/assets/styles/themes/_theme-dark.scss index 1d2a9d96a..1ba338012 100644 --- a/assets/styles/themes/_theme-dark.scss +++ b/assets/styles/themes/_theme-dark.scss @@ -83,3 +83,9 @@ $article-enterprise-base: $p-star !default; $article-enterprise-text: $p-potassium !default; $article-enterprise-link: $p-moonstone !default; $article-enterprise-link-hover: $g20-white !default; + +// Article Tabs for tabbed content +$article-tab-text: $g12-forge !default; +$article-tab-bg: $g4-onyx !default; +$article-tab-active-text: $g20-white !default; +$article-tab-active-bg: $b-ocean !default; diff --git a/assets/styles/themes/_theme-light.scss b/assets/styles/themes/_theme-light.scss index 5cc5cdc1c..968f74da4 100644 --- a/assets/styles/themes/_theme-light.scss +++ b/assets/styles/themes/_theme-light.scss @@ -82,3 +82,9 @@ $article-enterprise-base: $p-comet; $article-enterprise-text: $p-star; $article-enterprise-link: $p-star; $article-enterprise-link-hover: $b-ocean; + +// Article Tabs for tabbed content +$article-tab-text: $g8-storm; +$article-tab-bg: $g18-cloud; +$article-tab-active-text: $g20-white; +$article-tab-active-bg: $b-pool; diff --git a/content/v2.0/example.md b/content/v2.0/example.md index 6cce26114..c085072a4 100644 --- a/content/v2.0/example.md +++ b/content/v2.0/example.md @@ -350,3 +350,55 @@ cpu = from(bucket:"telegraf/autogen") | Row 4.1 | Row 4.2 | Row 4.3 | Row 4.4 | {{% /warn %}} + +{{< tabs-wrapper >}} +{{% tabs %}} +[tab 1.1](#) +[tab 1.2](#) +[tab 1.3](#) +[tab 1.4](#) +{{% /tabs %}} + +{{% tab-content %}} +This is tab 1.1 content. +{{% /tab-content %}} + +{{% tab-content %}} +This is tab 1.2 content. +{{% /tab-content %}} + +{{% tab-content %}} +This is tab 1.3 content. +{{% /tab-content %}} + +{{% tab-content %}} +This is tab 1.4 content. +{{% /tab-content %}} + +{{< /tabs-wrapper >}} + +{{< tabs-wrapper >}} +{{% tabs %}} +[tab 2.1](#) +[tab 2.2](#) +[tab 2.3](#) +[tab 2.4](#) +{{% /tabs %}} + +{{% tab-content %}} +This is tab 2.1 content. +{{% /tab-content %}} + +{{% tab-content %}} +This is tab 2.2 content. +{{% /tab-content %}} + +{{% tab-content %}} +This is tab 2.3 content. +{{% /tab-content %}} + +{{% tab-content %}} +This is tab 2.4 content. +{{% /tab-content %}} + +{{< /tabs-wrapper >}} diff --git a/layouts/_default/section.html b/layouts/_default/section.html index a92405eb7..09197a540 100644 --- a/layouts/_default/section.html +++ b/layouts/_default/section.html @@ -3,12 +3,12 @@
{{ partial "sidebar.html" . }}
-
+

{{ .Title }}

{{ partial "article/latest-version.html" . }} {{ partial "article/enterprise.html" . }} {{ .Content }} -
+
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index a92405eb7..09197a540 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -3,12 +3,12 @@
{{ partial "sidebar.html" . }}
-
+

{{ .Title }}

{{ partial "article/latest-version.html" . }} {{ partial "article/enterprise.html" . }} {{ .Content }} -
+
diff --git a/layouts/shortcodes/tab-content.html b/layouts/shortcodes/tab-content.html new file mode 100644 index 000000000..d88086a17 --- /dev/null +++ b/layouts/shortcodes/tab-content.html @@ -0,0 +1,3 @@ +
+ {{ .Inner }} +
diff --git a/layouts/shortcodes/tabs-wrapper.html b/layouts/shortcodes/tabs-wrapper.html new file mode 100644 index 000000000..4b935378b --- /dev/null +++ b/layouts/shortcodes/tabs-wrapper.html @@ -0,0 +1,3 @@ +
+ {{ .Inner }} +
diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html new file mode 100644 index 000000000..94db29833 --- /dev/null +++ b/layouts/shortcodes/tabs.html @@ -0,0 +1,3 @@ +
+ {{ .Inner }} +