Add a collapse [-] button to comment elements.

This commit is contained in:
Ethan Dalool 2017-12-05 15:12:54 -08:00
parent cae90acfc6
commit f7e96975bf

View file

@ -25,43 +25,68 @@ HTML_HEADER = '''
border: 4px #00f solid; border: 4px #00f solid;
padding-left: 20px; padding-left: 20px;
} }
.hidden
{
display: none;
}
</style> </style>
</head> </head>
<body> <body>
'''.strip() '''.strip()
HTML_FOOTER = '</body>\n</html>' HTML_FOOTER = '''
</body>
<script>
function toggle_collapse(comment_div)
{
var button = comment_div.getElementsByClassName("toggle_hide_button")[0];
var collapsible = comment_div.getElementsByClassName("collapsible")[0];
if (collapsible.classList.contains("hidden"))
{
collapsible.classList.remove("hidden");
button.innerText = "[-]";
}
else
{
collapsible.classList.add("hidden");
button.innerText = "[+]";
}
}
</script>
</html>
'''
HTML_COMMENT = ''' HTML_COMMENT = '''
<div class="comment" <div class="comment" id="{id}">
id="{id}"
<p class="userinfo"> <p class="userinfo">
<a
class="toggle_hide_button"
href="javascript:void(0)"
onclick="toggle_collapse(this.parentElement.parentElement)">[-]
</a>
{usernamelink} {usernamelink}
<span class="score"> | {score} points</span> <span class="score"> | {score} points</span>
<span class="timestamp"> | {human}</span> <span class="timestamp"> | {human}</span>
</p> </p>
<div class="collapsible">
<p>{body}</p> {body}
<p class="toolbar"> <p class="toolbar">
{permalink} {permalink}
</p> </p>
{{children}} {{children}}
</div>
</div> </div>
'''.strip() '''.strip()
HTML_SUBMISSION = ''' HTML_SUBMISSION = '''
<div class="submission" <div class="submission" id="{id}">
id="{id}"
<p class="userinfo"> <p class="userinfo">
{usernamelink} {usernamelink}
<span class="score"> | {score} points</span> <span class="score"> | {score} points</span>
<span class="timestamp"> | {human}</span> <span class="timestamp"> | {human}</span>
</p> </p>
<strong>{title}</strong> <strong>{title}</strong>
<p>{url_or_text}</p> <p>{url_or_text}</p>
<p class="toolbar"> <p class="toolbar">
{permalink} {permalink}
</p> </p>