54 lines
1.2 KiB
JavaScript
54 lines
1.2 KiB
JavaScript
|
export function createSelected(element, content, styles) {
|
||
|
|
if (content) {
|
||
|
|
element.innerHTML = `
|
||
|
|
<div class="cg-select">
|
||
|
|
<p class="selected">${content}</p>
|
||
|
|
<div class="caret"></div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (styles) {
|
||
|
|
customStyles(element, styles);
|
||
|
|
|
||
|
|
element.innerHTML = `
|
||
|
|
<div class="cg-select" style = "${styles}">
|
||
|
|
<span class="selected" style = "${styles}">${content}</span>
|
||
|
|
<div class="caret" style = "${styles}"></div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export function customStyles(element, styles) {
|
||
|
|
if (!styles) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const { head, caret, placeholder } = styles;
|
||
|
|
const select = element.querySelector('.cg-select');
|
||
|
|
const crt = element.querySelector('.caret');
|
||
|
|
|
||
|
|
const placeh = element.querySelector('.selected');
|
||
|
|
|
||
|
|
if (head) {
|
||
|
|
Object.entries(head).forEach(([key, value]) => {
|
||
|
|
select.style[key] = value;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (caret) {
|
||
|
|
Object.entries(caret).forEach(([key, value]) => {
|
||
|
|
crt.style[key] = value;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (placeh) {
|
||
|
|
if (placeholder) {
|
||
|
|
Object.entries(placeholder).forEach(([key, value]) => {
|
||
|
|
placeh.style[key] = value;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|