From 1f7de1d2ef8b7470a75fa49389834047e07076fe Mon Sep 17 00:00:00 2001 From: jensp Date: Thu, 1 Feb 2018 21:00:21 +0000 Subject: [PATCH] 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 --- .../webapp/ccm-editor/ccm-editor-loader.js | 3 +- .../librecms/contentsection/rs/Assets.java | 6 +- .../main/resources/ccm-editor/ccm-editor.css | 10 +- .../typescript/ccm-editor/ccm-cms-editor.ts | 139 +++++++++++------- 4 files changed, 102 insertions(+), 56 deletions(-) diff --git a/ccm-bundle-devel-wildfly-web/src/main/webapp/ccm-editor/ccm-editor-loader.js b/ccm-bundle-devel-wildfly-web/src/main/webapp/ccm-editor/ccm-editor-loader.js index f1c5c3e45..871bbf362 100644 --- a/ccm-bundle-devel-wildfly-web/src/main/webapp/ccm-editor/ccm-editor-loader.js +++ b/ccm-bundle-devel-wildfly-web/src/main/webapp/ccm-editor/ccm-editor-loader.js @@ -24,7 +24,8 @@ requirejs(["./ccm-editor", editor.SuperscriptCommand, editor.RemoveFormatCommand, editor.InsertExternalLinkCommand, - cmseditor.InsertInternalLinkCommand + cmseditor.InsertInternalLinkCommand, + cmseditor.InsertMediaAssetCommand ] }, { diff --git a/ccm-cms/src/main/java/org/librecms/contentsection/rs/Assets.java b/ccm-cms/src/main/java/org/librecms/contentsection/rs/Assets.java index a3b8d20de..a6a289c0b 100644 --- a/ccm-cms/src/main/java/org/librecms/contentsection/rs/Assets.java +++ b/ccm-cms/src/main/java/org/librecms/contentsection/rs/Assets.java @@ -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()); 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 b9b1c3a9c..88265caa2 100644 --- a/ccm-editor/src/main/resources/ccm-editor/ccm-editor.css +++ b/ccm-editor/src/main/resources/ccm-editor/ccm-editor.css @@ -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; } 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 e039134cb..1b5dd3752 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 @@ -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}`; @@ -153,10 +150,19 @@ export class InsertInternalLinkCommand extends CCMEditorCommand { event.preventDefault(); command.fetchItems(dialogElem, - contentSectionSelect.value, - filterInput.value, - tableBody, - currentRange); + contentSectionSelect.value, + filterInput.value, + tableBody, + currentRange); + }); + clearFiltersButton.addEventListener("click", function(event){ + event.preventDefault(); + filterInput.value = ""; + command.fetchItems(dialogElem, + contentSectionSelect.value, + filterInput.value, + tableBody, + currentRange); }); command.fetchItems(dialogElem, @@ -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;