docs(dev-novel): add tabs to switch between kinds of stories (algolia…

…#2947)
huanyifan · May 29, 2018 · a5d7064 · a5d7064
1 parent 7796e83
commit a5d7064
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/dev/app/index.js b/dev/app/index.js
@@ -15,20 +15,37 @@ registerDisposer(() => {
 
 const q = window.location.search;
 
+let selectedTab = '';
 switch (true) {
   case q.includes('widgets=vanilla'):
     initVanillaWidgets();
+    selectedTab = 'vanilla';
     break;
   case q.includes('widgets=jquery'):
     initJqueryWidgets();
+    selectedTab = 'jquery';
     break;
   case q.includes('widgets=unmount'):
     initUnmountWidgets();
+    selectedTab = 'unmount';
     break;
   default:
     initBuiltInWidgets();
 }
 
+const selectStories = document.createElement('div');
+selectStories.className = 'story-selector';
+selectStories.innerHTML = `
+  <a href="?" class="tab ${selectedTab === '' ? 'active' : ''}">Built-in</a>
+  <a href="?widgets=jquery" class="tab ${
+    selectedTab === 'jquery' ? 'active' : ''
+  }">Connectors with jQuery</a>
+  <a href="?widgets=unmount" class="tab ${
+    selectedTab === 'unmount' ? 'active' : ''
+  }">Disposable widgets</a>
+`;
+document.body.appendChild(selectStories);
+
 start({
   projectName: 'instantsearch.js',
   projectLink: 'https://community.algolia.com/instantsearch.js/',

diff --git a/dev/style.css b/dev/style.css
@@ -123,3 +123,23 @@
 .my-custom-info-box__text {
   text-align: center;
 }
+
+.story-selector {
+  padding-left: 5px;
+  background: #333;
+}
+
+.tab {
+  height: 30px;
+  display: inline-block;
+  padding: 5px;
+  margin: 5px 2px 0 2px;
+  background: #d6d6d6;
+  color: #777;
+  text-decoration: none;
+}
+
+.tab.active {
+  background: #f7f7f7;
+  color: black;
+}