diff --git a/ccm-cms/package-lock.json b/ccm-cms/package-lock.json index e0a624857..19610ba95 100644 --- a/ccm-cms/package-lock.json +++ b/ccm-cms/package-lock.json @@ -3115,6 +3115,15 @@ "@types/node": "*" } }, + "@types/jquery": { + "version": "3.5.5", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.5.tgz", + "integrity": "sha512-6RXU9Xzpc6vxNrS6FPPapN1SxSHgQ336WC6Jj/N8q30OiaBZ00l1GBgeP7usjVZPivSkGUfL1z/WW6TX989M+w==", + "dev": true, + "requires": { + "@types/sizzle": "*" + } + }, "@types/node": { "version": "15.0.2", "resolved": "https://registry.npmjs.org/@types/node/-/node-15.0.2.tgz", @@ -3234,6 +3243,12 @@ "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==", "dev": true }, + "@types/sizzle": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz", + "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==", + "dev": true + }, "abab": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz", diff --git a/ccm-cms/package.json b/ccm-cms/package.json index 7dc8578c2..29096e6f3 100644 --- a/ccm-cms/package.json +++ b/ccm-cms/package.json @@ -5,14 +5,14 @@ "main": "index.js", "scripts": { "build": "npm-run-all build:*:*", - "build:ccm-admin:js": "parcel build --target --dist-dir target/generated-resources/assets/@content-sections src/main/typescript/content-sections/cms-admin.ts", - "build:ccm-admin:css": "sass src/main/scss/content-sections/cms-admin.scss target/generated-resources/assets/@content-sections/cms-admin.css", - "build:cms-editor:js": "parcel build --target --dist-dir target/generated-resources/assets/@content-sections src/main/typescript/content-sections/cms-editor.ts" + "build:cms-admin:ts": "tsc", + "build:cms-admin:css": "sass src/main/scss/content-sections/cms-admin.scss target/generated-resources/assets/@content-sections/cms-admin.css" }, "author": "Jens Pelzetter", "license": "LGPL-3.0-or-later", "devDependencies": { "@parcel/transformer-typescript-tsc": "^2.0.0-beta.1", + "@types/jquery": "^3.5.5", "npm-run-all": "^4.1.5", "parcel": "^2.0.0-beta.2", "sass": "^1.32.12", diff --git a/ccm-cms/package.json.bak b/ccm-cms/package.json.bak new file mode 100644 index 000000000..7dc8578c2 --- /dev/null +++ b/ccm-cms/package.json.bak @@ -0,0 +1,32 @@ +{ + "name": "ccm-cms", + "version": "7.0.0", + "description": "JavaScript stuff for ccm-cms", + "main": "index.js", + "scripts": { + "build": "npm-run-all build:*:*", + "build:ccm-admin:js": "parcel build --target --dist-dir target/generated-resources/assets/@content-sections src/main/typescript/content-sections/cms-admin.ts", + "build:ccm-admin:css": "sass src/main/scss/content-sections/cms-admin.scss target/generated-resources/assets/@content-sections/cms-admin.css", + "build:cms-editor:js": "parcel build --target --dist-dir target/generated-resources/assets/@content-sections src/main/typescript/content-sections/cms-editor.ts" + }, + "author": "Jens Pelzetter", + "license": "LGPL-3.0-or-later", + "devDependencies": { + "@parcel/transformer-typescript-tsc": "^2.0.0-beta.1", + "npm-run-all": "^4.1.5", + "parcel": "^2.0.0-beta.2", + "sass": "^1.32.12", + "typescript": "^4.2.4" + }, + "dependencies": { + "@tiptap/core": "^2.0.0-beta.46", + "@tiptap/starter-kit": "^2.0.0-beta.43", + "bootstrap": "^4.6.0", + "bootstrap-icons": "^1.4.1", + "jquery": "^3.6.0", + "popper.js": "^1.16.1" + }, + "targets": { + "main": false + } +} diff --git a/ccm-cms/src/main/typescript/content-sections/cms-assetpicker.ts b/ccm-cms/src/main/typescript/content-sections/cms-assetpicker.ts index c9f45a204..864047f8d 100644 --- a/ccm-cms/src/main/typescript/content-sections/cms-assetpicker.ts +++ b/ccm-cms/src/main/typescript/content-sections/cms-assetpicker.ts @@ -26,14 +26,14 @@ async function initAssetPicker(assetPickerElem: Element) { const rowTemplate = assetPickerElem.querySelector( `#${assetPickerId}-row` - ); + ) as HTMLTemplateElement; console.log(`rowTemplate = ${rowTemplate}`); const tbody = assetPickerElem.querySelector("tbody"); console.log(`tbody = ${tbody}`); for (const asset of assets) { - const row = rowTemplate.cloneNode(true) as Element; + const row = rowTemplate?.content.cloneNode(true) as Element; const colName = row.querySelector(".col-name"); const colType = row.querySelector(".col-type"); const selectButton = row.querySelector(".col-action button"); @@ -43,15 +43,19 @@ async function initAssetPicker(assetPickerElem: Element) { console.log(`colType = ${colType}`); console.log(`selectButton = ${selectButton}`); - colName.textContent = asset["name"]; - colType.textContent = asset["type"]; - selectButton.setAttribute("data-assetuuid", asset["uuid"]); + if (colName) { + colName.textContent = asset["name"]; + } + if (colType) { + colType.textContent = asset["type"]; + } + selectButton?.setAttribute("data-assetuuid", asset["uuid"]); - selectButton.addEventListener("click", event => + selectButton?.addEventListener("click", event => selectAsset(event, assetPickerElem) ); - tbody.appendChild(row); + tbody?.appendChild(row); } } else { console.error( @@ -74,6 +78,10 @@ function getAssetType(assetPickerElem: Element) { async function selectAsset(event: Event, assetPickerElem: Element) { const selectButton = event.currentTarget as Element; const assetUuid = selectButton.getAttribute("data-assetuuid"); + if (!assetUuid) { + console.error("assetUuid is null"); + return; + } console.log(`selectButton = ${selectButton}`); console.log(`assetUuid = ${assetUuid}`); @@ -81,7 +89,10 @@ async function selectAsset(event: Event, assetPickerElem: Element) { const assetPickerParam = assetPickerElem.querySelector( ".assetpicker-param" ) as HTMLInputElement; - console.log(`assetPickerParam = ${assetPickerParam}`); + if (!assetPickerParam) { + console.error("assetPickerParam is null"); + return; + } assetPickerParam.value = assetUuid; const form = assetPickerElem.querySelector("form") as HTMLFormElement; diff --git a/ccm-cms/src/main/typescript/content-sections/cms-editor.ts b/ccm-cms/src/main/typescript/content-sections/cms-editor.ts index f1a3aceda..f81a18964 100644 --- a/ccm-cms/src/main/typescript/content-sections/cms-editor.ts +++ b/ccm-cms/src/main/typescript/content-sections/cms-editor.ts @@ -236,7 +236,8 @@ function closeEditor(event: Event, editor: Editor, editDialogId: string) { editor.chain().clearContent(); editor.destroy(); - $(`#${editDialogId}`).modal("toggle"); + const editDialog = $(`#${editDialogId}`) as any; + editDialog.modal("toggle"); } async function fetchVariant(fromUrl: string) { @@ -303,14 +304,38 @@ async function showEditDialog(event: Event) { const target = event.currentTarget as Element; const locale = target.getAttribute("data-locale"); + if (!locale) { + console.error("locale is null"); + return; + } const variantUrl = target.getAttribute("data-variant-url"); + if (variantUrl == null) { + console.error("variantUrl is null"); + return; + } const editDialogId = target.getAttribute("data-edit-dialog"); + if (!editDialogId) { + console.error("editDialogId is null"); + return; + } const saveUrl = target.getAttribute("data-save-url"); + if (!saveUrl) { + console.error("saveUrl is null"); + return; + } const wordCountUrl = target.getAttribute("data-wordcount-url"); + if (!wordCountUrl) { + console.error("wordCountUrl is null"); + return; + } const variant = await fetchVariant(variantUrl); const editDialog = document.querySelector(`#${editDialogId}`); + if (!editDialog) { + console.error("editDialog is null"); + return; + } const tiptapDiv = editDialog.querySelector( ".modal-body .cms-tiptap-editor" ); @@ -325,28 +350,42 @@ async function showEditDialog(event: Event) { content: variant }); - initEditorButtons( - editor, - document.querySelector(".cms-tiptap-editor-buttons") + const editorButtons = document.querySelector(".cms-tiptap-editor-buttons"); + if (!editorButtons) { + console.error("editorButtons are null"); + return; + } + initEditorButtons(editor, editorButtons); + + const editDialogHeader = editDialog.querySelector(".modal-header .close"); + if (editDialogHeader) { + editDialogHeader.addEventListener("click", event => + closeEditor(event, editor, editDialogId) + ); + } + const cancelButton = editDialog.querySelector( + ".modal-footer .cms-editor-cancel-button" + ); + if (!cancelButton) { + console.error("cancelButton is null"); + return; + } + cancelButton.addEventListener("click", event => + closeEditor(event, editor, editDialogId) + ); + const editButton = editDialog.querySelector( + ".modal-footer .cms-editor-save-button" + ); + if (!editButton) { + console.error("editButton is null"); + return; + } + editButton.addEventListener("click", event => + save(event, editor, editDialogId, saveUrl, locale, wordCountUrl) ); - editDialog - .querySelector(".modal-header .close") - .addEventListener("click", event => - closeEditor(event, editor, editDialogId) - ); - editDialog - .querySelector(".modal-footer .cms-editor-cancel-button") - .addEventListener("click", event => - closeEditor(event, editor, editDialogId) - ); - editDialog - .querySelector(".modal-footer .cms-editor-save-button") - .addEventListener("click", event => - save(event, editor, editDialogId, saveUrl, locale, wordCountUrl) - ); - - $(`#${editDialogId}`).modal("toggle"); + const editDialogJquery = $(`#${editDialogId}`) as any; + editDialogJquery.modal("toggle"); } async function save( @@ -380,16 +419,19 @@ async function save( showSaveFailedErrMessage(err); } - $(`#${editDialogId}`).modal("toggle"); + const editDialogJquery = $(`#${editDialogId}`) as any; + editDialogJquery.modal("toggle"); const wordCount = await fetchWordCount(wordCountUrl); const wordCountSpan = document.querySelector( `tr#variant-${locale} .wordcount` ); - wordCountSpan.textContent = wordCount; + if (wordCountSpan) { + wordCountSpan.textContent = wordCount; + } } -function showLoadVariantFailedErrMessage(err) { +function showLoadVariantFailedErrMessage(err: string) { showMessage("#cms-editor-msg-variant-load-failed"); console.error(err); } @@ -402,10 +444,10 @@ function showLoadVariantFailedMessage(status: number, statusText: string) { function showMessage(messageId: string) { const template = document.querySelector(messageId) as HTMLTemplateElement; const msg = template.content.cloneNode(true); - document.querySelector(".cms-editor-messages").append(msg); + document.querySelector(".cms-editor-messages")?.append(msg); } -function showSaveFailedErrMessage(err) { +function showSaveFailedErrMessage(err: string) { showMessage("#cms-editor-msg-save-failed"); console.error(err); } @@ -424,15 +466,33 @@ async function showViewDialog(event: Event) { const target = event.currentTarget as Element; const variantUrl = target.getAttribute("data-variant-url"); + if (!variantUrl) { + console.error("variantUrl is null"); + return; + } const viewDialogId = target.getAttribute("data-view-dialog"); const variant = await fetchVariant(variantUrl); + if (!variant) { + console.error("variant is null"); + return; + } const viewDialog = document.querySelector(`#${viewDialogId}`); + if (!viewDialog) { + console.error("viewDialog is null"); + return; + } const viewDialogBody = viewDialog.querySelector(".modal-body"); + if (!viewDialogBody) { + console.error("viewDialogBody is null"); + return; + } viewDialogBody.innerHTML = variant; - $(`#${viewDialogId}`).modal("toggle"); + + const viewDialogJquery = $(`#${viewDialogId}`) as any; + viewDialogJquery.modal("toggle"); } diff --git a/ccm-cms/tsconfig.json b/ccm-cms/tsconfig.json index b6150ddfc..805927126 100644 --- a/ccm-cms/tsconfig.json +++ b/ccm-cms/tsconfig.json @@ -1,8 +1,17 @@ { "compilerOptions": { + "declaration": true, "lib": [ "DOM", "ES2016" - ] - } + ], + "module": "commonjs", + "moduleResolution": "node", + "outDir": "target/generated-resources/assets/@content-sections", + "sourceMap": true, + "strict": true, + }, + "include": [ + "src/main/typescript/**/*" + ] } \ No newline at end of file