Add a demo for the loading button

2be27f17 · Reiter, Christoph · e61655b5 · 2be27f17 · 2be27f17 · 2be27f17
Commit 2be27f17 authored 4 years ago by Reiter, Christoph
--- a/packages/common/assets/index.html
+++ b/packages/common/assets/index.html
@@ -2,6 +2,7 @@
 <html>
 <head>
    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="module" src="demo.js"></script>
    <style>
    body {

--- a/packages/common/dbp-common-demo.js
+++ b/packages/common/dbp-common-demo.js
@@ -3,7 +3,7 @@ import {css, html, LitElement} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import * as commonUtils from './utils.js';
 import * as commonStyles from './styles.js';
-import {getIconCSS, Icon, MiniSpinner, Button, Spinner, InlineNotification} from './index.js';
+import {getIconCSS, Icon, MiniSpinner, Button, LoadingButton, Spinner, InlineNotification} from './index.js';

 export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
    constructor() {
@@ -18,6 +18,7 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
            'dbp-mini-spinner': MiniSpinner,
            'dbp-spinner': Spinner,
            'dbp-button': Button,
+            'dbp-loading-button': LoadingButton,
            'dbp-auth': customElements.get('dbp-auth'),
            'dbp-inline-notification': InlineNotification,
        };
@@ -93,6 +94,14 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
        }, 1000);
    }

+    loadingButtonClickHandler(e) {
+        let button = e.target;
+        button.start();
+        setTimeout(() => {
+            button.stop();
+        }, 1000);
+    }
+
    render() {
        return html`
            <style>
@@ -137,6 +146,9 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
                    <h2>Button</h2>
                    <div class="control">
                        <dbp-button value="Load" @click="${this.buttonClickHandler}" type="is-primary"></dbp-button>
+
+                        <dbp-loading-button @click="${this.loadingButtonClickHandler}" type="is-primary">Loading Button</dbp-loading-button>
+                        <dbp-loading-button @click="${this.loadingButtonClickHandler}" type="is-primary" disabled>Loading Button Disabled</dbp-loading-button>
                    </div>
                </div>
                <div class="content">

--- a/packages/common/src/button.js
+++ b/packages/common/src/button.js
@@ -88,7 +88,8 @@ export class LoadingButton extends ScopedElementsMixin(LitElement) {
        this.type = "";
        this.loading = false;
        this.disabled = false;
-        
+
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=1061240#c12
        this.addEventListener('click', (e) => {
            if (this.disabled) {
              e.stopImmediatePropagation();