2019-09-13 22:47:07 +12:00
|
|
|
(function(window) {
|
|
|
|
"use strict";
|
2019-05-09 18:54:39 +12:00
|
|
|
|
2019-09-13 22:47:07 +12:00
|
|
|
window.ls.container.get("view").add({
|
|
|
|
selector: "data-forms-switch",
|
|
|
|
controller: function(element) {
|
|
|
|
let input = window.document.createElement("input");
|
|
|
|
input.type = "checkbox";
|
2021-03-01 04:01:16 +13:00
|
|
|
input.className = "button switch " + element.className;
|
2019-05-09 18:54:39 +12:00
|
|
|
|
2019-09-13 22:47:07 +12:00
|
|
|
let syncA = function() {
|
2020-03-17 07:41:56 +13:00
|
|
|
let value = input.checked ? "true" : "false"
|
|
|
|
let old = element.value;
|
|
|
|
|
|
|
|
element.value = value;
|
|
|
|
|
|
|
|
if(value !== old) {
|
|
|
|
element.dispatchEvent(new Event('change'));
|
|
|
|
}
|
2019-09-13 22:47:07 +12:00
|
|
|
};
|
2019-05-09 18:54:39 +12:00
|
|
|
|
2019-09-13 22:47:07 +12:00
|
|
|
let syncB = function() {
|
2020-03-17 07:41:56 +13:00
|
|
|
input.checked = (element.value === "true");
|
2021-10-28 05:55:36 +13:00
|
|
|
|
|
|
|
if (element.disabled) {
|
|
|
|
input.setAttribute("disabled", true);
|
|
|
|
} else {
|
|
|
|
input.removeAttribute("disabled");
|
|
|
|
}
|
2019-09-13 22:47:07 +12:00
|
|
|
};
|
2019-05-09 18:54:39 +12:00
|
|
|
|
2021-10-28 05:55:36 +13:00
|
|
|
|
2019-09-13 22:47:07 +12:00
|
|
|
input.addEventListener("input", syncA);
|
|
|
|
input.addEventListener("change", syncA);
|
2019-05-09 18:54:39 +12:00
|
|
|
|
2019-09-13 22:47:07 +12:00
|
|
|
element.addEventListener("input", syncB);
|
|
|
|
element.addEventListener("change", syncB);
|
2019-05-09 18:54:39 +12:00
|
|
|
|
2019-09-13 22:47:07 +12:00
|
|
|
syncA();
|
2019-05-09 18:54:39 +12:00
|
|
|
|
2019-09-13 22:47:07 +12:00
|
|
|
element.parentNode.insertBefore(input, element);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
})(window);
|