@phun-ky/speccer 3.5.1 → 4.1.0

package/speccer.min.css

@@ -0,0 +1 @@
+.ph.speccer,.ph.speccer:after,.ph.speccer:before{box-sizing:border-box;font-family:Menlo for Powerline,Menlo Regular for Powerline,DejaVu Sans Mono,Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace!important;font-size:12px;line-height:12px;transition:all .2s ease-in;z-index:99999}.ph.speccer,.ph.speccer.dissection,.ph.speccer:after,.ph.speccer:before{align-items:center;display:flex;justify-content:center;position:absolute}.ph.speccer.dissection{background-color:#d4397a;border-radius:100%;box-sizing:initial;color:#fff;font-family:sans-serif;font-size:16px;font-weight:400;height:1.5rem;line-height:150%;width:1.5rem;z-index:100000}.ph.speccer.dissection.button-icon:after,.ph.speccer.dissection.button-outline:after{background-color:#d4397a;content:"";height:1px;position:absolute;top:50%;width:48px;z-index:99999}.ph.speccer.dissection:after{background-color:#d4397a;content:"";height:48px;position:absolute;top:100%;width:1px;z-index:99999}.ph.speccer.dissection.outline.left:after{height:1px;left:100%;top:50%;width:48px}.ph.speccer.dissection.outline.right:after{height:1px;right:100%;top:50%;width:48px}.ph.speccer.dissection.outline.enclose{background-color:initial;border:1px solid #d4397a;border-radius:0;color:red}.ph.speccer.dissection.outline.enclose.right:after{left:calc(100% + 49px);right:auto}.ph.speccer.dissection.outline.enclose.right:before{left:100%;right:auto}.ph.speccer.dissection.outline.enclose.left:after{left:-49px;right:auto}.ph.speccer.dissection.outline.enclose.left:before{left:auto;right:100%}.ph.speccer.dissection.outline.enclose.top:after{bottom:auto;top:-49px}.ph.speccer.dissection.outline.enclose.top:before{bottom:100%;top:auto}.ph.speccer.dissection.outline.enclose.bottom:after{bottom:auto;top:calc(100% + 49px)}.ph.speccer.dissection.outline.enclose.bottom:before{bottom:auto;top:100%}.ph.speccer.dissection.outline.full{background-color:initial;border:1px solid #d4397a;border-radius:0;color:red}.ph.speccer.dissection.outline.full.right{border-left:none}.ph.speccer.dissection.outline.full.right:after{left:56px}.ph.speccer.dissection.outline.full.right:before{left:100%}.ph.speccer.dissection.outline.full.left{border-right:none}.ph.speccer.dissection.outline.full.left:after{left:-56px}.ph.speccer.dissection.outline.full.left:before{right:100%}.ph.speccer.dissection.outline.full.top{border-bottom:none}.ph.speccer.dissection.outline.full.top:after{top:-56px}.ph.speccer.dissection.outline.full.top:before{bottom:100%}.ph.speccer.dissection.outline.full.bottom{border-top:none}.ph.speccer.dissection.outline.full.bottom:after{top:56px}.ph.speccer.dissection.outline.full.bottom:before{top:100%}.ph.speccer.dissection.outline.bottom:after{height:48px;right:50%;top:calc(-100% - 24px);width:1px}.ph.speccer.dissection.button-center:after{background-color:#d4397a;content:"";height:48px;position:absolute;top:100%;width:1px;z-index:99999}.ph.speccer.dissection.button-outline:after{right:100%}.ph.speccer.dissection.button-icon:after{left:100%}.ph.speccer.dissection.button-icon:before{border:1px solid #d4397a;content:"";height:1.5rem;left:calc(100% + 48px);position:absolute;width:1.5rem;z-index:99999}.ph.speccer.dissection.outline.top:after,.ph.speccer.dissection.outline:after{height:48px;right:50%;top:100%;width:1px}[data-anatomy-section]{counter-reset:type}.ph.speccer.dissection.outline.full.left,.ph.speccer.dissection.outline.full.right{width:8px}.ph.speccer.dissection.outline.full.bottom,.ph.speccer.dissection.outline.full.top{height:8px}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after,.ph.speccer.dissection.outline.full.top:after{align-items:center;background-color:#d4397a;border-radius:100%;color:#fff;content:attr(data-dissection-counter);display:flex;font-size:16px;height:1.5rem;justify-content:center;line-height:150%;position:absolute;width:1.5rem;z-index:100000}.ph.speccer.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before,.ph.speccer.dissection.outline.full.top:before{background-color:#d4397a;content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before{height:1px;top:50%;transform:translateY(-50%);width:49px}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.top:before{height:49px;left:50%;transform:translateX(-50%);width:1px}.ph.speccer.dissection.outline.enclose.left,.ph.speccer.dissection.outline.enclose.right{width:8px}.ph.speccer.dissection.outline.enclose.bottom,.ph.speccer.dissection.outline.enclose.top{height:8px}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after,.ph.speccer.dissection.outline.enclose.top:after{align-items:center;background-color:#d4397a;border-radius:100%;color:#fff;content:attr(data-dissection-counter);display:flex;font-size:16px;height:1.5rem;justify-content:center;line-height:150%;position:absolute;width:1.5rem;z-index:100000}.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before,.ph.speccer.dissection.outline.enclose.top:before{background-color:#d4397a;content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before{height:1px;top:50%;transform:translateY(-50%);width:49px}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.top:before{height:49px;left:50%;transform:translateX(-50%);width:1px}.ph.speccer.dissection.button-icon:after,.ph.speccer.dissection.button-outline:after{background-color:#d4397a;content:"";height:1px;position:absolute;top:50%;width:48px;z-index:99999}.ph.speccer.spacing:hover{border:1px solid #333}.ph.speccer.spacing.is-specced:hover~.speccer.margin{background-color:#fff76f}.ph.speccer.spacing.is-specced:hover~.speccer.padding{background-color:#db6fff;color:#fff}.ph.speccer.spacing.margin{background-color:#fff76f66;color:#333}.ph.speccer.spacing.padding{background-color:#db6fff66;color:#ff3aa8}.ph.speccer.spacing.margin.bottom:after,.ph.speccer.spacing.margin.top:after{border-bottom:1px solid #333;border-top:1px solid #333;content:"";height:100%;left:40%;position:absolute;width:9px}.ph.speccer.spacing.margin.bottom:before,.ph.speccer.spacing.margin.top:before{border-left:1px solid #333;content:"";height:100%;left:40%;margin-left:4px;position:absolute;width:0}.ph.speccer.spacing.margin.left:after,.ph.speccer.spacing.margin.right:after{border-left:1px solid #ff3aa8;border-right:1px solid #ff3aa8;content:"";height:9px;position:absolute;top:10%;width:100%}.ph.speccer.spacing.margin.left:before,.ph.speccer.spacing.margin.right:before{border-top:1px solid #ff3aa8;content:"";height:0;margin-top:4px;position:absolute;top:10%;width:100%}.ph.speccer.spacing.padding.bottom:after,.ph.speccer.spacing.padding.top:after{border-bottom:1px solid #ff3aa8;border-top:1px solid #ff3aa8;content:"";height:100%;left:40%;position:absolute;width:9px}.ph.speccer.spacing.padding.bottom:before,.ph.speccer.spacing.padding.top:before{border-left:1px solid #ff3aa8;content:"";height:100%;left:40%;margin-left:4px;position:absolute;width:0}.ph.speccer.spacing.padding.left:after,.ph.speccer.spacing.padding.right:after{border-left:1px solid #ff3aa8;border-right:1px solid #ff3aa8;content:"";height:9px;position:absolute;top:10%;width:100%}.ph.speccer.spacing.padding.left:before,.ph.speccer.spacing.padding.right:before{border-top:1px solid #ff3aa8;content:"";height:0;margin-top:4px;position:absolute;top:10%;width:100%}.ph.speccer.typography{background-color:#fff;color:#57575b;display:block;font-size:12px;line-height:140%;max-width:none;min-width:320px;padding:8px 24px;text-align:left;width:auto}.ph.speccer.typography,.ph.speccer.typography:hover{border:1px solid #e227b3}.ph.speccer.typography:after{background-color:#e227b3;content:"";display:block;position:absolute}.ph.speccer.typography.left:after,.ph.speccer.typography:after{height:1px;left:100%;top:50%;transform:translateY(-50%);width:48px}.ph.speccer.typography.right:after{height:1px;left:auto;right:100%;top:50%;transform:translateY(-50%);width:48px}.ph.speccer.typography.top:after{height:48px;left:50%;right:auto;top:100%;transform:translateX(-50%);width:1px}.ph.speccer.typography.bottom:after{bottom:100%;height:48px;left:50%;right:auto;top:auto;transform:translateX(-50%);width:1px}.ph.speccer.typography .speccer-styles{font-size:12px;line-height:140%;list-style:none;margin:0;padding:0 0 0 1rem;width:100%}.ph.speccer.typography .speccer-styles .property{color:#3f85f2;font-size:12px;font-weight:400;margin:0;padding:0;text-align:left}.ph.speccer.typography .speccer-styles>li{border:none;color:#e227b3;font-size:12px;font-weight:400;list-style:none;margin:0;padding:0;text-align:left}.ph.speccer.measure.width{border:1px solid red;border-bottom:none;color:red;height:8px}.ph.speccer.measure.width:after{content:attr(data-measure);position:absolute;top:calc(-100% - 10px)}.ph.speccer.measure.width.bottom{border:1px solid red;border-top:none;color:red}.ph.speccer.measure.width.bottom:after{content:attr(data-measure);position:absolute;top:calc(100% + 5px)}.ph.speccer.measure.width.top{border:1px solid red;border-bottom:none;color:red}.ph.speccer.measure.width.top:after{bottom:calc(100% + 5px);content:attr(data-measure);position:absolute}.ph.speccer.measure.height{border:1px solid red;border-right:none;color:red;width:8px}.ph.speccer.measure.height:after{content:attr(data-measure);left:calc(-100% - 25px);position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg)}.ph.speccer.measure.height.right{border:1px solid red;border-left:none;color:red}.ph.speccer.measure.height.right:after{content:attr(data-measure);left:100%;position:absolute;top:50%;transform:translateY(-50%) rotate(90deg)}

package/src/browser.js

@@ -0,0 +1,87 @@
+/* eslint no-console:0 */
+'use strict';
+
+import * as resize from './lib/resize';
+import * as spec from './spec';
+import * as measure from './measure';
+import * as dissect from './dissect';
+
+export const dom = speccer => {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', speccer);
+  } else {
+    // `DOMContentLoaded` already fired
+    speccer();
+  }
+};
+
+export const lazy = () => {
+  let _spec_observer = new IntersectionObserver((els, observer) => {
+    els.forEach(el => {
+      if (el.intersectionRatio > 0) {
+        spec.element(el.target);
+        observer.unobserve(el.target);
+      }
+    });
+  });
+  document.querySelectorAll('[data-speccer],[data-speccer] *:not(td)').forEach(el => {
+    _spec_observer.observe(el);
+  });
+  let _measure_observer = new IntersectionObserver((els, observer) => {
+    els.forEach(el => {
+      if (el.intersectionRatio > 0) {
+        measure.element(el.target);
+        observer.unobserve(el.target);
+      }
+    });
+  });
+  document.querySelectorAll('[data-speccer-measure]').forEach(el => {
+    _measure_observer.observe(el);
+  });
+  let _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 => {
+  window.speccer = speccer;
+};
+
+export const activate = speccer => {
+  const _script = document.currentScript;
+
+  if (_script) {
+    const _speccer_script_src = _script.getAttribute('src');
+    if (
+      _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/dissect.js

@@ -0,0 +1,204 @@
+/* eslint no-console:0 */
+'use strict';
+import * as styles from './lib/styles';
+import * as node from './lib/node';
+import * as classnames from './lib/classnames';
+import { SPECCER_LITERALS, SPECCER_TAGS_TO_AVOID } from './lib/constants';
+
+export const create = (e = '', t, n = 'span') => {
+  const _el = document.createElement(n);
+  const o = document.createTextNode(e);
+  if (t.indexOf('full') === -1 && t.indexOf('enclose') === -1) {
+    _el.appendChild(o);
+  } else if (t.indexOf('full') !== -1 || t.indexOf('enclose') !== -1) {
+    _el.setAttribute('data-dissection-counter', e);
+  }
+  classnames.set(_el, `ph speccer dissection ${t}`);
+  return _el;
+};
+
+export const element = (el, dissectIndex) => {
+  const _el_rect = el.getBoundingClientRect();
+  const _area = el.getAttribute('data-anatomy');
+  const _dissection_node = create(SPECCER_LITERALS[dissectIndex], _area);
+  const _is_table_correction_needed = SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0;
+
+  let _table_top = 0;
+  let _table_left = 0;
+
+  if (_is_table_correction_needed) {
+    const table = el.closest('table');
+    const tableStyle = styles.get(table.parentElement);
+    node.after(table, _dissection_node);
+    const _table_rect = table.getBoundingClientRect();
+    _table_top = _table_rect.top - parseInt(tableStyle.getPropertyValue('padding-top'), 10);
+    _table_left = _table_rect.left - parseInt(tableStyle.getPropertyValue('padding-left'), 10);
+  } else {
+    node.after(el, _dissection_node);
+  }
+
+  const _el_offset_left = el.offsetLeft;
+  const _el_offset_top = el.offsetTop;
+
+  const _dissection_node_rect = _dissection_node.getBoundingClientRect();
+  let _outline_left_position_left =
+    (_is_table_correction_needed ? _el_rect.left - _table_left : _el_offset_left) -
+    _dissection_node_rect.width -
+    48 +
+    'px';
+  let _outline_left_position_top =
+    (_is_table_correction_needed ? _el_rect.top - _table_top : _el_offset_top) +
+    _el_rect.height / 2 -
+    _dissection_node_rect.height / 2 +
+    'px';
+  let _outline_right_position_left =
+    (_is_table_correction_needed ? _el_rect.left - _table_left : _el_offset_left) + _el_rect.width + 48 + 'px';
+  let _outline_right_position_top =
+    (_is_table_correction_needed ? _el_rect.top - _table_top : _el_offset_top) +
+    _el_rect.height / 2 -
+    _dissection_node_rect.height / 2 +
+    'px';
+  let _outline_top_position_left =
+    (_is_table_correction_needed ? _el_rect.left - _table_left : _el_offset_left) +
+    _el_rect.width / 2 -
+    _dissection_node_rect.width / 2 +
+    'px';
+  let _outline_top_position_top =
+    (_is_table_correction_needed ? _el_rect.top - _table_top : _el_offset_top) -
+    _dissection_node_rect.height -
+    48 +
+    'px';
+  let _outline_bottom_position_left =
+    (_is_table_correction_needed ? _el_rect.left - _table_left : _el_offset_left) +
+    _el_rect.width / 2 -
+    _dissection_node_rect.width / 2 +
+    'px';
+  let _outline_bottom_position_top =
+    (_is_table_correction_needed ? _el_rect.top - _table_top : _el_offset_top) + _el_rect.height + 48 + 'px';
+
+  let _dissection_node_styles = {};
+  if (_area.indexOf('outline') !== -1) {
+    if (_area.indexOf('left') !== -1) {
+      if (_area.indexOf('full') !== -1) {
+        _dissection_node_styles = {
+          left: _el_offset_left - 8 + 'px',
+          top: _el_offset_top + -1 + 'px',
+          height: _el_rect.height + 'px'
+        };
+      } else if (_area.indexOf('enclose') !== -1) {
+        _dissection_node_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_node_styles = {
+          left: _outline_left_position_left,
+          top: _outline_left_position_top
+        };
+      }
+    } else if (_area.indexOf('right') !== -1) {
+      if (_area.indexOf('full') !== -1) {
+        _dissection_node_styles = {
+          left: _el_offset_left + _el_rect.width + 'px',
+          top: _el_offset_top + -1 + 'px',
+          height: _el_rect.height + 'px'
+        };
+      } else if (_area.indexOf('enclose') !== -1) {
+        _dissection_node_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_node_styles = {
+          left: _outline_right_position_left,
+          top: _outline_right_position_top
+        };
+      }
+    } else if (_area.indexOf('top') !== -1) {
+      if (_area.indexOf('full') !== -1) {
+        _dissection_node_styles = {
+          top: _el_offset_top + -8 + 'px',
+          left: _el_offset_left + -1 + 'px',
+          width: _el_rect.width + 'px'
+        };
+      } else if (_area.indexOf('enclose') !== -1) {
+        _dissection_node_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_node_styles = {
+          left: _outline_top_position_left,
+          top: _outline_top_position_top
+        };
+      }
+    } else if (_area.indexOf('bottom') !== -1) {
+      if (_area.indexOf('full') !== -1) {
+        _dissection_node_styles = {
+          top: _el_offset_top + _el_rect.height + 'px',
+          left: _el_offset_left + -1 + 'px',
+          width: _el_rect.width + 'px'
+        };
+      } else if (_area.indexOf('enclose') !== -1) {
+        _dissection_node_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_node_styles = {
+          left: _outline_bottom_position_left,
+          top: _outline_bottom_position_top
+        };
+      }
+    } else {
+      if (_area.indexOf('full') !== -1) {
+        _dissection_node_styles = {
+          left: _el_offset_left + _el_rect.width + 'px',
+          top: _el_offset_top + 'px',
+          height: _el_rect.height + 'px'
+        };
+      } else if (_area.indexOf('enclose') !== -1) {
+        _dissection_node_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_node_styles = {
+          left: _outline_left_position_left,
+          top: _outline_left_position_top
+        };
+      }
+    }
+  } else {
+    if (_area.indexOf('full') !== -1) {
+      _dissection_node_styles = {
+        left: _el_offset_left - 8 + 'px',
+        top: _el_offset_top + -1 + 'px',
+        height: _el_rect.height + 'px'
+      };
+    } else if (_area.indexOf('enclose') !== -1) {
+      _dissection_node_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_node_styles = {
+        left: _outline_left_position_left,
+        top: _outline_left_position_top
+      };
+    }
+  }
+  styles.add(_dissection_node, _dissection_node_styles);
+};