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

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
ccm-docs
jensp 2018-02-02 08:43:07 +00:00
parent 3180aebe2d
commit aad361f0d6
2 changed files with 124 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ccm-editor/src/main/resources/ccm-editor/ccm-editor.css
View File

@ -54,6 +54,16 @@
justify-self: center; 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 { .ccm-editor-editable {
background-color: #fff; background-color: #fff;
@ -63,7 +73,9 @@
box-sizing: inherit; box-sizing: inherit;
height: 20em; height: 30em;
overflow: auto;
padding: 0.5em 0.3em; padding: 0.5em 0.3em;
} }

118
ccm-editor/src/main/typescript/ccm-editor/ccm-cms-editor.ts
View File

@ -657,6 +657,7 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
selectDialogElem.setAttribute("style", "display: none"); selectDialogElem.setAttribute("style", "display: none");
const dialogId: string = "ccm-editor-insertmedia"; const dialogId: string = "ccm-editor-insertmedia";
const alignmentId: string = `${dialogId}-alignment`;
const captionFieldId: string = `${dialogId}-caption`; const captionFieldId: string = `${dialogId}-caption`;
const altFieldId: string = `${dialogId}-alt`; const altFieldId: string = `${dialogId}-alt`;
const decorativeCheckboxId: string const decorativeCheckboxId: string
@ -678,10 +679,32 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
const formElem: HTMLElement = insertDialogElem const formElem: HTMLElement = insertDialogElem
.appendChild(document.createElement("form")); .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 const captionLabel: HTMLLabelElement = formElem
.appendChild(document.createElement("label")); .appendChild(document.createElement("label"));
captionLabel.htmlFor = captionFieldId; captionLabel.htmlFor = captionFieldId;
captionLabel.textContent = "Caption"; captionLabel.textContent = "Caption *";
const captionField: HTMLInputElement = formElem const captionField: HTMLInputElement = formElem
.appendChild(document.createElement("input")); .appendChild(document.createElement("input"));
captionField.id = captionFieldId; captionField.id = captionFieldId;
@ -692,7 +715,7 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
const altLabel: HTMLLabelElement = formElem const altLabel: HTMLLabelElement = formElem
.appendChild(document.createElement("label")); .appendChild(document.createElement("label"));
altLabel.htmlFor = altFieldId; altLabel.htmlFor = altFieldId;
altLabel.textContent = "Alternativ text for image"; altLabel.textContent = "Alternativ text for image *";
const altField: HTMLInputElement = formElem const altField: HTMLInputElement = formElem
.appendChild(document.createElement("input")); .appendChild(document.createElement("input"));
altField.type = "text"; altField.type = "text";
@ -753,17 +776,28 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
insertButton.addEventListener("click", (event) => { insertButton.addEventListener("click", (event) => {
event.preventDefault(); event.preventDefault();
const alignmentSelect: HTMLSelectElement = document
.getElementById(alignmentId) as HTMLSelectElement;
const captionField: HTMLInputElement = document const captionField: HTMLInputElement = document
.getElementById(captionFieldId) as HTMLInputElement; .getElementById(captionFieldId) as HTMLInputElement;
console.log(`Inserting media asset of type "${assetType}"`);
console.log(`this.IMAGE_TYPE = ${this.IMAGE_TYPE}`);
let mediaHtml: string; let mediaHtml: string;
switch(assetType) { switch(assetType) {
case this.AUDIO_TYPE: { case this.AUDIO_TYPE: {
mediaHtml = this mediaHtml = this
.generateAudioHtml("0", captionField.value); .generateAudioHtml("0",
alignmentSelect.value,
captionField.value);
break;
} }
case this.EXTERNAL_AUDIO_TYPE: { case this.EXTERNAL_AUDIO_TYPE: {
mediaHtml = this mediaHtml = this
.generateAudioHtml("0", captionField.value); .generateAudioHtml("0",
alignmentSelect.value,
captionField.value);
break;
} }
case this.EXTERNAL_VIDEO_TYPE: { case this.EXTERNAL_VIDEO_TYPE: {
const widthField: HTMLInputElement = document const widthField: HTMLInputElement = document
@ -773,11 +807,14 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
HTMLInputElement; HTMLInputElement;
mediaHtml = this mediaHtml = this
.generateVideoHtml("0", .generateVideoHtml("0",
alignmentSelect.value,
captionField.value, captionField.value,
Number(widthField.value), Number(widthField.value),
Number(heightField.value)); Number(heightField.value));
break;
} }
case this.IMAGE_TYPE: { case this.IMAGE_TYPE: {
console.log("Generating HTML for image...");
const altField: HTMLInputElement = document const altField: HTMLInputElement = document
.getElementById(altFieldId) as HTMLInputElement; .getElementById(altFieldId) as HTMLInputElement;
const widthField: HTMLInputElement = document const widthField: HTMLInputElement = document
@ -791,19 +828,59 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
assetUuid); assetUuid);
if (decorativeCheckbox.checked) { if (decorativeCheckbox.checked) {
console.log("generating html for decorative image");
mediaHtml = this mediaHtml = this
.generateDecorativeImageHtml( .generateDecorativeImageHtml(
imageUrl, imageUrl,
alignmentSelect.value,
Number(widthField.value), Number(widthField.value),
Number(heightField.value)); Number(heightField.value));
} else { } 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 mediaHtml = this
.generateImageHtml(imageUrl, .generateImageHtml(imageUrl,
alignmentSelect.value,
captionField.value, captionField.value,
altField.value, altField.value,
Number(widthField.value), Number(widthField.value),
Number(heightField.value)); Number(heightField.value));
} }
break;
} }
case this.VIDEO_TYPE: { case this.VIDEO_TYPE: {
const widthField: HTMLInputElement = document const widthField: HTMLInputElement = document
@ -813,16 +890,22 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
HTMLInputElement; HTMLInputElement;
mediaHtml = this mediaHtml = this
.generateVideoHtml("0", .generateVideoHtml("0",
alignmentSelect.value,
captionField.value, captionField.value,
Number(widthField.value), Number(widthField.value),
Number(heightField.value)); Number(heightField.value));
break;
} }
default: default:
console.log("No type matches.");
mediaHtml = ""; mediaHtml = "";
break;
} }
document.getSelection().removeAllRanges(); document.getSelection().removeAllRanges();
document.getSelection().addRange(currentRange); document.getSelection().addRange(currentRange);
console
.log(`Calling insertHTML command for HTML: "${mediaHtml}"`);
document.execCommand("insertHTML", false, mediaHtml); document.execCommand("insertHTML", false, mediaHtml);
const bodyElem = document.getElementsByTagName("body").item(0); const bodyElem = document.getElementsByTagName("body").item(0);
@ -841,9 +924,13 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
selectDialogElem.removeAttribute("style"); selectDialogElem.removeAttribute("style");
}); });
} }
const bodyElem = document.getElementsByTagName("body").item(0);
bodyElem.appendChild(fragment);
} }
private generateDecorativeImageHtml(imageUrl: string, private generateDecorativeImageHtml(imageUrl: string,
alignment: string,
width: number = -1, width: number = -1,
height: number = -1): string { height: number = -1): string {
@ -855,16 +942,18 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
dimensions = `${dimensions} height="${height}"`; dimensions = `${dimensions} height="${height}"`;
} }
return `<img src="${imageUrl}" ${dimensions} alt="" />`; return `<img class="ccm-figure-${alignment}"
src="${imageUrl}" ${dimensions} alt="" />`;
} }
private generateImageHtml(imageUrl: string, private generateImageHtml(imageUrl: string,
alignment: string,
caption: string, caption: string,
alt: string, alt: string,
width: number = -1, width: number = -1,
height: number = -1): string { height: number = -1): string {
let dimensions: string; let dimensions: string = "";
if (width > 0) { if (width > 0) {
dimensions = `${dimensions} width="${width}"`; dimensions = `${dimensions} width="${width}"`;
} }
@ -872,7 +961,7 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
dimensions = `${dimensions} height="${height}"`; dimensions = `${dimensions} height="${height}"`;
} }
return `<figure role="group"> return `<figure role="group" class="ccm-figure-${alignment}">
<img src="${imageUrl}" ${dimensions} alt="${alt}" /> <img src="${imageUrl}" ${dimensions} alt="${alt}" />
<figcaption>${caption}</figcaption> <figcaption>${caption}</figcaption>
</figure>` </figure>`
@ -888,28 +977,31 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
if (!(new RegExp("^/.*").test(contentSection))) { if (!(new RegExp("^/.*").test(contentSection))) {
imageUrl = `${imageUrl}/`; imageUrl = `${imageUrl}/`;
} }
imageUrl = `${imageUrl}{$contentSection}`; imageUrl = `${imageUrl}${contentSection}`;
if (!(new RegExp(".*/$").test(contentSection))) { if (!(new RegExp(".*/$").test(contentSection))) {
imageUrl = `${imageUrl}/`; imageUrl = `${imageUrl}/`;
} }
return `${imageUrl}/images/uuid-${assetUuid} return `${imageUrl}images/uuid-${assetUuid}`
?width=${width}&height=${height}`; + `?width=${width}&height=${height}`;
} }
private generateVideoHtml(videoUrl: string, private generateVideoHtml(videoUrl: string,
alignment: string,
caption: string, caption: string,
width: number = -1, width: number = -1,
height: number = -1): string { height: number = -1): string {
return `<figure role="group"> return `<figure role="group" class="ccm-figure-${alignment}">
<span>Not implemented yet</span> <span>Not implemented yet</span>
<figcaption>${caption}</figcaption> <figcaption>${caption}</figcaption>
</figure>`; </figure>`;
} }
private generateAudioHtml(audioUrl: string, caption: string): string { private generateAudioHtml(audioUrl: string,
alignment: string,
caption: string): string {
return `<figure role="group"> return `<figure role="group" class="ccm-figure-${alignment}">
<span>Not implemented yet</span> <span>Not implemented yet</span>
<figcaption>${caption}</figcaption> <figcaption>${caption}</figcaption>
</figure>`; </figure>`;