weiro/assets/js/controllers/edit_upload.js

import Handlebars from "handlebars";
import {Controller} from "@hotwired/stimulus";

Handlebars.registerHelper("submit_on", function (id, event) {
    return `data-action="${event}->edit-upload#updateProcessor" data-edit-upload-id-param="${id}"`
});

const processorFrame = Handlebars.compile(`
    <div class="card mb-3">
      <div class="card-header d-flex justify-content-between">
        <span>{{name}}</span>
        <a href="#" class="btn btn-sm btn-secondary float-end"
          data-action="edit-upload#removeProcessor"
          data-edit-upload-id-param="{{id}}"
        >X</a>
      </div>
      <div class="card-body">
        <form data-role="processor-params" data-params-id="{{id}}">{{{props}}}</form>
      </div>
    </div>
`);

const processorUIs = {
    "shadow": {
        label: "Shadow",
        template: Handlebars.compile(`
            <div class="mb-3">
              <label for="{{id}}_width" class="form-label">Colour</label>
              <input name="width" class="form-control" id="{{id}}_{{props.color}}" type="color" value="{{color}}" {{{submit_on id 'change'}}}>
            </div>
        `),
    },
    "resize": {
        label: "Resize",
        template: Handlebars.compile(`
            <div class="mb-3">
              <label for="{{id}}_width" class="form-label">Width</label>
              <input name="width" class="form-control" id="{{id}}_width">
            </div>
            <div class="mb-3">
              <label for="{{id}}_height" class="form-label">Height</label>
              <input name="width" class="form-control" id="{{id}}_width">
            </div>
        `),
    },
};

export default class UploadEditController extends Controller {
    static targets = ['processList', 'preview'];
    static values = {
        uploadId: Number,
        siteId: Number,
    };

    connect() {
        this._rebuildProcessList();
        this._createSession();
    }

    async addProcessor(ev) {
        ev.preventDefault();
        await this._addProcessor({
            type: "shadow"
        });
    }

    async removeProcessor(ev) {
        ev.preventDefault();
        let id = ev.params.id;
        console.log(ev.params);
        await this._removeProcessor(id);
    }

    _rebuildProcessList() {
        let el = this.processListTarget;

        if ((!this._state) || (!this._state.session) || (!this._state.session.processors)) {
            return;
        }

        el.innerHTML = "";
        for (let p of this._state.session.processors) {
            let ui = processorUIs[p.type];
            if (!ui) {
                continue;
            }
            let cardOuter = processorFrame({
                id: p.id,
                name: ui.label,
                props: ui.template(p),
            });
            el.innerHTML += cardOuter;
        }
    }

    async _createSession() {
        try {
            let resp = await fetch(`/sites/${this.siteIdValue}/imageedit/`, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    "base_upload": this.uploadIdValue,
                })
            });

            this._state = await resp.json();

            this._rebuildProcessList();
            this.previewTarget.src = this._state.preview_url;
        } catch (e) {
            console.error(e);
        }
    }

    async _addProcessor(processor) {
        try {
            let resp = await fetch(`/sites/${this.siteIdValue}/imageedit/${this._state.session.guid}/processors`, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(processor)
            });

            this._state = await resp.json();

            this._rebuildProcessList();
            this.previewTarget.src = this._state.preview_url;
        } catch (e) {
            console.error(e);
        }
    }

    async _removeProcessor(processorID) {
        await this._doReturningState(async () => {
            return (await fetch(`/sites/${this.siteIdValue}/imageedit/${this._state.session.guid}/processors/${processorID}`, {
                method: 'DELETE',
            })).json();
        })
    }

    async _doReturningState(fn) {
        try {
            this._state = await fn();

            this._rebuildProcessList();
            this.previewTarget.src = this._state.preview_url;
        } catch (e) {
            console.error(e);
        }

    }
}