@veams/plugin-media-query-handler/lib/index.js

The Media Query Handler Plugin provides to you the possibility to get the current media query name from your css.

'use strict';
Object.defineProperty(exports, "__esModule", { value: true });
/**
 * Imports
 */
var extend_1 = require("@veams/helpers/lib/object/extend");
var throttle_1 = require("@veams/helpers/lib/operator/throttle");
/**
 * Plugin
 */
var VeamsMediaQueryHandler = {
    options: {
        mediaQueryProp: 'font-family',
        delay: 300
    },
    pluginName: 'MediaQueryHandler',
    initialize: function (Veams, opts) {
        var _this = this;
        // Media Query
        var head = document.querySelectorAll('head');
        if (opts) {
            this.options = extend_1.default(this.options, opts || {});
        }
        /**
         * Add current media query to Veams
         */
        Veams.currentMedia = window.getComputedStyle(head[0], null).getPropertyValue(this.options.mediaQueryProp);
        if (!Veams.Vent) {
            console.info('@veams/plugin-media-query-handler :: In order to work properly with the VeamsMediaQueryHandler plugin you should add the VeamsVent plugin!');
        }
        // Trigger global resize event
        window.onresize = throttle_1.default(function (e) {
            var currentMedia = window.getComputedStyle(head[0], null).getPropertyValue(_this.options.mediaQueryProp);
            var width = window.innerWidth;
            var height = window.innerHeight;
            var triggerResizeFull = false;
            if (currentMedia !== Veams.currentMedia) {
                var oldMedia = Veams.currentMedia;
                Veams.currentMedia = currentMedia;
                console.info("@veams/plugin-media-query-handler :: Current media is " + Veams.currentMedia);
                if (Veams.Vent) {
                    Veams.Vent.trigger(Veams.EVENTS.mediachange, {
                        type: Veams.EVENTS.mediachange,
                        currentMedia: currentMedia,
                        oldMedia: oldMedia
                    });
                }
            }
            if (Veams.detections.width !== width) {
                Veams.detections.width = width;
                triggerResizeFull = true;
                if (Veams.Vent) {
                    Veams.Vent.trigger(Veams.EVENTS.resize, e);
                }
            }
            if (Veams.detections.height !== height) {
                Veams.detections.height = height;
                triggerResizeFull = true;
                if (Veams.Vent) {
                    Veams.Vent.trigger(Veams.EVENTS.resizeVertical, e);
                }
            }
            if (triggerResizeFull) {
                if (Veams.Vent) {
                    Veams.Vent.trigger(Veams.EVENTS.resizeFull, e);
                }
            }
        }, this.options.delay);
    }
};
exports.default = VeamsMediaQueryHandler;
//# sourceMappingURL=index.js.map