Jingga/oms-Editor
1
0
Fork 0
mirror of https://github.com/Karaka-Management/oms-Editor.git synced 2026-01-11 17:18:42 +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)
{
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 || {}));

28
Controller.php
View File

@ -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;
}
}

82
Models/Editor.js
View File

@ -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 = '';

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

@ -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();
}
}

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">
<li><i class="editor-button fa fa-lg fa-undo"></i>
<li><i class="editor-button fa fa-lg fa-repeat"></i>
<li><i class="editor-button fa fa-lg fa-bold"></i>
<li><i class="editor-button fa fa-lg fa-italic"></i>
<li><i class="editor-button fa fa-lg fa-underline"></i>
<li><i class="editor-button fa fa-lg fa-strikethrough"></i>
<li><i class="editor-button fa fa-lg fa-font"></i>
<li><i class="editor-button fa fa-lg fa-subscript"></i>
<li><i class="editor-button fa fa-lg fa-superscript"></i>
<li><i class="editor-button fa fa-lg fa-paint-brush"></i>
<li><i class="editor-button fa fa-lg fa-pencil"></i>
<li><i class="editor-button fa fa-lg fa-list-ul"></i>
<li><i class="editor-button fa fa-lg fa-list-ol"></i>
<li><i class="editor-button fa fa-lg fa-indent"></i>
<li><i class="editor-button fa fa-lg fa-dedent"></i>
<li><i class="editor-button fa fa-lg fa-align-left"></i>
<li><i class="editor-button fa fa-lg fa-align-justify"></i>
<li><i class="editor-button fa fa-lg fa-align-right"></i>
<li><i data-editor-button="a" class="editor-button fa fa-lg fa-undo"></i>
<li><i data-editor-button="a" class="editor-button fa fa-lg fa-repeat"></i>
<li><i data-editor-button="bold" class="editor-button fa fa-lg fa-bold"></i>
<li><i data-editor-button="italic" class="editor-button fa fa-lg fa-italic"></i>
<li><i data-editor-button="underline" class="editor-button fa fa-lg fa-underline"></i>
<li><i data-editor-button="strikethrough" class="editor-button fa fa-lg fa-strikethrough"></i>
<li><i data-editor-button="a" 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 data-editor-button="a" 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 data-editor-button="ulist" 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 data-editor-button="indent" 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 data-editor-button="a" 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 data-editor-button="a" class="editor-button fa fa-lg fa-align-right"></i>
</ul>
<ul class="h-list">
<li><i class="editor-button fa fa-lg fa-table"></i>
<li><i class="editor-button fa fa-lg fa-image"></i>
<li><i class="editor-button fa fa-lg fa-camera"></i>
<li><i class="editor-button fa fa-lg fa-bar-chart"></i>
<li><i class="editor-button fa fa-lg fa-link"></i>
<li><i class="editor-button fa fa-lg fa-unlink"></i>
<li><i class="editor-button fa fa-lg fa-code"></i>
<li><i class="editor-button fa fa-lg fa-quote-right"></i>
<li><i 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="table" class="editor-button fa fa-lg fa-table"></i>
<li><i data-editor-button="a" class="editor-button fa fa-lg fa-image"></i>
<li><i data-editor-button="a" class="editor-button fa fa-lg fa-camera"></i>
<li><i data-editor-button="a" class="editor-button fa fa-lg fa-bar-chart"></i>
<li><i data-editor-button="link" class="editor-button fa fa-lg fa-link"></i>
<li><i data-editor-button="a" class="editor-button fa fa-lg fa-unlink"></i>
<li><i data-editor-button="code" class="editor-button fa fa-lg fa-code"></i>
<li><i data-editor-button="quote" class="editor-button fa fa-lg fa-quote-right"></i>
<li><i data-editor-button="a" class="editor-button fa fa-lg fa-calendar"></i>
<li><i data-editor-button="a" class="editor-button fa fa-lg fa-clock"></i>
</ul>
</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">
<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>

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

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

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

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