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

Unified 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.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: js/io-toggle.js
===================================================================
new file mode 100644
--- /dev/null
+++ b/js/io-toggle.js
@@ -0,0 +1,89 @@
+/*
+ * This file is part of Adblock Plus <https://adblockplus.org/>,
+ * Copyright (C) 2006-present eyeo GmbH
+ *
+ * Adblock Plus is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * Adblock Plus is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+"use strict";
+
+const IOElement = require("./io-element");
+const {boolean} = IOElement.utils;
+
+class IOToggle extends IOElement
+{
+ // action, checked, and disabled should be reflected down the button
+ static get observedAttributes()
+ {
+ return ["action", "checked", "disabled"];
+ }
+
+ created()
+ {
+ this.addEventListener("click", this);
+ this.render();
+ }
+
+ get checked()
+ {
+ return this.hasAttribute("checked");
+ }
+
+ set checked(value)
+ {
+ boolean.attribute(this, "checked", value);
+ this.render();
+ }
+
+ get disabled()
+ {
+ return this.hasAttribute("disabled");
+ }
+
+ set disabled(value)
+ {
+ boolean.attribute(this, "disabled", value);
+ this.render();
+ }
+
+ onclick(event)
+ {
+ if (!this.disabled)
+ {
+ this.checked = !this.checked;
+ if (this.ownerDocument.activeElement !== this.child)
+ {
+ this.child.focus();
+ }
+ this.dispatchEvent(new CustomEvent("change", {
+ bubbles: true,
+ cancelable: true,
+ detail: this.checked
+ }));
+ }
+ }
+
+ render()
+ {
+ this.html`
+ <button
+ role="checkbox"
+ disabled="${this.disabled}"
+ data-action="${this.action}"
+ aria-checked="${this.checked}"
+ aria-disabled="${this.disabled}"
+ />`;
+ }
+}
+
+IOToggle.define("io-toggle");

Powered by Google App Engine
This is Rietveld