Disable CERN Components' Patterns libraries

Theming
1

I am having troubles trying to disable some of the CERN Components’ libraries.

For example, there is this JS file that loads that dynamically moves the edit tabs, by assigning them a hardcoded top position. I want to disable that particular file.

I saw that the file is loaded through the cern_components module, which in turn contains a header_blocks pattern, which defines the carousel-library in its header-blocks.ui_patterns.yml file, like this:

libraries:
    - cern_components/owlcarousel
 
    - carousel-library:
        js:
          js/header_carousel.js: {}
        css:
          component:
            css/header_blocks.css: {}
        dependencies:
          - core/jquery
          - core/drupalSettings

Since my theme can handle that and I don’t need this JS file, I am trying to disable, in my theme.info.yml file, like this:

libraries-override:
  cern_components/owlcarousel: false
  carousel-library: false

Well, this doesn’t work, and neither the more sophisticated version:

libraries-override:
  carousel-library:
    js:
      js/header_carousel.js: false

I also tried supplying the full path to the file, to no avail.

I followed all the official Drupal 8 documentation regarding overriding libraries (https://drupal.stackexchange.com/questions/200418/override-a-single-javascript-file-from-a-module / https://www.drupal.org/node/2216195#override-extend / https://atendesigngroup.com/blog/mastering-drupal-8’s-libraries-api), but I can’t figure out which is the magic formula to do this…

I guess the problem resides in the internal path that this library is assigned, which I need to figure out on my own, because I can’t use any good debug tool (this makes for another topic :slight_smile: )

Anyone has an idea on how to do this? Thanks in advance!

2

Hi Oscar,

could you please try the following info.yml?

libraries-override:
  cern_components/carousel-library:
    js:
      js/header_carousel.js: false

Following documentation on : https://jasoncote.co/remove-replace-css-javascript-from-drupal-8-module

3

Hi Eduardo,

thanks for the quick reply. I tried your approach but it neither worked…

I also tried this:

libraries-override:
  cern_components/carousel-library: false

But it didn’t work either :frowning:

I think maybe the CERN Components Patterns may be injecting their libraries via code, or something. I am not familiar yet with the new APIs in D8, so I will keep investigating…

By the way, I installed a little module named Libraries Debug that can at least help me detect whether the libraries loaded without going to the Network or Resources panel in Chrome: https://www.drupal.org/project/libraries_debug

If I find a way to do this I will update this question.

Thanks!

4

I found it!

The key is the documentation for UI Patterns module, whose API is used in the implementation of most of the CERN Components module’s patterns:

https://ui-patterns.readthedocs.io/en/8.x-1.x/content/patterns-definition.html

So it turns out that all the libraries defined as part of UI Patterns are namespaced with ui_patterns, so the right YAML structure is as follows:

libraries-override:
  cern_components/owlcarousel: false
  ui_patterns/header_blocks.carousel-library: false

Unfortunately this didn’t fix my problem, because although the JS file that I thought was in charge of mangling the edit tabs is not loading anymore, the tabs are indeed still being dynamically assigned a top CSS property…

Anyway, this might be useful for other cases, so hopefully someone will find it interesting!

2 Likes