No script fallback mode

bookwyrm/static/js/bookwyrm.js

@@ -3,7 +3,7 @@
 
 let BookWyrm = new class {
     constructor() {
-        this.MAX_FILE_SIZE_BYTES = 10 * 1000000
+        this.MAX_FILE_SIZE_BYTES = 10 * 1000000;
         this.initOnDOMLoaded();
         this.initReccuringTasks();
         this.initEventListeners();
@@ -45,14 +45,14 @@ let BookWyrm = new class {
      * Execute code once the DOM is loaded.
      */
     initOnDOMLoaded() {
-        const bookwyrm = this
+        const bookwyrm = this;
 
         window.addEventListener('DOMContentLoaded', function() {
             document.querySelectorAll('.tab-group')
                 .forEach(tabs => new TabGroup(tabs));
             document.querySelectorAll('input[type="file"]').forEach(
                 bookwyrm.disableIfTooLarge.bind(bookwyrm)
-            )
+            );
         });
     }
 
@@ -138,6 +138,7 @@ let BookWyrm = new class {
      * @return {undefined}
      */
     toggleAction(event) {
+        event.preventDefault();
         let trigger = event.currentTarget;
         let pressed = trigger.getAttribute('aria-pressed') === 'false';
         let targetId = trigger.dataset.controls;
@@ -182,6 +183,7 @@ let BookWyrm = new class {
         if (focus) {
             this.toggleFocus(focus);
         }
+        return false;
     }
 
     /**
@@ -298,25 +300,25 @@ let BookWyrm = new class {
     }
 
     disableIfTooLarge(eventOrElement) {
-        const { addRemoveClass, MAX_FILE_SIZE_BYTES } = this
+        const { addRemoveClass, MAX_FILE_SIZE_BYTES } = this;
-        const element = eventOrElement.currentTarget || eventOrElement
+        const element = eventOrElement.currentTarget || eventOrElement;
 
-        const submits = element.form.querySelectorAll('[type="submit"]')
+        const submits = element.form.querySelectorAll('[type="submit"]');
-        const warns = element.parentElement.querySelectorAll('.file-too-big')
+        const warns = element.parentElement.querySelectorAll('.file-too-big');
         const isTooBig = element.files &&
             element.files[0] &&
-            element.files[0].size > MAX_FILE_SIZE_BYTES
+            element.files[0].size > MAX_FILE_SIZE_BYTES;
 
         if (isTooBig) {
-            submits.forEach(submitter => submitter.disabled = true)
+            submits.forEach(submitter => submitter.disabled = true);
             warns.forEach(
                 sib => addRemoveClass(sib, 'is-hidden', false)
-            )
+            );
         } else {
-            submits.forEach(submitter => submitter.disabled = false)
+            submits.forEach(submitter => submitter.disabled = false);
             warns.forEach(
                 sib => addRemoveClass(sib, 'is-hidden', true)
-            )
+            );
         }
     }
-}
+}();

bookwyrm/templates/snippets/shelve_button/shelve_button_options.html

@@ -7,16 +7,25 @@
 {% if dropdown %}<li role="menuitem" class="dropdown-item p-0">{% endif %}
     <div class="{% if not dropdown and active_shelf.shelf.identifier|next_shelf != shelf.identifier %}is-hidden{% endif %}">
     {% if shelf.identifier == 'reading' %}{% if not dropdown or active_shelf.shelf.identifier|next_shelf != shelf.identifier %}
+
         {% trans "Start reading" as button_text %}
-        {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="start-reading" controls_uid=button_uuid focus="modal-title-start-reading" disabled=is_current %}
+        {% url 'start-reading' book.id as fallback_url %}
+        {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="start-reading" controls_uid=button_uuid focus="modal-title-start-reading" disabled=is_current fallback_url=fallback_url %}
+
     {% endif %}{% elif shelf.identifier == 'read' and active_shelf.shelf.identifier == 'read' %}{% if not dropdown or active_shelf.shelf.identifier|next_shelf != shelf.identifier %}
     <button type="button" class="button {{ class }}" disabled><span>{% trans "Read" %}</span>
     {% endif %}{% elif shelf.identifier == 'read' %}{% if not dropdown or active_shelf.shelf.identifier|next_shelf != shelf.identifier %}
+
         {% trans "Finish reading" as button_text %}
-        {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="finish-reading" controls_uid=button_uuid focus="modal-title-finish-reading" disabled=is_current %}
+        {% url 'finish-reading' book.id as fallback_url %}
+        {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="finish-reading" controls_uid=button_uuid focus="modal-title-finish-reading" disabled=is_current fallback_url=fallback_url %}
+
     {% endif %}{% elif shelf.identifier == 'to-read' %}{% if not dropdown or active_shelf.shelf.identifier|next_shelf != shelf.identifier %}
+
         {% trans "Want to read" as button_text %}
-        {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="want-to-read" controls_uid=button_uuid focus="modal-title-want-to-read" disabled=is_current %}
+        {% url 'to-read' book.id as fallback_url %}
+        {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="want-to-read" controls_uid=button_uuid focus="modal-title-want-to-read" disabled=is_current fallback_url=fallback_url %}
+
     {% endif %}{% elif shelf.editable %}
         <form name="shelve" action="/shelve/" method="post">
             {% csrf_token %}
@@ -44,7 +53,9 @@
         {% csrf_token %}
         <input type="hidden" name="book" value="{{ active_shelf.book.id }}">
         <input type="hidden" name="shelf" value="{{ active_shelf.shelf.id }}">
-        <button class="button is-fullwidth is-small{% if dropdown %} is-radiusless{% endif %} is-danger is-light" type="submit">{% blocktrans with name=active_shelf.shelf.name %}Remove from {{ name }}{% endblocktrans %}</button>
+        <button class="button is-fullwidth is-small{% if dropdown %} is-radiusless{% endif %} is-danger is-light" type="submit">
+            {% blocktrans with name=active_shelf.shelf.name %}Remove from {{ name }}{% endblocktrans %}
+        </button>
     </form>
 </li>
 {% endif %}

bookwyrm/templates/snippets/toggle/toggle_button.html

@@ -1,5 +1,12 @@
+{% if fallback_url %}
+<form name="fallback-form-{{ controls_uuid}}" method="GET" action="{{ fallback_url }}">
+{% endif %}
 <button
+    {% if not fallback_url %}
         type="button"
+    {% else %}
+        type="submit"
+    {% endif %}
     class="{% if not nonbutton %}button {% endif %}{{ class }}{% if button_type %} {{ button_type }}{% endif %}"
     data-controls="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"
     {% if focus %}data-focus-target="{{ focus }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"{% endif %}
@@ -20,3 +27,6 @@
     <span>{{ text }}</span>
     {% endif %}
 </button>
+{% if fallback_url %}
+</form>
+{% endif %}