From a3093331c257d482f5ba58142d5bee3867a1bfe9 Mon Sep 17 00:00:00 2001 From: jensp Date: Fri, 2 Feb 2018 08:43:07 +0000 Subject: [PATCH] CCM NG: InsertMediaAssetCommand for ccm-editor should now work. git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5229 8810af33-2d31-482b-a856-94f89814c4df --- .../main/resources/ccm-editor/ccm-editor.css | 14 +- .../typescript/ccm-editor/ccm-cms-editor.ts | 130 +++++++++++++++--- 2 files changed, 124 insertions(+), 20 deletions(-) diff --git a/ccm-editor/src/main/resources/ccm-editor/ccm-editor.css b/ccm-editor/src/main/resources/ccm-editor/ccm-editor.css index 88265caa2..4d238186a 100644 --- a/ccm-editor/src/main/resources/ccm-editor/ccm-editor.css +++ b/ccm-editor/src/main/resources/ccm-editor/ccm-editor.css @@ -54,6 +54,16 @@ justify-self: center; } +.ccm-editor-dialog input.ccm-editor-missing { + + border: 1px solid #f00; +} + +.ccm-editor-dialog span.ccm-editor-missing { + + color: #f00; +} + .ccm-editor-editable { background-color: #fff; @@ -63,7 +73,9 @@ box-sizing: inherit; - height: 20em; + height: 30em; + + overflow: auto; padding: 0.5em 0.3em; } diff --git a/ccm-editor/src/main/typescript/ccm-editor/ccm-cms-editor.ts b/ccm-editor/src/main/typescript/ccm-editor/ccm-cms-editor.ts index 1b5dd3752..20e1af503 100644 --- a/ccm-editor/src/main/typescript/ccm-editor/ccm-cms-editor.ts +++ b/ccm-editor/src/main/typescript/ccm-editor/ccm-cms-editor.ts @@ -657,6 +657,7 @@ export class InsertMediaAssetCommand extends CCMEditorCommand { selectDialogElem.setAttribute("style", "display: none"); const dialogId: string = "ccm-editor-insertmedia"; + const alignmentId: string = `${dialogId}-alignment`; const captionFieldId: string = `${dialogId}-caption`; const altFieldId: string = `${dialogId}-alt`; const decorativeCheckboxId: string @@ -678,10 +679,32 @@ export class InsertMediaAssetCommand extends CCMEditorCommand { const formElem: HTMLElement = insertDialogElem .appendChild(document.createElement("form")); + const alignmentLabel: HTMLLabelElement = formElem + .appendChild(document.createElement("label")); + alignmentLabel.htmlFor = alignmentId; + alignmentLabel.textContent = "Aligment"; + const alignmentSelect: HTMLSelectElement = formElem + .appendChild(document.createElement("select")); + alignmentSelect.id = alignmentId; + alignmentSelect.size = 1; + const leftOption: HTMLOptionElement = alignmentSelect + .appendChild(document.createElement("option")); + leftOption.value = "left"; + leftOption.textContent = "Left"; + leftOption.selected = true; + const centerOption: HTMLOptionElement = alignmentSelect + .appendChild(document.createElement("option")); + centerOption.value = "center"; + centerOption.textContent = "Center"; + const rightOption: HTMLOptionElement = alignmentSelect + .appendChild(document.createElement("option")); + rightOption.value = "right"; + rightOption.textContent = "Right"; + const captionLabel: HTMLLabelElement = formElem .appendChild(document.createElement("label")); captionLabel.htmlFor = captionFieldId; - captionLabel.textContent = "Caption"; + captionLabel.textContent = "Caption *"; const captionField: HTMLInputElement = formElem .appendChild(document.createElement("input")); captionField.id = captionFieldId; @@ -692,7 +715,7 @@ export class InsertMediaAssetCommand extends CCMEditorCommand { const altLabel: HTMLLabelElement = formElem .appendChild(document.createElement("label")); altLabel.htmlFor = altFieldId; - altLabel.textContent = "Alternativ text for image"; + altLabel.textContent = "Alternativ text for image *"; const altField: HTMLInputElement = formElem .appendChild(document.createElement("input")); altField.type = "text"; @@ -753,17 +776,28 @@ export class InsertMediaAssetCommand extends CCMEditorCommand { insertButton.addEventListener("click", (event) => { event.preventDefault(); + const alignmentSelect: HTMLSelectElement = document + .getElementById(alignmentId) as HTMLSelectElement; const captionField: HTMLInputElement = document .getElementById(captionFieldId) as HTMLInputElement; + + console.log(`Inserting media asset of type "${assetType}"`); + console.log(`this.IMAGE_TYPE = ${this.IMAGE_TYPE}`); let mediaHtml: string; switch(assetType) { case this.AUDIO_TYPE: { mediaHtml = this - .generateAudioHtml("0", captionField.value); + .generateAudioHtml("0", + alignmentSelect.value, + captionField.value); + break; } case this.EXTERNAL_AUDIO_TYPE: { mediaHtml = this - .generateAudioHtml("0", captionField.value); + .generateAudioHtml("0", + alignmentSelect.value, + captionField.value); + break; } case this.EXTERNAL_VIDEO_TYPE: { const widthField: HTMLInputElement = document @@ -773,11 +807,14 @@ export class InsertMediaAssetCommand extends CCMEditorCommand { HTMLInputElement; mediaHtml = this .generateVideoHtml("0", + alignmentSelect.value, captionField.value, Number(widthField.value), Number(heightField.value)); + break; } case this.IMAGE_TYPE: { + console.log("Generating HTML for image..."); const altField: HTMLInputElement = document .getElementById(altFieldId) as HTMLInputElement; const widthField: HTMLInputElement = document @@ -791,19 +828,59 @@ export class InsertMediaAssetCommand extends CCMEditorCommand { assetUuid); if (decorativeCheckbox.checked) { + console.log("generating html for decorative image"); mediaHtml = this .generateDecorativeImageHtml( imageUrl, + alignmentSelect.value, Number(widthField.value), Number(heightField.value)); } else { + console.log("generating html for image"); + + if (captionField.value == null + || captionField.value.length === 0) { + + captionField.classList + .add("ccm-editor-missing"); + const label = document + .querySelector( + `label[for="${captionFieldId}"]`) + const span = label + .appendChild(document + .createElement("span")); + span.classList.add("ccm-editor-missing"); + span.textContent = `A caption is required`; + + return; + } + + if (altField.value == null + || altField.value.length === 0) { + + altField.classList.add("ccm-editor-missing"); + const label = document + .querySelector( + `label[for="${altFieldId}"]`); + const span = label + .appendChild(document + .createElement("span")); + span.classList.add("ccm-editor-missing"); + span.textContent = "A alternative text for the " + + "image is required"; + + return; + } + mediaHtml = this .generateImageHtml(imageUrl, - captionField.value, - altField.value, - Number(widthField.value), - Number(heightField.value)); + alignmentSelect.value, + captionField.value, + altField.value, + Number(widthField.value), + Number(heightField.value)); } + break; } case this.VIDEO_TYPE: { const widthField: HTMLInputElement = document @@ -813,16 +890,22 @@ export class InsertMediaAssetCommand extends CCMEditorCommand { HTMLInputElement; mediaHtml = this .generateVideoHtml("0", + alignmentSelect.value, captionField.value, Number(widthField.value), Number(heightField.value)); + break; } default: + console.log("No type matches."); mediaHtml = ""; + break; } document.getSelection().removeAllRanges(); document.getSelection().addRange(currentRange); + console + .log(`Calling insertHTML command for HTML: "${mediaHtml}"`); document.execCommand("insertHTML", false, mediaHtml); const bodyElem = document.getElementsByTagName("body").item(0); @@ -841,11 +924,15 @@ export class InsertMediaAssetCommand extends CCMEditorCommand { selectDialogElem.removeAttribute("style"); }); } + + const bodyElem = document.getElementsByTagName("body").item(0); + bodyElem.appendChild(fragment); } private generateDecorativeImageHtml(imageUrl: string, - width: number = -1, - height: number = -1): string { + alignment: string, + width: number = -1, + height: number = -1): string { let dimensions: string; if (width > 0) { @@ -855,16 +942,18 @@ export class InsertMediaAssetCommand extends CCMEditorCommand { dimensions = `${dimensions} height="${height}"`; } - return ``; + return ``; } private generateImageHtml(imageUrl: string, + alignment: string, caption: string, alt: string, width: number = -1, height: number = -1): string { - let dimensions: string; + let dimensions: string = ""; if (width > 0) { dimensions = `${dimensions} width="${width}"`; } @@ -872,7 +961,7 @@ export class InsertMediaAssetCommand extends CCMEditorCommand { dimensions = `${dimensions} height="${height}"`; } - return `
+ return `
${alt}
${caption}
` @@ -888,28 +977,31 @@ export class InsertMediaAssetCommand extends CCMEditorCommand { if (!(new RegExp("^/.*").test(contentSection))) { imageUrl = `${imageUrl}/`; } - imageUrl = `${imageUrl}{$contentSection}`; + imageUrl = `${imageUrl}${contentSection}`; if (!(new RegExp(".*/$").test(contentSection))) { imageUrl = `${imageUrl}/`; } - return `${imageUrl}/images/uuid-${assetUuid} - ?width=${width}&height=${height}`; + return `${imageUrl}images/uuid-${assetUuid}` + + `?width=${width}&height=${height}`; } private generateVideoHtml(videoUrl: string, + alignment: string, caption: string, width: number = -1, height: number = -1): string { - return `
+ return `
Not implemented yet
${caption}
`; } - private generateAudioHtml(audioUrl: string, caption: string): string { + private generateAudioHtml(audioUrl: string, + alignment: string, + caption: string): string { - return `
+ return `
Not implemented yet
${caption}
`;