Issue 6514 - IOToggle Custom Element

js/io-toggle.js

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");