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
ccm-docs
jensp 2018-02-01 21:00:21 +00:00
parent a236e2032e
commit 3180aebe2d
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.RemoveFormatCommand,
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("name", asset.getDisplayName());
result.put("title",
asset.getTitle().getValue(globalizationHelper
.getNegotiatedLocale()));
globalizationHelper
.getValueFromLocalizedString(asset.getTitle()));
result.put("type",
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;
}
.ccm-editor-error {
.ccm-editor-selectdialog .ccm-editor-error {
color: #f00;
border: 2px solid #ff0;
border-radius: 0.4em;
display: block;
}
.ccm-editor-selectdialog .ccm-editor-error i.fa-warning {
font-size: 4em;
}
.ccm-editor-hidden {
display: none;
}

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