mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-12-23 00:26:33 +00:00
Code Issues Projects Releases Wiki Activity

starts replacing pure css buttons with javascript buttons

Browse source 
RIP, but it was time
This commit is contained in:
Mouse Reeve 2021-01-17 08:26:28 -08:00
parent 2e043f9252
commit afdf5fc8ec
11 changed files with 191 additions and 213 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -52,33 +52,51 @@ function setDisplay(el) {
function toggleAction(e) { function toggleAction(e) {
var pressed = e.currentTarget.getAttribute('aria-pressed') == 'false'; var pressed = e.currentTarget.getAttribute('aria-pressed') == 'false';
e.currentTarget.setAttribute('aria-pressed', pressed); var el = e.currentTarget;
var targetId = el.getAttribute('data-controls');
document.querySelectorAll('[data-controls="' + targetId + '"]')
.forEach(t => t.setAttribute('aria-pressed', !!(t.getAttribute('aria-pressed') == 'false')));
var targetId = e.currentTarget.getAttribute('data-controls');
if (targetId) { if (targetId) {
var target = document.getElementById(targetId); var target = document.getElementById(targetId);
if (pressed) { if (pressed) {
target.className = target.className.replace('hidden', ''); removeClass(target, 'hidden');
addClass(target, 'is-active');
} else { } else {
target.className += ' hidden'; addClass(target, 'hidden');
removeClass(target, 'is-active');
} }
} }
// set hover, if appropriate // set hover, if appropriate
var hover = e.currentTarget.getAttribute('data-hover-target'); var hover = el.getAttribute('data-hover-target');
if (hover) { if (hover) {
document.getElementById(hover).focus(); document.getElementById(hover).focus();
} }
// set checkbox, if appropriate // set checkbox, if appropriate
var checkbox = e.currentTarget.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;
} }
} }
function addClass(el, classname) {
el.className = el.className.split(' ').concat(classname).join(' ');
}
function removeClass(el, className) {
var classes = el.className.split(' ');
const idx = classes.indexOf(className);
if (idx > -1) {
classes.splice(idx, 1);
}
el.className = classes.join(' ');
}
function interact(e) { function interact(e) {
e.preventDefault(); e.preventDefault();
ajaxPost(e.target); ajaxPost(e.target);

30
bookwyrm/templates/book.html
View file

@ -94,17 +94,9 @@
{% 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 %}
<div> {% 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" %}
<input class="toggle-control" type="radio" name="add-description" id="hide-description-{{ book.id }}" checked>
<div class="toggle-content hidden">
{% include 'snippets/toggle/toggle_button.html' with text="Add description" controls_text="add-description" controls_uid=book.id %}
</div>
</div>
<div> <div class="box hidden" id="add-description-{{ book.id }}">
<input class="toggle-control" type="radio" name="add-description" id="add-description-{{ book.id }}" data-hover-target="id_description">
<div class="toggle-content hidden">
<div class="box">
<form name="add-description" method="POST" action="/add-description/{{ book.id }}"> <form name="add-description" method="POST" action="/add-description/{{ book.id }}">
{% csrf_token %} {% csrf_token %}
<p class="fields is-grouped"> <p class="fields is-grouped">
@ -113,12 +105,10 @@
</p> </p>
<div class="field"> <div class="field">
<button class="button is-primary" type="submit">Save</button> <button class="button is-primary" type="submit">Save</button>
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="hide-description" controls_uid=book.id %} {% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="add-description" controls_uid=book.id hide_inactive=True %}
</div> </div>
</form> </form>
</div> </div>
</div>
</div>
{% endif %} {% endif %}
@ -152,25 +142,17 @@
</div> </div>
{% endif %} {% endif %}
<div class="block"> <div class="block">
<div> {% include 'snippets/toggle/open_button.html' with text="Add read dates" controls_text="add-readthrough" %}
<input type="radio" class="toggle-control" name="add-readthrough-form" id="hide-create-readthrough" checked> <div class="toggle-content hidden box" id="add-readthrough">
<div class="toggle-content hidden">
{% include 'snippets/toggle/toggle_button.html' with text="Add read dates" controls_text="add-readthrough" %}
</div>
</div>
<div>
<input type="radio" class="toggle-control" id="add-readthrough" name="add-readthrough-form">
<div class="toggle-content hidden box">
<form name="add-readthrough" action="/create-readthrough" method="post"> <form name="add-readthrough" action="/create-readthrough" method="post">
{% include 'snippets/readthrough_form.html' with readthrough=None %} {% include 'snippets/readthrough_form.html' with readthrough=None %}
<div class="field is-grouped"> <div class="field is-grouped">
<button class="button is-primary" type="submit">Create</button> <button class="button is-primary" type="submit">Create</button>
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="hide-create-readthrough" %} {% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="add-readthrough" %}
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div>
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<div class="box"> <div class="box">

12
bookwyrm/templates/goal.html
View file

@ -6,17 +6,10 @@
{% if user == request.user %} {% if user == request.user %}
<div class="block"> <div class="block">
{% if goal %} {% if goal %}
<input type="radio" class="toggle-control" name="edit-goal" id="hide-edit-goal" checked> {% include 'snippets/toggle/open_button.html' with text="Edit goal" controls_text="show-edit-goal" hover="edit-form-header" %}
<div class="toggle-content hidden">
{% include 'snippets/toggle/toggle_button.html' with text="Edit goal" controls_text="show-edit-goal" %}
</div>
{% endif %} {% endif %}
</div>
<div class="block">
<input type="radio" class="toggle-control" name="edit-goal" id="show-edit-goal" data-hover-target="edit-form-header">
<div class="toggle-content{% if goal %} hidden{% endif %}">
{% now 'Y' as year %} {% now 'Y' as year %}
<section class="card"> <section class="card {% if goal %}hidden{% endif %}" id="show-edit-goal">
<header class="card-header"> <header class="card-header">
<h2 class="card-header-title has-background-primary has-text-white" tabindex="0" id="edit-form-header"> <h2 class="card-header-title has-background-primary has-text-white" tabindex="0" id="edit-form-header">
<span class="icon icon-book is-size-3 mr-2" aria-hidden="true"></span> {{ year }} reading goal <span class="icon icon-book is-size-3 mr-2" aria-hidden="true"></span> {{ year }} reading goal
@ -29,7 +22,6 @@
</section> </section>
</section> </section>
</div> </div>
</div>
{% endif %} {% endif %}
{% if not goal and user != request.user %} {% if not goal and user != request.user %}

12
bookwyrm/templates/search_results.html
View file

@ -27,16 +27,11 @@
<p> <p>
Didn't find what you were looking for? Didn't find what you were looking for?
</p> </p>
{% include 'snippets/toggle/open_button.html' with text="Show results from other catalogues" small=True controls_text="more-results" %}
<input class="toggle-control" type="radio" name="more-results" id="fewer-results" checked>
<div class="toggle-content hidden">
{% include 'snippets/toggle/toggle_button.html' with text="Show results from other catalogues" small=True controls_text="more-results" %}
</div>
</div> </div>
{% endif %} {% endif %}
<input class="toggle-control" type="radio" name="more-results" id="more-results" {% if not local_results.results %}checked{% endif %}> <div class="{% if local_results.results %}hidden{% endif %}" id="more-results">
<div class="toggle-content hidden">
{% for result_set in book_results|slice:"1:" %} {% for result_set in book_results|slice:"1:" %}
{% if result_set.results %} {% if result_set.results %}
<section class="block"> <section class="block">
@ -61,8 +56,9 @@
</section> </section>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% if local_results.results %} {% if local_results.results %}
{% include 'snippets/toggle/toggle_button.html' with text="Hide results from other catalogues" small=True controls_text="fewer-results" %} {% include 'snippets/toggle/close_button.html' with text="Hide results from other catalogues" small=True controls_text="more-results" %}
{% endif %} {% endif %}
</div> </div>
</div> </div>

26
bookwyrm/templates/shelf.html
View file

@ -31,18 +31,12 @@
{% if is_self %} {% if is_self %}
<div class="column is-narrow"> <div class="column is-narrow">
<input type="radio" id="create-shelf-form-hide" name="create-shelf-form" class="toggle-control" checked> {% include 'snippets/toggle/open_button.html' with text="Create shelf" icon="plus" class="is-clickable" controls_text="create-shelf-form" %}
<div class="toggle-content hidden">
{% include 'snippets/toggle/toggle_button.html' with text="Create shelf" icon="plus" class="is-clickable" controls_text="create-shelf-form-show" %}
</div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
<div> <div class="hidden box mb-5" id="create-shelf-form">
<input type="radio" id="create-shelf-form-show" name="create-shelf-form" class="toggle-control">
<div class="toggle-content hidden">
<div class="box mb-5">
<h2 class="title is-4">Create new shelf</h2> <h2 class="title is-4">Create new shelf</h2>
<form name="create-shelf" action="/create-shelf/" method="post"> <form name="create-shelf" action="/create-shelf/" method="post">
{% csrf_token %} {% csrf_token %}
@ -58,12 +52,10 @@
</label> </label>
<div class="field is-grouped"> <div class="field is-grouped">
<button class="button is-primary" type="submit">Create shelf</button> <button class="button is-primary" type="submit">Create shelf</button>
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="create-shelf-form-hide" %} {% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="create-shelf-form" %}
</div> </div>
</form> </form>
</div> </div>
</div>
</div>
<div class="block columns"> <div class="block columns">
<div class="column"> <div class="column">
@ -76,17 +68,12 @@
</div> </div>
{% if is_self %} {% if is_self %}
<div class="column is-narrow"> <div class="column is-narrow">
<input type="radio" id="edit-shelf-form-hide" name="edit-shelf-form" class="toggle-control" checked> {% include 'snippets/toggle/open_button.html' with text="Edit shelf" icon="pencil" class="is-clickable" controls_text="edit-shelf-form" %}
<div class="toggle-content hidden">
{% include 'snippets/toggle/toggle_button.html' with text="Edit shelf" icon="pencil" class="is-clickable" controls_text="edit-shelf-form-show" %}
</div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
<input type="radio" id="edit-shelf-form-show" name="edit-shelf-form" class="toggle-control"> <div class="hidden box mb-5" id="edit-shelf-form">
<div class="toggle-content hidden">
<div class="box mb-5">
<h2 class="title is-4">Edit shelf</h2> <h2 class="title is-4">Edit shelf</h2>
<form name="create-shelf" action="/edit-shelf/{{ shelf.id }}" method="post"> <form name="create-shelf" action="/edit-shelf/{{ shelf.id }}" method="post">
{% csrf_token %} {% csrf_token %}
@ -106,11 +93,10 @@
</label> </label>
<div class="field is-grouped"> <div class="field is-grouped">
<button class="button is-primary" type="submit">Update shelf</button> <button class="button is-primary" type="submit">Update shelf</button>
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="edit-shelf-form-hide" %} {% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="edit-shelf-form" %}
</div> </div>
</form> </form>
</div> </div>
</div>
<div class="block"> <div class="block">
<div> <div>

10
bookwyrm/templates/snippets/finish_reading_modal.html
View file

@ -1,12 +1,10 @@
{% load bookwyrm_tags %} {% load bookwyrm_tags %}
<div> <div class="modal toggle-content hidden" id="finish-reading-{{ uuid }}">
<input class="toggle-control" type="checkbox" name="finish-reading-{{ uuid }}" id="finish-reading-{{ uuid }}">
<div class="modal toggle-content hidden">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head">
<p class="modal-card-title">Finish "{{ book.title }}"</p> <p class="modal-card-title">Finish "{{ book.title }}"</p>
{% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="finish-reading" controls_uid=uuid class="delete" %} {% include 'snippets/toggle/close_button.html' with label="close" controls_text="finish-reading" controls_uid=uuid class="delete" %}
</header> </header>
{% active_read_through book user as readthrough %} {% active_read_through book user as readthrough %}
<form name="finish-reading" action="/finish-reading/{{ book.id }}" method="post"> <form name="finish-reading" action="/finish-reading/{{ book.id }}" method="post">
@ -37,7 +35,7 @@
</div> </div>
<div class="column"> <div class="column">
<button type="submit" class="button is-success">Save</button> <button type="submit" class="button is-success">Save</button>
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="finish-reading" controls_uid=uuid %} {% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="finish-reading" controls_uid=uuid %}
</div> </div>
</div> </div>
</footer> </footer>
@ -45,5 +43,3 @@
</div> </div>
<label class="modal-close is-large" for="finish-reading-{{ uuid }}" aria-label="close" role="button"></label> <label class="modal-close is-large" for="finish-reading-{{ uuid }}" aria-label="close" role="button"></label>
</div> </div>
</div>

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

@ -28,7 +28,7 @@
<p> <p>
<button type="submit" class="button is-link">Set goal</button> <button type="submit" class="button is-link">Set goal</button>
{% if goal %} {% if goal %}
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="hide-edit-goal" %} {% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="show-edit-goal" %}
{% endif %} {% endif %}
</p> </p>
</form> </form>

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

@ -13,9 +13,9 @@
<span>Read</span> <span class="icon icon-check"></span> <span>Read</span> <span class="icon icon-check"></span>
</button> </button>
{% elif active_shelf.shelf.identifier == 'reading' %} {% elif active_shelf.shelf.identifier == 'reading' %}
{% include 'snippets/toggle/toggle_button.html' with small=True text="I'm done!" controls_text="finish-reading" controls_uid=uuid %} {% include 'snippets/toggle/toggle_button.html' with class="is-small" text="I'm done!" controls_text="finish-reading" controls_uid=uuid %}
{% elif active_shelf.shelf.identifier == 'to-read' %} {% elif active_shelf.shelf.identifier == 'to-read' %}
{% include 'snippets/toggle/toggle_button.html' with small=True text="Start reading" controls_text="start-reading" controls_uid=uuid %} {% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Start reading" controls_text="start-reading" controls_uid=uuid %}
{% else %} {% else %}
<form name="shelve" action="/shelve/" method="post"> <form name="shelve" action="/shelve/" method="post">
{% csrf_token %} {% csrf_token %}

5
bookwyrm/templates/snippets/start_reading_modal.html
View file

@ -1,6 +1,4 @@
<div> <div class="modal hidden" id="start-reading-{{ uuid }}">
<input class="toggle-control" type="checkbox" name="start-reading-{{ uuid }}" id="start-reading-{{ uuid }}">
<div class="modal toggle-content hidden">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head">
@ -36,4 +34,3 @@
</div> </div>
<label class="modal-close is-large" for="start-reading-{{ uuid }}" aria-label="close"></label> <label class="modal-close is-large" for="start-reading-{{ uuid }}" aria-label="close"></label>
</div> </div>
</div>

12
bookwyrm/templates/snippets/toggle/toggle_button.html
View file

@ -1,4 +1,12 @@
<label class="{% if class %}{{ class }}{% else %}button{% endif %}{% if small %} is-small{% endif %}" for="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}" tabindex="0" role="button"{% if label %} aria-label="{{ label }}"{% endif %}> <button
type="button"
class="toggle-control button {{ class }} {% if button_type %}{{ button_type }}{% else %}toggle-button{% endif %}"
data-controls="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"
{% if hover %}data-hover-target="{{ hover }}"{% endif %}
{% if label %}aria-label="label"{% endif %}
aria-pressed="false"
>
{% if icon %} {% if icon %}
<span class="icon icon-{{ icon }}" title="{{ text }}"> <span class="icon icon-{{ icon }}" title="{{ text }}">
<span class="is-sr-only">{{ text }}</span> <span class="is-sr-only">{{ text }}</span>
@ -6,4 +14,4 @@
{% else %} {% else %}
{{ text }} {{ text }}
{% endif %} {% endif %}
</label> </button>