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

Delta Between Two Patch Sets: js/io-toggle.js

Issue 29730644: Issue 6514 - IOToggle Custom Element (Closed)
Left Patch Set: Created March 22, 2018, 6:18 p.m.
Right Patch Set: applied latest required changes Created May 2, 2018, 12:13 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « js/io-element.js ('k') | package.json » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 /* globals module, require */ 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 */
2 17
3 "use strict"; 18 "use strict";
4 19
5 const IOElement = require("./io-element"); 20 const IOElement = require("./io-element");
21 const {boolean} = IOElement.utils;
6 22
7 class IOToggle extends IOElement 23 class IOToggle extends IOElement
8 { 24 {
9 // action, checked, and disabled should be reflected down the button 25 // action, checked, and disabled should be reflected down the button
10 static get observedAttributes() 26 static get observedAttributes()
11 { 27 {
12 return ["action", "checked", "disabled"]; 28 return ["action", "checked", "disabled"];
13 } 29 }
14 30
15 created() 31 created()
16 { 32 {
17 this.addEventListener("click", this); 33 this.addEventListener("click", this);
18 this.render(); 34 this.render();
19 } 35 }
20 36
21 get checked() 37 get checked()
22 { 38 {
23 return this.hasAttribute("checked"); 39 return this.hasAttribute("checked");
24 } 40 }
25 41
26 set checked(value) 42 set checked(value)
27 { 43 {
28 booleanAttribute.call(this, "checked", value); 44 boolean.attribute(this, "checked", value);
29 this.render(); 45 this.render();
30 } 46 }
31 47
32 get disabled() 48 get disabled()
33 { 49 {
34 return this.hasAttribute("disabled"); 50 return this.hasAttribute("disabled");
35 } 51 }
36 52
37 set disabled(value) 53 set disabled(value)
38 { 54 {
39 booleanAttribute.call(this, "disabled", value); 55 boolean.attribute(this, "disabled", value);
40 this.firstElementChild.disabled = this._disabled; 56 this.render();
41 } 57 }
42 58
43 onclick(event) 59 onclick(event)
44 { 60 {
45 if (!this.disabled) 61 if (!this.disabled)
46 { 62 {
47 this.checked = !this.checked; 63 this.checked = !this.checked;
64 if (this.ownerDocument.activeElement !== this.child)
65 {
66 this.child.focus();
67 }
48 this.dispatchEvent(new CustomEvent("change", { 68 this.dispatchEvent(new CustomEvent("change", {
49 bubbles: true, 69 bubbles: true,
50 cancelable: true, 70 cancelable: true,
51 detail: this.checked 71 detail: this.checked
52 })); 72 }));
53 } 73 }
54 } 74 }
55 75
56 render() 76 render()
57 { 77 {
58 this.html` 78 this.html`
59 <button 79 <button
60 role="checkbox" 80 role="checkbox"
81 disabled="${this.disabled}"
61 data-action="${this.action}" 82 data-action="${this.action}"
62 aria-checked="${this.checked}" 83 aria-checked="${this.checked}"
63 aria-disabled="${this.disabled}" 84 aria-disabled="${this.disabled}"
64 />`; 85 />`;
65 } 86 }
66 } 87 }
67 88
68 IOToggle.define("io-toggle"); 89 IOToggle.define("io-toggle");
69
70 function asBoolean(value)
71 {
72 return typeof value === "string" ? JSON.parse(value) : !!value;
73 }
74
75 function booleanAttribute(name, value)
76 {
77 if (asBoolean(value))
78 {
79 this.setAttribute(name, "true");
80 }
81 else
82 {
83 this.removeAttribute(name);
84 }
85 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld