46 lines
No EOL
1.3 KiB
JavaScript
46 lines
No EOL
1.3 KiB
JavaScript
(function (window) {
|
|
"use strict";
|
|
|
|
window.ls.container.get('view').add(
|
|
{
|
|
selector: 'data-forms-color',
|
|
repeat: false,
|
|
controller: function(element) {
|
|
var preview = document.createElement('div');
|
|
var picker = document.createElement('input');
|
|
|
|
picker.type = 'color';
|
|
preview.className = 'color-preview';
|
|
|
|
preview.appendChild(picker);
|
|
|
|
picker.addEventListener('change', syncA);
|
|
picker.addEventListener('input', syncA);
|
|
element.addEventListener('input', update);
|
|
element.addEventListener('change', update);
|
|
|
|
function update() {
|
|
if(element.validity.valid) {
|
|
preview.style.background = element.value;
|
|
syncB();
|
|
}
|
|
}
|
|
|
|
function syncA() {
|
|
element.value = picker.value;
|
|
update();
|
|
}
|
|
|
|
function syncB() {
|
|
picker.value = element.value;
|
|
}
|
|
|
|
element.parentNode.insertBefore(preview, element);
|
|
|
|
update();
|
|
syncB();
|
|
}
|
|
}
|
|
);
|
|
|
|
})(window); |