Ember js - how to create a shared uitility

Question

I am writing code to detect breakpoints via js using match media. In plain js, I know how to create a separate utility for this and consume it, but in Ember, how do I go about it, would I need to create a helper or something else.

Plain JS code:

define('viewportDimension', function() {
    var viewportSize ={
        mqMaxTablet : '959px',
        isTablet: function(){
            if(matchMedia){
                var mq = window.matchMedia("(max-width:" + this.mqMaxTablet+ ")");
                mq.addListener(this.viewportChanged);
                this.viewportChanged(mq);
            }
        },
        viewportChanged: function(mq){
            if(mq.matches){
                return true;
            }
        }
    };
    return viewportSize;
});

Ember Controller:

isTablet: function (){
 viewportDimension.isTablet();
}.property('')

I understand the above code will not work. I dont know how to make it more Ember'ish type. The "isTablet" property should be set to true, as soon as the media query match is done.

Started converting my plain js to emberish (as below), but dont know how to proceed.

define('viewportDimension',function(){
    var viewportSize = Ember.Object.extend({
        isTablet: function(){
            alert("1");

        }.property('')
    });
    return viewportSize;


});

Ember.Application.initializer({
    name: 'viewport-dimension',
    initialize: function(container,app){
        require('viewportDimension',function(object){
            app.ViewportDimension = object
        })
    }
})

Answer 1

Please take a look at simple-breakpoint-detector