From 6e0cfa22fa8b3d8153c247005adb867df2748539 Mon Sep 17 00:00:00 2001 From: jensp Date: Thu, 6 Sep 2018 10:29:38 +0000 Subject: [PATCH] CcmNG: Current progress on the image plugin for TinyMCE git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5688 8810af33-2d31-482b-a856-94f89814c4df Former-commit-id: 37fa02a4c760e90b69aa51b25c635bb3cd95c301 --- .../ccm-cms/tinymce/plugins/insertimage.js | 178 ++++++++++++++++-- 1 file changed, 166 insertions(+), 12 deletions(-) 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 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", }); }