Merge pull request #453 from oat-sa/fix/AUT-2673/inline-figure-img

fix/AUT-2673/inline-figure-img
oat-sa · Nov 28, 2022 · b48c920 · b48c920
2 parents 0f61761 + 384cff6
commit b48c920
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 9 deletions.
diff --git a/views/js/loader/taoMediaManager.min.js b/views/js/loader/taoMediaManager.min.js
diff --git a/views/js/loader/taoMediaManager.min.js.map b/views/js/loader/taoMediaManager.min.js.map
diff --git a/views/js/qtiCreator/renderers/Img.js b/views/js/qtiCreator/renderers/Img.js
@@ -19,16 +19,22 @@
 define([
     'lodash',
     'taoQtiItem/qtiCommonRenderer/renderers/Img',
-    'taoMediaManager/qtiCreator/widgets/static/img/Widget'
-], function (_, Renderer, Widget) {
+    'taoMediaManager/qtiCreator/widgets/static/img/Widget',
+    'taoQtiItem/qtiCreator/widgets/static/figure/Widget',
+    'taoQtiItem/qtiCreator/model/Figure',
+    'taoQtiItem/qtiCreator/helper/findParentElement'
+], function (_, Renderer, Widget, FigureWidget, FigureModel, findParentElement) {
     'use strict';
 
     const CreatorImg = _.clone(Renderer);
 
     CreatorImg.render = function render(img, options) {
         const $container = Renderer.getContainer(img);
-        if ($container.parent('figure').length) {
+        if ($container.parent('figure').length || $container.parent('span').length && $container.parent('span').data('serial') && $container.parent('span').data('serial').includes('figure')) {
             // don't create widget if has figure parent
+            if (!$container.parent('figure').length && $container.siblings('figcaption').length) {
+                $container.siblings('figcaption').remove();
+            }
             return CreatorImg;
         }
 
@@ -39,7 +45,35 @@ define([
         options.mediaManager = this.getOption('mediaManager');
         options.assetManager = this.getAssetManager();
 
-        Widget.build(img, Renderer.getContainer(img), this.getOption('bodyElementOptionForm'), options);
+        if (
+            !$container.closest('.qti-choice, .qti-flow-container').length &&
+            !$container.closest('.qti-table caption').length
+        ) {
+            const parent = findParentElement(img.rootElement, img.serial);
+            parent.removeElement(img);
+            const figure = new FigureModel();
+            parent.setElement(figure);
+            const figureRenderer = parent.getRenderer();
+            if (figureRenderer) {
+                figure.setRenderer(figureRenderer);
+                figureRenderer.load(() => { }, ['figure']);
+            }
+            figure.setElement(img);
+            const $wrap = $container.wrap(`<span data-serial="${figure.serial}">`).parent();
+            FigureWidget.build(
+                figure,
+                $wrap,
+                this.getOption('bodyElementOptionForm'),
+                options
+            );
+        } else {
+            Widget.build(
+                img,
+                Renderer.getContainer(img),
+                this.getOption('bodyElementOptionForm'),
+                options
+            );
+        }
     };
 
     return CreatorImg;

diff --git a/views/js/qtiCreator/widgets/static/figure/Widget.js b/views/js/qtiCreator/widgets/static/figure/Widget.js
@@ -61,7 +61,13 @@ define([
     };
 
     FigureWidget.buildContainer = function buildContainer() {
-        helper.buildBlockContainer(this);
+        if (this.element.attr('showFigure')) {
+            // If it is aligned to left or right, it will have FigCaption and will need Figure tag
+            helper.buildBlockContainer(this);
+        } else {
+            // On inline aligment, it must be an Image
+            helper.buildInlineContainer(this);
+        }
         const img = _.find(this.element.getBody().elements, elem => elem.is('img'));
         const $img = this.$original.find('img');
         if ($img.length) {

diff --git a/views/js/qtiCreator/widgets/static/figure/states/Active.js b/views/js/qtiCreator/widgets/static/figure/states/Active.js
@@ -23,7 +23,7 @@ define([
     'taoQtiItem/qtiCreator/widgets/helpers/formElement',
     'taoQtiItem/qtiCreator/widgets/static/helpers/inline',
     'ui/figure/FigureStateActive',
-], function (stateFactory, ActiveState, formTpl, formElement, inlineHelper, FigureStateActive) {
+], function (stateFactory, ActiveState, formTpl, formElement, inlineHelper,FigureStateActive) {
     'use strict';
-    return FigureStateActive(stateFactory, ActiveState, formTpl, formElement, inlineHelper);
+    return FigureStateActive({ stateFactory, ActiveState, formTpl, formElement, inlineHelper });
 });