Source: src/main/javascript/oracle/oj/ojcore/ResponsiveUtils.js

/*jslint browser: true*/
/*
** Copyright (c) 2014, Oracle and/or its affiliates. All rights reserved.
*/


/**
 * @class Utilities for responsive pages.
 * @since 1.1.0
 * @expose
 */
oj.ResponsiveUtils = {};


/**
 * <p>In the jet sass files there are variables for 
 * responsive screen sizes, these look something like</p>
 *  <ul>
 *    <li>$screenSmallRange:  0, 767px;</li>
 *    <li>$screenMediumRange: 768px, 1023px;</li>
 *    <li>$screenLargeRange:  1024px, 1279px;</li>
 *    <li>$screenXlargeRange: 1280px, $appContentMaxWidth;</li>
 *  </ul>
 * 
 * <p>These constants are used to identify these ranges.</p>
 * @enum {string}
 * @constant
 * @expose
 */
oj.ResponsiveUtils.SCREEN_RANGE ={
   /**
   * @expose
   * @constant
   */
   SM: "sm",
   /**
   * @expose
   * @constant
   */
   MD: "md",
   /**
   * @expose
   * @constant
   */
   LG: "lg",
   /**
   * @expose
   * @constant
   */
   XL: "xl",
   /**
   * @expose
   * @constant
   */
   XXL: "xxl"

};


/**
 * <p>In the jet sass files there are variables for 
 * responsive queries like $responsiveQuerySmallUp, 
 * $responsiveQuerySmallOnly, $responsiveQueryMediumUp, etc.</p>
 * 
 * <p>These constants are used to identify these queries.</p>
 * @enum {string}
 * @constant
 * @expose
 */
oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY = {
   /**
   * matches small and up screens
   * @expose
   * @constant
   */
   SM_UP: "sm-up",
   /**
   * matches medium and up screens
   * @expose
   * @constant
   */
   MD_UP: "md-up",
   /**
   * matches large and up screens
   * @expose
   * @constant
   */
   LG_UP: "lg-up",
   /**
   * matches extra large and up screens
   * @expose
   * @constant
   */
   XL_UP: "xl-up",
   /**
   * matches xxl and up screens
   * @expose
   * @constant
   */
   XXL_UP: "xxl-up",

   /**
   * matches small screens only
   * @expose
   * @constant
   */
   SM_ONLY: "sm-only",
   /**
   * matches medium screens only
   * @expose
   * @constant
   */
   MD_ONLY: "md-only",
   /**
   * matches large screens only
   * @expose
   * @constant
   */
   LG_ONLY: "lg-only",
   /**
   * matches extra large screens only
   * @expose
   * @constant
   */
   XL_ONLY: "xl-only",

   /**
   * matches medium and down screens 
   * @expose
   * @constant
   */
   MD_DOWN: "md-down",
   /**
   * matches large and down screens
   * @expose
   * @constant
   */
   LG_DOWN: "lg-down",
   /**
   * matches extra large and down screens
   * @expose
   * @constant
   */
   XL_DOWN: "xl-down",
   /**
   * matches high resolution screems
   * @expose
   * @constant
   */
   HIGH_RESOLUTION: "high-resolution"

};

// used by the compare function
oj.ResponsiveUtils._RANGE = {};
oj.ResponsiveUtils._RANGE[oj.ResponsiveUtils.SCREEN_RANGE.SM]   = 0;
oj.ResponsiveUtils._RANGE[oj.ResponsiveUtils.SCREEN_RANGE.MD]   = 1;
oj.ResponsiveUtils._RANGE[oj.ResponsiveUtils.SCREEN_RANGE.LG]   = 2;
oj.ResponsiveUtils._RANGE[oj.ResponsiveUtils.SCREEN_RANGE.XL]   = 3;
oj.ResponsiveUtils._RANGE[oj.ResponsiveUtils.SCREEN_RANGE.XXL]  = 4;



/**
 * This idea/code is from zurb foundation, thanks zurb!
 *
 * In the jet sass files there are variables for 
 * responsive screen sizes, these look something like

 *  <ul>
 *    <li>$screenSmallRange:  0, 767px;</li>
 *    <li>$screenMediumRange: 768px, 1023px;</li>
 *    <li>$screenLargeRange:  1024px, 1279px;</li>
 *    <li>$screenXlargeRange: 1280px, $appContentMaxWidth;</li>
 *  </ul>
 *
 * <p>These variables in turn are used to generate responsive media queries in variables like
 * $responsiveQuerySmallUp, $responsiveQueryMediumUp, etc.</p>
 * 
 * <p>we send down these media queries as the font family in classes 
 * that look something like this:<p>
 *
 * <pre class="prettyprint">
 * <code>
 * .oj-mq-md {
 *    font-family: "/screen and (min-width: 768px)/";
 * }
 * </code></pre>
 *
 * <p>This function applies the class and then reads the font family off a dom
 * element to get the media query string</p>
 *
 * @param {string} selector a class selector name, for example 'oj-mq-md';
 * @return {string} the media query sent down for that class
 * @private
 */
oj.ResponsiveUtils._getMediaQueryFromClass = function(selector)
{
 
  var elem = /** @type {(Element | null)} */ (document.getElementsByClassName(selector).item(0));

  if(elem === null) {
    elem = document.createElement("meta");
    elem.className = selector;
    document.head.appendChild(elem);
  }

  var fontFamily= window.getComputedStyle(elem).getPropertyValue('font-family');

  return fontFamily.replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, '');
}

/**
 * Get a framweork (built in) media query
 *
 * @param {oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY} frameworkQueryKey one of the FRAMEWORK_QUERY_KEY constants, 
 *                       for example oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY.MD_UP
 * @return {string | null} the media query to use for the framework query key passed in
 * @expose
 * @static
 */
oj.ResponsiveUtils.getFrameworkQuery = function(frameworkQueryKey)
{
  var selector = "oj-mq-" + frameworkQueryKey;
  var query = oj.ResponsiveUtils._getMediaQueryFromClass(selector);

  if (query == "null")
    return null;
  else
    return query;
}


/**
 * @param {oj.ResponsiveUtils.SCREEN_RANGE} size1 one of the screen size constants, 
 * for example oj.ResponsiveUtils.SCREEN_RANGE.MD
 * @param {oj.ResponsiveUtils.SCREEN_RANGE} size2 one of the screen size constants, 
 * for example oj.ResponsiveUtils.SCREEN_RANGE.LG
 * @return {number} a negative integer if the first 
 * argument is less than the second. Zero if the two are equal. 
 * 1 or greater if the first argument is more than the second.
 * 
 * @expose
 * @static
 */
oj.ResponsiveUtils.compare = function(size1, size2)
{
  var range1 = oj.ResponsiveUtils._RANGE[size1];
  var range2 = oj.ResponsiveUtils._RANGE[size2];

  if (range1 == undefined)
    throw "size1 param " + size1 + 
          " illegal, please use one of the screen size constants like oj.ResponsiveUtils.SCREEN_RANGE.MD";
  if (range2 == undefined)
    throw "size2 param " + size2 + 
          " illegal, please use one of the screen size constants like oj.ResponsiveUtils.SCREEN_RANGE.MD";

  return range1 - range2;
}