Import statement, constructor and npm module Packery


#1

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!