Joomla! Issue Tracker - CMS

Download
Launch
Feeling Lucky

[#27499] - [4.0] Correcting module xtd wrong js

NPM Resource Changed ? ? Pending

User tests: Successful: Unsuccessful:

avatar infograf768
infograf768
12 Jan 2020

Summary of Changes

The admin-modules-modal.es6.js used for the module xtd was wrong as it was containing the code present in cpanel admin-add_module.es6.js

I only pasted the code from J3 here in a new admin-modules-modal.js as I fail to make it an es6.

Need help for that.
@Fedik @dgrammatiko

In the mean while, can be tested.

[EDIT] The js is now es6

Testing Instructions

Patch, run npm and then edit an article. Insert a module through the CMS Content dropdown in TinyMCE

Screen Shot 2020-01-12 at 16 17 34

Before patch

Clicking on a module in the modal does not work

After patch

Works fine

avatar infograf768 infograf768 - open - 12 Jan 2020
avatar infograf768 infograf768 - change - 12 Jan 2020
Status New ⇒ Pending
avatar joomla-cms-bot joomla-cms-bot - change - 12 Jan 2020
Category ⇒ JavaScript Repository NPM Change
avatar dgrammatiko
dgrammatiko - comment - 12 Jan 2020

There you go:

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

document.addEventListener('DOMContentLoaded', () => {
    "use strict";

    /** Get the elements **/
    const modulesLinks = [].slice.call(document.querySelectorAll('.js-module-insert'));
    const positionsLinks = [].slice.call(document.querySelectorAll('.js-position-insert'));

    /** Assign listener for click event (for single module id insertion) **/
    modulesLinks.forEach((element) => {
        element.addEventListener('click', (event) => {
            event.preventDefault();
            const modid = event.target.getAttribute('data-module');
            const editor = event.target.getAttribute('data-editor');

            /** Use the API, if editor supports it **/
            if (window.parent.Joomla && window.parent.Joomla.editors && window.parent.Joomla.editors.instances && window.parent.Joomla.editors.instances.hasOwnProperty(editor)) {
                window.parent.Joomla.editors.instances[editor].replaceSelection("{loadmoduleid " + modid + "}")
            } else {
                window.parent.jInsertEditorText("{loadmoduleid " + modid + "}", editor);
            }
        });
    });

    /** Assign listener for click event (for position insertion) **/
    positionsLinks.forEach((element) => {
        element.addEventListener('click', function (event) {
            event.preventDefault();
            const position = event.target.getAttribute('data-position');
            const editor = event.target.getAttribute('data-editor');

            /** Use the API, if editor supports it **/
            if (window.Joomla && window.Joomla.editors && Joomla.editors.instances && Joomla.editors.instances.hasOwnProperty(editor)) {
                Joomla.editors.instances[editor].replaceSelection("{loadposition " + position + "}")
            } else {
                window.parent.jInsertEditorText("{loadposition " + position + "}", editor);
            }
        });
    });
});
avatar dgrammatiko
dgrammatiko - comment - 12 Jan 2020

Actually the else part is useless in J4 so:

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

document.addEventListener('DOMContentLoaded', () => {
    "use strict";

    /** Get the elements **/
    const modulesLinks = [].slice.call(document.querySelectorAll('.js-module-insert'));
    const positionsLinks = [].slice.call(document.querySelectorAll('.js-position-insert'));

    /** Assign listener for click event (for single module id insertion) **/
    modulesLinks.forEach((element) => {
        element.addEventListener('click', (event) => {
            event.preventDefault();
            const modid = event.target.getAttribute('data-module');
            const editor = event.target.getAttribute('data-editor');

            /** Use the API **/
            if (window.parent.Joomla && window.parent.Joomla.editors && window.parent.Joomla.editors.instances && window.parent.Joomla.editors.instances.hasOwnProperty(editor)) {
                window.parent.Joomla.editors.instances[editor].replaceSelection("{loadmoduleid " + modid + "}")
            }
        });
    });

    /** Assign listener for click event (for position insertion) **/
    positionsLinks.forEach((element) => {
        element.addEventListener('click', function (event) {
            event.preventDefault();
            const position = event.target.getAttribute('data-position');
            const editor = event.target.getAttribute('data-editor');

            /** Use the API **/
            if (window.Joomla && window.Joomla.editors && Joomla.editors.instances && Joomla.editors.instances.hasOwnProperty(editor)) {
                Joomla.editors.instances[editor].replaceSelection("{loadposition " + position + "}")
            }
        });
    });
});
avatar dgrammatiko
dgrammatiko - comment - 12 Jan 2020

@infograf768 my first commit build/media_src/com_modules/js/admin-modules-modal.es6.js has also some code for closing the modal, I guess you should revert to that and ignore my above comments. BTW I have no clue why they rewrote it with the new design of the template, probably you should check the dashboard after changing this file (?)

avatar infograf768 infograf768 - change - 12 Jan 2020
Labels Added: NPM Resource Changed ?
avatar infograf768
infograf768 - comment - 12 Jan 2020

@dgrammatiko
Close button works fine with your second proposal.

BTW I have no clue why they rewrote it with the new design of the template, probably you should check the dashboard after changing this file (?)

I had checked already. It's fine.

remains to solve Hound...

avatar dgrammatiko
dgrammatiko - comment - 12 Jan 2020

tabs to spaces and line length, should be easy

avatar infograf768
infograf768 - comment - 12 Jan 2020

@dgrammatiko
yes for spaces and tabs but what about
Do not access Object.prototype method 'hasOwnProperty' from target object no-prototype-builtins ?

avatar dgrammatiko
dgrammatiko - comment - 12 Jan 2020

https://eslint.org/docs/rules/no-prototype-builtins
or

Object.prototype.hasOwnProperty.call(window.parent.Joomla.editors.instances, editor)

PS sorry my PC is really broken at the moment

avatar infograf768
infograf768 - comment - 12 Jan 2020

@dgrammatiko
I think I solved all except
`Do not access Object.prototype method 'hasOwnProperty' from target object no-prototype-builtins

in line 23
&& window.parent.Joomla.editors.instances.hasOwnProperty(editor)) {

I did not understand your comment.

avatar infograf768
infograf768 - comment - 12 Jan 2020

@dgrammatiko
remains
Unexpected string concatenation prefer-template
I had tried
`Joomla.editors.instances[editor].replaceSelection('{loadposition ${position}}');
but it also throwed an error.

avatar infograf768
infograf768 - comment - 12 Jan 2020

Maybe just
// eslint-disable-line prefer-template

what you think?

avatar dgrammatiko
dgrammatiko - comment - 12 Jan 2020

It needs to be backtick not single quote!

avatar infograf768
infograf768 - comment - 12 Jan 2020

Ok, will do tomorrow

avatar infograf768 infograf768 - change - 13 Jan 2020
Title
…
[4.0] [WIP} Correcting module xtd wrong js
[4.0] Correcting module xtd wrong js
avatar infograf768 infograf768 - edited - 13 Jan 2020
avatar infograf768
infograf768 - comment - 13 Jan 2020

All should be OK now.
Please test.

avatar jwaisner
jwaisner - comment - 13 Jan 2020

Modal now selects module after testing. Comparing to J3 the modal should close after selecting the module but does not in this PR.

a202ae3 13 Jan 2020 avatar infograf768 grrr
avatar infograf768
infograf768 - comment - 13 Jan 2020

Auto-close done.
Inserting module position done

avatar infograf768 infograf768 - change - 13 Jan 2020
The description was changed
avatar infograf768 infograf768 - edited - 13 Jan 2020
avatar jwaisner jwaisner - test_item - 13 Jan 2020 - Tested successfully
avatar jwaisner
jwaisner - comment - 13 Jan 2020

I have tested this item ✅ successfully on e7ef6f5

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27499.

avatar N6REJ N6REJ - test_item - 15 Jan 2020 - Tested successfully
avatar N6REJ
N6REJ - comment - 15 Jan 2020

I have tested this item ✅ successfully on e7ef6f5

installed this mornings build of J4, installed patch via patch tester, ran npm ci, refreshed article, attempted to insert module & nothing happened. Tried article and it was fine.

reverted patch, reapplied patch, did NOT run npm again, and it worked fine.

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27499.

avatar infograf768 infograf768 - change - 15 Jan 2020
Status Pending ⇒ Ready to Commit
avatar infograf768
infograf768 - comment - 15 Jan 2020

rtc

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27499.

avatar Quy Quy - change - 15 Jan 2020
Labels Added: ?
avatar HLeithner HLeithner - change - 16 Jan 2020
Status Ready to Commit ⇒ Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 ⇒ 2020-01-16 08:48:55
Closed_By ⇒ HLeithner
avatar HLeithner HLeithner - close - 16 Jan 2020
avatar HLeithner HLeithner - merge - 16 Jan 2020
avatar HLeithner
HLeithner - comment - 16 Jan 2020

Thanks

Add a Comment

Login with GitHub to post a comment