@phun-ky/speccer 6.0.0 → 6.0.3

package/src/lib/css.ts

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

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

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

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

package/src/lib/position.ts

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

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

package/src/lib/styles.ts

@@ -1,31 +0,0 @@
-/* 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/anatomy.styl

@@ -1,274 +0,0 @@
-.ph.speccer.dissection
-  font-family sans-serif
-  height var(--ph-speccer-pin-size)
-  width var(--ph-speccer-pin-size)
-  display flex
-  position absolute
-  border-radius 100%
-  background-color var(--ph-speccer-pin-color)
-  color var(--ph-speccer-color-text-light)
-  font-weight 400
-  align-items center
-  justify-content center
-  line-height 150%
-  font-size 16px
-  z-index 100000
-  box-sizing content-box
-
-.ph.speccer.dissection:after
-  content ""
-  position absolute
-  height var(--ph-speccer-pin-space)
-  top 100%
-  width var(--ph-speccer-line-width)
-  background-color var(--ph-speccer-pin-color)
-  z-index 99999
-
-
-.ph.speccer.dissection.outline:after,
-.ph.speccer.dissection.outline.top:after
-  height var(--ph-speccer-pin-space)
-  width var(--ph-speccer-line-width)
-  top 100%
-  right 50%
-
-.ph.speccer.dissection.outline.left:after
-  height var(--ph-speccer-line-width)
-  width var(--ph-speccer-pin-space)
-  top 50%
-  left 100%
-
-.ph.speccer.dissection.outline.right:after
-  height var(--ph-speccer-line-width)
-  width var(--ph-speccer-pin-space)
-  top 50%
-  right 100%
-
-.ph.speccer.dissection.outline.bottom:after
-  height var(--ph-speccer-pin-space)
-  width var(--ph-speccer-line-width)
-  top calc(-100% - (var(--ph-speccer-pin-space) / 2))
-  right 50%
-
-
-.ph.speccer.dissection
-  &:after
-    content ""
-    position absolute
-    height var(--ph-speccer-pin-space)
-    top 100%
-    width var(--ph-speccer-line-width)
-    background-color var(--ph-speccer-pin-color)
-    z-index 99999
-  &.outline
-    &.left
-      &:after
-        height var(--ph-speccer-line-width)
-        width var(--ph-speccer-pin-space)
-        top 50%
-        left 100%
-    &.right
-      &:after
-        height var(--ph-speccer-line-width)
-        width var(--ph-speccer-pin-space)
-        top 50%
-        right 100%
-    &.enclose
-      border-radius 0
-      background-color transparent
-      color var(--ph-speccer-measure-color)
-      border var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)
-      &.right
-        &:after
-          left calc(100% + calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width)))
-          right auto
-        &:before
-          left 100%
-          right auto
-      &.left
-        &:after
-          left calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))
-          right auto
-        &:before
-          right 100%
-          left auto
-      &.top
-        &:after
-          top calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))
-          bottom auto
-        &:before
-          bottom 100%
-          top auto
-      &.bottom
-        &:after
-          top calc(100% + calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width)))
-          bottom auto
-        &:before
-          top 100%
-          bottom auto
-    &.full
-      border-radius 0
-      background-color transparent
-      color var(--ph-speccer-measure-color)
-      border var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)
-      &.right
-        border-left none
-        &:after
-          left calc(8px + var(--ph-speccer-pin-space))
-        &:before
-          left 100%
-      &.left
-        border-right none
-        &:after
-          left calc(-8px - var(--ph-speccer-pin-space))
-        &:before
-          right 100%
-      &.top
-        border-bottom none
-        &:after
-          top calc(-8px - var(--ph-speccer-pin-space))
-        &:before
-          bottom 100%
-      &.bottom
-        border-top none
-        &:after
-          top calc(8px + var(--ph-speccer-pin-space))
-        &:before
-          top 100%
-    &.bottom
-      &:after
-        height var(--ph-speccer-pin-space)
-        width var(--ph-speccer-line-width)
-        top calc(-100% - (var(--ph-speccer-pin-space) / 2))
-        right 50%
-
-
-.ph.speccer.dissection.outline.top:after,
-.ph.speccer.dissection.outline:after
-  height var(--ph-speccer-pin-space)
-  width var(--ph-speccer-line-width)
-  top 100%
-  right 50%
-
-[data-anatomy-section]
-  counter-reset type
-
-.ph.speccer.dissection.outline.full.right,
-.ph.speccer.dissection.outline.full.left
-  width 8px
-
-.ph.speccer.dissection.outline.full.top,
-.ph.speccer.dissection.outline.full.bottom
-  height 8px
-
-.ph.speccer.dissection.outline.full.right:after,
-.ph.speccer.dissection.outline.full.left:after,
-.ph.speccer.dissection.outline.full.top:after,
-.ph.speccer.dissection.outline.full.bottom:after
-  content attr(data-dissection-counter)
-  height var(--ph-speccer-pin-size)
-  width var(--ph-speccer-pin-size)
-  display flex
-  position absolute
-  border-radius 100%
-  background-color var(--ph-speccer-pin-color)
-  color var(--ph-speccer-color-text-light)
-  align-items center
-  justify-content center
-  line-height 150%
-  font-size 16px
-  z-index 100000
-
-.ph.speccer.dissection.outline.full.right:after,
-.ph.speccer.dissection.outline.full.left:after
-  top 50%
-  transform translateY(-50%)
-
-.ph.speccer.dissection.outline.full.top:after,
-.ph.speccer.dissection.outline.full.bottom:after
-  left 50%
-  transform translateX(-50%)
-
-.ph.speccer.dissection.outline.full.right:before,
-.ph.speccer.dissection.outline.full.left:before,
-.ph.speccer.dissection.outline.full.top:before,
-.ph.speccer.dissection.outline.full.bottom:before
-  content ""
-  position absolute
-  background-color var(--ph-speccer-pin-color)
-  z-index 100000
-  display block
-
-.ph.speccer.dissection.outline.full.right:before,
-.ph.speccer.dissection.outline.full.left:before
-  top 50%
-  transform translateY(-50%)
-  height var(--ph-speccer-line-width)
-  width calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))
-
-.ph.speccer.dissection.outline.full.top:before,
-.ph.speccer.dissection.outline.full.bottom:before
-  left 50%
-  transform translateX(-50%)
-  width var(--ph-speccer-line-width)
-  height calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))
-
-.ph.speccer.dissection.outline.enclose.right,
-.ph.speccer.dissection.outline.enclose.left
-  width 8px
-
-.ph.speccer.dissection.outline.enclose.top,
-.ph.speccer.dissection.outline.enclose.bottom
-  height 8px
-
-.ph.speccer.dissection.outline.enclose.right:after,
-.ph.speccer.dissection.outline.enclose.left:after,
-.ph.speccer.dissection.outline.enclose.top:after,
-.ph.speccer.dissection.outline.enclose.bottom:after
-  content attr(data-dissection-counter)
-  height var(--ph-speccer-pin-size)
-  width var(--ph-speccer-pin-size)
-  display flex
-  position absolute
-  border-radius 100%
-  background-color var(--ph-speccer-pin-color)
-  color var(--ph-speccer-color-text-light)
-  align-items center
-  justify-content center
-  line-height 150%
-  font-size 16px
-  z-index 100000
-
-.ph.speccer.dissection.outline.enclose.right:after,
-.ph.speccer.dissection.outline.enclose.left:after
-  top 50%
-  transform translateY(-50%)
-
-.ph.speccer.dissection.outline.enclose.top:after,
-.ph.speccer.dissection.outline.enclose.bottom:after
-  left 50%
-  transform translateX(-50%)
-
-.ph.speccer.dissection.outline.enclose.right:before,
-.ph.speccer.dissection.outline.enclose.left:before,
-.ph.speccer.dissection.outline.enclose.top:before,
-.ph.speccer.dissection.outline.enclose.bottom:before
-  content ""
-  position absolute
-  background-color var(--ph-speccer-pin-color)
-  z-index 100000
-  display block
-
-.ph.speccer.dissection.outline.enclose.right:before,
-.ph.speccer.dissection.outline.enclose.left:before
-  top 50%
-  transform translateY(-50%)
-  height var(--ph-speccer-line-width)
-  width calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))
-
-.ph.speccer.dissection.outline.enclose.top:before,
-.ph.speccer.dissection.outline.enclose.bottom:before
-  left 50%
-  transform translateX(-50%)
-  width var(--ph-speccer-line-width)
-  height calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))

package/src/styles/index.styl

@@ -1,72 +0,0 @@
-$ph-speccer-color-padding = rgba(219, 111, 255, 0.4);
-$ph-speccer-color-padding-hover = rgb(219, 111, 255);
-$ph-speccer-color-margin = rgba(255, 247, 111, 0.4);
-$ph-speccer-color-margin-hover = rgb(255, 247, 111);
-$ph-speccer-color-text-light = rgb(255, 255, 255);
-$ph-speccer-color-text-dark = rgb(51,51,51);
-$ph-speccer-color-contrast = rgb(255, 58, 168);
-$ph-speccer-spacing-color = $ph-speccer-color-contrast;
-$ph-speccer-measure-color = rgb(255,0,0);
-$ph-speccer-pin-color = $ph-speccer-color-contrast;
-$ph-speccer-typography-background-color = rgb(255, 255,255);
-$ph-speccer-typography-color-property = rgb(63, 133, 242);
-$ph-speccer-typography-color-text = rgb(87, 87, 91);
-$ph-speccer-typography-color-value = $ph-speccer-color-contrast;
-$ph-speccer-depth-opacity-400 = 0.4;
-$ph-speccer-font-family = "Menlo for Powerline", "Menlo Regular for Powerline", "DejaVu Sans Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-$ph-speccer-font-size = 12px;
-$ph-speccer-line-height = 12px;
-$ph-speccer-pin-size = 24px
-$ph-speccer-pin-space = 48px
-$ph-speccer-line-width = 1px
-$ph-speccer-line-width-negative = -1px
-$ph-speccer-measure-size = 8px
-
-
-.ph.speccer
-  --ph-speccer-color-padding: $ph-speccer-color-padding;
-  --ph-speccer-color-padding-hover: $ph-speccer-color-padding-hover;
-  --ph-speccer-color-margin: $ph-speccer-color-margin;
-  --ph-speccer-color-margin-hover: $ph-speccer-color-margin-hover;
-  --ph-speccer-color-text-light: $ph-speccer-color-text-light;
-  --ph-speccer-color-text-dark: $ph-speccer-color-text-dark;
-  --ph-speccer-color-contrast: $ph-speccer-color-contrast;
-  --ph-speccer-spacing-color: var(--ph-speccer-color-contrast);
-  --ph-speccer-measure-color: $ph-speccer-measure-color;
-  --ph-speccer-pin-color: var(--ph-speccer-color-contrast);
-  --ph-speccer-typography-background-color: $ph-speccer-typography-background-color;
-  --ph-speccer-typography-color-property: $ph-speccer-typography-color-property;
-  --ph-speccer-typography-color-text: $ph-speccer-typography-color-text;
-  --ph-speccer-typography-color-value: var(--ph-speccer-color-contrast);
-  --ph-speccer-depth-opacity-400: $ph-speccer-depth-opacity-400;
-  --ph-speccer-font-family: $ph-speccer-font-family;
-  --ph-speccer-font-size: $ph-speccer-font-size;
-  --ph-speccer-line-height: $ph-speccer-line-height;
-  --ph-speccer-pin-size: $ph-speccer-pin-size;
-  --ph-speccer-pin-space: $ph-speccer-pin-space;
-  --ph-speccer-line-width: $ph-speccer-line-width;
-  --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,
-.ph.speccer::before
-  font-family var(--ph-speccer-font-family) !important
-  justify-content center
-  align-items center
-  z-index 99999
-  position absolute
-  pointer-events none
-  user-select none
-  display flex
-  font-size 12px
-  box-sizing border-box
-  line-height 12px
-
-@require './anatomy.styl'
-@require './spacing.styl'

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)