qa-tools/dist/qa-tools.cjs.development.js

QA tools is a package to provide developers with tools to assure the quality of their layouts. Simple install with yarn or NPM.

'use strict';

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

var gridProps;

var createElement = function createElement(element) {
  if (element === void 0) {
    element = 'div';
  }

  return document.createElement(element);
};

var appendColumns = function appendColumns(element) {
  for (var i = 0; i < 20; i++) {
    var column = createElement('span');
    column.style.background = gridProps.color || 'tomato';
    element.appendChild(column);
  }
};

var gridWrapper = function gridWrapper() {
  var element = createElement();
  element.setAttribute('data-qa-tools', 'grid-wrapper');
  element.style.display = 'grid';
  element.style.columnGap = gridProps.gridGap || 'var(--grid-gap)';
  element.style.gridTemplate = "1fr / repeat(" + (gridProps.gridColumns || 'var(--grid-columns)') + ", 1fr)";
  element.style.width = '100%';
  element.style.maxWidth = gridProps.maxWidth || 'var(--grid-max-width)';
  element.style.paddingInlineStart = gridProps.padding || 'var(--grid-padding)';
  element.style.paddingInlineEnd = gridProps.padding || 'var(--grid-padding)';
  element.style.opacity = '0.2';
  appendColumns(element);
  return element;
};

var grid = function grid() {
  var grid = createElement();
  grid.setAttribute('data-qa-tools', 'grid');
  grid.style.position = 'fixed';
  grid.style.top = '0';
  grid.style.bottom = '0';
  grid.style.left = '0';
  grid.style.right = '0';
  grid.style.display = 'flex';
  grid.style.justifyContent = 'center';
  grid.style.pointerEvents = 'none';
  grid.style.opacity = '0';
  grid.style.zIndex = '999';
  grid.style.transition = 'opacity 250ms linear';
  grid.append(gridWrapper());
  return grid;
};

var handleKeyDown = function handleKeyDown(event) {
  if (event.key != 'g') return;
  var grid = document.querySelector('[data-qa-tools="grid"]');
  grid.style.opacity = getComputedStyle(grid).opacity === '1' ? '0' : '1';
};

var gridOverlay = function gridOverlay(props) {
  gridProps = props || {};
  document.body.append(grid());
  window.addEventListener('keydown', handleKeyDown);
};

exports.gridOverlay = gridOverlay;
//# sourceMappingURL=qa-tools.cjs.development.js.map