Uses toggle button snippet for content warning

This commit is contained in:
Mouse Reeve 2021-01-17 08:50:47 -08:00
parent afdf5fc8ec
commit f7e3cbda84
7 changed files with 19 additions and 22 deletions

View file

@ -1,7 +1,7 @@
// set up javascript listeners // set up javascript listeners
window.onload = function() { window.onload = function() {
// let buttons set keyboard focus // let buttons set keyboard focus
Array.from(document.getElementsByClassName('toggle-control')) document.querySelectorAll('[data-controls]')
.forEach(t => t.onclick = toggleAction); .forEach(t => t.onclick = toggleAction);
// javascript interactions (boost/fav) // javascript interactions (boost/fav)
@ -51,8 +51,8 @@ function setDisplay(el) {
} }
function toggleAction(e) { function toggleAction(e) {
var pressed = e.currentTarget.getAttribute('aria-pressed') == 'false';
var el = e.currentTarget; var el = e.currentTarget;
var pressed = el.getAttribute('aria-pressed') == 'false';
var targetId = el.getAttribute('data-controls'); var targetId = el.getAttribute('data-controls');
document.querySelectorAll('[data-controls="' + targetId + '"]') document.querySelectorAll('[data-controls="' + targetId + '"]')
@ -69,17 +69,17 @@ function toggleAction(e) {
} }
} }
// set hover, if appropriate
var hover = el.getAttribute('data-hover-target');
if (hover) {
document.getElementById(hover).focus();
}
// set checkbox, if appropriate // set checkbox, if appropriate
var checkbox = el.getAttribute('data-controls-checkbox'); var checkbox = el.getAttribute('data-controls-checkbox');
if (checkbox) { if (checkbox) {
document.getElementById(checkbox).checked = !!pressed; document.getElementById(checkbox).checked = !!pressed;
} }
// set focus, if appropriate
var focus = el.getAttribute('data-focus-target');
if (focus) {
document.getElementById(focus).focus();
}
} }

View file

@ -94,7 +94,7 @@
{% include 'snippets/trimmed_text.html' with full=book|book_description %} {% include 'snippets/trimmed_text.html' with full=book|book_description %}
{% if request.user.is_authenticated and perms.bookwyrm.edit_book and not book|book_description %} {% if request.user.is_authenticated and perms.bookwyrm.edit_book and not book|book_description %}
{% include 'snippets/toggle/open_button.html' with text="Add description" controls_text="add-description" controls_uid=book.id hover="id_description" hide_active=True id="hide-description" %} {% include 'snippets/toggle/open_button.html' with text="Add description" controls_text="add-description" controls_uid=book.id focus="id_description" hide_active=True id="hide-description" %}
<div class="box hidden" id="add-description-{{ book.id }}"> <div class="box hidden" id="add-description-{{ book.id }}">
<form name="add-description" method="POST" action="/add-description/{{ book.id }}"> <form name="add-description" method="POST" action="/add-description/{{ book.id }}">

View file

@ -6,7 +6,7 @@
{% if user == request.user %} {% if user == request.user %}
<div class="block"> <div class="block">
{% if goal %} {% if goal %}
{% include 'snippets/toggle/open_button.html' with text="Edit goal" controls_text="show-edit-goal" hover="edit-form-header" %} {% include 'snippets/toggle/open_button.html' with text="Edit goal" controls_text="show-edit-goal" focus="edit-form-header" %}
{% endif %} {% endif %}
{% now 'Y' as year %} {% now 'Y' as year %}
<section class="card {% if goal %}hidden{% endif %}" id="show-edit-goal"> <section class="card {% if goal %}hidden{% endif %}" id="show-edit-goal">

View file

@ -1,4 +1,4 @@
<div class="control{% if not parent_status.content_warning %} hidden{% endif %}" id="spoilers-{{ uuid }}"> <div class="control{% if not parent_status.content_warning %} hidden{% endif %}" id="spoilers-{{ uuid }}">
<label class="is-sr-only" for="id_content_warning_{{ uuid }}">Spoiler alert:</label> <label class="is-sr-only" for="id_content_warning-{{ uuid }}">Spoiler alert:</label>
<input type="text" name="content_warning" maxlength="255" class="input" id="id_content_warning_{{ uuid }}" placeholder="Spoilers ahead!"{% if parent_status.content_warning %} value="{{ parent_status.content_warning }}"{% endif %}> <input type="text" name="content_warning" maxlength="255" class="input" id="id_content_warning-{{ uuid }}" placeholder="Spoilers ahead!"{% if parent_status.content_warning %} value="{{ parent_status.content_warning }}"{% endif %}>
</div> </div>

View file

@ -44,16 +44,12 @@
<textarea name="content" class="textarea is-small" id="id_content_{{ book.id }}_quote"></textarea> <textarea name="content" class="textarea is-small" id="id_content_{{ book.id }}_quote"></textarea>
</div> </div>
{% endif %} {% endif %}
<input type="checkbox" class="hidden" name="sensitive" id="show-spoilers-{{ uuid }}" {% if status.content_warning %}checked{% endif %} aria-hidden="true"> <input type="checkbox" class="hidden" name="sensitive" id="id_show_spoilers-{{ uuid }}" {% if status.content_warning %}checked{% endif %} aria-hidden="true">
{# bottom bar #} {# bottom bar #}
<div class="columns pt-1"> <div class="columns pt-1">
<div class="field has-addons column"> <div class="field has-addons column">
<div class="control"> <div class="control">
<button type="button" class="button toggle-control" for="show-spoilers-{{ uuid }}" data-controls="spoilers-{{ uuid }}" data-hover-target="id_content_warning_{{ uuid }}" aria-pressed="{% if status.content_warning %}true{% else %}false{% endif %}" data-controls-checkbox="show-spoilers-{{ uuid }}"> {% include 'snippets/toggle/toggle_button.html' with text="Include spoiler alert" icon="warning is-size-4" controls_text="spoilers" controls_uid=uuid focus="id_content_warning" checkbox="id_show_spoilers" class="toggle-button" pressed=status.content_warning %}
<span class="icon icon-warning is-size-4" title="include spoiler alert">
<span class="is-sr-only">include spoiler alert</span>
</span>
</button>
</div> </div>
<div class="control"> <div class="control">
{% include 'snippets/privacy_select.html' %} {% include 'snippets/privacy_select.html' %}

View file

@ -57,7 +57,7 @@
{% block card-bonus %} {% block card-bonus %}
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
{% with status.id|uuid as uuid %} {% with status.id|uuid as uuid %}
<input class="toggle-control" type="checkbox" name="show-comment-{{ status.id }}" id="show-comment-{{ status.id }}" data-hover-target="id_content_{{ status.id }}{{ uuid }}_reply"> <input class="toggle-control" type="checkbox" name="show-comment-{{ status.id }}" id="show-comment-{{ status.id }}" data-focus-target="id_content_{{ status.id }}{{ uuid }}_reply">
<section class="toggle-content hidden"> <section class="toggle-content hidden">
<div class="card-footer"> <div class="card-footer">
<div class="card-footer-item"> <div class="card-footer-item">

View file

@ -1,10 +1,11 @@
<button <button
type="button" type="button"
class="toggle-control button {{ class }} {% if button_type %}{{ button_type }}{% else %}toggle-button{% endif %}" class="toggle-control button {{ class }} {% if button_type %}{{ button_type }}{% endif %}"
data-controls="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}" data-controls="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"
{% if hover %}data-hover-target="{{ hover }}"{% endif %} {% if focus %}data-focus-target="{{ focus }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"{% endif %}
{% if checkbox %}data-controls-checkbox="{{ checkbox }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"{% endif %}
{% if label %}aria-label="label"{% endif %} {% if label %}aria-label="label"{% endif %}
aria-pressed="false" aria-pressed="{% if pressed %}true{% else %}false{% endif %}"
> >
{% if icon %} {% if icon %}