Converting working jQuery to function under Laravel Mix / WebPack

user_1022861 0
Viewed 163

I've just started using Laravel Mix for an existing project that previously had a single static JS file that contained a mixture of my own jquery code and a few pasted libraries. One of these libraries is for a lightbox called lity. However this question is quite general, it's not really about lity. I think that there is some general principal about integrating JS into webpack that I don't understand quite right.

The scenario

So I am now using Mix and I have a JS file with my own random code in it and I also include into that the latest official JS libraries that I need (via npm).

Ie I add the following line to my JS file to include the lity library that I have installed via npm.

lity = require('lity');

I'm almost there but then the following code that I previously had in my document.ready() code doesn't work because it can't seem to reference the lity object.

The code that is a problem that is stil at the top of my custom JS file is as follows

$(document).ready(function() {
    lity.handlers('', function(target, instance) {
        // for specific page urls I add a class to the lity container
        if ( target.indexOf('/page1')>-1 || target.indexOf('/page-name2')>-1 ) {
            instance.element().find('.lity-container').addClass("lity-resize450");
        }
        return lity.iframe(target, instance);
    });
});

The error

When the JS compiles (which it does without error) I get the following at runtime

app.js?20200217:62 Uncaught TypeError: lity.iframe is not a function
    at app.js?20200217:62
    at Function.<anonymous> (app.js?20200217:13561)
    at Function.each (app.js?20200217:2612)
    at factory (app.js?20200217:13548)
    at new Lity (app.js?20200217:13661)
    at lity (app.js?20200217:13724)
    at HTMLSpanElement.<anonymous> (app.js?20200217:461)
    at HTMLDocument.dispatch (jquery.min.js:2)
    at HTMLDocument.v.handle (jquery.min.js:2)

So it seems that lity isn't accessible somehow. .. so what is wrong with this? Anyone got an idea ?

laravel-mix webpack
1 Answers

I think you can't call the iframe from lity function because it was defined in handlers.

var _defaultOptions = {
        esc: true,
        handler: null,
        handlers: {
            image: imageHandler,
            inline: inlineHandler,
            youtube: youtubeHandler,
            vimeo: vimeoHandler,
            googlemaps: googlemapsHandler,
            facebookvideo: facebookvideoHandler,
            iframe: iframeHandler
        },
       ...
    };

So you can try to call the iframe function with this way.

$(document).ready(function() {
    lity.handlers('', function(target, instance) {
        // for specific page urls I add a class to the lity container
        if ( target.indexOf('/page1')>-1 || target.indexOf('/page-name2')>-1 ) {
            instance.element().find('.lity-container').addClass("lity-resize450");
        }
        return this.iframe(target, instance);
    });
});

If this method don't work for you, please let me know.

user_149795860
Related