JaredTherriault
f0338b0c5f
-Added new batch selection and batch deletion features. All imageElements now have a checkbox and each selected element is tracked within a context or folder. When you've selected all you want to delete, click the recycle button on the toolbar, then again to confirm. All checked items will be recylced/deleted. You can also click on the selection widget next to the batch delete button to toggle select/deselect all. -Renamed ImageDrawer.js to ImageDrawerMain.js -Separated ImageListAndSearch out into separate scripts and classes named ImageDrawerList and ImageDrawerSearch -Changed order of some initialized functions and variables in imageElements to better accommodate batch selection - -Moved some scripts over to a classy architecture. More scripts will be moved over time. This will eventually allow for multiple image drawer instances in the same window. -Added a new module script that manages all class instances. See ImageDrawerModule.js for an explanation of the new architecture. Basically, it makes cyclical dependencies impossible. -Updated imports -Updated various scripts to use class instances where applicable -Updated some outdated comments -Added option to prepend or append labels to Labeled widgets -Parameter optimizations -
64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
|
|
import { $el } from "/scripts/ui.js";
|
|
|
|
import { utilitiesInstance } from "../../common/Utilities.js";
|
|
|
|
import { ImageDrawerComponent } from "../Core/ImageDrawerModule.js";
|
|
|
|
export class BatchOptionManagerButton extends ImageDrawerComponent {
|
|
|
|
constructor(args) {
|
|
|
|
super(args);
|
|
|
|
this.container = null;
|
|
this.button = null;
|
|
|
|
this.tooltipText = args.tooltipText || null;
|
|
this.buttonClass = args.buttonClass || null;
|
|
this.containerClass = args.containerClass || null;
|
|
}
|
|
|
|
makeWidget() {
|
|
|
|
this.container = $el(`div.${this.containerClass ? this.containerClass : (this.buttonClass + "-container")}`, {
|
|
style: {
|
|
pointerEvents: "none"
|
|
}
|
|
});
|
|
|
|
{
|
|
this.button = $el(`button.${this.buttonClass}`, {
|
|
title: this.tooltipText,
|
|
style: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
gap: "4px",
|
|
padding: "2px 6px",
|
|
borderRadius: '10px',
|
|
justifyContent: 'center',
|
|
background: "rgba(0,0,0,0.5)",
|
|
border: "none",
|
|
cursor: 'pointer',
|
|
pointerEvents: "all"
|
|
}
|
|
});
|
|
this.button.classList.add("JNodes-interactive-container");
|
|
|
|
// Add click event listener to button
|
|
this.button.addEventListener('click', () => {
|
|
this.onClickButton();
|
|
});
|
|
this.container.appendChild(this.button);
|
|
}
|
|
|
|
return {container: this.container, button: this.button};
|
|
}
|
|
|
|
onClickButton() {}
|
|
|
|
setWidgetVisible(bNewVisibile) {
|
|
utilitiesInstance.setElementVisible(this.container, bNewVisibile);
|
|
}
|
|
}
|