weiro/assets/js/controllers/edit_upload.js

import feather from "feather-icons/dist/feather.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 align-items-center">
        <span>{{name}}</span>
        <a href="#" class="float-end"
          data-action="edit-upload#removeProcessor"
          data-edit-upload-id-param="{{id}}"
        ><i data-feather="x" width="18" height="18"></i></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="row mb-3 align-items-center">
              <label for="{{id}}_color" class="col-sm col-form-label">Colour</label>
              <div class="col-sm">
                <input name="color" class="form-control" id="{{id}}_color" type="color" value="{{props.color}}" {{{submit_on id 'change'}}}>
              </div>
            </div>
            <div class="row mb-3">
              <label for="{{id}}_offset_y" class="col-sm col-form-label">Offset Y</label>
              <div class="col-sm">
                <input name="offset_y" class="form-control" id="{{id}}_{{props.color}}" type="number" value="{{props.offset_y}}" {{{submit_on id 'blur'}}}>
              </div>
            </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;
        await this._removeProcessor(id);
    }

    async saveUpload(ev) {
        ev.preventDefault();
        await this._save("replace");
    }

    async saveNewUpload(ev) {
        ev.preventDefault();
        await this._save("copy");
    }

    async updateProcessor(ev) {
        ev.preventDefault();
        let id = ev.params.id;

        let paramParentEl = ev.target.closest('[data-role="processor-params"]');
        let params = Object.fromEntries(new FormData(paramParentEl).entries());

        await this._updateProcessor(id, params);
    }

    _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;
        }

        feather.replace();
    }

    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 _updateProcessor(processorID, params) {
        await this._doReturningState(async () => {
            return (await fetch(`/sites/${this.siteIdValue}/imageedit/${this._state.session.guid}`, {
                method: 'PATCH',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    processor: {
                        id: processorID,
                        props: params,
                    }
                })
            })).json();
        })
    }


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

    async _save(mode) {
        if (!this._state || !this._state.session) {
            return;
        }

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

            if (!resp.ok) {
                console.error("Save failed:", resp.statusText);
                return;
            }

            let result = await resp.json();
            window.location.href = `/sites/${this.siteIdValue}/uploads/${result.upload_id}`;
        } catch (e) {
            console.error(e);
        }
    }

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

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

    }
}