59 lines
1.6 KiB
JavaScript
59 lines
1.6 KiB
JavaScript
|
import Handlebars from "handlebars";
|
||
|
|
import {Controller} from "@hotwired/stimulus";
|
||
|
|
|
||
|
|
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">X</a>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
{{{props}}}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`);
|
||
|
|
|
||
|
|
const processors = [
|
||
|
|
{
|
||
|
|
name: "shadow",
|
||
|
|
label: "Shadow",
|
||
|
|
template: Handlebars.compile(`This processor has no properties.`),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "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'];
|
||
|
|
|
||
|
|
connect() {
|
||
|
|
this._rebuildProcessList();
|
||
|
|
}
|
||
|
|
|
||
|
|
_rebuildProcessList() {
|
||
|
|
let el = this.processListTarget;
|
||
|
|
|
||
|
|
// TEMP
|
||
|
|
let cardTemplate = processors[0].template({
|
||
|
|
"id": "shadow",
|
||
|
|
});
|
||
|
|
let cardOuter = processorFrame({
|
||
|
|
name: processors[0].label,
|
||
|
|
props: cardTemplate,
|
||
|
|
});
|
||
|
|
el.innerHTML = cardOuter;
|
||
|
|
// END TEMP
|
||
|
|
}
|
||
|
|
}
|