dile-button/dile-button.js at master · Polydile/dile-button · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import { LitElement, html, css } from 'lit-element';

/**
 * # `dile-button`
 *
 *  Web Component to implement a simple animated button, based on LitElement
 *
 * `<dile-button>`
 *
 * This components accepts a "role" property to styling. Accepted values are: undefined, primary, danger, warning, success
 *
 * Implements a boolean property called "disabled" to disable the button.
 *
 * Clicks on the button produces a CSS animation, but only when the button disabled property is false.
 *
 * ```html
 * <dile-button
 *   role="primary"
 *   disabled
 * ></dile-timestamp-to-date>
 * ```

 * Custom property | Description | Default
 * ----------------|-------------|---------
 * --dile-button-padding | Padding applied to the buttton box | 10px
 * --dile-button-border-width | Border applied to the button box | 0
 * --dile-button-boder-color | Border color applied to the button box | transparent
 *
 * @customElement
 * @polymer
 * @demo demo/index.html
 */

class DileButton extends LitElement {

  static get styles() {
    return css`
      * {
        box-sizing: border-box;
      }
      :host {
        display: inline-block;
        user-select: none;
      }
      .undefined {
        background-color: #868e96;
      }
      .primary {
        background-color: #007bff;
      }
      .danger {
        background-color: #dc3545;
      }
      .success {
        background-color: #28a745;
      }
      .warning {
        background-color: #ffc107;
      }
      div {
        display: inline-block;
        color: #fff;
        background-color: #888;
        border-radius: 5px;
        border: var(--dile-button-border-width) solid var(--dile-button-border-color);
        padding: var(--dile-button-padding, 10px);
        cursor:pointer;
        outline:none;
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
      div:active{
        -webkit-animation-name: anim;
        animation-name: anim;
      }
      @keyframes anim {
        0% {transform: scale(1);}
        10%, 30% {transform: scale(0.9) rotate(-2deg);}
        100% {transform: scale(1) rotate(0);}
      }
      div.disabled {
        opacity: 0.5;
      }
      .disabled:active {
        -webkit-animation-name: none;
        animation-name: none;
      }
    `;
  }
  render() {
    return html`
      <div @click="${this._onClick}" class="${this._getClass(this.role, this.disabled)}">
        <slot></slot>
      </div>
    `;
  }

  static get properties() {
    return {
      /**
      * The role of the button. This property configures the button color
      * Values accepted: 'undefined', 'primary', 'danger', 'warning', 'success'.
      * Default: 'undefined'.
      * @type {String}
      */
      role: { type: String },

      /**
      * Disabled property disables the button (disabled buttons stops click propagation events).
      * @type {Boolean}
      */
      disabled: { type: Boolean }
    };
  }

  constructor() {
    super();
    this.role = 'undefined';
  }

  _getClass(role, disabled) {
    return role + (disabled ? ' disabled' : '');
  }

  _onClick(e) {
    if(this.disabled) {
      e.stopPropagation();
    }
  }
}
customElements.define('dile-button', DileButton);