primo commit

media/com_associations/css/sidebyside.css

@@ -0,0 +1,66 @@
+@charset "UTF-8";
+.sidebyside .outer-panel {
+  float: left;
+  width: 50%;
+}
+
+.sidebyside #left-panel .inner-panel, .sidebyside #right-panel .inner-panel {
+  padding-inline-end: 10px;
+}
+
+.sidebyside .full-width {
+  float: none !important;
+  width: 100% !important;
+}
+
+.sidebyside .full-width .inner-panel {
+  padding: 0 !important;
+}
+
+#reference-association, #target-association {
+  width: 100%;
+  height: 1500px;
+  overflow-y: auto;
+  border: 0 !important;
+}
+
+.sidebyside .langtarget {
+  float: left;
+}
+
+.sidebyside .modaltarget {
+  float: left;
+  margin-inline-start: .5rem;
+}
+
+.sidebyside #target-association {
+  margin-top: .5rem;
+}
+
+.sidebyside #reference-association {
+  margin-top: 3.35rem;
+}
+
+.target-text {
+  float: left;
+  width: auto;
+}
+
+[dir="rtl"] .sidebyside .outer-panel, [dir="rtl"] .sidebyside .langtarget, [dir="rtl"] .sidebyside .modaltarget, [dir="rtl"] .target-text {
+  float: right;
+}
+
+@media (width <= 767.98px) {
+  .sidebyside .outer-panel {
+    float: none;
+    width: 100%;
+  }
+
+  .sidebyside #reference-association {
+    margin-top: 0;
+  }
+
+  .sidebyside #left-panel .inner-panel, .sidebyside #right-panel .inner-panel {
+    padding: 0;
+  }
+}

media/com_associations/css/sidebyside.min.css

@@ -0,0 +1 @@
+@charset "UTF-8";.sidebyside .outer-panel{float:left;width:50%}.sidebyside #left-panel .inner-panel,.sidebyside #right-panel .inner-panel{padding-inline-end:10px}.sidebyside .full-width{float:none!important;width:100%!important}.sidebyside .full-width .inner-panel{padding:0!important}#reference-association,#target-association{width:100%;height:1500px;overflow-y:auto;border:0!important}.sidebyside .langtarget{float:left}.sidebyside .modaltarget{float:left;margin-inline-start:.5rem}.sidebyside #target-association{margin-top:.5rem}.sidebyside #reference-association{margin-top:3.35rem}.target-text{float:left;width:auto}[dir=rtl] .sidebyside .outer-panel,[dir=rtl] .sidebyside .langtarget,[dir=rtl] .sidebyside .modaltarget,[dir=rtl] .target-text{float:right}@media (width<=767.98px){.sidebyside .outer-panel{float:none;width:100%}.sidebyside #reference-association{margin-top:0}.sidebyside #left-panel .inner-panel,.sidebyside #right-panel .inner-panel{padding:0}}

media/com_associations/joomla.asset.json

@@ -0,0 +1,72 @@
+{
+  "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
+  "name": "com_associations",
+  "version": "4.0.0",
+  "description": "Joomla CMS",
+  "license": "GPL-2.0-or-later",
+  "assets": [
+    {
+      "name": "com_associations.sidebyside",
+      "type": "preset",
+      "dependencies": [
+        "com_associations.sidebyside#style",
+        "com_associations.sidebyside#script"
+      ]
+    },
+    {
+      "name": "com_associations.admin-associations-default",
+      "type": "script",
+      "uri": "com_associations/admin-associations-default.min.js",
+      "dependencies": [
+        "core"
+      ],
+      "attributes": {
+        "type": "module"
+      },
+      "version": "72d110"
+    },
+    {
+      "name": "com_associations.admin-associations-modal",
+      "type": "script",
+      "uri": "com_associations/admin-associations-modal.min.js",
+      "dependencies": [
+        "core"
+      ],
+      "attributes": {
+        "type": "module"
+      },
+      "version": "14d673"
+    },
+    {
+      "name": "com_associations.sidebyside",
+      "type": "style",
+      "uri": "com_associations/sidebyside.min.css",
+      "version": "579941"
+    },
+    {
+      "name": "com_associations.associations-edit",
+      "type": "script",
+      "uri": "com_associations/associations-edit.min.js",
+      "dependencies": [
+        "core"
+      ],
+      "attributes": {
+        "type": "module",
+        "defer": true
+      },
+      "version": "00d001"
+    },
+    {
+      "name": "com_associations.sidebyside",
+      "type": "script",
+      "uri": "com_associations/sidebyside.min.js",
+      "dependencies": [
+        "core"
+      ],
+      "attributes": {
+        "type": "module"
+      },
+      "version": "d3a446"
+    }
+  ]
+}

media/com_associations/js/admin-associations-default.js

@@ -0,0 +1,17 @@
+/**
+ * @copyright   (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+Joomla.submitbutton = pressbutton => {
+  if (pressbutton === 'associations.purge') {
+    // eslint-disable-next-line no-restricted-globals
+    if (confirm(Joomla.Text._('COM_ASSOCIATIONS_PURGE_CONFIRM_PROMPT'))) {
+      Joomla.submitform(pressbutton);
+    } else {
+      return false;
+    }
+  } else {
+    Joomla.submitform(pressbutton);
+  }
+  return true;
+};

media/com_associations/js/admin-associations-default.min.js

@@ -0,0 +1,4 @@
+/**
+ * @copyright   (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */Joomla.submitbutton=o=>{if(o==="associations.purge")if(confirm(Joomla.Text._("COM_ASSOCIATIONS_PURGE_CONFIRM_PROMPT")))Joomla.submitform(o);else return!1;else Joomla.submitform(o);return!0};

media/com_associations/js/admin-associations-modal.js

@@ -0,0 +1,20 @@
+/**
+ * @copyright   (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+Joomla = window.Joomla || {};
+((Joomla, document) => {
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const targetAssociation = window.parent.document.getElementById('target-association');
+    const links = [].slice.call(document.querySelectorAll('.select-link'));
+    links.forEach(item => {
+      item.addEventListener('click', ({
+        target
+      }) => {
+        targetAssociation.src = `${targetAssociation.getAttribute('data-editurl')}&task=${targetAssociation.getAttribute('data-item')}.edit&id=${parseInt(target.getAttribute('data-id'), 10)}`;
+        window.parent.Joomla.Modal.getCurrent().close();
+      });
+    });
+  });
+})(Joomla, document);

media/com_associations/js/admin-associations-modal.min.js

@@ -0,0 +1,4 @@
+/**
+ * @copyright   (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */Joomla=window.Joomla||{},((i,e)=>{e.addEventListener("DOMContentLoaded",()=>{const t=window.parent.document.getElementById("target-association");[].slice.call(e.querySelectorAll(".select-link")).forEach(a=>{a.addEventListener("click",({target:o})=>{t.src=`${t.getAttribute("data-editurl")}&task=${t.getAttribute("data-item")}.edit&id=${parseInt(o.getAttribute("data-id"),10)}`,window.parent.Joomla.Modal.getCurrent().close()})})})})(Joomla,document);

media/com_associations/js/associations-edit.js

@@ -0,0 +1,198 @@
+/**
+ * @copyright   (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+Joomla = window.Joomla || {};
+((Joomla, document) => {
+
+  Joomla.hideAssociation = (formControl, languageCode) => {
+    document.querySelectorAll('#associations .control-group').forEach(element => {
+      // Current selected language. Hide it
+      const el = element.querySelector('.control-label label');
+      if (el) {
+        const attribute = el.getAttribute('for');
+        if (attribute.replace(/_name$/, '') === `${formControl}_associations_${languageCode.replace('-', '_')}`) {
+          element.classList.add('hidden');
+        }
+      }
+    });
+  };
+  Joomla.showAssociationMessage = () => {
+    const associations = document.getElementById('associations');
+    if (associations) {
+      const html = document.createElement('joomla-alert');
+      html.innerText = Joomla.Text._('JGLOBAL_ASSOC_NOT_POSSIBLE');
+      associations.insertAdjacentElement('afterbegin', html);
+    }
+    document.querySelectorAll('#associations .control-group').forEach(element => {
+      element.classList.add('hidden');
+    });
+  };
+
+  /**
+   * Inject associations into other association fields
+   *
+   * This function is called whenever the Ajax request within propagateAssociation() completes
+   * successfully.
+   * Its purpose is to inject the associations which have been returned in the Ajax response into
+   * the other association fields in the form.
+   * It does this by invoking the various callback functions of those association fields (i.e. the
+   * function which gets called whenever the administrator selects an association via the modal),
+   * and passing the appropriate associated record details.
+   *
+   * @param   result                  The response from the Ajax request.
+   *                                  Its structure is that generated by the JResponseJson class,
+   *                                  with the data field containing the associations
+   * @param   callbackFunctionPrefix  The name of the callback function which the modal window uses
+   *                                  to set the selected item as the association, but minus the
+   *                                  language tag at the end
+   *
+   * @return  boolean
+   *
+   * @since   3.9.0
+   */
+  Joomla.injectAssociations = (result, callbackFunctionPrefix) => {
+    let functionName;
+    if (result.success) {
+      if (result.data.length !== 0) {
+        Object.keys(result.data).forEach(lang => {
+          functionName = callbackFunctionPrefix + lang.replace('-', '_');
+          window[functionName](result.data[lang].id, result.data[lang].title, result.data[lang].catid, null, null, lang);
+        });
+      }
+      if (result.message) {
+        Joomla.renderMessages({
+          notice: [result.message]
+        });
+      }
+    } else {
+      Joomla.renderMessages({
+        warning: [Joomla.Text._('JGLOBAL_ASSOCIATIONS_PROPAGATE_FAILED')]
+      });
+    }
+  };
+
+  /**
+   * Propagate associations from this field into other association fields
+   *
+   * This function is called whenever an administrator populates an association (in the association
+   * modal field) and then clicks on the Propagate button.
+   * The purpose of this function is to find what other records (if any) are associated with the
+   * one which the administrator has selected, and populate the other association fields with these
+   * records. (Otherwise, if the administrator just clicks on Save without clicking on Propagate,
+   * those other associations will be deleted). It does this by finding the id of the selected
+   * associated record (from a hidden field) and makes an Ajax call to the server to find the other
+   * associations, also passing up the language of the record currently being edited, as it should
+   * be excluded. Once it has received from the server the other associations it calls
+   * injectAssociations to inject them into the other association fields within the form.
+   *
+   * @param   fieldPrefix             The stem of the html ids for the elements comprising the
+   *                                  modal field
+   * @param   callbackFunctionPrefix  The name of the callback function which the modal window uses
+   *                                  to set the selected item as the association, but minus the
+   *                                  language tag at the end
+   *
+   * @return  boolean
+   *
+   * @since   3.9.0
+   */
+  Joomla.propagateAssociation = (fieldPrefix, callbackFunctionPrefix) => {
+    // Find the id of the record which has been set as an association
+    const assocId = document.getElementById(`${fieldPrefix}_id`).value;
+
+    // Find the language of the record being edited
+    const languageField = document.getElementById('jform_language');
+    const currentLang = languageField.options[languageField.selectedIndex].value;
+    const data = {
+      task: 'ajax.fetchAssociations',
+      format: 'json',
+      assocId,
+      excludeLang: currentLang
+    };
+    data[Joomla.getOptions('csrf.token', '')] = 1;
+    const queryString = Object.keys(data).reduce((a, k) => {
+      a.push(`${k}=${encodeURIComponent(data[k])}`);
+      return a;
+    }, []).join('&');
+    const url = `${document.forms.adminForm.action}&${queryString}`;
+    Joomla.request({
+      // Find the action url associated with the form - we need to add the token to this
+      url,
+      method: 'GET',
+      data: JSON.stringify(data),
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      onSuccess: response => {
+        Joomla.injectAssociations(JSON.parse(response), callbackFunctionPrefix);
+      },
+      onError: () => {
+        Joomla.renderMessages({
+          warning: [Joomla.Text._('JGLOBAL_ASSOCIATIONS_PROPAGATE_FAILED')]
+        });
+      }
+    });
+    return false;
+  };
+  document.addEventListener('DOMContentLoaded', () => {
+    const associationsEditOptions = Joomla.getOptions('system.associations.edit');
+    const formControl = associationsEditOptions.formControl || 'jform';
+    const formControlLanguage = document.getElementById(`${formControl}_language`);
+
+    // Hide the associations tab if needed
+    if (parseInt(associationsEditOptions.hidden, 10) === 1) {
+      Joomla.showAssociationMessage();
+    } else if (formControlLanguage) {
+      // Hide only the associations for the current language
+      Joomla.hideAssociation(formControl, formControlLanguage.value);
+    }
+
+    // When changing the language
+    if (formControlLanguage) {
+      formControlLanguage.addEventListener('change', ({
+        target
+      }) => {
+        // Remove message if any
+        Joomla.removeMessages();
+        let existsAssociations = false;
+
+        /** For each language, remove the associations, ie,
+         *  empty the associations fields and reset the buttons to Select/Create
+         */
+        document.querySelectorAll('#associations .control-group').forEach(element => {
+          const attribute = element.querySelector('.control-label label').getAttribute('for');
+          const languageCode = attribute.replace('_name', '').replace('jform_associations_', '');
+
+          // Show the association fields
+          element.classList.remove('hidden');
+
+          // Check if there was an association selected for this language
+          if (!existsAssociations && document.getElementById(`${formControl}_associations_${languageCode}_id`).value !== '') {
+            existsAssociations = true;
+          }
+
+          // Call the modal clear button
+          let clear = document.getElementById(`${formControl}_associations_${languageCode}_clear`);
+          clear = clear || element.querySelector('[data-button-action="clear"]');
+          clear.click();
+        });
+
+        // If associations existed, send a warning to the user
+        if (existsAssociations) {
+          Joomla.renderMessages({
+            warning: [Joomla.Text._('JGLOBAL_ASSOCIATIONS_RESET_WARNING')]
+          });
+        }
+
+        // If the selected language is All hide the fields and add a message
+        const selectedLanguage = target.value;
+        if (selectedLanguage === '*') {
+          Joomla.showAssociationMessage();
+        } else {
+          // Else show the associations fields/buttons and hide the current selected language
+          Joomla.hideAssociation(formControl, selectedLanguage);
+        }
+      });
+    }
+  });
+})(Joomla, document);

media/com_associations/js/associations-edit.min.js

@@ -0,0 +1,4 @@
+/**
+ * @copyright   (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */Joomla=window.Joomla||{},((e,n)=>{e.hideAssociation=(s,t)=>{n.querySelectorAll("#associations .control-group").forEach(i=>{const a=i.querySelector(".control-label label");a&&a.getAttribute("for").replace(/_name$/,"")===`${s}_associations_${t.replace("-","_")}`&&i.classList.add("hidden")})},e.showAssociationMessage=()=>{const s=n.getElementById("associations");if(s){const t=n.createElement("joomla-alert");t.innerText=e.Text._("JGLOBAL_ASSOC_NOT_POSSIBLE"),s.insertAdjacentElement("afterbegin",t)}n.querySelectorAll("#associations .control-group").forEach(t=>{t.classList.add("hidden")})},e.injectAssociations=(s,t)=>{let i;s.success?(s.data.length!==0&&Object.keys(s.data).forEach(a=>{i=t+a.replace("-","_"),window[i](s.data[a].id,s.data[a].title,s.data[a].catid,null,null,a)}),s.message&&e.renderMessages({notice:[s.message]})):e.renderMessages({warning:[e.Text._("JGLOBAL_ASSOCIATIONS_PROPAGATE_FAILED")]})},e.propagateAssociation=(s,t)=>{const i=n.getElementById(`${s}_id`).value,a=n.getElementById("jform_language"),c=a.options[a.selectedIndex].value,o={task:"ajax.fetchAssociations",format:"json",assocId:i,excludeLang:c};o[e.getOptions("csrf.token","")]=1;const l=Object.keys(o).reduce((r,d)=>(r.push(`${d}=${encodeURIComponent(o[d])}`),r),[]).join("&"),g=`${n.forms.adminForm.action}&${l}`;return e.request({url:g,method:"GET",data:JSON.stringify(o),headers:{"Content-Type":"application/json"},onSuccess:r=>{e.injectAssociations(JSON.parse(r),t)},onError:()=>{e.renderMessages({warning:[e.Text._("JGLOBAL_ASSOCIATIONS_PROPAGATE_FAILED")]})}}),!1},n.addEventListener("DOMContentLoaded",()=>{const s=e.getOptions("system.associations.edit"),t=s.formControl||"jform",i=n.getElementById(`${t}_language`);parseInt(s.hidden,10)===1?e.showAssociationMessage():i&&e.hideAssociation(t,i.value),i&&i.addEventListener("change",({target:a})=>{e.removeMessages();let c=!1;n.querySelectorAll("#associations .control-group").forEach(l=>{const r=l.querySelector(".control-label label").getAttribute("for").replace("_name","").replace("jform_associations_","");l.classList.remove("hidden"),!c&&n.getElementById(`${t}_associations_${r}_id`).value!==""&&(c=!0);let d=n.getElementById(`${t}_associations_${r}_clear`);d=d||l.querySelector('[data-button-action="clear"]'),d.click()}),c&&e.renderMessages({warning:[e.Text._("JGLOBAL_ASSOCIATIONS_RESET_WARNING")]});const o=a.value;o==="*"?e.showAssociationMessage():e.hideAssociation(t,o)})})})(Joomla,document);

media/com_associations/js/sidebyside.js

@@ -0,0 +1,372 @@
+/**
+ * @copyright   (C) 2017 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+if (!Joomla) {
+  throw new Error('Joomla API is not properly initialised');
+}
+const hideElements = ids => {
+  ids.forEach(id => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.classList.add('hidden');
+    }
+  });
+};
+const createOption = (value, text) => {
+  const option = document.createElement('option');
+  option.value = value;
+  option.innerText = text;
+  return option;
+};
+
+// Attach behaviour to toggle button.
+document.body.addEventListener('click', ({
+  target
+}) => {
+  if (target.id === 'toggle-left-panel') {
+    const referenceHide = target.getAttribute('data-hide-reference');
+    const referenceShow = target.getAttribute('data-show-reference');
+    if (target.innerText === referenceHide) {
+      target.innerText = referenceShow;
+    } else {
+      target.innerText = referenceHide;
+    }
+    document.getElementById('left-panel').classList.toggle('hidden');
+    document.getElementById('right-panel').classList.toggle('full-width');
+  }
+});
+
+// Attach behaviour to language selector change event.
+document.body.addEventListener('change', ({
+  target
+}) => {
+  if (target.id === 'jform_itemlanguage') {
+    const targetIframe = document.getElementById('target-association');
+    const selected = target.value;
+
+    // Populate the data attributes and load the the edit page in target frame.
+    if (selected !== '' && typeof selected !== 'undefined') {
+      targetIframe.setAttribute('data-action', selected.split(':')[2]);
+      targetIframe.setAttribute('data-id', selected.split(':')[1]);
+      targetIframe.setAttribute('data-language', selected.split(':')[0]);
+
+      // Iframe load start, show Joomla loading layer.
+      document.body.appendChild(document.createElement('joomla-core-loader'));
+
+      // Load the target frame.
+      targetIframe.src = `${targetIframe.getAttribute('data-editurl')}&task=${targetIframe.getAttribute('data-item')}.${targetIframe.getAttribute('data-action')}&id=${targetIframe.getAttribute('data-id')}`;
+    } else {
+      // Reset the data attributes and no item to load.
+      hideElements(['toolbar-target', 'toolbar-copy', 'select-change', 'remove-assoc']);
+      targetIframe.setAttribute('data-action', '');
+      targetIframe.setAttribute('data-id', '0');
+      targetIframe.setAttribute('data-language', '');
+      targetIframe.src = '';
+    }
+  }
+});
+
+// Attach behaviour to reference frame load event.
+document.getElementById('reference-association').addEventListener('load', ({
+  target
+}) => {
+  // Waiting until the reference has loaded before loading the target to avoid race conditions
+  let targetURL = Joomla.getOptions('targetSrc', false);
+  if (targetURL) {
+    targetURL = targetURL.split('&amp;').join('&');
+    document.getElementById('target-association').setAttribute('src', targetURL);
+    Joomla.loadOptions({
+      targetSrc: false
+    });
+    return;
+  }
+
+  // Load Target Pane AFTER reference pane has loaded to prevent session conflict with checkout
+  document.getElementById('target-association').setAttribute('src', document.getElementById('target-association').getAttribute('src'));
+  const content = target.contentDocument.body || target.contentWindow.document.body;
+
+  // If copy button used
+  if (content.querySelector('#jform_id') && content.querySelector('#jform_id').value !== target.getAttribute('data-id')) {
+    const targetAssociation = document.getElementById('target-association');
+    targetAssociation.src = `${targetAssociation.getAttribute('data-editurl')}&task=${targetAssociation.getAttribute('data-item')}.edit&id=${content.querySelector('#jform_id').value}`;
+    target.src = `${target.getAttribute('data-editurl')}&task=${target.getAttribute('data-item')}.edit&id=${target.getAttribute('data-id')}`;
+  }
+
+  // Disable language field.
+  if (content.querySelector('#jform_language')) {
+    content.querySelector('#jform_language').setAttribute('disabled', 'disabled');
+  }
+
+  // Remove modal buttons on the reference
+  const associationBtn = content.querySelector('#associations .btn');
+  if (associationBtn) {
+    associationBtn.remove();
+  }
+  const itemLanguageOptions = document.querySelectorAll('#jform_itemlanguage option');
+  if (itemLanguageOptions) {
+    itemLanguageOptions.forEach(option => {
+      const parse = option.value.split(':');
+      if (typeof parse[0] !== 'undefined') {
+        // - For modal association selectors.
+        const langAssociation = parse[0].replace(/-/, '_');
+        const langAssociationId = content.querySelector(`#jform_associations_${langAssociation}_id`);
+        if (langAssociationId && langAssociationId.value === '') {
+          const referenceAssociation = document.getElementById('reference-association');
+          if (referenceAssociation.hasAttribute('data-no-assoc')) {
+            content.querySelector(`#jform_associations_${langAssociation}_name`).value = referenceAssociation.getAttribute('data-no-assoc');
+          }
+        }
+      }
+    });
+  }
+
+  // Iframe load finished, hide Joomla loading layer.
+  const spinner = document.querySelector('joomla-core-loader');
+  if (spinner) {
+    spinner.parentNode.removeChild(spinner);
+  }
+});
+
+// Attach behaviour to target frame load event.
+document.getElementById('target-association').addEventListener('load', ({
+  target
+}) => {
+  // We need to check if we are not loading a blank iframe.
+  if (target.getAttribute('src') !== '') {
+    document.getElementById('toolbar-target').classList.remove('hidden');
+    document.getElementById('toolbar-copy').classList.remove('hidden');
+    document.getElementById('select-change').classList.remove('hidden');
+    const targetLanguage = target.getAttribute('data-language');
+    const targetId = target.getAttribute('data-id');
+    const content = target.contentDocument.body || target.contentWindow.document.body;
+    const targetLoadedId = content.querySelector('#jform_id').value || '0';
+    const reference = document.getElementById('reference-association');
+
+    // Remove modal buttons on the target
+    // content.querySelector('a[href="#associations"]').parentNode.querySelector('.btn').forEach(btn => btn.remove());
+    // content.querySelector('#associations .btn').forEach(btn => btn.remove());
+
+    // Always show General tab first if associations tab is selected on the reference
+    const associations = content.querySelector('#associations');
+    if (associations && associations.classList.contains('active')) {
+      content.querySelector('a[href="#associations"]').parentNode.classList.remove('active');
+      associations.classList.remove('active');
+      content.querySelector('.nav-tabs li').classList.add('active');
+      content.querySelector('.tab-content .tab-pane').classList.add('active');
+    }
+
+    // Update language field with the selected language and them disable it.
+    if (content.querySelector('#jform_language')) {
+      content.querySelector('#jform_language').value = targetLanguage;
+      content.querySelector('#jform_language').setAttribute('disabled', 'disabled');
+    }
+
+    // If we are creating a new association (before save) we need to add the new association.
+    if (targetLoadedId === '0') {
+      document.getElementById('select-change-text').innerHTML = Joomla.sanitizeHtml(document.getElementById('select-change').getAttribute('data-select'));
+    } else {
+      // If we are editing an association.
+
+      // Show change language button
+      document.getElementById('select-change-text').innerHTML = Joomla.sanitizeHtml(document.getElementById('select-change').getAttribute('data-change'));
+      document.getElementById('remove-assoc').classList.remove('hidden');
+      document.getElementById('remove-assoc').classList.add('toolbar-copy');
+
+      // Add the id to list of items to check in on close.
+      const currentIdList = document.getElementById('target-id').value;
+      const updatedList = currentIdList === '' ? targetLoadedId : `${currentIdList},${targetLoadedId}`;
+      document.getElementById('target-id').value = updatedList;
+
+      // If we created a new association (after save).
+      if (targetLoadedId !== targetId) {
+        // Refresh the language selector with the new id (used after save).
+        const languageSelector = document.querySelector(`#jform_itemlanguage option[value^="${targetLanguage}:${targetId}:add"]`);
+        if (languageSelector) {
+          languageSelector.value = `${targetLanguage}:${targetLoadedId}:edit`;
+        }
+
+        // Update main frame data-id attribute (used after save).
+        target.setAttribute('data-id', targetLoadedId);
+        target.setAttribute('data-action', 'edit');
+      }
+
+      // Update the reference item associations tab.
+      const referenceContent = reference.contentDocument.body || reference.contentWindow.document.body;
+      const languageCode = targetLanguage.replace(/-/, '_');
+      const title = content.querySelector(`#jform_${reference.getAttribute('data-title')}`).value;
+
+      // - For modal association selectors.
+      const referenceContentId = referenceContent.querySelector(`#jform_associations_${languageCode}_id`);
+      if (referenceContentId) {
+        referenceContentId.value = targetLoadedId;
+      }
+      const referenceContentName = referenceContent.querySelector(`#jform_associations_${languageCode}_name`);
+      if (referenceContentName) {
+        referenceContentName.value = title;
+      }
+
+      // - For chosen association selectors (menus).
+      const referenceContentDropdown = referenceContent.querySelector(`#jform_associations_${languageCode}`);
+      if (referenceContentDropdown) {
+        referenceContentDropdown.appendChild(createOption(targetLoadedId, title));
+        referenceContentDropdown.value = targetLoadedId;
+      }
+    }
+
+    // Update the target item associations tab.
+    const referenceId = reference.getAttribute('data-id');
+    const referenceLanguageCode = reference.getAttribute('data-language').replace(/-/, '_');
+    const referenceTitle = reference.getAttribute('data-title-value');
+
+    // - For modal association selectors.
+    const targetContentId = content.querySelector(`#jform_associations_${referenceLanguageCode}_id`);
+    if (targetContentId) {
+      targetContentId.value = referenceId;
+    }
+    const targetContentName = content.querySelector(`#jform_associations_${referenceLanguageCode}_name`);
+    if (targetContentName) {
+      targetContentName.value = referenceTitle;
+    }
+
+    // - For chosen association selectors (menus).
+    let chosenField = content.querySelector(`#jform_associations_${referenceLanguageCode}`);
+    if (chosenField) {
+      chosenField.appendChild(createOption(referenceId, referenceTitle));
+      chosenField.value = referenceId;
+    }
+    document.querySelectorAll('#jform_itemlanguage option').forEach(option => {
+      const parse = option.value.split(':');
+      if (typeof parse[1] !== 'undefined' && parse[1] !== '0') {
+        // - For modal association selectors.
+        const langAssociation = parse[0].replace(/-/, '_');
+        const formAssociationId = content.querySelector(`#jform_associations_${langAssociation}_id`);
+        if (formAssociationId) {
+          // eslint-disable-next-line prefer-destructuring
+          content.querySelector(`#jform_associations_${langAssociation}_id`).value = parse[1];
+        }
+
+        // - For chosen association selectors (menus).
+        chosenField = content.querySelector(`#jform_associations_${langAssociation}`);
+        if (chosenField) {
+          chosenField.appendChild(createOption(parse[1], ''));
+          // eslint-disable-next-line prefer-destructuring
+          chosenField.value = parse[1];
+        }
+      }
+    });
+
+    // Iframe load finished, hide Joomla loading layer.
+    const spinner = document.querySelector('joomla-core-loader');
+    if (spinner) {
+      spinner.parentNode.removeChild(spinner);
+    }
+  }
+});
+
+// Save button actions, replacing the default Joomla.submitbutton() with custom function.
+Joomla.submitbutton = task => {
+  // Using close button, normal joomla submit.
+  if (task === 'association.cancel') {
+    Joomla.submitform(task);
+  } else if (task === 'copy') {
+    document.body.appendChild(document.createElement('joomla-core-loader'));
+    const targetLang = document.getElementById('target-association').getAttribute('data-language');
+    const referlangInput = window.frames['reference-association'].document.getElementById('jform_language');
+
+    // Set target language, to get correct content language in the copy
+    referlangInput.removeAttribute('disabled');
+    referlangInput.value = targetLang;
+    window.frames['reference-association'].Joomla.submitbutton(`${document.getElementById('adminForm').getAttribute('data-associatedview')}.save2copy`);
+  } else if (task === 'undo-association') {
+    // Undo association
+    const referenceEl = document.getElementById('reference-association');
+    const targetEl = document.getElementById('target-association');
+    const referenceLang = referenceEl.getAttribute('data-language').replace(/-/, '_');
+    const targetLang = targetEl.getAttribute('data-language').replace(/-/, '_');
+    const reference = referenceEl.contentDocument.body || referenceEl.contentWindow.document.body;
+    const target = targetEl.contentDocument.body || targetEl.contentWindow.document.body;
+
+    // Remove it on the reference
+    // - For modal association selectors.
+    const referenceAssocId = reference.querySelector(`#jform_associations_${targetLang}_id`);
+    if (referenceAssocId) {
+      referenceAssocId.value = '';
+    }
+    const referenceAssocName = reference.querySelector(`#jform_associations_${targetLang}_name`);
+    if (referenceAssocName) {
+      referenceAssocName.value = '';
+    }
+
+    // - For chosen association selectors (menus).
+    const referenceAssoc = reference.querySelector(`#jform_associations_${targetLang}`);
+    if (referenceAssoc) {
+      referenceAssoc.value = '';
+    }
+
+    // Remove it on the target
+    document.querySelectorAll('#jform_itemlanguage option').forEach(option => {
+      let lang = option.value.split(':')[0];
+      if (lang) {
+        lang = lang.replace(/-/, '_');
+        const formAssociationId = target.querySelector(`#jform_associations_${lang}_id`);
+        if (formAssociationId) {
+          // - For modal association selectors.
+          formAssociationId.value = '';
+        }
+        const formAssociation = target.querySelector(`#jform_associations_${lang}`);
+        if (formAssociation) {
+          // - For chosen association selectors (menus).
+          formAssociation.value = '';
+        }
+      }
+    });
+
+    // Same as above but reference language is not in the selector
+    // - For modal association selectors.
+    const targetAssocId = target.querySelector(`#jform_associations_${referenceLang}_id`);
+    if (targetAssocId) {
+      targetAssocId.value = '';
+    }
+    const targetAssocName = target.querySelector(`#jform_associations_${referenceLang}_name`);
+    if (targetAssocName) {
+      targetAssocName.value = '';
+    }
+
+    // - For chosen association selectors (menus).
+    const targetAssoc = target.querySelector(`#jform_associations_${referenceLang}`);
+    if (targetAssoc) {
+      targetAssoc.value = '';
+    }
+
+    // Reset switcher after removing association
+    const currentLangSelect = document.getElementById('jform_itemlanguage');
+    const currentSwitcher = currentLangSelect.value;
+    const currentLang = targetLang.replace(/_/, '-');
+    const itemLanguageItem = document.querySelector(`#jform_itemlanguage option[value="${currentSwitcher}"]`);
+    if (itemLanguageItem) {
+      itemLanguageItem.value = `${currentLang}:0:add`;
+    }
+    currentLangSelect.value = '';
+    currentLangSelect.dispatchEvent(new CustomEvent('change', {
+      bubbles: true,
+      cancelable: true
+    }));
+
+    // Save one of the items to confirm action
+    Joomla.submitbutton('reference');
+  } else {
+    // Saving target or reference, send the save action to the target/reference iframe.
+    // We need to re-enable the language field to save.
+    const el = document.getElementById(`${task}-association`);
+    const content = el.contentDocument.body || el.contentWindow.document.body;
+    const languageButton = content.querySelector('#jform_language');
+    if (languageButton) {
+      languageButton.removeAttribute('disabled');
+    }
+    window.frames[`${task}-association`].Joomla.submitbutton(`${document.getElementById('adminForm').getAttribute('data-associatedview')}.apply`);
+  }
+  return false;
+};
+hideElements(['toolbar-target', 'toolbar-copy']);