@oat-sa/tao-core-ui 3.7.0 → 3.8.1

package/dist/datatable.js

@@ -426,6 +426,8 @@ define(['jquery', 'lodash', 'i18n', 'core/pluginifier', 'handlebars', 'lib/handl
       
       var buffer = "", stack1;
       buffer += "\n                                <button class=\"btn-info small "
+        + escapeExpression(((stack1 = (depth2 && depth2.cls)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
+        + " "
         + escapeExpression(((stack1 = (depth2 && depth2.id)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
         + "\"\n                                    ";
       stack1 = helpers['if'].call(depth0, (depth2 && depth2.title), {hash:{},inverse:self.noop,fn:self.programWithDepth(71, program71, data, depth2),data:data});
@@ -549,6 +551,8 @@ define(['jquery', 'lodash', 'i18n', 'core/pluginifier', 'handlebars', 'lib/handl
       
       var buffer = "", stack1;
       buffer += "\n                            <button class=\"btn-info small "
+        + escapeExpression(((stack1 = (depth2 && depth2.cls)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
+        + " "
         + escapeExpression(((stack1 = (depth2 && depth2.id)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
         + "\"\n                                ";
       stack1 = helpers['if'].call(depth0, (depth2 && depth2.title), {hash:{},inverse:self.noop,fn:self.programWithDepth(71, program71, data, depth2),data:data});
@@ -686,6 +690,10 @@ define(['jquery', 'lodash', 'i18n', 'core/pluginifier', 'handlebars', 'lib/handl
       }
 
       buffer += "<button class=\"btn-info small ";
+      if (helper = helpers.cls) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+      else { helper = (depth0 && depth0.cls); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+      buffer += escapeExpression(stack1)
+        + " ";
       if (helper = helpers.id) { stack1 = helper.call(depth0, {hash:{},data:data}); }
       else { helper = (depth0 && depth0.id); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
       buffer += escapeExpression(stack1)
@@ -1486,12 +1494,14 @@ define(['jquery', 'lodash', 'i18n', 'core/pluginifier', 'handlebars', 'lib/handl
                 const disabled = getPropertyValue('disabled', action, nextData);
                 const icon = getPropertyValue('icon', action, nextData);
                 const label = getPropertyValue('label', action, nextData);
+                const cls = getPropertyValue('cls', action, nextData);
                 const $actionButton = $$1(buttonTpl({
                   id,
                   icon,
                   label,
                   title,
-                  disabled
+                  disabled,
+                  cls
                 }));
                 if (!hidden) {
                   $actionCell.append('\n').append($actionButton);

package/dist/figure/FigureStateActive.js

@@ -514,6 +514,7 @@ define(['jquery', 'nouislider', 'ui/resourcemgr', 'ui/tooltip', 'lodash', 'i18n'
         const figurelem = this.widget.element;
         const $texarea = this.widget.$form.find('textarea#figcaption');
         texareaHTMLElem = $texarea[0];
+        texareaHTMLElem.style.minHeight = '2em';
         function outputsize() {
           figurelem.data('heigthCaptionInput', $texarea.height());
         }

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

@@ -78,13 +78,16 @@ define(['exports', 'context', 'lodash'], function (exports, context, _) { 'use s
       if (!context.featureFlags['FEATURE_FLAG_DISABLE_FIGURE_WIDGET'] && prevClassName !== className) {
         // Re-build Figure widget to toggle between inline/block
         const parent = searchRecurse(widget.element.bdy.rootElement.bdy, widget.serial);
-        // avoid changes on Figure in a prompt
-        if (parent.contentModel && parent.contentModel === 'inlineStatic') {
+        // If Figure is not in A-block (Prompt, TextReader PCI)
+        if (parent.contentModel === 'inlineStatic' || widget.$container.closest('.qti-customInteraction').length) {
           _.defer(() => {
             widget.element.data('widget').refresh();
           });
           return;
         }
+        // If Figure is in A-block, text is inside '<p>'. When'<figure>' is added inside, this '<p>' tag gets split and a linebreak appears.
+        // here we change state to sleep-active so that the user will see that reflected in UI immediately.
+        // otherwise, he will see this linebreak only if he focuses text in this A-block again, or reopens the item.
         widget.element.data('widget').changeState('sleep');
         _.defer(() => {
           if (parent && parent.data('widget')) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "3.7.0",
+    "version": "3.8.1",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {
@@ -19,8 +19,7 @@
         "build:scss": "node ./build/scss.js",
         "lint:src": "eslint -c .eslintrc.js src",
         "lint:test": "eslint -c test/.eslintrc.js test",
-        "lint:report": "eslint -c .eslintrc.js --output-file eslint_report.json --format json src | true",
-        "prepare": "npm run build:all"
+        "lint:report": "eslint -c .eslintrc.js --output-file eslint_report.json --format json src | true"
     },
     "keywords": [
         "tao",

package/src/datatable/tpl/button.tpl

@@ -1,4 +1,4 @@
-<button class="btn-info small {{id}}"
+<button class="btn-info small {{cls}} {{id}}"
   {{#if title}} title="{{title}}"{{/if}}
   {{#if disabled}} disabled="disabled"{{/if}}>
   {{#if icon}}<span class="icon-{{icon}}"></span>{{/if}}

package/src/datatable/tpl/layout.tpl

@@ -97,7 +97,7 @@
                                     {{#if id}}
                                         {{#with ../../../../this}}
                                             {{#unless ../hidden}}
-                                <button class="btn-info small {{../../id}}"
+                                <button class="btn-info small {{../../cls}} {{../../id}}"
                                     {{#if ../../title}} title="{{../../../title}}"{{/if}}
                                     {{#if ../../disabled}} disabled="disabled"{{/if}}>
                                     {{#if ../../icon}}<span class="icon-{{../../../icon}}"></span>{{/if}}
@@ -128,7 +128,7 @@
                                 {{#if id}}
                                     {{#with ../../../this}}
                                         {{#unless ../hidden}}
-                            <button class="btn-info small {{../../id}}"
+                            <button class="btn-info small {{../../cls}} {{../../id}}"
                                 {{#if ../../title}} title="{{../../../title}}"{{/if}}
                                 {{#if ../../disabled}} disabled="disabled"{{/if}}>
                                 {{#if ../../icon}}<span class="icon-{{../../../icon}}"></span>{{/if}}

package/src/datatable.js

@@ -887,7 +887,8 @@ const dataTable = {
                         const disabled = getPropertyValue('disabled', action, nextData);
                         const icon = getPropertyValue('icon', action, nextData);
                         const label = getPropertyValue('label', action, nextData);
-                        const $actionButton = $(buttonTpl({ id, icon, label, title, disabled }));
+                        const cls = getPropertyValue('cls', action, nextData);
+                        const $actionButton = $(buttonTpl({ id, icon, label, title, disabled, cls }));
 
                         if (!hidden) {
                             $actionCell.append('\n').append($actionButton);

package/src/figure/FigureStateActive.js

@@ -169,6 +169,7 @@ export default function ({ stateFactory, ActiveState, formTpl, formElement, inli
         const figurelem = this.widget.element;
         const $texarea = this.widget.$form.find('textarea#figcaption');
         texareaHTMLElem = $texarea[0];
+        texareaHTMLElem.style.minHeight = '2em';
         function outputsize() {
             figurelem.data('heigthCaptionInput', $texarea.height());
         }

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

@@ -82,13 +82,16 @@ export const positionFloat = function positionFloat(widget, position) {
     if (!context.featureFlags['FEATURE_FLAG_DISABLE_FIGURE_WIDGET'] && prevClassName !== className) {
         // Re-build Figure widget to toggle between inline/block
         const parent = searchRecurse(widget.element.bdy.rootElement.bdy, widget.serial);
-        // avoid changes on Figure in a prompt
-        if (parent.contentModel && parent.contentModel === 'inlineStatic') {
+        // If Figure is not in A-block (Prompt, TextReader PCI)
+        if (parent.contentModel === 'inlineStatic' || widget.$container.closest('.qti-customInteraction').length) {
             _.defer(() => {
                 widget.element.data('widget').refresh();
             });
             return;
         }
+        // If Figure is in A-block, text is inside '<p>'. When'<figure>' is added inside, this '<p>' tag gets split and a linebreak appears.
+        // here we change state to sleep-active so that the user will see that reflected in UI immediately.
+        // otherwise, he will see this linebreak only if he focuses text in this A-block again, or reopens the item.
         widget.element.data('widget').changeState('sleep');
         _.defer(() => {
             if (parent && parent.data('widget')) {