Jingga/oms-Editor
1
0
Fork 0
mirror of https://github.com/Karaka-Management/oms-Editor.git synced 2026-02-03 20:28:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Draft editor functionality

Browse Source
This commit is contained in:
Dennis Eichhorn 2017-08-12 09:38:42 +02:00
parent a306a79085
commit adde0fb6a6
5 changed files with 110 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
Controller.js
View File

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

1
Controller.php
View File

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

61
Models/Editor.js
View File

@ -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()
{
var text = '';
var activeEl = document.activeElement;
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;
};
jsOMS.Modules.Editor.prototype.getSelectedText = function()
{
var text = '';
var activeEl = document.activeElement;
var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
}(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 || {}));

55
Theme/Backend/editor.tpl.php
View File

@ -17,47 +17,18 @@
$doc = $this->getData('doc') ?? null;
?>
<section class="box wf-100">
<div class="inner">
<input type="text" name="title" form="docForm">
</div>
</section>
<section class="box wf-100">
<div class="inner">
<input type="text" name="title" form="docForm">
</div>
</section>
<section class="box wf-100">
<div class="inner">
<i class="fa fa-header"></i>
<i class="fa fa-link"></i>
<i class="fa fa-image"></i>
<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>
<section class="box wf-100">
<div class="inner">
<?php include __DIR__ . '/inline-editor-tools.tpl.php'; ?>
</div>
</section>
<div class="box wf-100">
<div class="tabular">
<ul class="tab-links">
<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>
<div class="box wf-100">
<?php include __DIR__ . '/inline-editor.tpl.php'; ?>
</div>

18
Theme/Backend/inline-editor.tpl.php
View File

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