@phun-ky/speccer 6.0.0 → 6.0.3

package/dts/index.d.ts

@@ -1,53 +0,0 @@
-declare global {
-    interface Window {
-        speccer: any;
-    }
-}
-
-declare const create$2: (text?: string | number, tag?: string) => HTMLElement;
-declare const element$3: (el: HTMLElement) => Promise<void>;
-
-declare namespace __spacing {
-  export {
-    create$2 as create,
-    element$3 as element,
-  };
-}
-
-declare const create$1: (textContent: string | undefined, area: string, n?: string) => HTMLElement;
-declare const element$2: (el: HTMLElement, dissectIndex: number) => Promise<void>;
-
-declare namespace __dissect {
-  export {
-    create$1 as create,
-    element$2 as element,
-  };
-}
-
-declare const element$1: (el: HTMLElement) => void;
-
-declare namespace __measure {
-  export {
-    element$1 as element,
-  };
-}
-
-declare const create: (html: string, area: string | null) => HTMLDivElement;
-declare const element: (el: HTMLElement) => Promise<void>;
-
-declare const __typography_create: typeof create;
-declare const __typography_element: typeof element;
-declare namespace __typography {
-  export {
-    __typography_create as create,
-    __typography_element as element,
-  };
-}
-
-declare const spacing: typeof __spacing;
-declare const dissect: typeof __dissect;
-declare const measure: typeof __measure;
-declare const typography: typeof __typography;
-declare const speccer: () => void;
-
-export { speccer as default, dissect, measure, spacing, typography };

package/dts/interfaces/global.d.ts

@@ -1,6 +0,0 @@
-export {};
-declare global {
-    interface Window {
-        speccer: any;
-    }
-}

package/dts/lib/attributes.d.ts

@@ -1,2 +0,0 @@
-export declare const set: (el: HTMLElement, attrs: {}) => void;
-export declare const remove: (el: HTMLElement, attrs: {}) => void;

package/dts/lib/classnames.d.ts

@@ -1,4 +0,0 @@
-export declare const set: (el: HTMLElement, cls: string, avoid?: string) => void;
-export declare const toggle: (el: HTMLElement, cls: string, avoid?: string) => void;
-export declare const remove: (el: HTMLElement, cls: string, avoid?: string) => void;
-export declare const cx: (cls: string, cls_obj: {}) => string;

package/dts/lib/constants.d.ts

@@ -1,3 +0,0 @@
-export declare const SPECCER_LITERALS: string[];
-export declare const SPECCER_TAGS_TO_AVOID: string[];
-export declare const SPECCER_DEFAULT_PIN_SPACE = 48;

package/dts/lib/css.d.ts

@@ -1,6 +0,0 @@
-import { SpacingCSSPropertiesType, TypographyCSSPropertiesType } from '../types/css';
-export declare const getNumberValue: (value: string) => number;
-export declare const normalizeNumberValue: (value: string | number) => number;
-export declare const getSpacing: (style: SpacingCSSPropertiesType) => SpacingCSSPropertiesType;
-export declare const getTypography: (style: TypographyCSSPropertiesType) => TypographyCSSPropertiesType;
-export declare const pinSpace: (el: HTMLElement) => number;

package/dts/lib/debounce.d.ts

@@ -1,3 +0,0 @@
-export declare const waitForFrame: () => Promise<number>;
-declare const debounce: (func: Function, wait: number, immediate?: boolean | undefined) => Function;
-export default debounce;

package/dts/lib/node.d.ts

@@ -1,2 +0,0 @@
-export declare const after: (el: HTMLElement | null, newSibling: HTMLElement) => Element | null;
-export declare const removeAll: (selector: string, el?: Document) => void;

package/dts/lib/number.d.ts

@@ -1 +0,0 @@
-export declare const decimal: (number: string | number, decimals?: number) => string;

package/dts/lib/position.d.ts

@@ -1,6 +0,0 @@
-export declare const get_horizontal_center_of_els: (modifier: number, startRect: DOMRect, targetRect: DOMRect) => number;
-export declare const get_vertical_center_of_els: (modifier: number, startRect: DOMRect, targetRect: DOMRect) => number;
-export declare const get_body_correction: () => {
-    top: number;
-    left: number;
-};

package/dts/lib/resize.d.ts

@@ -1 +0,0 @@
-export declare const activate: (speccer: Function) => void;

package/dts/lib/styles.d.ts

@@ -1,2 +0,0 @@
-export declare const add: (el: HTMLElement, styles: [] | object) => Promise<void>;
-export declare const get: (el: HTMLElement) => Promise<CSSStyleDeclaration>;

package/dts/tasks/dissect.d.ts

@@ -1,2 +0,0 @@
-export declare const create: (textContent: string | undefined, area: string, n?: string) => HTMLElement;
-export declare const element: (el: HTMLElement, dissectIndex: number) => Promise<void>;

package/dts/tasks/index.d.ts

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

package/dts/tasks/measure.d.ts

@@ -1 +0,0 @@
-export declare const element: (el: HTMLElement) => void;

package/dts/tasks/spec.d.ts

@@ -1,2 +0,0 @@
-export declare const create: (text?: string | number, tag?: string) => HTMLElement;
-export declare const element: (el: HTMLElement) => Promise<void>;

package/dts/tasks/typography.d.ts

@@ -1,2 +0,0 @@
-export declare const create: (html: string, area: string | null) => HTMLDivElement;
-export declare const element: (el: HTMLElement) => Promise<void>;

package/dts/types/css.d.ts

@@ -1,19 +0,0 @@
-export declare type SpacingCSSPropertiesType = {
-    marginTop: string;
-    marginBottom: string;
-    marginLeft: string;
-    marginRight: string;
-    paddingTop: string;
-    paddingBottom: string;
-    paddingLeft: string;
-    paddingRight: string;
-};
-export declare type TypographyCSSPropertiesType = {
-    lineHeight: string;
-    letterSpacing: string;
-    fontFamily: string;
-    fontSize: string;
-    fontStyle: string;
-    fontVariationSettings: string;
-    fontWeight: string;
-};

package/dts/types/speccer.d.ts

@@ -1,5 +0,0 @@
-import { SpacingCSSPropertiesType } from './css';
-export declare type SpeccerElType = {
-    styles?: SpacingCSSPropertiesType;
-    rect?: DOMRectReadOnly;
-};

package/src/browser.ts

@@ -1,96 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-import * as resize from './lib/resize';
-import * as spec from './tasks/spec';
-import * as measure from './tasks/measure';
-import * as dissect from './tasks/dissect';
-
-export const dom = (speccer: Function) => {
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-      speccer();
-    });
-  } else {
-    // `DOMContentLoaded` already fired
-    speccer();
-  }
-};
-
-export const lazy = () => {
-  const _spec_observer = new IntersectionObserver((els, observer) => {
-    els.forEach((el: IntersectionObserverEntry) => {
-      if (el.intersectionRatio > 0) {
-        spec.element(el.target as HTMLElement);
-        observer.unobserve(el.target);
-      }
-    });
-  });
-
-  document.querySelectorAll('[data-speccer],[data-speccer] *:not(td)').forEach((el) => {
-    _spec_observer.observe(el);
-  });
-
-  const _measure_observer = new IntersectionObserver((els, observer) => {
-    els.forEach((el) => {
-      if (el.intersectionRatio > 0) {
-        measure.element(el.target as HTMLElement);
-        observer.unobserve(el.target);
-      }
-    });
-  });
-
-  document.querySelectorAll('[data-speccer-measure]').forEach((el) => {
-    _measure_observer.observe(el);
-  });
-
-  const _dissect_observer = new IntersectionObserver((els, observer) => {
-    els.forEach((el) => {
-      const targets = el.target.querySelectorAll('[data-anatomy]');
-
-      if (el.intersectionRatio > 0) {
-        targets.forEach(dissect.element);
-        observer.unobserve(el.target);
-      }
-    });
-  });
-
-  document.querySelectorAll('[data-anatomy-section]').forEach((el) => {
-    _dissect_observer.observe(el);
-  });
-};
-
-export const manual = (speccer: Function) => {
-  window.speccer = speccer;
-};
-
-export const activate = (speccer: Function) => {
-  const _script = document.currentScript;
-
-  if (_script) {
-    const _speccer_script_src = _script.getAttribute('src');
-
-    if (
-      _speccer_script_src &&
-      (_speccer_script_src.indexOf('speccer.js') !== -1 ||
-        // for codepen
-        _speccer_script_src.indexOf('JaXpOK.js') !== -1)
-    ) {
-      if (_script.hasAttribute('data-manual')) {
-        manual(speccer);
-      } else if (_script.hasAttribute('data-instant')) {
-        speccer();
-      } else if (_script.hasAttribute('data-dom')) {
-        dom(speccer);
-      } else if (_script.hasAttribute('data-lazy')) {
-        lazy();
-      } else {
-        dom(speccer);
-      }
-
-      if (!_script.hasAttribute('data-manual') && !_script.hasAttribute('data-lazy')) {
-        resize.activate(speccer);
-      }
-    }
-  }
-};

package/src/enums/area.ts

@@ -1,17 +0,0 @@
-export enum SpeccerAreaEnum {
-  Empty = '',
-  Left = 'left',
-  Right = 'right',
-  Bottom = 'bottom',
-  Top = 'top',
-}
-
-export enum DissectAreaEnum {
-  Outline = 'outline',
-  Enclose = 'enclose',
-  Full = 'full',
-  Left = 'left',
-  Right = 'right',
-  Bottom = 'bottom',
-  Top = 'top',
-}

package/src/helpers/dissect/index.ts

@@ -1 +0,0 @@
-export { styles } from './styles';

package/src/helpers/dissect/styles.ts

@@ -1,154 +0,0 @@
-import * as css from '../../lib/css';
-import * as number from '../../lib/number';
-import { get_body_correction } from '../../lib/position';
-import { get_horizontal_center_of_els, get_vertical_center_of_els } from '../../lib/position';
-import { DissectAreaEnum } from '../../enums/area';
-
-export const styles = (area: string, el: HTMLElement, dissectionEl: HTMLElement) => {
-  const _el_rect = el.getBoundingClientRect();
-  const SPECCER_PIN_SPACE = css.pinSpace(dissectionEl);
-  const _dissection_el_rect = dissectionEl.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;
-  const _left_layout_position_left = _el_offset_left - _dissection_el_rect.width - SPECCER_PIN_SPACE + 'px';
-  const _left_layout_position_top =
-    number.decimal(get_vertical_center_of_els(_el_offset_top, _dissection_el_rect, _el_rect)) + 'px';
-  const _right_layout_position_left = _el_offset_left + _el_rect.width + SPECCER_PIN_SPACE + 'px';
-  const _right_layout_position_top =
-    number.decimal(get_vertical_center_of_els(_el_offset_top, _dissection_el_rect, _el_rect)) + 'px';
-  const _top_layout_position_left =
-    number.decimal(get_horizontal_center_of_els(_el_offset_left, _dissection_el_rect, _el_rect)) + 'px';
-  const _top_layout_position_top = _el_offset_top - _dissection_el_rect.height - SPECCER_PIN_SPACE + 'px';
-  const _bottom_layout_position_left =
-    number.decimal(get_horizontal_center_of_els(_el_offset_left, _dissection_el_rect, _el_rect)) + 'px';
-  const _bottom_layout_position_top = _el_offset_top + _el_rect.height + SPECCER_PIN_SPACE + 'px';
-
-  let _dissection_styles = {};
-
-  if (area.indexOf(DissectAreaEnum.Outline) !== -1) {
-    if (area.indexOf(DissectAreaEnum.Left) !== -1) {
-      if (area.indexOf(DissectAreaEnum.Full) !== -1) {
-        _dissection_styles = {
-          left: _el_offset_left - 8 + 'px',
-          top: _el_offset_top + -1 + 'px',
-          height: _el_rect.height + 'px'
-        };
-      } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
-        _dissection_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_styles = {
-          left: _left_layout_position_left,
-          top: _left_layout_position_top
-        };
-      }
-    } else if (area.indexOf(DissectAreaEnum.Right) !== -1) {
-      if (area.indexOf(DissectAreaEnum.Full) !== -1) {
-        _dissection_styles = {
-          left: _el_offset_left + _el_rect.width + 'px',
-          top: _el_offset_top + -1 + 'px',
-          height: _el_rect.height + 'px'
-        };
-      } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
-        _dissection_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_styles = {
-          left: _right_layout_position_left,
-          top: _right_layout_position_top
-        };
-      }
-    } else if (area.indexOf(DissectAreaEnum.Top) !== -1) {
-      if (area.indexOf(DissectAreaEnum.Full) !== -1) {
-        _dissection_styles = {
-          top: _el_offset_top + -8 + 'px',
-          left: _el_offset_left + -1 + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
-        _dissection_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_styles = {
-          left: _top_layout_position_left,
-          top: _top_layout_position_top
-        };
-      }
-    } else if (area.indexOf(DissectAreaEnum.Bottom) !== -1) {
-      if (area.indexOf(DissectAreaEnum.Full) !== -1) {
-        _dissection_styles = {
-          top: _el_offset_top + _el_rect.height + 'px',
-          left: _el_offset_left + -1 + 'px',
-          width: _el_rect.width + 'px'
-        };
-      } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
-        _dissection_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_styles = {
-          left: _bottom_layout_position_left,
-          top: _bottom_layout_position_top
-        };
-      }
-    } else {
-      if (area.indexOf(DissectAreaEnum.Full) !== -1) {
-        _dissection_styles = {
-          left: _el_offset_left + _el_rect.width + 'px',
-          top: _el_offset_top + 'px',
-          height: _el_rect.height + 'px'
-        };
-      } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
-        _dissection_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_styles = {
-          left: _left_layout_position_left,
-          top: _left_layout_position_top
-        };
-      }
-    }
-  } else {
-    if (area.indexOf(DissectAreaEnum.Full) !== -1) {
-      _dissection_styles = {
-        left: _el_offset_left - 8 + 'px',
-        top: _el_offset_top + -1 + 'px',
-        height: _el_rect.height + 'px'
-      };
-    } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {
-      _dissection_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_styles = {
-        left: _left_layout_position_left,
-        top: _left_layout_position_top
-      };
-    }
-  }
-
-  return _dissection_styles;
-};

package/src/helpers/typography/index.ts

@@ -1,3 +0,0 @@
-export { position } from './position';
-
-export { template } from './template';

package/src/helpers/typography/position.ts

@@ -1,54 +0,0 @@
-import * as css from '../../lib/css';
-import * as number from '../../lib/number';
-import { get_body_correction } from '../../lib/position';
-import { get_horizontal_center_of_els, get_vertical_center_of_els } from '../../lib/position';
-import { SpeccerAreaEnum } from '../../enums/area';
-
-export const position = (
-  area: string | null,
-  el: HTMLElement,
-  speccerEl: HTMLElement
-): { left: string; top: string } => {
-  const _el_rect = el.getBoundingClientRect();
-  const SPECCER_PIN_SPACE = css.pinSpace(speccerEl);
-  const _speccer_el_rect = speccerEl.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;
-  const _left_layout_position_left = _el_offset_left - _speccer_el_rect.width - SPECCER_PIN_SPACE + 'px';
-  const _left_layout_position_top =
-    number.decimal(get_vertical_center_of_els(_el_offset_top, _speccer_el_rect, _el_rect)) + 'px';
-  const _right_layout_position_left = _el_offset_left + _el_rect.width + SPECCER_PIN_SPACE + 'px';
-  const _right_layout_position_top =
-    number.decimal(get_vertical_center_of_els(_el_offset_top, _speccer_el_rect, _el_rect)) + 'px';
-  const _top_layout_position_left =
-    number.decimal(get_horizontal_center_of_els(_el_offset_left, _speccer_el_rect, _el_rect)) + 'px';
-  const _top_layout_position_top = _el_offset_top - _speccer_el_rect.height - SPECCER_PIN_SPACE + 'px';
-  const _bottom_layout_position_left =
-    number.decimal(get_horizontal_center_of_els(_el_offset_left, _speccer_el_rect, _el_rect)) + 'px';
-  const _bottom_layout_position_top = _el_offset_top + _el_rect.height + SPECCER_PIN_SPACE + 'px';
-
-  let _position = {
-    left: _left_layout_position_left,
-    top: _left_layout_position_top
-  };
-
-  if (area && area.indexOf(SpeccerAreaEnum.Right) !== -1) {
-    _position = {
-      left: _right_layout_position_left,
-      top: _right_layout_position_top
-    };
-  } else if (area && area.indexOf(SpeccerAreaEnum.Top) !== -1) {
-    _position = {
-      left: _top_layout_position_left,
-      top: _top_layout_position_top
-    };
-  } else if (area && area.indexOf(SpeccerAreaEnum.Bottom) !== -1) {
-    _position = {
-      left: _bottom_layout_position_left,
-      top: _bottom_layout_position_top
-    };
-  }
-
-  return _position;
-};

package/src/helpers/typography/template.ts

@@ -1,27 +0,0 @@
-import * as css from '../../lib/css';
-import * as styles from '../../lib/styles';
-
-export const template = async (el: HTMLElement): Promise<string> => {
-  const _el_styles = await styles.get(el);
-  const _styles = css.getTypography(_el_styles);
-
-  return (
-    `
-` +
-    'font-styles: {' +
-    '<ul class="speccer-styles">' +
-    `  <li><span class="property">font-family:</span> ${_styles['fontFamily']};</li>` +
-    `  <li><span class="property">font-size:</span> ${_styles['fontSize']} / ${
-      parseInt(_styles['fontSize'], 10) / 16
-    }rem;</li>` +
-    `  <li><span class="property">font-weight:</span> ${_styles['fontWeight']};</li>` +
-    `  <li><span class="property">font-variation-settings:</span> ${_styles['fontVariationSettings']};</li>` +
-    `  <li><span class="property">line-height:</span> ${_styles['lineHeight']} / ${
-      parseInt(_styles['lineHeight'], 10) / 16
-    }rem;</li>` +
-    `  <li><span class="property">letter-spacing:</span> ${_styles['letterSpacing']};</li>` +
-    `  <li><span class="property">font-style:</span> ${_styles['fontStyle']};</li>` +
-    '</ul>' +
-    '}'
-  );
-};

package/src/index.ts

@@ -1,36 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-import './interfaces/global';
-import * as __node from './lib/node';
-import * as __spacing from './tasks/spec';
-import * as __dissect from './tasks/dissect';
-import * as __measure from './tasks/measure';
-import * as __typography from './tasks/typography';
-import * as __browser from './browser';
-
-export const spacing = __spacing;
-
-export const dissect = __dissect;
-
-export const measure = __measure;
-
-export const typography = __typography;
-
-const speccer = () => {
-  __node.removeAll('.speccer');
-
-  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 default speccer;
-
-__browser.activate(speccer);

package/src/interfaces/global.ts

@@ -1,7 +0,0 @@
-export {};
-
-declare global {
-  interface Window {
-    speccer: any;
-  }
-}

package/src/lib/attributes.ts

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

package/src/lib/classnames.ts

@@ -1,43 +0,0 @@
-/* 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.ts

@@ -1,8 +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'];
-
-export const SPECCER_DEFAULT_PIN_SPACE = 48;