@phun-ky/speccer 6.0.0 → 6.0.1

package/src/styles/measure.styl

@@ -1,88 +0,0 @@
-.ph.speccer.measure
-  &.width
-    color var(--ph-speccer-measure-color)
-    border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
-    border-bottom none
-    height var(--ph-speccer-measure-size)
-
-
-.ph.speccer.measure
-  &.width
-    &::after
-      content attr(data-measure)
-      position absolute
-      top calc(-100% - 10px)
-
-
-.ph.speccer.measure
-  &.width
-    &.bottom
-      color var(--ph-speccer-measure-color)
-      border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
-      border-top none
-
-
-.ph.speccer.measure
-  &.width
-    &.bottom
-      &::after
-        content attr(data-measure)
-        position absolute
-        top calc(100% + 5px)
-
-
-.ph.speccer.measure
-  &.width
-    &.top
-      color var(--ph-speccer-measure-color)
-      border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
-      border-bottom none
-
-
-.ph.speccer.measure
-  &.width
-    &.top
-      &::after
-        content attr(data-measure)
-        position absolute
-        bottom calc(100% + 5px)
-
-
-.ph.speccer.measure
-  &.height
-    &.left
-      color var(--ph-speccer-measure-color)
-      border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
-      border-right none
-      width var(--ph-speccer-measure-size)
-
-
-.ph.speccer.measure
-  &.height
-    &.left
-      &::after
-        content attr(data-measure)
-        position absolute
-        top 50%
-        left calc(-100% - 20px - var(--ph-speccer-line-width))
-        transform translateY(-50%) rotate(-90deg)
-
-
-.ph.speccer.measure
-  &.height
-    &.right
-      color var(--ph-speccer-measure-color)
-      border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
-      border-left none
-      width var(--ph-speccer-measure-size)
-
-
-.ph.speccer.measure
-  &.height
-    &.right
-      &::after
-        content attr(data-measure)
-        position absolute
-        top 50%
-        left calc(100% - var(--ph-speccer-measure-size))
-        transform translateY(-50%) rotate(90deg)

package/src/styles/spacing.styl

@@ -1,142 +0,0 @@
-.ph.speccer.spacing
-  pointer-events auto
-  transition none
-  border var(--ph-speccer-line-width) solid transparent
-  &:hover
-    border var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
-
-
-.ph.speccer.spacing
-  &.margin
-    background-color var(--ph-speccer-color-margin)
-    color var(--ph-speccer-color-text-dark)
-
-
-.ph.speccer.spacing
-  &.padding
-    background-color var(--ph-speccer-color-padding)
-    color var(--ph-speccer-spacing-color)
-
-
-.ph.speccer.spacing
-  &.margin
-    &.bottom,
-    &.top
-      &::after
-        transition none
-        content ""
-        position absolute
-        height 100%
-        border-top var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
-        border-bottom var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
-        width 9px
-        left 40%
-
-
-.ph.speccer.spacing
-  &.margin
-    &.bottom,
-    &.top
-      &::before
-        transition none
-        content ""
-        position absolute
-        height 100%
-        border-left var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
-        margin-left 4px
-        width 0
-        left 40%
-
-
-.ph.speccer.spacing
-  &.margin
-    &.left,
-    &.right
-      &::after
-        transition none
-        content ""
-        position absolute
-        height 9px
-        border-right var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
-        border-left var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
-        width 100%
-        top 10%
-
-
-.ph.speccer.spacing
-  &.margin
-    &.left,
-    &.right
-      &::before
-        transition none
-        content ""
-        position absolute
-        height 0
-        border-top var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
-        margin-top 4px
-        width 100%
-        top 10%
-
-
-.ph.speccer.spacing
-  &.padding
-    &.bottom,
-    &.top
-      &::after
-        transition none
-        content ""
-        position absolute
-        height 100%
-        border-top var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
-        border-bottom var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
-        width 9px
-        left 40%
-
-
-.ph.speccer.spacing
-  &.padding
-    &.bottom,
-    &.top
-      &::before
-        transition none
-        content ""
-        position absolute
-        height 100%
-        border-left var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
-        margin-left 4px
-        width 0
-        left 40%
-
-
-.ph.speccer.spacing
-  &.padding
-    &.left,
-    &.right
-      &::after
-        transition none
-        content ""
-        position absolute
-        height 9px
-        border-right var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
-        border-left var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
-        width 100%
-        top 10%
-
-
-.ph.speccer.spacing
-  &.padding
-    &.left,
-    &.right
-      &::before
-        transition none
-        content ""
-        position absolute
-        height 0
-        border-top var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
-        margin-top 4px
-        width 100%
-        top 10%
-
-
-@require './typography.styl'
-@require './measure.styl'

package/src/styles/typography.styl

@@ -1,85 +0,0 @@
-.ph.speccer.typography
-  background-color var(--ph-speccer-typography-background-color)
-  color var(--ph-speccer-typography-color-text)
-  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)
-
-  &:hover
-    border var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)
-
-  &:after
-    content ""
-    position absolute
-    display block
-    background-color var(--ph-speccer-pin-color)
-    left 100%
-    top 50%
-    transform translateY(-50%)
-    height var(--ph-speccer-line-width)
-    width var(--ph-speccer-pin-space)
-
-  &.left
-    &:after
-      left 100%
-      top 50%
-      transform translateY(-50%)
-      height var(--ph-speccer-line-width)
-      width var(--ph-speccer-pin-space)
-  &.right
-    &:after
-      left auto
-      right 100%
-      top 50%
-      transform translateY(-50%)
-      height var(--ph-speccer-line-width)
-      width var(--ph-speccer-pin-space)
-  &.top
-    &:after
-      left 50%
-      right auto
-      top 100%
-      transform translateX(-50%)
-      height var(--ph-speccer-pin-space)
-      width var(--ph-speccer-line-width)
-  &.bottom
-    &:after
-      left 50%
-      right auto
-      top auto
-      bottom 100%
-      transform translateX(-50%)
-      height var(--ph-speccer-pin-space)
-      width var(--ph-speccer-line-width)
-
-  & .speccer-styles
-    list-style none
-    width 100%
-    padding 0
-    margin 0
-    line-height 140%
-    padding-left 8px
-    font-size 10px
-
-    & .property
-      font-weight normal
-      color var(--ph-speccer-typography-color-property)
-      text-align left
-      padding 0
-      font-size 10px
-      margin 0
-
-    & > li
-      font-weight normal
-      color var(--ph-speccer-typography-color-value)
-      text-align left
-      padding 0
-      font-size 10px
-      margin 0
-      list-style none
-      border none

package/src/tasks/dissect.ts

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

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

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

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

@@ -1,45 +0,0 @@
-/* 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);
-};

package/src/types/css.ts

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

package/src/types/speccer.ts

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