Kirbytag used in panel needs JavaScript

Hi,

i recently created a custom kirbytag “overlay” which merely wirks like “link” but opens the link within an overlay. As we use GLightbox | A touchable pure Javascript lightbox in our frontend (Gallery) i tried to “simply” make it available in the panel … to no avail.

I tried to use the lib like described here panel | Kirby CMS but that didn’t work. In general we use webpack in combination with mix to compile the code which leads to three JS-files (custom.js + vendor.js + manifest.js) which needs to be referenced to.

As i not that fluent in the different build tools it would be great if someone could point me to a working example on how to integrate 3rd party JS libs in the panel.

Thanks in advance,

Thomas E.-E.

Have you tried with kirbyup instead of webpack for the plugin? GitHub - johannschopplich/kirbyup: 🆙 Zero-config bundler for Kirby Panel plugins

thanks @rasteiner in fact we use kirbyup to build our plugins. Reading through the kirbyup documentation i am quite unsure how this would be help to provide the exernal JS in the plugin. Any hint/example where this has been used already?

Thanks in advance, Thomas E.-E.

ok … 1 step further. What i did now is

  • add a package.json and yarn add glightbox
  • add src/index.js which imports the glightbox lib like
  • which leads to a generated index.js which includes the glightbox code

but, the code is not available in the panel anymore meaning i didn’t find any script (tag) which includes the JS in the panel.

Any idea what needs to be done to get this working @rasteiner @texnixe ?

Kirby creates a combined index.js from all plugins. You should see that get loaded in your dev tools network tab.

1 Like

ok, got it … had some caching issues. After manual removal of the media folder i can see the plugin js code in the generated http://<host>/media/plugins/index.js?1657003315. Unfortunately the lightbox still doesn’t work as expected but this might be no kirby issue anymore …

If you’re hoping that glightbox somehow will be able to initialize itself and apply itself to links or stuff, that won’t work. The panel is a single page app, and glightbox wouldn’t know what or when to do.

You included the library into your plugin. I imagine like this:

import GLightbox from 'glightbox';

You have now access to GLightbox inside your plugin, but that doesn’t mean it just automatically works with any link there might be in the panel.

wasn’t aware of this, thanks for the explanation @rasteiner.

How would you proceed to make this lighbox functionality available in the panel? Is there a way to achieve that? Appreciate your time and many thanks for any hint, link, tip you could give me to direct me into the right direction :slight_smile: