diff --git a/ccm-cms-tinymce/src/main/resources/scripts/ccm-cms/tinymce/plugins/insertimage.js b/ccm-cms-tinymce/src/main/resources/scripts/ccm-cms/tinymce/plugins/insertimage.js
index 3c5824456..721f61ea6 100644
--- a/ccm-cms-tinymce/src/main/resources/scripts/ccm-cms/tinymce/plugins/insertimage.js
+++ b/ccm-cms-tinymce/src/main/resources/scripts/ccm-cms/tinymce/plugins/insertimage.js
@@ -30,6 +30,19 @@ function openDialog(editor) {
console.log("Opening dialog");
+ const selectedImage = {
+
+ selectedUuid: undefined,
+
+ get imageUuid() {
+ this.selectedUuid;
+ },
+ set imageUuid(value) {
+ this.selectedUuid = value;
+ console.log(`Set imageUuid to ${this.imageUuid}`);
+ },
+ };
+
editor.windowManager.open({
body: [
{
@@ -47,7 +60,7 @@ function openDialog(editor) {
{
name: "browse",
onclick: function() {
- openBrowseDialog(editor);
+ openBrowseDialog(editor, selectedImage);
},
text: "Browse",
type: "button",
@@ -107,7 +120,7 @@ function openDialog(editor) {
},
],
onsubmit: function(event) {
-
+ console.log(selectedImage.imageUuid);
},
title: "Insert image",
});
@@ -115,28 +128,169 @@ function openDialog(editor) {
console.log("Dialog opened.");
}
-function openBrowseDialog(editor) {
+function openBrowseDialog(editor, selectedImage) {
editor.windowManager.open({
-
body: [
{
- items: [
- {
- text: "foo",
- type: "label",
- }
- ],
+ // items: [
+ // {
+ // html: '
',
+ // name: "imageList",
+ // onPostRender: function() {
+ // console.log(`contentSection: ${editor.getParam("contentsection")}`);
+ // console.log(`contextPrefix: ${editor.getParam("contextprefix")}`);
+ //
+ // const contextPrefix = editor.getParam("contextprefix");
+ // const contentSection = editor.getParam("contentsection");
+ //
+ //
+ //
+ // },
+ // type: "container",
+ // }
+ // ],
layout: "flow",
- minHeigth: 400,
- minWidth: 400,
+ minHeight: 400,
+ minWidth: 600,
+ onClick: function(event) {
+
+ console.log("Click in Image Container...");
+ console.log(`...on image ${event.target.getAttribute("data-uuid")}`);
+ selectedImage.imageUuid = event.target.getAttribute("data-uuid");
+ editor.windowManager.close();
+ },
onPostRender: function() {
+
console.log(`contentSection: ${editor.getParam("contentsection")}`);
console.log(`contextPrefix: ${editor.getParam("contextprefix")}`);
+
+ const contextPrefix = editor.getParam("contextprefix");
+ const contentSection = editor.getParam("contentsection");
+
+ // console.log(`this.find(#imageList) = ${JSON.stringify(this.find("#imageList"))}`);
+ // this.find("#imageList").innerHtml("");
+
+ // const Throbber = tinymce.ui.Factory.get("Throbber");
+ // this.append(new tinymce.ui.Throbber(this.getContainerElm()));
+
+ console.log(`containerElm = ${this.getEl()}`);
+ const throbber = new tinymce.ui.Throbber(this.getEl());
+ throbber.show();
+ // const throbber = tinymce.ui.Factory.create({
+ // elm: this,
+ // type: "Throbber"});
+ // this.append(throbber);
+
+ const url = `${contextPrefix}/content-sections`
+ + `${contentSection}assets/`
+ + `?type=org.librecms.assets.Image`;
+ const requestInit = {
+ credentials: "same-origin",
+ method: "GET",
+ };
+ fetch(url, requestInit)
+ .then((response) => {
+ if (response.ok) {
+ response
+ .json()
+ .then((data) => {
+
+ // console.log(`imageList = ${this.find("#imageList")}`);
+ // console.log(JSON.stringify(this.find("#imageList")));
+
+ // let imageList = `Found ${data.length} images`;
+ // imageList = imageList + "";
+ const images = [];
+ for(const image of data) {
+ images.push(
+ `\
+
- \
+
\
+ \
+
- \
+
\
+ \
+
- Title
\
+ - ${image.title}
\
+ \
+ \
+
- Filename
\
+ - ${image.properties.filename}
\
+ \
+ \
+
- Width
\
+ - ${image.properties.width}
\
+ \
+ \
+
- Height
\
+ - ${image.properties.height}
\
+ \
+
\
+ \
+
`);
+ }
+ // imageList = imageList + "
";
+
+ const html = `Found ${data.length} images\
+ \
+ ${images.join("\n")}\
+
`;
+
+ this.innerHtml(html);
+ throbber.hide();
+ // for(const property of dialog.find("#imageList").getOwnPropertyNames()) {
+ // console.log(`imageList.${propery}`);
+ // }
+ // console.log(`imageList.getEl = ${dialog.find("#imageList").getEl}`);
+ // const imageList = dialog.find("#imageList").getEl();
+ //
+ // for(const image of data) {
+ // console.log(image.name);
+ // imageList.append({
+ // html: `${image.name}`,
+ // });
+ // }
+ })
+ .catch((error) => {
+ throbber.hide();
+ editor.notificationManager.open({
+ text: `Failed to retrieve available images: `
+ + ` ${error}`,
+ type: "error",
+ });
+ });
+ } else {
+ throbber.hide();
+ editor.notificationManager.open({
+ text: `Failed to retrieve images: `
+ + `Status: ${response.status} `
+ + `${response.statusText}`
+ });
+ }
+ })
+ .catch((error) => {
+ throbber.hide();
+ editor.notificationManager.open({
+ text: `Failed to retrieve available images: `
+ + ` ${error}`,
+ type: "error",
+ });
+ });
},
+ style: "overflow: auto",
type: "container",
}
],
+ minWidth: 600,
+ minHeight: 400,
+ // onSubmit: function() {
+ // selectedImage.imageUuid = "0000-0000-0000-0000";
+ // },
title: "Select image",
});
}