@opentiny/fluent-editor
Version:
A rich text editor based on Quill 2.0, which extends rich modules and formats on the basis of Quill. It's powerful and out-of-the-box.
111 lines (110 loc) • 3.71 kB
JavaScript
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
class ImageToolbar {
constructor() {
__publicField(this, "toolbar");
__publicField(this, "buttons");
this.toolbar = null;
this.buttons = [];
}
create(formatter, toolButton) {
const toolbar = document.createElement("div");
toolbar.classList.add(formatter.options.toolbar.mainClassName);
this.addToolbarStyle(formatter, toolbar);
this.addButtons(formatter, toolbar, toolButton);
this.toolbar = toolbar;
return this.toolbar;
}
destroy() {
this.toolbar = null;
this.buttons = [];
}
getElement() {
return this.toolbar;
}
addToolbarStyle(formatter, toolbar) {
if (formatter.options.toolbar.mainStyle) {
Object.assign(toolbar.style, formatter.options.toolbar.mainStyle);
}
}
addButtonStyle(button, index, formatter) {
if (formatter.options.toolbar.buttonStyle) {
Object.assign(button.style, formatter.options.toolbar.buttonStyle);
if (index > 0) {
button.style.borderLeftWidth = "0";
}
}
if (formatter.options.toolbar.svgStyle) {
Object.assign(button.children[0].style, formatter.options.toolbar.svgStyle);
}
}
addButtons(formatter, toolbar, toolButton) {
toolButton.getItems().forEach((tool, i) => {
const button = document.createElement("span");
button.classList.add(formatter.options.toolbar.buttonClassName);
button.innerHTML = tool.icon;
button.addEventListener("click", () => {
this.onButtonClick(button, formatter, tool, toolButton);
});
this.preselectButton(button, tool, formatter, toolButton);
this.addButtonStyle(button, i, formatter);
this.buttons.push(button);
toolbar.appendChild(button);
});
}
preselectButton(button, toolButtonOption, formatter, toolButton) {
if (!formatter.currentSpec) {
return;
}
const target = formatter.currentSpec.getTargetElement();
if (!target) {
return;
}
if (toolButtonOption.isActive && toolButtonOption.isActive(target)) {
this.selectButton(formatter, button);
}
}
onButtonClick(button, formatter, toolButtonOption, toolButton) {
if (!formatter.currentSpec) {
return;
}
const target = formatter.currentSpec.getTargetElement();
if (!target || target.tagName.toLowerCase() !== "img") {
return;
}
this.clickButton(button, target, formatter, toolButtonOption, toolButton);
}
clickButton(button, target, formatter, toolButtonOption, toolButton) {
if (!toolButtonOption.isActive) {
toolButtonOption.apply.call(this, target, toolButton);
} else {
this.buttons.forEach((b) => {
this.deselectButton(formatter, b);
});
if (toolButtonOption.isActive(target)) {
toolButton.clear(target);
} else {
this.selectButton(formatter, button);
toolButtonOption.apply.call(this, target, toolButton);
}
}
formatter.update();
}
selectButton(formatter, button) {
button.classList.add("is-selected");
if (formatter.options.toolbar.addButtonSelectStyle) {
button.style.setProperty("filter", "invert(20%)");
}
}
deselectButton(formatter, button) {
button.classList.remove("is-selected");
if (formatter.options.toolbar.addButtonSelectStyle) {
button.style.removeProperty("filter");
}
}
}
export {
ImageToolbar
};
//# sourceMappingURL=toolbar.es.js.map