ProfessionalWiki / chameleon

Provides a highly flexible and customizable skin using Bootstrap 4
https://www.mediawiki.org/wiki/Skin:Chameleon
Other
114 stars 62 forks source link

components resourceloader ignored #315

Open Designburo opened 2 years ago

Designburo commented 2 years ago

When you create a custom layout with custom components. For one component ( in this case a sidebar ), we load a system message and parse it. The system message is a page in the wiki with a template. The template calls a parser function (batch file upload). The content is rendered, but the resourceloader does not load any css and js defined in batchfileupload extension.

After some testing, any (parser-)extension that defines js and or css needed when called is ignored when we set this up through a component. When we just call the system message using Int on a page it works fine. Just not from a skin component.

Any suggestions?

mw 1.35.5

php 7.4.25

chameleon 3.4.1

malberts commented 2 years ago

I don't see an easy solution within Chameleon. When getting a message in code (irrespective of Chameleon) it would be unexpected to have a side-effect beyond just returning the final text.

While not a general solution, in this case you can create a custom component which is similar to the Message component, but then also specify the resource loader module

This is the simplest example if you put it directly in the Chameleon directory: chameleon/src/Components/Sidebar.php

<?php

namespace Skins\Chameleon\Components;

class Sidebar extends Component {

    public function getHtml() {
        return $this->getSkinTemplate()->getMsg( 'MyMenu' )->parse();
    }

    public function getResourceLoaderModules() {
        return [ 'ext.SimpleBatchUpload' ];
    }

}

Which can be used in the layout XML:

<component type="Sidebar" />

Making changes in the Chameleon directory isn't a good idea because you can lose changes with an update, so a better solution would be to create a custom extension that does this. I created a repo with an example of how to create a new extension to add custom components outside of the Chameleon directory: https://github.com/ProfessionalWiki/ChameleonComponents

D-Groenewegen commented 9 months ago

This week I began work on a boilerplate extension for extending the Chameleon skin. There are other ways to bundle customisations, but I went with the helpful suggestion by @malberts to wrap everything in an extension.

It will include what I think is a fix for this issue. It uses a new abstract class that extends the Component by allowing for a wikitext page to be selected. Where the wikitext gets parsed, it will also fetch the required modules from the ParserOutput and add them to getResourceModules(). More on that later.