Practical way to use external UI component via ember-auto-import


#1

Hello Community,

all the bits seem to be there but I am not succeeding in working out how (especially where) to put them together.

My goal is to use an external component that is packaged in NPM (“kaleidoscopejs”) and that displays 360 spherical images

Because it is packaged in NPM it is possible to use ember-auto-import to use it. How this is done is not clear to me yet.

The example the package gives of how to use it in a webpage looks like this:

[refer in head to minified component script]

<body>
    <div id="container360"></div>
    <script type="text/javascript" charset="utf-8">
(function() {
    var viewer = new Kaleidoscope.Image({
        source: 'http://thiago.me/image-360/Polie_Academy_53.JPG',
        containerId: '#container360',
        height: window.innerHeight,
        width: window.innerWidth,
    });
    viewer.render();
    window.onresize = function() {
        viewer.setSize({height: window.innerHeight, width: window.innerWidth});
    };
})();
    </script>
</body>

So… how does one in an ember App display such a viewer in a particular route’s page?

should "import { Kaleidoscope } from ‘kaleidoscopejs’ " go in the app.js? In the route.js? should viewer.render() be used to display the component? Should this be coded in the route’s handlebars template e.g. within a “script” section? In the route’s model function?? None of the combinations I have experimented with yet give the expected result.

Thanks in advance for any pointers!

Rj


#2

OK - sorry for the bother, the documentation has got better and clearer, I should have looked through it.

The solution is to use a component, here is an example of code that works (the div needs to be declared in the component’s handlebars template):

import Component from '@ember/component';
import Kaleidoscope from 'kaleidoscopejs'

export default Component.extend({


    didInsertElement() {
        this._super(...arguments);
       
        var viewer = new Kaleidoscope.Image({
            source: 'http://thiago.me/image-360/Polie_Academy_53.JPG',
            containerId: '#container360',
            height: window.innerHeight,
            width: window.innerWidth,
        });
        viewer.render();
        window.onresize = function() {
            viewer.setSize({height: window.innerHeight, width: window.innerWidth});
        };
      }



});