react-motion-drawer-alt/styles.js

Navigation drawer built with the awesome react-motion and react-hammerjs

'use strict';

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

exports.default = function (val, props) {
  var _transform, _overlay;

  var zIndex = props.zIndex,
      left = props.left,
      right = props.right,
      height = props.height,
      handleWidth = props.handleWidth,
      overlayColor = props.overlayColor,
      fadeOut = props.fadeOut,
      offset = props.offset,
      open = props.open;


  var clientWidth = 1000;
  var width = props.width;

  if (typeof document !== "undefined") {
    clientWidth = document.body.clientWidth;
    if (/\D/.test(width)) width = document.body.clientWidth * (width.match(/\d*/) / 100);
    if (open) {
      document.body.style.overflowY = 'hidden';
    } else {
      document.body.style.overflowY = 'auto';
    }
  }

  var opacity = (val - offset) / width;

  if (right) val = width - val;else val = val - width;

  var drawer = {
    display: "block",
    width: width,
    height: height,
    overflow: "auto"
  };

  var container = {
    position: "fixed",
    zIndex: zIndex,
    width: opacity > 0 ? '100%' : '0px',
    height: "100%"
  };

  var transform = (_transform = {
    boxSizing: "content-box",
    pointer: "cursor",
    position: "fixed",
    display: "block",
    zIndex: zIndex,
    width: width
  }, _defineProperty(_transform, right ? "paddingLeft" : "paddingRight", handleWidth), _defineProperty(_transform, 'maxWidth', width), _defineProperty(_transform, 'height', height), _defineProperty(_transform, 'top', 0), _defineProperty(_transform, right ? "right" : "left", 0), _defineProperty(_transform, 'margin', 0), _defineProperty(_transform, 'transform', 'translate3d(' + val + 'px, 0, 0)'), _defineProperty(_transform, 'WebkitTransform', 'translate3d(' + val + 'px, 0, 0)'), _defineProperty(_transform, 'opacity', fadeOut ? opacity : 1), _transform);

  var overlayTransform = right ? -width : width;
  var overlay = (_overlay = {
    zIndex: -2,
    pointer: "cursor",
    position: "fixed",
    width: clientWidth,
    height: "100%",
    background: overlayColor,
    opacity: opacity,
    top: 0
  }, _defineProperty(_overlay, right ? "right" : "left", 0), _defineProperty(_overlay, 'margin', 0), _defineProperty(_overlay, 'transform', 'translate3d(' + overlayTransform + 'px, 0, 0)'), _defineProperty(_overlay, 'WebkitTransform', 'translate3d(' + overlayTransform + 'px, 0, 0)'), _overlay);

  return { drawer: drawer, transform: transform, overlay: overlay, container: container };
};

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }