diff options
author | Sarah German <sgerman@gitlab.com> | 2022-08-26 00:41:51 +0300 |
---|---|---|
committer | David O'Regan <doregan@gitlab.com> | 2022-08-26 00:41:51 +0300 |
commit | 9bf850d2a8842d40a5d54802e4d72d9b8083ccd3 (patch) | |
tree | 4d16f9371d0bb822075a56dfad2c83d04792f4a6 | |
parent | ac45ff8515cffb0c8601a67d1087255bab32c958 (diff) |
Simplify required markup for Tabs
-rw-r--r-- | Rules | 1 | ||||
-rw-r--r-- | content/frontend/default/default.js | 5 | ||||
-rw-r--r-- | lib/filters/tabs.rb | 22 | ||||
-rw-r--r-- | spec/lib/filters/tabs_spec.rb | 28 |
4 files changed, 53 insertions, 3 deletions
@@ -98,6 +98,7 @@ compile '/**/*.md' do filter :admonition filter :icons filter :introduced_in + filter :tabs if item[:layout].nil? layout '/default.*' diff --git a/content/frontend/default/default.js b/content/frontend/default/default.js index 5290ab52..22a41b7b 100644 --- a/content/frontend/default/default.js +++ b/content/frontend/default/default.js @@ -86,10 +86,9 @@ document.addEventListener('DOMContentLoaded', () => { const tabTitles = []; const tabContents = []; - const tabTitleElement = tabset.firstElementChild.tagName; - tabset.querySelectorAll(`${tabTitleElement}`).forEach((tab) => { + tabset.querySelectorAll('.tab-title').forEach((tab) => { tabTitles.push(tab.innerText); - tabContents.push(getNextUntil(tab, tabTitleElement)); + tabContents.push(getNextUntil(tab, '.tab-title')); }); return new Vue({ diff --git a/lib/filters/tabs.rb b/lib/filters/tabs.rb new file mode 100644 index 00000000..08385383 --- /dev/null +++ b/lib/filters/tabs.rb @@ -0,0 +1,22 @@ +# frozen_string_literal: true + +class TabsFilter < Nanoc::Filter + identifier :tabs + + TABSET_PATTERN = %r{<p>::Tabs</p>(?<tabs_wrapper>.*?)<p>::EndTabs</p>}mx.freeze + TAB_TITLE_PATTERN = %r{<p>:::TabTitle\s(?<tab_title>.*?)</p>}mx.freeze + + def run(content, params = {}) + new_content = content.gsub(TAB_TITLE_PATTERN) { generateTitles(Regexp.last_match[:tab_title]) } + new_content.gsub(TABSET_PATTERN) { generateWrapper(Regexp.last_match[:tabs_wrapper]) } + end + + def generateTitles(content) + %(<div class="tab-title">#{content}</div>) + end + + def generateWrapper(content) + %(<div class="js-tabs">#{content}</div>) + end + +end diff --git a/spec/lib/filters/tabs_spec.rb b/spec/lib/filters/tabs_spec.rb new file mode 100644 index 00000000..6ae64b0a --- /dev/null +++ b/spec/lib/filters/tabs_spec.rb @@ -0,0 +1,28 @@ +require 'spec_helper' + +require 'filters/tabs' + +describe TabsFilter do + describe '#run' do + let(:content) { nil } + + subject(:run) { described_class.new.run(content) } + + context 'Tab titles' do + let(:content) { '<p>:::TabTitle Cats</p>' } + + it 'returns correct HTML' do + expect(run).to eq('<div class="tab-title">Cats</div>') + end + end + + context 'Tab wrapper' do + let(:content) { '<p>::Tabs</p>Tabs content<p>::EndTabs</p>' } + + it 'returns correct HTML' do + expect(run).to eq("<div class=\"js-tabs\">Tabs content</div>") + end + end + + end +end |