Jump to content

add possibility to prepend or append scripts and stylesheets in admin

dotnetic

By dotnetic,
in General Support

 Share

Recommended Posts

dotnetic Hero Member

dotnetic

Posted
Posted

I find myself often in situations where I modify the admin to my needs. To do that I have to override styles and add JavaScripts. They are added either via a module or in site/init.php. 

$config->scripts->add($config->urls->templates . "admin/admin.js");
$config->styles->add($config->urls->templates . "admin/admin.css");

The problem with this approach is, that I can not really add/append them BEFORE/AFTER all other modules (for example core modules) added their assets.

For example if I want to modify the CSS of ProcessPageLister I have to add !important to my rules, which is bad practice, because my admin.css gets loaded first, and then the ProcessPageLister.css is loaded afterwards.

So it would be nice if we had the possibility to prepend or append scripts and stylesheets in the admin.

I know I could modify the ProcessPageLister.scss and generate the CSS, but that would destroy upgradeability of the module as the styles are then overwritten again.

If you also think this is needed, please give it a thumbs up at https://github.com/processwire/processwire-requests/issues/259

Link to comment
Share on other sites
dotnetic Hero Member

dotnetic

Posted
  • Author
Posted

@arjen

I think I am to stupid to get it to work. Here is a screen of my settings.

image.thumb.png.9b13ce363808ad57274d688181f2c309.png

then I added these files to the AdminCustomFiles directory

image.png.f020694b570bb4c2623757a5fc8f5cf8.png

but none of them gets loaded when I am on a PageList page or a ListerPro page.

Do I need to select dependencies first?

However, I still think that it should be a core function that lets us choose, where our styles and scripts get inserted. AdminCustomFiles is the more advanced solution, if you want to select which files get injected for what process. But for me thats overkill, and I want one file for all pages in the admin.

Link to comment
Share on other sites
breezer Jr. Member

breezer

Posted
Posted

I use the following method with success, in your module: 

    public function init() {
		// add a hook after each page is rendered and modify the output
		$this->addHookAfter('Page::render', $this, 'page_after_render');
    }

    public function page_after_render($event) {	
		/** @var Page $page */
		$page = $event->object; 
        if( $page->template =='admin' ){
			$head_include ='<link rel="stylesheet" type="text/css" href="PATH/TO/YOUR/CSS" />
			';
			$replace = array(
				'</head>'    =>  $head_include .'</head>'
			);	
		    $event->return = str_replace( array_keys( $replace ), array_values( $replace ), $event->return );
        }
    }

Pretty simple and $replace array can be extended as needed.

  • Like 2
Link to comment
Share on other sites
arjen Hero Member

arjen

Posted
Posted
10 hours ago, jmartsch said:

But for me thats overkill, and I want one file for all pages in the admin.

You can also override the theme by using the classname of the theme and adding the extension.

10 hours ago, jmartsch said:

Do I need to select dependencies first?

From the top of my head, no. Just make sure the naming is 100% identical. If no dependancies it should work bases on the file naming. You might want to get more support in the relevant support thread.

10 hours ago, jmartsch said:

However, I still think that it should be a core function that lets us choose, where our styles and scripts get inserted.

 Not sure. You can easily hook into this. I like to core to be as lean as possible since Ryan is effectively the only one working on it.

Link to comment
Share on other sites
dotnetic Hero Member

dotnetic

Posted
  • Author
Posted

Thanks for all your suggestions.

Here is what I use right now in my ready.php 

$wire->addHookAfter('AdminTheme::getExtraMarkup', function (HookEvent $event) {
        $parts = $event->return;
        $parts['head'] .= '<link rel="stylesheet" href="' . $this->config->urls->templates . 'admin/admin.css">';
        $parts['head'] .= '<script src="' . $this->config->urls->templates . 'admin/admin.js"></script>';
        $event->return = $parts;
    });

I don't want to rely on another module like AoS or AdminCustomFiles, because I think adding another module just to add styles and JavaScript is overkill and bloat.

Instead I want to add the assets in my own modules, or in ready.php.

I still think that it would be good in the core, and the core could still be lean. There are already methods there to prepend or append assets, but they don't work correctly because of the init order.

Mainly the problem is that core modules should be loaded first with their assets like jQuery and CSS, etc, and then I should be able to add my assets after them to override them. I know it might be a specific case, where you want to alter default behavior and styles of the admin, but it is something I often need.

In most cases the actual behaviour  

$config->styles->add($config->urls->templates . "admin/admin.css");

is just fine, if you are not trying to override some styles

  • Like 4
Link to comment
Share on other sites
  • 2 years later...
bernhard Hero Member

bernhard

Posted
Posted

Thx RobinS for the idea about the getExtraMarkup hook! I slightly changed your version: 

$this->addHookBefore('AdminTheme::getExtraMarkup', function (HookEvent $event) {
  $config = $this->wire->config;
  $url = $config->urls($this);
  $config->scripts->add($url."lib/moment.min.js");
  $config->scripts->add($url."tabulator/js/tabulator.min.js");
  $config->scripts->add($url."Grid.js");
  $config->scripts->add($url."RockGrid2.js");
  $config->styles->add($url."tabulator/css/tabulator.min.css");
});

using the "before" hook makes it possible to use the config->scripts|styles->add syntax ? 

I'd love to get a $config->scripts->addAfter("/my/script.js", "/my/other/script.js") feature - but acutually I've always found a way to get the correct order by using proper hooks...

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...