From ebd631c3122692c8d84468148f1fa85e8a568f3b Mon Sep 17 00:00:00 2001 From: Jens Pelzetter Date: Tue, 5 Oct 2021 20:49:33 +0200 Subject: [PATCH] Process data from image node settings dialog --- .../content-sections/article-text-step.ts | 20 +++- .../cms-editor/image-node/image-node.ts | 109 ++++++++++++++++-- 2 files changed, 121 insertions(+), 8 deletions(-) diff --git a/ccm-cms/src/main/typescript/content-sections/article-text-step.ts b/ccm-cms/src/main/typescript/content-sections/article-text-step.ts index 566325bfd..6ef2fbdf3 100644 --- a/ccm-cms/src/main/typescript/content-sections/article-text-step.ts +++ b/ccm-cms/src/main/typescript/content-sections/article-text-step.ts @@ -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()); + }); + } + } + ); } + + + }); diff --git a/ccm-cms/src/main/typescript/content-sections/cms-editor/image-node/image-node.ts b/ccm-cms/src/main/typescript/content-sections/cms-editor/image-node/image-node.ts index fd5c2c9c9..49c56c2fa 100644 --- a/ccm-cms/src/main/typescript/content-sections/cms-editor/image-node/image-node.ts +++ b/ccm-cms/src/main/typescript/content-sections/cms-editor/image-node/image-node.ts @@ -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." + ); } }