XWIKI-21878: Various close button modals do not use intended icons (#…

…2888) * Removed the hard coded values from the templates. * Made a REST API call from modal.js to access the current icontheme icon. Note: The only occurrence of `×` left in the project is the fallback value for the modal.js template.
xwiki · Aug 27, 2024 · 76b6530 · michitux · Nov 11, 2024 · 76b6530
1 parent 3039152
commit 76b6530
Show file tree

Hide file tree

Showing 15 changed files with 74 additions and 38 deletions.
diff --git a/...latform-attachment/xwiki-platform-attachment-api/src/main/resources/js/attachment/move.js b/...latform-attachment/xwiki-platform-attachment-api/src/main/resources/js/attachment/move.js
@@ -35,7 +35,7 @@ require(['jquery', config.treeWebjar], function ($) {
   // TODO: Should be moved to a common place (see XWIKI-19320).
   function getPageWhiteIcon() {
     if (pageWhiteIcon === undefined) {
-      const iconURL = `${XWiki.contextPath}/rest/wikis/${XWiki.currentWiki}/iconThemes/icons?name=page_white`;
+      const iconURL = `${XWiki.contextPath}/rest/wikis/${encodeURIComponent(XWiki.currentWiki)}/iconThemes/icons?name=page_white`;
       var response = window.fetch(iconURL, {
         headers: {
           'Accept': 'application/json'

diff --git a/...chment/xwiki-platform-attachment-api/src/main/resources/templates/attachment/moveStep1.vm b/...chment/xwiki-platform-attachment-api/src/main/resources/templates/attachment/moveStep1.vm
@@ -124,7 +124,7 @@
               <div class="modal-content">
                 <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
+                    <span aria-hidden="true">$services.icon.renderHTML('cross')</span>
                   </button>
                   <h5 class="modal-title">
                     $escapetool.xml($services.localization.render('attachment.move.targetLocation.modal.title'))

diff --git a/...i-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-dialog/modal.js b/...i-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-dialog/modal.js
@@ -25,26 +25,53 @@ define('modalTranslationKeys', [], [
 
 define('modal', ['jquery', 'l10n!modal', 'bootstrap'], function($, translations) {
   'use strict';
-  var modalTemplate = 
-    '<div class="modal" tabindex="-1" role="dialog" data-backdrop="static">' +
-      '<div class="modal-dialog" role="document">' +
-        '<div class="modal-content">' +
-          '<div class="modal-header">' +
-            '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
-              '<span aria-hidden="true">&times;</span>' +
-            '</button>' +
-            '<h4 class="modal-title"></h4>' +
-          '</div>' +
-          '<div class="modal-body"></div>' +
-          '<div class="modal-footer">' +
-            '<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
-            '<button type="button" class="btn btn-primary" disabled="disabled">OK</button>' +
-          '</div>' +
+  // Fetch the cross icon from the icon theme to fill up the modal template.
+  let iconURL = `${XWiki.contextPath}/rest/wikis/${encodeURIComponent(XWiki.currentWiki)}/iconThemes/icons?name=cross`;
+  // Default value taken until the fetch is fulfilled
+  var closeIconTemplate = `<span aria-hidden="true">&times;</span>`;
+  $.get(iconURL, function(response) {
+    // We override the close button content template if the request is successful
+    let iconMetadata = response.getElementsByTagName('icon')[0];
+    console.log(iconMetadata);
+    if (iconMetadata.getElementsByTagName('iconSetType')[0].textContent === 'IMAGE') {
+      closeIconTemplate = '<img src="' + iconMetadata.getElementsByTagName('url')[0].textContent +
+          '" alt="" />';
+    } else if (iconMetadata.getElementsByTagName('iconSetType')[0].textContent === 'FONT') {
+      closeIconTemplate = '<span class="' +
+          iconMetadata.getElementsByTagName('cssClass')[0].textContent +
+          '" aria-hidden="true"></span>';
+    }
+    // Once we retrieve the icon value, we
+    // 1. Replace all the uses of the icon in the DOM already generated
+    const closeButtons = document.querySelectorAll(
+      '.modal > .modal-dialog > .modal-content > .modal-header > button.close');
+    closeButtons.forEach((button)=> {
+      button.innerHTML = closeIconTemplate;
+    });
+    // 2. replace the modal template used to create new modals
+    closeButtonTemplate = closeIconTemplate;
+  });
+  let closeButtonTemplate = '<span aria-hidden="true">&times;</span>';
+  let modalTemplate = '<div class="modal" tabindex="-1" role="dialog" data-backdrop="static">' +
+    '<div class="modal-dialog" role="document">' +
+      '<div class="modal-content">' +
+        '<div class="modal-header">' +
+          '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
+            closeButtonTemplate +
+          '</button>' +
+          '<h4 class="modal-title"></h4>' +
+        '</div>' +
+        '<div class="modal-body"></div>' +
+        '<div class="modal-footer">' +
+          '<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
+          '<button type="button" class="btn btn-primary" disabled="disabled">OK</button>' +
         '</div>' +
       '</div>' +
-    '</div>',
+    '</div>' +
+  '</div>',
+
 
-  createModal = function(definition) {
+  createModal = function (definition) {
     // form(Boolean): Whether the modal is a form. Some basic form semantics and behaviour will be added if this is true
     definition = $.extend({
       title: '',
@@ -53,7 +80,7 @@ define('modal', ['jquery', 'l10n!modal', 'bootstrap'], function($, translations)
       dismissLabel: translations.get('cancel'),
       form: false
     }, definition);
-    var modal = $(modalTemplate).addClass(definition['class']).appendTo(document.body);
+    let modal = $(modalTemplate).addClass(definition['class']).appendTo(document.body);
     modal.find('.close').attr({
       title: translations.get('close'),
       'aria-label': translations.get('close')

diff --git a/...extension-security-api/src/main/resources/templates/extension/security/liveData/advice.vm b/...extension-security-api/src/main/resources/templates/extension/security/liveData/advice.vm
@@ -42,7 +42,7 @@
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
+          <span aria-hidden="true">$services.icon.renderHTML('cross')</span>
         </button>
         <h2 class="modal-title">
           $escapetool.xml($services.localization.render('extension.security.liveData.advice'))

diff --git a/...-extension-security-api/src/main/resources/templates/extension/security/liveData/cveID.vm b/...-extension-security-api/src/main/resources/templates/extension/security/liveData/cveID.vm
@@ -43,7 +43,7 @@
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <span aria-hidden="true">&times;</span>
+              <span aria-hidden="true">$services.icon.renderHTML('cross')</span>
             </button>
             <h2 class="modal-title">
               $escapetool.xml($services.localization.render(

diff --git a/...skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/commentsinline.vm b/...skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/commentsinline.vm
@@ -336,7 +336,7 @@ $xwiki.ssfx.use('uicomponents/viewers/comments.css', true)
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <button type="button" class="close" data-dismiss="modal">$services.icon.renderHTML('cross')</button>
           <div class="modal-title">$services.localization.render('core.viewers.comments.permalink')</div>
         </div>
         <div class="modal-body">
@@ -363,7 +363,7 @@ $xwiki.ssfx.use('uicomponents/viewers/comments.css', true)
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <button type="button" class="close" data-dismiss="modal">$services.icon.renderHTML('cross')</button>
           <div class="modal-title">$services.localization.render('core.viewers.comments.delete')</div>
         </div>
         <div class="modal-body">

diff --git a/...o-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/export_modal.vm b/...o-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/export_modal.vm
@@ -208,7 +208,7 @@
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">$services.icon.renderHTML('cross')</button>
           <div class="modal-title" id="exportTreeModalLabel">
             <span class="modal-title-icon">$services.icon.renderHTML('download')</span>
             #set ($title = $escapetool.xml($services.localization.render('core.exporter.exportAs', ['__format__'])))

diff --git a/...go-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/previewdiff.vm b/...go-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/previewdiff.vm
@@ -59,7 +59,7 @@
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">$services.icon.renderHTML('cross')</button>
         <div class="modal-title" id="previewDiffModalTitle">$services.localization.render('core.editors.save.previewDiff.title')</div>
         <hr />
         <div class="xHint">

diff --git a/...o-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/syntaxPicker.js b/...o-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/syntaxPicker.js
@@ -49,9 +49,14 @@
     #set ($discard = $l10n.put($key, $services.localization.render($key)))
   #end
 #end
+#set ($iconNames = ['cross'])
+#set ($icons = {})
+#foreach ($iconName in $iconNames)
+  #set ($discard = $icons.put($iconName, $services.icon.renderHTML($iconName)))
+#end
 #[[*/
 // Start JavaScript-only code.
-(function(l10n) {
+(function(l10n, icons) {
   "use strict";
 
 /**
@@ -114,9 +119,9 @@ require(['jquery', 'xwiki-syntax-converter', 'bootstrap'], function($, syntaxCon
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <span aria-hidden="true">&times;</span>
-            </button>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">`
+              + icons.cross +
+            `</button>
             <h4 class="modal-title"></h4>
           </div>
           <div class="modal-body"></div>
@@ -360,4 +365,4 @@ require(['jquery'], function($) {
 });
 
 // End JavaScript-only code.
-}).apply(']]#', $jsontool.serialize([$l10n]));
+}).apply(']]#', $jsontool.serialize([$l10n, $icons]));
diff --git a/...iki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/utilities/XWikiIcon.vue b/...iki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/utilities/XWikiIcon.vue
@@ -86,7 +86,7 @@ export default {
     async fetchRemoteIconDescriptor(iconName) {
       try {
         const parameters = `name=${encodeURIComponent(iconName)}`;
-        const iconURL = `${XWiki.contextPath}/rest/wikis/${XWiki.currentWiki}/iconThemes/icons?${parameters}`;
+        const iconURL = `${XWiki.contextPath}/rest/wikis/${encodeURIComponent(XWiki.currentWiki)}/iconThemes/icons?${parameters}`;
         const response = await window.fetch(iconURL, {
           headers: {
             'Accept': 'application/json'

diff --git a/.../xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/webjar/liveDataSource.js b/.../xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/webjar/liveDataSource.js
@@ -90,7 +90,7 @@ define('xwiki-livedata-source', ['module', 'jquery'], function(module, $) {
       var parameters = {
         // Make sure the response is not retrieved from cache (IE11 doesn't obey the caching HTTP headers).
         timestamp: new Date().getTime(),
-        namespace: `wiki:${XWiki.currentWiki}`
+        namespace: `wiki:${encodeURIComponent(XWiki.currentWiki)}`
       };
       addSourceParameters(parameters, source);
       return `${url}?${$.param(parameters, true)}`;
@@ -140,7 +140,7 @@ define('xwiki-livedata-source', ['module', 'jquery'], function(module, $) {
     }
 
     var getTranslations = function(locale, prefix, keys) {
-      const translationsURL = `${module.config().contextPath}/rest/wikis/${XWiki.currentWiki}/localization/translations`;
+      const translationsURL = `${module.config().contextPath}/rest/wikis/${encodeURIComponent(XWiki.currentWiki)}/localization/translations`;
       return Promise.resolve($.getJSON(translationsURL, $.param({
         locale: locale,
         prefix: prefix,

diff --git a/...re/xwiki-platform-localization/xwiki-platform-localization-webjar/src/main/webjar/l10n.js b/...re/xwiki-platform-localization/xwiki-platform-localization-webjar/src/main/webjar/l10n.js
@@ -20,7 +20,7 @@
 require.config({
   config: {
     'xwiki-l10n': {
-      url: `${XWiki.contextPath}/rest/wikis/${XWiki.currentWiki}/localization/translations`
+      url: `${XWiki.contextPath}/rest/wikis/${encodeURIComponent(XWiki.currentWiki)}/localization/translations`
     }
   }
 });

diff --git a/...atform-web/xwiki-platform-web-templates/src/main/resources/templates/attachment_macros.vm b/...atform-web/xwiki-platform-web-templates/src/main/resources/templates/attachment_macros.vm
@@ -229,7 +229,7 @@
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <button type="button" class="close" data-dismiss="modal">$services.icon.renderHTML('cross')</button>
           <div class="modal-title">$services.localization.render('core.viewers.attachments.delete')</div>
         </div>
         <div class="modal-body">

diff --git a/...tform-tools/xwiki-platform-tool-standards-validator/src/test/resources/xwiki-invalid.html b/...tform-tools/xwiki-platform-tool-standards-validator/src/test/resources/xwiki-invalid.html
@@ -389,7 +389,9 @@
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+              <span class="fa fa-times" aria-hidden="true"></span>
+          </button>
           <div class="modal-title" id="exportModalLabel">Export</div>
         </div>
         <div class="modal-body">

diff --git a/...latform-tools/xwiki-platform-tool-standards-validator/src/test/resources/xwiki-valid.html b/...latform-tools/xwiki-platform-tool-standards-validator/src/test/resources/xwiki-valid.html
@@ -392,7 +392,9 @@
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+              <span class="fa fa-times" aria-hidden="true"></span>
+          </button>
           <div class="modal-title" id="exportModalLabel">Export</div>
         </div>
         <div class="modal-body">