Remove Subtree sections, all collapse all button (#2213)

- Resolves #2198 <img width="700" alt="Screenshot 2023-06-20 at 14 09 21" src="https://github.com/anoma/juvix/assets/8126674/f5ebb89e-5f2a-41fe-8495-13b1ec4aea02">
anoma · Jun 23, 2023 · 9840878 · 9840878
1 parent f77e055
commit 9840878
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 12 deletions.
diff --git a/assets/css/linuwial.css b/assets/css/linuwial.css
@@ -883,3 +883,26 @@ p.directory {
 }
 
 /* @end */
+
+/* Styles for the toggle button */
+.toggle-button {
+  display: inline-block;
+  padding: 5px 10px;
+  background-color: #D84E53;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  width: 165px;
+  text-align: left;
+}
+
+.toggle-button:hover {
+  background-color: #803353;
+}
+
+/* Styles for the toggle icon */
+.toggle-icon {
+  display: inline-block;
+  margin-right: 5px;
+  font-weight: bold;
+}
diff --git a/assets/js/toggle.js b/assets/js/toggle.js
@@ -0,0 +1,18 @@
+function toggle() {
+  const toggleAllButton = document.getElementById('toggle-all-button');
+  if (toggleAllButton.classList.contains('opened')) {
+    document.getElementById('toggle-button-text').textContent =
+      '▶ Expand all modules';
+    toggleAllButton.classList.remove('opened');
+    document.body
+      .querySelectorAll('details')
+      .forEach((detail) => detail.removeAttribute('open'));
+  } else {
+    document.getElementById('toggle-button-text').textContent =
+      '▼   Hide all modules';
+    toggleAllButton.classList.add('opened');
+    document.body
+      .querySelectorAll('details')
+      .forEach((detail) => detail.setAttribute('open', ''));
+  }
+}
diff --git a/src/Juvix/Compiler/Backend/Html/Extra.hs b/src/Juvix/Compiler/Backend/Html/Extra.hs
@@ -51,6 +51,9 @@ jsLink js = do
       ! Attr.type_ "text/javascript"
     $ mempty
 
+toggleJs :: (Members '[Reader HtmlOptions] r) => Sem r Html
+toggleJs = jsLink "toggle.js"
+
 linuwialCss :: (Members '[Reader HtmlOptions] r) => Sem r Html
 linuwialCss = cssLink "linuwial.css"
 

diff --git a/src/Juvix/Compiler/Backend/Html/Translation/FromTyped.hs b/src/Juvix/Compiler/Backend/Html/Translation/FromTyped.hs
@@ -89,6 +89,15 @@ createIndexFile ps = do
         Html.div ! Attr.id "content" $
           Html.div ! Attr.id "module-list" $
             (p ! Attr.class_ "caption" $ "Modules")
+              <> ( button
+                     ! Attr.id "toggle-all-button"
+                     ! Attr.class_ "toggle-button opened"
+                     ! Attr.onclick "toggle()"
+                     $ Html.span
+                       ! Attr.id "toggle-button-text"
+                       ! Attr.class_ "toggle-icon"
+                     $ "▼ Hide all modules"
+                 )
               <> tree'
 
     tree :: ModuleTree
@@ -106,7 +115,7 @@ createIndexFile ps = do
         nodeRow = case lbl of
           Nothing ->
             return $
-              Html.p ! Attr.class_ attrBare $
+              Html.span ! Attr.class_ attrBare $
                 toHtml (prettyText s)
           Just lbl' -> do
             lnk <- nameIdAttrRef lbl' Nothing
@@ -121,21 +130,17 @@ createIndexFile ps = do
         attrBare = attrBase <> " directory"
 
         node :: Sem r Html
-        node = do
-          row' <- nodeRow
-          childs' <- childs
-          return (row' <>? childs')
+        node = nodeRow >>= getRowWithChilds
           where
-            childs :: Sem r (Maybe Html)
-            childs
-              | null children = return Nothing
+            getRowWithChilds :: Html -> Sem r Html
+            getRowWithChilds row'
+              | null children = return row'
               | otherwise = do
                   c' <- mapM (uncurry goChild) (HashMap.toList children)
                   return $
-                    Just $
-                      details ! Attr.open "open" $
-                        summary "Subtree"
-                          <> ul (mconcatMap li c')
+                    details ! Attr.open "open" $
+                      summary row'
+                        <> ul (mconcatMap li c')
 
 writeHtml :: (Members '[Embed IO] r) => Path Abs File -> Html -> Sem r ()
 writeHtml f h = Prelude.embed $ do
@@ -209,6 +214,7 @@ template rightMenu' content' = do
   mathJax <- mathJaxCdn
   ayuTheme <- ayuCss
   judocTheme <- linuwialCss
+  toggle <- toggleJs
   let mhead :: Html
       mhead =
         Html.head $
@@ -223,6 +229,7 @@ template rightMenu' content' = do
             <> livejs
             <> ayuTheme
             <> judocTheme
+            <> toggle
 
       titleStr :: Html
       titleStr = "Juvix Documentation"