changeImageMediaQuery.js

this.smallMediaQuery = window.matchMedia('screen and (min-width: 320px) and (max-width: 768px)');
this.mediumMediaQuery = window.matchMedia('screen and (min-width: 768px) and (max-width: 1280px)');
this.largeMediaQuery = window.matchMedia('screen and (min-width: 1280px)');

if (this.slider.length) {
    this.smallMediaQuery.addListener(this.smallMediaQueryHandler.bind(this));
    this.mediumMediaQuery.addListener(this.mediumMediaQueryHandler.bind(this));
    this.largeMediaQuery.addListener(this.largeMediaQueryHandler.bind(this));
    this.smallMediaQueryHandler();
    this.mediumMediaQueryHandler();
    this.largeMediaQueryHandler();
}



App.prototype.smallMediaQueryHandler = function() {
        //TODO: clean up and create reference to responsiveImage
        if (this.smallMediaQuery.matches) {
            this.changeImages('small');
        }
        //console.log("small", this.smallMediaQuery.matches);
    }

    App.prototype.mediumMediaQueryHandler = function() {
        if (this.mediumMediaQuery.matches) {
            this.changeImages('medium');
        }
        //console.log("medium", this.mediumMediaQuery.matches);
    }

    App.prototype.largeMediaQueryHandler = function() {
        if (this.largeMediaQuery.matches) {
            this.changeImages('large');
        }
        //console.log("large", this.largeMediaQuery.matches);
    }

    App.prototype.changeImages = function(size) {
        var $images = $('.responsiveImage');
        $images.attr("src", $images.data(size));
        this.slider.reloadSlider();
    }