From afdf5fc8ecd7ed83b6792cddeeca4d8dd8184e37 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Sun, 17 Jan 2021 08:26:28 -0800 Subject: [PATCH] starts replacing pure css buttons with javascript buttons RIP, but it was time --- bookwyrm/static/css/format.css | 5 +- bookwyrm/static/js/shared.js | 32 ++++-- bookwyrm/templates/book.html | 60 ++++-------- bookwyrm/templates/goal.html | 32 +++--- bookwyrm/templates/search_results.html | 12 +-- bookwyrm/templates/shelf.html | 98 ++++++++----------- .../snippets/finish_reading_modal.html | 82 ++++++++-------- bookwyrm/templates/snippets/goal_form.html | 2 +- .../templates/snippets/shelve_button.html | 4 +- .../snippets/start_reading_modal.html | 65 ++++++------ .../snippets/toggle/toggle_button.html | 12 ++- 11 files changed, 191 insertions(+), 213 deletions(-) diff --git a/bookwyrm/static/css/format.css b/bookwyrm/static/css/format.css index 870152d57..f08f6739a 100644 --- a/bookwyrm/static/css/format.css +++ b/bookwyrm/static/css/format.css @@ -14,10 +14,13 @@ } /* --- TOGGLES --- */ -[aria-pressed=true] { +.toggle-button[aria-pressed=true], .toggle-button[aria-pressed=true]:hover { background-color: hsl(171, 100%, 41%); color: white; } +.hide-active[aria-pressed=true] { + display: none; +} input.toggle-control { display: none; diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js index aa58274e1..dd4fc3322 100644 --- a/bookwyrm/static/js/shared.js +++ b/bookwyrm/static/js/shared.js @@ -52,33 +52,51 @@ function setDisplay(el) { function toggleAction(e) { 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) { var target = document.getElementById(targetId); if (pressed) { - target.className = target.className.replace('hidden', ''); + removeClass(target, 'hidden'); + addClass(target, 'is-active'); } else { - target.className += ' hidden'; + addClass(target, 'hidden'); + removeClass(target, 'is-active'); } - } // set hover, if appropriate - var hover = e.currentTarget.getAttribute('data-hover-target'); + var hover = el.getAttribute('data-hover-target'); if (hover) { document.getElementById(hover).focus(); } // set checkbox, if appropriate - var checkbox = e.currentTarget.getAttribute('data-controls-checkbox'); + var checkbox = el.getAttribute('data-controls-checkbox'); if (checkbox) { 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) { e.preventDefault(); ajaxPost(e.target); diff --git a/bookwyrm/templates/book.html b/bookwyrm/templates/book.html index 4e65ecf84..a73569545 100644 --- a/bookwyrm/templates/book.html +++ b/bookwyrm/templates/book.html @@ -94,30 +94,20 @@ {% 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 %} -
- - -
+ {% 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" %} -
- - {% endif %}
-
- - -
-
- - + {% include 'snippets/toggle/open_button.html' with text="Add read dates" controls_text="add-readthrough" %} +
diff --git a/bookwyrm/templates/goal.html b/bookwyrm/templates/goal.html index 4f477a216..056a7e44e 100644 --- a/bookwyrm/templates/goal.html +++ b/bookwyrm/templates/goal.html @@ -6,29 +6,21 @@ {% if user == request.user %}
{% if goal %} - - + {% include 'snippets/toggle/open_button.html' with text="Edit goal" controls_text="show-edit-goal" hover="edit-form-header" %} {% endif %} -
-
- -
- {% now 'Y' as year %} -
-
-

- {{ year }} reading goal -

-
-
-

Set a goal for how many books you'll finish reading in {{ year }}, and track your progress throughout the year.

+ {% now 'Y' as year %} +
+
+

+ {{ year }} reading goal +

+
+
+

Set a goal for how many books you'll finish reading in {{ year }}, and track your progress throughout the year.

- {% include 'snippets/goal_form.html' with goal=goal year=year %} -
+ {% include 'snippets/goal_form.html' with goal=goal year=year %}
-
+
{% endif %} diff --git a/bookwyrm/templates/search_results.html b/bookwyrm/templates/search_results.html index 10263f2ef..a35504a17 100644 --- a/bookwyrm/templates/search_results.html +++ b/bookwyrm/templates/search_results.html @@ -27,16 +27,11 @@

Didn't find what you were looking for?

- - - + {% include 'snippets/toggle/open_button.html' with text="Show results from other catalogues" small=True controls_text="more-results" %}
{% endif %} - - diff --git a/bookwyrm/templates/shelf.html b/bookwyrm/templates/shelf.html index ae25998ad..30554a5f6 100644 --- a/bookwyrm/templates/shelf.html +++ b/bookwyrm/templates/shelf.html @@ -31,38 +31,30 @@ {% if is_self %}
- - + {% include 'snippets/toggle/open_button.html' with text="Create shelf" icon="plus" class="is-clickable" controls_text="create-shelf-form" %}
{% endif %}
-
- - - - diff --git a/bookwyrm/templates/snippets/toggle/toggle_button.html b/bookwyrm/templates/snippets/toggle/toggle_button.html index 1b36b56b3..f6aba283e 100644 --- a/bookwyrm/templates/snippets/toggle/toggle_button.html +++ b/bookwyrm/templates/snippets/toggle/toggle_button.html @@ -1,4 +1,12 @@ -