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: 37fa02a4c7
pull/2/head
jensp
parent
a1e9f32490
commit
6e0cfa22fa
|
|
@ -30,6 +30,19 @@ function openDialog(editor) {
|
||||||
|
|
||||||
console.log("Opening dialog");
|
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({
|
editor.windowManager.open({
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
|
|
@ -47,7 +60,7 @@ function openDialog(editor) {
|
||||||
{
|
{
|
||||||
name: "browse",
|
name: "browse",
|
||||||
onclick: function() {
|
onclick: function() {
|
||||||
openBrowseDialog(editor);
|
openBrowseDialog(editor, selectedImage);
|
||||||
},
|
},
|
||||||
text: "Browse",
|
text: "Browse",
|
||||||
type: "button",
|
type: "button",
|
||||||
|
|
@ -107,7 +120,7 @@ function openDialog(editor) {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
onsubmit: function(event) {
|
onsubmit: function(event) {
|
||||||
|
console.log(selectedImage.imageUuid);
|
||||||
},
|
},
|
||||||
title: "Insert image",
|
title: "Insert image",
|
||||||
});
|
});
|
||||||
|
|
@ -115,28 +128,169 @@ function openDialog(editor) {
|
||||||
console.log("Dialog opened.");
|
console.log("Dialog opened.");
|
||||||
}
|
}
|
||||||
|
|
||||||
function openBrowseDialog(editor) {
|
function openBrowseDialog(editor, selectedImage) {
|
||||||
|
|
||||||
editor.windowManager.open({
|
editor.windowManager.open({
|
||||||
|
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
items: [
|
// items: [
|
||||||
{
|
// {
|
||||||
text: "foo",
|
// html: '<ul></ul>',
|
||||||
type: "label",
|
// 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",
|
layout: "flow",
|
||||||
minHeigth: 400,
|
minHeight: 400,
|
||||||
minWidth: 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() {
|
onPostRender: function() {
|
||||||
|
|
||||||
console.log(`contentSection: ${editor.getParam("contentsection")}`);
|
console.log(`contentSection: ${editor.getParam("contentsection")}`);
|
||||||
console.log(`contextPrefix: ${editor.getParam("contextprefix")}`);
|
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("<ul><li>bar</li><li>barbar</li></ul>");
|
||||||
|
|
||||||
|
// 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</pre>`;
|
||||||
|
// imageList = imageList + "<ul>";
|
||||||
|
const images = [];
|
||||||
|
for(const image of data) {
|
||||||
|
images.push(
|
||||||
|
`<div style="display: flex; margin-top: 10px; margin-bottom: 10px;">\
|
||||||
|
<dt style="margin-right: 15px">\
|
||||||
|
<img data-uuid="${image.uuid}"
|
||||||
|
src="${contextPrefix}/content-sections${contentSection}images/uuid-${image.uuid}"\
|
||||||
|
alt="${image.title}"
|
||||||
|
width="150"
|
||||||
|
style="width: 150px; cursor: pointer">\
|
||||||
|
</dt>\
|
||||||
|
<dd style="width: 430px; overflow: hidden">\
|
||||||
|
<dl style="display: block">\
|
||||||
|
<div style="display: flex">\
|
||||||
|
<dt style="width: 5em">Title</dt>\
|
||||||
|
<dd style="hypens:auto; max-width: 15em; overflow: hidden">${image.title}</dd>\
|
||||||
|
</div>\
|
||||||
|
<div style="display: flex">\
|
||||||
|
<dt style="width: 5em">Filename</dt>\
|
||||||
|
<dd style="hypens:auto max-width: 15em; overflow: hidden">${image.properties.filename}</dd>\
|
||||||
|
</div>\
|
||||||
|
<div style="display: flex">\
|
||||||
|
<dt style="width: 5em">Width</dt>\
|
||||||
|
<dd style="">${image.properties.width}</dd>\
|
||||||
|
</div>\
|
||||||
|
<div style="display: flex">\
|
||||||
|
<dt style="width: 5em">Height</dt>\
|
||||||
|
<dd style="">${image.properties.height}</dd>\
|
||||||
|
</div>\
|
||||||
|
</dl>\
|
||||||
|
</dd>\
|
||||||
|
</div>`);
|
||||||
|
}
|
||||||
|
// imageList = imageList + "</ul>";
|
||||||
|
|
||||||
|
const html = `<pre style="margin-bottom: 20px">Found ${data.length} images</pre>\
|
||||||
|
<dl>\
|
||||||
|
${images.join("\n")}\
|
||||||
|
</dl>`;
|
||||||
|
|
||||||
|
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: `<li>${image.name}</li>`,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
})
|
||||||
|
.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",
|
type: "container",
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
minWidth: 600,
|
||||||
|
minHeight: 400,
|
||||||
|
// onSubmit: function() {
|
||||||
|
// selectedImage.imageUuid = "0000-0000-0000-0000";
|
||||||
|
// },
|
||||||
title: "Select image",
|
title: "Select image",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue