Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-21 00:50:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 https://github.com/siyuan-note/siyuan/issues/9801

Browse source
This commit is contained in:
Vanessa 2023-12-04 00:29:57 +08:00
parent 3ea2741e5f
commit d1c5c9ac7d
4 changed files with 63 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

40
app/src/util/addClearButton.ts
View file

@ -1,27 +1,37 @@
const update = (inputElement: HTMLInputElement, clearElement: Element, right = 8) => {
const update = (inputElement: HTMLInputElement, clearElement: Element, right: number) => {
if (inputElement.value === "") {
clearElement.classList.add("fn__none");
inputElement.style.paddingRight = "";
if (right) {
inputElement.style.paddingRight = "";
}
} else {
clearElement.classList.remove("fn__none");
inputElement.style.setProperty('padding-right', `${right * 2 + clearElement.clientWidth}px`, 'important');
if (right) {
inputElement.style.setProperty('padding-right', `${right * 2 + clearElement.clientWidth}px`, 'important');
}
}
}
export const addClearButton = (inputElement: HTMLInputElement, clearCB?: () => void, right = 8, height?: number) => {
inputElement.insertAdjacentHTML("afterend",
`<svg class="b3-form__icon-clear" style="right:${right}px;height: ${height || inputElement.clientHeight}px;">
export const addClearButton = (options: {
inputElement: HTMLInputElement,
clearCB?: () => void,
right?: number,
height?: number
className?: string
}) => {
options.inputElement.insertAdjacentHTML("afterend",
`<svg class="${options.className || "b3-form__icon-clear"}" style="${options.right ? "right: " + options.right + "px" : ""}${options.height ? "height:" + options.height + "px" : ""}">
<use xlink:href="#iconCloseRound"></use></svg>`);
const clearElement = inputElement.nextElementSibling;
const clearElement = options.inputElement.nextElementSibling;
clearElement.addEventListener("click", () => {
inputElement.value = "";
inputElement.focus();
update(inputElement, clearElement, right);
if (clearCB) {
clearCB();
options.inputElement.value = "";
options.inputElement.focus();
update(options.inputElement, clearElement, options.right);
if (options.clearCB) {
options.clearCB();
}
})
inputElement.addEventListener("input", () => {
update(inputElement, clearElement, right);
options.inputElement.addEventListener("input", () => {
update(options.inputElement, clearElement, options.right);
});
update(inputElement, clearElement, right);
update(options.inputElement, clearElement, options.right);
};