@phun-ky/speccer 5.0.0 → 6.0.2

package/src/dissect.js

@@ -1,211 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-import * as styles from './lib/styles';
-import * as node from './lib/node';
-import * as classnames from './lib/classnames';
-import { SPECCER_LITERALS, SPECCER_TAGS_TO_AVOID } from './lib/constants';
-
-export const create = (e = '', t, n = 'span') => {
-  const _el = document.createElement(n);
-  const o = document.createTextNode(e);
-
-  if (t.indexOf('full') === -1 && t.indexOf('enclose') === -1) {
-    _el.appendChild(o);
-  } else if (t.indexOf('full') !== -1 || t.indexOf('enclose') !== -1) {
-    _el.setAttribute('data-dissection-counter', e);
-  }
-
-  classnames.set(_el, `ph speccer dissection ${t}`);
-
-  return _el;
-};
-
-export const element = (el, dissectIndex) => {
-  const _el_rect = el.getBoundingClientRect();
-  const _area = el.getAttribute('data-anatomy');
-  const _dissection_node = create(SPECCER_LITERALS[dissectIndex], _area);
-  const _is_table_correction_needed = SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0;
-
-  let _table_top = 0;
-  let _table_left = 0;
-
-  if (_is_table_correction_needed) {
-    const table = el.closest('table');
-    const tableStyle = styles.get(table.parentElement);
-
-    node.after(table, _dissection_node);
-
-    const _table_rect = table.getBoundingClientRect();
-
-    _table_top = _table_rect.top - parseInt(tableStyle.getPropertyValue('padding-top'), 10);
-    _table_left = _table_rect.left - parseInt(tableStyle.getPropertyValue('padding-left'), 10);
-  } else {
-    node.after(el, _dissection_node);
-  }
-
-  const _el_offset_left = el.offsetLeft;
-  const _el_offset_top = el.offsetTop;
-  const _dissection_node_rect = _dissection_node.getBoundingClientRect();
-  const _outline_left_position_left =
-    (_is_table_correction_needed ? _el_rect.left - _table_left : _el_offset_left) -
-    _dissection_node_rect.width -
-    48 +
-    'px';
-  const _outline_left_position_top =
-    (_is_table_correction_needed ? _el_rect.top - _table_top : _el_offset_top) +
-    _el_rect.height / 2 -
-    _dissection_node_rect.height / 2 +
-    'px';
-  const _outline_right_position_left =
-    (_is_table_correction_needed ? _el_rect.left - _table_left : _el_offset_left) + _el_rect.width + 48 + 'px';
-  const _outline_right_position_top =
-    (_is_table_correction_needed ? _el_rect.top - _table_top : _el_offset_top) +
-    _el_rect.height / 2 -
-    _dissection_node_rect.height / 2 +
-    'px';
-  const _outline_top_position_left =
-    (_is_table_correction_needed ? _el_rect.left - _table_left : _el_offset_left) +
-    _el_rect.width / 2 -
-    _dissection_node_rect.width / 2 +
-    'px';
-  const _outline_top_position_top =
-    (_is_table_correction_needed ? _el_rect.top - _table_top : _el_offset_top) -
-    _dissection_node_rect.height -
-    48 +
-    'px';
-  const _outline_bottom_position_left =
-    (_is_table_correction_needed ? _el_rect.left - _table_left : _el_offset_left) +
-    _el_rect.width / 2 -
-    _dissection_node_rect.width / 2 +
-    'px';
-  const _outline_bottom_position_top =
-    (_is_table_correction_needed ? _el_rect.top - _table_top : _el_offset_top) + _el_rect.height + 48 + 'px';
-
-  let _dissection_node_styles = {};
-
-  if (_area.indexOf('outline') !== -1) {
-    if (_area.indexOf('left') !== -1) {
-      if (_area.indexOf('full') !== -1) {
-        _dissection_node_styles = {
-          left: _el_offset_left - 8 + 'px',
-          top: _el_offset_top + -1 + 'px',
-          height: _el_rect.height + 'px'
-        };
-      } else if (_area.indexOf('enclose') !== -1) {
-        _dissection_node_styles = {
-          left: _el_offset_left - 1 + 'px',
-          top: _el_offset_top + -1 + 'px',
-          height: _el_rect.height + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else {
-        _dissection_node_styles = {
-          left: _outline_left_position_left,
-          top: _outline_left_position_top
-        };
-      }
-    } else if (_area.indexOf('right') !== -1) {
-      if (_area.indexOf('full') !== -1) {
-        _dissection_node_styles = {
-          left: _el_offset_left + _el_rect.width + 'px',
-          top: _el_offset_top + -1 + 'px',
-          height: _el_rect.height + 'px'
-        };
-      } else if (_area.indexOf('enclose') !== -1) {
-        _dissection_node_styles = {
-          left: _el_offset_left + -1 + 'px',
-          top: _el_offset_top + -1 + 'px',
-          height: _el_rect.height + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else {
-        _dissection_node_styles = {
-          left: _outline_right_position_left,
-          top: _outline_right_position_top
-        };
-      }
-    } else if (_area.indexOf('top') !== -1) {
-      if (_area.indexOf('full') !== -1) {
-        _dissection_node_styles = {
-          top: _el_offset_top + -8 + 'px',
-          left: _el_offset_left + -1 + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else if (_area.indexOf('enclose') !== -1) {
-        _dissection_node_styles = {
-          top: _el_offset_top + -1 + 'px',
-          left: _el_offset_left + -1 + 'px',
-          height: _el_rect.height + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else {
-        _dissection_node_styles = {
-          left: _outline_top_position_left,
-          top: _outline_top_position_top
-        };
-      }
-    } else if (_area.indexOf('bottom') !== -1) {
-      if (_area.indexOf('full') !== -1) {
-        _dissection_node_styles = {
-          top: _el_offset_top + _el_rect.height + 'px',
-          left: _el_offset_left + -1 + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else if (_area.indexOf('enclose') !== -1) {
-        _dissection_node_styles = {
-          top: _el_offset_top + -1 + 'px',
-          left: _el_offset_left + -1 + 'px',
-          height: _el_rect.height + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else {
-        _dissection_node_styles = {
-          left: _outline_bottom_position_left,
-          top: _outline_bottom_position_top
-        };
-      }
-    } else {
-      if (_area.indexOf('full') !== -1) {
-        _dissection_node_styles = {
-          left: _el_offset_left + _el_rect.width + 'px',
-          top: _el_offset_top + 'px',
-          height: _el_rect.height + 'px'
-        };
-      } else if (_area.indexOf('enclose') !== -1) {
-        _dissection_node_styles = {
-          left: _el_offset_left + _el_rect.width + 'px',
-          top: _el_offset_top + -1 + 'px',
-          height: _el_rect.height + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else {
-        _dissection_node_styles = {
-          left: _outline_left_position_left,
-          top: _outline_left_position_top
-        };
-      }
-    }
-  } else {
-    if (_area.indexOf('full') !== -1) {
-      _dissection_node_styles = {
-        left: _el_offset_left - 8 + 'px',
-        top: _el_offset_top + -1 + 'px',
-        height: _el_rect.height + 'px'
-      };
-    } else if (_area.indexOf('enclose') !== -1) {
-      _dissection_node_styles = {
-        left: _el_offset_left - 1 + 'px',
-        top: _el_offset_top + -1 + 'px',
-        height: _el_rect.height + 'px',
-        width: _el_rect.width + 'px'
-      };
-    } else {
-      _dissection_node_styles = {
-        left: _outline_left_position_left,
-        top: _outline_left_position_top
-      };
-    }
-  }
-
-  styles.add(_dissection_node, _dissection_node_styles);
-};

package/src/index.js

@@ -1,36 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-import * as __node from './lib/node';
-import * as __spacing from './spec';
-import * as __dissect from './dissect';
-import * as __measure from './measure';
-import * as __typography from './typography';
-import * as __browser from './browser';
-
-const speccer = () => {
-  __node.removeAll('.speccer');
-  __node.removeAll('.dissection');
-
-  const _els_to_be_specced = document.querySelectorAll('[data-speccer],[data-speccer] *:not(td)');
-  const _els_to_be_measured = document.querySelectorAll('[data-speccer-measure]');
-  const _els_to_be_typography_specced = document.querySelectorAll('[data-speccer-typography]');
-  const _els_to_be_dissected = document.querySelectorAll('[data-anatomy-section] [data-anatomy]');
-
-  _els_to_be_specced.forEach(__spacing.element);
-  _els_to_be_measured.forEach(__measure.element);
-  _els_to_be_typography_specced.forEach(__typography.element);
-  _els_to_be_dissected.forEach(__dissect.element);
-};
-
-export const spacing = __spacing;
-
-export const dissect = __dissect;
-
-export const measure = __measure;
-
-export const typography = __typography;
-
-export default speccer;
-
-__browser.activate(speccer);

package/src/lib/attributes.js

@@ -1,13 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-export const set = (el, attrs) => {
-  if (!el) return;
-  if (!attrs || (attrs && attrs.length === 0)) return;
-  Object.keys(attrs).forEach(key => el.setAttribute(key, attrs[key]));
-};
-export const remove = (el, attrs) => {
-  if (!el) return;
-  if (!attrs || (attrs && attrs.length === 0)) return;
-  Object.keys(attrs).forEach(key => el.removeAttribute(key));
-};

package/src/lib/classnames.js

@@ -1,37 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-export const set = (el, cls, avoid = 'noop') => {
-  if (!el) return;
-  if (!cls || (cls && cls.length === 0)) return;
-  cls
-    .trim()
-    .split(' ')
-    .filter(cl => cl !== avoid)
-    .forEach(cl => el.classList.add(cl));
-};
-
-export const toggle = (el, cls, avoid = 'noop') => {
-  if (!el) return;
-  if (!cls || (cls && cls.length === 0)) return;
-  cls
-    .trim()
-    .split(' ')
-    .filter(cl => cl !== avoid)
-    .forEach(cl => el.classList.toggle(cl));
-};
-
-export const remove = (el, cls, avoid = 'noop') => {
-  if (!el) return;
-  if (!cls || (cls && cls.length === 0)) return;
-  cls
-    .trim()
-    .split(' ')
-    .filter(cl => cl !== avoid)
-    .forEach(cl => el.classList.remove(cl));
-};
-
-export const cx = (cls, cls_obj) =>
-  `${cls} ${Object.keys(cls_obj)
-    .filter(classname => cls_obj[classname])
-    .join(' ')}`.trim();

package/src/lib/constants.js

@@ -1,5 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-export const SPECCER_LITERALS = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];
-export const SPECCER_TAGS_TO_AVOID = ['TR', 'TH', 'TD', 'TBODY', 'THEAD', 'TFOOT'];

package/src/lib/css.js

@@ -1,37 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-export const getNumberValue = value => parseInt(value, 10);
-
-export const normalizeNumberValue = value => {
-  const _value = parseFloat(value);
-  return (_value >= 0 && _value < 1) || (_value <= 0 && _value > -1) ? 0 : _value;
-};
-
-export const getSpacing = style => {
-  const { marginTop, marginBottom, marginLeft, marginRight, paddingTop, paddingBottom, paddingLeft, paddingRight } =
-    style;
-  return {
-    marginTop,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight
-  };
-};
-
-export const getTypography = style => {
-  const { lineHeight, letterSpacing, fontFamily, fontSize, fontStyle, fontVariationSettings, fontWeight } = style;
-  return {
-    lineHeight,
-    letterSpacing,
-    fontFamily,
-    fontSize,
-    fontStyle,
-    fontVariationSettings,
-    fontWeight
-  };
-};

package/src/lib/debounce.js

@@ -1,22 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-export const waitForFrame = () => new Promise(requestAnimationFrame);
-
-const debounce = function (func, wait, immediate) {
-  var timeout;
-  return function () {
-    var context = this,
-      args = arguments;
-    var later = function () {
-      timeout = null;
-      if (!immediate) func.apply(context, args);
-    };
-    var callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow) func.apply(context, args);
-  };
-};
-
-export default debounce;

package/src/lib/node.js

@@ -1,7 +0,0 @@
-export const after = (el, newSibling) => el.insertAdjacentElement('afterend', newSibling);
-
-export const removeAll = (selector, el = document) => {
-  [].forEach.call(el.querySelectorAll(selector), function (e) {
-    e.remove();
-  });
-};

package/src/lib/number.js

@@ -1,4 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-export const to3Decimals = number => parseFloat(number).toFixed(3);

package/src/lib/resize.js

@@ -1,13 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-import debounce from './debounce';
-
-export const activate = speccer => {
-  const speccerEventFunc = debounce(() => {
-    speccer();
-  }, 300);
-
-  window.removeEventListener('resize', speccerEventFunc);
-  window.addEventListener('resize', speccerEventFunc);
-};

package/src/lib/styles.js

@@ -1,27 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-import { waitForFrame } from './debounce';
-
-export const add = async (el, styles) => {
-  if (!el) return;
-  if (
-    !styles ||
-    (styles && styles.length === 0 && styles.constructor === String) ||
-    (styles && styles.length === 0 && styles.constructor === Array) ||
-    (styles && Object.keys(styles).length === 0 && styles.constructor === Object)
-  ) {
-    return;
-  }
-
-  await waitForFrame();
-  if (typeof styles === 'string' || Array.isArray(styles)) {
-    styles.forEach(style => (el.style[style.key] = style.value));
-  } else {
-    Object.keys(styles).forEach(key => (el.style[key] = styles[key]));
-  }
-};
-
-export const get = async el => {
-  await waitForFrame();
-  return window.getComputedStyle ? getComputedStyle(el, null) : el.currentStyle;
-};

package/src/measure.js

@@ -1,99 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-import * as classnames from './lib/classnames';
-import * as styles from './lib/styles';
-import * as node from './lib/node';
-
-import { SPECCER_TAGS_TO_AVOID } from './lib/constants';
-
-const create = (text = '', area = '', tag = 'span') => {
-  const _el = document.createElement(tag);
-
-  _el.setAttribute('title', text + 'px');
-  _el.setAttribute('data-measure', parseInt(text, 10) + 'px');
-
-  classnames.set(_el, `ph speccer measure ${area}`);
-
-  return _el;
-};
-
-export const element = (el) => {
-  if (!el) return;
-
-  const _el_rect = el.getBoundingClientRect();
-  const _area = el.getAttribute('data-speccer-measure');
-
-  if (_area === '') {
-    return;
-  }
-
-  const _el_offset_top = el.offsetTop;
-  const _el_offset_left = el.offsetLeft;
-
-  if (_area.indexOf('width') !== -1) {
-    if (_area.indexOf('bottom') !== -1) {
-      const _measure_node = create(_el_rect.width, 'width bottom');
-
-      if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
-        node.after(el.closest('table'), _measure_node);
-      } else {
-        node.after(el, _measure_node);
-      }
-
-      styles.add(_measure_node, {
-        left: _el_offset_left + 'px',
-        top: _el_offset_top + _el_rect.height + 1 + 'px',
-        width: _el_rect.width + 'px'
-      });
-    } else {
-      const _measure_node = create(_el_rect.width, 'width top');
-
-      if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
-        node.after(el.closest('table'), _measure_node);
-      } else {
-        node.after(el, _measure_node);
-      }
-
-      const _measure_node_rect = _measure_node.getBoundingClientRect();
-
-      styles.add(_measure_node, {
-        left: _el_offset_left + 'px',
-        top: _el_offset_top - _measure_node_rect.height + 1 + 'px',
-        width: _el_rect.width + 'px'
-      });
-    }
-  } else if (_area.indexOf('height') !== -1) {
-    if (_area.indexOf('right') !== -1) {
-      const _measure_node = create(_el_rect.height, 'height right');
-
-      if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
-        node.after(el.closest('table'), _measure_node);
-      } else {
-        node.after(el, _measure_node);
-      }
-
-      styles.add(_measure_node, {
-        left: _el_offset_left + _el_rect.width + 'px',
-        top: _el_offset_top + 'px',
-        height: _el_rect.height + 'px'
-      });
-    } else {
-      const _measure_node = create(_el_rect.height, 'height left');
-
-      if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
-        node.after(el.closest('table'), _measure_node);
-      } else {
-        node.after(el, _measure_node);
-      }
-
-      const _measure_node_rect = _measure_node.getBoundingClientRect();
-
-      styles.add(_measure_node, {
-        left: _el_offset_left - _measure_node_rect.width + 'px',
-        top: _el_offset_top + 'px',
-        height: _el_rect.height + 'px'
-      });
-    }
-  }
-};