diff --git a/Controller.js b/Controller.js index 6c1a1c0..cea345c 100644 --- a/Controller.js +++ b/Controller.js @@ -12,24 +12,24 @@ jsOMS.Modules.Editor.prototype.bind = function(id) { - const e = typeof id === 'undefined' ? document.getElementsByClassName('m-editor') : [document.getElementById(id)], + const e = typeof id === 'undefined' ? document.getElementsByClassName('m-editor') : [id], length = e.length; for(let i = 0; i < length; i++) { - this.bindElement(e[i]); + this.bindElement(e[i].id); } }; - jsOMS.Modules.Editor.prototype.bindElement = function(editor) + jsOMS.Modules.Editor.prototype.bindElement = function(id) { - if(typeof editor === 'undefined' || !editor) { + if(typeof id === 'undefined' || !id) { // todo: do logging return; } - this.editors[editor.id] = new jsOMS.Modules.Models.Editor.Editor(editor.id); - this.editors[editor.id].bind(); + this.editors[id] = new jsOMS.Modules.Models.Editor.Editor(id); + this.editors[id].bind(); }; }(window.jsOMS = window.jsOMS || {})); diff --git a/Controller.php b/Controller.php index 7849d1d..3ad3998 100644 --- a/Controller.php +++ b/Controller.php @@ -29,6 +29,7 @@ use phpOMS\Module\WebInterface; use phpOMS\Views\View; use phpOMS\Account\PermissionType; use phpOMS\Message\Http\RequestStatusCode; +use phpOMS\Utils\Parser\Markdown\Markdown; /** * Calendar controller class. @@ -241,14 +242,29 @@ class Controller extends ModuleAbstract implements WebInterface return; } - $doc = new EditorDoc(); - $doc->setTitle((string) ($request->getData('title') ?? '')); - $doc->setPlain((string) ($request->getData('plain') ?? '')); - $doc->setContent((string) ($request->getData('plain') ?? '')); - $doc->setCreatedBy($request->getHeader()->getAccount()); - + $doc = $this->createDocFromRequest($request); EditorDocMapper::create($doc); $response->set('editor', $doc->jsonSerialize()); } + + /** + * Method to create task from request. + * + * @param RequestAbstract $request Request + * + * @return EditorDoc + * + * @since 1.0.0 + */ + private function createDocFromRequest(RequestAbstract $request) : EditorDoc + { + $doc = new EditorDoc(); + $doc->setTitle((string) ($request->getData('title') ?? '')); + $doc->setPlain((string) ($request->getData('plain') ?? '')); + $doc->setContent(Markdown::parse((string) ($request->getData('plain') ?? ''))); + $doc->setCreatedBy($request->getHeader()->getAccount()); + + return $doc; + } } diff --git a/Models/Editor.js b/Models/Editor.js index 939b660..65051d6 100644 --- a/Models/Editor.js +++ b/Models/Editor.js @@ -6,25 +6,103 @@ jsOMS.Modules.Models.Editor.Editor = function (id) { + this.id = id; this.editor = document.getElementById(id); }; jsOMS.Modules.Models.Editor.Editor.prototype.bind = function() { - const editorButtons = this.editor.getElementsByClassName('editor-button'), + const editorButtons = document.querySelectorAll('#' + this.id + '-tools .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++) { + for(let i = 0; i < length; ++i) { editorButtons[i].addEventListener('click', function(event) { // todo: identify button by class and then call function for this class. + self.toolsButton(this, event); }); } }; + jsOMS.Modules.Models.Editor.Editor.prototype.toolsButton = function (e, event) + { + let textarea = this.editor.getElementsByTagName('textarea')[0]; + + switch (e.dataset['editorButton']) { + case 'undo': + + break; + case 'redo': + + break; + case 'bold': + textarea.value = textarea.value.slice(0, textarea.selectionStart) + + '**' + textarea.value.slice(textarea.selectionStart, textarea.selectionEnd) + '**' + + textarea.value.slice(textarea.selectionEnd, textarea.value.length); + break; + case 'italic': + textarea.value = textarea.value.slice(0, textarea.selectionStart) + + '*' + textarea.value.slice(textarea.selectionStart, textarea.selectionEnd) + '*' + + textarea.value.slice(textarea.selectionEnd, textarea.value.length); + break; + case 'underline': + textarea.value = textarea.value.slice(0, textarea.selectionStart) + + '__' + textarea.value.slice(textarea.selectionStart, textarea.selectionEnd) + '__' + + textarea.value.slice(textarea.selectionEnd, textarea.value.length); + break; + case 'strikethrough': + textarea.value = textarea.value.slice(0, textarea.selectionStart) + + '~~' + textarea.value.slice(textarea.selectionStart, textarea.selectionEnd) + '~~' + + textarea.value.slice(textarea.selectionEnd, textarea.value.length); + break; + case 'ulist': + textarea.value = textarea.value.slice(0, textarea.selectionStart) + "\n" + + ' * ' + textarea.value.slice(textarea.selectionStart, textarea.selectionEnd) + + textarea.value.slice(textarea.selectionEnd, textarea.value.length); + break; + case 'olist': + textarea.value = textarea.value.slice(0, textarea.selectionStart) + "\n" + + ' 1. ' + textarea.value.slice(textarea.selectionStart, textarea.selectionEnd) + + textarea.value.slice(textarea.selectionEnd, textarea.value.length); + break; + case 'indent': + textarea.value = textarea.value.slice(0, textarea.selectionStart) + + ' ' + textarea.value.slice(textarea.selectionStart, textarea.selectionEnd) + + textarea.value.slice(textarea.selectionEnd, textarea.value.length); + break; + case 'table': + textarea.value = textarea.value.slice(0, textarea.selectionStart) + "\n" + + '| Tables | Are | Cool |' + "\n" + + '| ------------- |:-----------------:| -----:|' + "\n" + + '| col 3 is | right - aligned | $1600 |' + "\n" + + '| col 2 is | centered | $12 |' + "\n" + + '| zebra stripes | are neat | $1 |' + "\n" + + textarea.value.slice(textarea.selectionStart, textarea.value.length); + break; + case 'link': + let link = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd); + + textarea.value = textarea.value.slice(0, textarea.selectionStart) + + ((link.startsWith('http') || link.startsWith('www')) ? '[' + link + ']' : '[' + link + '](https://www.website.com "' + link + '")') + + textarea.value.slice(textarea.selectionEnd, textarea.value.length); + break; + case 'code': + textarea.value = textarea.value.slice(0, textarea.selectionStart) + + '`' + textarea.value.slice(textarea.selectionStart, textarea.selectionEnd) + '`' + + textarea.value.slice(textarea.selectionEnd, textarea.value.length); + break; + case 'quote': + textarea.value = textarea.value.slice(0, textarea.selectionStart) + "\n" + + '> ' + textarea.value.slice(textarea.selectionStart, textarea.value.length); + break; + default: + break; + } + }; + jsOMS.Modules.Models.Editor.Editor.prototype.getSelectedText = function() { let text = ''; diff --git a/Theme/Backend/Components/Editor/BaseView.php b/Theme/Backend/Components/Editor/BaseView.php index c88a62c..963b40e 100644 --- a/Theme/Backend/Components/Editor/BaseView.php +++ b/Theme/Backend/Components/Editor/BaseView.php @@ -18,6 +18,7 @@ use phpOMS\Views\View; use phpOMS\ApplicationAbstract; use phpOMS\Message\RequestAbstract; use phpOMS\Message\ResponseAbstract; +use phpOMS\Asset\AssetType; class BaseView extends View { @@ -28,6 +29,9 @@ class BaseView extends View parent::__construct($app, $request, $response); $this->setTemplate('/Modules/Editor/Theme/Backend/Components/Editor/inline-editor-tools'); + $response->get('Content')->getData('head')->addAsset(AssetType::JSLATE, '/Modules/Editor/Models/Editor.js'); + $response->get('Content')->getData('head')->addAsset(AssetType::JSLATE, '/Modules/Editor/Controller.js'); + $view = new TextView($app, $request, $response); $this->addData('text', $view); } @@ -39,7 +43,7 @@ class BaseView extends View public function render(...$data) : string { - $this->id = $data[0]; + $this->id = ($data[0] ?? '') . '-tools'; return parent::render(); } } diff --git a/Theme/Backend/Components/Editor/inline-editor-tools.tpl.php b/Theme/Backend/Components/Editor/inline-editor-tools.tpl.php index bc848da..97d5332 100644 --- a/Theme/Backend/Components/Editor/inline-editor-tools.tpl.php +++ b/Theme/Backend/Components/Editor/inline-editor-tools.tpl.php @@ -1,34 +1,33 @@ -
+
\ No newline at end of file diff --git a/Theme/Backend/Components/Editor/inline-editor.tpl.php b/Theme/Backend/Components/Editor/inline-editor.tpl.php index 6281e50..bf8dbca 100644 --- a/Theme/Backend/Components/Editor/inline-editor.tpl.php +++ b/Theme/Backend/Components/Editor/inline-editor.tpl.php @@ -1,4 +1,4 @@ -
+
  • diff --git a/Theme/Backend/editor-create.tpl.php b/Theme/Backend/editor-create.tpl.php index 0fce4de..f1863ed 100644 --- a/Theme/Backend/editor-create.tpl.php +++ b/Theme/Backend/editor-create.tpl.php @@ -35,7 +35,7 @@ echo $this->getData('nav')->render(); ?>
    - getData('editor')->render('editor-tools'); ?> + getData('editor')->render('editor'); ?>
    @@ -43,7 +43,7 @@ echo $this->getData('nav')->render(); ?>
    - getData('editor')->getData('text')->render('editor-text'); ?> + getData('editor')->getData('text')->render('editor', 'plain', 'fEditor'); ?>
    diff --git a/Theme/Backend/editor-single.tpl.php b/Theme/Backend/editor-single.tpl.php index 138cde7..ff19441 100644 --- a/Theme/Backend/editor-single.tpl.php +++ b/Theme/Backend/editor-single.tpl.php @@ -3,7 +3,7 @@
    -
    getData('doc')->getContent(); ?>
    +
    getData('doc')->getContent(); ?>
    \ No newline at end of file