[4.1] [GSoC 21] Core Enhancement 1 - Improve Menu-Module Assignment

[YatharthVyas]

Project Repo PR: joomla-projects/gsoc21_core-enhancements#1
Plan Document: https://docs.google.com/document/d/1Pl8JGa2hkYkmJzQOn9_mS8a4imDmqc2a/edit#heading=h.gewhdn9rqyeh

---

Summary of Changes

Frontend Flow:

This PR re-invents the unconventional method of placing modules from the Backend Dashboard to an easier to visualize series of steps where the users can visit a particular page in the Frontend (while logged in to an admin account) and from there, they can select the menu (automatically determined based on the page) and position of the Module by the means of buttons that reflect the output of where the module will be placed if the user proceeds to create it.

• New Plugin
  • Introduce a new system plugin plg_system_addmodulebutton for displaying the Add Module Button
  • This button is appended to the end of the <main> tag which is omnipresent on all pages.
  • This button is only displayed when a user logs into the frontend using an account that has Module Add/Edit Permissions
  • Pressing this button adds ?pm=1 as a GET parameter in the URL. This is similar to the ?tp=1 parameter that is used for displaying template positions

• Place Module (?pm=1) View
  • This view displays the current page will all possible template positions
  • Each position will have a button corresponding to it. This button can be used to select this position for placing the new module.
  • These buttons (to select position) redirect the user to a backend page having a URL like administrator/index.php?option=com_modules&task=module.selectPosition&position=footer&menu=101 . This URL has 3 parts:
    1. task=module.selectPosition is used to call the selectPosition Controller in com_modules/module
    2. &position=footer is used to pass the position as a GET param
    3. &menu=101 is used to pass the menu id of the current page as a GET param

• New Controller: /com_modules/Module/selectPosition
  • Saves the Position and Menu ID which is passed as a GET param in URL by the previous step in the User State,
  • Redirects to Module Select View where user can select the Module Type
  • After the Module Type has been selected, these state items (Position and Menu ID) is used to pre-fill the Position Name and Menu ID

Here is a video demonstration of the overall frontend flow :

Frontend.Flow.mp4

---

Backend Flow:

Editing Modules in the Backend Admin Panel turned out to be a little tricky for the user if the template positions were not easy to visualize or if the User was unaware of the layout of the template positions. The old way for a user to get around this difficulty was to

1. Visit the Global Configuration -> Templates -> Enable Template Positions
2. Visit Frontend
3. Append ?tp=1 as a param in the Page's URL (Might not be easy for users who do not have a technical background)
4. Remember the position name (Note: This view only shows active positions so they cannot even know where inactive positions are. Inactive means those positions that do not have a module to show in it)
5. Go back to the Admin Dashboard and select this position

To simplify all this into an easier and efficient method, a new modal has been added to select the positions via their preview. The video below demonstrates this new modal:

Module.Placement.Backend.flow.mp4

---

Testing Instructions

• Run npm ci because this PR involves re-building of assets
• Either run the SQL update script or download and install https://drive.google.com/file/d/1R4962C-MFFS236UW0cTBPn48DucG0-Qr/view?usp=sharing for the Add Module Button Plugin
• Test the frontend and backend placement flow summarized above. (The videos might be helpful)

---

Actual result AFTER applying this Pull Request

Refer to the two videos in the Summary of Changes section.

---

Documentation Changes Required

I'm not sure but I think this should be included in the Joomla Docs as a User Guide for the new feature.

---

Mentors

@chmst @nibra @bembelimen
(and thanks @richard67)

[YatharthVyas]

Good spot!
I'll remember to revisit this when the PR gets 2 successful tests.
Thanks

[brianteeman]

Trying to edit a module in the front endyou are presented with the module edit form. If you then click on the "select from template" button a modal is opened - it should NOT have the admin interface elements highlighted in the screenshot below

[brianteeman]

deleted this as its not related to this pr

[brianteeman]

Please change this button text to "Select Position From Template Preview" or even "Select Position From Template"

[brianteeman]

Disable Frontend Editing in global configuration

Expected behaviour is for the add module functionality not to be active. It is :(

[brianteeman]

I was really confused about this button. I thought when it said "add a new module here" the here meant something connected to the area on the screen that the button is located. I finally understand that there is just one button on the page.

This button is appended to the end of the

tag which is omnipresent on all pages.

1. The text should be "Add a new module" - the "here" is wrong and confusing
2. You cannot guarantee that main is present in every template.
3. The button should be placed in a corner just as debug, accessibility buttons are. it refers to the entire page not the part of the page inside main. Look at the cassiopeia screenshot below of the sample data homepage. The button location makes no sense at all.
4. The button should be consistently placed on the screen no matter what page you are on - clearly it isnt

[brianteeman]

Final comment on the frontend creation of modules.

Click on the button
-> select the position
-> log in to the admin
-> select the module
-> complete the module details and save

You are now stuck in the admin interface.
To return to the site you have to press back 4 times

Expected behaviour would be to return to the site and now you can see what you have done

[YatharthVyas]

Thank you soo much @brianteeman for such a thorough feedback! I agree with all the points that you stated. I will start working on these improvements.

[brianteeman]

Could someone add the "conflicting files" label please

[HLeithner]

This pull request has automatically rebased to 4.2-dev.

[chmst]

Unfortunately there are too many open questtions with 3rd party templates and template frameworks, no chance to make it compatible with all possible constellations.