Fix/aut 3923/textreader image figure support

migrations/Version202411081031324106_pciSamples.php

@@ -0,0 +1,38 @@
+<?php
+
+declare(strict_types=1);
+
+namespace oat\pciSamples\migrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\Exception\IrreversibleMigration;
+use oat\pciSamples\scripts\install\RegisterPciTextReaderIMS;
+use oat\tao\scripts\tools\migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ *
+ * phpcs:disable Squiz.Classes.ValidClassName
+ */
+final class Version202411081031324106_pciSamples extends AbstractMigration
+{
+   public function getDescription(): string
+    {
+        return 'Update TextReader IMS PCI to support image wrap';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->runAction(new RegisterPciTextReaderIMS(), ['1.3.2']);
+    }
+
+    public function down(Schema $schema): void
+    {
+        throw new IrreversibleMigration(
+            sprintf(
+                'In order to undo this migration, please revert the client-side changes and run %s',
+                RegisterPciTextReaderIMS::class
+            )
+        );
+    }
+}

views/js/pciCreator/ims/textReaderInteraction/creator/scss/textReaderInteraction.scss

@@ -8,6 +8,13 @@
         .tr-page {
             overflow-y: visible;
         }
+
+        /* cleanup after figure/image wrap-left/wrap-right */
+        .container-editor:after {
+            content: "";
+            display: block;
+            clear: both;
+        }
     }
 }
 
@@ -48,8 +55,8 @@
         }
 
         .mini-tlb {
-            transform: translateX(-10px);
             z-index: 1000; /* above html-editable-shield */
+            right: -22px !important;
 
             .icon-bin {
                 margin: 0;

views/js/pciCreator/ims/textReaderInteraction/creator/widget/states/Question.js

@@ -353,21 +353,23 @@ define([
      * @returns {undefined}
      */
     function initEditors($container, interaction) {
-        var widget = interaction.data('widget'),
+        $container.attr('data-element-support-figure', 'true');
+
+        const widget = interaction.data('widget'),
             $pages = $container.find('.js-tab-content'),
             editorsReady = [];
 
         $pages.each(function () {
-            var pageId = $(this).data('page-id'),
+            const pageId = $(this).data('page-id'),
                 pageIndex = $(this).data('page-num');
 
             $(this).find('.js-page-column').each(function () {
-                var $editor = $(this),
+                const $editor = $(this),
                     colIndex = $editor.data('page-col-index');
 
                 editorsReady.push(new Promise(function(resolve) {
                     containerEditor.create($editor, {
-                        change : function (text) {
+                        change: function (text) {
                             saveColumn(interaction, pageId, this.colIndex, text);
                         },
                         markup : interaction.properties.pages[pageIndex].content[colIndex],
@@ -389,7 +391,7 @@ define([
 
     /**
      * Converts url to data url
-     * @param {String} url 
+     * @param {String} url
      */
     function toDataUrl(url) {
         return new Promise(function(resolve) {
@@ -409,10 +411,10 @@ define([
 
     /**
      * Save column content
-     * @param {Object} interaction 
-     * @param {String} pageId 
-     * @param {String} colIndex 
-     * @param {String} text 
+     * @param {Object} interaction
+     * @param {String} pageId
+     * @param {String} colIndex
+     * @param {String} text
      * @returns {Promise<void>}
      */
     function saveColumn(interaction, pageId, colIndex, text) {

views/js/pciCreator/ims/textReaderInteraction/imsPciCreator.json

@@ -3,7 +3,7 @@
     "typeIdentifier": "textReaderInteraction",
     "label": "Text reader",
     "description": "The Paging widget combines a scrolling widget with additional paging controls.",
-    "version": "1.3.1",
+    "version": "1.3.2",
     "author": "Aleh Hutnikau",
     "email": "contact@taotesting.com",
     "tags": ["reader", "paging"],

views/js/pciCreator/ims/textReaderInteraction/runtime/js/renderer.js

@@ -5,9 +5,10 @@ define(
         'taoQtiItem/portableLib/handlebars',
         'textReaderInteraction/runtime/js/tabs',
         'taoQtiItem/portableLib/OAT/util/tooltip',
-        'taoQtiItem/portableLib/jquery.qtip'
+        'taoQtiItem/portableLib/OAT/util/xml',
+        'taoQtiItem/portableLib/jquery.qtip',
     ],
-    function ($, _, Handlebars, Tabs, tooltipRenderer) {
+    function ($, _, Handlebars, Tabs, tooltipRenderer, xmlNsHandler) {
         'use strict';
 
         return function (options) {
@@ -156,16 +157,32 @@ define(
 
                     markup = self.options.templates.pages(templateData, self.getTemplateOptions());
 
-                    // resolve image source
+                    markup = xmlNsHandler.removeNamespace(markup); //<qh5:figure>, <qh5:figcaption>
+
                     elements = $.parseHTML(markup, document.implementation.createHTMLDocument('virtual')) || [];
                     interaction = self.options.interaction;
                     renderer = interaction && interaction.renderer;
-                    markup = elements.map(function(element) {
+                    markup = elements.map((element) => {
                         var selectorContainer = document.createElement('div');
                         selectorContainer.appendChild(element);
+
+                        // image wrap-left/wrap-right/centering
+                        const figures = selectorContainer.querySelectorAll('figure');
+                        figures.forEach((figure) => {
+                            const image = figure.querySelector('img');
+                            if (image) {
+                                const imageWidth = image.getAttribute('width');
+                                if (imageWidth) {
+                                    figure.style.width = imageWidth;
+                                    image.setAttribute('width', '100%');
+                                }
+                            }
+                        });
+
+                        // resolve image source
                         images = selectorContainer.querySelectorAll('img');
                         images = [].slice.call(images);
-                        images.forEach(function(image) {
+                        images.forEach((image) => {
                             var src = image.getAttribute('src');
                             var content = data['content-' + src];
                             if (renderer) {
@@ -175,26 +192,27 @@ define(
                             }
                         });
 
-                        anchors = selectorContainer.querySelectorAll('a');
 
-                        anchors.forEach(function(anchor) {
+                        // open links in another tab
+                        anchors = selectorContainer.querySelectorAll('a');
+                        anchors.forEach((anchor) => {
                             var href = anchor.getAttribute('href');
                             if (href && !href.trim().startsWith('#')) {
                                 anchor.setAttribute('target', '_blank');
                                 anchor.setAttribute('rel', 'noopener noreferer');
                             }
                         });
-                      return element.outerHTML || element.textContent;
+                        return element.outerHTML || element.textContent;
                     }).join('');
 
                     $container = this.options.$container.find('.js-page-container')
                         .html(markup)
                         .toggleClass('light-mode', !templateData.multiPages);
 
-                    if(data.hideTooltips) {
+                    if (data.hideTooltips) {
                         //remove tooltip anchors
                         $container.find('[data-role="tooltip-target"]').removeAttr('data-role').removeAttr('aria-describedby');
-                    }else{
+                    } else {
                         tooltipRenderer.render($container);
                     }
                 }