@phun-ky/speccer 3.5.1 → 4.1.0

package/src/lib/attributes.js

@@ -0,0 +1,13 @@
+/* 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

@@ -0,0 +1,37 @@
+/* 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

@@ -0,0 +1,5 @@
+/* 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

@@ -0,0 +1,37 @@
+/* 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

@@ -0,0 +1,22 @@
+/* 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

@@ -0,0 +1,7 @@
+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

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

package/src/lib/resize.js

@@ -0,0 +1,13 @@
+/* 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

@@ -0,0 +1,27 @@
+/* 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

@@ -0,0 +1,88 @@
+/* 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 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 - _measure_node_rect.width + 'px',
+        top: _el_offset_top + 'px',
+        height: _el_rect.height + 'px'
+      });
+    }
+  }
+};

package/src/spec.js

@@ -0,0 +1,183 @@
+/* eslint no-console:0 */
+'use strict';
+
+import * as classnames from './lib/classnames';
+import * as css from './lib/css';
+import * as node from './lib/node';
+import * as styles from './lib/styles';
+import { SPECCER_TAGS_TO_AVOID } from './lib/constants';
+
+export const create = (text = '', tag = 'span') => {
+  const _el = document.createElement(tag);
+  const textContent = document.createTextNode(text);
+  _el.appendChild(textContent);
+  _el.setAttribute('title', text + 'px');
+  classnames.set(_el, 'ph speccer spacing');
+  return _el;
+};
+
+export const element = async el => {
+  const _speccer_el = {};
+  const _el_style = await styles.get(el);
+  if (_el_style.display === 'none' || _el_style.visibility === 'hidden') {
+    return;
+  }
+  el.classList.add('is-specced');
+  const _parent_el_style = styles.get(el.parentElement);
+  if (_parent_el_style.position === 'static') {
+    window.requestAnimationFrame(() => {
+      el.parentElement.style.position = 'relative';
+    });
+  }
+  _speccer_el.styles = css.getSpacing(_el_style);
+  _speccer_el.rect = el.getBoundingClientRect();
+  if (_speccer_el.styles['marginTop'] !== '0px') {
+    const _speccer_margin_top_el = create(css.getNumberValue(_speccer_el.styles.marginTop));
+    classnames.set(_speccer_margin_top_el, 'margin top');
+    styles.add(_speccer_margin_top_el, {
+      height: _speccer_el.styles.marginTop,
+      width: _speccer_el.rect.width + 'px',
+      left: css.normalizeNumberValue(_speccer_el.rect.x - el.parentElement.getBoundingClientRect().x) + 'px',
+      top:
+        css.normalizeNumberValue(
+          _speccer_el.rect.y - el.parentElement.getBoundingClientRect().y - parseInt(_speccer_el.styles.marginTop, 10)
+        ) + 'px'
+    });
+    if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
+      node.after(el.closest('table'), _speccer_margin_top_el);
+    } else {
+      node.after(el, _speccer_margin_top_el);
+    }
+  }
+  if (_speccer_el.styles['marginRight'] !== '0px') {
+    const _speccer_margin_right_el = create(css.getNumberValue(_speccer_el.styles.marginRight));
+    classnames.set(_speccer_margin_right_el, 'margin right');
+
+    styles.add(_speccer_margin_right_el, {
+      height: _speccer_el.rect.height + 'px',
+      width: _speccer_el.styles.marginRight,
+      left:
+        css.normalizeNumberValue(
+          _speccer_el.rect.x - el.parentElement.getBoundingClientRect().x + parseInt(_speccer_el.rect.width, 10)
+        ) + 'px',
+      top: css.normalizeNumberValue(_speccer_el.rect.y - el.parentElement.getBoundingClientRect().y) + 'px'
+    });
+    if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
+      node.after(el.closest('table'), _speccer_margin_right_el);
+    } else {
+      node.after(el, _speccer_margin_right_el);
+    }
+  }
+  if (_speccer_el.styles['marginBottom'] !== '0px') {
+    const _speccer_margin_bottom_el = create(css.getNumberValue(_speccer_el.styles.marginBottom));
+    classnames.set(_speccer_margin_bottom_el, 'margin bottom');
+
+    styles.add(_speccer_margin_bottom_el, {
+      height: _speccer_el.styles.marginBottom,
+      width: _speccer_el.rect.width + 'px',
+      left: css.normalizeNumberValue(_speccer_el.rect.x - el.parentElement.getBoundingClientRect().x) + 'px',
+      top:
+        css.normalizeNumberValue(
+          _speccer_el.rect.y - el.parentElement.getBoundingClientRect().y + parseInt(_speccer_el.rect.height, 10)
+        ) + 'px'
+    });
+    if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
+      node.after(el.closest('table'), _speccer_margin_bottom_el);
+    } else {
+      node.after(el, _speccer_margin_bottom_el);
+    }
+  }
+  if (_speccer_el.styles['marginLeft'] !== '0px') {
+    const _speccer_margin_left_el = create(css.getNumberValue(_speccer_el.styles.marginLeft));
+    classnames.set(_speccer_margin_left_el, 'margin left');
+
+    styles.add(_speccer_margin_left_el, {
+      height: _speccer_el.rect.height + 'px',
+      width: _speccer_el.styles.marginLeft,
+      left:
+        css.normalizeNumberValue(
+          _speccer_el.rect.x - el.parentElement.getBoundingClientRect().x - parseInt(_speccer_el.styles.marginLeft, 10)
+        ) + 'px',
+      top: css.normalizeNumberValue(_speccer_el.rect.y - el.parentElement.getBoundingClientRect().y) + 'px'
+    });
+    if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
+      node.after(el.closest('table'), _speccer_margin_left_el);
+    } else {
+      node.after(el, _speccer_margin_left_el);
+    }
+  }
+  if (_speccer_el.styles['paddingTop'] !== '0px') {
+    const _speccer_padding_top_el = create(css.getNumberValue(_speccer_el.styles.paddingTop));
+    classnames.set(_speccer_padding_top_el, 'padding top');
+
+    styles.add(_speccer_padding_top_el, {
+      height: _speccer_el.styles.paddingTop,
+      width: _speccer_el.rect.width + 'px',
+      left: css.normalizeNumberValue(_speccer_el.rect.x - el.parentElement.getBoundingClientRect().x) + 'px',
+      top: css.normalizeNumberValue(_speccer_el.rect.y - el.parentElement.getBoundingClientRect().y) + 'px'
+    });
+    if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
+      node.after(el.closest('table'), _speccer_padding_top_el);
+    } else {
+      node.after(el, _speccer_padding_top_el);
+    }
+  }
+  if (_speccer_el.styles['paddingBottom'] !== '0px') {
+    const _speccer_padding_bottom_el = create(css.getNumberValue(_speccer_el.styles.paddingBottom));
+    classnames.set(_speccer_padding_bottom_el, 'padding bottom');
+
+    styles.add(_speccer_padding_bottom_el, {
+      height: _speccer_el.styles.paddingBottom,
+      width: _speccer_el.rect.width + 'px',
+      left: css.normalizeNumberValue(_speccer_el.rect.x - el.parentElement.getBoundingClientRect().x) + 'px',
+      top:
+        css.normalizeNumberValue(
+          _speccer_el.rect.y -
+            el.parentElement.getBoundingClientRect().y +
+            (parseInt(_speccer_el.rect.height, 10) - parseInt(_speccer_el.styles.paddingBottom, 10))
+        ) + 'px'
+    });
+    if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
+      node.after(el.closest('table'), _speccer_padding_bottom_el);
+    } else {
+      node.after(el, _speccer_padding_bottom_el);
+    }
+  }
+  if (_speccer_el.styles['paddingRight'] !== '0px') {
+    const _speccer_padding_right_el = create(css.getNumberValue(_speccer_el.styles.paddingRight));
+    classnames.set(_speccer_padding_right_el, 'padding right');
+
+    styles.add(_speccer_padding_right_el, {
+      height: _speccer_el.rect.height + 'px',
+      width: _speccer_el.styles.paddingRight,
+      left:
+        css.normalizeNumberValue(
+          _speccer_el.rect.x -
+            el.parentElement.getBoundingClientRect().x +
+            (parseInt(_speccer_el.rect.width, 10) - parseInt(_speccer_el.styles.paddingRight, 10))
+        ) + 'px',
+      top: css.normalizeNumberValue(_speccer_el.rect.y - el.parentElement.getBoundingClientRect().y) + 'px'
+    });
+    if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
+      node.after(el.closest('table'), _speccer_padding_right_el);
+    } else {
+      node.after(el, _speccer_padding_right_el);
+    }
+  }
+  if (_speccer_el.styles['paddingLeft'] !== '0px') {
+    const _speccer_padding_left_el = create(css.getNumberValue(_speccer_el.styles.paddingLeft));
+    classnames.set(_speccer_padding_left_el, 'padding left');
+
+    styles.add(_speccer_padding_left_el, {
+      height: _speccer_el.rect.height + 'px',
+      width: _speccer_el.styles.paddingLeft,
+      left: css.normalizeNumberValue(_speccer_el.rect.x - el.parentElement.getBoundingClientRect().x) + 'px',
+      top: css.normalizeNumberValue(_speccer_el.rect.y - el.parentElement.getBoundingClientRect().y) + 'px'
+    });
+    if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
+      node.after(el.closest('table'), _speccer_padding_left_el);
+    } else {
+      node.after(el, _speccer_padding_left_el);
+    }
+  }
+};