3

I am developing a component, that shows a set of photos, in a simple div, and then, by clicking one of them opens up gallery popup. I have successfully imported my external Javascript libraries as Static Resources, as the CSP demands to. The look of the Lightning App, is this simple page:

enter image description here

In an execution where the Locker Service is disabled, this is what I get, after clicking one image(the expected behaviour):

enter image description here

Problem: when I want to try the bundle with the LockerService enabled, I get an error message that I find it difficoult to figure out what precisely might have gone wrong. The screenshot of the message:

enter image description here

Repro the use case:

In this folder in GDrive, you can find all the necessary files to use in order to reproduce the use case.

Thanks in advance, E.

Improve this question
2
  • 2
    It would be very much helpful if you could list out the names of the external libraries used along with this question. Also, rather than providing Google Drive link to reproduce the same, would be better if you could provide a link to install an unmanaged package.
    – SE_User
    Commented Feb 15, 2017 at 5:44
  • 1
    @SE_User: That's correct. Will keep that in mind for the next time.
    – Endrit Sino
    Commented Feb 15, 2017 at 8:34

1 Answer 1

Reset to default
3

I'm not sure what version of lightGallery you're using in your provided source, but it appears to be outdated. If you upgrade to a newer version plus take a couple additional steps this repro should work:

  1. Download the latest version of lightGallery
  2. In your helper file change the line lightGallery(document.getElementById('lightgallery')); to $("#lightgallery").lightGallery();
  3. Update <ltng:require> to import jquery before lightGallery since lightGallery has a dependency on jquery being loaded first.

After these mods the behavior for the app is the same with and without LockerService enabled.

If you're curious why your version of lightGallery doesn't work here are the technical details. First, it uses CustomEvent and there's a small issue in LockerService code here. It's a 1 line fix that I anticipate won't take long to be fixed in production. Once past that issue, lightGallery tries to call insertAdjacentHTML on document.body. This behavior is intentionally blocked by LockerService since document.body is a shared element. Inside Locker, you (and the libs you use) should only be messing with the DOM you directly own.

Improve this answer
8
  • Thanks for your assistance. I made the changes that you suggested, and yes tha gallery works, but unfortunatelly, partiali. What I mean by this is that for example: the counter of the pages (1/2) or (2/2), never gets updated while I'm browsing the photos. I also lost the thumbnail bar of the photos, on the bottom left section.
    – Endrit Sino
    Commented Feb 15, 2017 at 10:41
  • I understand that these elements or features are tied with the underlying logic of the plugin, but what I wanted to know, is if now the only thing to do is to reengineer the plug in, according to some considerations, in order to make it compliant with the LockerService standard?
    – Endrit Sino
    Commented Feb 15, 2017 at 10:48
  • The link of the second package, after editing it, according to Trevor's Suggestion: login.salesforce.com/packaging/…
    – Endrit Sino
    Commented Feb 15, 2017 at 10:55
  • @EndritSino I'm seeing the exact same behavior with and without LockerService enabled on your new package. Are you sure this is an issue with the 3rd party lib and not your component code? Maybe try getting an example online and verify full functionality with LockerService disabled, then activate it and see if there's any differences.
    – TrevorBliss
    Commented Feb 15, 2017 at 18:39
  • That's correct, but I simply followed your instructions.
    – Endrit Sino
    Commented Feb 15, 2017 at 20:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .