CcmNG: Next part of TinyMCE integration

git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5687 8810af33-2d31-482b-a856-94f89814c4df

ccm-bundle-devel-wildfly-web/src/main/resources/scripts/ccm-cms/tinymce-loader.js

@@ -1,6 +1,10 @@
+document.addEventListener("DOMContentLoaded", function() {
     tinymce.init({
+        contentsection: document.querySelector(".tinymce").getAttribute("data-contentsection"),
+        contextprefix: document.querySelector(".tinymce").getAttribute("data-contextprefix"),
         menubar: "edit view insert format tools table",
-    plugins: "ccm-cms-insertmedia code lists nonbreaking noneditable paste searchreplace table template visualblocks wordcount",
+        plugins: "ccm-cms-insertimage code lists nonbreaking noneditable paste searchreplace table template visualblocks wordcount",
         selector: ".tinymce",
-    toolbar: "undo redo formatselect bold italic underline strikethrough alignleft aligncenter alignright alignjustify alignnone insert indent outdent blockquote bullist numlist link unlink openlink insertmedia table",
+        toolbar: "undo redo formatselect bold italic underline strikethrough alignleft aligncenter alignright alignjustify alignnone insert indent outdent blockquote bullist numlist link unlink openlink insertimage table",
+    });
 });

ccm-cms-tinymce/src/main/resources/scripts/ccm-cms/tinymce/plugins/insertimage.js

@@ -0,0 +1,142 @@
+tinymce.PluginManager.add("ccm-cms-insertimage", function(editor, url) {
+
+    console.log("Adding plugin ccm-cms-insertimage...");
+
+    editor.addButton(
+        "insertimage",
+        {
+            icon: "image",
+            onclick: function() {
+                openDialog(editor);
+            },
+            tooltip: "Insert image",
+        },
+    );
+
+    editor.addMenuItem(
+        "insert-image",
+        {
+            text: "Insert image",
+            context: "tools",
+            onclick: function() {
+                openDialog(editor);
+            },
+        },
+    );
+
+});
+
+function openDialog(editor) {
+
+    console.log("Opening dialog");
+
+    editor.windowManager.open({
+        body: [
+            {
+                items: [
+                    {
+                        direction: "row",
+                        items: [
+                            {
+                                disabled: true,
+                                label: "Image",
+                                name: "imageUuid",
+                                type: "textbox",
+                                value: "foobar",
+                            },
+                            {
+                                name: "browse",
+                                onclick: function()  {
+                                    openBrowseDialog(editor);
+                                },
+                                text: "Browse",
+                                type: "button",
+                            },
+                        ],
+                        label: "Image",
+                        layout: "flex",
+                        type: "container",
+                    },
+                    {
+                        label: "Caption",
+                        name: "caption",
+                        type: "textbox",
+                    },
+                    {
+                        label: "Width",
+                        name: "width",
+                        size: 4,
+                        type: "textbox",
+                    },
+                    {
+                        label: "Height",
+                        name: "height",
+                        size: 4,
+                        type: "textbox",
+                    },
+                    {
+                        name: "lightbox",
+                        text: "Lightbox?",
+                        type: "Checkbox",
+                    },
+                    {
+                        border: "1 1 1 1",
+                        name: "imagePanel",
+                        type: "container",
+                    },
+                ],
+                minHeight: 200,
+                minWidth: 400,
+                name: "insertimage_dialog_container",
+                onPostRender: function() {
+                    // console.log(`imageUuid = ${this.find("#imageUuid").value()}`);
+                    const imageUuid = this.find("#imageUuid").value();
+                    console.log(`imageUuid = ${imageUuid}`);
+                    // this.find("#imagePanel").innerHTML = `<pre>${imageUuid}</pre>`;
+                    this.find("#imagePanel").append([
+                        {
+                            html: `<pre>${imageUuid}</pre>`,
+                            // text: `${imageUuid}`,
+                            // type: "label",
+                            type: "container",
+                        }
+                    ]);
+                    console.log(this.find("#imagePanel"));
+                },
+                type: "form",
+            },
+        ],
+        onsubmit: function(event) {
+
+        },
+        title: "Insert image",
+    });
+
+    console.log("Dialog opened.");
+}
+
+function openBrowseDialog(editor) {
+
+    editor.windowManager.open({
+
+        body: [
+            {
+                items: [
+                    {
+                        text: "foo",
+                        type: "label",
+                    }
+                ],
+                layout: "flow",
+                minHeigth: 400,
+                minWidth: 400,
+                onPostRender: function() {
+                    console.log(`contentSection: ${editor.getParam("contentsection")}`);
+                    console.log(`contextPrefix: ${editor.getParam("contextprefix")}`);
+                },
+                type: "container",
+            }
+        ],
+        title: "Select image",
+    });
+}

ccm-cms/src/main/java/org/arsdigita/cms/CMSConfig.java

@@ -93,7 +93,8 @@ public class CMSConfig {
      */
     @Setting
     private List<String> dhtmlEditorPlugins = Arrays.asList(new String[]{
-        "scripts/ccm-cms/tinymce/plugins/insertmedia.js"
+//        "scripts/ccm-cms/tinymce/plugins/insertimage.js"
+          "http://localhost/web/ccm-cms-tinymce/insertimage.js"
     });
 
     /**

ccm-cms/src/main/java/org/librecms/contentsection/rs/AssetPropertiesProvider.java

@@ -0,0 +1,38 @@
+/*
+ * Copyright (C) 2018 LibreCCM Foundation.
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 2.1 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this library; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
+ * MA 02110-1301  USA
+ */
+package org.librecms.contentsection.rs;
+
+import org.librecms.contentsection.Asset;
+
+import javax.json.JsonObjectBuilder;
+
+/**
+ * An helper interface for providing additional properties of assets which are 
+ * provided as JSON object.
+ * 
+ * Implementations must be CDI beans (request scope is recommended) annotated
+ * with the qualifier annotation {@link ProvidesProperties}.
+ * 
+ * @author <a href="mailto:jens.pelzetter@googlemail.com">Jens Pelzetter</a>
+ */
+public interface AssetPropertiesProvider {
+    
+    void addProperties(Asset asset, JsonObjectBuilder builder);
+    
+}

ccm-cms/src/main/java/org/librecms/contentsection/rs/ImagesPropertiesProvider.java

@@ -0,0 +1,76 @@
+/*
+ * Copyright (C) 2018 LibreCCM Foundation.
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 2.1 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this library; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
+ * MA 02110-1301  USA
+ */
+package org.librecms.contentsection.rs;
+
+import org.libreccm.core.UnexpectedErrorException;
+import org.librecms.assets.Image;
+import org.librecms.contentsection.Asset;
+
+import java.awt.image.BufferedImage;
+import java.io.ByteArrayInputStream;
+import java.io.IOException;
+import java.io.InputStream;
+import java.util.Objects;
+
+import javax.imageio.ImageIO;
+import javax.json.JsonObjectBuilder;
+
+/**
+ *
+ * @author <a href="mailto:jens.pelzetter@googlemail.com">Jens Pelzetter</a>
+ */
+@ProvidesPropertiesForAssetType(Image.class)
+public class ImagesPropertiesProvider implements AssetPropertiesProvider {
+
+    @Override
+    public void addProperties(final Asset asset, 
+                              final JsonObjectBuilder builder) {
+        
+        Objects.requireNonNull(asset);
+        Objects.requireNonNull(builder);
+        
+        if (!(asset instanceof Image)) {
+            throw new IllegalArgumentException(String
+                .format("\"%s\" only supports assets of type \"%s\". Check "
+                    + "the qualifier annotation on \"%s\".",
+                        getClass().getName(),
+                        Image.class.getName(),
+                        getClass().getName()));
+        }
+        
+        final Image image = (Image) asset;
+        final byte[] data = image.getData();
+        final InputStream inputStream = new ByteArrayInputStream(data);
+        final BufferedImage bufferedImage;
+        try {
+            bufferedImage = ImageIO.read(inputStream);
+        } catch(IOException ex) {
+            throw new UnexpectedErrorException(ex);
+        }
+        
+        builder
+            .add("name", image.getDisplayName())
+            .add("filename", image.getFileName())
+            .add("mimetype", image.getMimeType().toString())
+            .add("width", bufferedImage.getWidth())
+            .add("height", bufferedImage.getHeight())
+            .add("size", data.length);
+    }
+    
+}

ccm-cms/src/main/java/org/librecms/contentsection/rs/ProvidesPropertiesForAssetType.java

@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) 2018 LibreCCM Foundation.
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 2.1 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this library; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
+ * MA 02110-1301  USA
+ */
+package org.librecms.contentsection.rs;
+
+import org.librecms.contentsection.Asset;
+
+import java.lang.annotation.ElementType;
+import java.lang.annotation.Retention;
+import java.lang.annotation.RetentionPolicy;
+import java.lang.annotation.Target;
+
+import javax.inject.Qualifier;
+
+/**
+ *
+ * @author <a href="mailto:jens.pelzetter@googlemail.com">Jens Pelzetter</a>
+ */
+@Qualifier
+@Retention(RetentionPolicy.RUNTIME)
+@Target(ElementType.TYPE)
+public @interface ProvidesPropertiesForAssetType {
+    
+    Class<? extends Asset> value();
+}

ccm-theme-foundry/src/main/resources/themes/foundry/foundry/lib/bebop/editors.xsl

@@ -253,7 +253,12 @@
         <xsl:call-template name="process-label">
             <xsl:with-param name="widget" select="."/>
         </xsl:call-template>
-        <textarea id="ta_{@name}" name="{@name}" style="width:100%" rows="{@rows}" cols="{@cols}" wrap="{@wrap}">
+        <textarea id="ta_{@name}"
+                  name="{@name}"
+                  style="width:100%"
+                  rows="{@rows}"
+                  cols="{@cols}"
+                  wrap="{@wrap}">
             <xsl:value-of disable-output-escaping="no" select="text()"/>
         </textarea>
 
@@ -272,7 +277,14 @@
             </script>
             <xsl:if test="bebop:plugin">
                 <xsl:for-each select="bebop:plugin">
+                    <xsl:choose>
+                        <xsl:when test="starts-with(./@name, 'http://') or starts-with(./@name, 'https://')">
+                            <script src="{./@name}"></script>
+                        </xsl:when>
+                        <xsl:otherwise>
                             <script src="{$context-prefix}/{./@name}"></script>
+                        </xsl:otherwise>
+                    </xsl:choose>
                 </xsl:for-each>
             </xsl:if>
 
@@ -286,7 +298,9 @@
                   name="{@name}"
                   rows="{@rows}"
                   cols="{@cols}"
-                  wrap="{@wrap}">
+                  wrap="{@wrap}"
+                  data-contextprefix="{$context-prefix}"
+                  data-contentsection="{./@current-contentsection-primaryurl}">
             <xsl:value-of disable-output-escaping="no" select="text()"/>
         </textarea>