Draft editor functionality

Controller.js

@@ -0,0 +1,39 @@
+(function (jsOMS)
+{
+    "use strict";
+
+    jsOMS.Modules.Editor = function(app)
+    {
+        this.app = app;
+        this.editors = {};
+    };
+
+    jsOMS.Modules.Editor.prototype.bind = function(id)
+    {
+        const e = typeof id === 'undefined' ? document.getElementsByClassName('editor') : [document.getElementById(id)],
+            length = e.length;
+
+        for(let i = 0; i < length; i++) {
+            this.bindElement(e[i]);
+        }
+    };
+
+    jsOMS.Modules.Editor.prototype.bindElement = function(editor)
+    {
+        if(typeof editor === 'undefined' || !editor) {
+            // todo: do logging
+
+            return;
+        }
+
+        this.editors[editor.id] = new jsOMS.Modules.Editor.Editor(this.app);
+        this.editors[editor.id].bind();
+    };
+}(window.jsOMS = window.jsOMS || {}));
+
+jsOMS.ready(function ()
+{
+    "use strict";
+
+    window.omsApp.moduleManager.get('Editor').bind();
+});

Controller.php

@@ -93,6 +93,7 @@ class Controller extends ModuleAbstract implements WebInterface
     public function setUpEditorEditor(RequestAbstract $request, ResponseAbstract $response, $data = null)
     {
         $head = $response->get('Content')->getData('head');
+        $head->addAsset(AssetType::JS, $request->getUri()->getBase() . 'Modules/Editor/Models/Editor.js');
         $head->addAsset(AssetType::JS, $request->getUri()->getBase() . 'Modules/Editor/Controller.js');
     }
 

Models/Editor.js

@@ -1,28 +1,45 @@
 (function (jsOMS)
+{
+    "use strict";
+
+    jsOMS.Modules.Editor.Editor = function (editor)
     {
-        "use strict";
+        this.editor = editor;
+    };
 
-        jsOMS.Modules.Editor.Editor = function (editor)
+    jsOMS.Modules.Editor.prototype.bind = function()
-        {
+    {
+        const editorButtons = this.editor.getElementsByClassName('editor-button'),
+            editorTitle = this.editor.getElementsByClassName('editor-title')[0],
+            editorContent = this.editor.getElementsByClassName('editor-content')[0],
+            editorPreview = this.editor.getElementsByClassName('editor-preview')[0],
+            length = editorButtons.length,
+            self = this;
 
-        };
+        for(let i = 0; i < length; i++) {
+            editorButtons[i].addEventListener('click', function(event) {
+                console.log('button clicked');
+                // todo: identify button by class and then call function for this class.
+            });
+        }
+    };
 
-        jsOMS.Modules.Editor.prototype.getSelectedText = function()
+    jsOMS.Modules.Editor.prototype.getSelectedText = function()
-        {
+    {
-            var text            = '';
+        var text            = '';
-            var activeEl        = document.activeElement;
+        var activeEl        = document.activeElement;
-            var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
+        var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
-            if (
-                (activeElTagName === 'textarea' || activeElTagName === 'input') &&
-                /^(?:text|search|password|tel|url)$/i.test(activeEl.type) &&
-                (typeof activeEl.selectionStart === 'number')
-            ) {
-                text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
-            } else if (window.getSelection) {
-                text = window.getSelection().toString();
-            }
-            return text;
-        };
 
-    }(window.jsOMS = window.jsOMS || {})
+        if (
-);
+            (activeElTagName === 'textarea' || activeElTagName === 'input') &&
+            /^(?:text|search|password|tel|url)$/i.test(activeEl.type) &&
+            (typeof activeEl.selectionStart === 'number')
+        ) {
+            text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
+        } else if (window.getSelection) {
+            text = window.getSelection().toString();
+        }
+
+        return text;
+    };
+}(window.jsOMS = window.jsOMS || {}));

Theme/Backend/editor.tpl.php

@@ -17,47 +17,18 @@
 
 $doc = $this->getData('doc') ?? null;
 ?>
-    <section class="box wf-100">
+<section class="box wf-100">
-        <div class="inner">
+    <div class="inner">
-            <input type="text" name="title" form="docForm">
+        <input type="text" name="title" form="docForm">
-        </div>
+    </div>
-    </section>
+</section>
 
-    <section class="box wf-100">
+<section class="box wf-100">
-        <div class="inner">
+    <div class="inner">
-            <i class="fa fa-header"></i>
+        <?php include __DIR__ . '/inline-editor-tools.tpl.php'; ?>
-            <i class="fa fa-link"></i>
+    </div>
-            <i class="fa fa-image"></i>
+</section>
-            <i class="fa fa-bold"></i>
-            <i class="fa fa-italic"></i>
-            <i class="fa fa-underline"></i>
-            <i class="fa fa-strikethrough"></i>
-            <i class="fa fa-list-ol"></i>
-            <i class="fa fa-list-ul"></i>
-            <i class="fa fa-quote-right"></i>
-            <i class="fa fa-subscript"></i>
-            <i class="fa fa-superscript"></i>
-            <i class="fa fa-question-circle floatRight"></i>
-        </div>
-    </section>
 
-    <div class="box wf-100">
+<div class="box wf-100">
-        <div class="tabular">
+    <?php include __DIR__ . '/inline-editor.tpl.php'; ?>
-            <ul class="tab-links">
+</div>
-                <li><label for="c-tab-1"><?= $this->getHtml('Text'); ?></label>
-                <li><label for="c-tab-2"><?= $this->getHtml('Preview'); ?></label>
-            </ul>
-            <div class="tab-content">
-                <input type="radio" id="c-tab-1" name="tabular-1" checked>
-
-                <div class="tab">
-                    <textarea style="height: 300px" placeholder="&#xf040;" name="plain" form="docForm"><?= htmlspecialchars(isset($doc) ? $doc->getPlain() : '', ENT_COMPAT, 'utf-8'); ?></textarea><input type="hidden" id="iParsed" name="parsed">
-                </div>
-                <input type="radio" id="c-tab-2" name="tabular-1">
-
-                <div class="tab">
-                    <?= htmlspecialchars(isset($doc) ? $doc->getContent() : '', ENT_COMPAT, 'utf-8'); ?>
-                </div>
-            </div>
-        </div>
-    </div>

Theme/Backend/inline-editor.tpl.php

@@ -0,0 +1,18 @@
+<div class="tabular">
+    <ul class="tab-links">
+        <li><label for="c-tab-1"><?= $this->getHtml('Text', 'Editor'); ?></label>
+        <li><label for="c-tab-2"><?= $this->getHtml('Preview', 'Editor'); ?></label>
+    </ul>
+    <div class="tab-content">
+        <input type="radio" id="c-tab-1" name="tabular-1" checked>
+
+        <div class="tab">
+            <textarea style="height: 300px" placeholder="&#xf040;" name="plain" form="docForm"><?= htmlspecialchars(isset($doc) ? $doc->getPlain() : '', ENT_COMPAT, 'utf-8'); ?></textarea><input type="hidden" id="iParsed" name="parsed">
+        </div>
+        <input type="radio" id="c-tab-2" name="tabular-1">
+
+        <div class="tab">
+            <?= htmlspecialchars(isset($doc) ? $doc->getContent() : '', ENT_COMPAT, 'utf-8'); ?>
+        </div>
+    </div>
+</div>