Check Foundation Media Queries

foundation-mq.js

/* globals $, jQuery, Foundation */
/* jshint node:true */

'use strict';

window.MQ = (function(MQ, $, queries) {

  /**
   * $cache elements
   * @type {Object}
   */
  var $cache = {
    small: queries.small,
    medium: queries.medium,
    large: queries.large,
    xlarge: queries.xlarge,
    xxlarge: queries.xxlarge
  };

  /**
   * Check media queries
   * @param  {string} mq [media query]
   * @return {boolean}
   */
  var _checkMatchMedia = function (mq) {
    return window.matchMedia(mq).matches;
  };

  /**
   * Get small screen media query
   * @return {string}
   */
  var _getSmall = function () {
    return $cache.small;
  };

  /**
   * Get medium screen media query
   * @return {string}
   */
  var _getMedium = function () {
    return $cache.medium;
  };

  /**
   * Get large screen media query
   * @return {string}
   */
  var _getLarge = function () {
    return $cache.large;
  };

  /**
   * Get xlarge screen media query
   * @return {string}
   */
  var _getXLarge = function () {
    return $cache.xlarge;
  };

  /**
   * Get xxlarge screen media query
   * @return {string}
   */
  var _getXXLarge = function () {
    return $cache.xxlarge;
  };

  /**
   * Check if we're on a small screen
   * @return {Boolean}
   */
  MQ.isSmallUp = function () {
    return _checkMatchMedia(_getSmall());
  };

  /**
   * Check if we're on a medium screen
   * @return {Boolean}
   */
  MQ.isMediumUp = function () {
    return _checkMatchMedia(_getMedium());
  };

  /**
   * Check if we're on a large screen
   * @return {Boolean}
   */
  MQ.isLargeUp = function () {
    return _checkMatchMedia(_getLarge());
  };

  /**
   * Check if we're on a xlarge screen
   * @return {Boolean}
   */
  MQ.isXLargeUp = function () {
    return _checkMatchMedia(_getXLarge());
  };

  /**
   * Check if we're on a xxlarge screen
   * @return {Boolean}
   */
  MQ.isXXLargeUp = function () {
    return _checkMatchMedia(_getXXLarge());
  };

  /**
   * Check if we're on a small screen only
   * @return {Boolean}
   */
  MQ.isSmallOnly = function () {
      return !MQ.isMediumUp() && !MQ.isLargeUp() && !MQ.isXLargeUp() && !MQ.isXXLargeUp();
  };

  /**
   * Check if we're on a medium screen only
   * @return {Boolean}
   */
  MQ.isMediumOnly = function () {
      return MQ.isMediumUp() && !MQ.isLargeUp() && !MQ.isXLargeUp() && !MQ.isXXLargeUp();
  };

  /**
   * Check if we're on a large screen only
   * @return {Boolean}
   */
  MQ.isLargeOnly = function () {
      return MQ.isMediumUp() && MQ.isLargeUp() && !MQ.isXLargeUp() && !MQ.isXXLargeUp();
  };

  /**
   * Check if we're on a xlarge screen only
   * @return {Boolean}
   */
  MQ.isXLargeOnly = function () {
      return MQ.isMediumUp() && MQ.isLargeUp() && MQ.isXLargeUp() && !MQ.isXXLargeUp();
  };

  /**
   * Check if we're on a xxlarge screen only
   * @return {Boolean}
   */
  MQ.isXXLargeOnly = function () {
      return MQ.isMediumUp() && MQ.isLargeUp() && MQ.isXLargeUp() && MQ.isXXLargeUp();
  };

  return MQ;

})(window.MQ || {}, jQuery, Foundation.media_queries);