@oat-sa/tao-core-ui 3.19.1 → 3.20.0

package/dist/datatable.js

@@ -228,7 +228,7 @@ define(['jquery', 'lodash', 'i18n', 'core/pluginifier', 'handlebars', 'lib/handl
       buffer += ">";
       if (helper = helpers.label) { stack1 = helper.call(depth0, {hash:{},data:data}); }
       else { helper = (depth0 && depth0.label); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-      buffer += escapeExpression(stack1);
+      if(stack1 || stack1 === 0) { buffer += stack1; }
       stack1 = helpers['if'].call(depth0, (depth0 && depth0.alias), {hash:{},inverse:self.noop,fn:self.program(51, program51, data),data:data});
       if(stack1 || stack1 === 0) { buffer += stack1; }
       stack1 = helpers['if'].call(depth0, (depth0 && depth0.comment), {hash:{},inverse:self.noop,fn:self.program(53, program53, data),data:data});
@@ -563,9 +563,10 @@ define(['jquery', 'lodash', 'i18n', 'core/pluginifier', 'handlebars', 'lib/handl
       buffer += ">\n                                ";
       stack1 = helpers['if'].call(depth0, (depth2 && depth2.icon), {hash:{},inverse:self.noop,fn:self.programWithDepth(75, program75, data, depth2),data:data});
       if(stack1 || stack1 === 0) { buffer += stack1; }
-      buffer += "\n                                "
-        + escapeExpression(((stack1 = (depth2 && depth2.label)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
-        + "\n                            </button>\n                                        ";
+      buffer += "\n                                ";
+      stack1 = ((stack1 = (depth2 && depth2.label)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1);
+      if(stack1 || stack1 === 0) { buffer += stack1; }
+      buffer += "\n                            </button>\n                                        ";
       return buffer;
       }
 

package/dist/dialog.js

@@ -118,8 +118,8 @@ define(['jquery', 'lodash', 'i18n', 'handlebars', 'lib/handlebars/helpers', 'ui/
       buffer += "\n        <span class=\"label\">";
       if (helper = helpers.label) { stack1 = helper.call(depth0, {hash:{},data:data}); }
       else { helper = (depth0 && depth0.label); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-      buffer += escapeExpression(stack1)
-        + "</span>\n    </button>\n";
+      if(stack1 || stack1 === 0) { buffer += stack1; }
+      buffer += "</span>\n    </button>\n";
       return buffer;
       }
     function program2(depth0,data) {

package/dist/feedback.js

@@ -96,6 +96,32 @@ define(['jquery', 'lodash', 'core/format', 'ui/component', 'util/wrapLongWords',
       //change the display (absolute or in the flow)
       popup: true
     };
+    var feedbackFactory;
+    const RUBY_HTML = /<\s*(?:ruby|rt|rp|rb)\b/i;
+    const RUBY_BLOCK = /<ruby\b[^>]*>[\s\S]*?<\/ruby>/gi;
+
+    /**
+     * HTML-encodes a string while preserving ruby annotation blocks.
+     *
+     * @param {String} str
+     * @returns {String}
+     */
+    function encodeHtmlPreservingRuby(str) {
+      var parts = [];
+      var rubies = [];
+      var lastIndex = 0;
+      var match;
+      RUBY_BLOCK.lastIndex = 0;
+      while ((match = RUBY_BLOCK.exec(str)) !== null) {
+        parts.push(str.slice(lastIndex, match.index));
+        rubies.push(match[0]);
+        lastIndex = match.index + match[0].length;
+      }
+      parts.push(str.slice(lastIndex));
+      return parts.map(function (part, index) {
+        return encode.html(part) + (rubies[index] || '');
+      }).join('');
+    }
 
     /**
      * Creates a feedback object.
@@ -110,7 +136,7 @@ define(['jquery', 'lodash', 'core/format', 'ui/component', 'util/wrapLongWords',
      * @returns {feedback} the feedback object
      * @throws {TypeError} without a container
      */
-    var feedbackFactory = function feedbackFactory($container, config) {
+    feedbackFactory = function ($container, config) {
       var feedback;
       const codeEnter = 13;
       const codeSpace = 32;
@@ -146,14 +172,15 @@ define(['jquery', 'lodash', 'core/format', 'ui/component', 'util/wrapLongWords',
           }
           this.config = _.defaults(options || {}, this.config);
           this.config.level = level;
+          const hasRubyHtml = typeof displayedMessage === 'string' && RUBY_HTML.test(displayedMessage);
 
           // encode plain text string to html
           if (this.config.encodeHtml) {
-            displayedMessage = encode.html(displayedMessage);
+            displayedMessage = hasRubyHtml ? encodeHtmlPreservingRuby(displayedMessage) : encode.html(displayedMessage);
           }
 
           // wrap long words
-          if (this.config.wrapLongWordsAfter) {
+          if (this.config.wrapLongWordsAfter && !hasRubyHtml) {
             displayedMessage = wrapLongWords(displayedMessage, this.config.wrapLongWordsAfter);
           }
 
@@ -285,7 +312,8 @@ define(['jquery', 'lodash', 'core/format', 'ui/component', 'util/wrapLongWords',
         _.pull(currents, this);
       }).init(config);
     };
+    var feedbackFactory$1 = feedbackFactory;
 
-    return feedbackFactory;
+    return feedbackFactory$1;
 
 });

package/dist/login/login.js

@@ -86,9 +86,9 @@ define(['jquery', 'lodash', 'i18n', 'ui/component', 'ui/feedback', 'util/url', '
       buffer += " aria-required=\"true\">\n            ";
       stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.fieldMessages)),stack1 == null || stack1 === false ? stack1 : stack1.password), {hash:{},inverse:self.noop,fn:self.program(7, program7, data),data:data});
       if(stack1 || stack1 === 0) { buffer += stack1; }
-      buffer += "\n        </div>\n        <div class=\"form-toolbar\"><input type=\"submit\" id=\"connect\" name=\"connect\" disabled=\"disabled\" class=\"disabled\" value=\""
+      buffer += "\n        </div>\n        <div class=\"form-toolbar\">\n            <button type=\"submit\" id=\"connect\" name=\"connect\" disabled=\"disabled\" class=\"disabled\">"
         + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Log in", options) : helperMissing.call(depth0, "__", "Log in", options)))
-        + "\"></div>\n    </form>\n</div>\n";
+        + "</button>\n        </div>\n    </form>\n</div>\n";
       return buffer;
       });
     function loginTpl(data, options, asString) {

package/dist/mediaplayer/players/html5.js

@@ -216,6 +216,39 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
         }
         return (config.debug === true || config.debug === action) && window.console.log(getDebugContext(action), ...args);
       };
+      const isVerticalLayout = () => {
+        const $layoutContext = $container.closest('.qti-interaction, .custom-text-box');
+        return ($$1('body').hasClass('item-writing-mode-vertical-rl') || $layoutContext.hasClass('writing-mode-vertical-rl')) && !$layoutContext.hasClass('writing-mode-horizontal-tb');
+      };
+      const applyVideoSizing = () => {
+        if (type !== 'video' || !$media || !$media.length) {
+          return;
+        }
+        $container.css({
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          overflow: 'hidden'
+        });
+        $media.css({
+          width: '100%',
+          height: '100%',
+          maxWidth: '100%',
+          maxHeight: '100%',
+          margin: '0 auto',
+          objectFit: 'contain',
+          objectPosition: 'center center',
+          boxSizing: 'border-box'
+        });
+        if (isVerticalLayout()) {
+          $media.css({
+            width: 'auto',
+            height: '100%',
+            maxWidth: 'none',
+            maxHeight: '100%'
+          });
+        }
+      };
       return eventifier({
         init() {
           const tpl = 'audio' === type ? audioTpl : videoTpl;
@@ -244,6 +277,7 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
             link
           }));
           $container.append($media);
+          applyVideoSizing();
           media = $media.get(0);
           result = !!(media && support.checkSupport(media));
 
@@ -433,10 +467,7 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
               $media.height($media.height());
               $media.on('loadedmetadata.recover', () => {
                 $media.off('loadedmetadata.recover');
-                $media.css({
-                  width: '',
-                  height: ''
-                });
+                applyVideoSizing();
               });
             }
             media.load();

package/dist/resource/selector.js

@@ -124,8 +124,8 @@ define(['jquery', 'lodash', 'i18n', 'ui/component', 'ui/hider', 'ui/class/select
         + " ";
       if (helper = helpers.type) { stack1 = helper.call(depth0, {hash:{},data:data}); }
       else { helper = (depth0 && depth0.type); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-      buffer += escapeExpression(stack1)
-        + " : </span><span class=\"selected-num\">0</span>\n        </div>\n    </footer>\n    ";
+      if(stack1 || stack1 === 0) { buffer += stack1; }
+      buffer += " : </span><span class=\"selected-num\">0</span>\n        </div>\n    </footer>\n    ";
       return buffer;
       }
 

package/dist/resourcemgr.js

@@ -32,8 +32,8 @@ define(['jquery', 'lodash', 'core/pluginifier', 'ui/resourcemgr/fileBrowser', 'u
       buffer += "\">\n\n    <h2>";
       if (helper = helpers.title) { stack1 = helper.call(depth0, {hash:{},data:data}); }
       else { helper = (depth0 && depth0.title); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-      buffer += escapeExpression(stack1)
-        + "</h2>\n\n    <div class=\"file-wrapper\">\n\n        <!-- left section: items selection -->\n        <section class=\"file-browser\">\n            <h1>"
+      if(stack1 || stack1 === 0) { buffer += stack1; }
+      buffer += "</h2>\n\n    <div class=\"file-wrapper\">\n\n        <!-- left section: items selection -->\n        <section class=\"file-browser\">\n            <h1>"
         + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Browse resources", options) : helperMissing.call(depth0, "__", "Browse resources", options)))
         + "</h1>\n            <div class=\"file-browser-wrapper\"></div>\n        </section>\n\n        <!-- test editor  -->\n        <section class=\"file-selector\">\n\n            <h1>\n                <div class=\"title lft\"></div>\n                <div class=\"upload-switcher rgt\">\n                    <a href=\"#\" class=\"btn-info small upload hidden\"><span class=\"icon-add\"></span>"
         + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Add file(s)", options) : helperMissing.call(depth0, "__", "Add file(s)", options)))

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "3.19.1",
+    "version": "3.20.0",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {
@@ -52,7 +52,7 @@
         "@oat-sa/prettier-config": "^0.1.1",
         "@oat-sa/rollup-plugin-wildcard-external": "^1.0.0",
         "@oat-sa/tao-calculator": "^0.6.2",
-        "@oat-sa/tao-core-libs": "^1.0.0",
+        "@oat-sa/tao-core-libs": "^1.2.1",
         "@oat-sa/tao-core-sdk": "^3.0.0",
         "@oat-sa/tao-core-shared-libs": "^1.6.1",
         "@oat-sa/tao-qunit-testrunner": "^2.0.0",

package/src/datatable/tpl/layout.tpl

@@ -64,7 +64,7 @@
                                 data-sort-by="{{#if sortId}}{{sortId}}{{else}}{{id}}{{/if}}"
                                 {{#if sorttype}}data-sort-type="{{sorttype}}"{{/if}}
                                 tabindex="0"
-                            {{/if}}>{{label}}{{#if alias}} <span class="alias">({{alias}})</span>{{/if}}{{#if comment}} <span class="comment">/ {{comment}}</span>{{/if}}</div>
+                            {{/if}}>{{{label}}}{{#if alias}} <span class="alias">({{alias}})</span>{{/if}}{{#if comment}} <span class="comment">/ {{comment}}</span>{{/if}}</div>
                         {{#if filterable}}
                         <aside data-column="{{id}}" class="filter column
                             {{#if customFilter}} customInput" >
@@ -132,7 +132,7 @@
                                 {{#if ../../title}} title="{{../../../title}}"{{/if}}
                                 {{#if ../../disabled}} disabled="disabled"{{/if}}>
                                 {{#if ../../icon}}<span class="icon-{{../../../icon}}"></span>{{/if}}
-                                {{../../label}}
+                                {{{../../label}}}
                             </button>
                                         {{/unless}}
                                     {{/with}}

package/src/dialog/tpl/buttons.tpl

@@ -1,6 +1,6 @@
 {{#each buttons}}
     <button class="btn-{{type}} small {{id}}" data-control="{{id}}" type="button">
         {{#if icon}}<span class="icon-{{icon}}"></span> {{/if}}
-        <span class="label">{{label}}</span>
+        <span class="label">{{{label}}}</span>
     </button>
 {{/each}}

package/src/feedback.js

@@ -70,6 +70,36 @@ var defaultOptions = {
     popup: true
 };
 
+var feedbackFactory;
+
+const RUBY_HTML = /<\s*(?:ruby|rt|rp|rb)\b/i;
+const RUBY_BLOCK = /<ruby\b[^>]*>[\s\S]*?<\/ruby>/gi;
+
+/**
+ * HTML-encodes a string while preserving ruby annotation blocks.
+ *
+ * @param {String} str
+ * @returns {String}
+ */
+function encodeHtmlPreservingRuby(str) {
+    var parts = [];
+    var rubies = [];
+    var lastIndex = 0;
+    var match;
+
+    RUBY_BLOCK.lastIndex = 0;
+    while ((match = RUBY_BLOCK.exec(str)) !== null) {
+        parts.push(str.slice(lastIndex, match.index));
+        rubies.push(match[0]);
+        lastIndex = match.index + match[0].length;
+    }
+    parts.push(str.slice(lastIndex));
+
+    return parts.map(function(part, index) {
+        return encode.html(part) + (rubies[index] || '');
+    }).join('');
+}
+
 /**
  * Creates a feedback object.
  *
@@ -83,7 +113,7 @@ var defaultOptions = {
  * @returns {feedback} the feedback object
  * @throws {TypeError} without a container
  */
-var feedbackFactory = function feedbackFactory($container, config) {
+feedbackFactory = function ($container, config) {
     var feedback;
     const codeEnter = 13;
     const codeSpace = 32;
@@ -124,13 +154,18 @@ var feedbackFactory = function feedbackFactory($container, config) {
                 this.config = _.defaults(options || {}, this.config);
                 this.config.level = level;
 
+                const hasRubyHtml =
+                    typeof displayedMessage === 'string' && RUBY_HTML.test(displayedMessage);
+
                 // encode plain text string to html
                 if (this.config.encodeHtml) {
-                    displayedMessage = encode.html(displayedMessage);
+                    displayedMessage = hasRubyHtml
+                        ? encodeHtmlPreservingRuby(displayedMessage)
+                        : encode.html(displayedMessage);
                 }
 
                 // wrap long words
-                if (this.config.wrapLongWordsAfter) {
+                if (this.config.wrapLongWordsAfter && !hasRubyHtml) {
                     displayedMessage = wrapLongWords(displayedMessage, this.config.wrapLongWordsAfter);
                 }
 

package/src/login/tpl/login.tpl

@@ -24,6 +24,8 @@
                 </div>
             {{/if}}
         </div>
-        <div class="form-toolbar"><input type="submit" id="connect" name="connect" disabled="disabled" class="disabled" value="{{__ "Log in"}}"></div>
+        <div class="form-toolbar">
+            <button type="submit" id="connect" name="connect" disabled="disabled" class="disabled">{{__ "Log in"}}</button>
+        </div>
     </form>
 </div>

package/src/mediaplayer/players/html5.js

@@ -115,6 +115,48 @@ export default function html5PlayerFactory($container, config = {}) {
     const debug = (action, ...args) =>
         (config.debug === true || config.debug === action) && window.console.log(getDebugContext(action), ...args);
 
+    const isVerticalLayout = () => {
+        const $layoutContext = $container.closest('.qti-interaction, .custom-text-box');
+
+        return (
+            ($('body').hasClass('item-writing-mode-vertical-rl') || $layoutContext.hasClass('writing-mode-vertical-rl')) &&
+            !$layoutContext.hasClass('writing-mode-horizontal-tb')
+        );
+    };
+
+    const applyVideoSizing = () => {
+        if (type !== 'video' || !$media || !$media.length) {
+            return;
+        }
+
+        $container.css({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'hidden'
+        });
+
+        $media.css({
+            width: '100%',
+            height: '100%',
+            maxWidth: '100%',
+            maxHeight: '100%',
+            margin: '0 auto',
+            objectFit: 'contain',
+            objectPosition: 'center center',
+            boxSizing: 'border-box'
+        });
+
+        if (isVerticalLayout()) {
+            $media.css({
+                width: 'auto',
+                height: '100%',
+                maxWidth: 'none',
+                maxHeight: '100%'
+            });
+        }
+    };
+
     return eventifier({
         init() {
             const tpl = 'audio' === type ? audioTpl : videoTpl;
@@ -142,6 +184,8 @@ export default function html5PlayerFactory($container, config = {}) {
             $media = $(tpl({ cors, preload, poster, link }));
             $container.append($media);
 
+            applyVideoSizing();
+
             media = $media.get(0);
             result = !!(media && support.checkSupport(media));
 
@@ -378,7 +422,7 @@ export default function html5PlayerFactory($container, config = {}) {
                     $media.height($media.height());
                     $media.on('loadedmetadata.recover', () => {
                         $media.off('loadedmetadata.recover');
-                        $media.css({ width: '', height: '' });
+                        applyVideoSizing();
                     });
                 }
 

package/src/resource/tpl/selector.tpl

@@ -39,7 +39,7 @@
     {{#if multiple}}
     <footer>
         <div class="get-selection">
-           <span>{{__ 'Selected'}} {{type}} : </span><span class="selected-num">0</span>
+           <span>{{__ 'Selected'}} {{{ type }}} : </span><span class="selected-num">0</span>
         </div>
     </footer>
     {{/if}}

package/src/resourcemgr/tpl/layout.tpl

@@ -1,6 +1,6 @@
 <div class="resourcemgr modal {{#if className}}{{className}}{{/if}}">
 
-    <h2>{{title}}</h2>
+    <h2>{{{ title }}}</h2>
 
     <div class="file-wrapper">