webapps.help: prototype of tabs

diff --git a/extra/webapps/help/search.css b/extra/webapps/help/search.css
index a11db7a5b6b3a30f4a6b54a88d72d334423fe10c..2caa39e7750bedc4bd696b291bc9f608063c748e 100644 (file)
--- a/extra/webapps/help/search.css
+++ b/extra/webapps/help/search.css
@@ -10,3 +10,34 @@ hr {
     color: #ccc;
     height: 1px;
 }
+
+.tab {
+  overflow: hidden;
+  border: 1px solid #ccc;
+  background-color: #f1f1f1;
+}
+
+.tab button {
+  background-color: inherit;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 14px 16px;
+  transition: 0.3s;
+}
+
+.tab button:hover {
+  background-color: #ddd;
+}
+
+.tab button.active {
+  background-color: #ccc;
+}
+
+.tabcontent {
+  display: none;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-top: none;
+}

diff --git a/extra/webapps/help/search.js b/extra/webapps/help/search.js
new file mode 100644 (file)
index 0000000..d344f0f
--- /dev/null
+++ b/extra/webapps/help/search.js
@@ -0,0 +1,17 @@
+function openTab(evt, tabName) {
+
+  var i, tabcontent, tablinks;
+
+  tabcontent = document.getElementsByClassName("tabcontent");
+  for (i = 0; i < tabcontent.length; i++) {
+    tabcontent[i].style.display = "none";
+  }
+
+  tablinks = document.getElementsByClassName("tablinks");
+  for (i = 0; i < tablinks.length; i++) {
+    tablinks[i].className = tablinks[i].className.replace(" active", "");
+  }
+
+  document.getElementById(tabName).style.display = "block";
+  evt.currentTarget.className += " active";
+}

diff --git a/extra/webapps/help/search.xml b/extra/webapps/help/search.xml
index c69405fabfbe6cfe152c3a8a928d876ff643771c..c9cc3a2d0cc4c38a24dbcf13a821f146e8b66b62 100644 (file)
--- a/extra/webapps/help/search.xml
+++ b/extra/webapps/help/search.xml
@@ -4,38 +4,52 @@
 
     <t:title>Search - Factor Documentation</t:title>
     <t:style t:include="resource:extra/webapps/help/search.css" />
+    <t:script t:include="resource:extra/webapps/help/search.js" />
 
     <t:html t:name="navbar"/>
 
     <div class="page">
-    <t:if t:value="articles">
-        <h2>Articles</h2>
+
+    <h2>Search results for '<t:label name="search" />'</h2>
+
+    <div class="tab">
+        <button class="tablinks" onclick="openTab(event, 'words')">Words</button>
+        <button class="tablinks" onclick="openTab(event, 'vocabs')">Vocabs</button>
+        <button class="tablinks" onclick="openTab(event, 'articles')">Articles</button>
+    </div>
+
+    <div id="words" class="tabcontent">
+    <t:if t:value="words">
         <ul>
-            <t:each t:name="articles">
+            <t:each t:name="words">
                 <li> <t:link t:name="value" /> </li>
             </t:each>
         </ul>
     </t:if>
+    </div>
 
+    <div id="vocabs" class="tabcontent">
     <t:if t:value="vocabs">
-        <h2>Vocabularies</h2>
         <ul>
             <t:each t:name="vocabs">
                 <li> <t:link t:name="value" /> </li>
             </t:each>
         </ul>
     </t:if>
+    </div>
 
-    <t:if t:value="words">
-        <h2>Words</h2>
+    <div id="articles" class="tabcontent">
+    <t:if t:value="articles">
         <ul>
-            <t:each t:name="words">
+            <t:each t:name="articles">
                 <li> <t:link t:name="value" /> </li>
             </t:each>
         </ul>
     </t:if>
+    </div>
 
     <br />
+    <div class="footer">
     <p style="font-size: smaller;">
     This documentation was generated offline from a
     <code>load-all</code> image.  If you want, you can also
@@ -46,4 +60,6 @@
     </p>
     </div>
 
+    </div>
+
 </t:chloe>