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

Some improvements for TypeScript building

pull/10/head
Jens Pelzetter 2021-06-07 20:32:19 +02:00
parent 864d3ca94e
commit 95e3e5d073
6 changed files with 167 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ccm-cms/package-lock.json generated
View File

@ -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",

6
ccm-cms/package.json
View File

@ -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",

32
ccm-cms/package.json.bak 100644
View File

@ -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
}
}

23
ccm-cms/src/main/typescript/content-sections/cms-assetpicker.ts
View File

@ -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}`);
if (colName) {
colName.textContent = asset["name"];
}
if (colType) {
colType.textContent = asset["type"];
selectButton.setAttribute("data-assetuuid", asset["uuid"]);
}
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;

100
ccm-cms/src/main/typescript/content-sections/cms-editor.ts
View File

@ -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);
editDialog
.querySelector(".modal-header .close")
.addEventListener("click", event =>
const editDialogHeader = editDialog.querySelector(".modal-header .close");
if (editDialogHeader) {
editDialogHeader.addEventListener("click", event =>
closeEditor(event, editor, editDialogId)
);
editDialog
.querySelector(".modal-footer .cms-editor-cancel-button")
.addEventListener("click", event =>
}
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)
);
editDialog
.querySelector(".modal-footer .cms-editor-save-button")
.addEventListener("click", event =>
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)
);
$(`#${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`
);
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");
}

11
ccm-cms/tsconfig.json
View File

@ -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/**/*"
]
}
}