From 2d4b5bdb561df241bf8183d25041520db426737e Mon Sep 17 00:00:00 2001
From: Awilum <awilum@msn.com>
Date: Wed, 5 Jun 2019 11:42:23 +0300
Subject: [PATCH] Flextype Box Plugin: Admin #125 #117 - Entries
 Controller/Views implementation

---
 site/plugins/admin/views/partials/base.html   | 35 +++++++++++++++++++
 .../templates/content/entries/editor.html     | 28 ++++++---------
 2 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/site/plugins/admin/views/partials/base.html b/site/plugins/admin/views/partials/base.html
index d19da874..fba8505d 100644
--- a/site/plugins/admin/views/partials/base.html
+++ b/site/plugins/admin/views/partials/base.html
@@ -75,6 +75,37 @@
         <script src="https://cdn.jsdelivr.net/npm/@editorjs/marker@latest"></script><!-- Marker -->
         <script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@latest"></script><!-- Inline Code -->
         <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
+
+        <script>
+            /**
+            * Module to compose output JSON preview
+            */
+            const cPreview = (function (module) {
+                /**
+                 * Shows JSON in pretty preview
+                 * @param {object} output - what to show
+                 * @param {Element} holder - where to show
+                 */
+                module.show = function(output, holder) {
+                    /** Make JSON pretty */
+                    output = JSON.stringify( output, null, 4 );
+                    /** Encode HTML entities */
+                    output = encodeHTMLEntities( output );
+                    /** Stylize! */
+                    //output = stylize( output );
+                    holder.innerHTML = output;
+                };
+
+                /**
+                * Converts '>', '<', '&' symbols to entities
+                */
+                function encodeHTMLEntities(string) {
+                    return string.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+                }
+
+                return module;
+            })({});
+        </script>
         {% endif %}
 
 
@@ -319,6 +350,10 @@
                     $("#form" ).submit();
                 });
 
+                $('.js-save-editor-form-submit').click(function() {
+                    $("#form").submit();
+                });
+
                 $('.navbar-toggler').click(function () {
                     $('.sidebar').addClass('show-sidebar');
                     $('.sidebar-off-canvas').addClass('show-sidebar-off-canvas');
diff --git a/site/plugins/admin/views/templates/content/entries/editor.html b/site/plugins/admin/views/templates/content/entries/editor.html
index f7a2efc4..57712ece 100644
--- a/site/plugins/admin/views/templates/content/entries/editor.html
+++ b/site/plugins/admin/views/templates/content/entries/editor.html
@@ -1,13 +1,14 @@
-<div id="{{ form_element }}" class="editor"></div>
+<div class="js-editor">
+    <div id="{{ form_element }}" class="editor"></div>
+    <textarea id="textarea_{{ form_element }}" name="{{ form_element }}" rows="8" cols="80" style="display:none;"></textarea>
+    <a href="javascript:;" id="saveButton{{ form_element }}" class="js-editor-save-button">save</a>
+</div>
 
 <script>
 
 {% if is_current_path('admin.entries.edit') %}
 
-/**
-  * Saving button
-  */
- //const saveButton = document.getElementById('saveButton');
+ var saveButton_{{ form_element }} = document.getElementById('saveButton{{ form_element }}');
 
  /**
   * To initialize the Editor, create a new instance with configuration object
@@ -83,21 +84,12 @@
     */
    data: {},
 
-   onReady: function(){
-     saveButton.click();
-   },
-
    onChange: function() {
-     console.log('something changed');
+     {{ form_element }}.save().then((savedData) => {
+       cPreview.show(savedData, document.getElementById("textarea_{{ form_element }}"));
+     });
    }
- });
- /**
-  * Saving example
-  */
- saveButton.addEventListener('click', function () {
-   editor.save().then((savedData) => {
-     //cPreview.show(savedData, document.getElementById("output"));
-   });
+
  });
 
  {% endif %}