[5.2] Other JS improvements

build/media_source/system/js/core.es6.js

@@ -109,7 +109,7 @@ window.Joomla.Modal = window.Joomla.Modal || {
       newDestination = {};
     }
 
-    [].slice.call(Object.keys(source)).forEach((key) => {
+    Object.keys(source).forEach((key) => {
       newDestination[key] = source[key];
     });
 
@@ -155,10 +155,9 @@ window.Joomla.Modal = window.Joomla.Modal || {
   Joomla.loadOptions = (options) => {
     // Load form the script container
     if (!options) {
-      const elements = [].slice.call(document.querySelectorAll('.joomla-script-options.new'));
       let counter = 0;
 
-      elements.forEach((element) => {
+      document.querySelectorAll('.joomla-script-options.new').forEach((element) => {
         const str = element.text || element.textContent;
         const option = JSON.parse(str);
 
@@ -180,7 +179,7 @@ window.Joomla.Modal = window.Joomla.Modal || {
       Joomla.optionsStorage = options || {};
     } else if (options) {
       // Merge with existing
-      [].slice.call(Object.keys(options)).forEach((key) => {
+      Object.keys(options).forEach((key) => {
         /**
          * If both existing and new options are objects, merge them with Joomla.extend().
          * But test for new option being null, as null is an object, but we want to allow
@@ -241,7 +240,7 @@ window.Joomla.Modal = window.Joomla.Modal || {
      * @returns {Joomla.Text}
      */
     load: (object) => {
-      [].slice.call(Object.keys(object)).forEach((key) => {
+      Object.keys(object).forEach((key) => {
         Joomla.Text.strings[key.toUpperCase()] = object[key];
       });
 
@@ -513,10 +512,8 @@ window.Joomla.Modal = window.Joomla.Modal || {
       return;
     }
 
-    const elements = [].slice.call(document.getElementsByTagName('input'));
-
-    elements.forEach((element) => {
-      if (element.type === 'hidden' && element.value === '1' && element.name.length === 32) {
+    document.querySelectorAll('input[type="hidden"]').forEach((element) => {
+      if (element.value === '1' && element.name.length === 32) {
         element.name = newToken;
       }
     });
@@ -596,7 +593,7 @@ window.Joomla.Modal = window.Joomla.Modal || {
 
       // Custom headers
       if (newOptions.headers) {
-        [].slice.call(Object.keys(newOptions.headers)).forEach((key) => {
+        Object.keys(newOptions.headers).forEach((key) => {
           // Allow request without Content-Type
           // eslint-disable-next-line no-empty
           if (key === 'Content-Type' && newOptions.headers['Content-Type'] === 'false') {

build/media_source/system/js/fields/joomla-field-permissions.w-c.es6.js

@@ -32,7 +32,7 @@ window.customElements.define('joomla-field-permissions', class extends HTMLEleme
    * Lifecycle
    */
   connectedCallback() {
-    this.buttons = [].slice.call(document.querySelectorAll(`[${this.buttonDataSelector}]`));
+    this.buttons = document.querySelectorAll(`[${this.buttonDataSelector}]`);
     if (this.buttons) {
       this.buttons.forEach((button) => {
         button.addEventListener('change', this.onDropdownChange);

build/media_source/system/js/fields/joomla-field-simple-color.w-c.es6.js

@@ -215,7 +215,7 @@
         throw new Error('Simple color field requires a select element');
       }
 
-      this.options = [].slice.call(this.select.querySelectorAll('option'));
+      this.options = this.select.querySelectorAll('option');
 
       this.select.classList.add('hidden');
 

build/media_source/system/js/fields/passwordstrength.es6.js

@@ -121,7 +121,7 @@ class PasswordStrength {
   };
 
   document.addEventListener('DOMContentLoaded', () => {
-    const fields = [].slice.call(document.querySelectorAll('.js-password-strength'));
+    const fields = document.querySelectorAll('.js-password-strength');
 
     // Loop  through the fields
     fields.forEach((field, index) => {
@@ -155,9 +155,7 @@ class PasswordStrength {
       }
 
       // Add a listener for input data change
-      field.addEventListener('keyup', ({ target }) => {
-        getMeter(target);
-      });
+      field.addEventListener('keyup', ({ target }) => getMeter(target));
     });
 
     // Set a handler for the validation script

build/media_source/system/js/fields/select-colour.es6.js

@@ -19,9 +19,7 @@
   };
 
   const updateSelectboxColour = () => {
-    const colourSelects = [].slice.call(document.querySelectorAll('.form-select-color-state'));
-
-    colourSelects.forEach((colourSelect) => {
+    document.querySelectorAll('.form-select-color-state').forEach((colourSelect) => {
       const value = parseInt(colourSelect.value, 10);
 
       // Add class on page load

build/media_source/system/js/fields/validate.es6.js

@@ -37,9 +37,7 @@ class JFormValidator {
     });
 
     // Attach all forms with a class 'form-validate'
-    const forms = [].slice.call(document.querySelectorAll('form'));
-
-    forms.forEach((form) => {
+    document.querySelectorAll('form').forEach((form) => {
       if (form.classList.contains('form-validate')) {
         this.attachToForm(form);
       }
@@ -74,8 +72,7 @@ class JFormValidator {
       }
     }
 
-    element.classList.remove('form-control-danger');
-    element.classList.remove('invalid');
+    element.classList.remove('form-control-danger', 'invalid');
     element.classList.add('form-control-success');
     element.parentNode.classList.remove('has-danger');
     element.parentNode.classList.add('has-success');
@@ -97,10 +94,8 @@ class JFormValidator {
     // Get a label
     const label = element.form.querySelector(`label[for="${element.id}"]`);
 
-    element.classList.remove('form-control-success');
-    element.classList.remove('valid');
-    element.classList.add('form-control-danger');
-    element.classList.add('invalid');
+    element.classList.remove('form-control-success', 'valid');
+    element.classList.add('form-control-danger', 'invalid');
     element.parentNode.classList.remove('has-success');
     element.parentNode.classList.add('has-danger');
     element.setAttribute('aria-invalid', 'true');
@@ -145,18 +140,13 @@ class JFormValidator {
       message = label.querySelector('span.form-control-feedback');
     }
 
-    element.classList.remove('form-control-danger');
-    element.classList.remove('form-control-success');
-    element.classList.remove('invalid');
+    element.classList.remove('form-control-danger', 'form-control-success', 'remove');
     element.classList.add('valid');
-    element.parentNode.classList.remove('has-danger');
-    element.parentNode.classList.remove('has-success');
+    element.parentNode.classList.remove('has-danger', 'has-success');
 
     // Remove message
-    if (message) {
-      if (label) {
-        label.removeChild(message);
-      }
+    if (message && label) {
+      label.removeChild(message);
     }
 
     // Restore Label
@@ -256,7 +246,7 @@ class JFormValidator {
     if (form.nodeName === 'FORM') {
       fields = [].slice.call(form.elements);
     } else {
-      fields = [].slice.call(form.querySelectorAll('input, textarea, select, button, fieldset'));
+      fields = form.querySelectorAll('input, textarea, select, button, fieldset');
     }
     fields.forEach((field) => {
       if (this.validate(field) === false) {
@@ -294,7 +284,7 @@ class JFormValidator {
     if (form.nodeName === 'FORM') {
       elements = [].slice.call(form.elements);
     } else {
-      elements = [].slice.call(form.querySelectorAll('input, textarea, select, button, fieldset'));
+      elements = form.querySelectorAll('input, textarea, select, button, fieldset');
     }
 
     // Iterate through the form object and attach the validate method to all input fields.

build/media_source/system/js/highlight.es6.js

@@ -29,9 +29,7 @@ if (Joomla.getOptions && typeof Joomla.getOptions === 'function' && Joomla.getOp
         const instance = new Mark(element);
 
         // Loop through the terms
-        options.highLight.forEach((term) => {
-          instance.mark(term, options);
-        });
+        options.highLight.forEach((term) => instance.mark(term, options));
       }
     } else {
       const start = document.querySelector(`#${options.start}`);

build/media_source/system/js/inlinehelp.es6.js

@@ -9,49 +9,47 @@
  * @param {String} toggleClass The class name of the DIVs to toggle display for
  */
 Joomla.toggleInlineHelp = (toggleClass) => {
-  [].slice.call(document.querySelectorAll(`div.${toggleClass}`))
-    .forEach((elDiv) => {
-      // Toggle the visibility of the node by toggling the 'd-none' Bootstrap class.
-      elDiv.classList.toggle('d-none');
-      // The ID of the description whose visibility is toggled.
-      const myId = elDiv.id;
-      // The ID of the control described by this node (same ID, minus the '-desc' suffix).
-      const controlId = myId ? myId.substring(0, myId.length - 5) : null;
-      // Get the control described by this node.
-      const elControl = controlId ? document.getElementById(controlId) : null;
-      // Is this node hidden?
-      const isHidden = elDiv.classList.contains('d-none');
+  document.querySelectorAll(`div.${toggleClass}`).forEach((elDiv) => {
+    // Toggle the visibility of the node by toggling the 'd-none' Bootstrap class.
+    elDiv.classList.toggle('d-none');
+    // The ID of the description whose visibility is toggled.
+    const myId = elDiv.id;
+    // The ID of the control described by this node (same ID, minus the '-desc' suffix).
+    const controlId = myId ? myId.substring(0, myId.length - 5) : null;
+    // Get the control described by this node.
+    const elControl = controlId ? document.getElementById(controlId) : null;
+    // Is this node hidden?
+    const isHidden = elDiv.classList.contains('d-none');
 
-      // If we do not have a control we will exit early
-      if (!controlId || !elControl) {
-        return;
-      }
+    // If we do not have a control we will exit early
+    if (!controlId || !elControl) {
+      return;
+    }
 
-      // Unset the aria-describedby attribute in the control when the description is hidden and vice–versa.
-      if (isHidden && elControl.hasAttribute('aria-describedby')) {
-        elControl.removeAttribute('aria-describedby');
-      } else if (!isHidden) {
-        elControl.setAttribute('aria-describedby', myId);
-      }
-    });
+    // Unset the aria-describedby attribute in the control when the description is hidden and vice–versa.
+    if (isHidden && elControl.hasAttribute('aria-describedby')) {
+      elControl.removeAttribute('aria-describedby');
+    } else if (!isHidden) {
+      elControl.setAttribute('aria-describedby', myId);
+    }
+  });
 };
 
 // Initialisation. Clicking on anything with the button-inlinehelp class will toggle the inline help.
-[].slice.call(document.querySelectorAll('.button-inlinehelp'))
-  .forEach((elToggler) => {
-    // The class of the DIVs to toggle visibility on is defined by the data-class attribute of the click target.
-    const toggleClass = elToggler.dataset.class ?? 'hide-aware-inline-help';
-    const collection = document.getElementsByClassName(toggleClass);
+document.querySelectorAll('.button-inlinehelp').forEach((elToggler) => {
+  // The class of the DIVs to toggle visibility on is defined by the data-class attribute of the click target.
+  const toggleClass = elToggler.dataset.class ?? 'hide-aware-inline-help';
+  const collection = document.getElementsByClassName(toggleClass);
 
-    // no description => hide inlinehelp button
-    if (collection.length === 0) {
-      elToggler.classList.add('d-none');
-      return;
-    }
+  // no description => hide inlinehelp button
+  if (collection.length === 0) {
+    elToggler.classList.add('d-none');
+    return;
+  }
 
-    // Add the click handler.
-    elToggler.addEventListener('click', (event) => {
-      event.preventDefault();
-      Joomla.toggleInlineHelp(toggleClass);
-    });
+  // Add the click handler.
+  elToggler.addEventListener('click', (event) => {
+    event.preventDefault();
+    Joomla.toggleInlineHelp(toggleClass);
   });
+});

build/media_source/system/js/messages.es6.js

@@ -53,7 +53,7 @@ Joomla.renderMessages = (messages, selector, keepOld, timeout) => {
     Joomla.removeMessages(messageContainer);
   }
 
-  [].slice.call(Object.keys(messages)).forEach((type) => {
+  Object.keys(messages).forEach((type) => {
     let alertClass = type;
 
     // Array of messages of this type
@@ -107,12 +107,7 @@ Joomla.renderMessages = (messages, selector, keepOld, timeout) => {
  */
 Joomla.removeMessages = (container) => {
   const messageContainer = getMessageContainer(container);
-  const alerts = [].slice.call(messageContainer.querySelectorAll('joomla-alert'));
-  if (alerts.length) {
-    alerts.forEach((alert) => {
-      alert.close();
-    });
-  }
+  messageContainer.querySelectorAll('joomla-alert').forEach((alert) => alert.close());
 };
 
 document.addEventListener('DOMContentLoaded', () => {

build/media_source/system/js/searchtools.es6.js

@@ -110,7 +110,7 @@ Joomla = window.Joomla || {};
       this.clearButton = document.querySelector(this.options.clearBtnSelector);
 
       // Ordering
-      this.orderCols = Array.prototype.slice.call(document.querySelectorAll(`${this.options.formSelector} ${this.options.orderColumnSelector}`));
+      this.orderCols = document.querySelectorAll(`${this.options.formSelector} ${this.options.orderColumnSelector}`);
       this.orderField = document.querySelector(`${this.options.formSelector} ${this.options.orderFieldSelector}`);
 
       // Limit
@@ -375,17 +375,17 @@ Joomla = window.Joomla || {};
     // eslint-disable-next-line consistent-return
     getFilterFields() {
       if (this.mainContainer) {
-        return Array.prototype.slice.call(this.mainContainer.querySelectorAll('select,input'));
+        return this.mainContainer.querySelectorAll('select,input');
       }
       if (this.filterContainer) {
-        return Array.prototype.slice.call(this.filterContainer.querySelectorAll('select,input'));
+        return this.filterContainer.querySelectorAll('select,input');
       }
 
       return [];
     }
 
     getListFields() {
-      return Array.prototype.slice.call(this.listContainer.querySelectorAll('select'));
+      return this.listContainer.querySelectorAll('select');
     }
 
     // Common container functions

build/media_source/system/js/showon.es6.js

@@ -22,7 +22,7 @@ class Showon {
       // }
     };
 
-    this.showonFields = [].slice.call(this.container.querySelectorAll('[data-showon]'));
+    this.showonFields = this.container.querySelectorAll('[data-showon]');
     // Populate the fields data
     if (this.showonFields.length) {
       // @todo refactor this, dry
@@ -38,7 +38,7 @@ class Showon {
         let localFields;
 
         if (showonData.length) {
-          localFields = [].slice.call(self.container.querySelectorAll(`[name="${showonData[0].field}"], [name="${showonData[0].field}[]"]`));
+          localFields = self.container.querySelectorAll(`[name="${showonData[0].field}"], [name="${showonData[0].field}[]"]`);
 
           if (!this.fields[showonData[0].field]) {
             this.fields[showonData[0].field] = {
@@ -64,7 +64,7 @@ class Showon {
                 return;
               }
 
-              localFields = [].slice.call(self.container.querySelectorAll(`[name="${value.field}"], [name="${value.field}[]"]`));
+              localFields = self.container.querySelectorAll(`[name="${value.field}"], [name="${value.field}[]"]`);
 
               if (!this.fields[showonData[0].field]) {
                 this.fields[showonData[0].field] = {
@@ -260,7 +260,7 @@ const getMatchedParents = ($child, selector) => {
 document.addEventListener('joomla:updated', ({ target }) => {
   // Check is it subform, then wee need to fix some "showon" config
   if (target.classList.contains('subform-repeatable-group')) {
-    const elements = [].slice.call(target.querySelectorAll('[data-showon]'));
+    const elements = target.querySelectorAll('[data-showon]');
 
     if (elements.length) {
       const search = [];

build/media_source/system/js/table-columns.es6.js

@@ -8,7 +8,7 @@ class TableColumns {
     this.storageKey = `joomla-tablecolumns-${this.tableName}`;
 
     this.$headers = [].slice.call($table.querySelector('thead tr').children);
-    this.$rows = [].slice.call($table.querySelectorAll('tbody tr'));
+    this.$rows = $table.querySelectorAll('tbody tr');
     this.listOfHidden = [];
 
     // Load previous state

build/media_source/templates/site/cassiopeia/js/mod_menu/menu-metismenu.es6.js

@@ -7,9 +7,7 @@
  */
 
 document.addEventListener('DOMContentLoaded', () => {
-  const allMenus = document.querySelectorAll('ul.mod-menu_dropdown-metismenu');
-
-  allMenus.forEach((menu) => {
+  document.querySelectorAll('ul.mod-menu_dropdown-metismenu').forEach((menu) => {
     // eslint-disable-next-line no-new, no-undef
     const mm = new MetisMenu(menu, {
       triggerElement: 'button.mm-toggler',