Use js modules

This commit is contained in:
Dennis Eichhorn 2019-04-02 22:45:23 +02:00
parent 5a77399798
commit 4d65fec042
4 changed files with 19 additions and 30 deletions

View File

@ -1,16 +1,17 @@
(function (jsOMS) import { Autoloader } from '../../jsOMS/Autoloader.js';
{ import { Application } from '../../Web/Backend/js/backend.js';
"use strict"; import { Editor } from './Models/Editor.js';
jsOMS.Autoloader.defineNamespace('jsOMS.Modules'); Autoloader.defineNamespace('jsOMS.Modules');
jsOMS.Modules.Editor = function(app) jsOMS.Modules.Editor = class {
constructor(app)
{ {
this.app = app; this.app = app;
this.editors = {}; this.editors = {};
}; };
jsOMS.Modules.Editor.prototype.bind = function(id) bind (id)
{ {
const e = typeof id === 'undefined' ? document.getElementsByClassName('m-editor') : [id], const e = typeof id === 'undefined' ? document.getElementsByClassName('m-editor') : [id],
length = e.length; length = e.length;
@ -20,7 +21,7 @@
} }
}; };
jsOMS.Modules.Editor.prototype.bindElement = function(id) bindElement (id)
{ {
if(typeof id === 'undefined' || !id) { if(typeof id === 'undefined' || !id) {
// todo: do logging // todo: do logging
@ -28,14 +29,9 @@
return; return;
} }
this.editors[id] = new jsOMS.Modules.Models.Editor.Editor(id); this.editors[id] = new Editor(id);
this.editors[id].bind(); this.editors[id].bind();
}; };
}(window.jsOMS = window.jsOMS || {})); };
jsOMS.ready(function () window.omsApp.moduleManager.get('Editor').bind();
{
"use strict";
window.omsApp.moduleManager.get('Editor').bind();
});

View File

@ -48,8 +48,7 @@ final class BackendController extends Controller
public function setUpEditorEditor(RequestAbstract $request, ResponseAbstract $response, $data = null) : void public function setUpEditorEditor(RequestAbstract $request, ResponseAbstract $response, $data = null) : void
{ {
$head = $response->get('Content')->getData('head'); $head = $response->get('Content')->getData('head');
$head->addAsset(AssetType::JSLATE, 'Modules/Editor/Models/Editor.js'); $head->addAsset(AssetType::JSLATE, 'Modules/Editor/Controller.js', ['type' => 'module']);
$head->addAsset(AssetType::JSLATE, 'Modules/Editor/Controller.js');
} }
/** /**

View File

@ -1,16 +1,11 @@
(function (jsOMS) export class Editor {
{ constructor (id)
"use strict";
jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Models.Editor');
jsOMS.Modules.Models.Editor.Editor = function (id)
{ {
this.id = id; this.id = id;
this.editor = document.getElementById(id); this.editor = document.getElementById(id);
}; };
jsOMS.Modules.Models.Editor.Editor.prototype.bind = function() bind ()
{ {
const editorButtons = document.querySelectorAll('#' + this.id + '-tools .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],
@ -27,7 +22,7 @@
} }
}; };
jsOMS.Modules.Models.Editor.Editor.prototype.toolsButton = function (e, event) toolsButton (e, event)
{ {
let textarea = this.editor.getElementsByTagName('textarea')[0]; let textarea = this.editor.getElementsByTagName('textarea')[0];
@ -111,7 +106,7 @@
textarea.setSelectionRange(cursorPosition, cursorPosition); textarea.setSelectionRange(cursorPosition, cursorPosition);
}; };
jsOMS.Modules.Models.Editor.Editor.prototype.getSelectedText = function() getSelectedText ()
{ {
let text = ''; let text = '';
const activeEl = document.activeElement; const activeEl = document.activeElement;
@ -128,4 +123,4 @@
return text; return text;
}; };
}(window.jsOMS = window.jsOMS || {})); };

View File

@ -41,8 +41,7 @@ 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', ['type' => 'module']);
$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);