How to use jsPanel3 with Meteor JS?

[thearabbit]

I am a new for jsPanel. Now I base on Meteor JS,

// Install
npm install jspanel3

// Usage in template
import { $ } from 'meteor/jquery';
import 'jspanel3';

Template.hello.events({
  'click button'(event, instance) {

    $.jsPanel({
      position: { my: "center-top", at: "center-top", offsetY: 15 },
      theme: "rebeccapurple",
      contentSize: { width: 600, height: 350 },
      headerTitle: "Example jsPanel",
      content: "<p>Some sample text ...</p>",
      callback: function () {
        this.content.css("padding", "15px");
      }
    });
  },
});

But show error

Error: Cannot find module 'jspanel3'(…)

Please help me.

[Flyer53]

Hi there, I have to admit that I never ever worked with meteor.js. So there's not much I can say, sorry!

But if the jsPanel script needs some kind of "module definition" in order to work with meteor ... well, then I can say there is none. I'll try to find out some more, but can't promise anything.

[Flyer53]

Did you see this post already? Maybe it helps... http://stackoverflow.com/questions/11009971/how-can-i-add-third-party-javascript-libraries-to-a-meteor-application/11027228#11027228

[Flyer53]

The line

import 'jspanel3';

in your code. Shouldn't that read

import jspanel3 from 'jspanel3';

https://guide.meteor.com/using-npm-packages.html

[thearabbit]

Thanks, I will try soon.

[thearabbit]

Now It work, but can't get font

import 'jspanel3/source/jquery.jspanel.css';
import 'jspanel3/vendor/jquery-ui-1.12.1.complete/jquery-ui.min.css';

import 'jspanel3/vendor/jquery-ui-1.12.1.complete/jquery-ui.min.js';
import 'jspanel3/vendor/jquery.ui.touch-punch.min.js';
import 'jspanel3/source/jquery.jspanel-compiled.js';

Error to get font

Failed to decode downloaded font: http://localhost:3000/fonts/jsglyph.ttf

[thearabbit]

Now it work fine for all, when I move ../source/fonts to meteor /public in root. And then change font face path like this:

@font-face {
  font-family: "jsglyph";
  src: url("/fonts/jsglyph.eot");
  src: url("/fonts/jsglyph.eot?#iefix") format("embedded-opentype"), url("/fonts/jsglyph.ttf") format("truetype"), url("/fonts/jsglyph.woff") format("woff"), url("/fonts/jsglyph.svg#jsglyph") format("svg"); }

[thearabbit]

Oh but I have problem with jquery version when I use Boostrap

Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3(…)

[Flyer53]

Hi again, that's is a bootstrap limitation and not a jsPanel issue. I guess you use an old bootstrap 4 alpha version. Update to bootstrap v4.0.0-alpha.5 and there shouldn't be a problem with jQuery 3.x. See https://v4-alpha.getbootstrap.com/getting-started/introduction/#quick-start

[thearabbit]

Now It work fine with Meteor meteor add theara:jspanel. Thanks again for your helping.