I have created a new Polymer 3 wrapper for an existing Javascript Library called muuri (muuri.js). Then I created a new Polymer Template project and included the javascript files in the appropriate resources directory. However the Polymer javascript file (muuri-layout.js) includes a reference to the muuri.js which has been tested and works as expected, when running “polymer serve --open”
When I run the template demo I can see that my polymer code is included in the dom, but an error is thrown that Muuri is not defined. This leads me to believe that the muuri.js file isnt being loaded for some reason.
Any help? My existing code is below…I have also included my existing project as an attachment. Thanks everyone!
MuuriLayout.java
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;
import com.vaadin.flow.component.html.Div;
@Tag("muuri-layout")
@JsModule("./muuri-layout.js")
//@NpmPackage(value = "@polymer/muuri-layout", version = "^3.0.1")
/*
If you wish to include your own JS modules in the add-on jar, add the module
files to './src/main/resources/META-INF/resources/frontend' and insert an
annotation @JsModule("./my-module.js") here.
*/
public class MuuriLayout extends Component {
public MuuriLayout() {
}
/**
* Creates the muuri item wrappers for the components
* @param component
* @return
*/
public Component addComponent(Component component){
//create the outer div
Div item = new Div();
item.addClassName("item");
//create the inner div
Div itemContent = new Div();
item.addClassName("item-content");
//add the content to item
item.add(itemContent);
//add the component to the wrapper
itemContent.add(component);
return item;
}
}
muuri-layout.js
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js';
import './muuri.js';
/**
* `muuri-layout`
* a wrapper for the muuri javascript library
*
* @customElement
* @polymer
* @demo demo/index.html
*/
class MuuriLayout extends PolymerElement {
static get template() {
return html`
<style>
:host {
position: relative;
width: 100%;
}
</style>
<slot id="slot"></slot>
`;
}
static get properties() {
return {
class: {
reflectToAttribute: true,
value: 'grid',
},
};
}
init(){
this.raw = new Muuri(this, {
showDuration: 2000
});
console.log('init called!');
afterNextRender(this, function () {
//this.layout();
});
}
connectedCallback() {
super.connectedCallback();
this.init();
console.log('muuri-layout created!');
}
addItemToGrid(){
//create the wrapping element
var newElement = document.createElement("div");
newElement.classList.add("item");
//create the inner element
var innerElement = document.createElement("div");
innerElement.classList.add("item-content");
innerElement.appendChild(this.createNewThing("New Node"));
newElement.appendChild(innerElement);
var element =this.raw.getElement();
element.appendChild(newElement);
this.raw.add(newElement);
this.raw.show(newElement);
}
createNewThing(text){
var newElement = document.createElement("div");
newElement.innerHTML = text;
return newElement;
}
}
window.customElements.define('muuri-layout', MuuriLayout);