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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "3.19.1",
+    "version": "3.19.2",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {

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/rubyHtml.js

@@ -0,0 +1,153 @@
+/**
+ * Helpers for TAO i18n ruby annotation markup in UI components.
+ */
+import $ from 'jquery';
+import DOMPurify from 'dompurify';
+
+const rubyTagPattern = /<ruby[\s>]|{ruby}/i;
+
+const purifyConfig = {
+    ADD_TAGS: ['ruby', 'rb', 'rt']
+};
+
+/**
+ * Whether a string contains ruby annotation markup.
+ * @param {String} str
+ * @returns {Boolean}
+ */
+export function containsRubyMarkup(str) {
+    return typeof str === 'string' && rubyTagPattern.test(str);
+}
+
+/**
+ * Convert TAO i18n ruby placeholders to HTML tags.
+ * @param {String} str
+ * @returns {String}
+ */
+export function normalizeRubyPlaceholders(str) {
+    if (typeof str !== 'string') {
+        return '';
+    }
+
+    return str
+        .replace(/\{ruby\}/g, '<ruby>')
+        .replace(/\{\/ruby\}/g, '</ruby>')
+        .replace(/\{rb\}/g, '<rb>')
+        .replace(/\{\/rb\}/g, '</rb>')
+        .replace(/\{rt\}/g, '<rt>')
+        .replace(/\{\/rt\}/g, '</rt>');
+}
+
+/**
+ * Sanitize ruby HTML with the same tag allowlist used in templates.
+ * @param {String} str
+ * @returns {String}
+ */
+export function sanitizeRubyHtml(str) {
+    if (typeof str !== 'string' || !str) {
+        return '';
+    }
+
+    return DOMPurify.sanitize(normalizeRubyPlaceholders(str), purifyConfig);
+}
+
+/**
+ * Strip ruby markup to plain text (for placeholders and option text).
+ * @param {String} str
+ * @returns {String}
+ */
+export function toPlainText(str) {
+    if (typeof str !== 'string' || !str) {
+        return '';
+    }
+
+    if (!containsRubyMarkup(str)) {
+        return str;
+    }
+
+    const template = document.createElement('template');
+    template.innerHTML = normalizeRubyPlaceholders(str);
+    template.content.querySelectorAll('rt').forEach(rt => rt.remove());
+
+    return template.content.textContent || '';
+}
+
+/**
+ * @param {jQuery} $option
+ * @returns {jQuery|String|null}
+ */
+function formatRubyOption(option) {
+    if (!option.element) {
+        return null;
+    }
+
+    const rubyHtml = $(option.element).data('ruby-html');
+    if (rubyHtml) {
+        return $('<span>').html(sanitizeRubyHtml(rubyHtml));
+    }
+
+    return null;
+}
+
+/**
+ * Prepare select options for select2 ruby rendering.
+ * @param {jQuery} $select
+ */
+export function prepareSelectOptions($select) {
+    $select.find('option').each(function prepareOption() {
+        const text = this.text;
+
+        if (!containsRubyMarkup(text)) {
+            return;
+        }
+
+        const sanitized = sanitizeRubyHtml(text);
+        $(this).data('ruby-html', sanitized);
+        this.text = toPlainText(sanitized);
+    });
+}
+
+/**
+ * Strip ruby markup from select placeholder attributes.
+ * @param {jQuery} $select
+ */
+export function stripSelectPlaceholder($select) {
+    const placeholder = $select.attr('placeholder') || $select.data('placeholder');
+
+    if (placeholder && containsRubyMarkup(placeholder)) {
+        const plain = toPlainText(placeholder);
+        $select.attr('placeholder', plain);
+        $select.data('placeholder', plain);
+    }
+}
+
+/**
+ * Add select2 formatters for ruby option labels.
+ * @param {Object} [config]
+ * @returns {Object}
+ */
+export function enhanceSelect2Config(config) {
+    config = config || {};
+    const baseFormatResult = config.formatResult;
+    const baseFormatSelection = config.formatSelection;
+
+    config.formatResult = function formatResult(option, container, query) {
+        const ruby = formatRubyOption(option);
+        if (ruby !== null) {
+            return ruby;
+        }
+
+        return baseFormatResult ? baseFormatResult(option, container, query) : option.text;
+    };
+
+    config.formatSelection = function formatSelection(option) {
+        const ruby = formatRubyOption(option);
+        if (ruby !== null) {
+            return ruby;
+        }
+
+        return baseFormatSelection ? baseFormatSelection(option) : option.text;
+    };
+
+    return config;
+}