@phun-ky/speccer 4.3.1 → 6.0.0

package/src/lib/classnames.ts

@@ -0,0 +1,43 @@
+/* eslint no-console:0 */
+'use strict';
+
+export const set = (el: HTMLElement, cls: string, 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: HTMLElement, cls: string, 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: HTMLElement, cls: string, 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: string, cls_obj: {}): string =>
+  `${cls} ${Object.keys(cls_obj)
+    .filter((classname) => cls_obj[classname])
+    .join(' ')}`.trim();

package/src/lib/{constants.js → constants.ts}

@@ -2,4 +2,7 @@
 'use strict';
 
 export const SPECCER_LITERALS = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];
+
 export const SPECCER_TAGS_TO_AVOID = ['TR', 'TH', 'TD', 'TBODY', 'THEAD', 'TFOOT'];
+
+export const SPECCER_DEFAULT_PIN_SPACE = 48;

package/src/lib/css.ts

@@ -0,0 +1,45 @@
+/* eslint no-console:0 */
+'use strict';
+import { SPECCER_DEFAULT_PIN_SPACE } from './constants';
+import { SpacingCSSPropertiesType, TypographyCSSPropertiesType } from '../types/css';
+
+export const getNumberValue = (value: string): number => parseInt(value, 10);
+
+export const normalizeNumberValue = (value: string | number): number => {
+  const _value = parseFloat(value + '');
+
+  return (_value >= 0 && _value < 1) || (_value <= 0 && _value > -1) ? 0 : _value;
+};
+
+export const getSpacing = (style: SpacingCSSPropertiesType): SpacingCSSPropertiesType => {
+  const { marginTop, marginBottom, marginLeft, marginRight, paddingTop, paddingBottom, paddingLeft, paddingRight } =
+    style;
+
+  return {
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight
+  };
+};
+
+export const getTypography = (style: TypographyCSSPropertiesType): TypographyCSSPropertiesType => {
+  const { lineHeight, letterSpacing, fontFamily, fontSize, fontStyle, fontVariationSettings, fontWeight } = style;
+
+  return {
+    lineHeight,
+    letterSpacing,
+    fontFamily,
+    fontSize,
+    fontStyle,
+    fontVariationSettings,
+    fontWeight
+  };
+};
+
+export const pinSpace = (el: HTMLElement): number =>
+  getNumberValue(getComputedStyle(el).getPropertyValue('--ph-speccer-pin-space')) || SPECCER_DEFAULT_PIN_SPACE;

package/src/lib/debounce.ts

@@ -0,0 +1,29 @@
+/* eslint no-console:0 */
+'use strict';
+
+export const waitForFrame = () => new Promise(requestAnimationFrame);
+
+const debounce = function (func: Function, wait: number, immediate?: boolean): Function {
+  let timeout: null | ReturnType<typeof setTimeout>;
+
+  return function (this: any) {
+    const context = this;
+    const args = arguments;
+    const later = function () {
+      timeout = null;
+
+      if (!immediate) func.apply(context, args);
+    };
+    const callNow = immediate && !timeout;
+
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+
+    timeout = setTimeout(later, wait);
+
+    if (callNow) func.apply(context, args);
+  };
+};
+
+export default debounce;

package/src/lib/node.ts

@@ -0,0 +1,8 @@
+export const after = (el: HTMLElement | null, newSibling: HTMLElement) =>
+  el && el.insertAdjacentElement('afterend', newSibling);
+
+export const removeAll = (selector: string, el: Document = document) => {
+  [].forEach.call(el.querySelectorAll(selector), function (e: HTMLElement) {
+    e.remove();
+  });
+};

package/src/lib/number.ts

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

package/src/lib/position.ts

@@ -0,0 +1,16 @@
+export const get_horizontal_center_of_els = (modifier: number, startRect: DOMRect, targetRect: DOMRect): number =>
+  modifier - startRect.width / 2 + targetRect.width / 2;
+
+export const get_vertical_center_of_els = (modifier: number, startRect: DOMRect, targetRect: DOMRect): number =>
+  modifier - startRect.height / 2 + targetRect.height / 2;
+
+export const get_body_correction = () => {
+  const _body_style = getComputedStyle(document.body);
+  const _body_left_correction = parseInt(_body_style.paddingLeft) + parseInt(_body_style.marginLeft);
+  const _body_top_correction = parseInt(_body_style.paddingTop) + parseInt(_body_style.marginTop);
+
+  return {
+    top: _body_top_correction,
+    left: _body_left_correction
+  };
+};

package/src/lib/{resize.js → resize.ts}

@@ -3,10 +3,11 @@
 
 import debounce from './debounce';
 
-export const activate = speccer => {
-  const speccerEventFunc = debounce(() => {
-    speccer();
-  }, 300);
+export const activate = (speccer: Function) => {
+  const speccerEventFunc = () =>
+    debounce(() => {
+      speccer();
+    }, 300);
 
   window.removeEventListener('resize', speccerEventFunc);
   window.addEventListener('resize', speccerEventFunc);

package/src/lib/styles.ts

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

package/src/styles/index.styl

@@ -48,6 +48,10 @@ $ph-speccer-measure-size = 8px
   --ph-speccer-line-width-negative: $ph-speccer-line-width-negative;
   --ph-speccer-measure-size: $ph-speccer-measure-size;
 
+body.ph
+  margin 12px
+  padding 12px
+  box-sizing border-box
 
 .ph.speccer,
 .ph.speccer::after,

package/src/styles/spacing.styl

@@ -6,16 +6,6 @@
     border var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
 
 
-.is-specced
-  &:hover
-    & ~ .ph.speccer.spacing
-      &.margin
-        background-color var(--ph-speccer-color-margin-hover)
-      &.padding
-        background-color var(--ph-speccer-color-padding-hover)
-        color var(--ph-speccer-color-text-light)
-
-
 .ph.speccer.spacing
   &.margin
     background-color var(--ph-speccer-color-margin)

package/src/styles/typography.styl

@@ -1,15 +1,14 @@
 .ph.speccer.typography
   background-color var(--ph-speccer-typography-background-color)
   color var(--ph-speccer-typography-color-text)
-  font-size 12px
-  padding 8px 24px
+  font-size 10px
+  padding 8px
   max-width none
   width auto
   display block
   text-align left
   line-height 140%
   border var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)
-  min-width 320px
 
   &:hover
     border var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)
@@ -23,7 +22,7 @@
     top 50%
     transform translateY(-50%)
     height var(--ph-speccer-line-width)
-    width 48px
+    width var(--ph-speccer-pin-space)
 
   &.left
     &:after
@@ -31,7 +30,7 @@
       top 50%
       transform translateY(-50%)
       height var(--ph-speccer-line-width)
-      width 48px
+      width var(--ph-speccer-pin-space)
   &.right
     &:after
       left auto
@@ -39,14 +38,14 @@
       top 50%
       transform translateY(-50%)
       height var(--ph-speccer-line-width)
-      width 48px
+      width var(--ph-speccer-pin-space)
   &.top
     &:after
       left 50%
       right auto
       top 100%
       transform translateX(-50%)
-      height 48px
+      height var(--ph-speccer-pin-space)
       width var(--ph-speccer-line-width)
   &.bottom
     &:after
@@ -55,7 +54,7 @@
       top auto
       bottom 100%
       transform translateX(-50%)
-      height 48px
+      height var(--ph-speccer-pin-space)
       width var(--ph-speccer-line-width)
 
   & .speccer-styles
@@ -64,15 +63,15 @@
     padding 0
     margin 0
     line-height 140%
-    padding-left 1rem
-    font-size 12px
+    padding-left 8px
+    font-size 10px
 
     & .property
       font-weight normal
       color var(--ph-speccer-typography-color-property)
       text-align left
       padding 0
-      font-size 12px
+      font-size 10px
       margin 0
 
     & > li
@@ -80,7 +79,7 @@
       color var(--ph-speccer-typography-color-value)
       text-align left
       padding 0
-      font-size 12px
+      font-size 10px
       margin 0
       list-style none
       border none

package/src/tasks/dissect.ts

@@ -0,0 +1,46 @@
+/* eslint no-console:0 */
+'use strict';
+
+import * as styles from '../lib/styles';
+import * as classnames from '../lib/classnames';
+import { DissectAreaEnum } from '../enums/area';
+import * as helpers from '../helpers/dissect';
+import { SPECCER_LITERALS } from '../lib/constants';
+
+export const create = (textContent = '', area: string, n = 'span') => {
+  const _el = document.createElement(n);
+  const _text_node = document.createTextNode(textContent);
+  const _extra_class_names = {};
+
+  if (area !== null && area !== '') {
+    _extra_class_names[area] = true;
+  }
+
+  if (area.indexOf(DissectAreaEnum.Full) === -1 && area.indexOf(DissectAreaEnum.Enclose) === -1) {
+    _el.appendChild(_text_node);
+  } else if (area.indexOf(DissectAreaEnum.Full) !== -1 || area.indexOf(DissectAreaEnum.Enclose) !== -1) {
+    _el.setAttribute('data-dissection-counter', textContent);
+  }
+
+  const _class_names = classnames.cx('ph speccer dissection', _extra_class_names);
+
+  classnames.set(_el, _class_names);
+
+  return _el;
+};
+
+export const element = async (el: HTMLElement, dissectIndex: number) => {
+  if (!el) return;
+
+  const _area: string | null = el.getAttribute('data-anatomy') || '';
+
+  if (!_area || _area === '') return;
+
+  const _dissection_el = create(SPECCER_LITERALS[dissectIndex], _area);
+
+  document.body.appendChild(_dissection_el);
+
+  const _dissection_styles = helpers.styles(_area, el, _dissection_el);
+
+  styles.add(_dissection_el, _dissection_styles);
+};

package/src/tasks/index.ts

@@ -0,0 +1,7 @@
+export * as typography from './typography';
+
+export * as dissect from './dissect';
+
+export * as measure from './measure';
+
+export * as spec from './spec';

package/src/tasks/measure.ts

@@ -0,0 +1,82 @@
+/* eslint no-console:0 */
+'use strict';
+
+import * as classnames from '../lib/classnames';
+import * as styles from '../lib/styles';
+import { get_body_correction } from '../lib/position';
+
+const create = (text: string | number = '', area: string | null = '', 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: HTMLElement) => {
+  if (!el) return;
+
+  const _el_rect = el.getBoundingClientRect();
+  const _area: string | null = el.getAttribute('data-speccer-measure');
+
+  if (_area === '' || !_area) {
+    return;
+  }
+
+  const _body_correction = get_body_correction();
+  const _el_offset_top = el.offsetTop + _body_correction.top;
+  const _el_offset_left = el.offsetLeft + _body_correction.left;
+
+  if (_area.indexOf('width') !== -1) {
+    if (_area.indexOf('bottom') !== -1) {
+      const _measure_el = create(_el_rect.width, 'width bottom');
+
+      document.body.appendChild(_measure_el);
+
+      styles.add(_measure_el, {
+        left: _el_offset_left + 'px',
+        top: _el_offset_top + _el_rect.height + 1 + 'px',
+        width: _el_rect.width + 'px'
+      });
+    } else {
+      const _measure_el = create(_el_rect.width, 'width top');
+
+      document.body.appendChild(_measure_el);
+
+      const _measure_rect = _measure_el.getBoundingClientRect();
+
+      styles.add(_measure_el, {
+        left: _el_offset_left + 'px',
+        top: _el_offset_top - _measure_rect.height + 1 + 'px',
+        width: _el_rect.width + 'px'
+      });
+    }
+  } else if (_area.indexOf('height') !== -1) {
+    if (_area.indexOf('right') !== -1) {
+      const _measure_el = create(_el_rect.height, 'height right');
+
+      document.body.appendChild(_measure_el);
+
+      styles.add(_measure_el, {
+        left: _el_offset_left + _el_rect.width + 'px',
+        top: _el_offset_top + 'px',
+        height: _el_rect.height + 'px'
+      });
+    } else {
+      const _measure_el = create(_el_rect.height, 'height left');
+
+      document.body.appendChild(_measure_el);
+
+      const _measure_rect = _measure_el.getBoundingClientRect();
+
+      styles.add(_measure_el, {
+        left: _el_offset_left - _measure_rect.width + 'px',
+        top: _el_offset_top + 'px',
+        height: _el_rect.height + 'px'
+      });
+    }
+  }
+};

package/src/tasks/spec.ts

@@ -0,0 +1,170 @@
+/* eslint no-console:0 */
+'use strict';
+
+import * as classnames from '../lib/classnames';
+import * as css from '../lib/css';
+import * as styles from '../lib/styles';
+import { get_body_correction } from '../lib/position';
+import { SpeccerElType } from '../types/speccer';
+
+export const create = (text: string | number = '', tag = 'span') => {
+  const _el = document.createElement(tag);
+  const _text_content = document.createTextNode(text + '');
+
+  _el.appendChild(_text_content);
+  _el.setAttribute('title', text + 'px');
+  classnames.set(_el, 'ph speccer spacing');
+
+  return _el;
+};
+
+export const element = async (el: HTMLElement) => {
+  const _speccer_el: SpeccerElType = {};
+  const _el_style = await styles.get(el);
+
+  if (_el_style.display === 'none' || _el_style.visibility === 'hidden' || !el.parentElement) {
+    return;
+  }
+
+  el.classList.add('is-specced');
+
+  _speccer_el.styles = css.getSpacing(_el_style);
+
+  const _target_rect = el.getBoundingClientRect();
+  const _body_correction = get_body_correction();
+  const _el_offset_top = el.offsetTop + _body_correction.top;
+  const _el_offset_left = el.offsetLeft + _body_correction.left;
+
+  if (_speccer_el.styles['marginTop'] !== '0px') {
+    const _speccer_margin_top_el = create(css.getNumberValue(_speccer_el.styles.marginTop));
+
+    document.body.appendChild(_speccer_margin_top_el);
+
+    classnames.set(_speccer_margin_top_el, 'margin top');
+    styles.add(_speccer_margin_top_el, {
+      height: _speccer_el.styles.marginTop,
+      width: _target_rect.width + 'px',
+      transform: el.style.transform,
+      left: _el_offset_left + 'px',
+      top: _el_offset_top - parseInt(_speccer_el.styles.marginTop, 10) + 'px'
+    });
+  }
+
+  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: _target_rect.height + 'px',
+      width: _speccer_el.styles.marginRight,
+      transform: el.style.transform,
+      left: _el_offset_left + parseInt(_target_rect.width + '', 10) + 'px',
+      top: _el_offset_top + 'px'
+    });
+
+    document.body.appendChild(_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: _target_rect.width + 'px',
+      transform: el.style.transform,
+      left: _el_offset_left + 'px',
+      top: _el_offset_top + parseInt(_target_rect.height + '', 10) + 'px'
+    });
+
+    document.body.appendChild(_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: _target_rect.height + 'px',
+      width: _speccer_el.styles.marginLeft,
+      transform: el.style.transform,
+      left: _el_offset_left - parseInt(_speccer_el.styles.marginLeft, 10) + 'px',
+      top: _el_offset_top + 'px'
+    });
+
+    document.body.appendChild(_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: _target_rect.width + 'px',
+      transform: el.style.transform,
+      left: _el_offset_left + 'px',
+      top: _el_offset_top + 'px'
+    });
+
+    document.body.appendChild(_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: _target_rect.width + 'px',
+      transform: el.style.transform,
+      left: _el_offset_left + 'px',
+      top:
+        _el_offset_top +
+        (parseInt(_target_rect.height + '', 10) - parseInt(_speccer_el.styles.paddingBottom, 10)) +
+        'px'
+    });
+
+    document.body.appendChild(_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: _target_rect.height + 'px',
+      width: _speccer_el.styles.paddingRight,
+      transform: el.style.transform,
+      left:
+        _el_offset_left +
+        (parseInt(_target_rect.width + '', 10) - parseInt(_speccer_el.styles.paddingRight, 10)) +
+        'px',
+      top: _el_offset_top + 'px'
+    });
+
+    document.body.appendChild(_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: _target_rect.height + 'px',
+      width: _speccer_el.styles.paddingLeft,
+      transform: el.style.transform,
+      left: _el_offset_left + 'px',
+      top: _el_offset_top + 'px'
+    });
+
+    document.body.appendChild(_speccer_padding_left_el);
+  }
+};

package/src/tasks/typography.ts

@@ -0,0 +1,45 @@
+/* eslint no-console:0 */
+'use strict';
+
+import * as classnames from '../lib/classnames';
+import * as styles from '../lib/styles';
+import * as helpers from '../helpers/typography';
+
+export const create = (html: string, area: string | null) => {
+  const _el = document.createElement('div');
+  const _extra_class_names = {};
+
+  if (area !== null && area !== '') {
+    _extra_class_names[area] = true;
+  }
+
+  const _class_names = classnames.cx('ph speccer typography', _extra_class_names);
+
+  _el.innerHTML = html;
+
+  classnames.set(_el, _class_names);
+
+  return _el;
+};
+
+export const element = async (el: HTMLElement) => {
+  if (!el) return;
+
+  const _area: string | null = el.getAttribute('data-speccer-typography');
+  const _el_style = await styles.get(el);
+
+  if (_el_style.display === 'none' || _el_style.visibility === 'hidden' || !el.parentElement) {
+    return;
+  }
+
+  el.classList.add('is-specced');
+
+  const _html = await helpers.template(el);
+  const _speccer_el = create(_html, _area);
+
+  document.body.appendChild(_speccer_el);
+
+  const _position = helpers.position(_area, el, _speccer_el);
+
+  styles.add(_speccer_el, _position);
+};