[4.0] Non-clickable module in a menu item

[amitranjan2]

Pull Request for Issue #23540

Summary of Changes

Added data-toggle and data-target

Testing Instructions

Navigate to following page from the admin page
Menus >> Main Menu >> Home

Open module assignment tab

try to click item

Expected result

Modal open to edit

Actual result

Modal not opening

Documentation Changes Required

No

[amitranjan2]

@dgrammatiko Please review.

[infograf768]

Partially successful.
Although we now get the modal, Saving (or Save and Close) does not save the modifications of the module.

TypeError: c.contents is not a function admin-item-edit_modules.min.js:1:1867

debug on
TypeError: iframe.contents is not a function admin-item-edit_modules.js:89:13

[amitranjan2]

ok thanks, I will fix

[mvanvu]

/build/media_src/com_menus/js/admin-item-edit_modules.es6.js line 75
iFrame.setAttribute('class', 'class="iframe jviewport-height70"'); is that right?

OR this should be iFrame.setAttribute('class', 'iframe jviewport-height70'); ?

[dgrammatiko]

@amitranjan2 can you please use the event listener? There was a reason I did it like that in the first place: https://github.com/joomla/joomla-cms/blob/4.0-dev/build/media/legacy/js/bootstrap-init.js#L97

So your code essentially will never work...

[dgrammatiko]

Although we now get the modal, Saving (or Save and Close) does not save the modifications of the module.

@infograf768 please test:
#23600

[amitranjan2]

`

@amitranjan2 can you please use the event listener? There was a reason I did it like that in the first place: https://github.com/joomla/joomla-cms/blob/4.0-dev/build/media/legacy/js/bootstrap-init.js#L97

So your code essentially will never work...`

Yes i tried with modal.addEventListener('show.bs.modal', (ev) => {} but its not executing when the modal is open.
Can you please give me example?
@dgrammatiko

[dgrammatiko]

@amitranjan2 here is some code, admin-item-edit_modules.es6.js:

/**
 * @copyright  Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */

Joomla = window.Joomla || {};

(() => {
  'use strict';

  const options = Joomla.getOptions('menus-edit-modules');

  if (options) {
    window.viewLevels = options.viewLevels;
    window.menuId = parseInt(options.itemId, 10);
  }

  document.addEventListener('DOMContentLoaded', () => {
    const baseLink = 'index.php?option=com_modules&client_id=0&task=module.edit&tmpl=component&view=module&layout=modal&id=';
    const assigned1 = document.getElementById('jform_toggle_modules_assigned1');
    const assigned0 = document.getElementById('jform_toggle_modules_assigned0');
    const published1 = document.getElementById('jform_toggle_modules_published1');
    const published0 = document.getElementById('jform_toggle_modules_published0');
    const linkElements = [].slice.call(document.getElementsByClassName('module-edit-link'));
    const elements = [].slice.call(document.querySelectorAll('#moduleEditModal .modal-footer .btn'));

    if (assigned1) {
      assigned1.addEventListener('click', () => {
        const list = [].slice.call(document.querySelectorAll('tr.no'));

        list.forEach((item) => {
          item.style.display = 'table-row';
        });
      });
    }

    if (assigned0) {
      assigned0.addEventListener('click', () => {
        const list = [].slice.call(document.querySelectorAll('tr.no'));

        list.forEach((item) => {
          item.style.display = 'none';
        });
      });
    }

    if (published1) {
      published1.addEventListener('click', () => {
        const list = [].slice.call(document.querySelectorAll('.table tr.unpublished'));

        list.forEach((item) => {
          item.style.display = 'table-row';
        });
      });
    }

    if (published0) {
      published0.addEventListener('click', () => {
        const list = [].slice.call(document.querySelectorAll('.table tr.unpublished'));

        list.forEach((item) => {
          item.style.display = 'none';
        });
      });
    }

    if (linkElements.length) {
      linkElements.forEach((linkElement) => {
        linkElement.addEventListener('click', (event) => {
          debugger;
          const link = baseLink + event.target.getAttribute('data-module-id');
          const modal = document.getElementById('moduleEditModal');
          const body = modal.querySelector('.modal-body');
          const iFrame = document.createElement('iframe');

          iFrame.src = link;
          iFrame.setAttribute('class', 'class="iframe jviewport-height70"');
          body.innerHTML = '';
          body.appendChild(iFrame);

          modal.open();
        });
      });
    }

    if (elements.length) {
      elements.forEach((element) => {
        element.addEventListener('click', (event) => {
          const target = event.target.getAttribute('data-target');

          if (target) {
            const iframe = document.querySelector('#moduleEditModal iframe');
            const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
            iframeDocument.querySelector(target).click();
          }
        });
      });
    }
  });
})();

Also admin-module-edit.es6.js line 18:

          const updPosition = document.getElementById('jform_position').value;

Also please remove all the changes in the markup:

					data-toggle="modal"
						data-target="#moduleEditModal"

This is coupling things to Bootstrap and we don't want that!!!

[amitranjan2]

thanks, I will update.
@dgrammatiko

[amitranjan2]

please test this @Quy

[amitranjan2]

@infograf768 Please review this
I think now it's working fine.
opening as well as saving both, working fine

[ghost]

Please resolve conflicting files so this PR can get tested at Worldwide Pizza, Bugs & Fun, October 19th

[ttplpoojak]

I have tested this item ✅ successfully on 64e2b30

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/23609.}

[Nilesh5995]

I have tested this item ✅ successfully on 64e2b30

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/23609.}

[alikon]

@amitranjan2 can you solve conflict please

[KishoriBKarale]

I have tested this item ✅ successfully on 64e2b30

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/23609.}

[pdavila2709]

I can not apply the patch with the Joomla Patch Tester. This is the message:

Error: The file marked for modification does not exist: build/media_src/com_menus/js/admin-item-edit_modules.es6.js

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/23609.}

[infograf768]

@amitranjan2 please solve conflicts

[Quy]

Replaced with PR #27455

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/23609.}