Join Log in
Score:1
avatar Drupal

How to load a JS library (in a custom module) from a theme using only JS?

ph flag
Hayden Thring

I want custom subthemes, one for admin and one for front end. both need to load the leaflet js library that im trying to put into a custom module.

Ive got the subtheme bit working, and my global-scripts js running, but cant get module loaded or running.

themes/angas_admin/

angas_admin.info.yml

# subtheme by haydent httech.com.au
name:  Angas Admin
type: theme
description: 'seven subtheme by hayden - httech.com.au'
core: 8.x
base theme: seven

libraries:
  - angas_admin/global-styling
  - angas_admin/global-scripts
  - angas_module/leaflet  

regions:
  header: 'Header'
  pre_content: 'Pre-content'
  breadcrumb: Breadcrumb
  highlighted: Highlighted
  help: Help
  content: Content
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  sidebar_first: 'First sidebar'
regions_hidden:
  - sidebar_first

angas_admin.libraries.yml

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
global-scripts:    
  version: 1.x 
  js:
    js/script.js: {}

modules/angas_module/

angas_module.info.yml

name: Angas Module
description: map by haydent httech.com.au
type: module
core: 8.x

libraries:
  - angas_module/leaflet

angas_module.libraries.yml

leaflet:
  version: 1.x
  css:
    theme:
      css/leaflet.css: {}
  js:
    js/leaflet.js: {}
433
1 + 2
8
ru flag
Hudri
This looks largely correct, have you enabled `angas_module`? (You can't depend on an uninstalled module). Furthermore, I'd remove `libraries: - angas_module/leaflet` from `angas_module.info.yml` because this would unconditionally load Leaftlet on ALL pages.
2
Reply
ph flag
Hayden Thring
Yes, angas_module is enabled. the bit you suggest to remove ive tried a few different ways to load the module library by the subtheme. its fine if its loaded on all pages. in the themes script.js i have the code that looks for specific element in a page and insert/run leaflet code on it to generate map. i just want leaflet library available to my 2 subtheme angas_admin and angas_front (not mentioned but to come)
0
Reply
Score:3
sonfd avatar Drupal
in flag
sonfd

You need to add your module's library as a dependency of your theme's library (or any other library that depends on it). This will ensure it's always loaded and available for your theme's library. See Declaring dependencies in d.o's docs.

For example, in your theme's libraries.yml file:

global-scripts:    
  version: 1.x 
  js:
    js/script.js: {}
  dependencies:
    - angas_module/leaflet

After adding it as a dependency for your libraries, remove it from your theme's .info.yml file (not needed). And remove it from the module's .info.yml file (also not needed).

0 + 2
ph flag
Hayden Thring
So among other things I had tried this approach, which didnt work either, but after your recommendation It gave me confidence to think a little broader and tried the "clear all caches" button in the performance section of admin and this fixed it. Even though in that section I dont have caching or aggregation enabled ... Is there some way to stop this caching while im developing at least ? Thanks for your answer :)
0
Reply
ph flag
Hayden Thring
I found out how to disable caching.
0
Reply
ธงชาติไทย
Elon Musk
I sit in a Tesla and translated this thread with Ai:

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.