Merge branch 'portazips' into development

resources/js/components/index.ts

@@ -30,6 +30,7 @@ export {HeaderMobileToggle} from './header-mobile-toggle';
 export {ImageManager} from './image-manager';
 export {ImagePicker} from './image-picker';
 export {ListSortControl} from './list-sort-control';
+export {LoadingButton} from './loading-button.ts';
 export {MarkdownEditor} from './markdown-editor';
 export {NewUserPassword} from './new-user-password';
 export {Notification} from './notification';

resources/js/components/loading-button.ts

@@ -0,0 +1,38 @@
+import {Component} from "./component.js";
+import {showLoading} from "../services/dom";
+import {el} from "../wysiwyg/utils/dom";
+
+/**
+ * Loading button.
+ * Shows a loading indicator and disables the button when the button is clicked,
+ * or when the form attached to the button is submitted.
+ */
+export class LoadingButton extends Component {
+
+    protected button!: HTMLButtonElement;
+    protected loadingEl: HTMLDivElement|null = null;
+
+    setup() {
+        this.button = this.$el as HTMLButtonElement;
+        const form = this.button.form;
+
+        const action = () => {
+            setTimeout(() => this.showLoadingState(), 10)
+        };
+
+        this.button.addEventListener('click', action);
+        if (form) {
+            form.addEventListener('submit', action);
+        }
+    }
+
+    showLoadingState() {
+        this.button.disabled = true;
+
+        if (!this.loadingEl) {
+            this.loadingEl = el('div', {class: 'inline block'}) as HTMLDivElement;
+            showLoading(this.loadingEl);
+            this.button.after(this.loadingEl);
+        }
+    }
+}

resources/js/components/page-comments.js

@@ -93,7 +93,6 @@ export class PageComments extends Component {
 
     updateCount() {
         const count = this.getCommentCount();
-        console.log('update count', count, this.container);
         this.commentsTitle.textContent = window.$trans.choice(this.countText, count, {count});
     }