Add UI for A/B testing on owned commits.
[WebKit-https.git] / Websites / perf.webkit.org / public / v3 / components / button-base.js
1
2 class ButtonBase extends ComponentBase {
3
4     constructor(name)
5     {
6         super(name);
7         this._disabled = false;
8     }
9
10     setDisabled(disabled)
11     {
12         this._disabled = disabled;
13         this.enqueueToRender();
14     }
15
16     didConstructShadowTree()
17     {
18         this.content('button').addEventListener('click', this.createEventHandler(() => {
19             this.dispatchAction('activate');
20         }));
21     }
22
23     render()
24     {
25         super.render();
26         if (this._disabled)
27             this.content('button').setAttribute('disabled', '');
28         else
29             this.content('button').removeAttribute('disabled');
30     }
31
32     static htmlTemplate()
33     {
34         return `<a id="button" href="#"><svg viewBox="0 0 100 100">${this.buttonContent()}</svg></a>`;
35     }
36
37     static buttonContent() { throw 'NotImplemented'; }
38     static sizeFactor() { return 1; }
39
40     static cssTemplate()
41     {
42         const sizeFactor = this.sizeFactor();
43         return `
44             :host {
45                 display: inline-block;
46                 width: ${sizeFactor}rem;
47                 height: ${sizeFactor}rem;
48             }
49
50             a {
51                 vertical-align: bottom;
52                 display: block;
53                 opacity: 0.3;
54             }
55
56             a:hover {
57                 opacity: 0.6;
58             }
59
60             a[disabled] {
61                 pointer-events: none;
62                 cursor: default;
63                 opacity: 0.2;
64             }
65
66             svg {
67                 display: block;
68             }
69         `;
70     }
71 }