LibreCCM
/
libreccm
3
0
Fork 0
Code Issues 10 Pull Requests Packages Releases Wiki Activity

Process data from image node settings dialog

pull/10/head
Jens Pelzetter 2021-10-05 20:49:33 +02:00
parent d4cb8bb5bb
commit ebd631c312
2 changed files with 121 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ccm-cms/src/main/typescript/content-sections/article-text-step.ts
View File

@ -23,6 +23,24 @@ document.addEventListener("DOMContentLoaded", event => {
variantUrl
);
builder.buildEditor();
builder
.buildEditor()
.then(editor => {
// Temporary for development
const submitButton = document.querySelector(".cms-editor-save-button");
if (submitButton) {
submitButton.addEventListener("click", (event) => {
event.preventDefault();
console.log("HTML output of editor: ");
console.log(editor.getEditor().getHTML());
});
}
}
);
}
});

107
ccm-cms/src/main/typescript/content-sections/cms-editor/image-node/image-node.ts
View File

@ -158,15 +158,25 @@ export const ImageNode = Node.create({
const settingDialogLabels =
settingsDialogElem.querySelectorAll("*[for]");
for (let i = 0; i < settingDialogLabels.length; i++) {
const label = settingDialogLabels.item(i);
label.id = `${label.id}-${dialogIdNr}`;
const label = settingDialogLabels.item(
i
) as HTMLLabelElement;
label.setAttribute(
"for",
`${label.getAttribute("for")}-${dialogIdNr}`
);
}
const describedElems = settingsDialogElem.querySelectorAll(
"*[aria-describedby]"
);
for (let i = 0; i < describedElems.length; i++) {
const describedElem = describedElems.item(i);
describedElem.id = `${describedElem.id}-${dialogIdNr}`;
describedElem.setAttribute(
"aria-describedby",
`${describedElem.getAttribute(
"aria-describedby"
)}-${dialogIdNr}`
);
}
const submitButton = settingsDialogElem.querySelector(
@ -177,15 +187,100 @@ export const ImageNode = Node.create({
`input#alttext-${dialogIdNr}`
);
const alignSelect = settingsDialogElem.querySelector(
`input#align-${dialogIdNr}`
`select#align-${dialogIdNr}`
);
// ToDo: Init inputs
const sizeSelect = settingsDialogElem.querySelector(
`select#size-${dialogIdNr}`
);
const fullSizeOverlayInput = settingsDialogElem.querySelector(
`input#fullsizeoverlay-${dialogIdNr}`
);
if (altTextInput) {
(altTextInput as HTMLInputElement).value =
node.attrs.altText;
} else {
console.warn("Input for alt text not found.");
}
if (alignSelect) {
const optionElems = alignSelect.querySelectorAll("option");
for (let i = 0; i < optionElems.length; i++) {
const optionElem = optionElems.item(
i
) as HTMLOptionElement;
if (optionElem.value === node.attrs.align) {
optionElem.selected = true;
}
}
} else {
console.warn("Select for image alignment not found.");
}
if (sizeSelect) {
const optionElems = sizeSelect.querySelectorAll("option");
for (let i = 0; i < optionElems.length; i++) {
const optionElem = optionElems.item(
i
) as HTMLOptionElement;
if (optionElem.value === node.attrs.size) {
optionElem.selected = true;
}
}
} else {
console.warn("Select for image size not found.");
}
if (fullSizeOverlayInput) {
(fullSizeOverlayInput as HTMLInputElement).checked =
node.attrs.fullSizeOverlay;
} else {
console.warn("Input for fullSizeOverlay not found.");
}
if (submitButton) {
submitButton.addEventListener("click", (event) => {
// ToDo: Read values from inputs and update node.attrs
const inputElem = altTextInput as HTMLInputElement;
if (altTextInput) {
node.attrs.altText = inputElem.value;
} else {
console.warn("Input for alt text not found.");
}
if (alignSelect) {
const selectElem = alignSelect as HTMLSelectElement;
node.attrs.align =
selectElem.selectedOptions.item(0)?.value;
} else {
console.warn(
"Select for image alignment not found."
);
}
if (sizeSelect) {
const selectElem = sizeSelect as HTMLSelectElement;
node.attrs.size =
selectElem.selectedOptions.item(0)?.value;
} else {
console.warn("Select for image size not found.");
}
if (fullSizeOverlayInput) {
const inputElem =
fullSizeOverlayInput as HTMLInputElement;
node.attrs.fullSizeOverlay = inputElem.checked;
} else {
console.warn(
"Input for fullSizeOverlay not found."
);
}
});
} else {
console.warn(
"Submit button for image settings dialog not found."
);
}
}