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

Integrated audio node and video node into editor.

pull/10/head
Jens Pelzetter 2021-10-16 18:56:12 +02:00
parent 470cca567a
commit 618893a41f
4 changed files with 86 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml
View File

@ -879,7 +879,7 @@
<button class="btn btn-outline-dark select-video-button"
data-toggle="modal"
data-target="#librecms-video-node-select-video-dialog-">
<librecms:remixSvgIcon icon="ri-video-edit-line" />
<librecms:remixSvgIcon icon="ri-video-line" />
<span class="sr-only">#{CmsAdminMessages['cms_editor.video_node_view.select_video.label']}</span>
</button>
<div aria-hidden="true"

51
ccm-cms/src/main/scss/content-sections/_custom.scss
View File

@ -139,12 +139,15 @@ table.wor{
}
.librecms-image-node-view {
.librecms-audio-node-view,
.librecms-image-node-view,
.librecms-video-node-view {
background-color: #ededed;
position: relative;
.librecms-image-node-view-buttons {
.librecms-audio-node-view-buttons,
.librecms-image-node-view-buttons,
.librecms-video-node-view-buttons {
background-color: rgba(255,255,255,0.5);
position: absolute;
@ -158,48 +161,68 @@ table.wor{
}
}
&.librecms-image-node-width-25 {
&.librecms-audio-node-width-25,
&.librecms-image-node-width-25,
&.librecms-video-node-width-25 {
width: 25%;
}
&.librecms-image-node-width-33 {
&.librecms-audio-node-width-33,
&.librecms-image-node-width-33,
&.librecms-video-node-width-33 {
width: 33%;
}
&.librecms-image-node-width-50 {
&.librecms-audio-node-width-50,
&.librecms-image-node-width-50,
&.librecms-video-node-width-50 {
width: 50%;
}
&.librecms-image-node-width-66 {
&.librecms-audio-node-width-66,
&.librecms-image-node-width-66,
&.librecms-video-node-width-66 {
width: 66%;
}
&.librecms-image-node-width-75 {
&.librecms-audio-node-width-75,
&.librecms-image-node-width-75,
&.librecms-video-node-width-75 {
width: 75%;
}
&.librecms-image-node-width-100 {
&.librecms-audio-node-width-100,
&.librecms-image-node-width-100,
&.librecms-video-node-width-100 {
width: 100%;
}
&.librecms-image-node-align-floatleft {
&.librecms-audio-node-align-floatleft,
&.librecms-image-node-align-floatleft,
&.librecms-video-node-align-floatleft {
float: left;
}
&.librecms-image-node-align-center {
&.librecms-audio-node-align-center,
&.librecms-image-node-align-center,
&.librecms-video-node-align-center {
margin-left: auto;
margin-right: auto;
}
&.librecms-image-node-align-floatright {
&.librecms-audio-node-align-floatright,
&.librecms-image-node-align-floatright,
&.librecms-video-node-align-floatright {
float: right;
}
figure img {
figure audio, figure img, figure video {
max-width: 100%;
}
.select-image-dialog {
.select-audio-dialog,
.select-image-dialog,
.select-video-dialog {
table {
border: none;
width: 100%;

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

@ -10,7 +10,9 @@ import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
import AudioNode from "./cms-editor/audio-node";
import ImageNode from "./cms-editor/image-node";
import VideoNode from "./cms-editor/video-node";
const BUTTONS: CmsEditorButton[] = [
{
@ -547,6 +549,27 @@ const BUTTONS: CmsEditorButton[] = [
.run();
},
},
{
selector: ".tiptap-insert-audio",
command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
.focus()
.setLibreCmsAudio()
.insertContent("<p></p>")
.run();
},
can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
.chain()
.focus()
.setLibreCmsAudio()
.run();
},
},
{
selector: ".tiptap-insert-image",
command: (cmsEditor) => {
@ -568,6 +591,27 @@ const BUTTONS: CmsEditorButton[] = [
.run();
},
},
{
selector: ".tiptap-insert-video",
command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
.focus()
.setLibreCmsVideo()
.insertContent("<p></p>")
.run();
},
can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
.chain()
.focus()
.setLibreCmsVideo()
.run();
},
},
// {
// selector: "",
// command: cmsEditor => {},
@ -732,6 +776,7 @@ class CmsEditorBuilder {
const editor: Editor = new Editor({
element: canvasElement,
extensions: [
AudioNode,
Gapcursor,
ImageNode,
StarterKit,
@ -746,6 +791,7 @@ class CmsEditorBuilder {
TableRow,
TableHeader,
TableCell,
VideoNode,
],
content: variant,
});

4
ccm-cms/src/main/typescript/content-sections/cms-editor/audio-node/audio-node.ts
View File

@ -415,12 +415,12 @@ function loadAudioAssets(
"click",
(event) => {
const audioUrl = `/content-sections/info/audio/uuid-${audioAsset["uuid"]}`;
node.attrs.imgSrc = audioUrl;
node.attrs.audioSrc = audioUrl;
if (audioElem) {
audioElem.src = audioUrl;
} else {
console.error(
"img element not found."
"audio element not found."
);
}
}