@phun-ky/speccer 3.5.1 → 4.1.0

package/src/{anatomy.styl → styles/anatomy.styl}

@@ -1,4 +1,5 @@
-.dissection
+.ph.speccer.dissection
+  font-family sans-serif
   height 1.5rem
   width 1.5rem
   display flex
@@ -6,14 +7,15 @@
   border-radius 100%
   background-color #d4397a
   color white
-  font-weight 600
+  font-weight 400
   align-items center
   justify-content center
   line-height 150%
   font-size 16px
   z-index 100000
+  box-sizing content-box
 
-.dissection:after
+.ph.speccer.dissection:after
   content ""
   position absolute
   height 48px
@@ -23,32 +25,32 @@
   z-index 99999
 
 
-.dissection.outline:after,
-.dissection.outline.top:after
+.ph.speccer.dissection.outline:after,
+.ph.speccer.dissection.outline.top:after
   height 48px
   width 1px
   top 100%
   right 50%
 
-.dissection.outline.left:after
+.ph.speccer.dissection.outline.left:after
   height 1px
   width 48px
   top 50%
   left 100%
 
-.dissection.outline.right:after
+.ph.speccer.dissection.outline.right:after
   height 1px
   width 48px
   top 50%
   right 100%
 
-.dissection.outline.bottom:after
+.ph.speccer.dissection.outline.bottom:after
   height 48px
   width 1px
   top calc(-100% - 24px)
   right 50%
 
-.dissection.button-center:after
+.ph.speccer.dissection.button-center:after
   content ""
   position absolute
   height 48px
@@ -57,7 +59,7 @@
   background-color #d4397a
   z-index 99999
 
-.dissection.button-outline:after
+.ph.speccer.dissection.button-outline:after
   content ""
   position absolute
   width 48px
@@ -67,7 +69,7 @@
   background-color #d4397a
   z-index 99999
 
-.dissection.button-icon:after
+.ph.speccer.dissection.button-icon:after
   content ""
   position absolute
   width 48px
@@ -77,7 +79,7 @@
   background-color #d4397a
   z-index 99999
 
-.dissection.button-icon:before
+.ph.speccer.dissection.button-icon:before
   content ""
   position absolute
   height 1.5rem
@@ -87,21 +89,7 @@
   z-index 99999
 
 
-.dissection
-  height 1.5rem
-  width 1.5rem
-  display flex
-  position absolute
-  border-radius 100%
-  background-color #d4397a
-  color #fff
-  font-weight 600
-  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
@@ -215,8 +203,8 @@
       border 1px solid #d4397a
       z-index 99999
 
-.dissection.outline.top:after,
-.dissection.outline:after
+.ph.speccer.dissection.outline.top:after,
+.ph.speccer.dissection.outline:after
   height 48px
   width 1px
   top 100%
@@ -225,18 +213,18 @@
 [data-anatomy-section]
   counter-reset type
 
-.dissection.outline.full.right,
-.dissection.outline.full.left
+.ph.speccer.dissection.outline.full.right,
+.ph.speccer.dissection.outline.full.left
   width 8px
 
-.dissection.outline.full.top,
-.dissection.outline.full.bottom
+.ph.speccer.dissection.outline.full.top,
+.ph.speccer.dissection.outline.full.bottom
   height 8px
 
-.dissection.outline.full.right:after,
-.dissection.outline.full.left:after,
-.dissection.outline.full.top:after,
-.dissection.outline.full.bottom:after
+.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 1.5rem
   width 1.5rem
@@ -245,59 +233,58 @@
   border-radius 100%
   background-color #d4397a
   color #fff
-  font-weight 600
   align-items center
   justify-content center
   line-height 150%
   font-size 16px
   z-index 100000
 
-.dissection.outline.full.right:after,
-.dissection.outline.full.left:after
+.ph.speccer.dissection.outline.full.right:after,
+.ph.speccer.dissection.outline.full.left:after
   top 50%
   transform translateY(-50%)
 
-.dissection.outline.full.top:after,
-.dissection.outline.full.bottom:after
+.ph.speccer.dissection.outline.full.top:after,
+.ph.speccer.dissection.outline.full.bottom:after
   left 50%
   transform translateX(-50%)
 
-.dissection.outline.full.right:before,
-.dissection.outline.full.left:before,
-.dissection.outline.full.top:before,
-.dissection.outline.full.bottom:before
+.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 #d4397a
   z-index 100000
   display block
 
-.dissection.outline.full.right:before,
-.dissection.outline.full.left:before
+.ph.speccer.dissection.outline.full.right:before,
+.ph.speccer.dissection.outline.full.left:before
   top 50%
   transform translateY(-50%)
   height 1px
   width 49px
 
-.dissection.outline.full.top:before,
-.dissection.outline.full.bottom:before
+.ph.speccer.dissection.outline.full.top:before,
+.ph.speccer.dissection.outline.full.bottom:before
   left 50%
   transform translateX(-50%)
   width 1px
   height 49px
 
-.dissection.outline.enclose.right,
-.dissection.outline.enclose.left
+.ph.speccer.dissection.outline.enclose.right,
+.ph.speccer.dissection.outline.enclose.left
   width 8px
 
-.dissection.outline.enclose.top,
-.dissection.outline.enclose.bottom
+.ph.speccer.dissection.outline.enclose.top,
+.ph.speccer.dissection.outline.enclose.bottom
   height 8px
 
-.dissection.outline.enclose.right:after,
-.dissection.outline.enclose.left:after,
-.dissection.outline.enclose.top:after,
-.dissection.outline.enclose.bottom:after
+.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 1.5rem
   width 1.5rem
@@ -306,49 +293,48 @@
   border-radius 100%
   background-color #d4397a
   color #fff
-  font-weight 600
   align-items center
   justify-content center
   line-height 150%
   font-size 16px
   z-index 100000
 
-.dissection.outline.enclose.right:after,
-.dissection.outline.enclose.left:after
+.ph.speccer.dissection.outline.enclose.right:after,
+.ph.speccer.dissection.outline.enclose.left:after
   top 50%
   transform translateY(-50%)
 
-.dissection.outline.enclose.top:after,
-.dissection.outline.enclose.bottom:after
+.ph.speccer.dissection.outline.enclose.top:after,
+.ph.speccer.dissection.outline.enclose.bottom:after
   left 50%
   transform translateX(-50%)
 
-.dissection.outline.enclose.right:before,
-.dissection.outline.enclose.left:before,
-.dissection.outline.enclose.top:before,
-.dissection.outline.enclose.bottom:before
+.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 #d4397a
   z-index 100000
   display block
 
-.dissection.outline.enclose.right:before,
-.dissection.outline.enclose.left:before
+.ph.speccer.dissection.outline.enclose.right:before,
+.ph.speccer.dissection.outline.enclose.left:before
   top 50%
   transform translateY(-50%)
   height 1px
   width 49px
 
-.dissection.outline.enclose.top:before,
-.dissection.outline.enclose.bottom:before
+.ph.speccer.dissection.outline.enclose.top:before,
+.ph.speccer.dissection.outline.enclose.bottom:before
   left 50%
   transform translateX(-50%)
   width 1px
   height 49px
 
-.dissection.button-icon:after,
-.dissection.button-outline:after
+.ph.speccer.dissection.button-icon:after,
+.ph.speccer.dissection.button-outline:after
   content ""
   position absolute
   width 48px

package/src/styles/index.styl

@@ -0,0 +1,26 @@
+$ph-speccer-color-padding = rgb(219, 111, 255);
+$ph-speccer-color-margin = 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-border-dark = rgb(51, 51, 51);
+$ph-speccer-color-text-pink = rgb(255, 58, 168);
+$ph-speccer-color-border-pink = rgb(255, 58, 168);
+$ph-speccer-depth-opacity-400 = 0.4;
+
+
+.ph.speccer,
+.ph.speccer::after,
+.ph.speccer::before
+  font-family "Menlo for Powerline", "Menlo Regular for Powerline", "DejaVu Sans Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important
+  justify-content center
+  align-items center
+  z-index 99999
+  position absolute
+  display flex
+  font-size 12px
+  box-sizing border-box
+  transition all 0.2s ease-in
+  line-height 12px
+
+@require './anatomy.styl'
+@require './spacing.styl'

package/src/styles/measure.styl

@@ -0,0 +1,85 @@
+.ph.speccer.measure
+  &.width
+    color red
+    border 1px solid red
+    border-bottom none
+    height 8px
+
+
+.ph.speccer.measure
+  &.width
+    &::after
+      content attr(data-measure)
+      position absolute
+      top calc(-100% - 10px)
+
+
+.ph.speccer.measure
+  &.width
+    &.bottom
+      color red
+      border 1px solid red
+      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 red
+      border 1px solid red
+      border-bottom none
+
+
+.ph.speccer.measure
+  &.width
+    &.top
+      &::after
+        content attr(data-measure)
+        position absolute
+        bottom calc(100% + 5px)
+
+
+.ph.speccer.measure
+  &.height
+    color red
+    border 1px solid red
+    border-right none
+    width 8px
+
+
+.ph.speccer.measure
+  &.height
+    &::after
+      content attr(data-measure)
+      position absolute
+      top 50%
+      left calc(-100% - 25px)
+      transform translateY(-50%) rotate(-90deg)
+
+
+.ph.speccer.measure
+  &.height
+    &.right
+      color red
+      border 1px solid red
+      border-left none
+
+
+.ph.speccer.measure
+  &.height
+    &.right
+      &::after
+        content attr(data-measure)
+        position absolute
+        top 50%
+        left 100%
+        transform translateY(-50%) rotate(90deg)

package/src/styles/spacing.styl

@@ -0,0 +1,142 @@
+.ph.speccer.spacing
+  &:hover
+    border 1px solid $ph-speccer-color-border-dark
+
+
+.ph.speccer.spacing
+  &.is-specced
+    &:hover
+      & ~ .speccer
+        &.margin
+          background-color $ph-speccer-color-margin
+        &.padding
+          background-color $ph-speccer-color-padding
+          color $ph-speccer-color-text-light
+
+
+.ph.speccer.spacing
+  &.margin
+    background-color rgba($ph-speccer-color-margin, .4)
+    color $ph-speccer-color-text-dark
+
+
+.ph.speccer.spacing
+  &.padding
+    background-color rgba($ph-speccer-color-padding, .4)
+    color $ph-speccer-color-text-pink
+
+
+.ph.speccer.spacing
+  &.margin
+    &.bottom,
+    &.top
+      &:after
+        content ""
+        position absolute
+        height 100%
+        border-top 1px solid $ph-speccer-color-border-dark
+        border-bottom 1px solid $ph-speccer-color-border-dark
+        width 9px
+        left 40%
+
+
+.ph.speccer.spacing
+  &.margin
+    &.bottom,
+    &.top
+      &:before
+        content ""
+        position absolute
+        height 100%
+        border-left 1px solid $ph-speccer-color-border-dark
+        margin-left 4px
+        width 0
+        left 40%
+
+
+.ph.speccer.spacing
+  &.margin
+    &.left,
+    &.right
+      &:after
+        content ""
+        position absolute
+        height 9px
+        border-right 1px solid $ph-speccer-color-border-pink
+        border-left 1px solid $ph-speccer-color-border-pink
+        width 100%
+        top 10%
+
+
+.ph.speccer.spacing
+  &.margin
+    &.left,
+    &.right
+      &:before
+        content ""
+        position absolute
+        height 0
+        border-top 1px solid $ph-speccer-color-border-pink
+        margin-top 4px
+        width 100%
+        top 10%
+
+
+.ph.speccer.spacing
+  &.padding
+    &.bottom,
+    &.top
+      &:after
+        content ""
+        position absolute
+        height 100%
+        border-top 1px solid $ph-speccer-color-border-pink
+        border-bottom 1px solid $ph-speccer-color-border-pink
+        width 9px
+        left 40%
+
+
+.ph.speccer.spacing
+  &.padding
+    &.bottom,
+    &.top
+      &:before
+        content ""
+        position absolute
+        height 100%
+        border-left 1px solid $ph-speccer-color-border-pink
+        margin-left 4px
+        width 0
+        left 40%
+
+
+.ph.speccer.spacing
+  &.padding
+    &.left,
+    &.right
+      &:after
+        content ""
+        position absolute
+        height 9px
+        border-right 1px solid $ph-speccer-color-border-pink
+        border-left 1px solid $ph-speccer-color-border-pink
+        width 100%
+        top 10%
+
+
+.ph.speccer.spacing
+  &.padding
+    &.left,
+    &.right
+      &:before
+        content ""
+        position absolute
+        height 0
+        border-top 1px solid $ph-speccer-color-border-pink
+        margin-top 4px
+        width 100%
+        top 10%
+
+
+@require './typography.styl'
+@require './measure.styl'

package/src/{typography.styl → styles/typography.styl}

@@ -1,4 +1,4 @@
-.speccer.typography
+.ph.speccer.typography
   background-color #ffffff
   color #57575b
   font-size 12px

package/src/typography.js

@@ -0,0 +1,138 @@
+/* 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();
+
+  let outlineLeftLeft =
+    (tableCorrection ? rectOfSpeccerNode.left - tableCorrectionLeft : el.offsetLeft) -
+    rectOfSpeccerNode.width -
+    48 +
+    'px';
+
+  let outlineLeftTop =
+    number.to3Decimals(
+      (tableCorrection ? rectOfSpeccerNode.top - tableCorrectionTop : el.offsetTop) -
+        rectOfSpeccerNode.height / 2 +
+        _el_rect.height / 2
+    ) + 'px';
+  let outlineRightLeft =
+    (tableCorrection ? rectOfSpeccerNode.left - tableCorrectionLeft : el.offsetLeft) + _el_rect.width + 48 + 'px';
+
+  let outlineRightTop =
+    number.to3Decimals(
+      (tableCorrection ? rectOfSpeccerNode.top - tableCorrectionTop : el.offsetTop) -
+        rectOfSpeccerNode.height / 2 +
+        _el_rect.height / 2
+    ) + 'px';
+  let outlineTopLeft =
+    number.to3Decimals(
+      (tableCorrection ? rectOfSpeccerNode.left - tableCorrectionLeft : el.offsetLeft) -
+        rectOfSpeccerNode.width / 2 +
+        _el_rect.width / 2
+    ) + 'px';
+  let outlineTopTop =
+    (tableCorrection ? rectOfSpeccerNode.top - tableCorrectionTop : el.offsetTop) -
+    rectOfSpeccerNode.height -
+    48 +
+    'px';
+  let outlineBottomleft =
+    number.to3Decimals(
+      (tableCorrection ? rectOfSpeccerNode.left - tableCorrectionLeft : el.offsetLeft) -
+        rectOfSpeccerNode.width / 2 +
+        _el_rect.width / 2
+    ) + 'px';
+  let 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);
+};

package/src/lib/poly.js

@@ -1,15 +0,0 @@
-// CustomEvent poly from MDN: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
-(function() {
-  if (typeof window.CustomEvent === 'function') return false;
-
-  function CustomEvent(event, params) {
-    params = params || { bubbles: false, cancelable: false, detail: undefined };
-    var evt = document.createEvent('CustomEvent');
-    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-    return evt;
-  }
-
-  CustomEvent.prototype = window.Event.prototype;
-
-  window.CustomEvent = CustomEvent;
-})();