Merge pull request #2428 from oat-sa/feature/BSA-391/allow-to-disable…

…-figure-widgets

Feature/BSA-391/Allow to disable figure widgets

views/js/qtiCreator/helper/changeTracker.js

@@ -13,7 +13,7 @@
  * 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) 2019 Open Assessment Technologies SA ;
+ * Copyright (c) 2019-2023 Open Assessment Technologies SA ;
  */
 /**
  * Track the change within the itemCreator
@@ -24,11 +24,12 @@ define([
     'jquery',
     'lodash',
     'i18n',
+    'context',
     'lib/uuid',
     'core/eventifier',
     'ui/dialog',
     'taoQtiItem/qtiCreator/helper/saveChanges'
-], function ($, _, __, uuid, eventifier, dialog, saveChanges) {
+], function ($, _, __, context, uuid, eventifier, dialog, saveChanges) {
     'use strict';
 
     /**
@@ -119,7 +120,8 @@ define([
                         !$.contains(container, e.target) &&
                         !$(e.target).parents('#feedback-box').length &&
                         !$(e.target).parents('.outcome-container').length &&
-                        !$(e.target).parents('.media-alignment').length &&
+                        (context.featureFlags['FEATURE_FLAG_DISABLE_FIGURE_WIDGET'] ||
+                            !$(e.target).parents('.media-alignment').length) &&
                         !$(e.target).hasClass('icon-close') &&
                         this.hasChanged()
                     ) {

views/js/qtiCreator/model/Figure.js

@@ -13,34 +13,36 @@
  * 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) 2022 (original work) Open Assessment Technologies SA
+ * Copyright (c) 2022-2023 (original work) Open Assessment Technologies SA
  *
  */
 define([
     'lodash',
+    'context',
     'taoQtiItem/qtiCreator/model/mixin/editable',
     'taoQtiItem/qtiItem/core/Figure',
     'taoQtiItem/qtiCreator/model/Img',
     'taoQtiItem/qtiCreator/model/Figcaption'
-], function (_, editable, Figure, Img, Figcaption) {
+], function (_, context, editable, Figure, Img, Figcaption) {
     'use strict';
+    const DISABLE_FIGURE_WIDGET = context.featureFlags['FEATURE_FLAG_DISABLE_FIGURE_WIDGET'];
     const methods = {};
     _.extend(methods, editable);
     _.extend(methods, {
-        getDefaultAttributes: function () {
+        getDefaultAttributes() {
             return {
-                showFigure: false
+                showFigure: DISABLE_FIGURE_WIDGET || false
             };
         },
-        afterCreate: function () {
+        afterCreate() {
             this.getNamespace();
             const img = new Img();
             this.setElement(img);
             if (this.getRenderer()) {
                 img.setRenderer(this.getRenderer());
             }
         },
-        addCaption: function (text) {
+        addCaption(text) {
             // check that caption doesn't exist
             let figcaption = _.find(this.getBody().elements, elem => elem.is('figcaption'));
             if (!figcaption) {
@@ -57,7 +59,7 @@ define([
             }
             return figcaption;
         },
-        removeCaption: function () {
+        removeCaption() {
             const figcaption = _.find(this.getBody().elements, elem => elem.is('figcaption'));
             if (figcaption) {
                 this.removeElement(figcaption);

views/js/qtiCreator/renderers/Img.js

@@ -13,28 +13,39 @@
  * 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) 2014 (original work) Open Assessment Technologies SA (under the project TAO-PRODUCT);
+ * Copyright (c) 2014-2023 (original work) Open Assessment Technologies SA (under the project TAO-PRODUCT);
  */
 
 define([
     'lodash',
+    'context',
     'taoQtiItem/qtiCommonRenderer/renderers/Img',
     'taoQtiItem/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){
+], function (_, context, Renderer, Widget, FigureWidget, FigureModel, findParentElement) {
     'use strict';
 
     const CreatorImg = _.clone(Renderer);
 
-    CreatorImg.render = function (img, options){
+    const DISABLE_FIGURE_WIDGET = context.featureFlags['FEATURE_FLAG_DISABLE_FIGURE_WIDGET'];
+
+    CreatorImg.render = function (img, options) {
         const $container = Renderer.getContainer(img);
-        if ($container.parent('figure').length || $container.parent('span').length && $container.parent('span').data('figure')) {
+        if (
+            $container.parent('figure').length ||
+            (!DISABLE_FIGURE_WIDGET && $container.parent('span').length && $container.parent('span').data('figure'))
+        ) {
             // don't create widget if has figure parent
-            if (!$container.parent('figure').length && $container.siblings('figcaption').length) {
+            if (
+                !DISABLE_FIGURE_WIDGET &&
+                !$container.parent('figure').length &&
+                $container.siblings('figcaption').length
+            ) {
                 $container.siblings('figcaption').remove();
             }
+
             return CreatorImg;
         }
 
@@ -47,6 +58,7 @@ define([
         options.state = img.metaData.widget && img.metaData.widget.getCurrentState().name;
 
         if (
+            !DISABLE_FIGURE_WIDGET &&
             !$container.closest('.qti-choice, .qti-flow-container').length &&
             !$container.closest('.qti-table caption').length &&
             !$container.closest('.qti-modalFeedback').length
@@ -64,21 +76,10 @@ define([
             }
             figure.setElement(img);
             const $wrap = $container.wrap(`<span data-serial="${figure.serial}">`).parent();
-            FigureWidget.build(
-                figure,
-                $wrap,
-                this.getOption('bodyElementOptionForm'),
-                options
-            );
+            FigureWidget.build(figure, $wrap, this.getOption('bodyElementOptionForm'), options);
         } else {
-            Widget.build(
-                img,
-                Renderer.getContainer(img),
-                this.getOption('bodyElementOptionForm'),
-                options
-            );
+            Widget.build(img, Renderer.getContainer(img), this.getOption('bodyElementOptionForm'), options);
         }
-
     };
 
     return CreatorImg;

views/js/qtiCreator/widgets/static/figure/Widget.js

@@ -13,22 +13,24 @@
  * 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) 2022 (original work) Open Assessment Technologies SA ;
+ * Copyright (c) 2022-2023 (original work) Open Assessment Technologies SA ;
  *
  */
 define([
     'jquery',
     'lodash',
+    'context',
     'taoQtiItem/qtiCreator/widgets/static/Widget',
     'taoQtiItem/qtiCreator/widgets/static/figure/states/states',
     'taoQtiItem/qtiCreator/widgets/static/helpers/widget',
     'tpl!taoQtiItem/qtiCreator/tpl/toolbars/media',
     'taoQtiItem/qtiCreator/widgets/static/helpers/inline',
     'ui/mediaEditor/plugins/mediaAlignment/helper'
-], function ($, _, Widget, states, helper, toolbarTpl, inlineHelper, alignmentHelper) {
+], function ($, _, context, Widget, states, helper, toolbarTpl, inlineHelper, alignmentHelper) {
     'use strict';
 
     const FigureWidget = Widget.clone();
+    const DISABLE_FIGURE_WIDGET = context.featureFlags['FEATURE_FLAG_DISABLE_FIGURE_WIDGET'];
 
     FigureWidget.initCreator = function initCreator(options) {
         const figure = this.element;
@@ -61,7 +63,7 @@ define([
     };
 
     FigureWidget.buildContainer = function buildContainer() {
-        if (this.element.attr('showFigure')) {
+        if (DISABLE_FIGURE_WIDGET || 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 {

views/js/qtiCreator/widgets/static/text/states/Sleep.js

@@ -1,27 +1,39 @@
 define([
+    'context',
     'taoQtiItem/qtiCreator/widgets/states/factory',
     'taoQtiItem/qtiCreator/widgets/static/states/Sleep',
     'taoQtiItem/qtiCreator/editor/gridEditor/content'
-], function(stateFactory, SleepState, contentHelper){
+], function (context, stateFactory, SleepState, contentHelper) {
+    const DISABLE_FIGURE_WIDGET = context.featureFlags['FEATURE_FLAG_DISABLE_FIGURE_WIDGET'];
 
-    var TextBlockStateSleep = stateFactory.extend(SleepState, function(){
-        const widget = this.widget;
-        widget.afterStateExit(function(e, element, state){
-            const serial = element.getSerial();
-            if (state.name === 'active' && serial !== widget.serial && (element.qtiClass === 'include' || element.qtiClass === 'figure')){
-                // update bdy of container in case include is wrapped in custom-include-box
-                const composingElts = widget.element.getComposingElements();
-                if(composingElts[serial]){
-                    const $pseudoContainer = $('<div>').html(widget.$container.find('[data-html-editable="true"]').html());
-                    const newBody = contentHelper.getContent($pseudoContainer);
-                    const container = widget.element;
-                    container.body(newBody);
+    const TextBlockStateSleep = stateFactory.extend(
+        SleepState,
+        function () {
+            const widget = this.widget;
+            widget.afterStateExit(function (e, element, state) {
+                const serial = element.getSerial();
+                if (
+                    state.name === 'active' &&
+                    serial !== widget.serial &&
+                    (element.qtiClass === 'include' || (!DISABLE_FIGURE_WIDGET && element.qtiClass === 'figure'))
+                ) {
+                    // update bdy of container in case include is wrapped in custom-include-box
+                    const composingElts = widget.element.getComposingElements();
+                    if (composingElts[serial]) {
+                        const $pseudoContainer = $('<div>').html(
+                            widget.$container.find('[data-html-editable="true"]').html()
+                        );
+                        const newBody = contentHelper.getContent($pseudoContainer);
+                        const container = widget.element;
+                        container.body(newBody);
+                    }
                 }
-            }
-        }, 'question');
-    }, function(){
-        this.widget.offEvents('question');
-    });
+            }, 'question');
+        },
+        function () {
+            this.widget.offEvents('question');
+        }
+    );
 
     return TextBlockStateSleep;
 });

views/js/qtiXmlRenderer/renderers/Figure.js

@@ -13,20 +13,26 @@
  * 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) 2022 (original work) Open Assessment Technologies SA (under the project TAO-PRODUCT);
+ * Copyright (c) 2022-2023 (original work) Open Assessment Technologies SA (under the project TAO-PRODUCT);
  */
-define(['tpl!taoQtiItem/qtiXmlRenderer/tpl/figure'], function (tpl) {
+define(['context', 'tpl!taoQtiItem/qtiXmlRenderer/tpl/figure', 'tpl!taoQtiItem/qtiXmlRenderer/tpl/element'], function (
+    context,
+    figureTpl,
+    elementTpl
+) {
+    const DISABLE_FIGURE_WIDGET = context.featureFlags['FEATURE_FLAG_DISABLE_FIGURE_WIDGET'];
+
     return {
         qtiClass: 'figure',
-        template: tpl,
-        getData: function (figure, data) {
+        template: DISABLE_FIGURE_WIDGET ? elementTpl : figureTpl,
+        getData(figure, data) {
             const ns = figure.getNamespace();
 
             if (ns && ns.name) {
                 data.tag = `${ns.name}:figure`;
             }
 
-            if (!figure.attr('showFigure')) {
+            if (!DISABLE_FIGURE_WIDGET && !figure.attr('showFigure')) {
                 data.tag = 'img';
                 const cleanImg = data.body.split('<qh5:figcaption');
                 data.body = cleanImg[0];

views/package.json

@@ -9,6 +9,6 @@
     },
     "dependencies": {
         "@oat-sa/tao-item-runner": "^0.8.2",
-        "@oat-sa/tao-item-runner-qti": "^2.1.0"
+        "@oat-sa/tao-item-runner-qti": "^2.2.0"
     }
 }