From e3af41ea2ea9686c70c7db2b534079ba673bda6e Mon Sep 17 00:00:00 2001
From: Homer S <homer77@ismus.net>
Date: Thu, 17 Feb 2022 17:40:43 +0100
Subject: [PATCH] Added ShowHide-Button in case of CW.

---
 index.html | 27 ++++++++++++++++++++++++---
 style.css  | 14 +++++++++++++-
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index daebfb1..2f53983 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
 
       <main id="comments">
 	<link rel="stylesheet" href="fontawesome/css/all.css">
-	<link rel="stylesheet" href="style.css?v=1.2">
+	<link rel="stylesheet" href="style.css?v=1.21">
 
 
       </main>
@@ -93,8 +93,11 @@
 	  if(obj.spoiler_text.length > 0){
 	      const myCW = document.createElement('summary');
 	      const myButton = document.createElement('button');
-	      myButton.textContent = "+";
+	      myButton.addEventListener("click", showHide);
+	      myButton.textContent = "\u{1F648}";
 	      myCW.textContent = obj.spoiler_text;
+	      myButton.classList.toggle("show");
+				     
 	      myHeader.appendChild(myCW);
 	      myHeader.appendChild(myButton);
 	      
@@ -109,6 +112,9 @@
 
 	    const mySection = document.createElement('section');
 	    mySection.innerHTML = `${obj['content']}`;
+	    if(obj.spoiler_text.length > 0){
+		mySection.style.display="none";
+	    }
 	    item.appendChild(mySection);
       }
 
@@ -144,7 +150,22 @@
 	}
 
 	buildCommentTree("107735248507147283");
-//	buildCommentTree("107724981153178707");
+	//	buildCommentTree("107724981153178707");
+
+	function showHide(){
+	    button = event.srcElement;
+	    article = button.parentNode.parentNode;
+	    section = article.querySelector('section');
+	    
+	    if( section.style.display == "none" ){
+		section.style.display = "block";
+		button.classList.toggle("hide");
+	    }
+	    else {
+		section.style.display = "none";
+		button.classList.toggle("show");
+	    }
+	}
 
     </script>
   </body>
diff --git a/style.css b/style.css
index 19cc036..6761a30 100644
--- a/style.css
+++ b/style.css
@@ -106,7 +106,8 @@ article > footer > ul {
     grid-template-areas:
 	"replies favs boosts";
     grid-template-columns:  1fr 1fr 1fr;
-    gap:0em;    
+    gap:0em;
+    list-style-type: none;
 }
 
 article > footer > ul > li:before {
@@ -119,14 +120,25 @@ article > footer > ul > li.replies {
 
 }
 
+article > footer > ul > li.replies:before {
+    content: '\1F4AC';
+}
+
 article > footer > ul > li.favs {
     grid-area: favs;
 }
 
+article > footer > ul > li.favs:before {
+    content:'\2B50';
+}
+
 article > footer > ul > li.boosts {
     grid-area: boosts;
 }
 
+article > footer > ul > li.boosts:before {
+    content:'\1F680';
+}