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

CCM NG: Optimisations and bug fixes for the media assets command for the ccm-editor 

git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5228 8810af33-2d31-482b-a856-94f89814c4df
jensp 2018-02-01 21:00:21 +00:00
parent 9ede8c293a
commit 1f7de1d2ef
4 changed files with 102 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ccm-bundle-devel-wildfly-web/src/main/webapp/ccm-editor/ccm-editor-loader.js
View File

@ -24,7 +24,8 @@ requirejs(["./ccm-editor",
editor.SuperscriptCommand, editor.SuperscriptCommand,
editor.RemoveFormatCommand, editor.RemoveFormatCommand,
editor.InsertExternalLinkCommand, editor.InsertExternalLinkCommand,
cmseditor.InsertInternalLinkCommand cmseditor.InsertInternalLinkCommand,
cmseditor.InsertMediaAssetCommand
] ]
}, },
{ {

6
ccm-cms/src/main/java/org/librecms/contentsection/rs/Assets.java
View File

@ -128,9 +128,11 @@ public class Assets {
result.put("uuid", asset.getUuid()); result.put("uuid", asset.getUuid());
result.put("name", asset.getDisplayName());
result.put("title", result.put("title",
asset.getTitle().getValue(globalizationHelper globalizationHelper
.getNegotiatedLocale())); .getValueFromLocalizedString(asset.getTitle()));
result.put("type", result.put("type",
asset.getClass().getName()); asset.getClass().getName());

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

@ -68,14 +68,18 @@
padding: 0.5em 0.3em; padding: 0.5em 0.3em;
} }
.ccm-editor-error { .ccm-editor-selectdialog .ccm-editor-error {
color: #f00; color: #f00;
border: 2px solid #ff0; display: block;
border-radius: 0.4em;
} }
.ccm-editor-selectdialog .ccm-editor-error i.fa-warning {
font-size: 4em;
}
.ccm-editor-hidden { .ccm-editor-hidden {
display: none; display: none;
} }

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

@ -73,18 +73,9 @@ export class InsertInternalLinkCommand extends CCMEditorCommand {
const applyFiltersButton: HTMLElement = filterForm const applyFiltersButton: HTMLElement = filterForm
.appendChild(document.createElement("button")); .appendChild(document.createElement("button"));
applyFiltersButton.textContent = "Apply filters"; applyFiltersButton.textContent = "Apply filters";
applyFiltersButton.addEventListener("click", function(event){
event.preventDefault();
return false;
});
const clearFiltersButton: HTMLElement = filterForm const clearFiltersButton: HTMLElement = filterForm
.appendChild(document.createElement("button")); .appendChild(document.createElement("button"));
clearFiltersButton.textContent = "Clear filters"; clearFiltersButton.textContent = "Clear filters";
clearFiltersButton.addEventListener("click", function(event){
event.preventDefault();
filterInput.value = "";
return false;
});
const table: HTMLElement = dialogElem const table: HTMLElement = dialogElem
.appendChild(document.createElement("table")); .appendChild(document.createElement("table"));
@ -127,6 +118,9 @@ export class InsertInternalLinkCommand extends CCMEditorCommand {
} else { } else {
const errorMsgElement: HTMLElement = dialogElem const errorMsgElement: HTMLElement = dialogElem
.appendChild(document.createElement("div")); .appendChild(document.createElement("div"));
const warningElem: HTMLElement = errorMsgElement
.appendChild(document.createElement("i"));
warningElem.classList.add("fa", "fa-warning");
errorMsgElement.classList.add("ccm-editor-error"); errorMsgElement.classList.add("ccm-editor-error");
errorMsgElement.textContent = `Failed to fetch available errorMsgElement.textContent = `Failed to fetch available
content sections from "${sectionsUrl}". Status: ${response.status}. content sections from "${sectionsUrl}". Status: ${response.status}.
@ -136,6 +130,9 @@ export class InsertInternalLinkCommand extends CCMEditorCommand {
(failure) => { (failure) => {
const errorMsgElement: HTMLElement = dialogElem const errorMsgElement: HTMLElement = dialogElem
.appendChild(document.createElement("div")); .appendChild(document.createElement("div"));
const warningElem: HTMLElement = errorMsgElement
.appendChild(document.createElement("i"));
warningElem.classList.add("fa", "fa-warning");
errorMsgElement.classList.add("ccm-editor-error"); errorMsgElement.classList.add("ccm-editor-error");
errorMsgElement.textContent = `Failed to fetch available errorMsgElement.textContent = `Failed to fetch available
content sections from "${sectionsUrl}". Failure: ${failure}`; content sections from "${sectionsUrl}". Failure: ${failure}`;
@ -153,10 +150,19 @@ export class InsertInternalLinkCommand extends CCMEditorCommand {
event.preventDefault(); event.preventDefault();
command.fetchItems(dialogElem, command.fetchItems(dialogElem,
contentSectionSelect.value, contentSectionSelect.value,
filterInput.value, filterInput.value,
tableBody, tableBody,
currentRange); currentRange);
});
clearFiltersButton.addEventListener("click", function(event){
event.preventDefault();
filterInput.value = "";
command.fetchItems(dialogElem,
contentSectionSelect.value,
filterInput.value,
tableBody,
currentRange);
}); });
command.fetchItems(dialogElem, command.fetchItems(dialogElem,
@ -231,12 +237,16 @@ export class InsertInternalLinkCommand extends CCMEditorCommand {
const errorMsgElement: HTMLElement = dialogElem const errorMsgElement: HTMLElement = dialogElem
.insertBefore(document.createElement("div"), .insertBefore(document.createElement("div"),
itemsTableBodyElem.parentNode); itemsTableBodyElem.parentNode);
const warningElem: HTMLElement = errorMsgElement
.appendChild(document.createElement("i"));
warningElem.classList.add("fa", "fa-warning");
errorMsgElement.classList.add("ccm-editor-error"); errorMsgElement.classList.add("ccm-editor-error");
errorMsgElement.textContent = `Failed to fetch items for errorMsgElement.appendChild(document.createTextNode(
`Failed to fetch items for
content section "${contentSection}" and query "${query}" content section "${contentSection}" and query "${query}"
from "${itemsUrl}". from "${itemsUrl}".
Status code: ${response.status}. Status code: ${response.status}.
Status text: ${response.statusText}`; Status text: ${response.statusText}`));
} }
}, },
(failure) => { (failure) => {
@ -245,6 +255,9 @@ export class InsertInternalLinkCommand extends CCMEditorCommand {
const errorMsgElement: HTMLElement = dialogElem const errorMsgElement: HTMLElement = dialogElem
.insertBefore(document.createElement("div"), .insertBefore(document.createElement("div"),
itemsTableBodyElem.parentNode); itemsTableBodyElem.parentNode);
const warningElem: HTMLElement = errorMsgElement
.appendChild(document.createElement("i"));
warningElem.classList.add("fa", "fa-warning");
errorMsgElement.classList.add("ccm-editor-error"); errorMsgElement.classList.add("ccm-editor-error");
errorMsgElement.textContent = `Failed to fetch items for errorMsgElement.textContent = `Failed to fetch items for
content section "${contentSection}" and query "${query}" content section "${contentSection}" and query "${query}"
@ -296,13 +309,13 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
private button: HTMLElement; private button: HTMLElement;
private IMAGE_TYPE: string = "org.libreccm.assets.ImageAsset"; private IMAGE_TYPE: string = "org.librecms.assets.Image";
private VIDEO_TYPE: string = "org.libreccm.assets.VideoAsset"; private VIDEO_TYPE: string = "org.librecms.assets.VideoAsset";
private EXTERNAL_VIDEO_TYPE: string private EXTERNAL_VIDEO_TYPE: string
= "org.libreccm.assets.ExternalVideoAsset"; = "org.librecms.assets.ExternalVideoAsset";
private AUDIO_TYPE: string = "org.libreccm.assets.Audio"; private AUDIO_TYPE: string = "org.librecms.assets.Audio";
private EXTERNAL_AUDIO_TYPE: string private EXTERNAL_AUDIO_TYPE: string
= "org.libreccm.assets.ExternalAudioAsset"; = "org.librecms.assets.ExternalAudioAsset";
constructor(editor: CCMEditor, settings: any) { constructor(editor: CCMEditor, settings: any) {
@ -325,7 +338,7 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
const command: InsertMediaAssetCommand = this; const command: InsertMediaAssetCommand = this;
this.button.addEventListener("click", function() { this.button.addEventListener("click", (event) => {
event.preventDefault(); event.preventDefault();
@ -409,15 +422,11 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
filterInput.setAttribute("type", "text"); filterInput.setAttribute("type", "text");
const applyFiltersButton: HTMLElement = filterForm const applyFiltersButton: HTMLElement = filterForm
.appendChild(document.createElement("button")); .appendChild(document.createElement("button"));
applyFiltersButton.textContent = "Clear filters"; applyFiltersButton.textContent = "Apply filters";
const clearFiltersButton: HTMLElement = filterForm const clearFiltersButton: HTMLElement = filterForm
.appendChild(document.createElement("button")); .appendChild(document.createElement("button"));
clearFiltersButton.textContent = "Clear filters"; clearFiltersButton.textContent = "Clear filters";
clearFiltersButton.addEventListener("click", function(event){
event.preventDefault();
filterInput.value = "";
});
const table: HTMLElement = dialogElem const table: HTMLElement = dialogElem
.appendChild(document.createElement("table")); .appendChild(document.createElement("table"));
@ -437,11 +446,11 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
const tableBody: HTMLElement = table const tableBody: HTMLElement = table
.appendChild(document.createElement("tbody")); .appendChild(document.createElement("tbody"));
const contextPrefix = editor.getDataAttribute("content-prefix"); const contextPrefix = editor.getDataAttribute("context-prefix");
// Get content sections // Get content sections
const currentSection = editor const currentSection = editor
.getDataAttribute("current-contentsection-primaryurl"); .getDataAttribute("current-contentsection-primaryurl");
const sectionsUrl = contextPrefix + "/content-sections/"; const sectionsUrl = `${contextPrefix}/content-sections/`;
fetch(sectionsUrl, { credentials: "include" }).then((response) => { fetch(sectionsUrl, { credentials: "include" }).then((response) => {
if (response.ok) { if (response.ok) {
@ -463,7 +472,8 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
.appendChild(document.createElement("div")); .appendChild(document.createElement("div"));
errorMsgElement.classList.add("ccm-editor-error"); errorMsgElement.classList.add("ccm-editor-error");
errorMsgElement.textContent = `Failed to fetch available errorMsgElement.textContent = `Failed to fetch available
content sections. Status: ${response.status}. content sections from "${sectionsUrl}".
Status: ${response.status}.
Status text: ${response.statusText}`; Status text: ${response.statusText}`;
} }
}, },
@ -472,49 +482,72 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
.appendChild(document.createElement("div")); .appendChild(document.createElement("div"));
errorMsgElement.classList.add("ccm-editor-error"); errorMsgElement.classList.add("ccm-editor-error");
errorMsgElement.textContent = `Failed to fetch available errorMsgElement.textContent = `Failed to fetch available
content sections. Failure: ${failure}`; content sections from "${sectionsUrl}". Failure: ${failure}`;
}); });
contentSectionSelect.addEventListener("change", (event) => { contentSectionSelect.addEventListener("change", (event) => {
event.preventDefault(); event.preventDefault();
command.fetchAssets(dialogElem, command.fetchAssets(dialogElem,
contentSectionSelect, contentSectionSelect.value,
typeSelect, typeSelect.value,
filterInput, filterInput.value,
tableBody, tableBody,
currentRange); currentRange);
}); });
typeSelect.addEventListener("change", (event) => { typeSelect.addEventListener("change", (event) => {
event.preventDefault(); event.preventDefault();
command.fetchAssets(dialogElem, command.fetchAssets(dialogElem,
contentSectionSelect, contentSectionSelect.value,
typeSelect, typeSelect.value,
filterInput, filterInput.value,
tableBody, tableBody,
currentRange); currentRange);
}); });
applyFiltersButton.addEventListener("click", (event) => { applyFiltersButton.addEventListener("click", (event) => {
event.preventDefault(); event.preventDefault();
command.fetchAssets(dialogElem, command.fetchAssets(dialogElem,
contentSectionSelect, contentSectionSelect.value,
typeSelect, typeSelect.value,
filterInput, filterInput.value,
tableBody, tableBody,
currentRange); currentRange);
}); });
clearFiltersButton.addEventListener("click", function(event){
event.preventDefault();
filterInput.value = "";
command.fetchAssets(dialogElem,
contentSectionSelect.value,
typeSelect.value,
filterInput.value,
tableBody,
currentRange);
});
command.fetchAssets(dialogElem,
currentSection,
command.IMAGE_TYPE,
null,
tableBody,
currentRange);
const bodyElem = document.getElementsByTagName("body").item(0);
bodyElem.appendChild(dialogFragment);
}); });
} }
private fetchAssets(dialogElem: HTMLElement, private fetchAssets(dialogElem: HTMLElement,
contentSectionSelect: HTMLSelectElement, contentSection: string,
typeSelect: HTMLSelectElement, type: string,
filterField: HTMLInputElement, query: string,
resultsTableBody: HTMLElement, resultsTableBody: HTMLElement,
currentRange: Range): void { currentRange: Range): void {
const assetsUrl = this.buildAssetsUrl(contentSectionSelect.value, console.log(`selected contentsection: ${contentSection}`);
typeSelect.value,
filterField.value); const assetsUrl = this.buildAssetsUrl(contentSection,
type,
query);
fetch(assetsUrl, { credentials: "include" }).then((response) => { fetch(assetsUrl, { credentials: "include" }).then((response) => {
@ -544,8 +577,8 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
this.insertMedia( this.insertMedia(
dialogElem, dialogElem,
this.editor this.editor
.getDataAttribute("content-prefix"), .getDataAttribute("context-prefix"),
contentSectionSelect.value, contentSection,
asset.uuid, asset.uuid,
asset.title, asset.title,
asset.type, asset.type,
@ -554,7 +587,7 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
}); });
dataType.textContent = asset.typeLabel; dataType.textContent = asset.typeLabel;
dataType.textContent = asset.place; dataPlace.textContent = asset.place;
} }
}, },
(failure) => { (failure) => {
@ -589,7 +622,10 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
private buildAssetsUrl(contentSection: string, private buildAssetsUrl(contentSection: string,
type: string, type: string,
query?: string): string { query?: string): string {
const contextPrefix = this.editor.getDataAttribute("content-prefix");
const contextPrefix = this.editor.getDataAttribute("context-prefix");
console.log(`building assetsUrl for contentSection = ${contentSection}`);
let url: string = `${contextPrefix}/content-sections`; let url: string = `${contextPrefix}/content-sections`;
if (!(new RegExp("^/.*").test(contentSection))) { if (!(new RegExp("^/.*").test(contentSection))) {
@ -599,8 +635,11 @@ export class InsertMediaAssetCommand extends CCMEditorCommand {
if (!(new RegExp(".*/$").test(url))) { if (!(new RegExp(".*/$").test(url))) {
url = `${url}/` url = `${url}/`
} }
url = `${url}assets?type=${type}`;
if (query) { if (query) {
url = `${url}?query=${query}`; url = `${url}&query=${query}`;
} }
return url; return url;