Jingga/oms-Editor
1
0
Fork 0
mirror of https://github.com/Karaka-Management/oms-Editor.git synced 2026-02-11 16:08:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editor functionality tests

Browse Source
This commit is contained in:
Dennis Eichhorn 2018-05-09 20:46:17 +02:00
parent 37b66cc3f2
commit 464d5ae8fd
8 changed files with 145 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
Controller.js
View File

@ -12,24 +12,24 @@
jsOMS.Modules.Editor.prototype.bind = function(id) 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; length = e.length;
for(let i = 0; i < length; i++) { 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 // todo: do logging
return; return;
} }
this.editors[editor.id] = new jsOMS.Modules.Models.Editor.Editor(editor.id); this.editors[id] = new jsOMS.Modules.Models.Editor.Editor(id);
this.editors[editor.id].bind(); this.editors[id].bind();
}; };
}(window.jsOMS = window.jsOMS || {})); }(window.jsOMS = window.jsOMS || {}));

28
Controller.php
View File

@ -29,6 +29,7 @@ use phpOMS\Module\WebInterface;
use phpOMS\Views\View; use phpOMS\Views\View;
use phpOMS\Account\PermissionType; use phpOMS\Account\PermissionType;
use phpOMS\Message\Http\RequestStatusCode; use phpOMS\Message\Http\RequestStatusCode;
use phpOMS\Utils\Parser\Markdown\Markdown;
/** /**
* Calendar controller class. * Calendar controller class.
@ -241,14 +242,29 @@ class Controller extends ModuleAbstract implements WebInterface
return; return;
} }
$doc = new EditorDoc(); $doc = $this->createDocFromRequest($request);
$doc->setTitle((string) ($request->getData('title') ?? ''));
$doc->setPlain((string) ($request->getData('plain') ?? ''));
$doc->setContent((string) ($request->getData('plain') ?? ''));
$doc->setCreatedBy($request->getHeader()->getAccount());
EditorDocMapper::create($doc); EditorDocMapper::create($doc);
$response->set('editor', $doc->jsonSerialize()); $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;
}
} }

82
Models/Editor.js
View File

@ -6,25 +6,103 @@
jsOMS.Modules.Models.Editor.Editor = function (id) jsOMS.Modules.Models.Editor.Editor = function (id)
{ {
this.id = id;
this.editor = document.getElementById(id); this.editor = document.getElementById(id);
}; };
jsOMS.Modules.Models.Editor.Editor.prototype.bind = function() 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], editorTitle = this.editor.getElementsByClassName('editor-title')[0],
editorContent = this.editor.getElementsByClassName('editor-content')[0], editorContent = this.editor.getElementsByClassName('editor-content')[0],
editorPreview = this.editor.getElementsByClassName('editor-preview')[0], editorPreview = this.editor.getElementsByClassName('editor-preview')[0],
length = editorButtons.length, length = editorButtons.length,
self = this; self = this;
for(let i = 0; i < length; i++) { for(let i = 0; i < length; ++i) {
editorButtons[i].addEventListener('click', function(event) { editorButtons[i].addEventListener('click', function(event) {
// todo: identify button by class and then call function for this class. // 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() jsOMS.Modules.Models.Editor.Editor.prototype.getSelectedText = function()
{ {
let text = ''; let text = '';

6
Theme/Backend/Components/Editor/BaseView.php
View File

@ -18,6 +18,7 @@ use phpOMS\Views\View;
use phpOMS\ApplicationAbstract; use phpOMS\ApplicationAbstract;
use phpOMS\Message\RequestAbstract; use phpOMS\Message\RequestAbstract;
use phpOMS\Message\ResponseAbstract; use phpOMS\Message\ResponseAbstract;
use phpOMS\Asset\AssetType;
class BaseView extends View class BaseView extends View
{ {
@ -28,6 +29,9 @@ class BaseView extends View
parent::__construct($app, $request, $response); parent::__construct($app, $request, $response);
$this->setTemplate('/Modules/Editor/Theme/Backend/Components/Editor/inline-editor-tools'); $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); $view = new TextView($app, $request, $response);
$this->addData('text', $view); $this->addData('text', $view);
} }
@ -39,7 +43,7 @@ class BaseView extends View
public function render(...$data) : string public function render(...$data) : string
{ {
$this->id = $data[0]; $this->id = ($data[0] ?? '') . '-tools';
return parent::render(); return parent::render();
} }
} }

57
Theme/Backend/Components/Editor/inline-editor-tools.tpl.php
View File

@ -1,34 +1,33 @@
<div class="slider"> <div id="<?= $this->printHtml($this->getId()); ?>" class="slider">
<ul class="h-list"> <ul class="h-list">
<li><i class="editor-button fa fa-lg fa-undo"></i> <li><i data-editor-button="a" class="editor-button fa fa-lg fa-undo"></i>
<li><i class="editor-button fa fa-lg fa-repeat"></i> <li><i data-editor-button="a" class="editor-button fa fa-lg fa-repeat"></i>
<li><i class="editor-button fa fa-lg fa-bold"></i> <li><i data-editor-button="bold" class="editor-button fa fa-lg fa-bold"></i>
<li><i class="editor-button fa fa-lg fa-italic"></i> <li><i data-editor-button="italic" class="editor-button fa fa-lg fa-italic"></i>
<li><i class="editor-button fa fa-lg fa-underline"></i> <li><i data-editor-button="underline" class="editor-button fa fa-lg fa-underline"></i>
<li><i class="editor-button fa fa-lg fa-strikethrough"></i> <li><i data-editor-button="strikethrough" class="editor-button fa fa-lg fa-strikethrough"></i>
<li><i class="editor-button fa fa-lg fa-font"></i> <li><i data-editor-button="a" class="editor-button fa fa-lg fa-subscript"></i>
<li><i class="editor-button fa fa-lg fa-subscript"></i> <li><i data-editor-button="a" class="editor-button fa fa-lg fa-superscript"></i>
<li><i class="editor-button fa fa-lg fa-superscript"></i> <li><i data-editor-button="a" class="editor-button fa fa-lg fa-paint-brush"></i>
<li><i class="editor-button fa fa-lg fa-paint-brush"></i> <li><i data-editor-button="a" class="editor-button fa fa-lg fa-pencil"></i>
<li><i class="editor-button fa fa-lg fa-pencil"></i> <li><i data-editor-button="ulist" class="editor-button fa fa-lg fa-list-ul"></i>
<li><i class="editor-button fa fa-lg fa-list-ul"></i> <li><i data-editor-button="olist" class="editor-button fa fa-lg fa-list-ol"></i>
<li><i class="editor-button fa fa-lg fa-list-ol"></i> <li><i data-editor-button="indent" class="editor-button fa fa-lg fa-indent"></i>
<li><i class="editor-button fa fa-lg fa-indent"></i> <li><i data-editor-button="a" class="editor-button fa fa-lg fa-dedent"></i>
<li><i class="editor-button fa fa-lg fa-dedent"></i> <li><i data-editor-button="a" class="editor-button fa fa-lg fa-align-left"></i>
<li><i class="editor-button fa fa-lg fa-align-left"></i> <li><i data-editor-button="a" class="editor-button fa fa-lg fa-align-justify"></i>
<li><i class="editor-button fa fa-lg fa-align-justify"></i> <li><i data-editor-button="a" class="editor-button fa fa-lg fa-align-right"></i>
<li><i class="editor-button fa fa-lg fa-align-right"></i>
</ul> </ul>
<ul class="h-list"> <ul class="h-list">
<li><i class="editor-button fa fa-lg fa-table"></i> <li><i data-editor-button="table" class="editor-button fa fa-lg fa-table"></i>
<li><i class="editor-button fa fa-lg fa-image"></i> <li><i data-editor-button="a" class="editor-button fa fa-lg fa-image"></i>
<li><i class="editor-button fa fa-lg fa-camera"></i> <li><i data-editor-button="a" class="editor-button fa fa-lg fa-camera"></i>
<li><i class="editor-button fa fa-lg fa-bar-chart"></i> <li><i data-editor-button="a" class="editor-button fa fa-lg fa-bar-chart"></i>
<li><i class="editor-button fa fa-lg fa-link"></i> <li><i data-editor-button="link" class="editor-button fa fa-lg fa-link"></i>
<li><i class="editor-button fa fa-lg fa-unlink"></i> <li><i data-editor-button="a" class="editor-button fa fa-lg fa-unlink"></i>
<li><i class="editor-button fa fa-lg fa-code"></i> <li><i data-editor-button="code" class="editor-button fa fa-lg fa-code"></i>
<li><i class="editor-button fa fa-lg fa-quote-right"></i> <li><i data-editor-button="quote" class="editor-button fa fa-lg fa-quote-right"></i>
<li><i class="editor-button fa fa-lg fa-calendar"></i> <li><i data-editor-button="a" class="editor-button fa fa-lg fa-calendar"></i>
<li><i class="editor-button fa fa-lg fa-clock"></i> <li><i data-editor-button="a" class="editor-button fa fa-lg fa-clock"></i>
</ul> </ul>
</div> </div>

2
Theme/Backend/Components/Editor/inline-editor.tpl.php
View File

@ -1,4 +1,4 @@
<div class="tabular"> <div id="<?= $this->printHtml($this->getId()); ?>" class="tabular m-editor">
<ul class="tab-links"> <ul class="tab-links">
<li><label for="<?= $this->printHtml($this->getId()); ?>-c-tab-1"><?= $this->getHtml('Text', 'Editor'); ?></label> <li><label for="<?= $this->printHtml($this->getId()); ?>-c-tab-1"><?= $this->getHtml('Text', 'Editor'); ?></label>
<li><label for="<?= $this->printHtml($this->getId()); ?>-c-tab-2"><?= $this->getHtml('Preview', 'Editor'); ?></label> <li><label for="<?= $this->printHtml($this->getId()); ?>-c-tab-2"><?= $this->getHtml('Preview', 'Editor'); ?></label>

4
Theme/Backend/editor-create.tpl.php
View File

@ -35,7 +35,7 @@ echo $this->getData('nav')->render(); ?>
<div class="col-xs-12"> <div class="col-xs-12">
<section class="box wf-100"> <section class="box wf-100">
<div class="inner"> <div class="inner">
<?= $this->getData('editor')->render('editor-tools'); ?> <?= $this->getData('editor')->render('editor'); ?>
</div> </div>
</section> </section>
</div> </div>
@ -43,7 +43,7 @@ echo $this->getData('nav')->render(); ?>
<div class="row"> <div class="row">
<div class="box col-xs-12"> <div class="box col-xs-12">
<?= $this->getData('editor')->getData('text')->render('editor-text'); ?> <?= $this->getData('editor')->getData('text')->render('editor', 'plain', 'fEditor'); ?>
</div> </div>
</div> </div>

2
Theme/Backend/editor-single.tpl.php
View File

@ -3,7 +3,7 @@
<div class="row"> <div class="row">
<div class="col-xs-12"> <div class="col-xs-12">
<section class="box wf-100"> <section class="box wf-100">
<div class="inner"><?= $this->getData('doc')->getContent(); ?></div> <div class="inner"><article><?= $this->getData('doc')->getContent(); ?></article></div>
</section> </section>
</div> </div>
</div> </div>