Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: js/io-toggle.js

Issue 29730644: Issue 6514 - IOToggle Custom Element (Closed)
Patch Set: applied changes Created April 27, 2018, 1:56 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 /*
2 * This file is part of Adblock Plus <https://adblockplus.org/>,
3 * Copyright (C) 2006-present eyeo GmbH
4 *
5 * Adblock Plus is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU General Public License version 3 as
7 * published by the Free Software Foundation.
8 *
9 * Adblock Plus is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details.
13 *
14 * You should have received a copy of the GNU General Public License
15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
16 */
17
18 "use strict";
19
20 const IOElement = require("./io-element");
21 const {boolean} = IOElement.utils;
22
23 class IOToggle extends IOElement
24 {
25 // action, checked, and disabled should be reflected down the button
26 static get observedAttributes()
27 {
28 return ["action", "checked", "disabled"];
29 }
30
31 created()
32 {
33 this.addEventListener("click", this);
34 this.render();
35 }
36
37 get checked()
38 {
39 return this.hasAttribute("checked");
40 }
41
42 set checked(value)
43 {
44 boolean.attribute(this, "checked", value);
45 this.render();
46 }
47
48 get disabled()
49 {
50 return this.hasAttribute("disabled");
51 }
52
53 set disabled(value)
54 {
55 boolean.attribute(this, "disabled", value);
56 this.render();
57 }
58
59 onclick(event)
60 {
61 if (!this.disabled)
62 {
63 this.checked = !this.checked;
64 if (this.ownerDocument.activeElement !== this.child)
65 {
66 this.child.focus();
67 }
68 this.dispatchEvent(new CustomEvent("change", {
69 bubbles: true,
70 cancelable: true,
71 detail: this.checked
72 }));
73 }
74 }
75
76 render()
77 {
78 this.html`
79 <button
80 role="checkbox"
81 disabled="${this.disabled}"
82 data-action="${this.action}"
83 aria-checked="${this.checked}"
84 aria-disabled="${this.disabled}"
85 />`;
86 }
87 }
88
89 IOToggle.define("io-toggle");
OLDNEW

Powered by Google App Engine
This is Rietveld