mirror of
https://github.com/sissbruecker/linkding.git
synced 2025-08-07 18:58:30 +02:00
Avoid page reload when triggering actions in bookmark list (#506)
* Extract bookmark view contexts * Implement basic partial updates for bookmark list and tag cloud * Refactor confirm button JS into web component * Refactor bulk edit JS into web component * Refactor tag autocomplete JS into web component * Refactor bookmark page JS into web component * Refactor global shortcuts JS into web component * Update tests * Add E2E test for partial updates * Add partial updates for archived bookmarks * Add partial updates for shared bookmarks * Cleanup helpers * Improve naming in bulk edit * Refactor shared components into behaviors * Refactor bulk edit components into behaviors * Refactor bookmark list components into behaviors * Update tests * Combine all scripts into bundle * Fix E2E CI
This commit is contained in:
50
bookmarks/frontend/behaviors/confirm-button.js
Normal file
50
bookmarks/frontend/behaviors/confirm-button.js
Normal file
@@ -0,0 +1,50 @@
|
||||
import { registerBehavior } from "./index";
|
||||
|
||||
class ConfirmButtonBehavior {
|
||||
constructor(element) {
|
||||
const button = element;
|
||||
button.dataset.type = button.type;
|
||||
button.dataset.name = button.name;
|
||||
button.dataset.value = button.value;
|
||||
button.removeAttribute("type");
|
||||
button.removeAttribute("name");
|
||||
button.removeAttribute("value");
|
||||
button.addEventListener("click", this.onClick.bind(this));
|
||||
this.button = button;
|
||||
}
|
||||
|
||||
onClick(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const cancelButton = document.createElement(this.button.nodeName);
|
||||
cancelButton.type = "button";
|
||||
cancelButton.innerText = "Cancel";
|
||||
cancelButton.className = "btn btn-link btn-sm mr-1";
|
||||
cancelButton.addEventListener("click", this.reset.bind(this));
|
||||
|
||||
const confirmButton = document.createElement(this.button.nodeName);
|
||||
confirmButton.type = this.button.dataset.type;
|
||||
confirmButton.name = this.button.dataset.name;
|
||||
confirmButton.value = this.button.dataset.value;
|
||||
confirmButton.innerText = "Confirm";
|
||||
confirmButton.className = "btn btn-link btn-sm";
|
||||
confirmButton.addEventListener("click", this.reset.bind(this));
|
||||
|
||||
const container = document.createElement("span");
|
||||
container.className = "confirmation";
|
||||
container.append(cancelButton, confirmButton);
|
||||
this.container = container;
|
||||
|
||||
this.button.before(container);
|
||||
this.button.classList.add("d-none");
|
||||
}
|
||||
|
||||
reset() {
|
||||
setTimeout(() => {
|
||||
this.container.remove();
|
||||
this.button.classList.remove("d-none");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
registerBehavior("ld-confirm-button", ConfirmButtonBehavior);
|
Reference in New Issue
Block a user