@oat-sa/tao-core-ui 3.23.0 → 3.24.0

package/dist/searchModal/advancedSearch.js

@@ -1,4 +1,4 @@
-define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/searchModal/css/advancedSearch.css', 'ui/component', 'ui/modal', 'ui/datatable', 'select2', 'core/dataProvider/request'], function ($$1, _, Handlebars, Helpers0, advancedSearch_css, component, modal, datatable, select2, request) { 'use strict';
+define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/searchModal/css/advancedSearch.css', 'ui/component', 'ui/modal', 'ui/datatable', 'select2', 'core/dataProvider/request', 'i18n'], function ($$1, _, Handlebars, Helpers0, advancedSearch_css, component, modal, datatable, select2, request, __) { 'use strict';
 
     $$1 = $$1 && Object.prototype.hasOwnProperty.call($$1, 'default') ? $$1['default'] : $$1;
     _ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
@@ -6,6 +6,7 @@ define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/sear
     Helpers0 = Helpers0 && Object.prototype.hasOwnProperty.call(Helpers0, 'default') ? Helpers0['default'] : Helpers0;
     component = component && Object.prototype.hasOwnProperty.call(component, 'default') ? component['default'] : component;
     request = request && Object.prototype.hasOwnProperty.call(request, 'default') ? request['default'] : request;
+    __ = __ && Object.prototype.hasOwnProperty.call(__, 'default') ? __['default'] : __;
 
     if (!Helpers0.__initialized) {
       Helpers0(Handlebars);
@@ -410,6 +411,7 @@ define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/sear
       let $addCriteriaInput = null;
       let $criteriaSelect = null;
       let $advancedCriteriaContainer = null;
+      let $appliedFiltersSummary = null;
       let criteriaState = null;
       let criteriaMapping = {};
       const criteriaTypes = {
@@ -422,7 +424,6 @@ define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/sear
         not: 'LOGIC_NOT'
       };
       let isAdvancedSearchStatusEnabled;
-      let isCriteriaListUpdated = false;
 
       // Creates new component
       const instance = component({
@@ -442,16 +443,20 @@ define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/sear
           if (!isAdvancedSearchStatusEnabled) {
             return Promise.resolve();
           }
-          const $criteriaIcon = $$1('.add-criteria-container a span').eq(0);
-          $criteriaIcon.toggleClass('icon-add').toggleClass('icon-loop');
+          const $criteriaIcon = $addCriteria ? $$1('a span', $addCriteria).eq(0) : $$1();
+          const idleIconClass = $criteriaIcon.hasClass('icon-plus') ? 'icon-plus' : 'icon-add';
+          $criteriaIcon.removeClass('icon-add icon-plus').addClass('icon-loop');
           return request(route).then(response => {
             criteriaMapping = response.criteriaMapping || {};
             const classTree = response.classDefinition ? response.classDefinition : response;
             const criteria = formatCriteria(classTree);
             updateCriteria(criteria);
-            isCriteriaListUpdated = true;
-            $criteriaIcon.toggleClass('icon-add').toggleClass('icon-loop');
-          }).catch(e => instance.trigger('error', e));
+            $criteriaIcon.removeClass('icon-loop').addClass(idleIconClass);
+          }).catch(e => {
+            $criteriaIcon.removeClass('icon-loop').addClass(idleIconClass);
+            instance.trigger('error', e);
+            throw e;
+          });
         },
         /**
          * Access to component state
@@ -467,10 +472,19 @@ define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/sear
         clear() {
           $advancedCriteriaContainer.removeClass(['scrollable', 'scroll-separator-top', 'scroll-separator-bottom']);
           $advancedCriteriaContainer.empty();
+          updateAppliedFiltersSummary(0);
+          // Rebuild selectable options: adding a criterion removes its <option>,
+          // so Clear must restore them (searchModal recovers via class re-select + updateCriteria).
+          if ($criteriaSelect && $criteriaSelect.length) {
+            $criteriaSelect.find('option:not(:first-child)').remove();
+          }
           _.forEach(criteriaState, criterion => {
             criterion.rendered = false;
             criterion.value = null;
             criterion.logic = null;
+            if ($criteriaSelect && $criteriaSelect.length) {
+              $criteriaSelect.append(createCriteriaOption(criterion));
+            }
           });
         },
         /**
@@ -503,7 +517,7 @@ define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/sear
           });
           return query;
         }
-      }).setTemplate(advancedSearchTpl).on('render', () => {
+      }).setTemplate(config.layoutTemplate || advancedSearchTpl).on('render', () => {
         initUiSelectors();
         initAddCriteriaSelector().then(() => {
           initCriteriaState();
@@ -521,6 +535,13 @@ define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/sear
         $addCriteriaInput = $$1('.add-criteria-container a', $container);
         $criteriaSelect = $$1('.add-criteria-container select', $container);
         $advancedCriteriaContainer = $$1('.advanced-criteria-container', $container);
+        $appliedFiltersSummary = $$1('.applied-filters-summary', $container);
+        if (config.collapsibleCriteria && $appliedFiltersSummary.length) {
+          $appliedFiltersSummary.off('click.advancedSearch').on('click.advancedSearch', function (e) {
+            e.preventDefault();
+            togglePreviousFilters();
+          });
+        }
         $advancedCriteriaContainer.on('scroll', _.throttle(animateScroll, 100));
       }
 
@@ -580,12 +601,23 @@ define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/sear
           });
 
           // open dropdown when user clicks on add criteria input
-          $addCriteriaInput.on('click', () => {
-            if (isCriteriaListUpdated) {
-              $criteriaSelect.select2('open');
-              // if dropdown is opened above addCriteria input, top property is slightly decreased to avoid overlapping with addCriteria icon
-              if ($$1('.criteria-dropdown-select2').hasClass('select2-drop-above')) {
-                $$1('.criteria-dropdown-select2').css('top', $$1('.criteria-dropdown-select2').css('top').split('px')[0] - 10 + 'px');
+          $addCriteriaInput.on('click', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            const hasOptions = $criteriaSelect.find('option').filter(function () {
+              return Boolean(this.value);
+            }).length > 0;
+            // Never open an empty select2 (mask-only / no results). Wait for ClassMetadata options.
+            if (!hasOptions) {
+              return;
+            }
+            $criteriaSelect.select2('open');
+            // if dropdown is opened above addCriteria input, top property is slightly decreased to avoid overlapping with addCriteria icon
+            const $dropdown = $$1('.criteria-dropdown-select2');
+            if ($dropdown.hasClass('select2-drop-above')) {
+              const top = parseFloat($dropdown.css('top'));
+              if (!Number.isNaN(top)) {
+                $dropdown.css('top', `${top - 10}px`);
               }
             }
           });
@@ -646,9 +678,12 @@ define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/sear
         // render new criterion
         const criterion = criteriaState[criterionToAdd];
         const $criterionContainer = renderCriterion(criterion);
+        if (config.collapsibleCriteria) {
+          wrapCriterionAsSpoiler($criterionContainer, criterion);
+        }
 
         // set logic to remove criterion
-        $$1('.icon-result-nok', $criterionContainer).on('click', {
+        $criterionContainer.find('.icon-result-nok, .filter-spoiler-delete').on('click', {
           criterion
         }, removeCriterion);
 
@@ -660,6 +695,99 @@ define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/sear
           $advancedCriteriaContainer.addClass('scrollable');
         }
         criterion.rendered = true;
+        if (config.collapsibleCriteria) {
+          reorganizeFilterLayout();
+        }
+      }
+
+      /**
+       * @returns {jQuery}
+       */
+      function getAllRenderedFilters() {
+        return $advancedCriteriaContainer.children('.filter-container').not('.invalid-criteria-warning-container');
+      }
+
+      /**
+       * @param {jQuery} $filter
+       * @param {boolean} open
+       */
+      function setFilterSpoilerOpen($filter, open) {
+        const $spoiler = $filter.find('.filter-spoiler').first();
+        if (!$spoiler.length) {
+          return;
+        }
+        $spoiler.toggleClass('is-open', open);
+        $filter.find('.filter-spoiler-toggle').attr('aria-expanded', open);
+      }
+
+      /**
+       * @param {number} appliedCount
+       * @returns {string}
+       */
+      function getAppliedFiltersSummaryText(appliedCount) {
+        if (appliedCount === 1) {
+          return __('1 filter applied');
+        }
+        return __('%s filters applied').replace('%s', String(appliedCount));
+      }
+
+      /**
+       * Keeps each filter as its own spoiler card: newest expanded, previous collapsed (headers stay visible).
+       * With collapsibleCriteria, newest is prepended (index 0); otherwise newest is last.
+       */
+      function reorganizeFilterLayout() {
+        const $filters = getAllRenderedFilters();
+        const count = $filters.length;
+        updateAppliedFiltersSummary(count);
+        if (count === 0) {
+          return;
+        }
+        const openIndex = config.collapsibleCriteria ? 0 : count - 1;
+        $filters.each(function (index) {
+          setFilterSpoilerOpen($$1(this), index === openIndex);
+        });
+        if ($appliedFiltersSummary && $appliedFiltersSummary.length) {
+          $appliedFiltersSummary.attr('aria-expanded', 'false');
+        }
+      }
+
+      /**
+       * Updates the "N filters applied" summary next to Add filter.
+       * @param {number} appliedCount
+       */
+      function updateAppliedFiltersSummary(appliedCount) {
+        if ($appliedFiltersSummary && $appliedFiltersSummary.length) {
+          if (appliedCount > 0) {
+            $appliedFiltersSummary.text(getAppliedFiltersSummaryText(appliedCount)).removeClass('hidden').prop('hidden', false);
+          } else {
+            $appliedFiltersSummary.addClass('hidden').prop('hidden', true).text('').attr('aria-expanded', 'false');
+          }
+        }
+        instance.trigger('criteriachange', {
+          count: appliedCount
+        });
+      }
+
+      /**
+       * Toggles expand/collapse for all filters except the newest one.
+       * With collapsibleCriteria (prepend), newest is first; otherwise newest is last.
+       */
+      function togglePreviousFilters() {
+        const $filters = getAllRenderedFilters();
+        if ($filters.length <= 1) {
+          return;
+        }
+        const $previous = config.collapsibleCriteria ? $filters.slice(1) : $filters.slice(0, -1);
+        const anyOpen = $previous.filter(function () {
+          return $$1(this).find('.filter-spoiler').first().hasClass('is-open');
+        }).length > 0;
+        const open = !anyOpen;
+        $previous.each(function () {
+          setFilterSpoilerOpen($$1(this), open);
+        });
+        if ($appliedFiltersSummary && $appliedFiltersSummary.length) {
+          $appliedFiltersSummary.attr('aria-expanded', open);
+        }
       }
 
       /**
@@ -677,9 +805,15 @@ define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/sear
         } else {
           templateToUse = listCheckboxCriterionTpl;
         }
-        $advancedCriteriaContainer.append(templateToUse({
-          criterion
-        }));
+        if (config.collapsibleCriteria) {
+          $advancedCriteriaContainer.prepend(templateToUse({
+            criterion
+          }));
+        } else {
+          $advancedCriteriaContainer.append(templateToUse({
+            criterion
+          }));
+        }
         const $criterionContainer = $$1(`.${criterion.id}-filter`, $container);
         const valueMapping = criteriaMapping[criterion.type];
 
@@ -760,15 +894,17 @@ define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/sear
        * @param {object} $criterionContainer - rendered criterion
        */
       function bindCriterionValue(criterion, $criterionContainer) {
+        if (criterion.type === criteriaTypes.text) {
+          // Bind synchronously so typing / Search right after Add filter is not lost
+          // (getInitialCriterionLabel resolves on a microtask).
+          $$1('input', $criterionContainer).val(criterion.value);
+          $$1('input', $criterionContainer).on('input change', function () {
+            criterion.value = $$1(this).val() || null;
+          });
+          return;
+        }
         getInitialCriterionLabel(criterion).then(initialCriterion => {
-          if (criterion.type === criteriaTypes.text) {
-            // set initial value
-            $$1('input', $criterionContainer).val(criterion.value);
-            // set event to bind input value to critariaState
-            $$1('input', $criterionContainer).on('change', function () {
-              criterion.value = $$1(this).val() || null;
-            });
-          } else if (criterion.type === criteriaTypes.list && criterion.uri) {
+          if (criterion.type === criteriaTypes.list && criterion.uri) {
             // set initial value
             if (criterion.value) {
               $$1(`input[name=${criterion.id}-select]`, $criterionContainer).select2('data', initialCriterion);
@@ -798,6 +934,58 @@ define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/sear
         });
       }
 
+      /**
+       * Wraps a rendered criterion in a collapsible spoiler (Resource Manager UX).
+       * @param {jQuery} $criterionContainer
+       * @param {object} criterion
+       */
+      function wrapCriterionAsSpoiler($criterionContainer, criterion) {
+        let $deleteBtn = $criterionContainer.find('.icon-result-nok').first();
+        if (!$deleteBtn.length) {
+          $deleteBtn = $$1('<button>', {
+            type: 'button',
+            class: 'filter-spoiler-delete icon-bin',
+            'aria-label': __('Remove criteria')
+          });
+        } else {
+          $deleteBtn.attr('type', 'button').removeClass('icon-result-nok').addClass('filter-spoiler-delete icon-bin').attr('aria-label', __('Remove criteria'));
+        }
+        const $title = $$1('<span>', {
+          class: 'filter-spoiler-title',
+          text: criterion.label
+        });
+        const $toggle = $$1('<button>', {
+          type: 'button',
+          class: 'filter-spoiler-toggle',
+          'aria-expanded': 'true'
+        }).append($title);
+        const $header = $$1('<div>', {
+          class: 'filter-spoiler-header'
+        }).append($toggle, $deleteBtn);
+        const $body = $$1('<div>', {
+          class: 'filter-spoiler-body'
+        });
+        $criterionContainer.children().appendTo($body);
+        const $spoiler = $$1('<div>', {
+          class: 'filter-spoiler is-open'
+        }).append($header, $body);
+        $criterionContainer.empty().append($spoiler);
+        $criterionContainer.addClass('filter-spoiler-wrapper');
+        $toggle.on('click', function (e) {
+          e.preventDefault();
+          const $spoilerEl = $criterionContainer.find('.filter-spoiler').first();
+          const willOpen = !$spoilerEl.hasClass('is-open');
+          if (willOpen && config.collapsibleCriteria) {
+            getAllRenderedFilters().each(function () {
+              if (this !== $criterionContainer.get(0)) {
+                setFilterSpoilerOpen($$1(this), false);
+              }
+            });
+          }
+          setFilterSpoilerOpen($criterionContainer, willOpen);
+        });
+      }
+
       /**
        * Removes a criterion from advanced criteria container when user clicks on the criterion close icon.
        * It also adds the option element to criteria select so removed criterion can be rendered again
@@ -809,7 +997,7 @@ define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/sear
         const criterionKey = getCriterionStateId(criterion);
 
         // remove criterion and append new criterion to select options
-        $$1(this).parent().remove();
+        $$1(this).closest('.filter-container').remove();
         $criteriaSelect.append(newOption);
 
         // reset criterion values on criteriaState
@@ -820,6 +1008,9 @@ define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/sear
         if ($advancedCriteriaContainer.get(0).scrollHeight <= $advancedCriteriaContainer.outerHeight()) {
           $advancedCriteriaContainer.removeClass('scrollable');
         }
+        if (config.collapsibleCriteria) {
+          reorganizeFilterLayout();
+        }
       }
 
       /**
@@ -832,15 +1023,23 @@ define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/sear
       function formatCriteria(classTree) {
         let criteria = [];
         _.forEach(classTree, classInstance => {
-          criteria.push(...classInstance.metadata);
+          const metadata = classInstance && classInstance.metadata;
+          if (Array.isArray(metadata) && metadata.length) {
+            criteria.push(...metadata);
+          }
         });
 
         // extends each criterion with an id that can be use as a valid css class
-        _.forEach(criteria, criterion => {
+        criteria = criteria.filter(criterion => {
+          const id = String(criterion && criterion.propertyUri || '').replace(/^[^a-zA-Z]*|[^a-zA-Z0-9]*/g, '');
+          if (!id) {
+            return false;
+          }
           criterion.label = getCriterionLabel(criterion);
-          criterion.id = criterion.propertyUri.replace(/^[^a-zA-Z]*|[^a-zA-Z0-9]*/g, '');
+          criterion.id = id;
+          return true;
         });
-        return criteria;
+        return _.uniqBy(criteria, 'propertyUri');
       }
 
       /**
@@ -856,6 +1055,9 @@ define(['jquery', 'lodash', 'handlebars', 'lib/handlebars/helpers', 'css!ui/sear
         const invalidCriteria = deleteDeprecatedCriteria(criteria);
         extendCriteria(criteria);
         renderWarningMessage(invalidCriteria);
+        if (config.collapsibleCriteria) {
+          reorganizeFilterLayout();
+        }
       }
 
       /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "3.23.0",
+    "version": "3.24.0",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {
@@ -20,7 +20,8 @@
         "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"
+        "prepare": "npm run build:all",
+        "audit:critical": "npm audit --audit-level=critical"
     },
     "keywords": [
         "tao",
@@ -43,9 +44,9 @@
     },
     "license": "GPL-2.0",
     "devDependencies": {
-        "@babel/core": "^7.19.3",
-        "@babel/eslint-parser": "^7.19.1",
-        "@babel/preset-env": "^7.19.4",
+        "@babel/core": "^7.28.5",
+        "@babel/eslint-parser": "^7.28.5",
+        "@babel/preset-env": "^7.28.5",
         "@csstools/postcss-sass": "^5.0.1",
         "@oat-sa/browserslist-config-tao": "^1.0.1",
         "@oat-sa/eslint-config-tao": "^2.0.0",
@@ -60,7 +61,7 @@
         "autoprefixer": "^10.4.14",
         "cross-env": "^7.0.2",
         "devbridge-autocomplete": "^1.2.20",
-        "dompurify": "^2.4.0",
+        "dompurify": "^2.5.9",
         "eslint": "^8.39.0",
         "flatpickr": "4.5.7",
         "fs-extra": "^11.1.1",
@@ -95,6 +96,14 @@
         "text": "git+https://github.com/requirejs/text.git#2.0.16",
         "tooltip.js": "^1.3.3"
     },
+    "overrides": {
+        "shell-quote": "1.10.0",
+        "@babel/traverse": "^7.28.5",
+        "istanbul-lib-instrument": "^6.0.3",
+        "rollup-plugin-handlebars-plus": {
+            "handlebars": "~4.7.9"
+        }
+    },
     "browserslist": [
         "extends @oat-sa/browserslist-config-tao"
     ],

package/src/image/ImgStateActive/initHelper.js

@@ -11,9 +11,9 @@
  *
  * You should have received a copy of the GNU General Public License
  * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ * Foundation, Inc., 31 Milk St # 960789 Boston, MA 02196 USA.
  *
- * Copyright (c) 2021 (original work) Open Assessment Technologies SA ;
+ * Copyright (c) 2021-2026 (original work) Open Assessment Technologies SA ;
  *
  */
 import $ from 'jquery';
@@ -38,11 +38,30 @@ export const initAdvanced = function (widget) {
 export const initUpload = function (widget) {
     const $form = widget.$form;
     const options = widget.options;
-    const { img } = getImage(widget);
+    const { img, $img } = getImage(widget);
     const $uploadTrigger = $form.find('[data-role="upload-trigger"]');
     const $src = $form.find('input[name=src]');
     const $alt = $form.find('input[name=alt]');
 
+    const commitSrc = function (srcValue) {
+        $src.val(srcValue);
+        // Keep QTI model + preview in sync immediately: the form src callback is
+        // throttled (1s), so a late trailing call must not leave a rejected pick.
+        if (img) {
+            img.attr('src', srcValue);
+        }
+        if ($img && $img.length) {
+            $img.attr('src', srcValue ? widget.getAssetManager().resolve(srcValue) : '');
+            $img.trigger('contentChange.qti-widget').change();
+        }
+        _.defer(function () {
+            if (img) {
+                img.attr('off-media-editor', 1);
+            }
+            $src.trigger('change');
+        });
+    };
+
     const _openResourceMgr = function () {
         $uploadTrigger.resourcemgr({
             title: __(
@@ -51,10 +70,15 @@ export const initUpload = function (widget) {
             appendContainer: options.mediaManager.appendContainer,
             mediaSourcesUrl: options.mediaManager.mediaSourcesUrl,
             browseUrl: options.mediaManager.browseUrl,
+            searchUrl: options.mediaManager.searchUrl,
             uploadUrl: options.mediaManager.uploadUrl,
             deleteUrl: options.mediaManager.deleteUrl,
             downloadUrl: options.mediaManager.downloadUrl,
             fileExistsUrl: options.mediaManager.fileExistsUrl,
+            rootClassUri: options.mediaManager.rootClassUri,
+            classMappingUrl: options.mediaManager.classMappingUrl,
+            statusUrl: options.mediaManager.statusUrl,
+            maxListSize: options.mediaManager.maxListSize,
             params: {
                 uri: options.uri,
                 lang: options.lang,
@@ -69,44 +93,58 @@ export const initUpload = function (widget) {
             pathParam: 'path',
             path: options.mediaManager.path,
             root: options.mediaManager.root,
+            currentAsset: $src.val() || null,
             select: function (e, files) {
                 let file, alt;
                 let confirmBox, cancel, save;
-                if (files && files.length) {
-                    file = files[0].file;
-                    alt = files[0].alt;
-                    $src.val(file);
-                    if ($.trim($alt.val()) === '') {
-                        if (alt === '') {
-                            alt = extractLabel(file);
-                        }
+                if (!(files && files.length)) {
+                    return;
+                }
+
+                file = files[0].file;
+                alt = files[0].alt;
+
+                // Apply the new file immediately; alt confirm only decides alt text.
+                commitSrc(file);
+
+                if ($.trim($alt.val()) === '') {
+                    if (alt === '') {
+                        alt = extractLabel(file);
+                    }
+                    if (img) {
                         img.attr('alt', alt);
-                        $alt.val(alt).trigger('change');
-                    } else {
-                        confirmBox = $('.change-alt-modal-feedback', $form);
-                        cancel = confirmBox.find('.cancel');
-                        save = confirmBox.find('.save');
+                    }
+                    $alt.val(alt).trigger('change');
+                    return;
+                }
 
-                        $('.alt-text', confirmBox).html(`"${$alt.val()}"<br>${__('with')}<br>"${alt}" ?`);
+                // Existing alt: confirm replace. Cancel / overlay / Esc keeps the new image;
+                // only alt text stays unchanged unless the user confirms.
+                confirmBox = $('.change-alt-modal-feedback', $form);
+                cancel = confirmBox.find('.cancel');
+                save = confirmBox.find('.save');
 
-                        confirmBox.modal({ width: 500 });
+                const $altText = $('.alt-text', confirmBox).empty();
+                $altText
+                    .append(document.createTextNode(`"${$alt.val()}"`))
+                    .append($('<br>'))
+                    .append(document.createTextNode(__('with')))
+                    .append($('<br>'))
+                    .append(document.createTextNode(`"${alt}" ?`));
 
-                        save.off('click').on('click', function () {
-                            img.attr('alt', alt);
-                            $alt.val(alt).trigger('change');
-                            confirmBox.modal('close');
-                        });
+                confirmBox.modal({ width: 500 });
 
-                        cancel.off('click').on('click', function () {
-                            confirmBox.modal('close');
-                        });
+                save.off('click').on('click', function () {
+                    if (img) {
+                        img.attr('alt', alt);
                     }
+                    $alt.val(alt).trigger('change');
+                    confirmBox.modal('close');
+                });
 
-                    _.defer(function () {
-                        img.attr('off-media-editor', 1);
-                        $src.trigger('change');
-                    });
-                }
+                cancel.off('click').on('click', function () {
+                    confirmBox.modal('close');
+                });
             },
             open: function () {
                 // hide tooltip if displayed

package/src/previewer.js

@@ -227,7 +227,7 @@ const previewer = {
                     // stop video, free the socket and remove player interface on video deletion
                     // stop video and free the socket on all other cases when video is selected or temporary hidden or modal window is closed
                     $controls = $(
-                        '.actions a:nth-child(1), .actions a:nth-child(3), .icon-close, .upload-switcher, .select-action, .files li>span',
+                        '.actions a:nth-child(1), .actions a:nth-child(3), .icon-close, .upload-switcher, .select-action, .files-list tr, .files .desc',
                         '#mediaManager'
                     );
                     $controls.off('mousedown.mediaelement').on('mousedown.mediaelement', function(event) {