Skip to main content
changed sentences order
Source Link
avpaderno
  • 97.9k
  • 15
  • 164
  • 284

A .libraries.yml file used from a module doesn't tell Drupal to attach the JavaScript and CSS files defined from the library to every page. To understand howattach the library when some conditions are met, a module should implement hook_page_attachments().

function mymodule_page_attachments(array &$attachments) {
  if (\Drupal::currentUser()->isAuthenticated()) {
    $attachments['#attached']['library'][] = 'my_module/lrv';
  }
}

Using that code, the library would be attached to correctly defineevery page visited from a logged-in user. Attaching the library to every page, seeeven when they are requested from anonymous users just require implementing a hook similar to the following one.

function mymodule_page_attachments(array &$attachments) {
  // Unconditionally attach the mymodule/lrv library.
  $attachments['#attached']['library'][] = 'my_module/lrv';
}

The library definition shown in the question contains an error: The dependencies key should not be a sub-key of the js nor the css key, but it should be at the same level of the js and css keys. See how Drupal core defines its librarylibraries, for example the ones defined in core.libraries.yml. (I removed the comment lines from the definitions I copied.)

ThePutting the dependencies key isin the wrong place would not a sub-key of js, nor css, but it is atallow Drupal to load the same level oflibraries from which your library depends. Your library would work only when Drupal already loaded the jscore/jquery and the csscore/drupalSettings keyslibraries for other libraries.
Keep in mind that theThis and not implementing dependencies key defineshook_page_attachments() are two possible reasons for your library not to work; another reason could be errors in the dependencies ofJavaScript code or in the library from other librariesCSS code (for example a wrong CSS selector).

The hook_page_attachments() implementations I would rathershown use the following library declarationdefinition.

A .libraries.yml file used from a module doesn't tell Drupal to attach the JavaScript and CSS files defined from the library to every page. To attach the library when some conditions are met, a module should implement hook_page_attachments().

function mymodule_page_attachments(array &$attachments) {
  if (\Drupal::currentUser()->isAuthenticated()) {
    $attachments['#attached']['library'][] = 'my_module/lrv';
  }
}

Using that code, the library would be attached to every page visited from a logged-in user. Attaching the library to every page, even when they are requested from anonymous users just require implementing a hook similar to the following one.

function mymodule_page_attachments(array &$attachments) {
  // Unconditionally attach the mymodule/lrv library.
  $attachments['#attached']['library'][] = 'my_module/lrv';
}

To understand how to correctly define a library, see how Drupal core defines its library, for example the ones defined in core.libraries.yml. (I removed the comment lines from the definitions I copied.)

The dependencies key is not a sub-key of js, nor css, but it is at the same level of the js and css keys.
Keep in mind that the dependencies key defines the dependencies of the library from other libraries.

I would rather use the following library declaration.

A .libraries.yml file used from a module doesn't tell Drupal to attach the JavaScript and CSS files defined from the library to every page. To attach the library when some conditions are met, a module should implement hook_page_attachments().

function mymodule_page_attachments(array &$attachments) {
  if (\Drupal::currentUser()->isAuthenticated()) {
    $attachments['#attached']['library'][] = 'my_module/lrv';
  }
}

Using that code, the library would be attached to every page visited from a logged-in user. Attaching the library to every page, even when they are requested from anonymous users just require implementing a hook similar to the following one.

function mymodule_page_attachments(array &$attachments) {
  // Unconditionally attach the mymodule/lrv library.
  $attachments['#attached']['library'][] = 'my_module/lrv';
}

A .libraries.yml file used from a module doesn't tell Drupal to attach the JavaScript and CSS files defined from the library to every page. To attach the library when some conditions are met, a module should implement hook_page_attachments().

function mymodule_page_attachments(array &$attachments) {
  if (\Drupal::currentUser()->isAuthenticated()) {
    $attachments['#attached']['library'][] = 'my_module/lrv';
  }
}

Using that code, the library would be attached to every page visited from a logged-in user. Attaching the library to every page, even when they are requested from anonymous users just require implementing a hook similar to the following one.

function mymodule_page_attachments(array &$attachments) {
  // Unconditionally attach the mymodule/lrv library.
  $attachments['#attached']['library'][] = 'my_module/lrv';
}

The library definition shown in the question contains an error: The dependencies key should not be a sub-key of the js nor the css key, but it should be at the same level of the js and css keys. See how Drupal core defines its libraries, for example the ones defined in core.libraries.yml. (I removed the comment lines from the definitions I copied.)

Putting the dependencies key in the wrong place would not allow Drupal to load the libraries from which your library depends. Your library would work only when Drupal already loaded the core/jquery and the core/drupalSettings libraries for other libraries.
This and not implementing hook_page_attachments() are two possible reasons for your library not to work; another reason could be errors in the JavaScript code or in the CSS code (for example a wrong CSS selector).

The hook_page_attachments() implementations I shown use the following library definition.

added a note about theme libraries
Source Link
avpaderno
  • 97.9k
  • 15
  • 164
  • 284

To understand how to correctly define a library, see how Drupal core defines its library, for example the ones defined in core.libraries.yml. (I removed the comment lines from the definitions I copied.)

jquery:
  remote: https://github.com/jquery/jquery
  version: "3.2.1"
  license:
    name: MIT
    url: https://github.com/jquery/jquery/blob/3.2.1/LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/jquery/jquery.min.js: { minified: true, weight: -20 }

jquery.cookie:
  remote: https://github.com/carhartl/jquery-cookie
  version: "v1.4.1"
  license:
    name: MIT
    url: https://github.com/carhartl/jquery-cookie/blob/v1.4.1/MIT-LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/jquery.cookie/jquery.cookie.min.js: { minified: true }
  dependencies:
    - core/jquery

jquery.farbtastic:
  remote: https://github.com/mattfarina/farbtastic
  # @todo Ping @robloach or @mattfarina to retroactively create this release.
  version: "1.2"
  license:
    name: GNU-GPL-2.0-or-later
    url: https://github.com/mattfarina/farbtastic/blob/master/LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/farbtastic/farbtastic.js: { minified: true }
  css:
    component:
      assets/vendor/farbtastic/farbtastic.css: {}
  dependencies:
    - core/jquery
jquery:
  remote: https://github.com/jquery/jquery
  version: "3.2.1"
  license:
    name: MIT
    url: https://github.com/jquery/jquery/blob/3.2.1/LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/jquery/jquery.min.js: { minified: true, weight: -20 }

jquery.cookie:
  remote: https://github.com/carhartl/jquery-cookie
  version: "v1.4.1"
  license:
    name: MIT
    url: https://github.com/carhartl/jquery-cookie/blob/v1.4.1/MIT-LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/jquery.cookie/jquery.cookie.min.js: { minified: true }
  dependencies:
    - core/jquery

jquery.farbtastic:
  remote: https://github.com/mattfarina/farbtastic
  version: "1.2"
  license:
    name: GNU-GPL-2.0-or-later
    url: https://github.com/mattfarina/farbtastic/blob/master/LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/farbtastic/farbtastic.js: { minified: true }
  css:
    component:
      assets/vendor/farbtastic/farbtastic.css: {}
  dependencies:
    - core/jquery
lrv:
  version: 1.x
  js:
    js/lrv.js: {}   
  css:
    theme:
      css/lrv.css: {}
  dependencies:
    - core/jquery
    - core/drupalSettings
lrv:
  version: 1.x
  js:
    js/lrv.js: {}   
  css:
    theme:
      css/lrv.css: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

A .libraries.yml file just definesused from a module doesn't tell Drupal to attach the libraries, which aren't automatically loaded, sinceJavaScript and CSS files defined from the definition doesn't saylibrary to Drupalevery page. To attach the library when theysome conditions are met, a module should implement hook_page_attachments().

function mymodule_page_attachments(array &$attachments) {
  if (\Drupal::currentUser()->isAuthenticated()) {
    $attachments['#attached']['library'][] = 'my_module/lrv';
  }
}

Using that code, the library would be loadedattached to every page visited from a logged-in user.
To load your Attaching the library, for example in hook_page_attachments() to every page, you use codeeven when they are requested from anonymous users just require implementing a hook similar to the following one.

function mymodule_page_attachments(array &$attachments) {
  $attachments['#attached']['library'][] = 'mymodule/lrv';
}
function mymodule_page_attachments(array &$attachments) {
  // Unconditionally attach the mymodule/lrv library.
  $attachments['#attached']['library'][] = 'my_module/lrv';
}

The name of the library is mymodulemy_module/lrv because it is defined as key lrv (the one I used in the code I shown) in the file mymodulemy_module.libraries.yml (the one you seem to use).

Note about theme libraries

What I described in this answer is valid only for modules: Themes just need to use a .libraries.yml file. Drupal will attach the libraries defined in the active theme to every page.
That is done in system_page_attachments(), which uses the following code. (See the comment before the quoted code.)

// Attach libraries used by this theme.
$active_theme = \Drupal::theme()->getActiveTheme();
foreach ($active_theme->getLibraries() as $library) {
  $page['#attached']['library'][] = $library;
}

To understand how to correctly define a library, see how Drupal core defines its library, for example the ones defined in core.libraries.yml.

jquery:
  remote: https://github.com/jquery/jquery
  version: "3.2.1"
  license:
    name: MIT
    url: https://github.com/jquery/jquery/blob/3.2.1/LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/jquery/jquery.min.js: { minified: true, weight: -20 }

jquery.cookie:
  remote: https://github.com/carhartl/jquery-cookie
  version: "v1.4.1"
  license:
    name: MIT
    url: https://github.com/carhartl/jquery-cookie/blob/v1.4.1/MIT-LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/jquery.cookie/jquery.cookie.min.js: { minified: true }
  dependencies:
    - core/jquery

jquery.farbtastic:
  remote: https://github.com/mattfarina/farbtastic
  # @todo Ping @robloach or @mattfarina to retroactively create this release.
  version: "1.2"
  license:
    name: GNU-GPL-2.0-or-later
    url: https://github.com/mattfarina/farbtastic/blob/master/LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/farbtastic/farbtastic.js: { minified: true }
  css:
    component:
      assets/vendor/farbtastic/farbtastic.css: {}
  dependencies:
    - core/jquery
lrv:
  version: 1.x
  js:
    js/lrv.js: {}   
  css:
    theme:
      css/lrv.css: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

A .libraries.yml file just defines the libraries, which aren't automatically loaded, since the definition doesn't say to Drupal when they should be loaded.
To load your library, for example in hook_page_attachments(), you use code similar to the following.

function mymodule_page_attachments(array &$attachments) {
  $attachments['#attached']['library'][] = 'mymodule/lrv';
}

The name of the library is mymodule/lrv because it is defined as key lrv (the one I used in the code I shown) in the file mymodule.libraries.yml (the one you seem to use).

To understand how to correctly define a library, see how Drupal core defines its library, for example the ones defined in core.libraries.yml. (I removed the comment lines from the definitions I copied.)

jquery:
  remote: https://github.com/jquery/jquery
  version: "3.2.1"
  license:
    name: MIT
    url: https://github.com/jquery/jquery/blob/3.2.1/LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/jquery/jquery.min.js: { minified: true, weight: -20 }

jquery.cookie:
  remote: https://github.com/carhartl/jquery-cookie
  version: "v1.4.1"
  license:
    name: MIT
    url: https://github.com/carhartl/jquery-cookie/blob/v1.4.1/MIT-LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/jquery.cookie/jquery.cookie.min.js: { minified: true }
  dependencies:
    - core/jquery

jquery.farbtastic:
  remote: https://github.com/mattfarina/farbtastic
  version: "1.2"
  license:
    name: GNU-GPL-2.0-or-later
    url: https://github.com/mattfarina/farbtastic/blob/master/LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/farbtastic/farbtastic.js: { minified: true }
  css:
    component:
      assets/vendor/farbtastic/farbtastic.css: {}
  dependencies:
    - core/jquery
lrv:
  version: 1.x
  js:
    js/lrv.js: {}   
  css:
    theme:
      css/lrv.css: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

A .libraries.yml file used from a module doesn't tell Drupal to attach the JavaScript and CSS files defined from the library to every page. To attach the library when some conditions are met, a module should implement hook_page_attachments().

function mymodule_page_attachments(array &$attachments) {
  if (\Drupal::currentUser()->isAuthenticated()) {
    $attachments['#attached']['library'][] = 'my_module/lrv';
  }
}

Using that code, the library would be attached to every page visited from a logged-in user. Attaching the library to every page, even when they are requested from anonymous users just require implementing a hook similar to the following one.

function mymodule_page_attachments(array &$attachments) {
  // Unconditionally attach the mymodule/lrv library.
  $attachments['#attached']['library'][] = 'my_module/lrv';
}

The name of the library is my_module/lrv because it is defined as key lrv (the one I used in the code I shown) in the file my_module.libraries.yml (the one you seem to use).

Note about theme libraries

What I described in this answer is valid only for modules: Themes just need to use a .libraries.yml file. Drupal will attach the libraries defined in the active theme to every page.
That is done in system_page_attachments(), which uses the following code. (See the comment before the quoted code.)

// Attach libraries used by this theme.
$active_theme = \Drupal::theme()->getActiveTheme();
foreach ($active_theme->getLibraries() as $library) {
  $page['#attached']['library'][] = $library;
}
deleted 9 characters in body
Source Link
avpaderno
  • 97.9k
  • 15
  • 164
  • 284

The name of the library is mymodule/lrv because it is defined as key lrv (the one I used in the code I shown) in the file mymodule.libraries.yml (which is thethe one you seem to use).

The name of the library is mymodule/lrv because it is defined as key lrv (the one I used in the code I shown) in the file mymodule.libraries.yml (which is the one you seem to use).

The name of the library is mymodule/lrv because it is defined as key lrv (the one I used in the code I shown) in the file mymodule.libraries.yml (the one you seem to use).

Source Link
avpaderno
  • 97.9k
  • 15
  • 164
  • 284
Loading