feat: 🎸 Add mark feature

✅ Closes: #22
phun-ky · Sep 21, 2023 · b21435c · b21435c
1 parent 33ce1b2
commit b21435c
Show file tree

Hide file tree

Showing 15 changed files with 217 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -22,6 +22,7 @@
       - [Subtle anatomy](#subtle-anatomy)
     - [Curly brackets](#curly-brackets)
     - [Element typogpraphy](#element-typogpraphy)
+    - [Mark elements](#mark-elements)
   - [Customization](#customization)
 
 ## About
@@ -245,6 +246,18 @@ In your component examples, use the following attribute.
 
 This will place a box to display typography information. Default is `left`.
 
+### Mark elements
+
+![Alt text](./assets/mark.png)
+
+This will mark the given elements.
+
+In your component examples, use the following attribute.
+
+```html
+<div data-speccer-mark …>…</div>
+```
+
 ## Customization
 
 ![Image of speccer dark mode](./assets/darkmode.png)

diff --git a/assets/mark.png b/assets/mark.png
diff --git a/dev/index.html b/dev/index.html
@@ -24,6 +24,12 @@
         grid-gap: 2rem 2rem;
       "
     >
+      <div data-speccer-mark style="grid-column: span 4" class="ph box"></div>
+      <div data-speccer-mark class="ph box"></div>
+      <div data-speccer-mark style="grid-column: span 2" class="ph box"></div>
+      <div data-speccer-mark class="ph box"></div>
+      <div data-speccer-mark class="ph box"></div>
+      <div data-speccer-mark class="ph box"></div>
       <div data-speccer-measure="width top" class="ph box"></div>
       <div
         data-speccer-measure="height right"

diff --git a/dev/mark.html b/dev/mark.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html class="ph" lang="en">
+  <head>
+    <title>@phun-ky/speccer</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-Language" content="no" />
+    <meta name="robots" content="none" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="application-name" content="@phun-ky/speccer" />
+    <style type="text/css"></style>
+  </head>
+  <body class="ph">
+    <div
+      data-anatomy-section
+      class="ph container"
+      style="
+        position: relative;
+        padding: 5rem;
+        display: grid;
+        grid-template-columns: repeat(5, 160px);
+        grid-template-rows: repeat(8, 160px);
+        grid-auto-flow: dense;
+        grid-gap: 2rem 2rem;
+      "
+    >
+      <div data-speccer-mark style="grid-column: span 4" class="ph box"></div>
+      <div data-speccer-mark class="ph box"></div>
+      <div data-speccer-mark style="grid-column: span 2" class="ph box"></div>
+      <div data-speccer-mark class="ph box"></div>
+      <div data-speccer-mark class="ph box"></div>
+      <div data-speccer-mark class="ph box"></div>
+    </div>
+
+    <link async href="/speccer.css" rel="stylesheet" type="text/css" />
+    <link
+      async
+      href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i&amp;display=swap&amp;subset=latin-ext"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      async
+      href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;display=swap&amp;subset=latin-ext"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <style type="text/css">
+      body.ph {
+        background-color: #f5f5f5;
+      }
+      .ph.container {
+        counter-reset: box;
+      }
+      .ph.box {
+        background-color: white;
+        min-height: 160px;
+        min-width: 160px;
+        margin: 0;
+        padding: 2rem;
+        border: 1pt solid rgba(51, 51, 51, 0.1);
+        color: #4d4d4d;
+        font-family: Lato, sans-serif;
+        font-size: 4rem;
+        box-sizing: border-box;
+        box-shadow: 0 0 10px rgba(51, 51, 51, 0.2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .ph.box:after {
+        counter-increment: box;
+        content: counter(box);
+      }
+    </style>
+
+    <script data-manual src="/speccer.js" type="text/javascript"></script>
+    <script>
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', window.speccer);
+      } else {
+        // `DOMContentLoaded` already fired
+        window.speccer();
+      }
+      const debounce = function (func, wait, immediate) {
+        var timeout;
+        return function () {
+          var context = this,
+            args = arguments;
+          var later = function () {
+            timeout = null;
+            if (!immediate) func.apply(context, args);
+          };
+          var callNow = immediate && !timeout;
+          clearTimeout(timeout);
+          timeout = setTimeout(later, wait);
+          if (callNow) func.apply(context, args);
+        };
+      };
+      const speccerEventFunc = debounce(() => {
+        window.speccer();
+      }, 100);
+
+      window.removeEventListener('resize', speccerEventFunc);
+      window.addEventListener('resize', speccerEventFunc);
+    </script>
+  </body>
+</html>
diff --git a/index.d.ts b/index.d.ts
@@ -8,30 +8,40 @@ declare global {
     }
 }
 
-declare const create$2: (text?: string | number, tag?: string) => HTMLElement;
-declare const element$3: (targetEl: HTMLElement) => Promise<void>;
+declare const create$3: (text?: string | number, tag?: string) => HTMLElement;
+declare const element$4: (targetEl: HTMLElement) => Promise<void>;
 
 declare namespace __spacing {
+  export {
+    create$3 as create,
+    element$4 as element,
+  };
+}
+
+declare const create$2: (textContent: string | undefined, area: string, n?: string) => HTMLElement;
+declare const element$3: (sectionEl: HTMLElement) => void;
+
+declare namespace __dissect {
   export {
     create$2 as create,
     element$3 as element,
   };
 }
 
-declare const create$1: (textContent: string | undefined, area: string, n?: string) => HTMLElement;
-declare const element$2: (sectionEl: HTMLElement) => void;
+declare const element$2: (targetEl: HTMLElement) => Promise<void>;
 
-declare namespace __dissect {
+declare namespace __measure {
   export {
-    create$1 as create,
     element$2 as element,
   };
 }
 
-declare const element$1: (targetEl: HTMLElement) => Promise<void>;
+declare const create$1: (n?: string) => HTMLElement;
+declare const element$1: (elementToMark: HTMLElement) => Promise<void>;
 
-declare namespace __measure {
+declare namespace __mark {
   export {
+    create$1 as create,
     element$1 as element,
   };
 }
@@ -69,8 +79,9 @@ declare namespace browser {
 declare const spacing: typeof __spacing;
 declare const dissect: typeof __dissect;
 declare const measure: typeof __measure;
+declare const mark: typeof __mark;
 declare const typography: typeof __typography;
 declare const modes: typeof browser;
 declare const speccer: () => void;
 
-export { speccer as default, dissect, measure, modes, spacing, typography };
+export { speccer as default, dissect, mark, measure, modes, spacing, typography };
diff --git a/speccer.css b/speccer.css
@@ -6,6 +6,8 @@
   --ph-speccer-color-text-light: #fff;
   --ph-speccer-color-text-dark: #333;
   --ph-speccer-color-contrast: #ff3aa8;
+  --ph-speccer-mark-background-color: rgba(255,58,168,0.2);
+  --ph-speccer-mark-border-color: #ff3aa8;
   --ph-speccer-spacing-color: var(--ph-speccer-color-contrast);
   --ph-speccer-measure-color: #f00;
   --ph-speccer-pin-color: var(--ph-speccer-color-contrast);
@@ -725,3 +727,10 @@ svg.ph .ph.path {
 .ph.speccer.measure.subtle.height.left {
   border-right: none;
 }
+.ph.speccer.mark {
+  background-color: var(--ph-speccer-mark-background-color);
+  border-color: var(--ph-speccer-mark-border-color);
+  border-width: 1px;
+  border-style: solid;
+  position: absolute;
+}
diff --git a/speccer.js b/speccer.js
diff --git a/speccer.js.map b/speccer.js.map
diff --git a/speccer.min.css b/speccer.min.css
diff --git a/src/helpers/dissect/styles.ts b/src/helpers/dissect/styles.ts
@@ -13,9 +13,9 @@ export const styles = async (
   area: string,
   targetEl: HTMLElement,
   dissectionEl: HTMLElement,
-  options: DissectStylesOptionsType
+  options?: DissectStylesOptionsType
 ) => {
-  const { isCurly } = options;
+  const { isCurly = false } = options || {};
   const SPECCER_PIN_SPACE = css.pinSpace(dissectionEl);
   const SPECCER_MEASURE_SIZE = css.measureSize(dissectionEl);
   const _positional_styles = await position.getRec(dissectionEl, targetEl);

diff --git a/src/index.ts b/src/index.ts
@@ -6,6 +6,7 @@ import * as node from './lib/node';
 import * as __spacing from './tasks/spec';
 import * as __dissect from './tasks/dissect';
 import * as __measure from './tasks/measure';
+import * as __mark from './tasks/mark';
 import * as __typography from './tasks/typography';
 import * as browser from './browser';
 
@@ -15,6 +16,8 @@ export const dissect = __dissect;
 
 export const measure = __measure;
 
+export const mark = __mark;
+
 export const typography = __typography;
 
 export const modes = browser;
@@ -34,7 +37,9 @@ const speccer = () => {
   const _els_to_be_dissected = document.querySelectorAll(
     '[data-anatomy-section]'
   );
+  const _els_to_be_marked = document.querySelectorAll('[data-speccer-mark]');
 
+  _els_to_be_marked.forEach(mark.element);
   _els_to_be_specced.forEach(spacing.element);
   _els_to_be_measured.forEach(measure.element);
   _els_to_be_typography_specced.forEach(typography.element);

diff --git a/src/styles/index.styl b/src/styles/index.styl
@@ -5,6 +5,8 @@ $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-mark-background-color = rgba(255, 58, 168, 0.2);
+$ph-speccer-mark-border-color = 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;
@@ -31,6 +33,8 @@ $ph-speccer-measure-size = 8px
   --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-mark-background-color $ph-speccer-mark-background-color;
+  --ph-speccer-mark-border-color $ph-speccer-mark-border-color;
   --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);
@@ -84,3 +88,4 @@ svg.ph .ph.path
 
 @require './anatomy.styl'
 @require './spacing.styl'
+@require './mark.styl'
diff --git a/src/styles/mark.styl b/src/styles/mark.styl
@@ -0,0 +1,6 @@
+.ph.speccer.mark
+  background-color var(--ph-speccer-mark-background-color)
+  border-color var(--ph-speccer-mark-border-color)
+  border-width 1px
+  border-style solid
+  position absolute
diff --git a/src/tasks/mark.ts b/src/tasks/mark.ts
@@ -0,0 +1,34 @@
+/* eslint no-console:0 */
+'use strict';
+
+import * as styles from '../lib/styles';
+import { cx, set } from '../lib/classnames';
+import { getRec } from 'lib/position';
+
+export const create = (n = 'span') => {
+  const markElement = document.createElement(n);
+  const classNames = cx('ph speccer mark');
+
+  set(markElement, classNames);
+
+  return markElement;
+};
+
+export const element = async (elementToMark: HTMLElement) => {
+  if (!elementToMark) return Promise.resolve();
+
+  const markElement = create();
+
+  document.body.appendChild(markElement);
+
+  const positionalStyles = await getRec(markElement, elementToMark);
+  const { left, top, height, width } = positionalStyles.absolute();
+  const markStyles = {
+    left: `${left}px`,
+    top: `${top}px`,
+    height: `${height}px`,
+    width: `${width}px`
+  };
+
+  await styles.add(markElement, markStyles);
+};
diff --git a/src/types/bezier.ts b/src/types/bezier.ts
@@ -1,6 +1,8 @@
-export type DissectStylesOptionsType = {
-  isCurly?: boolean;
-};
+export type DissectStylesOptionsType =
+  | Record<string, never>
+  | {
+      isCurly?: boolean;
+    };
 
 export type CurlyBezierPathOptions = {
   pos1: string;