Merge branch 'main' into opengraph-image-generation

bookwyrm/static/js/bookwyrm.js

@@ -3,6 +3,7 @@
 
 let BookWyrm = new class {
     constructor() {
+        this.MAX_FILE_SIZE_BYTES = 10 * 1000000;
         this.initOnDOMLoaded();
         this.initReccuringTasks();
         this.initEventListeners();
@@ -32,15 +33,26 @@ let BookWyrm = new class {
                 'click',
                 this.back)
             );
+
+        document.querySelectorAll('input[type="file"]')
+            .forEach(node => node.addEventListener(
+                'change',
+                this.disableIfTooLarge.bind(this)
+            ));
     }
 
     /**
      * Execute code once the DOM is loaded.
      */
     initOnDOMLoaded() {
+        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)
+            );
         });
     }
 
@@ -126,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;
@@ -170,6 +183,8 @@ let BookWyrm = new class {
         if (focus) {
             this.toggleFocus(focus);
         }
+
+        return false;
     }
 
     /**
@@ -284,4 +299,27 @@ let BookWyrm = new class {
             node.classList.remove(classname);
         }
     }
-}
+
+    disableIfTooLarge(eventOrElement) {
+        const { addRemoveClass, MAX_FILE_SIZE_BYTES } = this;
+        const element = eventOrElement.currentTarget || eventOrElement;
+
+        const submits = element.form.querySelectorAll('[type="submit"]');
+        const warns = element.parentElement.querySelectorAll('.file-too-big');
+        const isTooBig = element.files &&
+            element.files[0] &&
+            element.files[0].size > MAX_FILE_SIZE_BYTES;
+
+        if (isTooBig) {
+            submits.forEach(submitter => submitter.disabled = true);
+            warns.forEach(
+                sib => addRemoveClass(sib, 'is-hidden', false)
+            );
+        } else {
+            submits.forEach(submitter => submitter.disabled = false);
+            warns.forEach(
+                sib => addRemoveClass(sib, 'is-hidden', true)
+            );
+        }
+    }
+}();

bookwyrm/static/js/localstorage.js

@@ -17,7 +17,7 @@ let LocalStorageTools = new class {
      * @return {undefined}
      */
     updateDisplay(event) {
-        // used in set reading goal
+        // Used in set reading goal
         let key = event.target.dataset.id;
         let value = event.target.dataset.value;
 
@@ -34,10 +34,10 @@ let LocalStorageTools = new class {
      * @return {undefined}
      */
     setDisplay(node) {
-        // used in set reading goal
+        // Used in set reading goal
         let key = node.dataset.hide;
         let value = window.localStorage.getItem(key);
 
         BookWyrm.addRemoveClass(node, 'is-hidden', value);
     }
-}
+}();