In creating a simple Packery / Draggabilly module in Meteor, I ran into a problem importing the constructor function. Using import statement, Packery or Draggabilly would not show up in the console, whereas using a <script src= cdn...> in the html template (as a test), it would.
In either case, I could not quite get packery, draggabilly, etc to work. It wasn’t clear to me how or where to add them to onCreated, helpers, etc.
import { ReactiveVar } from 'meteor/reactive-var';
import { Packery } from 'packery';
console.log("Packery contructor is " + Packery + ". Why?") // undefined
console.log("However, packery is a " + packery + ".") // function
import { Draggabilly } from 'draggabilly';
import './main.html';
Template.grid.onCreated(function gridOnCreated() {
this.items = new ReactiveVar();
});
Template.grid.helpers({
items() {
return Template.instance().items.get(false);
},
});
Template.grid.onRendered(function() {
var elem = document.querySelector('.grid');
// INITIALIZE PACKERY
var $grid = $('.grid').packery({ // Packery, packery still not defined
itemSelector: '.grid-item',
columnWidth: 240
});
// DRAGGABILLY
$grid.find('.grid-item').each( function( i, gridItem ) {
var draggie = new Draggabilly( gridItem );
$grid.packery( 'bindDraggabillyEvents', draggie );
});
})
Template.grid.events({
'change [name="uploadCSV"]' ( event, template ) {
const inventory = event.target.files[0];
Papa.parse(inventory, { // works like a charm
header: true,
complete: function(results) {
let items = results.data;
template.items.set(items); // {{#each item of items}} populates template correctly
} // END complete
}); // END parse
}, // change
}); // events
Code on repo https://github.com/dylannirvana/gridorderapp/tree/master/meteor
Everything populates, but I do not yet have access to Packery, Draggabilly, etc.
Hugely appreciative of any assistance. I realize the problem I am having is due still to my relative unfamiliarity with Meteor. Thank you so much!