How to add jquery masonry / JS library

1

Hi,

i read this thread about hot to add a JS lib in roots.
http://discourse.roots.io/t/best-way-to-add-a-javascript-library/2203/3

i think that it worked for my bower install of jquery-ui but when i try to install jquery masonry (also with bower) in installs the files to the vendor.

I added the files to the gruntFile.js

‘assets/vendor/bootstrap/js/affix.js’,
‘assets/vendor/jquery-masonry/masonry.js’, <–
‘assets/js/plugins/.js’,
'assets/js/_.js’

an it doesnt throw any error –
but it gives me this error on the console

Uncaught TypeError: Cannot read property ‘create’ of undefinedscripts.js:2282 masonryDefinitionscripts.js:2447 (anonymous function)scripts.js:2453 (anonymous function)

the code of the compiled script is this:

// used for AMD definition and requires
function masonryDefinition( Outlayer, getSize ) {
// create an Outlayer layout class
var Masonry = Outlayer.create('masonry');
Masonry.prototype._resetLayout = function() {
this.getSize();
this._getMeasurement( 'columnWidth', 'outerWidth' );
this._getMeasurement( 'gutter', 'outerWidth' );
this.measureColumns();

Does anywone hove a idea – where the problem is and if i can fix it if i embed the library differently?

Thanks

2

You want to include the pkgd version, not the masonry.js, Unless you plan on compiling it via grunt. It should be under /dist/.

Also: WP includes a lot of popular scripts already enqueued, including Masonry and UI, so I’m not sure you need to do any of this at all.

http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Default_Scripts_Included_and_Registered_by_WordPress

3

@ewafford is correct. You need to add the packaged, unminified js file to grunt.

I recommend against using the built-in WordPress version because it’s not kept as updated as you can keep it by managing it yourself through Bower (it’s also already minified which isn’t great for Grunt/Gulp).

4

Hey,
thanks a lot!
Using the packaged version in the vendors/dist/ folder fixed the problem!

Best

1 Like