@oat-sa/tao-core-ui 1.60.2 → 1.61.0

package/src/mediaEditor/plugins/mediaAlignment/helper.js

@@ -1,62 +1,62 @@
-/**
- * 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-2022  (original work) Open Assessment Technologies SA;
- */
-
-export const FLOAT_LEFT_CLASS = 'wrap-left';
-export const FLOAT_RIGHT_CLASS = 'wrap-right';
-
-export const positionFloat = function positionFloat(widget, position) {
-    if (!position) {
-        return;
-    }
-
-    widget.$container.removeClass(`${FLOAT_LEFT_CLASS} ${FLOAT_RIGHT_CLASS}`);
-    widget.$original.removeClass(`${FLOAT_LEFT_CLASS} ${FLOAT_RIGHT_CLASS}`);
-
-    let className;
-
-    switch (position) {
-        case 'right':
-            className = FLOAT_RIGHT_CLASS;
-            break;
-        case 'left':
-            className = FLOAT_LEFT_CLASS;
-            break;
-        case 'default':
-            className = '';
-    }
-
-    // Update DOM
-    widget.$container.addClass(className);
-    // Update model
-    if (className) {
-        widget.element.attr('class', className);
-    } else {
-        widget.element.removeAttr('class');
-    }
-
-    widget.$original.trigger('contentChange.qti-widget');
-};
-
-export const initAlignment = function initAlignment(widget) {
-    if (widget.element.hasClass(FLOAT_LEFT_CLASS)) {
-        return positionFloat(widget, 'left');
-    }
-    if (widget.element.hasClass(FLOAT_RIGHT_CLASS)) {
-        return positionFloat(widget, 'right');
-    }
-};
+/**
+ * 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-2022  (original work) Open Assessment Technologies SA;
+ */
+
+export const FLOAT_LEFT_CLASS = 'wrap-left';
+export const FLOAT_RIGHT_CLASS = 'wrap-right';
+
+export const positionFloat = function positionFloat(widget, position) {
+    if (!position) {
+        return;
+    }
+
+    widget.$container.removeClass(`${FLOAT_LEFT_CLASS} ${FLOAT_RIGHT_CLASS}`);
+    widget.$original.removeClass(`${FLOAT_LEFT_CLASS} ${FLOAT_RIGHT_CLASS}`);
+
+    let className;
+
+    switch (position) {
+        case 'right':
+            className = FLOAT_RIGHT_CLASS;
+            break;
+        case 'left':
+            className = FLOAT_LEFT_CLASS;
+            break;
+        case 'default':
+            className = '';
+    }
+
+    // Update DOM
+    widget.$container.addClass(className);
+    // Update model
+    if (className) {
+        widget.element.attr('class', className);
+    } else {
+        widget.element.removeAttr('class');
+    }
+
+    widget.$original.trigger('contentChange.qti-widget');
+};
+
+export const initAlignment = function initAlignment(widget) {
+    if (widget.element.hasClass(FLOAT_LEFT_CLASS)) {
+        return positionFloat(widget, 'left');
+    }
+    if (widget.element.hasClass(FLOAT_RIGHT_CLASS)) {
+        return positionFloat(widget, 'right');
+    }
+};

package/src/mediaEditor/plugins/mediaAlignment/mediaAlignmentComponent.js

@@ -1,99 +1,99 @@
-/**
- * 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 Juan Luis Gutierrez Dos Santos <juanluis.gutierrezdossantos@taotesting.com>
- */
-
-/**
- * Controls media size
- */
-import $ from 'jquery';
-import _ from 'lodash';
-import component from 'ui/component';
-import tpl from 'ui/mediaEditor/plugins/mediaAlignment/tpl/mediaAlignment';
-import 'ui/mediaEditor/plugins/mediaAlignment/style.css';
-import { FLOAT_LEFT_CLASS, FLOAT_RIGHT_CLASS } from './helper';
-
-/**
- * Creates mediaAlignment component
- * @param $container
- * @param media
- * @fires "changed" - on State changed
- * return {component|*}
- */
-export default function mediaAlignmentFactory($container, media) {
-    let $template;
-
-    const mediaAlignmentComponent = component({
-        /**
-         * Apply configurations to the view
-         */
-        update(conf) {
-            $template.find('input:checked').prop('checked', false);
-            switch (conf) {
-                case 'wrap-right':
-                    conf = 'right';
-                    $template.find('input[name="wrap-right"]').prop('checked', true);
-                    break;
-                case 'wrap-left':
-                    conf = 'left';
-                    $template.find('input[name="wrap-left"]').prop('checked', true);
-                    break;
-                default:
-                    conf = 'default';
-                    $template.find('input[name="wrap-inline"]').prop('checked', true);
-                    break;
-            }
-            media.align = conf;
-            this.trigger('change', media);
-        }
-    });
-
-    mediaAlignmentComponent
-        .on('init', function () {
-            this.render($container);
-        })
-        .on('render', function () {
-            $template = $(tpl());
-            $template.appendTo($container);
-            let container = media.$node[0].parentNode;
-            if (media.$node.parents('figure').length) {
-                // if figure parent exists then need to use figure container
-                container = media.$node.parents('figure')[0].parentNode;
-            }
-            const classListTag = container.classList;
-
-            if (classListTag.contains(FLOAT_RIGHT_CLASS)) {
-                this.update('wrap-right');
-            } else if (classListTag.contains(FLOAT_LEFT_CLASS)) {
-                this.update('wrap-left');
-            } else {
-                this.update('wrap-inline');
-            }
-
-            $template.on('click', event => {
-                event.target.name && this.update(event.target.name);
-            });
-        })
-        .on('destroy', function () {
-            $template.remove();
-        });
-
-    _.defer(() => mediaAlignmentComponent.init());
-
-    return mediaAlignmentComponent;
-}
+/**
+ * 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 Juan Luis Gutierrez Dos Santos <juanluis.gutierrezdossantos@taotesting.com>
+ */
+
+/**
+ * Controls media size
+ */
+import $ from 'jquery';
+import _ from 'lodash';
+import component from 'ui/component';
+import tpl from 'ui/mediaEditor/plugins/mediaAlignment/tpl/mediaAlignment';
+import 'ui/mediaEditor/plugins/mediaAlignment/style.css';
+import { FLOAT_LEFT_CLASS, FLOAT_RIGHT_CLASS } from './helper';
+
+/**
+ * Creates mediaAlignment component
+ * @param $container
+ * @param media
+ * @fires "changed" - on State changed
+ * return {component|*}
+ */
+export default function mediaAlignmentFactory($container, media) {
+    let $template;
+
+    const mediaAlignmentComponent = component({
+        /**
+         * Apply configurations to the view
+         */
+        update(conf) {
+            $template.find('input:checked').prop('checked', false);
+            switch (conf) {
+                case 'wrap-right':
+                    conf = 'right';
+                    $template.find('input[name="wrap-right"]').prop('checked', true);
+                    break;
+                case 'wrap-left':
+                    conf = 'left';
+                    $template.find('input[name="wrap-left"]').prop('checked', true);
+                    break;
+                default:
+                    conf = 'default';
+                    $template.find('input[name="wrap-inline"]').prop('checked', true);
+                    break;
+            }
+            media.align = conf;
+            this.trigger('change', media);
+        }
+    });
+
+    mediaAlignmentComponent
+        .on('init', function () {
+            this.render($container);
+        })
+        .on('render', function () {
+            $template = $(tpl());
+            $template.appendTo($container);
+            let container = media.$node[0].parentNode;
+            if (media.$node.parents('figure').length) {
+                // if figure parent exists then need to use figure container
+                container = media.$node.parents('figure')[0].parentNode;
+            }
+            const classListTag = container.classList;
+
+            if (classListTag.contains(FLOAT_RIGHT_CLASS)) {
+                this.update('wrap-right');
+            } else if (classListTag.contains(FLOAT_LEFT_CLASS)) {
+                this.update('wrap-left');
+            } else {
+                this.update('wrap-inline');
+            }
+
+            $template.on('click', event => {
+                event.target.name && this.update(event.target.name);
+            });
+        })
+        .on('destroy', function () {
+            $template.remove();
+        });
+
+    _.defer(() => mediaAlignmentComponent.init());
+
+    return mediaAlignmentComponent;
+}

package/src/mediaEditor/plugins/mediaAlignment/style.css

@@ -1,7 +1,7 @@
-.media-alignment {
-    margin-top: 15px;
-}
-
-.media-alignment .media-sizer-panel-label {
-    margin-bottom: 12px;
-}
+.media-alignment {
+    margin-top: 15px;
+}
+
+.media-alignment .media-sizer-panel-label {
+    margin-bottom: 12px;
+}

package/src/mediaEditor/plugins/mediaAlignment/tpl/mediaAlignment.tpl

@@ -1,25 +1,25 @@
-<div class="media-alignment">
-    <fieldset>
-        <legend class="media-sizer-panel-label">{{__ 'Position'}}</legend>
-        <label class="smaller-prompt">
-            <input type="radio" name="wrap-inline"/>
-            <span class="icon-radio"></span>
-            <span class="icon-wrap-inline"></span>
-            {{__ 'Inline'}}
-        </label>
-        <br>
-        <label class="smaller-prompt">
-            <input type="radio" name="wrap-left"/>
-            <span class="icon-radio"></span>
-            <span class="icon-wrap-left"></span>
-            {{__ 'Wrap image left'}}
-        </label>
-        <br>
-        <label class="smaller-prompt">
-            <input type="radio" name="wrap-right"/>
-            <span class="icon-radio"></span>
-            <span class="icon-wrap-right"></span>
-            {{__ 'Wrap image right'}}
-        </label>
-    </fieldset>
-</div>
+<div class="media-alignment">
+    <fieldset>
+        <legend class="media-sizer-panel-label">{{__ 'Position'}}</legend>
+        <label class="smaller-prompt">
+            <input type="radio" name="wrap-inline"/>
+            <span class="icon-radio"></span>
+            <span class="icon-wrap-inline"></span>
+            {{__ 'Inline'}}
+        </label>
+        <br>
+        <label class="smaller-prompt">
+            <input type="radio" name="wrap-left"/>
+            <span class="icon-radio"></span>
+            <span class="icon-wrap-left"></span>
+            {{__ 'Wrap image left'}}
+        </label>
+        <br>
+        <label class="smaller-prompt">
+            <input type="radio" name="wrap-right"/>
+            <span class="icon-radio"></span>
+            <span class="icon-wrap-right"></span>
+            {{__ 'Wrap image right'}}
+        </label>
+    </fieldset>
+</div>