emulsify_attach_lib.md

danny_englander [Oct 8th at 3:39 PM] Hey all, I have a question about JS in Emulsify. I see that in accordion-item.js for example, there is some commented text, UNCOMMENT IF DRUPAL and then below, REMOVE IF DRUPAL. I understand the notion of when attaching JS in drupal, since D6 or 7, you've had to use something like

Drupal.behaviors.accordion = {
//   attach: function (context, settings) {

. I am just trying to understand this in an Emulsify context. For example this script is located in /web/themes/custom/emulsify/components/_patterns/02-molecules/accordion-item/accordion-item.js So in this context, it's not Drupal, it's Pattern Lab so it makes sense with regard to the parts commented out. But what about when actually mapping this component over to Drupal at one point, what would one do with this script? Or does it get taken care of with aggregation on production but still only load when needed if an accordion is present? I do see in accrodion-item,twig on the Pattern Lab side {{ attach_library('emulsify/accordion') }} and that seems like Drupal 8 code but yet it's in pattern lab but I'm guessing Drupal can read that because of the Component Libraries module. (edited)

8 replies evanmwillhite [3 days ago] @danny_englander see the Javascript in Drupal section in the wiki https://github.com/fourkitchens/emulsify/wiki/Drupal-Usage#javascript-in-drupal (edited)

evanmwillhite [3 days ago] we use a modified version of attach_library in Emulsify now (since 2.7) which allows you to use that same method for adding in Pattern Lab and Drupal so you can just put it in your component file and the library will be loaded in both (only for JS on the Pattern Lab side currently). For instructions on using Drupal behaviors, see the 2nd part

danny_englander [3 days ago] @evanmwillhite thanks, so the implication is that to use as is, it's fine as the attach-library-twig-extension will be used and it will work on both sides, Drupal and PL?

evanmwillhite [3 days ago] in theory yes. That's a new feature though so let us know or better yet throw issues in the queue for it if you run into anything https://github.com/drupal-pattern-lab/attach-library-twig-extension GitHub drupal-pattern-lab/attach-library-twig-extension Drupal's attach_library function in Pattern Lab to simply load the javascript file. - drupal-pattern-lab/attach-library-twig-extension

danny_englander [3 days ago] ok cool, I will test it out. Thanks!

danny_englander [3 days ago] ahh, I see that's already in my composer file "drupal-pattern-lab/attach-library-twig-extension": "^1.0",

danny_englander [3 days ago] oh actually it's in emusify's composer but my cloned theme does not have it.

danny_englander [3 days ago] oh well at any rate it's in my main vendor folder above webroot