Replace JS toggle with pure CSS using HTML details element
This commit is contained in:
parent
eb9383178d
commit
18a65fb506
7 changed files with 94 additions and 57 deletions
|
|
@ -411,33 +411,84 @@ form.node-action {
|
|||
opacity: 0.8 !important;
|
||||
}
|
||||
|
||||
.remark-box-div-main {
|
||||
margin-bottom: 35px;
|
||||
/* Pure CSS toggle using <details> element */
|
||||
.toggle-summary {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.remark-box-div {
|
||||
.toggle-summary::-webkit-details-marker {
|
||||
display: none;
|
||||
/* this is needed to prevent "jumping" jquery bug. */
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.edit-box-div {
|
||||
.toggle-summary::marker {
|
||||
display: none;
|
||||
/* this is needed to prevent "jumping" jquery bug. */
|
||||
overflow: hidden;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Toggle text switching: show/hide different text based on open state */
|
||||
.toggle-summary .when-open {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-summary .when-closed {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
details[open] > .toggle-summary .when-open {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
details[open] > .toggle-summary .when-closed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden summary for main remark box (always open) */
|
||||
.toggle-summary-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Fallback links hidden when JS not needed */
|
||||
.toggle-fallback {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Edit box details styling */
|
||||
.edit-box-details {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.my-namespaces-div {
|
||||
display: none;
|
||||
/* Remark box details styling */
|
||||
.remark-box-details {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.remark-box-details-main {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
/* Namespace switcher dropdown */
|
||||
.my-namespaces-details {
|
||||
display: inline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.my-namespaces-content {
|
||||
position: absolute;
|
||||
background-color: #ffffff;
|
||||
z-index: 1;
|
||||
/* this is needed to prevent "jumping" jquery bug. */
|
||||
overflow: hidden;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
/* Node children collapse/expand */
|
||||
.node-children-details {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.node-children-details > .toggle-summary {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#remarkbox-footer {
|
||||
|
|
|
|||
|
|
@ -37,17 +37,6 @@ function sendPreview(textarea, div, mathjax=false){
|
|||
}
|
||||
}
|
||||
|
||||
// this toggles a dropdown.
|
||||
function toggle(target, button, off_text, on_text="hide"){
|
||||
if (!$('#' + target + ":visible").height()){
|
||||
$('#' + target).slideDown("slow");
|
||||
$('#' + button).text(on_text);
|
||||
}
|
||||
else {
|
||||
$('#' + target).slideUp("slow");
|
||||
$('#' + button).text(off_text);
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready( function() {
|
||||
|
||||
|
|
|
|||
|
|
@ -35,10 +35,9 @@
|
|||
{{ snippets.namespace_home_uri(request.namespace) }}
|
||||
|
||||
{%- if request.mode != 'embed' and request.user.authenticated and request.user.namespaces %}
|
||||
<a href="{{ domain_app }}/u/namespaces" onclick="toggle('my-namespaces-div', 'my-namespaces-link', '(switch)', '(switch)'); return false;" id="my-namespaces-link">(switch)</a>
|
||||
|
||||
<div id="my-namespaces-div" class="my-namespaces-div">
|
||||
|
||||
<details id="my-namespaces-details" class="my-namespaces-details">
|
||||
<summary class="toggle-summary" id="my-namespaces-link">(switch)</summary>
|
||||
<div class="my-namespaces-content">
|
||||
{% for namespace in request.user.namespaces %}
|
||||
{% if namespace != request.namespace %}
|
||||
{{ snippets.namespace_home_uri(namespace) }}
|
||||
|
|
@ -51,6 +50,7 @@
|
|||
<a href="{{ domain_app }}/setup" class="button">setup</a>
|
||||
</center>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
{%- endif %}
|
||||
|
||||
|
|
|
|||
|
|
@ -46,13 +46,15 @@ page: {{ request.page_number }}
|
|||
{{ snippets.actions(node) }}
|
||||
</div>
|
||||
|
||||
<div id="edit-box-{{ node.id }}" class="edit-box-div">
|
||||
<details id="edit-box-{{ node.id }}" class="edit-box-details">
|
||||
<summary class="action toggle-summary"><span class="when-closed">edit</span><span class="when-open">hide</span></summary>
|
||||
{{ forms.edit(node) }}
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div id="remark-box-{{ node.id }}" class="remark-box-div">
|
||||
<details id="remark-box-{{ node.id }}" class="remark-box-details">
|
||||
<summary class="remark toggle-summary"><span class="when-closed">remark</span><span class="when-open">hide</span></summary>
|
||||
{{ forms.reply(node, node) }}
|
||||
</div>
|
||||
</details>
|
||||
|
||||
{% endfor -%}
|
||||
|
||||
|
|
|
|||
|
|
@ -75,13 +75,15 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div id="edit-box-{{ request.node.id }}" class="edit-box-div">
|
||||
<details id="edit-box-{{ request.node.id }}" class="edit-box-details">
|
||||
<summary class="action toggle-summary"><span class="when-closed">edit</span><span class="when-open">hide</span></summary>
|
||||
{{ forms.edit(request.node) }}
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div id="remark-box-{{ request.node.id }}" class="remark-box-div-main not-hidden-remark-box-div">
|
||||
<details id="remark-box-{{ request.node.id }}" class="remark-box-details remark-box-details-main" open>
|
||||
<summary class="toggle-summary toggle-summary-hidden"></summary>
|
||||
{{ forms.reply(request.node, request.root_node) }}
|
||||
</div>
|
||||
</details>
|
||||
|
||||
|
||||
{%- if request.node.id and request.node_graph[request.node.id] -%}
|
||||
|
|
@ -148,20 +150,23 @@
|
|||
<a href="{{ request.link_prefix }}/{{ parent.id }}#{{ parent.id }}" class="load-more shown-on-tablet">load more <span style="color: #292929; font-weight: normal;">({{children_ids | length}} remarks)</span></a>
|
||||
{% endif %}
|
||||
|
||||
<div id="edit-box-{{ parent.id }}" class="edit-box-div">
|
||||
<details id="edit-box-{{ parent.id }}" class="edit-box-details">
|
||||
<summary class="action toggle-summary"><span class="when-closed">edit</span><span class="when-open">hide</span></summary>
|
||||
{{ forms.edit(parent) }}
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div id="remark-box-{{ parent.id }}" class="remark-box-div">
|
||||
<details id="remark-box-{{ parent.id }}" class="remark-box-details">
|
||||
<summary class="remark toggle-summary"><span class="when-closed">remark</span><span class="when-open">hide</span></summary>
|
||||
{{ forms.reply(parent, request.root_node) }}
|
||||
</div>
|
||||
|
||||
</details>
|
||||
|
||||
{#- nest children in this node's div for convo collapsing. -#}
|
||||
<div id="node-children-{{ parent.id }}">
|
||||
<details id="node-children-{{ parent.id }}" class="node-children-details" open>
|
||||
<summary class="action link toggle-summary"><span class="when-closed">expand [+]</span><span class="when-open">collapse [-]</span></summary>
|
||||
{%- if children_ids %}
|
||||
{{ loop(children_ids) }}
|
||||
{% endif -%}
|
||||
</div>
|
||||
</details>
|
||||
|
||||
{# close the class="node" div #}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
{% macro reply(node, root) %}
|
||||
|
||||
{% if root.locked %}
|
||||
<br>
|
||||
<p>This thread was locked to prevent additional comments.</p>
|
||||
|
|
@ -39,11 +38,9 @@
|
|||
</form>
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% endmacro %}
|
||||
|
||||
{% macro edit(node) %}
|
||||
|
||||
<form method="post" action="{{ request.link_prefix }}/{{ node.id }}/edit" onsubmit="submit.disabled = true; return true;">
|
||||
|
||||
{% if node.title %}
|
||||
|
|
@ -70,7 +67,6 @@
|
|||
{% set submit_button_value = 'save message' %}
|
||||
{% include 'submit.j2' %}
|
||||
</form>
|
||||
|
||||
{% endmacro %}
|
||||
|
||||
{% macro pay_what_you_can() %}
|
||||
|
|
|
|||
|
|
@ -84,9 +84,7 @@
|
|||
|
||||
{% macro button_remark(node, root_node) %}
|
||||
{% if root_node and not root_node.locked %}
|
||||
<a href="{{ request.link_prefix }}/{{ node.id }}"
|
||||
onclick="toggle('remark-box-{{ node.id }}', 'remark-link-{{ node.id }}', 'remark', 'hide'); document.getElementById('textarea-{{ node.id }}').focus(); return false;"
|
||||
id="remark-link-{{ node.id }}" class="remark">remark</a>
|
||||
<a href="{{ request.link_prefix }}/{{ node.id }}" id="remark-link-{{ node.id }}" class="remark toggle-fallback">remark</a>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
|
|
@ -99,9 +97,6 @@
|
|||
{% endmacro %}
|
||||
|
||||
{% macro button_collapse(node) %}
|
||||
<button
|
||||
onclick="toggle('node-children-{{ node.id }}', 'collapse-link-{{ node.id }}', 'expand [+]', 'collapse [-]');"
|
||||
id="collapse-link-{{ node.id }}" class="action link js-only">collapse [-]</button>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro permalinks(node, parent_node=None, root_node=None) %}
|
||||
|
|
@ -211,8 +206,7 @@
|
|||
{{ enable_node(node=node) }}
|
||||
{% else %}
|
||||
<a href="{{ request.link_prefix }}/{{ node.id }}/edit"
|
||||
onclick="toggle('edit-box-{{ node.id }}', 'edit-link-{{ node.id }}', 'edit', 'hide'); document.getElementById('edit-textarea-{{ node.id }}').focus(); return false;"
|
||||
id="edit-link-{{ node.id }}" class="action">edit</a>
|
||||
id="edit-link-{{ node.id }}" class="action toggle-fallback">edit</a>
|
||||
|
||||
{{ disable_node(node=node) }}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue