From 509f927612c823e0edae81fdf61ee5225fd6e68e Mon Sep 17 00:00:00 2001
From: Mikkel Munch Mortensen <3xm@detfalskested.dk>
Date: Tue, 12 Feb 2019 13:18:48 +0100
Subject: [PATCH] Make service listing details togglable

---
 _layouts/default.html |  1 +
 _pages/tjenester.md   |  8 ++++----
 _sass/_datacoop.scss  |  4 ++++
 js/datacoop.js        | 14 ++++++++++++++
 4 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 js/datacoop.js

diff --git a/_layouts/default.html b/_layouts/default.html
index d5774e2..7e6bfc6 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -46,5 +46,6 @@
         </footer>
       </div>
     </div>
+    <script type="text/javascript" src="/js/datacoop.js"></script>
   </body>
 </html>
diff --git a/_pages/tjenester.md b/_pages/tjenester.md
index 32224bb..42d0e6b 100644
--- a/_pages/tjenester.md
+++ b/_pages/tjenester.md
@@ -13,10 +13,10 @@ en uddybning af [hvad de forskellige badges dækker over](/tjenester/badges/).
 
 ## Tjenester der er åbne for alle
 
-### [Gitea](https://git.data.coop/)
+### [Gitea](https://git.data.coop/) – hosting af <a href="https://da.wikipedia.org/wiki/Git">git-versionsstyringssystem</a>
 
 <section class="service-details">
-    <p>Hosting af <a href="https://da.wikipedia.org/wiki/Git">git-versionsstyringssystem</a>. Skriver du kode eller anden tekst som du gerne vil holde under versionsstyring, kan du gemme det her.</p>
+    <p>Skriver du kode eller anden tekst som du gerne vil holde under versionsstyring, kan du gemme det her.</p>
     <h4>Badges</h4>
     <ul class="badges">
         <li>
@@ -63,10 +63,10 @@ en uddybning af [hvad de forskellige badges dækker over](/tjenester/badges/).
 </section>
 
 
-### [Passit](https://passit.data.coop/)
+### [Passit](https://passit.data.coop/) – password manager
 
 <section class="service-details">
-    <p>Password manager. Hjælper dig med at huske stærke, unikke kodeord til alle de sites og apps du benytter dig af.</p>
+    <p>Hjælper dig med at huske stærke, unikke kodeord til alle de sites og apps du benytter dig af.</p>
     <h4>Badges</h4>
     <ul class="badges">
         <li>
diff --git a/_sass/_datacoop.scss b/_sass/_datacoop.scss
index 60fbdf0..946ba14 100644
--- a/_sass/_datacoop.scss
+++ b/_sass/_datacoop.scss
@@ -64,3 +64,7 @@
 .service-details ul.badges li {
     margin: .5em 0;
 }
+
+.hidden {
+    display: none;
+}
diff --git a/js/datacoop.js b/js/datacoop.js
new file mode 100644
index 0000000..f84ed25
--- /dev/null
+++ b/js/datacoop.js
@@ -0,0 +1,14 @@
+window.onload = function(e) {
+    var details = document.querySelectorAll("section.service-details");
+    for (var detail of details) {
+        var toggle = document.createElement("a");
+        toggle.text = "Læs mere";
+        toggle.onclick = function(e) {
+            e.preventDefault();
+            var hide = e.target.previousSibling.classList.toggle("hidden");
+            e.target.text = hide ? "Læs mere" : "Skjul detaljer";
+        }
+        detail.insertAdjacentElement('afterend', toggle);
+        detail.classList.add("hidden");
+    }
+}