6

I try to integrate a vis.js library (http://visjs.org) Timeline in a lightning component and i'm facing a problem when I activate the locker service (without, it works very well).

Timeline is correctly rendered but an error occured on hovering any element : "TypeError : cur.hasOwnProperty is not a function" on the method below

ItemSet.prototype.itemFromElement = function(element) {
    var cur = element;
    while (cur) {
        if (cur.hasOwnProperty('timeline-item')) {
            return cur['timeline-item'];
        }
        cur = cur.parentNode;
    }

    return null;
};

The method is called on hovering the timeline to find a specific element. The element returned is a simple Html element like

<div class="vis-foreground">...</div>

I think I have to rewrite some parts to be compatible but after a long time debugging on Chrome dev tools I'm really blocked...

A simple example picked from this page throws the exception : http://visjs.org/timeline_examples.html

2
  • I read that and vis.js is not in the whitelist... so the only way to include the timeline is rewriting (huge work ?) the library to be compliant with locker service or use the alternative proposed by salesforce, the "Lightning Container Component". It uses iframes and I would rather to use the new salesforce api for this new component.
    – Matthieu
    Jul 15, 2017 at 17:02

2 Answers 2

6

When the Locker Service is turned on, any call such as this one made by vis.js:

var outer = document.createElement('div');

creates a Locker Service proxy object not a conventional DOM object and that proxy object imposes restrictions on the methods available. Normally there is a LockerService API Viewer available to see if a method is supported but that site is down at the moment.

I note that jQuery 2.2.4 that is documented as compatible with Locker Service does not make direct hasOwnProperty calls. Perhaps someone with experience of "fixing" 3rd party libraries to work with Locker Service can add an answer that explains more what is going on and what is needed to work-around the problem.

1
  • Yes I tried to debug inside the salesforce aura proxy but it's very obscure :) ! I will look the locker service API but I hope someone faced this sort or errors ! Thx
    – Matthieu
    Jul 15, 2017 at 12:21
0

@Matthieu, we have a fix coming for the next release (at the very least).

Meanwhile, here is a popular technique you can use to guard against the missing function on the object:

ItemSet.prototype.itemFromElement = function(element) {
    var hasOwn = Object.prototype.hasOwnProperty.call;
    var cur = element;
    while (cur) {
        if (hasOwn(cur, 'timeline-item')) {
            return cur['timeline-item'];
        }
        cur = cur.parentNode;
    }

    return null;
};
5
  • It gives me the same error...
    – Matthieu
    Sep 4, 2017 at 12:07
  • @Matthieu, I haven't looked at this for a while. Which specific example on vis.js are you trying to run?
    – JF Paradis
    Sep 6, 2017 at 23:42
  • 1
    I just tried the basic usage (Timeline basic usage) encapsulated in a lightning component and it throws the error when you mouse over the timeline. Thanks for your help !
    – Matthieu
    Sep 18, 2017 at 9:58
  • Hi @JFParadis. Please have a look at documentation.auraframework.org/lockerApiTest/…, last tab ("secure element"), search for "hasOwnProperty". Long story short "something" modifies the code so Objects aren't normal JS Objects anymore, they have less functions. Is there a way to release vis.js without these checks? Or what viable alternative you'd have for us? I don't look forward to an orgy of search-replace across whole vis.js library...
    – eyescream
    Sep 27, 2017 at 0:34
  • @eyescream, thanks for pointing-out the problem. We fixed it for the coming release. We should be able to apply the fix to production soon.
    – JF Paradis
    Oct 6, 2017 at 4:58

You must log in to answer this question.

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