@oat-sa/tao-core-ui 1.64.1 → 1.64.2

package/src/maths/calculator/tpl/basicKeyboard.tpl

@@ -1,38 +1,38 @@
-<div class="calculator-keyboard">
-    <div class="row">
-        <button class="key command" data-command="historyUp"><span>{{{labels.HISTORYUP}}}</span></button>
-        <button class="key command" data-command="historyDown"><span>{{{labels.HISTORYDOWN}}}</span></button>
-        <button class="key command" data-command="stepDeleteLeft"><span>{{{labels.BACKSPACE}}}</span></button>
-        <button class="key command" data-command="clear"><span>{{{labels.CLEARALL}}}</span></button>
-    </div>
-    <div class="row">
-        <button class="key operator" data-command="term" data-param="LPAR"><span>{{{labels.LPAR}}}</span></button>
-        <button class="key operator" data-command="term" data-param="RPAR"><span>{{{labels.RPAR}}}</span></button>
-        <button class="key operator" data-command="term" data-param="POW"><span>{{{labels.POWY}}}</span></button>
-        <button class="key operator" data-command="term" data-param="SQRT"><span>{{{labels.SQRT}}}</span></button>
-    </div>
-    <div class="row">
-        <button class="key operand" data-command="term" data-param="NUM7"><span>{{{labels.NUM7}}}</span></button>
-        <button class="key operand" data-command="term" data-param="NUM8"><span>{{{labels.NUM8}}}</span></button>
-        <button class="key operand" data-command="term" data-param="NUM9"><span>{{{labels.NUM9}}}</span></button>
-        <button class="key operator" data-command="term" data-param="DIV"><span>{{{labels.DIV}}}</span></button>
-    </div>
-    <div class="row">
-        <button class="key operand" data-command="term" data-param="NUM4"><span>{{{labels.NUM4}}}</span></button>
-        <button class="key operand" data-command="term" data-param="NUM5"><span>{{{labels.NUM5}}}</span></button>
-        <button class="key operand" data-command="term" data-param="NUM6"><span>{{{labels.NUM6}}}</span></button>
-        <button class="key operator" data-command="term" data-param="MUL"><span>{{{labels.MUL}}}</span></button>
-    </div>
-    <div class="row">
-        <button class="key operand" data-command="term" data-param="NUM1"><span>{{{labels.NUM1}}}</span></button>
-        <button class="key operand" data-command="term" data-param="NUM2"><span>{{{labels.NUM2}}}</span></button>
-        <button class="key operand" data-command="term" data-param="NUM3"><span>{{{labels.NUM3}}}</span></button>
-        <button class="key operator" data-command="term" data-param="SUB"><span>{{{labels.SUB}}}</span></button>
-    </div>
-    <div class="row">
-        <button class="key operand" data-command="term" data-param="NUM0"><span>{{{labels.NUM0}}}</span></button>
-        <button class="key operand" data-command="term" data-param="DOT"><span>{{{labels.DOT}}}</span></button>
-        <button class="key execute" data-command="execute"><span>{{{labels.EXECUTE}}}</span></button>
-        <button class="key operator" data-command="term" data-param="ADD"><span>{{{labels.ADD}}}</span></button>
-    </div>
+<div class="calculator-keyboard">
+    <div class="row">
+        <button class="key command" data-command="historyUp"><span>{{{labels.HISTORYUP}}}</span></button>
+        <button class="key command" data-command="historyDown"><span>{{{labels.HISTORYDOWN}}}</span></button>
+        <button class="key command" data-command="stepDeleteLeft"><span>{{{labels.BACKSPACE}}}</span></button>
+        <button class="key command" data-command="clear"><span>{{{labels.CLEARALL}}}</span></button>
+    </div>
+    <div class="row">
+        <button class="key operator" data-command="term" data-param="LPAR"><span>{{{labels.LPAR}}}</span></button>
+        <button class="key operator" data-command="term" data-param="RPAR"><span>{{{labels.RPAR}}}</span></button>
+        <button class="key operator" data-command="term" data-param="POW"><span>{{{labels.POWY}}}</span></button>
+        <button class="key operator" data-command="term" data-param="SQRT"><span>{{{labels.SQRT}}}</span></button>
+    </div>
+    <div class="row">
+        <button class="key operand" data-command="term" data-param="NUM7"><span>{{{labels.NUM7}}}</span></button>
+        <button class="key operand" data-command="term" data-param="NUM8"><span>{{{labels.NUM8}}}</span></button>
+        <button class="key operand" data-command="term" data-param="NUM9"><span>{{{labels.NUM9}}}</span></button>
+        <button class="key operator" data-command="term" data-param="DIV"><span>{{{labels.DIV}}}</span></button>
+    </div>
+    <div class="row">
+        <button class="key operand" data-command="term" data-param="NUM4"><span>{{{labels.NUM4}}}</span></button>
+        <button class="key operand" data-command="term" data-param="NUM5"><span>{{{labels.NUM5}}}</span></button>
+        <button class="key operand" data-command="term" data-param="NUM6"><span>{{{labels.NUM6}}}</span></button>
+        <button class="key operator" data-command="term" data-param="MUL"><span>{{{labels.MUL}}}</span></button>
+    </div>
+    <div class="row">
+        <button class="key operand" data-command="term" data-param="NUM1"><span>{{{labels.NUM1}}}</span></button>
+        <button class="key operand" data-command="term" data-param="NUM2"><span>{{{labels.NUM2}}}</span></button>
+        <button class="key operand" data-command="term" data-param="NUM3"><span>{{{labels.NUM3}}}</span></button>
+        <button class="key operator" data-command="term" data-param="SUB"><span>{{{labels.SUB}}}</span></button>
+    </div>
+    <div class="row">
+        <button class="key operand" data-command="term" data-param="NUM0"><span>{{{labels.NUM0}}}</span></button>
+        <button class="key operand" data-command="term" data-param="DOT"><span>{{{labels.DOT}}}</span></button>
+        <button class="key execute" data-command="execute"><span>{{{labels.EXECUTE}}}</span></button>
+        <button class="key operator" data-command="term" data-param="ADD"><span>{{{labels.ADD}}}</span></button>
+    </div>
 </div>

package/src/maths/calculator/tpl/basicScreen.tpl

@@ -1,3 +1,3 @@
-<div class="calculator-screen simple-screen">
-    <div class="screen-panel expression">{{{expression}}}</div>
+<div class="calculator-screen simple-screen">
+    <div class="screen-panel expression">{{{expression}}}</div>
 </div>

package/src/maths/calculator/tpl/scientificKeyboard.tpl

@@ -1,62 +1,62 @@
-<div class="calculator-keyboard">
-    <div class="row">
-        <button class="key switch first" data-command="degree"><span>{{{labels.DEGREE}}}</span></button>
-        <button class="key switch last" data-command="radian"><span>{{{labels.RADIAN}}}</span></button>
-        <span class="spacer">{{{labels.SPACER}}}</span>
-        <span class="spacer">{{{labels.SPACER}}}</span>
-        <button class="key command" data-command="historyUp"><span>{{{labels.HISTORYUP}}}</span></button>
-        <button class="key command" data-command="historyDown"><span>{{{labels.HISTORYDOWN}}}</span></button>
-        <button class="key command" data-command="stepDeleteLeft"><span>{{{labels.BACKSPACE}}}</span></button>
-        <button class="key command" data-command="clear"><span>{{{labels.CLEARALL}}}</span></button>
-    </div>
-    <div class="row">
-        <button class="key operator" data-command="term" data-param="SIN"><span>{{{labels.SIN}}}</span></button>
-        <button class="key operator" data-command="term" data-param="COS"><span>{{{labels.COS}}}</span></button>
-        <button class="key operator" data-command="term" data-param="TAN"><span>{{{labels.TAN}}}</span></button>
-        <button class="key constant" data-command="term" data-param="PI"><span>{{{labels.PI}}}</span></button>
-        <button class="key operator" data-command="term" data-param="LPAR"><span>{{{labels.LPAR}}}</span></button>
-        <button class="key operator" data-command="term" data-param="RPAR"><span>{{{labels.RPAR}}}</span></button>
-        <button class="key variable" data-command="var" data-param="ans"><span>{{{labels.ANS}}}</span></button>
-        <button class="key operator" data-command="term" data-param="DIV"><span>{{{labels.DIV}}}</span></button>
-    </div>
-    <div class="row">
-        <button class="key operator" data-command="term" data-param="ASIN"><span>{{{labels.ASIN}}}</span></button>
-        <button class="key operator" data-command="term" data-param="ACOS"><span>{{{labels.ACOS}}}</span></button>
-        <button class="key operator" data-command="term" data-param="ATAN"><span>{{{labels.ATAN}}}</span></button>
-        <button class="key operator" data-command="term" data-param="FAC"><span>{{{labels.FAC}}}</span></button>
-        <button class="key operand" data-command="term" data-param="NUM7"><span>{{{labels.NUM7}}}</span></button>
-        <button class="key operand" data-command="term" data-param="NUM8"><span>{{{labels.NUM8}}}</span></button>
-        <button class="key operand" data-command="term" data-param="NUM9"><span>{{{labels.NUM9}}}</span></button>
-        <button class="key operator" data-command="term" data-param="MUL"><span>{{{labels.MUL}}}</span></button>
-    </div>
-    <div class="row">
-        <button class="key operator" data-command="term" data-param="POW NUM2"><span>{{{labels.POW2}}}</span></button>
-        <button class="key operator" data-command="term" data-param="POW NUM3"><span>{{{labels.POW3}}}</span></button>
-        <button class="key operator" data-command="term" data-param="POW"><span>{{{labels.POWY}}}</span></button>
-        <button class="key operator" data-command="term" data-param="POW SUB NUM1"><span>{{{labels.POWMINUSONE}}}</span></button>
-        <button class="key operand" data-command="term" data-param="NUM4"><span>{{{labels.NUM4}}}</span></button>
-        <button class="key operand" data-command="term" data-param="NUM5"><span>{{{labels.NUM5}}}</span></button>
-        <button class="key operand" data-command="term" data-param="NUM6"><span>{{{labels.NUM6}}}</span></button>
-        <button class="key operator" data-command="term" data-param="SUB"><span>{{{labels.SUB}}}</span></button>
-    </div>
-    <div class="row">
-        <button class="key operator" data-command="term" data-param="SQRT"><span>{{{labels.SQRT}}}</span></button>
-        <button class="key operator" data-command="term" data-param="CBRT"><span>{{{labels.CBRT}}}</span></button>
-        <button class="key operator" data-command="term" data-param="@NTHRT"><span>{{{labels.NTHRT}}}</span></button>
-        <button class="key operator" data-command="pow10"><span>{{{labels.POW10}}}</span></button>
-        <button class="key operand" data-command="term" data-param="NUM1"><span>{{{labels.NUM1}}}</span></button>
-        <button class="key operand" data-command="term" data-param="NUM2"><span>{{{labels.NUM2}}}</span></button>
-        <button class="key operand" data-command="term" data-param="NUM3"><span>{{{labels.NUM3}}}</span></button>
-        <button class="key operator" data-command="term" data-param="ADD"><span>{{{labels.ADD}}}</span></button>
-    </div>
-    <div class="row">
-        <button class="key operator" data-command="term" data-param="LOG10"><span>{{{labels.LOG}}}</span></button>
-        <button class="key operator" data-command="term" data-param="LN"><span>{{{labels.LN}}}</span></button>
-        <button class="key operator" data-command="term" data-param="EXP"><span>{{{labels.EXPX}}}</span></button>
-        <button class="key constant" data-command="term" data-param="E"><span>{{{labels.E}}}</span></button>
-        <button class="key operator" data-command="sign"><span>{{{labels.SIGN}}}</span></button>
-        <button class="key operand" data-command="term" data-param="NUM0"><span>{{{labels.NUM0}}}</span></button>
-        <button class="key operand" data-command="term" data-param="DOT"><span>{{{labels.DOT}}}</span></button>
-        <button class="key execute" data-command="execute"><span>{{{labels.EXECUTE}}}</span></button>
-    </div>
+<div class="calculator-keyboard">
+    <div class="row">
+        <button class="key switch first" data-command="degree"><span>{{{labels.DEGREE}}}</span></button>
+        <button class="key switch last" data-command="radian"><span>{{{labels.RADIAN}}}</span></button>
+        <span class="spacer">{{{labels.SPACER}}}</span>
+        <span class="spacer">{{{labels.SPACER}}}</span>
+        <button class="key command" data-command="historyUp"><span>{{{labels.HISTORYUP}}}</span></button>
+        <button class="key command" data-command="historyDown"><span>{{{labels.HISTORYDOWN}}}</span></button>
+        <button class="key command" data-command="stepDeleteLeft"><span>{{{labels.BACKSPACE}}}</span></button>
+        <button class="key command" data-command="clear"><span>{{{labels.CLEARALL}}}</span></button>
+    </div>
+    <div class="row">
+        <button class="key operator" data-command="term" data-param="SIN"><span>{{{labels.SIN}}}</span></button>
+        <button class="key operator" data-command="term" data-param="COS"><span>{{{labels.COS}}}</span></button>
+        <button class="key operator" data-command="term" data-param="TAN"><span>{{{labels.TAN}}}</span></button>
+        <button class="key constant" data-command="term" data-param="PI"><span>{{{labels.PI}}}</span></button>
+        <button class="key operator" data-command="term" data-param="LPAR"><span>{{{labels.LPAR}}}</span></button>
+        <button class="key operator" data-command="term" data-param="RPAR"><span>{{{labels.RPAR}}}</span></button>
+        <button class="key variable" data-command="var" data-param="ans"><span>{{{labels.ANS}}}</span></button>
+        <button class="key operator" data-command="term" data-param="DIV"><span>{{{labels.DIV}}}</span></button>
+    </div>
+    <div class="row">
+        <button class="key operator" data-command="term" data-param="ASIN"><span>{{{labels.ASIN}}}</span></button>
+        <button class="key operator" data-command="term" data-param="ACOS"><span>{{{labels.ACOS}}}</span></button>
+        <button class="key operator" data-command="term" data-param="ATAN"><span>{{{labels.ATAN}}}</span></button>
+        <button class="key operator" data-command="term" data-param="FAC"><span>{{{labels.FAC}}}</span></button>
+        <button class="key operand" data-command="term" data-param="NUM7"><span>{{{labels.NUM7}}}</span></button>
+        <button class="key operand" data-command="term" data-param="NUM8"><span>{{{labels.NUM8}}}</span></button>
+        <button class="key operand" data-command="term" data-param="NUM9"><span>{{{labels.NUM9}}}</span></button>
+        <button class="key operator" data-command="term" data-param="MUL"><span>{{{labels.MUL}}}</span></button>
+    </div>
+    <div class="row">
+        <button class="key operator" data-command="term" data-param="POW NUM2"><span>{{{labels.POW2}}}</span></button>
+        <button class="key operator" data-command="term" data-param="POW NUM3"><span>{{{labels.POW3}}}</span></button>
+        <button class="key operator" data-command="term" data-param="POW"><span>{{{labels.POWY}}}</span></button>
+        <button class="key operator" data-command="term" data-param="POW SUB NUM1"><span>{{{labels.POWMINUSONE}}}</span></button>
+        <button class="key operand" data-command="term" data-param="NUM4"><span>{{{labels.NUM4}}}</span></button>
+        <button class="key operand" data-command="term" data-param="NUM5"><span>{{{labels.NUM5}}}</span></button>
+        <button class="key operand" data-command="term" data-param="NUM6"><span>{{{labels.NUM6}}}</span></button>
+        <button class="key operator" data-command="term" data-param="SUB"><span>{{{labels.SUB}}}</span></button>
+    </div>
+    <div class="row">
+        <button class="key operator" data-command="term" data-param="SQRT"><span>{{{labels.SQRT}}}</span></button>
+        <button class="key operator" data-command="term" data-param="CBRT"><span>{{{labels.CBRT}}}</span></button>
+        <button class="key operator" data-command="term" data-param="@NTHRT"><span>{{{labels.NTHRT}}}</span></button>
+        <button class="key operator" data-command="pow10"><span>{{{labels.POW10}}}</span></button>
+        <button class="key operand" data-command="term" data-param="NUM1"><span>{{{labels.NUM1}}}</span></button>
+        <button class="key operand" data-command="term" data-param="NUM2"><span>{{{labels.NUM2}}}</span></button>
+        <button class="key operand" data-command="term" data-param="NUM3"><span>{{{labels.NUM3}}}</span></button>
+        <button class="key operator" data-command="term" data-param="ADD"><span>{{{labels.ADD}}}</span></button>
+    </div>
+    <div class="row">
+        <button class="key operator" data-command="term" data-param="LOG10"><span>{{{labels.LOG}}}</span></button>
+        <button class="key operator" data-command="term" data-param="LN"><span>{{{labels.LN}}}</span></button>
+        <button class="key operator" data-command="term" data-param="EXP"><span>{{{labels.EXPX}}}</span></button>
+        <button class="key constant" data-command="term" data-param="E"><span>{{{labels.E}}}</span></button>
+        <button class="key operator" data-command="sign"><span>{{{labels.SIGN}}}</span></button>
+        <button class="key operand" data-command="term" data-param="NUM0"><span>{{{labels.NUM0}}}</span></button>
+        <button class="key operand" data-command="term" data-param="DOT"><span>{{{labels.DOT}}}</span></button>
+        <button class="key execute" data-command="execute"><span>{{{labels.EXECUTE}}}</span></button>
+    </div>
 </div>

package/src/maths/calculator/tpl/scientificScreen.tpl

@@ -1,4 +1,4 @@
-<div class="calculator-screen simple-screen">
-    <div class="screen-panel history">{{{history}}}</div>
-    <div class="screen-panel expression">{{{expression}}}</div>
+<div class="calculator-screen simple-screen">
+    <div class="screen-panel history">{{{history}}}</div>
+    <div class="screen-panel expression">{{{expression}}}</div>
 </div>

package/src/mediaEditor/mediaEditorComponent.js

@@ -1,141 +1,141 @@
-/**
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU General Public License
- * as published by the Free Software Foundation; under version 2
- * of the License (non-upgradable).
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- *
- * Copyright (c) 2021 (original work) Open Assessment Technologies SA;
- *
- * @author Oleksander Zagovorychev <zagovorichev@gmail.com>
- */
-
-/**
- * Media editor
- * tools:
- *  - mediaSize - (change media size, responsive mode, sync width to heights, reset)
- *  - mediaAlignment - (position of the media)
- *  to be implemented:
- *  *- cropper
- *  *- change colors
- *  *- etc.
- */
-import $ from 'jquery';
-import _ from 'lodash';
-import component from 'ui/component';
-import mediaDimensionComponent from 'ui/mediaEditor/plugins/mediaDimension/mediaDimensionComponent';
-import mediaAlignmentComponent from 'ui/mediaEditor/plugins/mediaAlignment/mediaAlignmentComponent';
-import tpl from 'ui/mediaEditor/tpl/editor';
-
-/**
- * @typedef {Object} mediaObject
- * @property $node
- * @property $container
- * @property type
- * @property src
- * @property width
- * @property height
- */
-
-/**
- * @typedef {Object} mediaEditorConfig
- * @property mediaDimension {{active: boolean}}
- * @property mediaAlignment {{active: boolean}}
- */
-
-/**
- * target - jQuery element with media $()
- * container - container to which an target is attached
- *
- * @type mediaEditorConfig
- * @private
- */
-const defaultConfig = {
-    mediaDimension: {
-        active: false
-    },
-    mediaAlignment: {
-        active: false
-    }
-};
-
-/**
- * Creates media editor
- *
- * @param {Object} $container - jQuery pointer
- * @param {mediaObject} media
- * @param {mediaEditorConfig} config
- * @returns {component|*}
- */
-export default function mediaEditorFactory($container, media, config) {
-    /**
-     * Active Plugins
-     * @type {Array}
-     */
-    const plugins = [];
-
-    /**
-     * Current component
-     */
-    const mediaEditorComponent = component({}, defaultConfig);
-    mediaEditorComponent
-        .setTemplate(tpl)
-        .on('init', function () {
-            if (!media || !media.$node || !media.$node.length) {
-                throw new Error('mediaEditorComponent requires media.$node');
-            }
-            if (!media || !media.$container || !media.$container.length) {
-                throw new Error('mediaEditorComponent requires media.$container');
-            }
-            this.render($container);
-        })
-        .on('render', function () {
-            const $dimensionTools = $('.media-dimension', this.getTemplate());
-            const $alignmentTools = $('.media-align', this.getTemplate());
-            let dimensionPlugin;
-            let alignmentPlugin;
-            if (this.getConfig().mediaDimension.active) {
-                dimensionPlugin = mediaDimensionComponent($dimensionTools, media, {
-                    responsive: media.responsive,
-                    showResponsiveToggle: this.getConfig().mediaDimension.showResponsiveToggle
-                }).on('change', conf => {
-                    media.responsive = conf.responsive;
-                    if (conf.responsive) {
-                        // percent
-                        media.width = conf.sizeProps['%'].current.width;
-                        media.height = null;
-                    } else {
-                        media.width = conf.sizeProps.px.current.width;
-                        media.height = conf.sizeProps.px.current.height;
-                    }
-
-                    this.trigger('change', media);
-                });
-
-                plugins.push(dimensionPlugin);
-            }
-            if (this.getConfig().mediaAlignment.active) {
-                alignmentPlugin = mediaAlignmentComponent($alignmentTools, media).spread(this, 'change');
-                plugins.push(alignmentPlugin);
-            }
-        })
-        .on('destroy', function () {
-            _.forEach(plugins, function (plugin) {
-                plugin.destroy();
-            });
-        });
-
-    _.defer(function () {
-        mediaEditorComponent.init(config);
-    });
-
-    return mediaEditorComponent;
-}
+/**
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; under version 2
+ * of the License (non-upgradable).
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * Copyright (c) 2021 (original work) Open Assessment Technologies SA;
+ *
+ * @author Oleksander Zagovorychev <zagovorichev@gmail.com>
+ */
+
+/**
+ * Media editor
+ * tools:
+ *  - mediaSize - (change media size, responsive mode, sync width to heights, reset)
+ *  - mediaAlignment - (position of the media)
+ *  to be implemented:
+ *  *- cropper
+ *  *- change colors
+ *  *- etc.
+ */
+import $ from 'jquery';
+import _ from 'lodash';
+import component from 'ui/component';
+import mediaDimensionComponent from 'ui/mediaEditor/plugins/mediaDimension/mediaDimensionComponent';
+import mediaAlignmentComponent from 'ui/mediaEditor/plugins/mediaAlignment/mediaAlignmentComponent';
+import tpl from 'ui/mediaEditor/tpl/editor';
+
+/**
+ * @typedef {Object} mediaObject
+ * @property $node
+ * @property $container
+ * @property type
+ * @property src
+ * @property width
+ * @property height
+ */
+
+/**
+ * @typedef {Object} mediaEditorConfig
+ * @property mediaDimension {{active: boolean}}
+ * @property mediaAlignment {{active: boolean}}
+ */
+
+/**
+ * target - jQuery element with media $()
+ * container - container to which an target is attached
+ *
+ * @type mediaEditorConfig
+ * @private
+ */
+const defaultConfig = {
+    mediaDimension: {
+        active: false
+    },
+    mediaAlignment: {
+        active: false
+    }
+};
+
+/**
+ * Creates media editor
+ *
+ * @param {Object} $container - jQuery pointer
+ * @param {mediaObject} media
+ * @param {mediaEditorConfig} config
+ * @returns {component|*}
+ */
+export default function mediaEditorFactory($container, media, config) {
+    /**
+     * Active Plugins
+     * @type {Array}
+     */
+    const plugins = [];
+
+    /**
+     * Current component
+     */
+    const mediaEditorComponent = component({}, defaultConfig);
+    mediaEditorComponent
+        .setTemplate(tpl)
+        .on('init', function () {
+            if (!media || !media.$node || !media.$node.length) {
+                throw new Error('mediaEditorComponent requires media.$node');
+            }
+            if (!media || !media.$container || !media.$container.length) {
+                throw new Error('mediaEditorComponent requires media.$container');
+            }
+            this.render($container);
+        })
+        .on('render', function () {
+            const $dimensionTools = $('.media-dimension', this.getTemplate());
+            const $alignmentTools = $('.media-align', this.getTemplate());
+            let dimensionPlugin;
+            let alignmentPlugin;
+            if (this.getConfig().mediaDimension.active) {
+                dimensionPlugin = mediaDimensionComponent($dimensionTools, media, {
+                    responsive: media.responsive,
+                    showResponsiveToggle: this.getConfig().mediaDimension.showResponsiveToggle
+                }).on('change', conf => {
+                    media.responsive = conf.responsive;
+                    if (conf.responsive) {
+                        // percent
+                        media.width = conf.sizeProps['%'].current.width;
+                        media.height = null;
+                    } else {
+                        media.width = conf.sizeProps.px.current.width;
+                        media.height = conf.sizeProps.px.current.height;
+                    }
+
+                    this.trigger('change', media);
+                });
+
+                plugins.push(dimensionPlugin);
+            }
+            if (this.getConfig().mediaAlignment.active) {
+                alignmentPlugin = mediaAlignmentComponent($alignmentTools, media).spread(this, 'change');
+                plugins.push(alignmentPlugin);
+            }
+        })
+        .on('destroy', function () {
+            _.forEach(plugins, function (plugin) {
+                plugin.destroy();
+            });
+        });
+
+    _.defer(function () {
+        mediaEditorComponent.init(config);
+    });
+
+    return mediaEditorComponent;
+}