feat(editor): allow setting defaultTab in tabbed examples (#758)

mdn · Apr 27, 2022 · 7bc449d · 7bc449d
1 parent 7631958
commit 7bc449d
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 11 deletions.
diff --git a/editor/js/editor.js b/editor/js/editor.js
@@ -122,18 +122,34 @@
   // show the header
   header.classList.remove("hidden");
 
-  /* Initialise the editors. If there is a `dataset` property
-       of type `tabs` on the `editorContainer`, pass its value
-       to `initEditor` */
-  if (editorContainer.dataset && editorContainer.dataset.tabs) {
-    tabby.initEditor(
-      editorContainer.dataset.tabs.split(","),
-      document.getElementById("js")
-    );
-  } else {
-    tabby.initEditor(["html", "css"], document.getElementById("html"));
+  /**
+   * @returns {string[]} - IDs of editors that should be visible in the example.
+   */
+  function getTabs(editorContainer) {
+    if (editorContainer.dataset && editorContainer.dataset.tabs) {
+      return editorContainer.dataset.tabs.split(",");
+    } else {
+      return ["html", "css"];
+     }
+  }
+
+  /**
+   * @returns {string} - ID of editor that should be active be default.
+   */
+  function getDefaultTab(editorContainer, tabs) {
+    if (editorContainer.dataset && editorContainer.dataset.defaultTab) {
+      return editorContainer.dataset.defaultTab;
+    } else if (tabs.includes("js")) {
+      return "js";
+    } else {
+      return "html";
+    }
   }
 
+  let tabs = getTabs(editorContainer);
+  let defaultTab = getDefaultTab(editorContainer, tabs);
+  tabby.initEditor(tabs, document.getElementById(defaultTab));
+
   mceConsole();
 
   tabby.registerEventListeners();

diff --git a/editor/tmpl/live-tabbed-tmpl.html b/editor/tmpl/live-tabbed-tmpl.html
@@ -15,7 +15,7 @@
         <h4 class="output-heading">%title%</h4>
         <button id="reset" class="reset" type="button">Reset</button>
     </header>
-    <div id="editor-container" class="editor-container %editor-height%" %active-tabs%>
+    <div id="editor-container" class="editor-container %editor-height%" %active-tabs% %default-tab%>
         <section id="tab-container" class="tabs">
             <div class="tab-list" id="tablist" role="tablist">
                 <button role="tab" aria-selected="false" aria-controls="html-panel"

diff --git a/lib/pageBuilderUtils.js b/lib/pageBuilderUtils.js
@@ -75,6 +75,22 @@ module.exports = {
       return tmpl.replace(regex, "");
     }
   },
+  /**
+   * Sets the tab that should be open by default.
+   * @param {Object} currentPage - The current page object
+   * @param {String} tmpl - The template as a string
+   *
+   * @returns The processed template with the default tab id
+   */
+  setDefaultTab: function (currentPage, tmpl) {
+    const regex = /%default-tab%/g;
+
+    if (currentPage.defaultTab) {
+      return tmpl.replace(regex, `data-default-tab="${currentPage.defaultTab}"`);
+    } else {
+      return tmpl.replace(regex, "");
+    }
+  },
   /**
    * If the `currentPage.type` is of type webapi-tabbed,
    * show the console, else hide. Also set the appropriate

diff --git a/lib/tabbedPageBuilder.js b/lib/tabbedPageBuilder.js
@@ -66,6 +66,8 @@ function buildTabbedExample(tmpl, currentPage) {
     tmpl = pageBuilderUtils.setEditorHeight(currentPage, tmpl);
     // set the active tabs to show
     tmpl = pageBuilderUtils.setActiveTabs(currentPage, tmpl);
+    // set the default tab to open
+    tmpl = pageBuilderUtils.setDefaultTab(currentPage, tmpl);
     // set the console state
     tmpl = pageBuilderUtils.setConsoleState(currentPage, tmpl);