BookStack/resources/js/wysiwyg/ui/framework/buttons.ts

105 lines
3.0 KiB
TypeScript
Raw Normal View History

2024-05-30 23:50:55 +08:00
import {BaseSelection} from "lexical";
import {EditorUiContext, EditorUiElement, EditorUiStateUpdate} from "./core";
import {el} from "../../helpers";
2024-06-13 02:51:42 +08:00
export interface EditorBasicButtonDefinition {
label: string;
icon?: string|undefined;
2024-06-13 02:51:42 +08:00
}
export interface EditorButtonDefinition extends EditorBasicButtonDefinition {
action: (context: EditorUiContext, button: EditorButton) => void;
isActive: (selection: BaseSelection|null, context: EditorUiContext) => boolean;
setup?: (context: EditorUiContext, button: EditorButton) => void;
}
export class EditorButton extends EditorUiElement {
protected definition: EditorButtonDefinition;
2024-05-30 23:50:55 +08:00
protected active: boolean = false;
protected completedSetup: boolean = false;
protected disabled: boolean = false;
constructor(definition: EditorButtonDefinition|EditorBasicButtonDefinition) {
super();
if ((definition as EditorButtonDefinition).action !== undefined) {
this.definition = definition as EditorButtonDefinition;
} else {
this.definition = {
...definition,
action() {
return false;
},
isActive: () => {
return false;
}
};
}
}
setContext(context: EditorUiContext) {
super.setContext(context);
if (this.definition.setup && !this.completedSetup) {
this.definition.setup(context, this);
this.completedSetup = true;
}
}
protected buildDOM(): HTMLButtonElement {
const label = this.getLabel();
let child: string|HTMLElement = label;
if (this.definition.icon) {
child = el('div', {class: 'editor-button-icon'});
child.innerHTML = this.definition.icon;
}
const button = el('button', {
type: 'button',
class: 'editor-button',
title: this.definition.icon ? label : null,
disabled: this.disabled ? 'true' : null,
}, [child]) as HTMLButtonElement;
button.addEventListener('click', this.onClick.bind(this));
return button;
}
protected onClick() {
this.definition.action(this.getContext(), this);
}
updateActiveState(selection: BaseSelection|null) {
const isActive = this.definition.isActive(selection, this.getContext());
this.setActiveState(isActive);
}
setActiveState(active: boolean) {
this.active = active;
2024-05-30 23:50:55 +08:00
this.dom?.classList.toggle('editor-button-active', this.active);
}
updateState(state: EditorUiStateUpdate): void {
this.updateActiveState(state.selection);
}
2024-05-30 23:50:55 +08:00
isActive(): boolean {
return this.active;
}
getLabel(): string {
return this.trans(this.definition.label);
}
toggleDisabled(disabled: boolean) {
this.disabled = disabled;
if (disabled) {
this.dom?.setAttribute('disabled', 'true');
} else {
this.dom?.removeAttribute('disabled');
}
}
}