homer77
/
tootkomm
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added ShowHide-Button in case of CW.

This commit is contained in:
Homer S. 2022-02-17 17:40:43 +01:00
parent 888b761012
commit e3af41ea2e
2 changed files with 37 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
index.html
View File

@ -14,7 +14,7 @@
<main id="comments"> <main id="comments">
<link rel="stylesheet" href="fontawesome/css/all.css"> <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> </main>
@ -93,8 +93,11 @@
if(obj.spoiler_text.length > 0){ if(obj.spoiler_text.length > 0){
const myCW = document.createElement('summary'); const myCW = document.createElement('summary');
const myButton = document.createElement('button'); const myButton = document.createElement('button');
myButton.textContent = "+"; myButton.addEventListener("click", showHide);
myButton.textContent = "\u{1F648}";
myCW.textContent = obj.spoiler_text; myCW.textContent = obj.spoiler_text;
myButton.classList.toggle("show");
myHeader.appendChild(myCW); myHeader.appendChild(myCW);
myHeader.appendChild(myButton); myHeader.appendChild(myButton);
@ -109,6 +112,9 @@
const mySection = document.createElement('section'); const mySection = document.createElement('section');
mySection.innerHTML = `${obj['content']}`; mySection.innerHTML = `${obj['content']}`;
if(obj.spoiler_text.length > 0){
mySection.style.display="none";
}
item.appendChild(mySection); item.appendChild(mySection);
} }
@ -144,7 +150,22 @@
} }
buildCommentTree("107735248507147283"); 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> </script>
</body> </body>

14
style.css
View File

@ -106,7 +106,8 @@ article > footer > ul {
grid-template-areas: grid-template-areas:
"replies favs boosts"; "replies favs boosts";
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
gap:0em; gap:0em;
list-style-type: none;
} }
article > footer > ul > li:before { 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 { article > footer > ul > li.favs {
grid-area: favs; grid-area: favs;
} }
article > footer > ul > li.favs:before {
content:'\2B50';
}
article > footer > ul > li.boosts { article > footer > ul > li.boosts {
grid-area: boosts; grid-area: boosts;
} }
article > footer > ul > li.boosts:before {
content:'\1F680';
}