|
| 1 | +/* Copyright (c) 2018 OpenDevise, Inc. |
| 2 | + * |
| 3 | + * This Source Code Form is subject to the terms of the Mozilla Public |
| 4 | + * License, v. 2.0. If a copy of the MPL was not distributed with this |
| 5 | + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ |
| 6 | + |
| 7 | +/** |
| 8 | + * Extends the AsciiDoc syntax to support a tabset. The tabset is created from |
| 9 | + * a dlist enclosed in an example block that is marked with the tabs style. |
| 10 | + * |
| 11 | + * Usage: |
| 12 | + * |
| 13 | + * [tabs] |
| 14 | + * ==== |
| 15 | + * Tab A:: |
| 16 | + * + |
| 17 | + * -- |
| 18 | + * Contents of tab A. |
| 19 | + * -- |
| 20 | + * Tab B:: |
| 21 | + * + |
| 22 | + * -- |
| 23 | + * Contents of tab B. |
| 24 | + * -- |
| 25 | + * ==== |
| 26 | + * |
| 27 | + * @author Dan Allen <[email protected]> |
| 28 | + */ |
| 29 | +const IdSeparatorCh = '-' |
| 30 | +const ExtraIdSeparatorsRx = /^-+|-+$|-(-)+/g |
| 31 | +const InvalidIdCharsRx = /[^a-zA-Z0-9_]/g |
| 32 | +const List = Opal.const_get_local(Opal.module(null, 'Asciidoctor'), 'List') |
| 33 | +const ListItem = Opal.const_get_local(Opal.module(null, 'Asciidoctor'), 'ListItem') |
| 34 | + |
| 35 | +const generateId = (str, idx) => |
| 36 | + `tabset${idx}_${str.toLowerCase().replace(InvalidIdCharsRx, IdSeparatorCh).replace(ExtraIdSeparatorsRx, '$1')}` |
| 37 | + |
| 38 | +function tabsBlock () { |
| 39 | + this.onContext('example') |
| 40 | + this.process((parent, reader, attrs) => { |
| 41 | + const createHtmlFragment = (html) => this.createBlock(parent, 'pass', html) |
| 42 | + const tabsetIdx = parent.getDocument().counter('idx-tabset') |
| 43 | + const nodes = [] |
| 44 | + nodes.push(createHtmlFragment('<div class="tabset is-loading">')) |
| 45 | + const container = this.parseContent(this.createBlock(parent, 'open'), reader) |
| 46 | + const sourceTabs = container.getBlocks()[0] |
| 47 | + if (!(sourceTabs && sourceTabs.getContext() === 'dlist' && sourceTabs.getItems().length)) return |
| 48 | + const tabs = List.$new(parent, 'ulist') |
| 49 | + tabs.addRole('tabs') |
| 50 | + const panes = {} |
| 51 | + sourceTabs.getItems().forEach(([[title], details]) => { |
| 52 | + const tab = ListItem.$new(tabs) |
| 53 | + tabs.$append(tab) |
| 54 | + const id = generateId(title.getText(), tabsetIdx) |
| 55 | + tab.text = `[[${id}]]${title.text}` |
| 56 | + let blocks = details.getBlocks() |
| 57 | + const numBlocks = blocks.length |
| 58 | + if (numBlocks) { |
| 59 | + if (blocks[0].context === 'open' && numBlocks === 1) blocks = blocks[0].getBlocks() |
| 60 | + panes[id] = blocks.map((block) => (block.parent = parent) && block) |
| 61 | + } |
| 62 | + }) |
| 63 | + nodes.push(tabs) |
| 64 | + nodes.push(createHtmlFragment('<div class="content">')) |
| 65 | + Object.entries(panes).forEach(([id, blocks]) => { |
| 66 | + nodes.push(createHtmlFragment(`<div class="tab-pane" aria-labelledby="${id}">`)) |
| 67 | + nodes.push(...blocks) |
| 68 | + nodes.push(createHtmlFragment('</div>')) |
| 69 | + }) |
| 70 | + nodes.push(createHtmlFragment('</div>')) |
| 71 | + nodes.push(createHtmlFragment('</div>')) |
| 72 | + parent.blocks.push(...nodes) |
| 73 | + }) |
| 74 | +} |
| 75 | + |
| 76 | +function register (registry) { |
| 77 | + registry.block('tabs', tabsBlock) |
| 78 | +} |
| 79 | + |
| 80 | +module.exports.register = register |
0 commit comments