Page MenuHomeSealhub
Files F7104430

jdd-creator.ts
No OneTemporary
Actions

jdd-creator.ts
View Options

import type { Context } from "koa";
import { ComponentPreviewActions } from "./component-preview-actions.js";
import type { JDDPageState } from "./jdd-page.js";
import JDDPage from "./jdd-page.js";
import { htmlEscape } from "escape-goat";
import { tempstream } from "tempstream";
export default abstract class JDDCreator extends JDDPage {
actions = ComponentPreviewActions;
/**
* This method returns list of components allowed in JDD Editor instance.
* If list is empty it will allow all of the components in registry,
* if you overide this function you can decide on what components should
* available.
*/
getAllowedComponents(): string[] {
return [];
}
getRegistryComponents() {
const all_components = super.getRegistryComponents();
const allowed_components = this.getAllowedComponents();
if (allowed_components.length > 0) {
return Object.fromEntries(
Object.entries(all_components).filter(([name]) =>
allowed_components.includes(name)
)
);
}
return all_components;
}
renderParameterButtons(state: JDDPageState) {
{
/*The below button has to be here in order for it to be the default behavior */
}
return `<div class="jdd-editor__toolbar">
<input type="submit" value="Preview" />
<select name="component">
${Object.keys(this.getRegistryComponents())
.map((cmp) => `<option value="${cmp}">${cmp}</option>`)
.join("")}
</select>
${this.makeActionButton(state, {
action: "add_component",
label: "Add component",
})}
</div>`;
}
renderComponentBlock(
ctx: Context,
state: JDDPageState,
component_data: {
component_name: string;
args: Record<string, unknown>;
},
component_index: number
) {
const component =
this.getRegistryComponents()[component_data.component_name];
const checkbox_id = `component_${component_index}_open`;
return tempstream/* HTML */ `<div
class="jdd-editor__component-block jdd-editor__component-block--number-${component_index}"
id="${`jdd-editor__component-block--${component_data.component_name}-${component_index}`}"
data-component-debugger-target="componentBlock"
data-component-index="${component_index.toString()}"
>
<summary class="jdd-editor__component-block__top_bar">
${this.makeActionButton(
state,
{ action: "remove_component", label: "❌" },
component_index
)}
${this.makeActionButton(
state,
{
action: "move_component_up",
label: "Move this row up",
content: /* HTML */ `<img
width="20"
height="20"
src="${this.makeAssetURL(
"icons/table-move-row-up.svg"
)}"
/>`,
},
component_index
)}
${this.makeActionButton(
state,
{
action: "move_component_down",
label: "Move this row down",
content: /* HTML */ `<img
width="20"
height="20"
src="${this.makeAssetURL(
"icons/table-move-row-down.svg"
)}"
/>`,
},
component_index
)}
<span class="jdd-editor__component-block__title">
<div class="jdd-editor__component-block__title__main">
${htmlEscape(
component?.getTitle(
this.makeJDDContext(ctx),
component_data.args
) || ""
)}
</div>
<div class="jdd-editor__component-block__title__secondary">
${component_data.component_name}
</div>
</span>
<label
class="component-block__handle"
for="${checkbox_id}"
style="flex-grow: 1"
data-action="click->component-debugger#labelClicked"
>
<span class="jdd-editor__component-block__chevron">
${" "} &gt;${" "}
</span>
</label>
</summary>
<input
type="checkbox"
class="component-collapse-toggle"
name="${`$[components][${component_index}][open]`}"
data-turbo-permanent
id="${checkbox_id}"
style="display:none"
data-component-debugger-target="checkbox"
/>
<div class="jdd-editor__component-block__inner">
${super.renderComponentBlock(
ctx,
state,
component_data,
component_index
)}
</div>
</div>`;
}
}

File Metadata

Mime Type
text/x-java
Expires
Thu, Jul 3, 03:00 (1 d, 9 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
680598
Default Alt Text
jdd-creator.ts (4 KB)

Event Timeline