From 2be27f17fef41b45b6723d1f07a626033a41bbfb Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Wed, 9 Dec 2020 11:07:08 +0100
Subject: [PATCH] Add a demo for the loading button
---
packages/common/assets/index.html | 1 +
packages/common/dbp-common-demo.js | 14 +++++++++++++-
packages/common/src/button.js | 3 ++-
3 files changed, 16 insertions(+), 2 deletions(-)
diff --git a/packages/common/assets/index.html b/packages/common/assets/index.html
index 1e833122..8f2a35f5 100644
--- 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 {
diff --git a/packages/common/dbp-common-demo.js b/packages/common/dbp-common-demo.js
index 00d8edb2..b022a31d 100644
--- 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">
diff --git a/packages/common/src/button.js b/packages/common/src/button.js
index acbbf483..2eca7ae4 100644
--- 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();
--
GitLab