@phun-ky/speccer 9.6.1 → 9.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/speccer.css +19 -16
- package/dist/speccer.d.ts +1 -1
- package/dist/speccer.esm.js +2 -2
- package/dist/speccer.esm.js.map +1 -1
- package/dist/speccer.js +2 -2
- package/dist/speccer.js.map +1 -1
- package/dist/speccer.min.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
[](http://commitizen.github.io/cz-cli/) [](http://makeapullrequest.com) [](http://semver.org/spec/v2.0.0.html)       [](https://codecov.io/gh/phun-ky/speccer)
|
|
5
|
+
[](http://commitizen.github.io/cz-cli/) [](http://makeapullrequest.com) [](http://semver.org/spec/v2.0.0.html)       [](https://codecov.io/gh/phun-ky/speccer) [](https://github.com/phun-ky/speccer/actions/workflows/check.yml)
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
package/dist/speccer.css
CHANGED
|
@@ -1,19 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
--ph-speccer-color
|
|
4
|
-
--ph-speccer-color-
|
|
5
|
-
--ph-speccer-color-
|
|
6
|
-
--ph-speccer-color-
|
|
7
|
-
--ph-speccer-color-
|
|
8
|
-
--ph-speccer-color-
|
|
9
|
-
--ph-speccer-
|
|
10
|
-
--ph-speccer-
|
|
1
|
+
|
|
2
|
+
.ph-speccer.speccer{
|
|
3
|
+
--ph-speccer-base-color: var(--accent-color, rgb(255, 58, 168));
|
|
4
|
+
--ph-speccer-color-padding: rgba(219, 111, 255, 0.4);
|
|
5
|
+
--ph-speccer-color-padding-hover: rgb(219, 111, 255);
|
|
6
|
+
--ph-speccer-color-margin: rgba(255, 247, 111, 0.4);
|
|
7
|
+
--ph-speccer-color-margin-hover: rgb(255, 247, 111);
|
|
8
|
+
--ph-speccer-color-text-light: rgb(255, 255, 255);
|
|
9
|
+
--ph-speccer-color-text-dark: rgb(51,51,51);
|
|
10
|
+
--ph-speccer-color-contrast: var(--ph-speccer-base-color);
|
|
11
|
+
--ph-speccer-opacity-2: 0.2;
|
|
12
|
+
--ph-speccer-mark-background-color: rgb(from var(--ph-speccer-base-color) r g b / var(--ph-speccer-opacity-2));;
|
|
13
|
+
--ph-speccer-mark-border-color: var(--ph-speccer-base-color);
|
|
11
14
|
--ph-speccer-spacing-color: var(--ph-speccer-color-contrast);
|
|
12
|
-
--ph-speccer-measure-color:
|
|
15
|
+
--ph-speccer-measure-color: rgb(255,0,0);
|
|
13
16
|
--ph-speccer-pin-color: var(--ph-speccer-color-contrast);
|
|
14
|
-
--ph-speccer-typography-background-color:
|
|
17
|
+
--ph-speccer-typography-background-color: rgb(255, 255,255);
|
|
15
18
|
--ph-speccer-typography-color-property: #0074e8;
|
|
16
|
-
--ph-speccer-typography-color-text:
|
|
19
|
+
--ph-speccer-typography-color-text: var(--ph-speccer-base-color);
|
|
17
20
|
--ph-speccer-typography-color-value: var(--ph-speccer-color-contrast);
|
|
18
21
|
--ph-speccer-depth-opacity-400: 0.4;
|
|
19
22
|
--ph-speccer-font-family: "Menlo for Powerline", "Menlo Regular for Powerline", "DejaVu Sans Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
|
@@ -24,8 +27,8 @@
|
|
|
24
27
|
--ph-speccer-line-width: 1px;
|
|
25
28
|
--ph-speccer-line-width-negative: -1px;
|
|
26
29
|
--ph-speccer-measure-size: 8px;
|
|
27
|
-
--ph-speccer-a11y-color-
|
|
28
|
-
--ph-speccer-a11y-landmark-color-background:
|
|
30
|
+
--ph-speccer-a11y-color-bakground: rgb(24, 104, 178);
|
|
31
|
+
--ph-speccer-a11y-landmark-color-background: rgb(126, 96, 197);
|
|
29
32
|
--ph-speccer-transition-default: all 2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
30
33
|
}
|
|
31
34
|
svg.ph-speccer,
|
|
@@ -61,7 +64,7 @@ svg.ph-speccer,
|
|
|
61
64
|
}
|
|
62
65
|
svg.ph-speccer .ph-speccer.path,
|
|
63
66
|
svg.ph-speccer .ph-speccer.circle {
|
|
64
|
-
color: var(--ph-speccer-color-contrast, #ff3aa8);
|
|
67
|
+
color: var(--ph-speccer-color-contrast, var(--accent-color, #ff3aa8));
|
|
65
68
|
}
|
|
66
69
|
.ph-speccer.speccer.dissection {
|
|
67
70
|
font-family: sans-serif;
|
package/dist/speccer.d.ts
CHANGED
|
@@ -36,7 +36,7 @@ declare global {
|
|
|
36
36
|
//# sourceMappingURL=global.d.ts.map
|
|
37
37
|
|
|
38
38
|
declare const grid: {
|
|
39
|
-
create: (targetElement: HTMLElement, styles: CSSStyleDeclaration) => HTMLDivElement
|
|
39
|
+
create: (targetElement: HTMLElement, styles: CSSStyleDeclaration) => Promise<HTMLDivElement>;
|
|
40
40
|
element: (targetElement: HTMLElement) => Promise<void>;
|
|
41
41
|
};
|
|
42
42
|
declare const spacing: {
|
package/dist/speccer.esm.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @phun-ky/speccer
|
|
3
3
|
* A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements
|
|
4
4
|
* @author Alexander Vassbotn Røyne-Helgesen <alexander@phun-ky.net>
|
|
5
|
-
* @version 9.6.
|
|
5
|
+
* @version 9.6.2
|
|
6
6
|
* @license
|
|
7
7
|
* Copyright (c) 2018 Alexander Vassbotn Røyne-Helgesen
|
|
8
8
|
*
|
|
@@ -24,5 +24,5 @@
|
|
|
24
24
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
25
25
|
* SOFTWARE.
|
|
26
26
|
*/
|
|
27
|
-
var t,e,n;!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(t||(t={})),function(t){t.Outline="outline",t.Parent="parent",t.Enclose="enclose",t.Subtle="subtle",t.Full="full",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top",t.SVG="svg",t.Curly="curly"}(e||(e={})),function(t){t.Width="width",t.Height="height",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(n||(n={}));const o=t=>t.split(" "),i=t=>o(t).includes(e.Left),s=t=>o(t).includes(e.Right),r=t=>o(t).includes(e.Bottom),a=t=>o(t).includes(e.Full),c=t=>o(t).includes(e.Enclose),p=t=>o(t).includes(e.Subtle),l=t=>o(t).includes(e.Parent),d=t=>t.includes(e.Curly)&&t.includes(e.Full),h=t=>"string"==typeof t,f=t=>!h(t),u=t=>"number"==typeof t,m=t=>!u(t),g=t=>void 0===t,y=(t,e,n="noop")=>{t&&(!e||e&&!e.length||e.trim().split(" ").filter((t=>t!==n)).filter((t=>""!==t)).forEach((e=>t.classList.add(e.trim()))))},w=(t,e)=>t?!e&&f(t)?Object.keys(t).filter((e=>t[e])).join(" ").trim():`${t.trim()} ${e?Object.keys(e).filter((t=>e[t])).join(" "):""}`.trim():"",x=(t="",e,n="",o="span")=>{const i=document.createElement(o),s=document.createTextNode(t),r={};null!==e&&""!==e&&(r[e]=!0),!l(e)||a(e)||d(e)||p(e)||(r.svg=!0),!a(e)&&!c(e)||a(e)&&d(e)?i.appendChild(s):(a(e)||c(e))&&i.setAttribute("data-dissection-counter",t);const h=w("ph-speccer speccer dissection",r);return y(i,h),i.setAttribute("id",n),i},b=()=>"_"+Math.random().toString(36).substring(2,11),$=()=>new Promise(requestAnimationFrame),E=t=>t.top,A=t=>t.left+t.width,k=t=>t.top+t.height,C=t=>t.left,S=t=>t.left+t.width/2,v=t=>t.top+t.height/2,L={center:t=>({x:S(t),y:v(t)}),top:t=>({x:S(t),y:E(t)}),right:t=>({x:A(t),y:v(t)}),bottom:t=>({x:S(t),y:k(t)}),left:t=>({x:C(t),y:v(t)}),"right-top":t=>({x:A(t),y:E(t)}),"right-bottom":t=>({x:A(t),y:k(t)}),"left-top":t=>({x:C(t),y:E(t)}),"left-bottom":t=>({x:C(t),y:k(t)}),"top-left":t=>({x:C(t),y:E(t)}),"top-right":t=>({x:A(t),y:E(t)}),"bottom-left":t=>({x:C(t),y:k(t)}),"bottom-right":t=>({x:A(t),y:k(t)}),"top-center":t=>({x:S(t),y:E(t)}),"right-center":t=>({x:A(t),y:v(t)}),"bottom-center":t=>({x:S(t),y:k(t)}),"left-center":t=>({x:C(t),y:v(t)})},P=async(t,e="center")=>{if(!e)throw Error("No position given");if(f(e))throw Error("The position given is not the required type: pos: "+typeof e);const n=["center","left","right","top","bottom","right-top","right-bottom","left-top","left-bottom","top-left","top-right","bottom-left","bottom-right","top-center","right-center","bottom-center","left-center"];if(!n.includes(e))throw Error(`The position given does not match allowed positions to use! Valid positions are: ${n.join(", ")}`);await $();const o=t.getBoundingClientRect();return L[e](o)},R=async(t,e)=>{var n;if(!(!t||!e||h(e)||u(e)||(n=e,"boolean"==typeof n)||Array.isArray(e)&&!e.length||!Object.keys(e).length&&e.constructor===Object))if(await $(),Array.isArray(e))for(const n of e)t.style[n.key]=n.value;else for(const n of Object.keys(e))t.style[n]=e[n]},B=async t=>(await $(),getComputedStyle(t,null));class T{#t;el;circle;radius;areas;constructor(t,e,n){this.#e(t,e,n)}#e(t,e,n){if(!t||!e||!n)throw new Error("Missing inputs el or radius or areas");if(!document.body.contains(t))throw new Error("el is not in the DOM");if(this.el=t,this.radius=e,this.areas=n,this.#t=document.getElementById("ph-speccer-svg"),!this.#t)throw new Error("Missing required SVG element to draw circles. Please see the documentation");const o=document.body,i=document.documentElement,s=Math.max(o.scrollHeight,o.offsetHeight,i.clientHeight,i.scrollHeight,i.offsetHeight);R(this.#t,{height:`${s}px`}),this.draw()}async draw(){const t=`ph_draw-circle-${b()}`;this.circle=document.createElementNS("http://www.w3.org/2000/svg","circle");const e=this.el.getAttribute("id")||b();if(this.el.setAttribute("id",e),this.circle.setAttribute("id",t),this.circle.setAttribute("data-el",e),this.circle.classList.add("ph-speccer"),this.circle.classList.add("speccer"),this.circle.classList.add("circle"),!this.#t)throw new Error("No parentNode found for circle");this.#t.appendChild(this.circle);let n="top";i(this.areas)&&(n="left"),s(this.areas)&&(n="right"),r(this.areas)&&(n="bottom");const{x:o,y:a}=await P(this.el,n);this.circle.setAttribute("r",this.radius+""),this.circle.setAttribute("cx",Math.round(o)+""),this.circle.setAttribute("cy",Math.round(a)+""),this.circle.setAttribute("fill","currentColor")}}window.DrawCircle=T;const H=async(t,e,n="center",o="center")=>{if(!t||!e)throw Error("No element given");const{x:i,y:s}=await P(t,n),{x:r,y:a}=await P(e,o);return{x1:i,y1:s,x2:r,y2:a}},N=(t,e)=>{const{x1:n,x2:o,y1:i,y2:s}=t,{direct:r=!1,firstSet:a=!1,direction:c}=e;let p={x:n+(o-n)/2,y:i},l={x:n+(o-n)/2,y:s};return r&&(a?"west"===c?(p={x:n-32,y:i-8},l={x:o+32,y:s}):"south"===c?(p={x:n-8,y:i+32},l={x:o,y:s-32}):"east"===c?(p={x:n+32,y:i-8},l={x:o-32,y:s}):(p={x:n-8,y:i-32},l={x:o,y:s+32}):"west"===c?(p={x:n-32,y:i+8},l={x:o+32,y:s}):"south"===c?(p={x:n+8,y:i+32},l={x:o,y:s-32}):"east"===c?(p={x:n+32,y:i+8},l={x:o-32,y:s}):(p={x:n+8,y:i-32},l={x:o,y:s+32})),{firstPoint:{x:n,y:i},firstControl:p,lastPoint:{x:o,y:s},lastControl:l}},I=async(t,e,n)=>{const{pos1:o,pos2:i,firstSet:s=!1,direction:r}=n,{x1:a,y1:c,x2:p,y2:l}=await H(t,e,o,i);let d=0,h=0;"north"===r?h=8:"west"===r?d=8:"east"===r?d=-8:"south"===r&&(h=-8);const{firstPoint:f,firstControl:u,lastControl:m,lastPoint:g}=N({x1:a+0,x2:p+d,y1:c+0+document.documentElement.scrollTop,y2:l+h+document.documentElement.scrollTop},{direct:!0,firstSet:s,direction:r});return`M ${f.x} ${f.y}C ${u.x} ${u.y}, ${m.x} ${m.y}, ${g.x} ${g.y}`},M=async({start:t,stop:e,crude:n=!1})=>{const{x1:o,y1:i,x2:s,y2:r}=await H(t,e),a=((t,e,n,o,i=!0)=>{if(g(t)||g(e)||g(n)||g(o))throw new SyntaxError("Missing input for `angle`");if(m(t)||m(e)||m(n)||m(o))throw TypeError(`Parameters for \`angle\` do not have the required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof n} ${typeof o}`);const s=o-e,r=n-t;let a=Math.atan2(s,r);return a*=180/Math.PI,i&&a<0&&(a+=360),a})(o,i,s,r);return n?(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=45&&t<=135?"south":t>135&&t<=225?"west":t>225&&t<=315?"north":"east"})(a):(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=0&&t<=22.5?"east":t>=22.5&&t<=67.5?"south-east":t>=67.5&&t<=112.5?"south":t>=112.5&&t<=157.5?"south-west":t>=157.5&&t<=202.5?"west":t>=202.5&&t<=247.5?"north-west":t>=247.5&&t<=292.5?"north":t>=292.5&&t<=337.5?"north-east":"east"})(a)};class q{#t;#n;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#e(t,e)}#e(t,e){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.#t=document.getElementById("ph-speccer-svg"),this.#n=document.getElementById("ph-speccer-path"),!this.#n||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");const n=document.body,o=document.documentElement,i=Math.max(n.scrollHeight,n.offsetHeight,o.clientHeight,o.scrollHeight,o.offsetHeight);R(this.#t,{height:`${i}px`}),this.connect()}connect(){this.draw(this.#n)}#o(t){if(!t)throw new Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${b()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||b();return this.startElement.setAttribute("id",o),n.setAttribute("data-start-el",o),n.setAttribute("id",e),n.classList.remove("original"),n.classList.add("speccer"),n}async draw(t){if(!t)throw new Error("No path given to draw!");const e=this.#o(t),n=this.#o(t);if(!t.parentNode)throw new Error("No parentNode found for path");this.firstPathElement=t.parentNode.insertBefore(e,t.nextSibling),this.secondPathElement=t.parentNode.insertBefore(n,t.nextSibling);const o=await M({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:i,path1pos2:s,path2pos1:r,path2pos2:a}=(t=>{let e,n,o,i;switch(t){case"east":e="right-top",n="left-center",o="right-bottom",i="left-center";break;case"south":e="bottom-left",n="top-center",o="bottom-right",i="top-center";break;case"west":e="left-top",n="right-center",o="left-bottom",i="right-center";break;default:e="top-left",n="bottom-center",o="top-right",i="bottom-center"}return{path1pos1:e,path1pos2:n,path2pos1:o,path2pos2:i}})(o),c=await I(this.startElement,this.stopElement,{pos1:i,pos2:s,firstSet:!0,direction:o}),p=await I(this.startElement,this.stopElement,{pos1:r,pos2:a,direction:o});this.firstPathElement.setAttribute("data-direction",o),this.firstPathElement.setAttribute("data-pos1",i),this.firstPathElement.setAttribute("data-pos2",s),this.firstPathElement.setAttribute("d",c),this.secondPathElement.setAttribute("data-direction",o),this.secondPathElement.setAttribute("data-pos1",r),this.secondPathElement.setAttribute("data-pos2",a),this.secondPathElement.setAttribute("d",p)}}window.DrawSVGCurlyBracket=q;class O{#t;#n;startElement;stopElement;line;constructor(t,e){this.#e(t,e)}#e(t,e){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.#t=document.getElementById("ph-speccer-svg"),this.#n=document.getElementById("ph-speccer-path"),!this.#n||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");const n=document.body,o=document.documentElement,i=Math.max(n.scrollHeight,n.offsetHeight,o.clientHeight,o.scrollHeight,o.offsetHeight);R(this.#t,{height:`${i}px`}),this.connect()}connect(){this.draw(this.#n)}async draw(t){if(!t)throw new Error("No path given to draw!");const e=`ph_draw_path-path-${b()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||b();if(this.startElement.setAttribute("id",o),n.setAttribute("id",e),n.setAttribute("data-start-el",o),n.classList.remove("original"),n.classList.add("speccer"),!t.parentNode)throw new Error("No parentNode found for path");this.line=t.parentNode.insertBefore(n,t.nextSibling);const i=await M({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:s,pos2:r}=(t=>{let e,n;switch(t){case"east":e="right",n="left";break;case"south":e="bottom",n="top";break;case"west":e="left",n="right";break;default:e="top",n="bottom"}return{pos1:e,pos2:n}})(i),a=await(async(t,e,n)=>{const{pos1:o,pos2:i}=n,{x1:s,y1:r,x2:a,y2:c}=await H(t,e,o,i),{firstPoint:p,firstControl:l,lastControl:d,lastPoint:h}=N({x1:s,x2:a,y1:r,y2:c},{direction:""});return`M ${p.x} ${p.y}C ${l.x} ${l.y}, ${d.x} ${d.y}, ${h.x} ${h.y}`})(this.startElement,this.stopElement,{pos1:s,pos2:r});this.line.setAttribute("data-direction",i),this.line.setAttribute("data-pos1",s),this.line.setAttribute("data-pos2",r),this.line.setAttribute("d",a)}}window.DrawSVGLine=O;const z=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],V=t=>parseInt(t,10),W=t=>t.includes("Top")?t.replace("Top"," top"):t.includes("Right")?t.replace("Right"," right"):t.includes("Bottom")?t.replace("Bottom"," bottom"):t.includes("Left")?t.replace("Left"," left"):"",j=t=>V(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,F=async(t,e,n)=>{await $();return getComputedStyle(t)[e]===n},D=async(t,e,n)=>{if(!t.parentElement)return null;return await F(t.parentElement,e,n)?t.parentElement:await D(t.parentElement,e,n)},G=(t,e,n)=>t-e.width/2+n.width/2,_=(t,e,n)=>t-e.height/2+n.height/2,X=async t=>{await $();let e=t.getBoundingClientRect(),n=e.top+window.scrollY;const o=e.left+window.scrollX,i=await(async t=>await D(t,"position","sticky"))(t),s=await(async t=>await F(t,"position","sticky"))(t);if(s){const o=t.style.position;await $(),t.style.position="relative",await $(),e=t.getBoundingClientRect(),n=e.top,t.style.position=o}else if(i){const o=i.style.position;await $(),i.style.position="relative",await $(),e=t.getBoundingClientRect(),n=e.top,i.style.position=o}return{height:e.height,width:e.width,top:n,left:o}},Y=async(t,e)=>{await $();const n=t.getBoundingClientRect(),o=await X(e),i=await(async(t,e)=>{await $();const n=t.getBoundingClientRect(),o=e.getBoundingClientRect(),i=o.top+window.scrollY,s=o.left+window.scrollX;return{height:o.height,width:o.width,top:_(i,n,o),left:G(s,n,o)}})(t,e),s=o.height,r=o.width,a=n.height,c=n.width;return{absolute:()=>({top:o.top,left:o.left,height:s,width:r}),toTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:s,width:r}),fromTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top-e-n,left:t?i.left:o.left,height:s,width:r}),toBottom:({center:t=!1,sourceHeight:e=a,targetHeight:n=s,modifier:c=0}={})=>({top:o.top+n-(e+c),left:t?i.left:o.left,height:s,width:r}),fromBottom:({center:t=!1,targetHeight:e=s,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:s,width:r}),toLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:s,width:r}),fromLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left-e-n,height:s,width:r}),toRight:({center:t=!1,sourceWidth:e=c,targetWidth:n=r,modifier:a=0}={})=>({top:t?i.top:o.top,left:o.left+n-(e+a),height:s,width:r}),fromRight:({center:t=!1,targetWidth:e=r,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:s,width:r})}},K=async(t,e,n,o,d)=>{await $();const{isCurly:h=!1}=d||{},f=j(n),u=V(getComputedStyle(n).getPropertyValue("--ph-speccer-measure-size"))||8;const m=await Y(n,e);if(c(t)){const{left:t,top:e,height:n,width:o}=m.absolute();return{left:`${t}px`,top:`${e}px`,height:`${n}px`,width:`${o}px`}}if(l(t)&&!a(t)&&!h&&!p(t)){if(s(t)){const{top:t}=m.fromRight({center:!0});await $();const{left:e,width:n}=o.getBoundingClientRect();return{left:`${e+n+f}px`,top:`${t}px`}}if(r(t)){const{left:t}=m.toBottom({center:!0});await $();const{top:e,height:n}=o.getBoundingClientRect();return{left:`${t}px`,top:`${e+n+f}px`}}if(i(t)){const{top:t}=m.fromLeft({center:!0});await $();const{left:e}=o.getBoundingClientRect();return{left:e-1.5*f+"px",top:`${t}px`}}const{left:e}=m.fromTop({center:!0});await $();const{top:n}=o.getBoundingClientRect();return{left:`${e}px`,top:n-1.5*f+"px"}}if(i(t)){if(a(t)&&!h){const{left:t,top:e,height:n}=m.fromLeft({sourceWidth:u});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:e,top:n}=m.fromLeft({center:!0,modifier:h?f/1.5:f});return{left:`${e}px`,top:`${n}px`}}if(s(t)){if(a(t)&&!h){const{left:t,top:e,height:n}=m.fromRight({center:!1});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:e,top:n}=m.fromRight({center:!0,modifier:h?f/1.5:f});return{left:`${e}px`,top:`${n}px`}}if(r(t)){if(a(t)&&!h){const{left:t,top:e,width:n}=m.fromBottom({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:e,top:n}=m.fromBottom({center:!0,modifier:h?f/1.5:f});return{left:`${e}px`,top:`${n}px`}}if(a(t)&&!h){const{left:t,top:e,width:n}=m.fromTop({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:g,top:y}=m.fromTop({center:!0,modifier:h?f/1.5:f});return{left:`${g}px`,top:`${y}px`}},U=async(t,n,o,i="")=>{if(!t)return;const s=t.getAttribute("data-anatomy")||i;if(!s||""===s||!s.includes(e.Outline))return;const r=`speccer-${h=s,h.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").trim().toLowerCase().replace(/[^a-z0-9 -]/g,"").replace(/\s+/g," ").replace(/(?:^\w|[A-Z]|\b\w)/g,((t,e)=>0===e?t.toLowerCase():t.toUpperCase())).replace(/\s+/g,"")}-${t.getAttribute("id")||b()}`;var h;const f=x(n,s,r);t.setAttribute("data-speccer-element-id",r),document.body.appendChild(f);const u=await K(s,t,f,o,{isCurly:d(s)});await R(f,u);const m=l(s)&&!c(s)&&!a(s)&&!p(s);return m||s.includes(e.SVG)&&!d(s)?(new O(t,f),m&&new T(t,5,s)):d(s)&&new q(t,f),r};let Z=0;const J=async t=>{if(!t)return;const e=t.querySelectorAll("[data-anatomy]");e&&0!==e.length&&e.forEach((async(e,n)=>{const o=(t=>{const e=window.SPECCER_LITERALS||z;let n=e[t];return 0===t&&(Z=0),n||(n=`${e[Z]}${e[Z].toLowerCase()}`,Z++),n})(n);await U(e,o,t)}))},Q=(t="",e="",n="span")=>{const o=document.createElement(n);return o.setAttribute("title",`${t}px`),o.setAttribute("data-measure",`${parseInt(`${t}`,10)}px`),y(o,`ph-speccer speccer measure ${e}`),o},tt=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-measure");if(""===e||!e)return;const i=await B(t);if("none"===i.display||"0"===i.opacity||"hidden"===i.visibility)return;await $();const a=t.getBoundingClientRect();if(o(e).includes(n.Width))if(r(e)){const n=Q(a.width,e);document.body.appendChild(n);const o=await Y(n,t),{left:i,top:s,width:r}=o.fromBottom({center:!1});await R(n,{left:`${i}px`,top:`${s}px`,width:`${r}px`})}else{const n=Q(a.width,e);document.body.appendChild(n);const o=await Y(n,t),{left:i,top:s,width:r}=o.fromTop({center:!1,modifier:-8});await R(n,{left:`${i}px`,top:`${s}px`,width:`${r}px`})}else if((t=>o(t).includes(n.Height))(e))if(s(e)){const n=Q(a.height,e);document.body.appendChild(n);const o=await Y(n,t),{left:i,top:s,height:r}=o.fromRight({center:!1});await R(n,{left:`${i}px`,top:`${s}px`,height:`${r}px`})}else{const n=Q(a.height,e);document.body.appendChild(n);const o=await Y(n,t),{left:i,top:s,height:r}=o.fromLeft({center:!1,modifier:-8});await R(n,{left:`${i}px`,top:`${s}px`,height:`${r}px`})}},et=async(t,e,n,o)=>{await $();const i=o.getBoundingClientRect(),s=await X(o);"marginTop"===t&&R(n,{height:`${e}px`,width:i.width+"px",left:s.left+"px",top:s.top-e+"px"}),"marginRight"===t&&R(n,{height:i.height+"px",width:`${e}px`,left:s.left+parseInt(i.width+"",10)+"px",top:s.top+"px"}),"marginBottom"===t&&R(n,{height:`${e}px`,width:i.width+"px",left:s.left+"px",top:s.top+parseInt(i.height+"",10)+"px"}),"marginLeft"===t&&R(n,{height:i.height+"px",width:`${e}px`,left:s.left-e+"px",top:s.top+"px"}),"paddingTop"===t&&R(n,{height:`${e}px`,width:i.width+"px",left:s.left+"px",top:s.top+"px"}),"paddingBottom"===t&&R(n,{height:`${e}px`,width:i.width+"px",left:s.left+"px",top:s.top+(parseInt(i.height+"",10)-e)+"px"}),"paddingRight"===t&&R(n,{height:i.height+"px",width:`${e}px`,left:s.left+(parseInt(i.width+"",10)-e)+"px",top:s.top+"px"}),"paddingLeft"===t&&R(n,{height:i.height+"px",width:`${e}px`,left:s.left+"px",top:s.top+"px"})},nt=(t="",e="span")=>{const n=document.createElement(e),o=document.createTextNode(t+"");return n.appendChild(o),n.setAttribute("title",`${t}px`),y(n,"ph-speccer speccer spacing"),n},ot=async t=>{if(!t)return;const e=await B(t);if("none"===e.display||"0"===e.opacity||"hidden"===e.visibility)return;const n=(t=>{const{marginTop:e,marginBottom:n,marginLeft:o,marginRight:i,paddingTop:s,paddingBottom:r,paddingLeft:a,paddingRight:c}=t;return{marginTop:e,marginBottom:n,marginLeft:o,marginRight:i,paddingTop:s,paddingBottom:r,paddingLeft:a,paddingRight:c}})(e),o=Object.keys(n).filter((t=>"0px"!==n[t]));if(o.length)for(const e of o){const o=V(n[e]),i=nt(o),s=W(e);y(i,s),document.body.appendChild(i),t.classList.add("is-specced"),await et(e,o,i,t)}},it=t=>{const e=()=>((t,e,n=!1)=>{let o;return function(i,...s){const r=n&&!o;o&&clearTimeout(o),o=setTimeout((function(){o=null,n||t.apply(i,s)}),e),r&&t.apply(i,s)}})((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},st=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},rt=()=>{const t=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(ot(n.target),e.unobserve(n.target))}));for(const e of document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)"))t.observe(e);const e=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(tt(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll("[data-speccer-measure]"))e.observe(t);const n=new IntersectionObserver((async(t,e)=>{for(const n of t)n.intersectionRatio>0&&(await J(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll("[data-anatomy-section]"))n.observe(t)},at=t=>{window.speccer=t},ct=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");n?.includes("speccer.js")&&(e.hasAttribute("data-manual")?at(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?st(t):e.hasAttribute("data-lazy")?rt():st(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||it(t))}},pt=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],lt=["escape","esc","enter","return","⏎","␛"],dt=async(t,e,n)=>{await $();const o=j(n),i=await Y(n,e);if("tabstops"===t){let{left:t,top:e}=i.fromTop();return t-=32,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("landmark"===t){let{left:t,top:e}=i.fromTop();return t-=16,e-=16,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("region"===t){const{left:t,top:e,height:n,width:o}=i.fromTop();return{height:`${n}px`,width:`${o}px`,left:`${t}px`,top:`${e}px`}}if("shortcut"===t){const{left:t,top:e}=i.fromBottom();return{left:`${t}px`,top:`${e}px`}}const{left:s,top:r}=i.fromTop({center:!0,modifier:o});return{left:s-32+"px",top:r-32+"px"}},ht=async(t,e,n)=>{if(!t||!t.checkVisibility())return;const o=((t="tabstops",e,n="span")=>{const o=document.createElement(n),i=w("ph-speccer speccer a11y",{tabstops:"tabstops"===t,landmark:"landmark"===t,region:"region"===t});if("landmark"===t&&e){const t=document.createTextNode(e+"");o.appendChild(t)}return y(o,i),o})(n,e);if("landmark"===n){o.setAttribute("data-speccer-nodename",t.nodeName);const e=t.role||`semantic role: ${t.nodeName.toLowerCase()}`,n=t.getAttribute("aria-label")||"unnamed";o.setAttribute("title",`${n}: ${e}`)}document.body.appendChild(o);const i=await dt(n,t,o);await R(o,i)},ft=async(t,e)=>{const n=e.split(/\s\+\s/).map((t=>t.trim())),o=document.createElement("div");o.classList.add("ph-speccer"),o.classList.add("speccer"),o.classList.add("a11y"),o.classList.add("shortcut-holder");for(const t of n){const e=document.createElement("kbd"),n=document.createTextNode(t);e.classList.add("ph-speccer"),e.classList.add("speccer"),e.classList.add("a11y"),e.classList.add("shortcut"),pt.includes(t.toLowerCase())&&e.classList.add("modifier"),lt.includes(t.toLowerCase())&&e.classList.add("physical"),e.appendChild(n),o.appendChild(e)}document.body.appendChild(o);const i=await dt("shortcut",t,o);await R(o,i)},ut=(t,e)=>{const n=t.getBoundingClientRect(),o=e.gridTemplateColumns,i=e.gridTemplate,s=parseInt(e.columnGap),r=e.padding,a=document.createElement("div");document.documentElement.style.setProperty("--ph-speccer-grid-gap-original",`${s}px`),document.documentElement.style.setProperty("--ph-speccer-grid-gap",`${s<24?24:s}px`),s<24&&a.classList.add("speccer-small-grid"),a.classList.add("ph-speccer"),a.classList.add("speccer"),a.classList.add("speccer-grid-container"),a.style.height=n.height+64+"px",a.style.width=n.width+"px",a.style.left=n.left+"px",a.style.top=n.top-32+"px",a.style.padding=r,a.style.gridTemplate=i,a.style.gridTemplateRows="repeat(1, 100%)";const c=o.split(" ").length;for(let t=0;t<c;t++){const t=document.createElement("div");t.classList.add("ph-speccer"),t.classList.add("speccer"),t.classList.add("speccer-grid-item"),a.appendChild(t)}return a},mt=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-grid");await $();const n=window.getComputedStyle(t);if("grid"===e&&("grid"===n.display||-1!==n.display.indexOf("grid"))){const e=ut(t,n);document.body.appendChild(e)}},gt=(t="span")=>{const e=document.createElement(t),n=w("ph-speccer speccer mark");return y(e,n),e},yt=async t=>{if(!t)return;const e=gt();document.body.appendChild(e);const n=await Y(e,t),{left:o,top:i,height:s,width:r}=n.absolute(),a={left:`${o}px`,top:`${i}px`,height:`${s}px`,width:`${r}px`};await R(e,a)},wt=(t,e=3)=>parseFloat(t+"").toFixed(e),xt=(t,e)=>{const n=document.createElement("div"),o={};null!==e&&""!==e&&e.split(" ").forEach((t=>{o[t]=!0}));const i=w("ph-speccer speccer typography",o);return n.innerHTML=t,y(n,i),n},bt=async e=>{if(!e)return;const n=e.getAttribute("data-speccer-typography"),o=await B(e);if("none"===o.display||"0"===o.opacity||"hidden"===o.visibility)return;const i=n?.includes("syntax");e.classList.add("is-specced");const s=await(async(t,e=!1)=>{const n=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:s,fontVariationSettings:r,fontWeight:a}=t;return{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:s,fontVariationSettings:r,fontWeight:a}})(await B(t));if(e){const t=n.fontFamily.split(",").map((t=>-1!==t.indexOf("'")?`<span class="token string">${t}</span>`:t)).join('<span class="token punctuation">, </span>'),e=`<span class="token number">${parseInt(n.fontSize,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.fontSize,10)/16}</span><span class="token unit">rem</span>`,o=-1!==n.letterSpacing.indexOf("px")?`<span class="token number">${parseInt(n.letterSpacing,10)}</span><span class="token unit">px</span>`:n.letterSpacing,i="normal"!==n.lineHeight?`<span class="token number">${parseInt(n.lineHeight,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.lineHeight,10)/16}</span><span class="token unit">rem</span>`:"normal";return`\n<pre class="language-css" tabindex="-1"><code class="language-css"><span class="token selector"><span class="token class">.typography</span></span> <span class="token punctuation">{</span>\n <span class="token property">font-family</span><span class="token punctuation">:</span> ${t}<span class="token punctuation">;</span>\n <span class="token property">font-size</span><span class="token punctuation">:</span> ${e}<span class="token punctuation">;</span>\n <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">${n.fontWeight}</span><span class="token punctuation">;</span>\n <span class="token property">font-variation-settings</span><span class="token punctuation">:</span> ${n.fontVariationSettings}<span class="token punctuation">;</span>\n <span class="token property">line-height</span><span class="token punctuation">:</span> ${i}<span class="token punctuation">;</span>\n <span class="token property">letter-spacing</span><span class="token punctuation">:</span> ${o}<span class="token punctuation">;</span>\n <span class="token property">font-style</span><span class="token punctuation">:</span> ${n.fontStyle}<span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>`}return`\ntypography: {<ul class="speccer-styles"> <li><span class="property">font-family:</span> ${n.fontFamily};</li> <li><span class="property">font-size:</span> ${n.fontSize} / ${parseInt(n.fontSize,10)/16}rem;</li> <li><span class="property">font-weight:</span> ${n.fontWeight};</li> <li><span class="property">font-variation-settings:</span> ${n.fontVariationSettings};</li> <li><span class="property">line-height:</span> ${"normal"!==n.lineHeight?`${parseInt(n.lineHeight,10)}px / ${parseInt(n.lineHeight,10)/16}rem`:"normal"};</li> <li><span class="property">letter-spacing:</span> ${n.letterSpacing};</li> <li><span class="property">font-style:</span> ${n.fontStyle};</li></ul>}`})(e,i),r=xt(s,n);document.body.appendChild(r);const a=await(async(e,n,o)=>{const i=n.getBoundingClientRect(),s=j(o),r=o.getBoundingClientRect(),a=await X(n),c=a.left-r.width-s+"px",p=wt(_(a.top,r,i))+"px",l=a.left+i.width+s+"px",d=wt(_(a.top,r,i))+"px",h=wt(G(a.left,r,i))+"px",f=a.top-r.height-s+"px",u=wt(G(a.left,r,i))+"px",m=a.top+i.height+s+"px";let g={left:c,top:p};return e?.includes(t.Right)?g={left:l,top:d}:e?.includes(t.Top)?g={left:h,top:f}:e?.includes(t.Bottom)&&(g={left:u,top:m}),g})(n,e,r);R(r,a)},$t={create:ut,element:mt},Et={create:nt,element:ot},At={create:x,element:J,dissect:U},kt={create:Q,element:tt},Ct={create:gt,element:yt},St={create:xt,element:bt},vt={dom:st,lazy:rt,manual:at,activate:ct},Lt=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".ph-speccer.speccer");const t=document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)"),e=document.querySelectorAll("[data-speccer-measure]"),n=document.querySelectorAll("[data-speccer-typography]"),o=document.querySelectorAll("[data-anatomy-section]"),i=document.querySelectorAll("[data-speccer-mark]"),s=document.querySelectorAll('[data-speccer-grid="grid"]');for(const t of i)yt(t);for(const t of s)mt(t);for(const e of t)ot(e);for(const t of e)tt(t);for(const t of n)bt(t);for(const t of o)J(t);(()=>{const t=document.querySelectorAll("[data-speccer-a11y-tabstops]"),e=document.querySelectorAll("[data-speccer-a11y-landmark]"),n=document.querySelectorAll("[data-speccer-a11y-shortcut]");if(n.length)for(const t of n){const e=t.getAttribute("data-speccer-a11y-shortcut");e&&""!==e&&ft(t,e)}if(t.length)for(const e of t){const t=e.querySelectorAll("\n a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n textarea:not([disabled]):not([tabindex='-1']),\n iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true]\n");for(const e of t)ht(e,null,"tabstops")}if(e.length)for(const t of e){const e=t.querySelectorAll('\nheader, footer, section, main, nav, aside, [role="section"], [role="banner"],\n[role="complementary"], [role="contentinfo"], [role="form"], [role="main"],\n[role="navigation"], [role="region"], [role="search"]\n');for(const[t,n]of e.entries())ht(n,t+1,"landmark"),ht(n,null,"region")}})()};ct(Lt);export{Lt as default,At as dissect,$t as grid,Ct as mark,kt as measure,vt as modes,Et as spacing,St as typography};
|
|
27
|
+
var t,e,n;!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(t||(t={})),function(t){t.Outline="outline",t.Parent="parent",t.Enclose="enclose",t.Subtle="subtle",t.Full="full",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top",t.SVG="svg",t.Curly="curly"}(e||(e={})),function(t){t.Width="width",t.Height="height",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(n||(n={}));const o=t=>t.split(" "),i=t=>o(t).includes(e.Left),s=t=>o(t).includes(e.Right),r=t=>o(t).includes(e.Bottom),a=t=>o(t).includes(e.Full),c=t=>o(t).includes(e.Enclose),p=t=>o(t).includes(e.Subtle),l=t=>o(t).includes(e.Parent),d=t=>t.includes(e.Curly)&&t.includes(e.Full),h=t=>"string"==typeof t,u=t=>!h(t),f=t=>"number"==typeof t,m=t=>!f(t),g=t=>void 0===t,y=(t,e,n="noop")=>{t&&(!e||e&&!e.length||e.trim().split(" ").filter((t=>t!==n)).filter((t=>""!==t)).forEach((e=>t.classList.add(e.trim()))))},w=(t,e)=>t?!e&&u(t)?Object.keys(t).filter((e=>t[e])).join(" ").trim():`${t.trim()} ${e?Object.keys(e).filter((t=>e[t])).join(" "):""}`.trim():"",x=(t="",e,n="",o="span")=>{const i=document.createElement(o),s=document.createTextNode(t),r={};null!==e&&""!==e&&(r[e]=!0),!l(e)||a(e)||d(e)||p(e)||(r.svg=!0),!a(e)&&!c(e)||a(e)&&d(e)?i.appendChild(s):(a(e)||c(e))&&i.setAttribute("data-dissection-counter",t);const h=w("ph-speccer speccer dissection",r);return y(i,h),i.setAttribute("id",n),i},b=()=>"_"+Math.random().toString(36).substring(2,11),$=()=>new Promise(requestAnimationFrame),E=t=>t.top,A=t=>t.left+t.width,k=t=>t.top+t.height,S=t=>t.left,C=t=>t.left+t.width/2,v=t=>t.top+t.height/2,L={center:t=>({x:C(t),y:v(t)}),top:t=>({x:C(t),y:E(t)}),right:t=>({x:A(t),y:v(t)}),bottom:t=>({x:C(t),y:k(t)}),left:t=>({x:S(t),y:v(t)}),"right-top":t=>({x:A(t),y:E(t)}),"right-bottom":t=>({x:A(t),y:k(t)}),"left-top":t=>({x:S(t),y:E(t)}),"left-bottom":t=>({x:S(t),y:k(t)}),"top-left":t=>({x:S(t),y:E(t)}),"top-right":t=>({x:A(t),y:E(t)}),"bottom-left":t=>({x:S(t),y:k(t)}),"bottom-right":t=>({x:A(t),y:k(t)}),"top-center":t=>({x:C(t),y:E(t)}),"right-center":t=>({x:A(t),y:v(t)}),"bottom-center":t=>({x:C(t),y:k(t)}),"left-center":t=>({x:S(t),y:v(t)})},P=async(t,e="center")=>{if(!e)throw Error("No position given");if(u(e))throw Error("The position given is not the required type: pos: "+typeof e);const n=["center","left","right","top","bottom","right-top","right-bottom","left-top","left-bottom","top-left","top-right","bottom-left","bottom-right","top-center","right-center","bottom-center","left-center"];if(!n.includes(e))throw Error(`The position given does not match allowed positions to use! Valid positions are: ${n.join(", ")}`);await $();const o=t.getBoundingClientRect();return L[e](o)},R=async(t,e)=>{var n;if(!(!t||!e||h(e)||f(e)||(n=e,"boolean"==typeof n)||Array.isArray(e)&&!e.length||!Object.keys(e).length&&e.constructor===Object))if(await $(),Array.isArray(e))for(const n of e)t.style[n.key]=n.value;else for(const n of Object.keys(e))t.style[n]=e[n]},B=async t=>(await $(),getComputedStyle(t,null));class T{#t;el;circle;radius;areas;constructor(t,e,n){this.#e(t,e,n)}#e(t,e,n){if(!t||!e||!n)throw new Error("Missing inputs el or radius or areas");if(!document.body.contains(t))throw new Error("el is not in the DOM");if(this.el=t,this.radius=e,this.areas=n,this.#t=document.getElementById("ph-speccer-svg"),!this.#t)throw new Error("Missing required SVG element to draw circles. Please see the documentation");const o=document.body,i=document.documentElement,s=Math.max(o.scrollHeight,o.offsetHeight,i.clientHeight,i.scrollHeight,i.offsetHeight);R(this.#t,{height:`${s}px`}),this.draw()}async draw(){const t=`ph_draw-circle-${b()}`;this.circle=document.createElementNS("http://www.w3.org/2000/svg","circle");const e=this.el.getAttribute("id")||b();if(this.el.setAttribute("id",e),this.circle.setAttribute("id",t),this.circle.setAttribute("data-el",e),this.circle.classList.add("ph-speccer"),this.circle.classList.add("speccer"),this.circle.classList.add("circle"),!this.#t)throw new Error("No parentNode found for circle");this.#t.appendChild(this.circle);let n="top";i(this.areas)&&(n="left"),s(this.areas)&&(n="right"),r(this.areas)&&(n="bottom");const{x:o,y:a}=await P(this.el,n);this.circle.setAttribute("r",this.radius+""),this.circle.setAttribute("cx",Math.round(o)+""),this.circle.setAttribute("cy",Math.round(a)+""),this.circle.setAttribute("fill","currentColor")}}window.DrawCircle=T;const H=async(t,e,n="center",o="center")=>{if(!t||!e)throw Error("No element given");const{x:i,y:s}=await P(t,n),{x:r,y:a}=await P(e,o);return{x1:i,y1:s,x2:r,y2:a}},N=(t,e)=>{const{x1:n,x2:o,y1:i,y2:s}=t,{direct:r=!1,firstSet:a=!1,direction:c}=e;let p={x:n+(o-n)/2,y:i},l={x:n+(o-n)/2,y:s};return r&&(a?"west"===c?(p={x:n-32,y:i-8},l={x:o+32,y:s}):"south"===c?(p={x:n-8,y:i+32},l={x:o,y:s-32}):"east"===c?(p={x:n+32,y:i-8},l={x:o-32,y:s}):(p={x:n-8,y:i-32},l={x:o,y:s+32}):"west"===c?(p={x:n-32,y:i+8},l={x:o+32,y:s}):"south"===c?(p={x:n+8,y:i+32},l={x:o,y:s-32}):"east"===c?(p={x:n+32,y:i+8},l={x:o-32,y:s}):(p={x:n+8,y:i-32},l={x:o,y:s+32})),{firstPoint:{x:n,y:i},firstControl:p,lastPoint:{x:o,y:s},lastControl:l}},I=async(t,e,n)=>{const{pos1:o,pos2:i,firstSet:s=!1,direction:r}=n,{x1:a,y1:c,x2:p,y2:l}=await H(t,e,o,i);let d=0,h=0;"north"===r?h=8:"west"===r?d=8:"east"===r?d=-8:"south"===r&&(h=-8);const{firstPoint:u,firstControl:f,lastControl:m,lastPoint:g}=N({x1:a+0,x2:p+d,y1:c+0+document.documentElement.scrollTop,y2:l+h+document.documentElement.scrollTop},{direct:!0,firstSet:s,direction:r});return`M ${u.x} ${u.y}C ${f.x} ${f.y}, ${m.x} ${m.y}, ${g.x} ${g.y}`},M=async({start:t,stop:e,crude:n=!1})=>{const{x1:o,y1:i,x2:s,y2:r}=await H(t,e),a=((t,e,n,o,i=!0)=>{if(g(t)||g(e)||g(n)||g(o))throw new SyntaxError("Missing input for `angle`");if(m(t)||m(e)||m(n)||m(o))throw TypeError(`Parameters for \`angle\` do not have the required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof n} ${typeof o}`);const s=o-e,r=n-t;let a=Math.atan2(s,r);return a*=180/Math.PI,i&&a<0&&(a+=360),a})(o,i,s,r);return n?(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=45&&t<=135?"south":t>135&&t<=225?"west":t>225&&t<=315?"north":"east"})(a):(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=0&&t<=22.5?"east":t>=22.5&&t<=67.5?"south-east":t>=67.5&&t<=112.5?"south":t>=112.5&&t<=157.5?"south-west":t>=157.5&&t<=202.5?"west":t>=202.5&&t<=247.5?"north-west":t>=247.5&&t<=292.5?"north":t>=292.5&&t<=337.5?"north-east":"east"})(a)};class q{#t;#n;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#e(t,e)}#e(t,e){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.#t=document.getElementById("ph-speccer-svg"),this.#n=document.getElementById("ph-speccer-path"),!this.#n||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");const n=document.body,o=document.documentElement,i=Math.max(n.scrollHeight,n.offsetHeight,o.clientHeight,o.scrollHeight,o.offsetHeight);R(this.#t,{height:`${i}px`}),this.connect()}connect(){this.draw(this.#n)}#o(t){if(!t)throw new Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${b()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||b();return this.startElement.setAttribute("id",o),n.setAttribute("data-start-el",o),n.setAttribute("id",e),n.classList.remove("original"),n.classList.add("speccer"),n}async draw(t){if(!t)throw new Error("No path given to draw!");const e=this.#o(t),n=this.#o(t);if(!t.parentNode)throw new Error("No parentNode found for path");this.firstPathElement=t.parentNode.insertBefore(e,t.nextSibling),this.secondPathElement=t.parentNode.insertBefore(n,t.nextSibling);const o=await M({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:i,path1pos2:s,path2pos1:r,path2pos2:a}=(t=>{let e,n,o,i;switch(t){case"east":e="right-top",n="left-center",o="right-bottom",i="left-center";break;case"south":e="bottom-left",n="top-center",o="bottom-right",i="top-center";break;case"west":e="left-top",n="right-center",o="left-bottom",i="right-center";break;default:e="top-left",n="bottom-center",o="top-right",i="bottom-center"}return{path1pos1:e,path1pos2:n,path2pos1:o,path2pos2:i}})(o),c=await I(this.startElement,this.stopElement,{pos1:i,pos2:s,firstSet:!0,direction:o}),p=await I(this.startElement,this.stopElement,{pos1:r,pos2:a,direction:o});this.firstPathElement.setAttribute("data-direction",o),this.firstPathElement.setAttribute("data-pos1",i),this.firstPathElement.setAttribute("data-pos2",s),this.firstPathElement.setAttribute("d",c),this.secondPathElement.setAttribute("data-direction",o),this.secondPathElement.setAttribute("data-pos1",r),this.secondPathElement.setAttribute("data-pos2",a),this.secondPathElement.setAttribute("d",p)}}window.DrawSVGCurlyBracket=q;class O{#t;#n;startElement;stopElement;line;constructor(t,e){this.#e(t,e)}#e(t,e){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.#t=document.getElementById("ph-speccer-svg"),this.#n=document.getElementById("ph-speccer-path"),!this.#n||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");const n=document.body,o=document.documentElement,i=Math.max(n.scrollHeight,n.offsetHeight,o.clientHeight,o.scrollHeight,o.offsetHeight);R(this.#t,{height:`${i}px`}),this.connect()}connect(){this.draw(this.#n)}async draw(t){if(!t)throw new Error("No path given to draw!");const e=`ph_draw_path-path-${b()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||b();if(this.startElement.setAttribute("id",o),n.setAttribute("id",e),n.setAttribute("data-start-el",o),n.classList.remove("original"),n.classList.add("speccer"),!t.parentNode)throw new Error("No parentNode found for path");this.line=t.parentNode.insertBefore(n,t.nextSibling);const i=await M({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:s,pos2:r}=(t=>{let e,n;switch(t){case"east":e="right",n="left";break;case"south":e="bottom",n="top";break;case"west":e="left",n="right";break;default:e="top",n="bottom"}return{pos1:e,pos2:n}})(i),a=await(async(t,e,n)=>{const{pos1:o,pos2:i}=n,{x1:s,y1:r,x2:a,y2:c}=await H(t,e,o,i),{firstPoint:p,firstControl:l,lastControl:d,lastPoint:h}=N({x1:s,x2:a,y1:r,y2:c},{direction:""});return`M ${p.x} ${p.y}C ${l.x} ${l.y}, ${d.x} ${d.y}, ${h.x} ${h.y}`})(this.startElement,this.stopElement,{pos1:s,pos2:r});this.line.setAttribute("data-direction",i),this.line.setAttribute("data-pos1",s),this.line.setAttribute("data-pos2",r),this.line.setAttribute("d",a)}}window.DrawSVGLine=O;const z=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],V=t=>parseInt(t,10),W=t=>t.includes("Top")?t.replace("Top"," top"):t.includes("Right")?t.replace("Right"," right"):t.includes("Bottom")?t.replace("Bottom"," bottom"):t.includes("Left")?t.replace("Left"," left"):"",j=t=>V(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,F=async(t,e,n)=>{await $();return getComputedStyle(t)[e]===n},D=async(t,e,n)=>{if(!t.parentElement)return null;return await F(t.parentElement,e,n)?t.parentElement:await D(t.parentElement,e,n)},G=(t,e,n)=>t-e.width/2+n.width/2,_=(t,e,n)=>t-e.height/2+n.height/2,X=async t=>{await $();let e=t.getBoundingClientRect(),n=e.top+window.scrollY;const o=e.left+window.scrollX,i=await(async t=>await D(t,"position","sticky"))(t),s=await(async t=>await F(t,"position","sticky"))(t);if(s){const o=t.style.position;await $(),t.style.position="relative",await $(),e=t.getBoundingClientRect(),n=e.top,t.style.position=o}else if(i){const o=i.style.position;await $(),i.style.position="relative",await $(),e=t.getBoundingClientRect(),n=e.top,i.style.position=o}return{height:e.height,width:e.width,top:n,left:o}},Y=async(t,e)=>{await $();const n=t.getBoundingClientRect(),o=await X(e),i=await(async(t,e)=>{await $();const n=t.getBoundingClientRect(),o=e.getBoundingClientRect(),i=o.top+window.scrollY,s=o.left+window.scrollX;return{height:o.height,width:o.width,top:_(i,n,o),left:G(s,n,o)}})(t,e),s=o.height,r=o.width,a=n.height,c=n.width;return{absolute:()=>({top:o.top,left:o.left,height:s,width:r}),toTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:s,width:r}),fromTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top-e-n,left:t?i.left:o.left,height:s,width:r}),toBottom:({center:t=!1,sourceHeight:e=a,targetHeight:n=s,modifier:c=0}={})=>({top:o.top+n-(e+c),left:t?i.left:o.left,height:s,width:r}),fromBottom:({center:t=!1,targetHeight:e=s,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:s,width:r}),toLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:s,width:r}),fromLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left-e-n,height:s,width:r}),toRight:({center:t=!1,sourceWidth:e=c,targetWidth:n=r,modifier:a=0}={})=>({top:t?i.top:o.top,left:o.left+n-(e+a),height:s,width:r}),fromRight:({center:t=!1,targetWidth:e=r,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:s,width:r})}},K=async(t,e,n,o,d)=>{await $();const{isCurly:h=!1}=d||{},u=j(n),f=V(getComputedStyle(n).getPropertyValue("--ph-speccer-measure-size"))||8;const m=await Y(n,e);if(c(t)){const{left:t,top:e,height:n,width:o}=m.absolute();return{left:`${t}px`,top:`${e}px`,height:`${n}px`,width:`${o}px`}}if(l(t)&&!a(t)&&!h&&!p(t)){if(s(t)){const{top:t}=m.fromRight({center:!0});await $();const{left:e,width:n}=o.getBoundingClientRect();return{left:`${e+n+u}px`,top:`${t}px`}}if(r(t)){const{left:t}=m.toBottom({center:!0});await $();const{top:e,height:n}=o.getBoundingClientRect();return{left:`${t}px`,top:`${e+n+u}px`}}if(i(t)){const{top:t}=m.fromLeft({center:!0});await $();const{left:e}=o.getBoundingClientRect();return{left:e-1.5*u+"px",top:`${t}px`}}const{left:e}=m.fromTop({center:!0});await $();const{top:n}=o.getBoundingClientRect();return{left:`${e}px`,top:n-1.5*u+"px"}}if(i(t)){if(a(t)&&!h){const{left:t,top:e,height:n}=m.fromLeft({sourceWidth:f});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:e,top:n}=m.fromLeft({center:!0,modifier:h?u/1.5:u});return{left:`${e}px`,top:`${n}px`}}if(s(t)){if(a(t)&&!h){const{left:t,top:e,height:n}=m.fromRight({center:!1});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:e,top:n}=m.fromRight({center:!0,modifier:h?u/1.5:u});return{left:`${e}px`,top:`${n}px`}}if(r(t)){if(a(t)&&!h){const{left:t,top:e,width:n}=m.fromBottom({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:e,top:n}=m.fromBottom({center:!0,modifier:h?u/1.5:u});return{left:`${e}px`,top:`${n}px`}}if(a(t)&&!h){const{left:t,top:e,width:n}=m.fromTop({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:g,top:y}=m.fromTop({center:!0,modifier:h?u/1.5:u});return{left:`${g}px`,top:`${y}px`}},U=async(t,n,o,i="")=>{if(!t)return;const s=t.getAttribute("data-anatomy")||i;if(!s||""===s||!s.includes(e.Outline))return;const r=`speccer-${h=s,h.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").trim().toLowerCase().replace(/[^a-z0-9 -]/g,"").replace(/\s+/g," ").replace(/(?:^\w|[A-Z]|\b\w)/g,((t,e)=>0===e?t.toLowerCase():t.toUpperCase())).replace(/\s+/g,"")}-${t.getAttribute("id")||b()}`;var h;const u=x(n,s,r);t.setAttribute("data-speccer-element-id",r),document.body.appendChild(u);const f=await K(s,t,u,o,{isCurly:d(s)});await R(u,f);const m=l(s)&&!c(s)&&!a(s)&&!p(s);return m||s.includes(e.SVG)&&!d(s)?(new O(t,u),m&&new T(t,5,s)):d(s)&&new q(t,u),r};let Z=0;const J=async t=>{if(!t)return;const e=t.querySelectorAll("[data-anatomy]");e&&0!==e.length&&e.forEach((async(e,n)=>{const o=(t=>{const e=window.SPECCER_LITERALS||z;let n=e[t];return 0===t&&(Z=0),n||(n=`${e[Z]}${e[Z].toLowerCase()}`,Z++),n})(n);await U(e,o,t)}))},Q=(t="",e="",n="span")=>{const o=document.createElement(n);return o.setAttribute("title",`${t}px`),o.setAttribute("data-measure",`${parseInt(String(t),10)}px`),y(o,`ph-speccer speccer measure ${e}`),o},tt=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-measure");if(""===e||!e)return;const i=await B(t);if("none"===i.display||"0"===i.opacity||"hidden"===i.visibility)return;await $();const a=t.getBoundingClientRect();if(o(e).includes(n.Width))if(r(e)){const n=Q(a.width,e);document.body.appendChild(n);const o=await Y(n,t),{left:i,top:s,width:r}=o.fromBottom({center:!1});await R(n,{left:`${i}px`,top:`${s}px`,width:`${r}px`})}else{const n=Q(a.width,e);document.body.appendChild(n);const o=await Y(n,t),{left:i,top:s,width:r}=o.fromTop({center:!1,modifier:-8});await R(n,{left:`${i}px`,top:`${s}px`,width:`${r}px`})}else if((t=>o(t).includes(n.Height))(e))if(s(e)){const n=Q(a.height,e);document.body.appendChild(n);const o=await Y(n,t),{left:i,top:s,height:r}=o.fromRight({center:!1});await R(n,{left:`${i}px`,top:`${s}px`,height:`${r}px`})}else{const n=Q(a.height,e);document.body.appendChild(n);const o=await Y(n,t),{left:i,top:s,height:r}=o.fromLeft({center:!1,modifier:-8});await R(n,{left:`${i}px`,top:`${s}px`,height:`${r}px`})}},et=async(t,e,n,o)=>{await $();const i=o.getBoundingClientRect(),s=await X(o);"marginTop"===t&&R(n,{height:`${e}px`,width:i.width+"px",left:s.left+"px",top:s.top-e+"px"}),"marginRight"===t&&R(n,{height:i.height+"px",width:`${e}px`,left:s.left+parseInt(i.width+"",10)+"px",top:s.top+"px"}),"marginBottom"===t&&R(n,{height:`${e}px`,width:i.width+"px",left:s.left+"px",top:s.top+parseInt(i.height+"",10)+"px"}),"marginLeft"===t&&R(n,{height:i.height+"px",width:`${e}px`,left:s.left-e+"px",top:s.top+"px"}),"paddingTop"===t&&R(n,{height:`${e}px`,width:i.width+"px",left:s.left+"px",top:s.top+"px"}),"paddingBottom"===t&&R(n,{height:`${e}px`,width:i.width+"px",left:s.left+"px",top:s.top+(parseInt(i.height+"",10)-e)+"px"}),"paddingRight"===t&&R(n,{height:i.height+"px",width:`${e}px`,left:s.left+(parseInt(i.width+"",10)-e)+"px",top:s.top+"px"}),"paddingLeft"===t&&R(n,{height:i.height+"px",width:`${e}px`,left:s.left+"px",top:s.top+"px"})},nt=(t="",e="span")=>{const n=document.createElement(e),o=document.createTextNode(String(t));return n.appendChild(o),n.setAttribute("title",`${t}px`),y(n,"ph-speccer speccer spacing"),n},ot=async t=>{if(!t)return;const e=await B(t);if("none"===e.display||"0"===e.opacity||"hidden"===e.visibility)return;const n=(t=>{const{marginTop:e,marginBottom:n,marginLeft:o,marginRight:i,paddingTop:s,paddingBottom:r,paddingLeft:a,paddingRight:c}=t;return{marginTop:e,marginBottom:n,marginLeft:o,marginRight:i,paddingTop:s,paddingBottom:r,paddingLeft:a,paddingRight:c}})(e),o=Object.keys(n).filter((t=>"0px"!==n[t]));if(o.length)for(const e of o){const o=V(n[e]),i=nt(o),s=W(e);y(i,s),document.body.appendChild(i),t.classList.add("is-specced"),await et(e,o,i,t)}},it=t=>{const e=()=>((t,e,n=!1)=>{let o;return function(i,...s){const r=n&&!o;o&&clearTimeout(o),o=setTimeout((function(){o=null,n||t.apply(i,s)}),e),r&&t.apply(i,s)}})((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},st=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},rt=()=>{const t=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(ot(n.target),e.unobserve(n.target))}));for(const e of document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)"))t.observe(e);const e=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(tt(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll("[data-speccer-measure]"))e.observe(t);const n=new IntersectionObserver((async(t,e)=>{for(const n of t)n.intersectionRatio>0&&(await J(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll("[data-anatomy-section]"))n.observe(t)},at=t=>{window.speccer=t},ct=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");n?.includes("speccer.js")&&(e.hasAttribute("data-manual")?at(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?st(t):e.hasAttribute("data-lazy")?rt():st(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||it(t))}},pt=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],lt=["escape","esc","enter","return","⏎","␛"],dt=async(t,e,n)=>{await $();const o=j(n),i=await Y(n,e);if("tabstops"===t){let{left:t,top:e}=i.fromTop();return t-=32,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("landmark"===t){let{left:t,top:e}=i.fromTop();return t-=16,e-=16,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("region"===t){const{left:t,top:e,height:n,width:o}=i.fromTop();return{height:`${n}px`,width:`${o}px`,left:`${t}px`,top:`${e}px`}}if("shortcut"===t){const{left:t,top:e}=i.fromBottom();return{left:`${t}px`,top:`${e}px`}}const{left:s,top:r}=i.fromTop({center:!0,modifier:o});return{left:s-32+"px",top:r-32+"px"}},ht=async(t,e,n)=>{if(!t||!t.checkVisibility())return;const o=((t="tabstops",e,n="span")=>{const o=document.createElement(n),i=w("ph-speccer speccer a11y",{tabstops:"tabstops"===t,landmark:"landmark"===t,region:"region"===t});if("landmark"===t&&e){const t=document.createTextNode(String(e));o.appendChild(t)}return y(o,i),o})(n,e);if("landmark"===n){o.setAttribute("data-speccer-nodename",t.nodeName);const e=t.role||`semantic role: ${t.nodeName.toLowerCase()}`,n=t.getAttribute("aria-label")||"unnamed";o.setAttribute("title",`${n}: ${e}`)}document.body.appendChild(o);const i=await dt(n,t,o);await R(o,i)},ut=async(t,e)=>{const n=e.split(/\s\+\s/).map((t=>t.trim())),o=document.createElement("div");o.classList.add("ph-speccer"),o.classList.add("speccer"),o.classList.add("a11y"),o.classList.add("shortcut-holder");for(const t of n){const e=document.createElement("kbd"),n=document.createTextNode(t);e.classList.add("ph-speccer"),e.classList.add("speccer"),e.classList.add("a11y"),e.classList.add("shortcut"),pt.includes(t.toLowerCase())&&e.classList.add("modifier"),lt.includes(t.toLowerCase())&&e.classList.add("physical"),e.appendChild(n),o.appendChild(e)}document.body.appendChild(o);const i=await dt("shortcut",t,o);await R(o,i)},ft=async(t,e)=>{await $();const{height:n,width:o,top:i,left:s}=t.getBoundingClientRect(),{gridTemplateColumns:r,gridTemplate:a,padding:c}=e,p=parseInt(e.columnGap),l=document.createElement("div");document.documentElement.style.setProperty("--ph-speccer-grid-gap-original",`${p}px`),document.documentElement.style.setProperty("--ph-speccer-grid-gap",`${p<24?24:p}px`),p<24&&l.classList.add("speccer-small-grid"),l.classList.add("ph-speccer"),l.classList.add("speccer"),l.classList.add("speccer-grid-container"),l.style.height=`${n+64}px`,l.style.width=`${o}px`,l.style.left=`${s}px`,l.style.top=i-32+"px",l.style.padding=c,l.style.gridTemplate=a,l.style.gridTemplateRows="repeat(1, 100%)";const d=r.split(" ").length;for(let t=0;t<d;t++){const t=document.createElement("div");t.classList.add("ph-speccer"),t.classList.add("speccer"),t.classList.add("speccer-grid-item"),l.appendChild(t)}return l},mt=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-grid");await $();const n=window.getComputedStyle(t);if("grid"===e&&("grid"===n.display||n.display.includes("grid"))){const e=await ft(t,n);document.body.appendChild(e)}},gt=(t="span")=>{const e=document.createElement(t),n=w("ph-speccer speccer mark");return y(e,n),e},yt=async t=>{if(!t)return;const e=gt();document.body.appendChild(e);const n=await Y(e,t),{left:o,top:i,height:s,width:r}=n.absolute(),a={left:`${o}px`,top:`${i}px`,height:`${s}px`,width:`${r}px`};await R(e,a)},wt=(t,e=3)=>parseFloat(String(t)).toFixed(e),xt=(t,e)=>{const n=document.createElement("div"),o={};if(null!==e&&""!==e)for(const t of e.split(" "))o[t]=!0;const i=w("ph-speccer speccer typography",o);return n.innerHTML=t,y(n,i),n},bt=async e=>{if(!e)return;const n=e.getAttribute("data-speccer-typography"),o=await B(e);if("none"===o.display||"0"===o.opacity||"hidden"===o.visibility)return;const i=n?.includes("syntax");e.classList.add("is-specced");const s=await(async(t,e=!1)=>{const n=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:s,fontVariationSettings:r,fontWeight:a}=t;return{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:s,fontVariationSettings:r,fontWeight:a}})(await B(t));if(e){const t=n.fontFamily.split(",").map((t=>t.includes("'")?`<span class="token string">${t}</span>`:t)).join('<span class="token punctuation">, </span>'),e=`<span class="token number">${parseInt(n.fontSize,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.fontSize,10)/16}</span><span class="token unit">rem</span>`,o=n.letterSpacing.includes("px")?`<span class="token number">${parseInt(n.letterSpacing,10)}</span><span class="token unit">px</span>`:n.letterSpacing,i="normal"!==n.lineHeight?`<span class="token number">${parseInt(n.lineHeight,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.lineHeight,10)/16}</span><span class="token unit">rem</span>`:"normal";return`\n<pre class="language-css" tabindex="-1"><code class="language-css"><span class="token selector"><span class="token class">.typography</span></span> <span class="token punctuation">{</span>\n <span class="token property">font-family</span><span class="token punctuation">:</span> ${t}<span class="token punctuation">;</span>\n <span class="token property">font-size</span><span class="token punctuation">:</span> ${e}<span class="token punctuation">;</span>\n <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">${n.fontWeight}</span><span class="token punctuation">;</span>\n <span class="token property">font-variation-settings</span><span class="token punctuation">:</span> ${n.fontVariationSettings}<span class="token punctuation">;</span>\n <span class="token property">line-height</span><span class="token punctuation">:</span> ${i}<span class="token punctuation">;</span>\n <span class="token property">letter-spacing</span><span class="token punctuation">:</span> ${o}<span class="token punctuation">;</span>\n <span class="token property">font-style</span><span class="token punctuation">:</span> ${n.fontStyle}<span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>`}return`\ntypography: {<ul class="speccer-styles"> <li><span class="property">font-family:</span> ${n.fontFamily};</li> <li><span class="property">font-size:</span> ${n.fontSize} / ${parseInt(n.fontSize,10)/16}rem;</li> <li><span class="property">font-weight:</span> ${n.fontWeight};</li> <li><span class="property">font-variation-settings:</span> ${n.fontVariationSettings};</li> <li><span class="property">line-height:</span> ${"normal"!==n.lineHeight?`${parseInt(n.lineHeight,10)}px / ${parseInt(n.lineHeight,10)/16}rem`:"normal"};</li> <li><span class="property">letter-spacing:</span> ${n.letterSpacing};</li> <li><span class="property">font-style:</span> ${n.fontStyle};</li></ul>}`})(e,i),r=xt(s,n);document.body.appendChild(r);const a=await(async(e,n,o)=>{const i=n.getBoundingClientRect(),s=j(o),r=o.getBoundingClientRect(),a=await X(n),c=a.left-r.width-s+"px",p=wt(_(a.top,r,i))+"px",l=a.left+i.width+s+"px",d=wt(_(a.top,r,i))+"px",h=wt(G(a.left,r,i))+"px",u=a.top-r.height-s+"px",f=wt(G(a.left,r,i))+"px",m=a.top+i.height+s+"px";return e?.includes(t.Right)?{left:l,top:d}:e?.includes(t.Top)?{left:h,top:u}:e?.includes(t.Bottom)?{left:f,top:m}:{left:c,top:p}})(n,e,r);R(r,a)},$t={create:ft,element:mt},Et={create:nt,element:ot},At={create:x,element:J,dissect:U},kt={create:Q,element:tt},St={create:gt,element:yt},Ct={create:xt,element:bt},vt={dom:st,lazy:rt,manual:at,activate:ct},Lt=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".ph-speccer.speccer");const t=document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)"),e=document.querySelectorAll("[data-speccer-measure]"),n=document.querySelectorAll("[data-speccer-typography]"),o=document.querySelectorAll("[data-anatomy-section]"),i=document.querySelectorAll("[data-speccer-mark]"),s=document.querySelectorAll('[data-speccer-grid="grid"]');for(const t of i)yt(t);for(const t of s)mt(t);for(const e of t)ot(e);for(const t of e)tt(t);for(const t of n)bt(t);for(const t of o)J(t);(()=>{const t=document.querySelectorAll("[data-speccer-a11y-tabstops]"),e=document.querySelectorAll("[data-speccer-a11y-landmark]"),n=document.querySelectorAll("[data-speccer-a11y-shortcut]");if(n.length)for(const t of n){const e=t.getAttribute("data-speccer-a11y-shortcut");e&&""!==e&&ut(t,e)}if(t.length)for(const e of t){const t=e.querySelectorAll("\n a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n textarea:not([disabled]):not([tabindex='-1']),\n iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true]\n");for(const e of t)ht(e,null,"tabstops")}if(e.length)for(const t of e){const e=t.querySelectorAll('\nheader, footer, section, main, nav, aside, [role="section"], [role="banner"],\n[role="complementary"], [role="contentinfo"], [role="form"], [role="main"],\n[role="navigation"], [role="region"], [role="search"]\n');for(const[t,n]of e.entries())ht(n,t+1,"landmark"),ht(n,null,"region")}})()};ct(Lt);export{Lt as default,At as dissect,$t as grid,St as mark,kt as measure,vt as modes,Et as spacing,Ct as typography};
|
|
28
28
|
//# sourceMappingURL=speccer.esm.js.map
|