Front end module editing

Question

What would be the best way to have front-end edits open on a blank page? When I train a client to use front-end editing, they get confused when they have to scroll around to find the edit screen which always appears in the main content area. Couldn't we make this to always open so it ONLY displays the currently edited content? Thanks!

Answer 1

The simplest solution would be to create a Template Override for the following file:

components/com_config/view/modules/tmpl/default.php

Once done, in the override, add the following PHP:

JFactory::getDocument()->addScriptDeclaration("
    document.addEventListener('DOMContentLoaded', function() {
        var form = document.getElementById('modules-form');
        form.scrollIntoView({behavior: 'smooth'});
    });
");

This will automatically scroll the user to the module edit form.

A more advanced approach would be to create a system plugin that checks which view and controller are currently in use, and then execute the above code, like so:

$jinput = JFactory::getApplication()->input;
if ($jinput->get('option') === 'com_config' && $jinput->get('controller') === 'config.display.modules')
{
    JFactory::getDocument()->addScriptDeclaration("
        document.addEventListener('DOMContentLoaded', function() {
            var form = document.getElementById('modules-form');
            form.scrollIntoView({behavior: 'smooth'});
        });
    ");
}

Answer 2

You can force joomla to use a different template (a simple template maybe) every time user trying to edit the module. I created a plugin for similiar purpose but for editing article in here.

You can modified the plugin to support module editing by modifying the editortemplate.php file at lines 23 - 26, from

$view     = $app->input->get('view');
if ($view == 'form')

to

$view     = $app->input->get('view');
$controller     = $app->input->get('controller');
if (($view == 'form')||($controller== 'config.display.modules') )