@nbamford123/arwes/lib/tools/get-dimensions.js

Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function (wMin, hMin, wMax, hMax) {

  var width = _detectNode2.default ? 1024 : getViewportSize('Width');
  var height = _detectNode2.default ? 768 : getViewportSize('Height');

  width = wMin ? width < wMin ? wMin : width : width;
  width = wMax ? width > wMax ? wMax : width : width;
  height = hMin ? height < hMin ? hMin : height : height;
  height = hMax ? height > hMax ? hMax : height : height;

  return { width: width, height: height };
};

var _detectNode = require('detect-node');

var _detectNode2 = _interopRequireDefault(_detectNode);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var getViewportSize = function getViewportSize(Name) {

  var size;
  var name = Name.toLowerCase();
  var document = window.document;
  var documentElement = document.documentElement;

  // IE6 & IE7 don't have window.innerWidth or innerHeight
  if (window['inner' + Name] === undefined) {
    size = documentElement['client' + Name];
  }

  // WebKit doesn't include scrollbars while calculating viewport size so we have to get fancy
  else if (window['inner' + Name] !== documentElement['client' + Name]) {

      // Insert markup to test if a media query will match document.doumentElement["client" + Name]
      var bodyElement = document.createElement('body');
      bodyElement.id = 'vpw-test-b';
      bodyElement.style.cssText = 'overflow:scroll';
      var divElement = document.createElement('div');
      divElement.id = 'vpw-test-d';
      divElement.style.cssText = 'position:absolute;top:-1000px';
      // Getting specific on the CSS selector so it won't get overridden easily
      divElement.innerHTML = '<style>@media(' + name + ':' + documentElement['client' + Name] + 'px){body#vpw-test-b div#vpw-test-d{' + name + ':7px!important}}</style>';
      bodyElement.appendChild(divElement);
      documentElement.insertBefore(bodyElement, document.head);

      if (divElement['offset' + Name] === 7) {
        // Media query matches document.documentElement["client" + Name]
        size = documentElement['client' + Name];
      } else {
        // Media query didn't match, use window["inner" + Name]
        size = window['inner' + Name];
      }
      // Cleanup
      documentElement.removeChild(bodyElement);
    }

    // Default to use window["inner" + Name]
    else {
        size = window['inner' + Name];
      }

  return size;
};

/**
 * Get the usable browser window dimentions.
 *
 * @param  {Number} wMin - Minimum width.
 * @param  {Number} hMin - Minimum height.
 * @param  {Number} wMax - Maximum width.
 * @param  {Number} hMax - Maximum height.
 *
 * @return {Object} { Number width, Number height }
 */