@phun-ky/speccer 5.0.0 → 6.0.2

package/src/styles/spacing.styl

@@ -1,152 +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)
-
-
-.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)
-    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,86 +0,0 @@
-.ph.speccer.typography
-  background-color var(--ph-speccer-typography-background-color)
-  color var(--ph-speccer-typography-color-text)
-  font-size 12px
-  padding 8px 24px
-  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)
-
-  &: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 48px
-
-  &.left
-    &:after
-      left 100%
-      top 50%
-      transform translateY(-50%)
-      height var(--ph-speccer-line-width)
-      width 48px
-  &.right
-    &:after
-      left auto
-      right 100%
-      top 50%
-      transform translateY(-50%)
-      height var(--ph-speccer-line-width)
-      width 48px
-  &.top
-    &:after
-      left 50%
-      right auto
-      top 100%
-      transform translateX(-50%)
-      height 48px
-      width var(--ph-speccer-line-width)
-  &.bottom
-    &:after
-      left 50%
-      right auto
-      top auto
-      bottom 100%
-      transform translateX(-50%)
-      height 48px
-      width var(--ph-speccer-line-width)
-
-  & .speccer-styles
-    list-style none
-    width 100%
-    padding 0
-    margin 0
-    line-height 140%
-    padding-left 1rem
-    font-size 12px
-
-    & .property
-      font-weight normal
-      color var(--ph-speccer-typography-color-property)
-      text-align left
-      padding 0
-      font-size 12px
-      margin 0
-
-    & > li
-      font-weight normal
-      color var(--ph-speccer-typography-color-value)
-      text-align left
-      padding 0
-      font-size 12px
-      margin 0
-      list-style none
-      border none

package/src/typography.js

@@ -1,141 +0,0 @@
-/* eslint no-console:0 */
-'use strict';
-
-import * as classnames from './lib/classnames';
-import * as number from './lib/number';
-import * as styles from './lib/styles';
-import * as node from './lib/node';
-import * as css from './lib/css';
-import { SPECCER_TAGS_TO_AVOID } from './lib/constants';
-
-export const create = (html, area) => {
-  const _el = document.createElement('div');
-
-  _el.innerHTML = html;
-
-  classnames.set(_el, `ph speccer typography ${area}`);
-
-  return _el;
-};
-
-export const element = async (el) => {
-  const _area = el.getAttribute('data-speccer-typography');
-  const _el_style = await styles.get(el);
-
-  if (_el_style.display === 'none' || _el_style.visibility === 'hidden') {
-    return;
-  }
-
-  el.classList.add('is-specced');
-
-  const _parent_style = styles.get(el.parentElement);
-
-  if (_parent_style.position === 'static') {
-    window.requestAnimationFrame(() => {
-      el.parentElement.style.position = 'relative';
-    });
-  }
-
-  const _styles = css.getTypography(_el_style);
-  const _el_rect = el.getBoundingClientRect();
-  const html =
-    `
-    ` +
-    '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>' +
-    '}';
-  const speccerNode = create(html, _area);
-
-  let tableCorrectionTop = 0;
-  let tableCorrectionLeft = 0;
-
-  const tableCorrection = SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0;
-
-  if (tableCorrection) {
-    const table = el.parentElement;
-    const tableStyle = window.getComputedStyle(table.parentElement);
-
-    node.after(table, speccerNode);
-    tableCorrectionTop = table.getBoundingClientRect().top - parseInt(tableStyle.getPropertyValue('padding-top'), 10);
-    tableCorrectionLeft =
-      table.getBoundingClientRect().left - parseInt(tableStyle.getPropertyValue('padding-left'), 10);
-  } else {
-    node.after(el, speccerNode);
-  }
-
-  const rectOfSpeccerNode = speccerNode.getBoundingClientRect();
-  const outlineLeftLeft =
-    (tableCorrection ? rectOfSpeccerNode.left - tableCorrectionLeft : el.offsetLeft) -
-    rectOfSpeccerNode.width -
-    48 +
-    'px';
-  const outlineLeftTop =
-    number.to3Decimals(
-      (tableCorrection ? rectOfSpeccerNode.top - tableCorrectionTop : el.offsetTop) -
-        rectOfSpeccerNode.height / 2 +
-        _el_rect.height / 2
-    ) + 'px';
-  const outlineRightLeft =
-    (tableCorrection ? rectOfSpeccerNode.left - tableCorrectionLeft : el.offsetLeft) + _el_rect.width + 48 + 'px';
-  const outlineRightTop =
-    number.to3Decimals(
-      (tableCorrection ? rectOfSpeccerNode.top - tableCorrectionTop : el.offsetTop) -
-        rectOfSpeccerNode.height / 2 +
-        _el_rect.height / 2
-    ) + 'px';
-  const outlineTopLeft =
-    number.to3Decimals(
-      (tableCorrection ? rectOfSpeccerNode.left - tableCorrectionLeft : el.offsetLeft) -
-        rectOfSpeccerNode.width / 2 +
-        _el_rect.width / 2
-    ) + 'px';
-  const outlineTopTop =
-    (tableCorrection ? rectOfSpeccerNode.top - tableCorrectionTop : el.offsetTop) -
-    rectOfSpeccerNode.height -
-    48 +
-    'px';
-  const outlineBottomleft =
-    number.to3Decimals(
-      (tableCorrection ? rectOfSpeccerNode.left - tableCorrectionLeft : el.offsetLeft) -
-        rectOfSpeccerNode.width / 2 +
-        _el_rect.width / 2
-    ) + 'px';
-  const outlineBottomTop =
-    (tableCorrection ? rectOfSpeccerNode.top - tableCorrectionTop : el.offsetTop) + _el_rect.height + 48 + 'px';
-
-  let position = {
-    left: outlineLeftLeft,
-    top: outlineLeftTop
-  };
-
-  if (_area.indexOf('right') !== -1) {
-    position = {
-      left: outlineRightLeft,
-      top: outlineRightTop
-    };
-  } else if (_area.indexOf('top') !== -1) {
-    position = {
-      left: outlineTopLeft,
-      top: outlineTopTop
-    };
-  } else if (_area.indexOf('bottom') !== -1) {
-    position = {
-      left: outlineBottomleft,
-      top: outlineBottomTop
-    };
-  }
-
-  styles.add(speccerNode, position);
-};