2

I'm using Drupal 8.1.7 and use group module. When a user display a group or an article linked to a group (/group/... or node/...), I want to specify some specific CSS for each group.

I develop a module that do the trick (verify if we display a group or an article, get the group and load a JS file that modify the CSS style of the page). Work great on my dev drupal with no cache, but when I test the module in production with cache active, the JS file seems to be load only once. Have to do a drush cr to load again the file.

There is any way to tell Drupal to load the file everytime, or don't put it in cache ? In the mymodule.libraries.yml maybe ?

color:
  js:
    js/mymodule.js: {}
  dependencies:
    - core/jquery
    - core/drupalSettings
    - core/drupal
1

With the current approach, you want your JS file to be loaded globally so either custom module, or directly in the theme.

However this is not the best solution. What you want is to preprocess the node, check if it belongs to any group and add identifying classes. With that you can then target with CSS.

If you really want to go the difficult, look at #lazy_builder placeholders. This blog post has a nice explanation.

0
3

I can not believe that you will have one different JS for every group. So caching is cool, and I assume your problem is the triggering of a function in the JS.

You can use the Drupal.behaviors to call a function in your JS everytime a page is loaded, i.e.

(function ($, Drupal) {

  Drupal.behaviors.anyInit = {
      attach: function () {
        myInitFunction();
      }
  }
})(jQuery, Drupal);

function myInitFunction() { do something }

And you can pass variables to the JS (like your group name), by attaching them to your rendering array, like so:

$build['#attached']['library'][] = 'bootasde/asdejs';
$build['#attached']['drupalSettings']['bootasde']['proreos_server'] = SystemTools::getProreosServer();
$build['#attached']['drupalSettings']['bootasde']['checktyp'] = 'a';
$build['#attached']['drupalSettings']['bootasde']['id'] = $id;

Then you access that variables in your JS like:

  var server = drupalSettings.bootasde.proreos_server;
  var id = drupalSettings.bootasde.id;
  var tp = drupalSettings.bootasde.checktyp;

Hope that helps.

Another way could be to add the group names to the CSS classes in your twig template and have some special selectors for each groupname.

2
  • I have only one JS for every group. Each group have some fields with specific color / image ... and the JS file changes CSS dynamically based on parameters that are given to him. I'll try your suggestion and come back to you. – Snabow Aug 4 '16 at 7:49
  • You proposition work too, thanks for your help ;-) – Snabow Aug 4 '16 at 13:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.