|
| 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( |
| 34 | + Opal.module(null, "Asciidoctor"), |
| 35 | + "ListItem" |
| 36 | +); |
| 37 | + |
| 38 | +const generateId = (str, idx) => |
| 39 | + `tabset${idx}_${str |
| 40 | + .toLowerCase() |
| 41 | + .replace(InvalidIdCharsRx, IdSeparatorCh) |
| 42 | + .replace(ExtraIdSeparatorsRx, "$1")}`; |
| 43 | + |
| 44 | +function tabsBlock() { |
| 45 | + this.onContext("example"); |
| 46 | + this.process((parent, reader, attrs) => { |
| 47 | + const createHtmlFragment = html => this.createBlock(parent, "pass", html); |
| 48 | + const tabsetIdx = parent.getDocument().counter("idx-tabset"); |
| 49 | + const nodes = []; |
| 50 | + nodes.push(createHtmlFragment('<div class="tabset is-loading">')); |
| 51 | + const container = this.parseContent( |
| 52 | + this.createBlock(parent, "open"), |
| 53 | + reader |
| 54 | + ); |
| 55 | + const sourceTabs = container.getBlocks()[0]; |
| 56 | + if ( |
| 57 | + !( |
| 58 | + sourceTabs && |
| 59 | + sourceTabs.getContext() === "dlist" && |
| 60 | + sourceTabs.getItems().length |
| 61 | + ) |
| 62 | + ) |
| 63 | + return; |
| 64 | + const tabs = List.$new(parent, "ulist"); |
| 65 | + tabs.addRole("tabs"); |
| 66 | + const panes = {}; |
| 67 | + sourceTabs.getItems().forEach(([[title], details]) => { |
| 68 | + const tab = ListItem.$new(tabs); |
| 69 | + tabs.$append(tab); |
| 70 | + const id = generateId(title.getText(), tabsetIdx); |
| 71 | + tab.text = `[[${id}]]${title.text}`; |
| 72 | + let blocks = details.getBlocks(); |
| 73 | + const numBlocks = blocks.length; |
| 74 | + if (numBlocks) { |
| 75 | + if (blocks[0].context === "open" && numBlocks === 1) |
| 76 | + blocks = blocks[0].getBlocks(); |
| 77 | + panes[id] = blocks.map(block => (block.parent = parent) && block); |
| 78 | + } |
| 79 | + }); |
| 80 | + nodes.push(tabs); |
| 81 | + nodes.push(createHtmlFragment('<div class="content">')); |
| 82 | + Object.entries(panes).forEach(([id, blocks]) => { |
| 83 | + nodes.push( |
| 84 | + createHtmlFragment(`<div class="tab-pane" aria-labelledby="${id}">`) |
| 85 | + ); |
| 86 | + nodes.push(...blocks); |
| 87 | + nodes.push(createHtmlFragment("</div>")); |
| 88 | + }); |
| 89 | + nodes.push(createHtmlFragment("</div>")); |
| 90 | + nodes.push(createHtmlFragment("</div>")); |
| 91 | + parent.blocks.push(...nodes); |
| 92 | + }); |
| 93 | +} |
| 94 | + |
| 95 | +function register(registry, context) { |
| 96 | + registry.block("tabs", tabsBlock); |
| 97 | +} |
| 98 | + |
| 99 | +module.exports.register = register; |
0 commit comments