mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-06-20 14:10:38 +00:00
Code Issues Projects Releases Wiki Activity

refactors content warning button

Browse source
This commit is contained in:
Mouse Reeve 2021-01-16 19:57:20 -08:00
parent 6ab543004e
commit 3e58163f0d
7 changed files with 76 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
bookwyrm/static/css/format.css
View file

@ -14,6 +14,11 @@
}
/* --- TOGGLES --- */
[aria-pressed=true] {
background-color: hsl(171, 100%, 41%);
color: white;
}
input.toggle-control {
display: none;
}

26
bookwyrm/static/js/shared.js
View file

@ -29,6 +29,10 @@ window.onload = function() {
// update localstorage
Array.from(document.getElementsByClassName('set-display'))
.forEach(t => t.onclick = updateDisplay);
// toggle display
Array.from(document.getElementsByClassName('toggle-button'))
.forEach(t => t.onclick = toggleDisplay);
};
function updateDisplay(e) {
@ -51,11 +55,31 @@ function setDisplay(el) {
}
function toggleAction(e) {
var pressed = e.currentTarget.getAttribute('aria-pressed') == 'false';
e.currentTarget.setAttribute('aria-pressed', pressed);
var targetId = e.currentTarget.getAttribute('data-controls');
if (targetId) {
var target = document.getElementById(targetId);
if (pressed) {
target.className = target.className.replace('hidden', '');
} else {
target.className += ' hidden';
}
}
// set hover, if appropriate
var hover = e.target.getAttribute('data-hover-target');
var hover = e.currentTarget.getAttribute('data-hover-target');
if (hover) {
document.getElementById(hover).focus();
}
// set checkbox, if appropriate
var checkbox = e.currentTarget.getAttribute('data-controls-checkbox');
if (checkbox) {
document.getElementById(checkbox).checked = !!pressed;
}
}

22
bookwyrm/templates/snippets/content_warning_field.html
View file

@ -1,20 +1,4 @@
{% load bookwyrm_tags %}
{% with 0|uuid as uuid %}
<div class="control">
<div>
<input type="radio" class="toggle-control" id="include-spoilers-{{ uuid }}" name="sensitive" value="true" {% if parent_status.content_warning %}checked{% endif %} data-hover-target="id_content_warning_{{ uuid }}">
<div class="toggle-content hidden">
<label class="is-sr-only" for="id_content_warning_{{ uuid }}">Spoilers/content warning:</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 %}>
{% include 'snippets/toggle/toggle_button.html' with controls_text="hide-spoilers" controls_uid=uuid text="Remove spoilers/content warning" small=True %}
</div>
</div>
<div>
<input type="radio" class="toggle-control" name="sensitive" value="false" id="hide-spoilers-{{ uuid }}" {% if not parent_status.content_warning %}checked{% endif %}>
<div class="toggle-content hidden">
{% include 'snippets/toggle/toggle_button.html' with controls_text="include-spoilers" controls_uid=uuid text="Add spoilers/content warning" small=True %}
</div>
</div>
<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>
<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>
{% endwith %}

18
bookwyrm/templates/snippets/create_status.html
View file

@ -29,15 +29,27 @@
<div>
<input class="toggle-control" type="radio" name="status-tabs-{{ book.id }}" id="review-{{ book.id }}" checked>
{% include 'snippets/create_status_form.html' with type='review' %}
<div class="toggle-content hidden tab-option-{{ book.id }}">
{% with 0|uuid as uuid %}
{% include 'snippets/create_status_form.html' with type='review' %}
{% endwith %}
</div>
</div>
<div>
<input class="toggle-control" type="radio" name="status-tabs-{{ book.id }}" id="comment-{{ book.id }}">
{% include 'snippets/create_status_form.html' with type="comment" placeholder="Some thoughts on '"|add:book.title|add:"'" %}
<div class="toggle-content hidden tab-option-{{ book.id }}">
{% with 0|uuid as uuid %}
{% include 'snippets/create_status_form.html' with type="comment" placeholder="Some thoughts on '"|add:book.title|add:"'" %}
{% endwith %}
</div>
</div>
<div>
<input class="toggle-control" type="radio" name="status-tabs-{{ book.id }}" id="quote-{{ book.id }}">
{% include 'snippets/create_status_form.html' with type="quotation" placeholder="An excerpt from '"|add:book.title|add:"'" %}
<div class="toggle-content hidden tab-option-{{ book.id }}">
{% with 0|uuid as uuid %}
{% include 'snippets/create_status_form.html' with type="quotation" placeholder="An excerpt from '"|add:book.title|add:"'" %}
{% endwith %}
</div>
</div>

32
bookwyrm/templates/snippets/create_status_form.html
View file

@ -1,7 +1,8 @@
<form class="toggle-content hidden tab-option-{{ book.id }}" name="{{ type }}" action="/post/{{ type }}" method="post" id="tab-{{ type }}-{{ book.id }}">
<form class="is-flex-grow-1" name="{{ type }}" action="/post/{{ type }}" method="post" id="tab-{{ type }}-{{ book.id }}{{ reply_parent.id }}">
{% csrf_token %}
<input type="hidden" name="book" value="{{ book.id }}">
<input type="hidden" name="user" value="{{ request.user.id }}">
<input type="hidden" name="reply_parent" value="{{ reply_parent.id }}">
{% if type == 'review' %}
<div class="control">
<label class="label" for="id_name_{{ book.id }}_{{ type }}">Title:</label>
@ -9,8 +10,9 @@
</div>
{% endif %}
<div class="control">
{% if not type == 'reply' %}
<label class="label" for="id_{% if type == 'quotation' %}quote{% else %}content{% endif %}_{{ book.id }}_{{ type }}">{{ type|title }}:</label>
{% include 'snippets/content_warning_field.html' %}
{% endif %}
{% if type == 'review' %}
<fieldset>
@ -31,18 +33,34 @@
{% if type == 'quotation' %}
<textarea name="quote" class="textarea" id="id_quote_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea>
{% else %}
<textarea name="content" class="textarea" id="id_content_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea>
{% include 'snippets/content_warning_field.html' with parent_status=status %}
<textarea name="content" class="textarea" id="id_content_{{ book.id }}{{reply_parent.id}}{{ uuid }}_{{ type }}" placeholder="{{ placeholder }}" {% if type == 'reply' %} aria-label="Reply"{% endif %} required></textarea>
{% endif %}
</div>
{% if type == 'quotation' %}
<div class="control">
<label class="label" for="id_content_{{ book.id }}_quote">Comment:</label>
{% include 'snippets/content_warning_field.html' with parent_status=status %}
<textarea name="content" class="textarea is-small" id="id_content_{{ book.id }}_quote"></textarea>
</div>
{% endif %}
<div class="control is-grouped">
{% include 'snippets/privacy_select.html' %}
<button class="button is-primary" type="submit">post {{ type }}</button>
<input type="checkbox" class="hidden" name="sensitive" id="show-spoilers-{{ uuid }}" {% if status.content_warning %}checked{% endif %}>
{# bottom bar #}
<div class="columns pt-1">
<div class="field has-addons column">
<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 }}">
<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 class="control">
{% include 'snippets/privacy_select.html' %}
</div>
</div>
<div class="column is-narrow">
<button class="button is-link" type="submit">post</button>
</div>
</div>
</form>

2
bookwyrm/templates/snippets/privacy_select.html
View file

@ -12,7 +12,7 @@
Unlisted
</option>
<option value="followers" {% if current == 'followers' %}selected{% endif %}>
Followers only
Followers
</option>
<option value="direct" {% if current == 'direct' %}selected{% endif %}>
Private

4
bookwyrm/templates/snippets/status_body.html
View file

@ -57,11 +57,11 @@
{% block card-bonus %}
{% if request.user.is_authenticated %}
{% 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 }}">
<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">
<section class="toggle-content hidden">
<div class="card-footer">
<div class="card-footer-item">
{% include 'snippets/reply_form.html' with status=status %}
{% include 'snippets/create_status_form.html' with reply_parent=status type="reply" %}
</div>
</div>
</section>