toolbar.js

import jQuery from "jquery";
import { Editor } from "./components/editor";

const ID_TOOLBAR = "#toolbar";
const SAVE_BUTTON_ID = "div#ks-editor #toolbar-save";

const TOOL_SELECTED_CLASS = "selected";

export default class Toolbar {
    constructor(tools) {
        this.tools = Object.values(tools);
        this.previousTool = undefined;

        this.renderToolbar(this.tools);

        // Special, intial treatment
        jQuery(SAVE_BUTTON_ID).addClass("hidden");
    }

    setSelectedTool(tool) {
        var selectedTool = jQuery(Toolbar.getToolIdTag(tool));
        selectedTool.addClass(TOOL_SELECTED_CLASS);

        if (this.previousTool !== undefined) {
            var previousTool = jQuery(Toolbar.getToolIdTag(this.previousTool));
            previousTool.removeClass(TOOL_SELECTED_CLASS);
        }

        this.previousTool = tool;
    }

    renderToolbar(tools) {
        this.fillDomList(ID_TOOLBAR, tools, this.toolRenderer);

        tools.forEach((tool) => {
            this.toolClickEvent(tool);
        });
    }

    static getToolIdTag(tool) {
        return ID_TOOLBAR + "-" + tool.getKey();
    }

    static getToolId(tool) {
        return Toolbar.getToolIdTag(tool).substr(1);
    }

    toolRenderer(tool) {
        return (
            '<button id="' +
            Toolbar.getToolId(tool) +
            '" title="' +
            tool.getName() +
            '"><img src="' +
            tool.getIcon() +
            '"></button>'
        );
    }

    toolClickEvent(tool) {
        jQuery("button" + Toolbar.getToolIdTag(tool)).on(
            "click",
            "",
            tool,
            (e) => {
                var sameTool = Editor.globalState.tool === tool;
                if (sameTool && tool.toggleBehaviour) {
                    Editor.globalState.setTool(Editor.globalState.previousTool);
                } else {
                    Editor.globalState.setTool(e.data);
                }
            }
        );
    }

    fillDomList(listId, items, itemRenderer) {
        var listCont = jQuery(listId);
        listCont.empty();

        items.forEach((i) => listCont.append(itemRenderer(i)));
    }
}