Dummy editor functionality

This commit is contained in:
Dennis Eichhorn 2017-08-12 17:56:49 +02:00
parent adde0fb6a6
commit 707ec504b1
5 changed files with 60 additions and 54 deletions

View File

@ -2,6 +2,8 @@
{ {
"use strict"; "use strict";
jsOMS.Autoloader.defineNamespace('jsOMS.Modules');
jsOMS.Modules.Editor = function(app) jsOMS.Modules.Editor = function(app)
{ {
this.app = app; this.app = app;
@ -10,7 +12,7 @@
jsOMS.Modules.Editor.prototype.bind = function(id) jsOMS.Modules.Editor.prototype.bind = function(id)
{ {
const e = typeof id === 'undefined' ? document.getElementsByClassName('editor') : [document.getElementById(id)], const e = typeof id === 'undefined' ? document.getElementsByClassName('m-editor') : [document.getElementById(id)],
length = e.length; length = e.length;
for(let i = 0; i < length; i++) { for(let i = 0; i < length; i++) {
@ -26,7 +28,7 @@
return; return;
} }
this.editors[editor.id] = new jsOMS.Modules.Editor.Editor(this.app); this.editors[editor.id] = new jsOMS.Modules.Models.Editor.Editor(editor.id);
this.editors[editor.id].bind(); this.editors[editor.id].bind();
}; };
}(window.jsOMS = window.jsOMS || {})); }(window.jsOMS = window.jsOMS || {}));

View File

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

View File

@ -2,12 +2,14 @@
{ {
"use strict"; "use strict";
jsOMS.Modules.Editor.Editor = function (editor) jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Models.Editor');
jsOMS.Modules.Models.Editor.Editor = function (id)
{ {
this.editor = editor; this.editor = document.getElementById(id);
}; };
jsOMS.Modules.Editor.prototype.bind = function() jsOMS.Modules.Models.Editor.Editor.prototype.bind = function()
{ {
const editorButtons = this.editor.getElementsByClassName('editor-button'), const editorButtons = this.editor.getElementsByClassName('editor-button'),
editorTitle = this.editor.getElementsByClassName('editor-title')[0], editorTitle = this.editor.getElementsByClassName('editor-title')[0],
@ -24,7 +26,7 @@
} }
}; };
jsOMS.Modules.Editor.prototype.getSelectedText = function() jsOMS.Modules.Models.Editor.Editor.prototype.getSelectedText = function()
{ {
var text = ''; var text = '';
var activeEl = document.activeElement; var activeEl = document.activeElement;

View File

@ -17,18 +17,20 @@
$doc = $this->getData('doc') ?? null; $doc = $this->getData('doc') ?? null;
?> ?>
<section class="box wf-100"> <div id="testEditor" class="m-editor">
<div class="inner"> <section class="box wf-100">
<input type="text" name="title" form="docForm"> <div class="inner">
</div> <input type="text" name="title" form="docForm">
</section> </div>
</section>
<section class="box wf-100"> <section class="box wf-100">
<div class="inner"> <div class="inner">
<?php include __DIR__ . '/inline-editor-tools.tpl.php'; ?> <?php include __DIR__ . '/inline-editor-tools.tpl.php'; ?>
</div> </div>
</section> </section>
<div class="box wf-100"> <div class="box wf-100">
<?php include __DIR__ . '/inline-editor.tpl.php'; ?> <?php include __DIR__ . '/inline-editor.tpl.php'; ?>
</div>
</div> </div>

View File

@ -1,40 +1,40 @@
<div class="slider"> <div class="slider">
<ul class="h-list"> <ul class="h-list">
<li><i class="fa fa-lg fa-floppy-o"></i> <li><i class="editor-button fa fa-lg fa-floppy-o"></i>
<li><i class="fa fa-lg fa-cloud-download"></i> <li><i class="editor-button fa fa-lg fa-cloud-download"></i>
<li><i class="fa fa-lg fa-undo"></i> <li><i class="editor-button fa fa-lg fa-undo"></i>
<li><i class="fa fa-lg fa-repeat"></i> <li><i class="editor-button fa fa-lg fa-repeat"></i>
<li><i class="fa fa-lg fa-copy"></i> <li><i class="editor-button fa fa-lg fa-copy"></i>
<li><i class="fa fa-lg fa-paste"></i> <li><i class="editor-button fa fa-lg fa-paste"></i>
<li><i class="fa fa-lg fa-cut"></i> <li><i class="editor-button fa fa-lg fa-cut"></i>
<li><i class="fa fa-lg fa-bold"></i> <li><i class="editor-button fa fa-lg fa-bold"></i>
<li><i class="fa fa-lg fa-italic"></i> <li><i class="editor-button fa fa-lg fa-italic"></i>
<li><i class="fa fa-lg fa-underline"></i> <li><i class="editor-button fa fa-lg fa-underline"></i>
<li><i class="fa fa-lg fa-strikethrough"></i> <li><i class="editor-button fa fa-lg fa-strikethrough"></i>
<li><i class="fa fa-lg fa-font"></i> <li><i class="editor-button fa fa-lg fa-font"></i>
<li><i class="fa fa-lg fa-subscript"></i> <li><i class="editor-button fa fa-lg fa-subscript"></i>
<li><i class="fa fa-lg fa-superscript"></i> <li><i class="editor-button fa fa-lg fa-superscript"></i>
<li><i class="fa fa-lg fa-paint-brush"></i> <li><i class="editor-button fa fa-lg fa-paint-brush"></i>
<li><i class="fa fa-lg fa-pencil"></i> <li><i class="editor-button fa fa-lg fa-pencil"></i>
<li><i class="fa fa-lg fa-list-ul"></i> <li><i class="editor-button fa fa-lg fa-list-ul"></i>
<li><i class="fa fa-lg fa-list-ol"></i> <li><i class="editor-button fa fa-lg fa-list-ol"></i>
<li><i class="fa fa-lg fa-indent"></i> <li><i class="editor-button fa fa-lg fa-indent"></i>
<li><i class="fa fa-lg fa-dedent"></i> <li><i class="editor-button fa fa-lg fa-dedent"></i>
<li><i class="fa fa-lg fa-align-left"></i> <li><i class="editor-button fa fa-lg fa-align-left"></i>
<li><i class="fa fa-lg fa-align-justify"></i> <li><i class="editor-button fa fa-lg fa-align-justify"></i>
<li><i class="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="fa fa-lg fa-table"></i> <li><i class="editor-button fa fa-lg fa-table"></i>
<li><i class="fa fa-lg fa-image"></i> <li><i class="editor-button fa fa-lg fa-image"></i>
<li><i class="fa fa-lg fa-camera"></i> <li><i class="editor-button fa fa-lg fa-camera"></i>
<li><i class="fa fa-lg fa-paint-brush"></i> <li><i class="editor-button fa fa-lg fa-paint-brush"></i>
<li><i class="fa fa-lg fa-bar-chart"></i> <li><i class="editor-button fa fa-lg fa-bar-chart"></i>
<li><i class="fa fa-lg fa-link"></i> <li><i class="editor-button fa fa-lg fa-link"></i>
<li><i class="fa fa-lg fa-unlink"></i> <li><i class="editor-button fa fa-lg fa-unlink"></i>
<li><i class="fa fa-lg fa-code"></i> <li><i class="editor-button fa fa-lg fa-code"></i>
<li><i class="fa fa-lg fa-quote-right"></i> <li><i class="editor-button fa fa-lg fa-quote-right"></i>
<li><i class="fa fa-lg fa-calendar"></i> <li><i class="editor-button fa fa-lg fa-calendar"></i>
<li><i class="fa fa-lg fa-clock"></i> <li><i class="editor-button fa fa-lg fa-clock"></i>
</ul> </ul>
</div> </div>