How to register core JavaScript library assets in a core block override template
Permalink
Hello.
In 5.7.13 I am trying to modify the standard Language Switcher dropdown to include a flag image with the language description. This block is in a Global Area.
To do this I am currently trying to use a customised jquery-ui.js. This was created by going to jquery-ui.com/download and creating a library with the same version of components as the standard 5.7.13 jquery-ui.js, but also adding the selectmenu.js component.
If I place this library and it's css in /application/js and application/css respectively, I can use an iconselectmenu script in the templates view.php to add the images and it works well. Also everything else in the site appears to work correctly.
However, if I log out, it stops working. jquery-ui.js is not included in the pages anymore, that is it disappears from the page source?
I am uncertain whether I need to use the asset registration system and because this is a core block override am not sure which file I would use to register the assets.
Can anyone shed any light please?
Thanks.
In 5.7.13 I am trying to modify the standard Language Switcher dropdown to include a flag image with the language description. This block is in a Global Area.
To do this I am currently trying to use a customised jquery-ui.js. This was created by going to jquery-ui.com/download and creating a library with the same version of components as the standard 5.7.13 jquery-ui.js, but also adding the selectmenu.js component.
If I place this library and it's css in /application/js and application/css respectively, I can use an iconselectmenu script in the templates view.php to add the images and it works well. Also everything else in the site appears to work correctly.
However, if I log out, it stops working. jquery-ui.js is not included in the pages anymore, that is it disappears from the page source?
I am uncertain whether I need to use the asset registration system and because this is a core block override am not sure which file I would use to register the assets.
Can anyone shed any light please?
Thanks.
Great. Thank you for that.
At the moment I am adding the modified jquery-ui.js and jquery-ui.css in applications/js and application/css respectively. In which case is it correct to assume that the modified jquery-ui will be included on any page that has the Switch Language block added to, regardless of which template has been selected for it?
If this is the case, is there a way that I can only include the modified jquery-ui when using the Switch Language template it has been developed with?
At the moment I am adding the modified jquery-ui.js and jquery-ui.css in applications/js and application/css respectively. In which case is it correct to assume that the modified jquery-ui will be included on any page that has the Switch Language block added to, regardless of which template has been selected for it?
If this is the case, is there a way that I can only include the modified jquery-ui when using the Switch Language template it has been developed with?
@tangent
Yes, it should be loaded with any page that the Switch Language block has been added to, regardless of template.
Yes, it should be loaded with any page that the Switch Language block has been added to, regardless of template.
But it doesn't need my customised jquery-ui for all the templates, only for the template in which I use the .selectmenu script.
What I am trying to determine is how to use the asset system to only include my customised jquery-ui when I select my template for Language Switcher, leaving the standard jquery-ui for every other template. Can this be done?
I suppose this is a more generic question of how to properly declare assets to be used just for a particular block template.
For instance if I move my customised jquery-ui file from /application/js to a js folder within my template. In this case /application/blocks/switch_language/templates/jqui/js and then add my template to Language Switcher, I get two jquery-ui's in the page source. Both mine and the system default.
My understanding is that it should be possible to use $this->providesAsset(jquery/ui) and <script type="text/javascript" src="/application/blocks/language_switcher/templates/jqui/js/jquery-ui.js"></script>. But I am unsure if the view.php file in my template is the correct place for this.
Thanks for bearing with me on this.
What I am trying to determine is how to use the asset system to only include my customised jquery-ui when I select my template for Language Switcher, leaving the standard jquery-ui for every other template. Can this be done?
I suppose this is a more generic question of how to properly declare assets to be used just for a particular block template.
For instance if I move my customised jquery-ui file from /application/js to a js folder within my template. In this case /application/blocks/switch_language/templates/jqui/js and then add my template to Language Switcher, I get two jquery-ui's in the page source. Both mine and the system default.
My understanding is that it should be possible to use $this->providesAsset(jquery/ui) and <script type="text/javascript" src="/application/blocks/language_switcher/templates/jqui/js/jquery-ui.js"></script>. But I am unsure if the view.php file in my template is the correct place for this.
Thanks for bearing with me on this.
The core .ui used to have some custom tweaks. I don't know if it still does.
Can you just generate the .ui part needed just for your .selectmenu. Then add that as well as the core .ui? No risk of doing anything that will break the core.
Can you just generate the .ui part needed just for your .selectmenu. Then add that as well as the core .ui? No risk of doing anything that will break the core.
Hi John.
Thanks for that. The problem is that my JQuery knowledge isn't sufficient to be able to write what I would like to include, especially considering that the standard jquery-ui .selectmenu component also includes keyboard interaction etc. That is why I came to try and find a way to integrate it.
I notice that Bootstrap also includes a dropdown that can easily include images. However in this particular site I am using the Fundamental theme, which is Foundation based and it doesn't appear to have a javascript plugin that will take a select/option dropdown and allow me to add an image to it.
The thing is that as far as I can see my site works with my customised download from jquery-ui.com, which includes the same components from the standard Concrete5.7.13 jquery-ui.js version 1.11.4 plus their selectmenu component.
My question really is to find the best way to use it with the asset system, so that it only replaces the standard jquery-ui on a page with the Language Switcher block that is using my custom template.
If I put my jquery-ui.js and css files in application/js and css, then isn't it the case that Concrete5 will always use this version when jquery-ui is called for?
Thanks for that. The problem is that my JQuery knowledge isn't sufficient to be able to write what I would like to include, especially considering that the standard jquery-ui .selectmenu component also includes keyboard interaction etc. That is why I came to try and find a way to integrate it.
I notice that Bootstrap also includes a dropdown that can easily include images. However in this particular site I am using the Fundamental theme, which is Foundation based and it doesn't appear to have a javascript plugin that will take a select/option dropdown and allow me to add an image to it.
The thing is that as far as I can see my site works with my customised download from jquery-ui.com, which includes the same components from the standard Concrete5.7.13 jquery-ui.js version 1.11.4 plus their selectmenu component.
My question really is to find the best way to use it with the asset system, so that it only replaces the standard jquery-ui on a page with the Language Switcher block that is using my custom template.
If I put my jquery-ui.js and css files in application/js and css, then isn't it the case that Concrete5 will always use this version when jquery-ui is called for?
Perhaps the mega-menu addon could meet your requirement.
The core also bundles select2 as an asset, a select on steroids that can include all sorts of stuff in the select options (older cores may instead have selectize).https://documentation.concrete5.org/developers/appendix/asset-list...
To selectively provide an asset for just one page, you would provide an on_start handler in a controller - a package controller or a controller for the page type. In that, check the page and conditionally provide the asset. On some core versions the on_start handler man have to register an on_before_render handler to check the page identity because the page id is not necessarily known at on_start.
https://documentation.concrete5.org/developers/appendix/full-event-l...
The core also bundles select2 as an asset, a select on steroids that can include all sorts of stuff in the select options (older cores may instead have selectize).https://documentation.concrete5.org/developers/appendix/asset-list...
To selectively provide an asset for just one page, you would provide an on_start handler in a controller - a package controller or a controller for the page type. In that, check the page and conditionally provide the asset. On some core versions the on_start handler man have to register an on_before_render handler to check the page identity because the page id is not necessarily known at on_start.
https://documentation.concrete5.org/developers/appendix/full-event-l...
You are a Star! I will have a look at Select2. Note to myself - Study the list of available assets.
And thanks for the note about registering assets. It seems to make sense.
And thanks for the note about registering assets. It seems to make sense.
@tangent
In addition to JohntheFish's suggestions, you can also require an asset based on which block custom template is used.
In addition to JohntheFish's suggestions, you can also require an asset based on which block custom template is used.
public function registerViewAssets($outputContent = '') { if (is_object($this->block) && $this->block->getBlockFilename() == 'custom_template_handle') { // asset to require, or other code, for this specific custom block template } }
Hello again.
Thank you to both of you for your great support. I am nearly there with a templated dropdown that adds flags to the Language Switcher. I will document it here when it is ready, but for now I have a quandary, as you both, equally gave me good advice on where to look. Who to give the best answer mark too? Is there a way to add two best answers?
Thanks again.
Russell.
Thank you to both of you for your great support. I am nearly there with a templated dropdown that adds flags to the Language Switcher. I will document it here when it is ready, but for now I have a quandary, as you both, equally gave me good advice on where to look. Who to give the best answer mark too? Is there a way to add two best answers?
Thanks again.
Russell.
I believe jQuery UI is an asset that the core requires and loads when logged in. When logged out, this asset will not be required or loaded.
You can try adding "$this->requireAsset('jquery/ui');" in the Switch Language controller view(). This should require jQuery UI to be loaded as a required asset by the block: whether logged in or out.