@blinkk/editor/dist/src/example/exampleTool.js

Structured content editor with live previews.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExampleTool = void 0;
const exampleApi_1 = require("./exampleApi");
const selective_edit_1 = require("@blinkk/selective-edit");
const STORAGE_ERROR_METHODS = 'example.api.error.methods';
const STORAGE_WORKSPACE_WORKFLOW = 'example.workspace.workflow';
class ExampleTool {
    constructor(api, storage, container) {
        this.api = api;
        this.storage = storage;
        this.container = container;
        // Load any existing error methods.
        const errorMethods = this.storage.getItemArray(STORAGE_ERROR_METHODS);
        for (const errorMethod of errorMethods) {
            this.api.errorController.makeError(errorMethod);
        }
        // Load any workflow.
        const workflowValue = this.storage.getItem(STORAGE_WORKSPACE_WORKFLOW) ||
            exampleApi_1.WorkspaceWorkflow.Success;
        this.workflow = workflowValue;
        this.api.workflow = this.workflow;
        // Auto close when clicking out of expanded list.
        document.addEventListener('click', (evt) => {
            if (!this.isExpanded) {
                return;
            }
            const exampleContent = selective_edit_1.findParentByClassname(evt.target, 'example_tool__container');
            // Do not close when clicking on the modal content.
            if (exampleContent) {
                return;
            }
            this.isExpanded = false;
            this.render();
        });
    }
    handleToggle(evt) {
        evt.stopPropagation();
        this.isExpanded = !this.isExpanded;
        this.render();
    }
    render() {
        selective_edit_1.render(this.template(this), this.container);
    }
    storeErrorMethods() {
        this.storage.setItemArray(STORAGE_ERROR_METHODS, Array.from(this.api.errorController.errorMethods));
    }
    template(tool) {
        return selective_edit_1.html `${this.templateFloatButton(tool)}
    ${this.templateStructure(tool)}`;
    }
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    templateApiResponse(tool) {
        if (!this.isExpanded) {
            return selective_edit_1.html ``;
        }
        const apiMethods = getMethodsOfClass(this.api);
        return selective_edit_1.html `<div class="example_tool__api_response">
      <h3>API Responses</h3>
      ${selective_edit_1.repeat(apiMethods, methodName => methodName, methodName => {
            const shouldError = this.api.errorController.shouldError(methodName);
            return selective_edit_1.html `<div
            class="example_tool__api_method ${shouldError
                ? 'example_tool__api_method--should-error'
                : ''} le__clickable"
            @click=${() => {
                this.api.errorController.toggleError(methodName);
                this.storeErrorMethods();
                this.render();
            }}
          >
            <span class="material-icons"
              >${shouldError ? 'error' : 'check_circle'}</span
            >
            ${methodName}
          </div>`;
        })}
    </div>`;
    }
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    templateFloatButton(tool) {
        return selective_edit_1.html `<div
      class="example_tool__float_button ${this.api.errorController.errorMethods
            .size > 0
            ? 'example_tool__float_button--should-error'
            : ''} le__clickable"
      @click=${this.handleToggle.bind(this)}
    >
      <span class="material-icons">bug_report</span>
    </div>`;
    }
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    templateSettings(tool) {
        if (!this.isExpanded) {
            return selective_edit_1.html ``;
        }
        let publishWorkflow = this.storage.getItem(STORAGE_WORKSPACE_WORKFLOW);
        const publishWorklowOptions = [
            {
                value: exampleApi_1.WorkspaceWorkflow.NoPublish,
                label: 'No publish',
            },
            {
                value: exampleApi_1.WorkspaceWorkflow.NoChanges,
                label: 'No changes to publish',
            },
            {
                value: exampleApi_1.WorkspaceWorkflow.Success,
                label: 'Success',
            },
            {
                value: exampleApi_1.WorkspaceWorkflow.SuccessNoFields,
                label: 'Success (No fields)',
            },
            {
                value: exampleApi_1.WorkspaceWorkflow.SuccessChangeWorkspace,
                label: 'Success (Different workspace)',
            },
            {
                value: exampleApi_1.WorkspaceWorkflow.Pending,
                label: 'Pending after publish',
            },
            {
                value: exampleApi_1.WorkspaceWorkflow.Failure,
                label: 'Failure after publish',
            },
        ];
        return selective_edit_1.html `<div class="example_tool__settings">
      <h3>Settings</h3>

      <h4>Publish Workflow</h4>

      ${selective_edit_1.repeat(publishWorklowOptions, option => option.value, (option) => {
            const handlePublishClick = () => {
                publishWorkflow = option.value;
                this.storage.setItem(STORAGE_WORKSPACE_WORKFLOW, option.value);
                window.location.reload();
            };
            return selective_edit_1.html `<div class="example_tool__setting">
            <label>
              <input
                type="radio"
                name="publishWorkflow"
                value="normal"
                ?checked=${publishWorkflow === option.value}
                @click=${handlePublishClick}
              />
              ${option.label}
            </label>
          </div>`;
        })}
    </div>`;
    }
    templateStructure(tool) {
        if (!this.isExpanded) {
            return selective_edit_1.html ``;
        }
        return selective_edit_1.html `<div class="example_tool__container">
      ${this.templateApiResponse(tool)} ${this.templateSettings(tool)}
    </div>`;
    }
}
exports.ExampleTool = ExampleTool;
function getMethodsOfClass(obj) {
    const methods = new Set();
    obj = Reflect.getPrototypeOf(obj);
    const keys = Reflect.ownKeys(obj);
    keys.forEach(k => {
        if (k !== 'constructor' &&
            typeof obj[k] === 'function' &&
            !k.toString().startsWith('_')) {
            methods.add(k);
        }
    });
    return Array.from(methods);
}
//# sourceMappingURL=exampleTool.js.map