Show arvados sections by default, instead of generic ones.

[rnaseq-cwl-training.git] / _episodes / 03-running.md

diff --git a/_episodes/03-running.md b/_episodes/03-running.md
index b7c6bb4b2f0dfceeb4367d7cef68900ef39bc691..9c627149e201d1b8a64aa73ddc439f38a5bc8791 100644 (file)
--- a/_episodes/03-running.md
+++ b/_episodes/03-running.md
@@ -31,8 +31,7 @@ plain strings that may or may not be file paths.
 
 Note: if you don't have example sequence data or the STAR index files, see [setup](/setup.html).
 
-{% assign tabs = "generic, arvados" | split: ", " %}
-{% capture generic_tab_content %}
+{% capture generic_input_tab_content %}
 main-input.yaml
 ```
 fq:
@@ -63,7 +62,7 @@ gtf:
 {: .challenge }
 {% endcapture %}
 
-{% capture arvados_tab_content %}
+{% capture arvados_input_tab_content %}
 main-input.yaml
 ```
 fq:
@@ -89,13 +88,12 @@ gtf:
 
 <div class="tabbed">
   <ul class="tab">
-    {% for tab in tabs %}
-      <li><a href="#section-{{ tab }}">{{ tab }}</a></li>
-    {% endfor %}
+      <li><a href="#section-arvados-input">arvados</a></li>
+      <li><a href="#section-generic-input">generic</a></li>
   </ul>
 
-  <section id="section-generic">{{ generic_tab_content | markdownify}}</section>
-  <section id="section-arvados">{{ arvados_tab_content | markdownify}}</section>
+  <section id="section-arvados-input">{{ arvados_input_tab_content | markdownify}}</section>
+  <section id="section-generic-input">{{ generic_input_tab_content | markdownify}}</section>
 </div>
 
 # Debugging the workflow
@@ -171,10 +169,8 @@ Resource requirements you can set include:
 
 The CWL runner will print a results JSON object to standard output.  It will look something like this (it may include additional fields).
 
-<div>
-{% tabs output %}
+{% capture generic_output_tab_content %}
 
-{% tab output generic %}
 ```
 {
     "bam_sorted_indexed": {
@@ -200,9 +196,9 @@ The CWL runner will print a results JSON object to standard output.  It will loo
 }
 ```
 {: .language-yaml }
-{% endtab %}
+{% endcapture %}
 
-{% tab output arvados %}
+{% capture arvados_output_tab_content %}
 ```
 {
     "bam_sorted_indexed": {
@@ -227,90 +223,18 @@ The CWL runner will print a results JSON object to standard output.  It will loo
 }
 ```
 {: .language-yaml }
-{% endtab %}
-{% endtabs %}
+{% endcapture %}
+
+<div class="tabbed">
+  <ul class="tab">
+      <li><a href="#section-arvados-output">arvados</a></li>
+      <li><a href="#section-generic-output">generic</a></li>
+  </ul>
+
+  <section id="section-arvados-output">{{ arvados_output_tab_content | markdownify}}</section>
+  <section id="section-generic-output">{{ generic_output_tab_content | markdownify}}</section>
 </div>
 
 This has a similar structure as `main-input.yaml`.  The each output
 parameter is listed, with the `location` field of each `File` object
 indicating where the output file can be found.
-
-<script>
-  (function() {
-    // Get relevant elements and collections
-    const tabbed = document.querySelector('.tabbed');
-    const tablist = tabbed.querySelector('ul');
-    const tabs = tablist.querySelectorAll('a');
-    const panels = tabbed.querySelectorAll('[id^="section"]');
-
-    // The tab switching function
-    const switchTab = (oldTab, newTab) => {
-      newTab.focus();
-      // Make the active tab focusable by the user (Tab key)
-      newTab.removeAttribute('tabindex');
-      // Set the selected state
-      newTab.setAttribute('aria-selected', 'true');
-      newTab.classList.add('active');
-      oldTab.removeAttribute('aria-selected');
-      oldTab.setAttribute('tabindex', '-1');
-      oldTab.classList.remove('active');
-      // Get the indices of the new and old tabs to find the correct
-      // tab panels to show and hide
-      let index = Array.prototype.indexOf.call(tabs, newTab);
-      let oldIndex = Array.prototype.indexOf.call(tabs, oldTab);
-      panels[oldIndex].hidden = true;
-      panels[index].hidden = false;
-    }
-
-    // Add the tablist role to the first <ul> in the .tabbed container
-    tablist.setAttribute('role', 'tablist');
-
-    // Add semantics are remove user focusability for each tab
-    Array.prototype.forEach.call(tabs, (tab, i) => {
-      tab.setAttribute('role', 'tab');
-      tab.setAttribute('id', 'tab' + (i + 1));
-      tab.setAttribute('tabindex', '-1');
-  //     tab.setAttribute('class', 'active');
-      tab.parentNode.setAttribute('role', 'presentation');
-
-      // Handle clicking of tabs for mouse users
-      tab.addEventListener('click', e => {
-        e.preventDefault();
-        let currentTab = tablist.querySelector('[aria-selected]');
-        if (e.currentTarget !== currentTab) {
-          switchTab(currentTab, e.currentTarget);
-        }
-      });
-
-      // Handle keydown events for keyboard users
-      tab.addEventListener('keydown', e => {
-        // Get the index of the current tab in the tabs node list
-        let index = Array.prototype.indexOf.call(tabs, e.currentTarget);
-        // Work out which key the user is pressing and
-        // Calculate the new tab's index where appropriate
-        let dir = e.which === 37 ? index - 1 : e.which === 39 ? index + 1 : e.which === 40 ? 'down' : null;
-        if (dir !== null) {
-          e.preventDefault();
-          // If the down key is pressed, move focus to the open panel,
-          // otherwise switch to the adjacent tab
-          dir === 'down' ? panels[i].focus() : tabs[dir] ? switchTab(e.currentTarget, tabs[dir]) : void 0;
-        }
-      });
-    });
-
-    // Add tab panel semantics and hide them all
-    Array.prototype.forEach.call(panels, (panel, i) => {
-      panel.setAttribute('role', 'tabpanel');
-      panel.setAttribute('tabindex', '-1');
-      let id = panel.getAttribute('id');
-      panel.setAttribute('aria-labelledby', tabs[i].id);
-      panel.hidden = true;
-    });
-
-    // Initially activate the first tab and reveal the first tab panel
-    tabs[0].removeAttribute('tabindex');
-    tabs[0].setAttribute('aria-selected', 'true');
-    tabs[0].setAttribute('class', 'active');
-    panels[0].hidden = false;
-  })();
-</script>