@phun-ky/speccer 4.3.2 → 6.0.1
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/package.json +19 -16
- package/speccer.css +16 -19
- package/speccer.js +2 -1
- package/speccer.js.map +1 -0
- package/speccer.min.css +1 -1
- package/CHANGELOG.md +0 -45
- package/src/browser.js +0 -87
- package/src/dissect.js +0 -204
- package/src/index.js +0 -33
- package/src/lib/attributes.js +0 -13
- package/src/lib/classnames.js +0 -37
- package/src/lib/constants.js +0 -5
- package/src/lib/css.js +0 -37
- package/src/lib/debounce.js +0 -22
- package/src/lib/node.js +0 -7
- package/src/lib/number.js +0 -4
- package/src/lib/resize.js +0 -13
- package/src/lib/styles.js +0 -27
- package/src/measure.js +0 -88
- package/src/spec.js +0 -183
- package/src/styles/anatomy.styl +0 -274
- package/src/styles/index.styl +0 -68
- package/src/styles/measure.styl +0 -88
- package/src/styles/spacing.styl +0 -152
- package/src/styles/typography.styl +0 -86
- package/src/typography.js +0 -138
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phun-ky/speccer",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.1",
|
|
4
4
|
"description": "A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements",
|
|
5
5
|
"main": "speccer.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
11
11
|
"rollup": "rollup -c",
|
|
12
12
|
"rollup:dev": "npm run clean && rollup -c -w",
|
|
13
|
-
"clean": "rm -rf ./speccer.css ./speccer.min.css ./speccer.js",
|
|
13
|
+
"clean": "rm -rf dist/ dts/ ./speccer.css ./speccer.min.css ./speccer.js",
|
|
14
14
|
"build": "npm run clean && npm run rollup && npm run stylus && npm run postcss",
|
|
15
15
|
"styles": "npm run stylus && npm run postcss",
|
|
16
16
|
"stylus": "rm -rf ./speccer.css && stylus ./src/styles/index.styl -o ./speccer.css",
|
|
@@ -19,6 +19,12 @@
|
|
|
19
19
|
"commit": "npx git-cz",
|
|
20
20
|
"release": "npx standard-version"
|
|
21
21
|
},
|
|
22
|
+
"files": [
|
|
23
|
+
"/speccer.js",
|
|
24
|
+
"/speccer.js.map",
|
|
25
|
+
"/speccer.min.css",
|
|
26
|
+
"/speccer.css"
|
|
27
|
+
],
|
|
22
28
|
"standard-version": {
|
|
23
29
|
"scripts": {
|
|
24
30
|
"prerelease": "npm run build",
|
|
@@ -100,39 +106,36 @@
|
|
|
100
106
|
},
|
|
101
107
|
"homepage": "https://github.com/phun-ky/speccer#readme",
|
|
102
108
|
"devDependencies": {
|
|
103
|
-
"@babel/core": "^7.2.2",
|
|
104
|
-
"@babel/plugin-proposal-export-default-from": "^7.12.13",
|
|
105
|
-
"@babel/plugin-transform-runtime": "^7.12.17",
|
|
106
|
-
"@babel/preset-env": "^7.2.3",
|
|
107
|
-
"@babel/register": "^7.12.13",
|
|
108
|
-
"@babel/runtime": "^7.12.18",
|
|
109
|
-
"@rollup/plugin-babel": "^5.3.0",
|
|
110
109
|
"@rollup/plugin-commonjs": "^17.1.0",
|
|
111
110
|
"@rollup/plugin-node-resolve": "^11.2.0",
|
|
112
111
|
"@testing-library/dom": "^7.29.4",
|
|
113
112
|
"@testing-library/jest-dom": "^5.11.9",
|
|
114
113
|
"@testing-library/user-event": "^12.7.1",
|
|
115
|
-
"babel-eslint": "^10.1.0",
|
|
116
|
-
"babel-jest": "^26.6.3",
|
|
117
114
|
"browser-sync": "^2.27.7",
|
|
118
115
|
"cssnano": "^5.0.4",
|
|
119
116
|
"eslint": "^7.32.0",
|
|
120
117
|
"eslint-config-airbnb": "^18.2.1",
|
|
121
118
|
"eslint-config-prettier": "^8.3.0",
|
|
119
|
+
"eslint-plugin-compat": "^3.13.0",
|
|
122
120
|
"eslint-plugin-import": "^2.24.2",
|
|
123
121
|
"eslint-plugin-jest": "^24.4.2",
|
|
124
122
|
"eslint-plugin-prettier": "^4.0.0",
|
|
123
|
+
"eslint-plugin-react": "^7.23.2",
|
|
124
|
+
"eslint-plugin-react-hooks": "^4.2.0",
|
|
125
125
|
"jest": "^26.6.3",
|
|
126
126
|
"postcss": "^8.3.0",
|
|
127
127
|
"postcss-cli": "^8.3.1",
|
|
128
128
|
"prettier": "^2.4.1",
|
|
129
129
|
"prettier-eslint": "^13.0.0",
|
|
130
|
-
"regenerator-runtime": "^0.13.7",
|
|
131
130
|
"rollup": "^2.39.0",
|
|
132
|
-
"
|
|
131
|
+
"@typescript-eslint/eslint-plugin": "^5.7.0",
|
|
132
|
+
"@typescript-eslint/parser": "^5.7.0",
|
|
133
133
|
"stylus": "^0.56.0",
|
|
134
|
-
"
|
|
135
|
-
"
|
|
136
|
-
"
|
|
134
|
+
"rollup-plugin-dts": "^4.0.1",
|
|
135
|
+
"rollup-plugin-terser": "^7.0.2",
|
|
136
|
+
"rollup-plugin-typescript2": "^0.31.1",
|
|
137
|
+
"tslib": "^2.3.1",
|
|
138
|
+
"typescript": "^4.5.4",
|
|
139
|
+
"network-information-types": "^0.1.0"
|
|
137
140
|
}
|
|
138
141
|
}
|
package/speccer.css
CHANGED
|
@@ -23,6 +23,11 @@
|
|
|
23
23
|
--ph-speccer-line-width-negative: -1px;
|
|
24
24
|
--ph-speccer-measure-size: 8px;
|
|
25
25
|
}
|
|
26
|
+
body.ph {
|
|
27
|
+
margin: 12px;
|
|
28
|
+
padding: 12px;
|
|
29
|
+
box-sizing: border-box;
|
|
30
|
+
}
|
|
26
31
|
.ph.speccer,
|
|
27
32
|
.ph.speccer::after,
|
|
28
33
|
.ph.speccer::before {
|
|
@@ -334,13 +339,6 @@
|
|
|
334
339
|
.ph.speccer.spacing:hover {
|
|
335
340
|
border: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
|
|
336
341
|
}
|
|
337
|
-
.is-specced:hover ~ .ph.speccer.spacing.margin {
|
|
338
|
-
background-color: var(--ph-speccer-color-margin-hover);
|
|
339
|
-
}
|
|
340
|
-
.is-specced:hover ~ .ph.speccer.spacing.padding {
|
|
341
|
-
background-color: var(--ph-speccer-color-padding-hover);
|
|
342
|
-
color: var(--ph-speccer-color-text-light);
|
|
343
|
-
}
|
|
344
342
|
.ph.speccer.spacing.margin {
|
|
345
343
|
background-color: var(--ph-speccer-color-margin);
|
|
346
344
|
color: var(--ph-speccer-color-text-dark);
|
|
@@ -440,15 +438,14 @@
|
|
|
440
438
|
.ph.speccer.typography {
|
|
441
439
|
background-color: var(--ph-speccer-typography-background-color);
|
|
442
440
|
color: var(--ph-speccer-typography-color-text);
|
|
443
|
-
font-size:
|
|
444
|
-
padding: 8px
|
|
441
|
+
font-size: 10px;
|
|
442
|
+
padding: 8px;
|
|
445
443
|
max-width: none;
|
|
446
444
|
width: auto;
|
|
447
445
|
display: block;
|
|
448
446
|
text-align: left;
|
|
449
447
|
line-height: 140%;
|
|
450
448
|
border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
|
|
451
|
-
min-width: 320px;
|
|
452
449
|
}
|
|
453
450
|
.ph.speccer.typography:hover {
|
|
454
451
|
border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
|
|
@@ -462,14 +459,14 @@
|
|
|
462
459
|
top: 50%;
|
|
463
460
|
transform: translateY(-50%);
|
|
464
461
|
height: var(--ph-speccer-line-width);
|
|
465
|
-
width:
|
|
462
|
+
width: var(--ph-speccer-pin-space);
|
|
466
463
|
}
|
|
467
464
|
.ph.speccer.typography.left:after {
|
|
468
465
|
left: 100%;
|
|
469
466
|
top: 50%;
|
|
470
467
|
transform: translateY(-50%);
|
|
471
468
|
height: var(--ph-speccer-line-width);
|
|
472
|
-
width:
|
|
469
|
+
width: var(--ph-speccer-pin-space);
|
|
473
470
|
}
|
|
474
471
|
.ph.speccer.typography.right:after {
|
|
475
472
|
left: auto;
|
|
@@ -477,14 +474,14 @@
|
|
|
477
474
|
top: 50%;
|
|
478
475
|
transform: translateY(-50%);
|
|
479
476
|
height: var(--ph-speccer-line-width);
|
|
480
|
-
width:
|
|
477
|
+
width: var(--ph-speccer-pin-space);
|
|
481
478
|
}
|
|
482
479
|
.ph.speccer.typography.top:after {
|
|
483
480
|
left: 50%;
|
|
484
481
|
right: auto;
|
|
485
482
|
top: 100%;
|
|
486
483
|
transform: translateX(-50%);
|
|
487
|
-
height:
|
|
484
|
+
height: var(--ph-speccer-pin-space);
|
|
488
485
|
width: var(--ph-speccer-line-width);
|
|
489
486
|
}
|
|
490
487
|
.ph.speccer.typography.bottom:after {
|
|
@@ -493,7 +490,7 @@
|
|
|
493
490
|
top: auto;
|
|
494
491
|
bottom: 100%;
|
|
495
492
|
transform: translateX(-50%);
|
|
496
|
-
height:
|
|
493
|
+
height: var(--ph-speccer-pin-space);
|
|
497
494
|
width: var(--ph-speccer-line-width);
|
|
498
495
|
}
|
|
499
496
|
.ph.speccer.typography .speccer-styles {
|
|
@@ -502,15 +499,15 @@
|
|
|
502
499
|
padding: 0;
|
|
503
500
|
margin: 0;
|
|
504
501
|
line-height: 140%;
|
|
505
|
-
padding-left:
|
|
506
|
-
font-size:
|
|
502
|
+
padding-left: 8px;
|
|
503
|
+
font-size: 10px;
|
|
507
504
|
}
|
|
508
505
|
.ph.speccer.typography .speccer-styles .property {
|
|
509
506
|
font-weight: normal;
|
|
510
507
|
color: var(--ph-speccer-typography-color-property);
|
|
511
508
|
text-align: left;
|
|
512
509
|
padding: 0;
|
|
513
|
-
font-size:
|
|
510
|
+
font-size: 10px;
|
|
514
511
|
margin: 0;
|
|
515
512
|
}
|
|
516
513
|
.ph.speccer.typography .speccer-styles > li {
|
|
@@ -518,7 +515,7 @@
|
|
|
518
515
|
color: var(--ph-speccer-typography-color-value);
|
|
519
516
|
text-align: left;
|
|
520
517
|
padding: 0;
|
|
521
|
-
font-size:
|
|
518
|
+
font-size: 10px;
|
|
522
519
|
margin: 0;
|
|
523
520
|
list-style: none;
|
|
524
521
|
border: none;
|
package/speccer.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).speccer={})}(this,(function(t){"use strict";const e=(t,e)=>t.insertAdjacentElement("afterend",e),n=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))};function r(t,e,n,r,i,o,a){try{var c=t[o](a),s=c.value}catch(t){return void n(t)}c.done?e(s):Promise.resolve(s).then(r,i)}function i(t){return function(){var e=this,n=arguments;return new Promise((function(i,o){var a=t.apply(e,n);function c(t){r(a,i,o,c,s,"next",t)}function s(t){r(a,i,o,c,s,"throw",t)}c(void 0)}))}}var o=function(t){var e={exports:{}};return t(e,e.exports),e.exports}((function(t){var e=function(t){var e,n=Object.prototype,r=n.hasOwnProperty,i="function"==typeof Symbol?Symbol:{},o=i.iterator||"@@iterator",a=i.asyncIterator||"@@asyncIterator",c=i.toStringTag||"@@toStringTag";function s(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{s({},"")}catch(t){s=function(t,e,n){return t[e]=n}}function l(t,e,n,r){var i=e&&e.prototype instanceof x?e:x,o=Object.create(i.prototype),a=new S(r||[]);return o._invoke=function(t,e,n){var r=h;return function(i,o){if(r===d)throw new Error("Generator is already running");if(r===u){if("throw"===i)throw o;return C()}for(n.method=i,n.arg=o;;){var a=n.delegate;if(a){var c=R(a,n);if(c){if(c===g)continue;return c}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(r===h)throw r=u,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r=d;var s=p(t,e,n);if("normal"===s.type){if(r=n.done?u:f,s.arg===g)continue;return{value:s.arg,done:n.done}}"throw"===s.type&&(r=u,n.method="throw",n.arg=s.arg)}}}(t,n,a),o}function p(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}t.wrap=l;var h="suspendedStart",f="suspendedYield",d="executing",u="completed",g={};function x(){}function y(){}function m(){}var w={};s(w,o,(function(){return this}));var v=Object.getPrototypeOf,b=v&&v(v(A([])));b&&b!==n&&r.call(b,o)&&(w=b);var O=m.prototype=x.prototype=Object.create(w);function E(t){["next","throw","return"].forEach((function(e){s(t,e,(function(t){return this._invoke(e,t)}))}))}function L(t,e){function n(i,o,a,c){var s=p(t[i],t,o);if("throw"!==s.type){var l=s.arg,h=l.value;return h&&"object"==typeof h&&r.call(h,"__await")?e.resolve(h.__await).then((function(t){n("next",t,a,c)}),(function(t){n("throw",t,a,c)})):e.resolve(h).then((function(t){l.value=t,a(l)}),(function(t){return n("throw",t,a,c)}))}c(s.arg)}var i;this._invoke=function(t,r){function o(){return new e((function(e,i){n(t,r,e,i)}))}return i=i?i.then(o,o):o()}}function R(t,n){var r=t.iterator[n.method];if(r===e){if(n.delegate=null,"throw"===n.method){if(t.iterator.return&&(n.method="return",n.arg=e,R(t,n),"throw"===n.method))return g;n.method="throw",n.arg=new TypeError("The iterator does not provide a 'throw' method")}return g}var i=p(r,t.iterator,n.arg);if("throw"===i.type)return n.method="throw",n.arg=i.arg,n.delegate=null,g;var o=i.arg;return o?o.done?(n[t.resultName]=o.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=e),n.delegate=null,g):o:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,g)}function B(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function T(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function S(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(B,this),this.reset(!0)}function A(t){if(t){var n=t[o];if(n)return n.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var i=-1,a=function n(){for(;++i<t.length;)if(r.call(t,i))return n.value=t[i],n.done=!1,n;return n.value=e,n.done=!0,n};return a.next=a}}return{next:C}}function C(){return{value:e,done:!0}}return y.prototype=m,s(O,"constructor",m),s(m,"constructor",y),y.displayName=s(m,c,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===y||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,m):(t.__proto__=m,s(t,c,"GeneratorFunction")),t.prototype=Object.create(O),t},t.awrap=function(t){return{__await:t}},E(L.prototype),s(L.prototype,a,(function(){return this})),t.AsyncIterator=L,t.async=function(e,n,r,i,o){void 0===o&&(o=Promise);var a=new L(l(e,n,r,i),o);return t.isGeneratorFunction(n)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},E(O),s(O,c,"Generator"),s(O,o,(function(){return this})),s(O,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var n in t)e.push(n);return e.reverse(),function n(){for(;e.length;){var r=e.pop();if(r in t)return n.value=r,n.done=!1,n}return n.done=!0,n}},t.values=A,S.prototype={constructor:S,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(T),!t)for(var n in this)"t"===n.charAt(0)&&r.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=e)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var n=this;function i(r,i){return c.type="throw",c.arg=t,n.next=r,i&&(n.method="next",n.arg=e),!!i}for(var o=this.tryEntries.length-1;o>=0;--o){var a=this.tryEntries[o],c=a.completion;if("root"===a.tryLoc)return i("end");if(a.tryLoc<=this.prev){var s=r.call(a,"catchLoc"),l=r.call(a,"finallyLoc");if(s&&l){if(this.prev<a.catchLoc)return i(a.catchLoc,!0);if(this.prev<a.finallyLoc)return i(a.finallyLoc)}else if(s){if(this.prev<a.catchLoc)return i(a.catchLoc,!0)}else{if(!l)throw new Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return i(a.finallyLoc)}}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var i=this.tryEntries[n];if(i.tryLoc<=this.prev&&r.call(i,"finallyLoc")&&this.prev<i.finallyLoc){var o=i;break}}o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc&&(o=null);var a=o?o.completion:{};return a.type=t,a.arg=e,o?(this.method="next",this.next=o.finallyLoc,g):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),g},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),T(n),g}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var r=n.completion;if("throw"===r.type){var i=r.arg;T(n)}return i}}throw new Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:A(t),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=e),g}},t}(t.exports);try{regeneratorRuntime=e}catch(t){"object"==typeof globalThis?globalThis.regeneratorRuntime=e:Function("r","regeneratorRuntime = r")(e)}})),a=o;const c=function(t,e){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"noop";t&&(!e||e&&0===e.length||e.trim().split(" ").filter((t=>t!==n)).forEach((e=>t.classList.add(e))))},s=t=>parseInt(t,10),l=t=>{const e=parseFloat(t);return e>=0&&e<1||e<=0&&e>-1?0:e},p=t=>{const{marginTop:e,marginBottom:n,marginLeft:r,marginRight:i,paddingTop:o,paddingBottom:a,paddingLeft:c,paddingRight:s}=t;return{marginTop:e,marginBottom:n,marginLeft:r,marginRight:i,paddingTop:o,paddingBottom:a,paddingLeft:c,paddingRight:s}},h=t=>{const{lineHeight:e,letterSpacing:n,fontFamily:r,fontSize:i,fontStyle:o,fontVariationSettings:a,fontWeight:c}=t;return{lineHeight:e,letterSpacing:n,fontFamily:r,fontSize:i,fontStyle:o,fontVariationSettings:a,fontWeight:c}},f=()=>new Promise(requestAnimationFrame),d=function(){var t=i(a.mark((function t(e,n){return a.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(e){t.next=2;break}return t.abrupt("return");case 2:if(!(!n||n&&0===n.length&&n.constructor===String||n&&0===n.length&&n.constructor===Array||n&&0===Object.keys(n).length&&n.constructor===Object)){t.next=4;break}return t.abrupt("return");case 4:return t.next=6,f();case 6:"string"==typeof n||Array.isArray(n)?n.forEach((t=>e.style[t.key]=t.value)):Object.keys(n).forEach((t=>e.style[t]=n[t]));case 7:case"end":return t.stop()}}),t)})));return function(e,n){return t.apply(this,arguments)}}(),u=function(){var t=i(a.mark((function t(e){return a.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,f();case 2:return t.abrupt("return",window.getComputedStyle?getComputedStyle(e,null):e.currentStyle);case 3:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}(),g=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],x=["TR","TH","TD","TBODY","THEAD","TFOOT"],y=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"span";const n=document.createElement(e),r=document.createTextNode(t);return n.appendChild(r),n.setAttribute("title",t+"px"),c(n,"ph speccer spacing"),n},m=function(){var t=i(a.mark((function t(n){var r,i,o,h,f,g,m,w,v,b;return a.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return r={},t.next=3,u(n);case 3:if("none"!==(i=t.sent).display&&"hidden"!==i.visibility){t.next=6;break}return t.abrupt("return");case 6:n.classList.add("is-specced"),"static"===u(n.parentElement).position&&window.requestAnimationFrame((()=>{n.parentElement.style.position="relative"})),r.styles=p(i),r.rect=n.getBoundingClientRect(),"0px"!==r.styles.marginTop&&(o=y(s(r.styles.marginTop)),c(o,"margin top"),d(o,{height:r.styles.marginTop,width:r.rect.width+"px",left:l(r.rect.x-n.parentElement.getBoundingClientRect().x)+"px",top:l(r.rect.y-n.parentElement.getBoundingClientRect().y-parseInt(r.styles.marginTop,10))+"px"}),x.indexOf(n.nodeName)>=0?e(n.closest("table"),o):e(n,o)),"0px"!==r.styles.marginRight&&(h=y(s(r.styles.marginRight)),c(h,"margin right"),d(h,{height:r.rect.height+"px",width:r.styles.marginRight,left:l(r.rect.x-n.parentElement.getBoundingClientRect().x+parseInt(r.rect.width,10))+"px",top:l(r.rect.y-n.parentElement.getBoundingClientRect().y)+"px"}),x.indexOf(n.nodeName)>=0?e(n.closest("table"),h):e(n,h)),"0px"!==r.styles.marginBottom&&(f=y(s(r.styles.marginBottom)),c(f,"margin bottom"),d(f,{height:r.styles.marginBottom,width:r.rect.width+"px",left:l(r.rect.x-n.parentElement.getBoundingClientRect().x)+"px",top:l(r.rect.y-n.parentElement.getBoundingClientRect().y+parseInt(r.rect.height,10))+"px"}),x.indexOf(n.nodeName)>=0?e(n.closest("table"),f):e(n,f)),"0px"!==r.styles.marginLeft&&(g=y(s(r.styles.marginLeft)),c(g,"margin left"),d(g,{height:r.rect.height+"px",width:r.styles.marginLeft,left:l(r.rect.x-n.parentElement.getBoundingClientRect().x-parseInt(r.styles.marginLeft,10))+"px",top:l(r.rect.y-n.parentElement.getBoundingClientRect().y)+"px"}),x.indexOf(n.nodeName)>=0?e(n.closest("table"),g):e(n,g)),"0px"!==r.styles.paddingTop&&(m=y(s(r.styles.paddingTop)),c(m,"padding top"),d(m,{height:r.styles.paddingTop,width:r.rect.width+"px",left:l(r.rect.x-n.parentElement.getBoundingClientRect().x)+"px",top:l(r.rect.y-n.parentElement.getBoundingClientRect().y)+"px"}),x.indexOf(n.nodeName)>=0?e(n.closest("table"),m):e(n,m)),"0px"!==r.styles.paddingBottom&&(w=y(s(r.styles.paddingBottom)),c(w,"padding bottom"),d(w,{height:r.styles.paddingBottom,width:r.rect.width+"px",left:l(r.rect.x-n.parentElement.getBoundingClientRect().x)+"px",top:l(r.rect.y-n.parentElement.getBoundingClientRect().y+(parseInt(r.rect.height,10)-parseInt(r.styles.paddingBottom,10)))+"px"}),x.indexOf(n.nodeName)>=0?e(n.closest("table"),w):e(n,w)),"0px"!==r.styles.paddingRight&&(v=y(s(r.styles.paddingRight)),c(v,"padding right"),d(v,{height:r.rect.height+"px",width:r.styles.paddingRight,left:l(r.rect.x-n.parentElement.getBoundingClientRect().x+(parseInt(r.rect.width,10)-parseInt(r.styles.paddingRight,10)))+"px",top:l(r.rect.y-n.parentElement.getBoundingClientRect().y)+"px"}),x.indexOf(n.nodeName)>=0?e(n.closest("table"),v):e(n,v)),"0px"!==r.styles.paddingLeft&&(b=y(s(r.styles.paddingLeft)),c(b,"padding left"),d(b,{height:r.rect.height+"px",width:r.styles.paddingLeft,left:l(r.rect.x-n.parentElement.getBoundingClientRect().x)+"px",top:l(r.rect.y-n.parentElement.getBoundingClientRect().y)+"px"}),x.indexOf(n.nodeName)>=0?e(n.closest("table"),b):e(n,b));case 19:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}();var w=Object.freeze({__proto__:null,create:y,element:m});const v=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1?arguments[1]:void 0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"span";const r=document.createElement(n),i=document.createTextNode(t);return-1===e.indexOf("full")&&-1===e.indexOf("enclose")?r.appendChild(i):-1===e.indexOf("full")&&-1===e.indexOf("enclose")||r.setAttribute("data-dissection-counter",t),c(r,`ph speccer dissection ${e}`),r},b=(t,n)=>{const r=t.getBoundingClientRect(),i=t.getAttribute("data-anatomy"),o=v(g[n],i),a=x.indexOf(t.nodeName)>=0;let c=0,s=0;if(a){const n=t.closest("table"),r=u(n.parentElement);e(n,o);const i=n.getBoundingClientRect();c=i.top-parseInt(r.getPropertyValue("padding-top"),10),s=i.left-parseInt(r.getPropertyValue("padding-left"),10)}else e(t,o);const l=t.offsetLeft,p=t.offsetTop,h=o.getBoundingClientRect();let f=(a?r.left-s:l)-h.width-48+"px",y=(a?r.top-c:p)+r.height/2-h.height/2+"px",m=(a?r.left-s:l)+r.width+48+"px",w=(a?r.top-c:p)+r.height/2-h.height/2+"px",b=(a?r.left-s:l)+r.width/2-h.width/2+"px",O=(a?r.top-c:p)-h.height-48+"px",E=(a?r.left-s:l)+r.width/2-h.width/2+"px",L=(a?r.top-c:p)+r.height+48+"px",R={};R=-1!==i.indexOf("outline")?-1!==i.indexOf("left")?-1!==i.indexOf("full")?{left:l-8+"px",top:p+-1+"px",height:r.height+"px"}:-1!==i.indexOf("enclose")?{left:l-1+"px",top:p+-1+"px",height:r.height+"px",width:r.width+"px"}:{left:f,top:y}:-1!==i.indexOf("right")?-1!==i.indexOf("full")?{left:l+r.width+"px",top:p+-1+"px",height:r.height+"px"}:-1!==i.indexOf("enclose")?{left:l+-1+"px",top:p+-1+"px",height:r.height+"px",width:r.width+"px"}:{left:m,top:w}:-1!==i.indexOf("top")?-1!==i.indexOf("full")?{top:p+-8+"px",left:l+-1+"px",width:r.width+"px"}:-1!==i.indexOf("enclose")?{top:p+-1+"px",left:l+-1+"px",height:r.height+"px",width:r.width+"px"}:{left:b,top:O}:-1!==i.indexOf("bottom")?-1!==i.indexOf("full")?{top:p+r.height+"px",left:l+-1+"px",width:r.width+"px"}:-1!==i.indexOf("enclose")?{top:p+-1+"px",left:l+-1+"px",height:r.height+"px",width:r.width+"px"}:{left:E,top:L}:-1!==i.indexOf("full")?{left:l+r.width+"px",top:p+"px",height:r.height+"px"}:-1!==i.indexOf("enclose")?{left:l+r.width+"px",top:p+-1+"px",height:r.height+"px",width:r.width+"px"}:{left:f,top:y}:-1!==i.indexOf("full")?{left:l-8+"px",top:p+-1+"px",height:r.height+"px"}:-1!==i.indexOf("enclose")?{left:l-1+"px",top:p+-1+"px",height:r.height+"px",width:r.width+"px"}:{left:f,top:y},d(o,R)};var O=Object.freeze({__proto__:null,create:v,element:b});const E=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"span";const r=document.createElement(n);return r.setAttribute("title",t+"px"),r.setAttribute("data-measure",parseInt(t,10)+"px"),c(r,`ph speccer measure ${e}`),r},L=t=>{if(!t)return;const n=t.getBoundingClientRect(),r=t.getAttribute("data-speccer-measure");if(""===r)return;const i=t.offsetTop,o=t.offsetLeft;if(-1!==r.indexOf("width"))if(-1!==r.indexOf("bottom")){const r=E(n.width,"width bottom");x.indexOf(t.nodeName)>=0?e(t.closest("table"),r):e(t,r),d(r,{left:o+"px",top:i+n.height+1+"px",width:n.width+"px"})}else{const r=E(n.width,"width top");x.indexOf(t.nodeName)>=0?e(t.closest("table"),r):e(t,r);const a=r.getBoundingClientRect();d(r,{left:o+"px",top:i-a.height+1+"px",width:n.width+"px"})}else if(-1!==r.indexOf("height"))if(-1!==r.indexOf("right")){const r=E(n.height,"height right");x.indexOf(t.nodeName)>=0?e(t.closest("table"),r):e(t,r),d(r,{left:o+n.width+"px",top:i+"px",height:n.height+"px"})}else{const r=E(n.height,"height left");x.indexOf(t.nodeName)>=0?e(t.closest("table"),r):e(t,r);const a=r.getBoundingClientRect();d(r,{left:o-a.width+"px",top:i+"px",height:n.height+"px"})}};var R=Object.freeze({__proto__:null,element:L});const B=t=>parseFloat(t).toFixed(3),T=(t,e)=>{const n=document.createElement("div");return n.innerHTML=t,c(n,`ph speccer typography ${e}`),n},S=function(){var t=i(a.mark((function t(n){var r,i,o,c,s,l,p,f,g,y,m,w,v,b,O,E,L,R,S,A,C;return a.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return r=n.getAttribute("data-speccer-typography"),t.next=3,u(n);case 3:if("none"!==(i=t.sent).display&&"hidden"!==i.visibility){t.next=6;break}return t.abrupt("return");case 6:n.classList.add("is-specced"),"static"===u(n.parentElement).position&&window.requestAnimationFrame((()=>{n.parentElement.style.position="relative"})),o=h(i),c=n.getBoundingClientRect(),s=`\n font-styles: {<ul class="speccer-styles"> <li><span class="property">font-family:</span> ${o.fontFamily};</li> <li><span class="property">font-size:</span> ${o.fontSize} / ${parseInt(o.fontSize,10)/16}rem;</li> <li><span class="property">font-weight:</span> ${o.fontWeight};</li> <li><span class="property">font-variation-settings:</span> ${o.fontVariationSettings};</li> <li><span class="property">line-height:</span> ${o.lineHeight} / ${parseInt(o.lineHeight,10)/16}rem;</li> <li><span class="property">letter-spacing:</span> ${o.letterSpacing};</li> <li><span class="property">font-style:</span> ${o.fontStyle};</li></ul>}`,l=T(s,r),p=0,f=0,(g=x.indexOf(n.nodeName)>=0)?(y=n.parentElement,m=window.getComputedStyle(y.parentElement),e(y,l),p=y.getBoundingClientRect().top-parseInt(m.getPropertyValue("padding-top"),10),f=y.getBoundingClientRect().left-parseInt(m.getPropertyValue("padding-left"),10)):e(n,l),w=l.getBoundingClientRect(),v=(g?w.left-f:n.offsetLeft)-w.width-48+"px",b=B((g?w.top-p:n.offsetTop)-w.height/2+c.height/2)+"px",O=(g?w.left-f:n.offsetLeft)+c.width+48+"px",E=B((g?w.top-p:n.offsetTop)-w.height/2+c.height/2)+"px",L=B((g?w.left-f:n.offsetLeft)-w.width/2+c.width/2)+"px",R=(g?w.top-p:n.offsetTop)-w.height-48+"px",S=B((g?w.left-f:n.offsetLeft)-w.width/2+c.width/2)+"px",A=(g?w.top-p:n.offsetTop)+c.height+48+"px",C={left:v,top:b},-1!==r.indexOf("right")?C={left:O,top:E}:-1!==r.indexOf("top")?C={left:L,top:R}:-1!==r.indexOf("bottom")&&(C={left:S,top:A}),d(l,C);case 29:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}();const A=t=>{const e=(n=()=>{t()},r=300,function(){var t=this,e=arguments,a=function(){o=null,i||n.apply(t,e)},c=i&&!o;clearTimeout(o),o=setTimeout(a,r),c&&n.apply(t,e)});var n,r,i,o;window.removeEventListener("resize",e),window.addEventListener("resize",e)},C=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",t):t()},_=()=>{n(".speccer"),n(".dissection");const t=document.querySelectorAll("[data-speccer],[data-speccer] *:not(td)"),e=document.querySelectorAll("[data-speccer-measure]"),r=document.querySelectorAll("[data-speccer-typography]"),i=document.querySelectorAll("[data-anatomy-section] [data-anatomy]");t.forEach(m),e.forEach(L),r.forEach(S),i.forEach(b)},N=w,j=O,I=R,k=Object.freeze({__proto__:null,create:T,element:S});(t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");-1===n.indexOf("speccer.js")&&-1===n.indexOf("JaXpOK.js")||(e.hasAttribute("data-manual")?(t=>{window.speccer=t})(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?C(t):e.hasAttribute("data-lazy")?(()=>{let t=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(m(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer],[data-speccer] *:not(td)").forEach((e=>{t.observe(e)}));let e=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(L(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer-measure]").forEach((t=>{e.observe(t)}));let n=new IntersectionObserver(((t,e)=>{t.forEach((t=>{const n=t.target.querySelectorAll("[data-anatomy]");t.intersectionRatio>0&&(n.forEach(b),e.unobserve(t.target))}))}));document.querySelectorAll("[data-anatomy-section]").forEach((t=>{n.observe(t)}))})():C(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||A(t))}})(_),t.default=_,t.dissect=j,t.measure=I,t.spacing=N,t.typography=k,Object.defineProperty(t,"__esModule",{value:!0})}));
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).speccer={})}(this,(function(t){"use strict";const e=(t,e,n="noop")=>{t&&(!e||e&&0===e.length||e.trim().split(" ").filter((t=>t!==n)).forEach((e=>t.classList.add(e))))},n=(t,e)=>`${t} ${Object.keys(e).filter((t=>e[t])).join(" ")}`.trim(),i=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],o=t=>parseInt(t,10),p=t=>o(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,s=()=>new Promise(requestAnimationFrame),a=async(t,e)=>{!t||!e||"string"==typeof e||"number"==typeof e||"boolean"==typeof e||Array.isArray(e)&&0===e.length||0===Object.keys(e).length&&e.constructor===Object||(await s(),Array.isArray(e)?e.forEach((e=>t.style[e.key]=e.value)):Object.keys(e).forEach((n=>t.style[n]=e[n])))},r=async t=>(await s(),getComputedStyle(t,null)),d=(t,e,n)=>t-e.width/2+n.width/2,l=(t,e,n)=>t-e.height/2+n.height/2,h=()=>{const t=getComputedStyle(document.body),e=parseInt(t.paddingLeft)+parseInt(t.marginLeft);return{top:parseInt(t.paddingTop)+parseInt(t.marginTop),left:e}},c=(t="",n="span")=>{const i=document.createElement(n),o=document.createTextNode(t+"");return i.appendChild(o),i.setAttribute("title",t+"px"),e(i,"ph speccer spacing"),i},f=async t=>{const n={},i=await r(t);if("none"===i.display||"hidden"===i.visibility||!t.parentElement)return;t.classList.add("is-specced"),n.styles=(t=>{const{marginTop:e,marginBottom:n,marginLeft:i,marginRight:o,paddingTop:p,paddingBottom:s,paddingLeft:a,paddingRight:r}=t;return{marginTop:e,marginBottom:n,marginLeft:i,marginRight:o,paddingTop:p,paddingBottom:s,paddingLeft:a,paddingRight:r}})(i);const p=t.getBoundingClientRect(),s=h(),d=t.offsetTop+s.top,l=t.offsetLeft+s.left;if("0px"!==n.styles.marginTop){const i=c(o(n.styles.marginTop));document.body.appendChild(i),e(i,"margin top"),a(i,{height:n.styles.marginTop,width:p.width+"px",transform:t.style.transform,left:l+"px",top:d-parseInt(n.styles.marginTop,10)+"px"})}if("0px"!==n.styles.marginRight){const i=c(o(n.styles.marginRight));e(i,"margin right"),a(i,{height:p.height+"px",width:n.styles.marginRight,transform:t.style.transform,left:l+parseInt(p.width+"",10)+"px",top:d+"px"}),document.body.appendChild(i)}if("0px"!==n.styles.marginBottom){const i=c(o(n.styles.marginBottom));e(i,"margin bottom"),a(i,{height:n.styles.marginBottom,width:p.width+"px",transform:t.style.transform,left:l+"px",top:d+parseInt(p.height+"",10)+"px"}),document.body.appendChild(i)}if("0px"!==n.styles.marginLeft){const i=c(o(n.styles.marginLeft));e(i,"margin left"),a(i,{height:p.height+"px",width:n.styles.marginLeft,transform:t.style.transform,left:l-parseInt(n.styles.marginLeft,10)+"px",top:d+"px"}),document.body.appendChild(i)}if("0px"!==n.styles.paddingTop){const i=c(o(n.styles.paddingTop));e(i,"padding top"),a(i,{height:n.styles.paddingTop,width:p.width+"px",transform:t.style.transform,left:l+"px",top:d+"px"}),document.body.appendChild(i)}if("0px"!==n.styles.paddingBottom){const i=c(o(n.styles.paddingBottom));e(i,"padding bottom"),a(i,{height:n.styles.paddingBottom,width:p.width+"px",transform:t.style.transform,left:l+"px",top:d+(parseInt(p.height+"",10)-parseInt(n.styles.paddingBottom,10))+"px"}),document.body.appendChild(i)}if("0px"!==n.styles.paddingRight){const i=c(o(n.styles.paddingRight));e(i,"padding right"),a(i,{height:p.height+"px",width:n.styles.paddingRight,transform:t.style.transform,left:l+(parseInt(p.width+"",10)-parseInt(n.styles.paddingRight,10))+"px",top:d+"px"}),document.body.appendChild(i)}if("0px"!==n.styles.paddingLeft){const i=c(o(n.styles.paddingLeft));e(i,"padding left"),a(i,{height:p.height+"px",width:n.styles.paddingLeft,transform:t.style.transform,left:l+"px",top:d+"px"}),document.body.appendChild(i)}};var g,m,u=Object.freeze({__proto__:null,create:c,element:f});!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(g||(g={})),function(t){t.Outline="outline",t.Enclose="enclose",t.Full="full",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(m||(m={}));const x=(t,e=3)=>parseFloat(t+"").toFixed(e),y=(t="",i,o="span")=>{const p=document.createElement(o),s=document.createTextNode(t),a={};null!==i&&""!==i&&(a[i]=!0),-1===i.indexOf(m.Full)&&-1===i.indexOf(m.Enclose)?p.appendChild(s):-1===i.indexOf(m.Full)&&-1===i.indexOf(m.Enclose)||p.setAttribute("data-dissection-counter",t);const r=n("ph speccer dissection",a);return e(p,r),p},w=async(t,e)=>{if(!t)return;const n=t.getAttribute("data-anatomy")||"";if(!n||""===n)return;const o=y(i[e],n);document.body.appendChild(o);const s=((t,e,n)=>{const i=e.getBoundingClientRect(),o=p(n),s=n.getBoundingClientRect(),a=h(),r=e.offsetTop+a.top,c=e.offsetLeft+a.left,f=c-s.width-o+"px",g=x(l(r,s,i))+"px",u=c+i.width+o+"px",y=x(l(r,s,i))+"px",w=x(d(c,s,i))+"px",b=r-s.height-o+"px",O=x(d(c,s,i))+"px",E=r+i.height+o+"px";let A={};return A=-1!==t.indexOf(m.Outline)?-1!==t.indexOf(m.Left)?-1!==t.indexOf(m.Full)?{left:c-8+"px",top:r+-1+"px",height:i.height+"px"}:-1!==t.indexOf(m.Enclose)?{left:c-1+"px",top:r+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:f,top:g}:-1!==t.indexOf(m.Right)?-1!==t.indexOf(m.Full)?{left:c+i.width+"px",top:r+-1+"px",height:i.height+"px"}:-1!==t.indexOf(m.Enclose)?{left:c+-1+"px",top:r+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:u,top:y}:-1!==t.indexOf(m.Top)?-1!==t.indexOf(m.Full)?{top:r+-8+"px",left:c+-1+"px",width:i.width+"px"}:-1!==t.indexOf(m.Enclose)?{top:r+-1+"px",left:c+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:w,top:b}:-1!==t.indexOf(m.Bottom)?-1!==t.indexOf(m.Full)?{top:r+i.height+"px",left:c+-1+"px",width:i.width+"px"}:-1!==t.indexOf(m.Enclose)?{top:r+-1+"px",left:c+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:O,top:E}:-1!==t.indexOf(m.Full)?{left:c+i.width+"px",top:r+"px",height:i.height+"px"}:-1!==t.indexOf(m.Enclose)?{left:c+i.width+"px",top:r+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:f,top:g}:-1!==t.indexOf(m.Full)?{left:c-8+"px",top:r+-1+"px",height:i.height+"px"}:-1!==t.indexOf(m.Enclose)?{left:c-1+"px",top:r+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:f,top:g},A})(n,t,o);a(o,s)};const b=(t="",n="",i="span")=>{const o=document.createElement(i);return o.setAttribute("title",t+"px"),o.setAttribute("data-measure",parseInt(t+"",10)+"px"),e(o,`ph speccer measure ${n}`),o},O=t=>{if(!t)return;const e=t.getBoundingClientRect(),n=t.getAttribute("data-speccer-measure");if(""===n||!n)return;const i=h(),o=t.offsetTop+i.top,p=t.offsetLeft+i.left;if(-1!==n.indexOf("width"))if(-1!==n.indexOf("bottom")){const t=b(e.width,"width bottom");document.body.appendChild(t),a(t,{left:p+"px",top:o+e.height+1+"px",width:e.width+"px"})}else{const t=b(e.width,"width top");document.body.appendChild(t);const n=t.getBoundingClientRect();a(t,{left:p+"px",top:o-n.height+1+"px",width:e.width+"px"})}else if(-1!==n.indexOf("height"))if(-1!==n.indexOf("right")){const t=b(e.height,"height right");document.body.appendChild(t),a(t,{left:p+e.width+"px",top:o+"px",height:e.height+"px"})}else{const t=b(e.height,"height left");document.body.appendChild(t);const n=t.getBoundingClientRect();a(t,{left:p-n.width+"px",top:o+"px",height:e.height+"px"})}};const E=(t,i)=>{const o=document.createElement("div"),p={};null!==i&&""!==i&&(p[i]=!0);const s=n("ph speccer typography",p);return o.innerHTML=t,e(o,s),o};const A=t=>{const e=()=>function(t,e,n){let i;return function(){const o=this,p=arguments,s=function(){i=null,n||t.apply(o,p)},a=n&&!i;i&&clearTimeout(i),i=setTimeout(s,e),a&&t.apply(o,p)}}((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},C=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},L=u,T=Object.freeze({__proto__:null,create:y,element:w}),S=Object.freeze({__proto__:null,element:O}),R=Object.freeze({__proto__:null,create:E,element:async t=>{if(!t)return;const e=t.getAttribute("data-speccer-typography"),n=await r(t);if("none"===n.display||"hidden"===n.visibility||!t.parentElement)return;t.classList.add("is-specced");const i=await(async t=>{const e=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:i,fontSize:o,fontStyle:p,fontVariationSettings:s,fontWeight:a}=t;return{lineHeight:e,letterSpacing:n,fontFamily:i,fontSize:o,fontStyle:p,fontVariationSettings:s,fontWeight:a}})(await r(t));return`\nfont-styles: {<ul class="speccer-styles"> <li><span class="property">font-family:</span> ${e.fontFamily};</li> <li><span class="property">font-size:</span> ${e.fontSize} / ${parseInt(e.fontSize,10)/16}rem;</li> <li><span class="property">font-weight:</span> ${e.fontWeight};</li> <li><span class="property">font-variation-settings:</span> ${e.fontVariationSettings};</li> <li><span class="property">line-height:</span> ${e.lineHeight} / ${parseInt(e.lineHeight,10)/16}rem;</li> <li><span class="property">letter-spacing:</span> ${e.letterSpacing};</li> <li><span class="property">font-style:</span> ${e.fontStyle};</li></ul>}`})(t),o=E(i,e);document.body.appendChild(o);const s=((t,e,n)=>{const i=e.getBoundingClientRect(),o=p(n),s=n.getBoundingClientRect(),a=h(),r=e.offsetTop+a.top,c=e.offsetLeft+a.left,f=c-s.width-o+"px",m=x(l(r,s,i))+"px",u=c+i.width+o+"px",y=x(l(r,s,i))+"px",w=x(d(c,s,i))+"px",b=r-s.height-o+"px",O=x(d(c,s,i))+"px",E=r+i.height+o+"px";let A={left:f,top:m};return t&&-1!==t.indexOf(g.Right)?A={left:u,top:y}:t&&-1!==t.indexOf(g.Top)?A={left:w,top:b}:t&&-1!==t.indexOf(g.Bottom)&&(A={left:O,top:E}),A})(e,t,o);a(o,s)}}),B=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".speccer");const t=document.querySelectorAll("[data-speccer],[data-speccer] *:not(td)"),e=document.querySelectorAll("[data-speccer-measure]"),n=document.querySelectorAll("[data-speccer-typography]"),i=document.querySelectorAll("[data-anatomy-section] [data-anatomy]");t.forEach(L.element),e.forEach(S.element),n.forEach(R.element),i.forEach(T.element)};(t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");!n||-1===n.indexOf("speccer.js")&&-1===n.indexOf("JaXpOK.js")||(e.hasAttribute("data-manual")?(t=>{window.speccer=t})(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?C(t):e.hasAttribute("data-lazy")?(()=>{const t=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(f(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer],[data-speccer] *:not(td)").forEach((e=>{t.observe(e)}));const e=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(O(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer-measure]").forEach((t=>{e.observe(t)}));const n=new IntersectionObserver(((t,e)=>{t.forEach((t=>{const n=t.target.querySelectorAll("[data-anatomy]");t.intersectionRatio>0&&(n.forEach(w),e.unobserve(t.target))}))}));document.querySelectorAll("[data-anatomy-section]").forEach((t=>{n.observe(t)}))})():C(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||A(t))}})(B),t.default=B,t.dissect=T,t.measure=S,t.spacing=L,t.typography=R,Object.defineProperty(t,"__esModule",{value:!0})}));
|
|
2
|
+
//# sourceMappingURL=speccer.js.map
|
package/speccer.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"speccer.js","sources":["src/lib/node.ts","src/lib/classnames.ts","src/lib/constants.ts","src/lib/css.ts","src/lib/debounce.ts","src/lib/styles.ts","src/lib/position.ts","src/tasks/spec.ts","src/enums/area.ts","src/lib/number.ts","src/tasks/dissect.ts","src/helpers/dissect/styles.ts","src/tasks/measure.ts","src/helpers/typography/position.ts","src/tasks/typography.ts","src/lib/resize.ts","src/browser.ts","src/index.ts","src/helpers/typography/template.ts"],"sourcesContent":["export const after = (el: HTMLElement | null, newSibling: HTMLElement) =>\n el && el.insertAdjacentElement('afterend', newSibling);\n\nexport const removeAll = (selector: string, el: Document = document) => {\n [].forEach.call(el.querySelectorAll(selector), function (e: HTMLElement) {\n e.remove();\n });\n};\n","/* eslint no-console:0 */\n'use strict';\n\nexport const set = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls || (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.add(cl));\n};\n\nexport const toggle = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls || (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.toggle(cl));\n};\n\nexport const remove = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls || (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.remove(cl));\n};\n\nexport const cx = (cls: string, cls_obj: {}): string =>\n `${cls} ${Object.keys(cls_obj)\n .filter((classname) => cls_obj[classname])\n .join(' ')}`.trim();\n","/* eslint no-console:0 */\n'use strict';\n\nexport const SPECCER_LITERALS = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];\n\nexport const SPECCER_TAGS_TO_AVOID = ['TR', 'TH', 'TD', 'TBODY', 'THEAD', 'TFOOT'];\n\nexport const SPECCER_DEFAULT_PIN_SPACE = 48;\n","/* eslint no-console:0 */\n'use strict';\nimport { SPECCER_DEFAULT_PIN_SPACE } from './constants';\nimport { SpacingCSSPropertiesType, TypographyCSSPropertiesType } from '../types/css';\n\nexport const getNumberValue = (value: string): number => parseInt(value, 10);\n\nexport const normalizeNumberValue = (value: string | number): number => {\n const _value = parseFloat(value + '');\n\n return (_value >= 0 && _value < 1) || (_value <= 0 && _value > -1) ? 0 : _value;\n};\n\nexport const getSpacing = (style: SpacingCSSPropertiesType): SpacingCSSPropertiesType => {\n const { marginTop, marginBottom, marginLeft, marginRight, paddingTop, paddingBottom, paddingLeft, paddingRight } =\n style;\n\n return {\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight\n };\n};\n\nexport const getTypography = (style: TypographyCSSPropertiesType): TypographyCSSPropertiesType => {\n const { lineHeight, letterSpacing, fontFamily, fontSize, fontStyle, fontVariationSettings, fontWeight } = style;\n\n return {\n lineHeight,\n letterSpacing,\n fontFamily,\n fontSize,\n fontStyle,\n fontVariationSettings,\n fontWeight\n };\n};\n\nexport const pinSpace = (el: HTMLElement): number =>\n getNumberValue(getComputedStyle(el).getPropertyValue('--ph-speccer-pin-space')) || SPECCER_DEFAULT_PIN_SPACE;\n","/* eslint no-console:0 */\n'use strict';\n\nexport const waitForFrame = () => new Promise(requestAnimationFrame);\n\nconst debounce = function (func: Function, wait: number, immediate?: boolean): Function {\n let timeout: null | ReturnType<typeof setTimeout>;\n\n return function (this: any) {\n const context = this;\n const args = arguments;\n const later = function () {\n timeout = null;\n\n if (!immediate) func.apply(context, args);\n };\n const callNow = immediate && !timeout;\n\n if (timeout) {\n clearTimeout(timeout);\n }\n\n timeout = setTimeout(later, wait);\n\n if (callNow) func.apply(context, args);\n };\n};\n\nexport default debounce;\n","/* eslint no-console:0 */\n'use strict';\nimport { waitForFrame } from './debounce';\n\nexport const add = async (el: HTMLElement, styles: [] | object) => {\n if (\n !el ||\n !styles ||\n typeof styles === 'string' ||\n typeof styles === 'number' ||\n typeof styles === 'boolean' ||\n (Array.isArray(styles) && styles.length === 0) ||\n (Object.keys(styles).length === 0 && styles.constructor === Object)\n ) {\n return;\n }\n\n await waitForFrame();\n\n if (Array.isArray(styles)) {\n styles.forEach((style: { key: string; value: string }) => (el.style[style.key] = style.value));\n } else {\n Object.keys(styles).forEach((key) => (el.style[key] = styles[key]));\n }\n};\n\nexport const get = async (el: HTMLElement): Promise<CSSStyleDeclaration> => {\n await waitForFrame();\n\n return getComputedStyle(el, null);\n};\n","export const get_horizontal_center_of_els = (modifier: number, startRect: DOMRect, targetRect: DOMRect): number =>\n modifier - startRect.width / 2 + targetRect.width / 2;\n\nexport const get_vertical_center_of_els = (modifier: number, startRect: DOMRect, targetRect: DOMRect): number =>\n modifier - startRect.height / 2 + targetRect.height / 2;\n\nexport const get_body_correction = () => {\n const _body_style = getComputedStyle(document.body);\n const _body_left_correction = parseInt(_body_style.paddingLeft) + parseInt(_body_style.marginLeft);\n const _body_top_correction = parseInt(_body_style.paddingTop) + parseInt(_body_style.marginTop);\n\n return {\n top: _body_top_correction,\n left: _body_left_correction\n };\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport * as classnames from '../lib/classnames';\nimport * as css from '../lib/css';\nimport * as styles from '../lib/styles';\nimport { get_body_correction } from '../lib/position';\nimport { SpeccerElType } from '../types/speccer';\n\nexport const create = (text: string | number = '', tag = 'span') => {\n const _el = document.createElement(tag);\n const _text_content = document.createTextNode(text + '');\n\n _el.appendChild(_text_content);\n _el.setAttribute('title', text + 'px');\n classnames.set(_el, 'ph speccer spacing');\n\n return _el;\n};\n\nexport const element = async (el: HTMLElement) => {\n const _speccer_el: SpeccerElType = {};\n const _el_style = await styles.get(el);\n\n if (_el_style.display === 'none' || _el_style.visibility === 'hidden' || !el.parentElement) {\n return;\n }\n\n el.classList.add('is-specced');\n\n _speccer_el.styles = css.getSpacing(_el_style);\n\n const _target_rect = el.getBoundingClientRect();\n const _body_correction = get_body_correction();\n const _el_offset_top = el.offsetTop + _body_correction.top;\n const _el_offset_left = el.offsetLeft + _body_correction.left;\n\n if (_speccer_el.styles['marginTop'] !== '0px') {\n const _speccer_margin_top_el = create(css.getNumberValue(_speccer_el.styles.marginTop));\n\n document.body.appendChild(_speccer_margin_top_el);\n\n classnames.set(_speccer_margin_top_el, 'margin top');\n styles.add(_speccer_margin_top_el, {\n height: _speccer_el.styles.marginTop,\n width: _target_rect.width + 'px',\n transform: el.style.transform,\n left: _el_offset_left + 'px',\n top: _el_offset_top - parseInt(_speccer_el.styles.marginTop, 10) + 'px'\n });\n }\n\n if (_speccer_el.styles['marginRight'] !== '0px') {\n const _speccer_margin_right_el = create(css.getNumberValue(_speccer_el.styles.marginRight));\n\n classnames.set(_speccer_margin_right_el, 'margin right');\n\n styles.add(_speccer_margin_right_el, {\n height: _target_rect.height + 'px',\n width: _speccer_el.styles.marginRight,\n transform: el.style.transform,\n left: _el_offset_left + parseInt(_target_rect.width + '', 10) + 'px',\n top: _el_offset_top + 'px'\n });\n\n document.body.appendChild(_speccer_margin_right_el);\n }\n\n if (_speccer_el.styles['marginBottom'] !== '0px') {\n const _speccer_margin_bottom_el = create(css.getNumberValue(_speccer_el.styles.marginBottom));\n\n classnames.set(_speccer_margin_bottom_el, 'margin bottom');\n\n styles.add(_speccer_margin_bottom_el, {\n height: _speccer_el.styles.marginBottom,\n width: _target_rect.width + 'px',\n transform: el.style.transform,\n left: _el_offset_left + 'px',\n top: _el_offset_top + parseInt(_target_rect.height + '', 10) + 'px'\n });\n\n document.body.appendChild(_speccer_margin_bottom_el);\n }\n\n if (_speccer_el.styles['marginLeft'] !== '0px') {\n const _speccer_margin_left_el = create(css.getNumberValue(_speccer_el.styles.marginLeft));\n\n classnames.set(_speccer_margin_left_el, 'margin left');\n\n styles.add(_speccer_margin_left_el, {\n height: _target_rect.height + 'px',\n width: _speccer_el.styles.marginLeft,\n transform: el.style.transform,\n left: _el_offset_left - parseInt(_speccer_el.styles.marginLeft, 10) + 'px',\n top: _el_offset_top + 'px'\n });\n\n document.body.appendChild(_speccer_margin_left_el);\n }\n\n if (_speccer_el.styles['paddingTop'] !== '0px') {\n const _speccer_padding_top_el = create(css.getNumberValue(_speccer_el.styles.paddingTop));\n\n classnames.set(_speccer_padding_top_el, 'padding top');\n\n styles.add(_speccer_padding_top_el, {\n height: _speccer_el.styles.paddingTop,\n width: _target_rect.width + 'px',\n transform: el.style.transform,\n left: _el_offset_left + 'px',\n top: _el_offset_top + 'px'\n });\n\n document.body.appendChild(_speccer_padding_top_el);\n }\n\n if (_speccer_el.styles['paddingBottom'] !== '0px') {\n const _speccer_padding_bottom_el = create(css.getNumberValue(_speccer_el.styles.paddingBottom));\n\n classnames.set(_speccer_padding_bottom_el, 'padding bottom');\n\n styles.add(_speccer_padding_bottom_el, {\n height: _speccer_el.styles.paddingBottom,\n width: _target_rect.width + 'px',\n transform: el.style.transform,\n left: _el_offset_left + 'px',\n top:\n _el_offset_top +\n (parseInt(_target_rect.height + '', 10) - parseInt(_speccer_el.styles.paddingBottom, 10)) +\n 'px'\n });\n\n document.body.appendChild(_speccer_padding_bottom_el);\n }\n\n if (_speccer_el.styles['paddingRight'] !== '0px') {\n const _speccer_padding_right_el = create(css.getNumberValue(_speccer_el.styles.paddingRight));\n\n classnames.set(_speccer_padding_right_el, 'padding right');\n\n styles.add(_speccer_padding_right_el, {\n height: _target_rect.height + 'px',\n width: _speccer_el.styles.paddingRight,\n transform: el.style.transform,\n left:\n _el_offset_left +\n (parseInt(_target_rect.width + '', 10) - parseInt(_speccer_el.styles.paddingRight, 10)) +\n 'px',\n top: _el_offset_top + 'px'\n });\n\n document.body.appendChild(_speccer_padding_right_el);\n }\n\n if (_speccer_el.styles['paddingLeft'] !== '0px') {\n const _speccer_padding_left_el = create(css.getNumberValue(_speccer_el.styles.paddingLeft));\n\n classnames.set(_speccer_padding_left_el, 'padding left');\n\n styles.add(_speccer_padding_left_el, {\n height: _target_rect.height + 'px',\n width: _speccer_el.styles.paddingLeft,\n transform: el.style.transform,\n left: _el_offset_left + 'px',\n top: _el_offset_top + 'px'\n });\n\n document.body.appendChild(_speccer_padding_left_el);\n }\n};\n","export enum SpeccerAreaEnum {\n Empty = '',\n Left = 'left',\n Right = 'right',\n Bottom = 'bottom',\n Top = 'top',\n}\n\nexport enum DissectAreaEnum {\n Outline = 'outline',\n Enclose = 'enclose',\n Full = 'full',\n Left = 'left',\n Right = 'right',\n Bottom = 'bottom',\n Top = 'top',\n}\n","/* eslint no-console:0 */\n'use strict';\n\nexport const decimal = (number: string | number, decimals = 3): string => parseFloat(number + '').toFixed(decimals);\n","/* eslint no-console:0 */\n'use strict';\n\nimport * as styles from '../lib/styles';\nimport * as classnames from '../lib/classnames';\nimport { DissectAreaEnum } from '../enums/area';\nimport * as helpers from '../helpers/dissect';\nimport { SPECCER_LITERALS } from '../lib/constants';\n\nexport const create = (textContent = '', area: string, n = 'span') => {\n const _el = document.createElement(n);\n const _text_node = document.createTextNode(textContent);\n const _extra_class_names = {};\n\n if (area !== null && area !== '') {\n _extra_class_names[area] = true;\n }\n\n if (area.indexOf(DissectAreaEnum.Full) === -1 && area.indexOf(DissectAreaEnum.Enclose) === -1) {\n _el.appendChild(_text_node);\n } else if (area.indexOf(DissectAreaEnum.Full) !== -1 || area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _el.setAttribute('data-dissection-counter', textContent);\n }\n\n const _class_names = classnames.cx('ph speccer dissection', _extra_class_names);\n\n classnames.set(_el, _class_names);\n\n return _el;\n};\n\nexport const element = async (el: HTMLElement, dissectIndex: number) => {\n if (!el) return;\n\n const _area: string | null = el.getAttribute('data-anatomy') || '';\n\n if (!_area || _area === '') return;\n\n const _dissection_el = create(SPECCER_LITERALS[dissectIndex], _area);\n\n document.body.appendChild(_dissection_el);\n\n const _dissection_styles = helpers.styles(_area, el, _dissection_el);\n\n styles.add(_dissection_el, _dissection_styles);\n};\n","import * as css from '../../lib/css';\nimport * as number from '../../lib/number';\nimport { get_body_correction } from '../../lib/position';\nimport { get_horizontal_center_of_els, get_vertical_center_of_els } from '../../lib/position';\nimport { DissectAreaEnum } from '../../enums/area';\n\nexport const styles = (area: string, el: HTMLElement, dissectionEl: HTMLElement) => {\n const _el_rect = el.getBoundingClientRect();\n const SPECCER_PIN_SPACE = css.pinSpace(dissectionEl);\n const _dissection_el_rect = dissectionEl.getBoundingClientRect();\n const _body_correction = get_body_correction();\n const _el_offset_top = el.offsetTop + _body_correction.top;\n const _el_offset_left = el.offsetLeft + _body_correction.left;\n const _left_layout_position_left = _el_offset_left - _dissection_el_rect.width - SPECCER_PIN_SPACE + 'px';\n const _left_layout_position_top =\n number.decimal(get_vertical_center_of_els(_el_offset_top, _dissection_el_rect, _el_rect)) + 'px';\n const _right_layout_position_left = _el_offset_left + _el_rect.width + SPECCER_PIN_SPACE + 'px';\n const _right_layout_position_top =\n number.decimal(get_vertical_center_of_els(_el_offset_top, _dissection_el_rect, _el_rect)) + 'px';\n const _top_layout_position_left =\n number.decimal(get_horizontal_center_of_els(_el_offset_left, _dissection_el_rect, _el_rect)) + 'px';\n const _top_layout_position_top = _el_offset_top - _dissection_el_rect.height - SPECCER_PIN_SPACE + 'px';\n const _bottom_layout_position_left =\n number.decimal(get_horizontal_center_of_els(_el_offset_left, _dissection_el_rect, _el_rect)) + 'px';\n const _bottom_layout_position_top = _el_offset_top + _el_rect.height + SPECCER_PIN_SPACE + 'px';\n\n let _dissection_styles = {};\n\n if (area.indexOf(DissectAreaEnum.Outline) !== -1) {\n if (area.indexOf(DissectAreaEnum.Left) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n left: _el_offset_left - 8 + 'px',\n top: _el_offset_top + -1 + 'px',\n height: _el_rect.height + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n left: _el_offset_left - 1 + 'px',\n top: _el_offset_top + -1 + 'px',\n height: _el_rect.height + 'px',\n width: _el_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n }\n } else if (area.indexOf(DissectAreaEnum.Right) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n left: _el_offset_left + _el_rect.width + 'px',\n top: _el_offset_top + -1 + 'px',\n height: _el_rect.height + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n left: _el_offset_left + -1 + 'px',\n top: _el_offset_top + -1 + 'px',\n height: _el_rect.height + 'px',\n width: _el_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _right_layout_position_left,\n top: _right_layout_position_top\n };\n }\n } else if (area.indexOf(DissectAreaEnum.Top) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n top: _el_offset_top + -8 + 'px',\n left: _el_offset_left + -1 + 'px',\n width: _el_rect.width + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n top: _el_offset_top + -1 + 'px',\n left: _el_offset_left + -1 + 'px',\n height: _el_rect.height + 'px',\n width: _el_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _top_layout_position_left,\n top: _top_layout_position_top\n };\n }\n } else if (area.indexOf(DissectAreaEnum.Bottom) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n top: _el_offset_top + _el_rect.height + 'px',\n left: _el_offset_left + -1 + 'px',\n width: _el_rect.width + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n top: _el_offset_top + -1 + 'px',\n left: _el_offset_left + -1 + 'px',\n height: _el_rect.height + 'px',\n width: _el_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _bottom_layout_position_left,\n top: _bottom_layout_position_top\n };\n }\n } else {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n left: _el_offset_left + _el_rect.width + 'px',\n top: _el_offset_top + 'px',\n height: _el_rect.height + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n left: _el_offset_left + _el_rect.width + 'px',\n top: _el_offset_top + -1 + 'px',\n height: _el_rect.height + 'px',\n width: _el_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n }\n }\n } else {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n left: _el_offset_left - 8 + 'px',\n top: _el_offset_top + -1 + 'px',\n height: _el_rect.height + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n left: _el_offset_left - 1 + 'px',\n top: _el_offset_top + -1 + 'px',\n height: _el_rect.height + 'px',\n width: _el_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n }\n }\n\n return _dissection_styles;\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport * as classnames from '../lib/classnames';\nimport * as styles from '../lib/styles';\nimport { get_body_correction } from '../lib/position';\n\nconst create = (text: string | number = '', area: string | null = '', tag = 'span') => {\n const _el = document.createElement(tag);\n\n _el.setAttribute('title', text + 'px');\n _el.setAttribute('data-measure', parseInt(text + '', 10) + 'px');\n\n classnames.set(_el, `ph speccer measure ${area}`);\n\n return _el;\n};\n\nexport const element = (el: HTMLElement) => {\n if (!el) return;\n\n const _el_rect = el.getBoundingClientRect();\n const _area: string | null = el.getAttribute('data-speccer-measure');\n\n if (_area === '' || !_area) {\n return;\n }\n\n const _body_correction = get_body_correction();\n const _el_offset_top = el.offsetTop + _body_correction.top;\n const _el_offset_left = el.offsetLeft + _body_correction.left;\n\n if (_area.indexOf('width') !== -1) {\n if (_area.indexOf('bottom') !== -1) {\n const _measure_el = create(_el_rect.width, 'width bottom');\n\n document.body.appendChild(_measure_el);\n\n styles.add(_measure_el, {\n left: _el_offset_left + 'px',\n top: _el_offset_top + _el_rect.height + 1 + 'px',\n width: _el_rect.width + 'px'\n });\n } else {\n const _measure_el = create(_el_rect.width, 'width top');\n\n document.body.appendChild(_measure_el);\n\n const _measure_rect = _measure_el.getBoundingClientRect();\n\n styles.add(_measure_el, {\n left: _el_offset_left + 'px',\n top: _el_offset_top - _measure_rect.height + 1 + 'px',\n width: _el_rect.width + 'px'\n });\n }\n } else if (_area.indexOf('height') !== -1) {\n if (_area.indexOf('right') !== -1) {\n const _measure_el = create(_el_rect.height, 'height right');\n\n document.body.appendChild(_measure_el);\n\n styles.add(_measure_el, {\n left: _el_offset_left + _el_rect.width + 'px',\n top: _el_offset_top + 'px',\n height: _el_rect.height + 'px'\n });\n } else {\n const _measure_el = create(_el_rect.height, 'height left');\n\n document.body.appendChild(_measure_el);\n\n const _measure_rect = _measure_el.getBoundingClientRect();\n\n styles.add(_measure_el, {\n left: _el_offset_left - _measure_rect.width + 'px',\n top: _el_offset_top + 'px',\n height: _el_rect.height + 'px'\n });\n }\n }\n};\n","import * as css from '../../lib/css';\nimport * as number from '../../lib/number';\nimport { get_body_correction } from '../../lib/position';\nimport { get_horizontal_center_of_els, get_vertical_center_of_els } from '../../lib/position';\nimport { SpeccerAreaEnum } from '../../enums/area';\n\nexport const position = (\n area: string | null,\n el: HTMLElement,\n speccerEl: HTMLElement\n): { left: string; top: string } => {\n const _el_rect = el.getBoundingClientRect();\n const SPECCER_PIN_SPACE = css.pinSpace(speccerEl);\n const _speccer_el_rect = speccerEl.getBoundingClientRect();\n const _body_correction = get_body_correction();\n const _el_offset_top = el.offsetTop + _body_correction.top;\n const _el_offset_left = el.offsetLeft + _body_correction.left;\n const _left_layout_position_left = _el_offset_left - _speccer_el_rect.width - SPECCER_PIN_SPACE + 'px';\n const _left_layout_position_top =\n number.decimal(get_vertical_center_of_els(_el_offset_top, _speccer_el_rect, _el_rect)) + 'px';\n const _right_layout_position_left = _el_offset_left + _el_rect.width + SPECCER_PIN_SPACE + 'px';\n const _right_layout_position_top =\n number.decimal(get_vertical_center_of_els(_el_offset_top, _speccer_el_rect, _el_rect)) + 'px';\n const _top_layout_position_left =\n number.decimal(get_horizontal_center_of_els(_el_offset_left, _speccer_el_rect, _el_rect)) + 'px';\n const _top_layout_position_top = _el_offset_top - _speccer_el_rect.height - SPECCER_PIN_SPACE + 'px';\n const _bottom_layout_position_left =\n number.decimal(get_horizontal_center_of_els(_el_offset_left, _speccer_el_rect, _el_rect)) + 'px';\n const _bottom_layout_position_top = _el_offset_top + _el_rect.height + SPECCER_PIN_SPACE + 'px';\n\n let _position = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n\n if (area && area.indexOf(SpeccerAreaEnum.Right) !== -1) {\n _position = {\n left: _right_layout_position_left,\n top: _right_layout_position_top\n };\n } else if (area && area.indexOf(SpeccerAreaEnum.Top) !== -1) {\n _position = {\n left: _top_layout_position_left,\n top: _top_layout_position_top\n };\n } else if (area && area.indexOf(SpeccerAreaEnum.Bottom) !== -1) {\n _position = {\n left: _bottom_layout_position_left,\n top: _bottom_layout_position_top\n };\n }\n\n return _position;\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport * as classnames from '../lib/classnames';\nimport * as styles from '../lib/styles';\nimport * as helpers from '../helpers/typography';\n\nexport const create = (html: string, area: string | null) => {\n const _el = document.createElement('div');\n const _extra_class_names = {};\n\n if (area !== null && area !== '') {\n _extra_class_names[area] = true;\n }\n\n const _class_names = classnames.cx('ph speccer typography', _extra_class_names);\n\n _el.innerHTML = html;\n\n classnames.set(_el, _class_names);\n\n return _el;\n};\n\nexport const element = async (el: HTMLElement) => {\n if (!el) return;\n\n const _area: string | null = el.getAttribute('data-speccer-typography');\n const _el_style = await styles.get(el);\n\n if (_el_style.display === 'none' || _el_style.visibility === 'hidden' || !el.parentElement) {\n return;\n }\n\n el.classList.add('is-specced');\n\n const _html = await helpers.template(el);\n const _speccer_el = create(_html, _area);\n\n document.body.appendChild(_speccer_el);\n\n const _position = helpers.position(_area, el, _speccer_el);\n\n styles.add(_speccer_el, _position);\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport debounce from './debounce';\n\nexport const activate = (speccer: Function) => {\n const speccerEventFunc = () =>\n debounce(() => {\n speccer();\n }, 300);\n\n window.removeEventListener('resize', speccerEventFunc);\n window.addEventListener('resize', speccerEventFunc);\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport * as resize from './lib/resize';\nimport * as spec from './tasks/spec';\nimport * as measure from './tasks/measure';\nimport * as dissect from './tasks/dissect';\n\nexport const dom = (speccer: Function) => {\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n speccer();\n });\n } else {\n // `DOMContentLoaded` already fired\n speccer();\n }\n};\n\nexport const lazy = () => {\n const _spec_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el: IntersectionObserverEntry) => {\n if (el.intersectionRatio > 0) {\n spec.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document.querySelectorAll('[data-speccer],[data-speccer] *:not(td)').forEach((el) => {\n _spec_observer.observe(el);\n });\n\n const _measure_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el) => {\n if (el.intersectionRatio > 0) {\n measure.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document.querySelectorAll('[data-speccer-measure]').forEach((el) => {\n _measure_observer.observe(el);\n });\n\n const _dissect_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el) => {\n const targets = el.target.querySelectorAll('[data-anatomy]');\n\n if (el.intersectionRatio > 0) {\n targets.forEach(dissect.element);\n observer.unobserve(el.target);\n }\n });\n });\n\n document.querySelectorAll('[data-anatomy-section]').forEach((el) => {\n _dissect_observer.observe(el);\n });\n};\n\nexport const manual = (speccer: Function) => {\n window.speccer = speccer;\n};\n\nexport const activate = (speccer: Function) => {\n const _script = document.currentScript;\n\n if (_script) {\n const _speccer_script_src = _script.getAttribute('src');\n\n if (\n _speccer_script_src &&\n (_speccer_script_src.indexOf('speccer.js') !== -1 ||\n // for codepen\n _speccer_script_src.indexOf('JaXpOK.js') !== -1)\n ) {\n if (_script.hasAttribute('data-manual')) {\n manual(speccer);\n } else if (_script.hasAttribute('data-instant')) {\n speccer();\n } else if (_script.hasAttribute('data-dom')) {\n dom(speccer);\n } else if (_script.hasAttribute('data-lazy')) {\n lazy();\n } else {\n dom(speccer);\n }\n\n if (!_script.hasAttribute('data-manual') && !_script.hasAttribute('data-lazy')) {\n resize.activate(speccer);\n }\n }\n }\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport './interfaces/global';\nimport * as __node from './lib/node';\nimport * as __spacing from './tasks/spec';\nimport * as __dissect from './tasks/dissect';\nimport * as __measure from './tasks/measure';\nimport * as __typography from './tasks/typography';\nimport * as __browser from './browser';\n\nexport const spacing = __spacing;\n\nexport const dissect = __dissect;\n\nexport const measure = __measure;\n\nexport const typography = __typography;\n\nconst speccer = () => {\n __node.removeAll('.speccer');\n\n const _els_to_be_specced = document.querySelectorAll('[data-speccer],[data-speccer] *:not(td)');\n const _els_to_be_measured = document.querySelectorAll('[data-speccer-measure]');\n const _els_to_be_typography_specced = document.querySelectorAll('[data-speccer-typography]');\n const _els_to_be_dissected = document.querySelectorAll('[data-anatomy-section] [data-anatomy]');\n\n _els_to_be_specced.forEach(spacing.element);\n _els_to_be_measured.forEach(measure.element);\n _els_to_be_typography_specced.forEach(typography.element);\n _els_to_be_dissected.forEach(dissect.element);\n};\n\nexport default speccer;\n\n__browser.activate(speccer);\n","import * as css from '../../lib/css';\nimport * as styles from '../../lib/styles';\n\nexport const template = async (el: HTMLElement): Promise<string> => {\n const _el_styles = await styles.get(el);\n const _styles = css.getTypography(_el_styles);\n\n return (\n `\n` +\n 'font-styles: {' +\n '<ul class=\"speccer-styles\">' +\n ` <li><span class=\"property\">font-family:</span> ${_styles['fontFamily']};</li>` +\n ` <li><span class=\"property\">font-size:</span> ${_styles['fontSize']} / ${\n parseInt(_styles['fontSize'], 10) / 16\n }rem;</li>` +\n ` <li><span class=\"property\">font-weight:</span> ${_styles['fontWeight']};</li>` +\n ` <li><span class=\"property\">font-variation-settings:</span> ${_styles['fontVariationSettings']};</li>` +\n ` <li><span class=\"property\">line-height:</span> ${_styles['lineHeight']} / ${\n parseInt(_styles['lineHeight'], 10) / 16\n }rem;</li>` +\n ` <li><span class=\"property\">letter-spacing:</span> ${_styles['letterSpacing']};</li>` +\n ` <li><span class=\"property\">font-style:</span> ${_styles['fontStyle']};</li>` +\n '</ul>' +\n '}'\n );\n};\n"],"names":["set","el","cls","avoid","length","trim","split","filter","cl","forEach","classList","add","cx","cls_obj","Object","keys","classname","join","SPECCER_LITERALS","getNumberValue","value","parseInt","pinSpace","getComputedStyle","getPropertyValue","waitForFrame","Promise","requestAnimationFrame","async","styles","Array","isArray","constructor","style","key","get","get_horizontal_center_of_els","modifier","startRect","targetRect","width","get_vertical_center_of_els","height","get_body_correction","_body_style","document","body","_body_left_correction","paddingLeft","marginLeft","top","paddingTop","marginTop","left","create","text","tag","_el","createElement","_text_content","createTextNode","appendChild","setAttribute","classnames.set","element","_speccer_el","_el_style","styles.get","display","visibility","parentElement","marginBottom","marginRight","paddingBottom","paddingRight","css.getSpacing","_target_rect","getBoundingClientRect","_body_correction","_el_offset_top","offsetTop","_el_offset_left","offsetLeft","_speccer_margin_top_el","css.getNumberValue","styles.add","transform","_speccer_margin_right_el","_speccer_margin_bottom_el","_speccer_margin_left_el","_speccer_padding_top_el","_speccer_padding_bottom_el","_speccer_padding_right_el","_speccer_padding_left_el","SpeccerAreaEnum","DissectAreaEnum","decimal","number","decimals","parseFloat","toFixed","textContent","area","n","_text_node","_extra_class_names","indexOf","Full","Enclose","_class_names","classnames.cx","dissectIndex","_area","getAttribute","_dissection_el","_dissection_styles","dissectionEl","_el_rect","SPECCER_PIN_SPACE","css.pinSpace","_dissection_el_rect","_left_layout_position_left","_left_layout_position_top","number.decimal","_right_layout_position_left","_right_layout_position_top","_top_layout_position_left","_top_layout_position_top","_bottom_layout_position_left","_bottom_layout_position_top","Outline","Left","Right","Top","Bottom","helpers.styles","_measure_el","_measure_rect","html","innerHTML","activate","speccer","speccerEventFunc","func","wait","immediate","timeout","context","this","args","arguments","later","apply","callNow","clearTimeout","setTimeout","debounce","window","removeEventListener","addEventListener","dom","readyState","spacing","__spacing","dissect","measure","typography","_html","_styles","lineHeight","letterSpacing","fontFamily","fontSize","fontStyle","fontVariationSettings","fontWeight","css.getTypography","helpers.template","_position","speccerEl","_speccer_el_rect","helpers.position","selector","call","querySelectorAll","e","remove","__node.removeAll","_els_to_be_specced","_els_to_be_measured","_els_to_be_typography_specced","_els_to_be_dissected","_script","currentScript","_speccer_script_src","hasAttribute","manual","_spec_observer","IntersectionObserver","els","observer","intersectionRatio","spec.element","target","unobserve","observe","_measure_observer","measure.element","_dissect_observer","targets","dissect.element","lazy","resize.activate"],"mappings":"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"}
|
package/speccer.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ph.speccer{--ph-speccer-color-padding:#db6fff66;--ph-speccer-color-padding-hover:#db6fff;--ph-speccer-color-margin:#fff76f66;--ph-speccer-color-margin-hover:#fff76f;--ph-speccer-color-text-light:#fff;--ph-speccer-color-text-dark:#333;--ph-speccer-color-contrast:#ff3aa8;--ph-speccer-spacing-color:var(--ph-speccer-color-contrast);--ph-speccer-measure-color:red;--ph-speccer-pin-color:var(--ph-speccer-color-contrast);--ph-speccer-typography-background-color:#fff;--ph-speccer-typography-color-property:#3f85f2;--ph-speccer-typography-color-text:#57575b;--ph-speccer-typography-color-value:var(--ph-speccer-color-contrast);--ph-speccer-depth-opacity-400:0.4;--ph-speccer-font-family:"Menlo for Powerline","Menlo Regular for Powerline","DejaVu Sans Mono",Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;--ph-speccer-font-size:12px;--ph-speccer-line-height:12px;--ph-speccer-pin-size:24px;--ph-speccer-pin-space:48px;--ph-speccer-line-width:1px;--ph-speccer-line-width-negative:-1px;--ph-speccer-measure-size:8px}.ph.speccer,.ph.speccer:after,.ph.speccer:before{box-sizing:border-box;font-family:var(--ph-speccer-font-family)!important;font-size:12px;line-height:12px;pointer-events:none;user-select:none;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:var(--ph-speccer-pin-color);border-radius:100%;box-sizing:initial;color:var(--ph-speccer-color-text-light);font-family:sans-serif;font-size:16px;font-weight:400;height:var(--ph-speccer-pin-size);line-height:150%;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection:after{background-color:var(--ph-speccer-pin-color);content:"";height:var(--ph-speccer-pin-space);position:absolute;top:100%;width:var(--ph-speccer-line-width);z-index:99999}.ph.speccer.dissection.outline.left:after{height:var(--ph-speccer-line-width);left:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.right:after{height:var(--ph-speccer-line-width);right:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.enclose{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.enclose.right:after{left:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));right:auto}.ph.speccer.dissection.outline.enclose.right:before{left:100%;right:auto}.ph.speccer.dissection.outline.enclose.left:after{left:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));right:auto}.ph.speccer.dissection.outline.enclose.left:before{left:auto;right:100%}.ph.speccer.dissection.outline.enclose.top:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.enclose.top:before{bottom:100%;top:auto}.ph.speccer.dissection.outline.enclose.bottom:after{bottom:auto;top:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before{bottom:auto;top:100%}.ph.speccer.dissection.outline.full{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.full.right{border-left:none}.ph.speccer.dissection.outline.full.right:after{left:calc(8px + var(--ph-speccer-pin-space))}.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:calc(-8px - var(--ph-speccer-pin-space))}.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:calc(-8px - var(--ph-speccer-pin-space))}.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:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.bottom:before{top:100%}.ph.speccer.dissection.outline.bottom:after{height:var(--ph-speccer-pin-space);right:50%;top:calc(-100% - var(--ph-speccer-pin-space)/2);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.top:after,.ph.speccer.dissection.outline:after{height:var(--ph-speccer-pin-space);right:50%;top:100%;width:var(--ph-speccer-line-width)}[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:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);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:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.top:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.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:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);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:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.top:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.spacing{border:var(--ph-speccer-line-width) solid #0000;pointer-events:auto;transition:none}.ph.speccer.spacing:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)}.is-specced:hover~.ph.speccer.spacing.margin{background-color:var(--ph-speccer-color-margin-hover)}.is-specced:hover~.ph.speccer.spacing.padding{background-color:var(--ph-speccer-color-padding-hover);color:var(--ph-speccer-color-text-light)}.ph.speccer.spacing.margin{background-color:var(--ph-speccer-color-margin);color:var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.padding{background-color:var(--ph-speccer-color-padding);color:var(--ph-speccer-spacing-color)}.ph.speccer.spacing.margin.bottom:after,.ph.speccer.spacing.margin.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.margin.bottom:before,.ph.speccer.spacing.margin.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.margin.left:after,.ph.speccer.spacing.margin.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.margin.left:before,.ph.speccer.spacing.margin.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.bottom:after,.ph.speccer.spacing.padding.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.padding.bottom:before,.ph.speccer.spacing.padding.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.padding.left:after,.ph.speccer.spacing.padding.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.left:before,.ph.speccer.spacing.padding.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.typography{background-color:var(--ph-speccer-typography-background-color);color:var(--ph-speccer-typography-color-text);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:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph.speccer.typography:after{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute}.ph.speccer.typography.left:after,.ph.speccer.typography:after{height:var(--ph-speccer-line-width);left:100%;top:50%;transform:translateY(-50%);width:48px}.ph.speccer.typography.right:after{height:var(--ph-speccer-line-width);left:auto;right:100%;top:50%;transform:translateY(-50%);width:48px}.ph.speccer.typography.top:after{top:100%}.ph.speccer.typography.bottom:after,.ph.speccer.typography.top:after{height:48px;left:50%;right:auto;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.typography.bottom:after{bottom:100%;top:auto}.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:var(--ph-speccer-typography-color-property);font-size:12px;font-weight:400;margin:0;padding:0;text-align:left}.ph.speccer.typography .speccer-styles>li{border:none;color:var(--ph-speccer-typography-color-value);font-size:12px;font-weight:400;list-style:none;margin:0;padding:0;text-align:left}.ph.speccer.measure.width{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color);height:var(--ph-speccer-measure-size)}.ph.speccer.measure.width:after{content:attr(data-measure);position:absolute;top:calc(-100% - 10px)}.ph.speccer.measure.width.bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-top:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.bottom:after{content:attr(data-measure);position:absolute;top:calc(100% + 5px)}.ph.speccer.measure.width.top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.top:after{bottom:calc(100% + 5px);content:attr(data-measure);position:absolute}.ph.speccer.measure.height.left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-right:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.left:after{content:attr(data-measure);left:calc(-100% - 20px - var(--ph-speccer-line-width));position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg)}.ph.speccer.measure.height.right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-left:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.right:after{content:attr(data-measure);left:calc(100% - var(--ph-speccer-measure-size));position:absolute;top:50%;transform:translateY(-50%) rotate(90deg)}
|
|
1
|
+
.ph.speccer{--ph-speccer-color-padding:#db6fff66;--ph-speccer-color-padding-hover:#db6fff;--ph-speccer-color-margin:#fff76f66;--ph-speccer-color-margin-hover:#fff76f;--ph-speccer-color-text-light:#fff;--ph-speccer-color-text-dark:#333;--ph-speccer-color-contrast:#ff3aa8;--ph-speccer-spacing-color:var(--ph-speccer-color-contrast);--ph-speccer-measure-color:red;--ph-speccer-pin-color:var(--ph-speccer-color-contrast);--ph-speccer-typography-background-color:#fff;--ph-speccer-typography-color-property:#3f85f2;--ph-speccer-typography-color-text:#57575b;--ph-speccer-typography-color-value:var(--ph-speccer-color-contrast);--ph-speccer-depth-opacity-400:0.4;--ph-speccer-font-family:"Menlo for Powerline","Menlo Regular for Powerline","DejaVu Sans Mono",Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;--ph-speccer-font-size:12px;--ph-speccer-line-height:12px;--ph-speccer-pin-size:24px;--ph-speccer-pin-space:48px;--ph-speccer-line-width:1px;--ph-speccer-line-width-negative:-1px;--ph-speccer-measure-size:8px}body.ph{box-sizing:border-box;margin:12px;padding:12px}.ph.speccer,.ph.speccer:after,.ph.speccer:before{box-sizing:border-box;font-family:var(--ph-speccer-font-family)!important;font-size:12px;line-height:12px;pointer-events:none;user-select:none;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:var(--ph-speccer-pin-color);border-radius:100%;box-sizing:initial;color:var(--ph-speccer-color-text-light);font-family:sans-serif;font-size:16px;font-weight:400;height:var(--ph-speccer-pin-size);line-height:150%;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection:after{background-color:var(--ph-speccer-pin-color);content:"";height:var(--ph-speccer-pin-space);position:absolute;top:100%;width:var(--ph-speccer-line-width);z-index:99999}.ph.speccer.dissection.outline.left:after{height:var(--ph-speccer-line-width);left:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.right:after{height:var(--ph-speccer-line-width);right:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.enclose{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.enclose.right:after{left:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));right:auto}.ph.speccer.dissection.outline.enclose.right:before{left:100%;right:auto}.ph.speccer.dissection.outline.enclose.left:after{left:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));right:auto}.ph.speccer.dissection.outline.enclose.left:before{left:auto;right:100%}.ph.speccer.dissection.outline.enclose.top:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.enclose.top:before{bottom:100%;top:auto}.ph.speccer.dissection.outline.enclose.bottom:after{bottom:auto;top:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before{bottom:auto;top:100%}.ph.speccer.dissection.outline.full{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.full.right{border-left:none}.ph.speccer.dissection.outline.full.right:after{left:calc(8px + var(--ph-speccer-pin-space))}.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:calc(-8px - var(--ph-speccer-pin-space))}.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:calc(-8px - var(--ph-speccer-pin-space))}.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:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.bottom:before{top:100%}.ph.speccer.dissection.outline.bottom:after{height:var(--ph-speccer-pin-space);right:50%;top:calc(-100% - var(--ph-speccer-pin-space)/2);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.top:after,.ph.speccer.dissection.outline:after{height:var(--ph-speccer-pin-space);right:50%;top:100%;width:var(--ph-speccer-line-width)}[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:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);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:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.top:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.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:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);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:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.top:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.spacing{border:var(--ph-speccer-line-width) solid #0000;pointer-events:auto;transition:none}.ph.speccer.spacing:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.margin{background-color:var(--ph-speccer-color-margin);color:var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.padding{background-color:var(--ph-speccer-color-padding);color:var(--ph-speccer-spacing-color)}.ph.speccer.spacing.margin.bottom:after,.ph.speccer.spacing.margin.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.margin.bottom:before,.ph.speccer.spacing.margin.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.margin.left:after,.ph.speccer.spacing.margin.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.margin.left:before,.ph.speccer.spacing.margin.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.bottom:after,.ph.speccer.spacing.padding.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.padding.bottom:before,.ph.speccer.spacing.padding.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.padding.left:after,.ph.speccer.spacing.padding.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.left:before,.ph.speccer.spacing.padding.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.typography{background-color:var(--ph-speccer-typography-background-color);color:var(--ph-speccer-typography-color-text);display:block;font-size:10px;line-height:140%;max-width:none;padding:8px;text-align:left;width:auto}.ph.speccer.typography,.ph.speccer.typography:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph.speccer.typography:after{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute}.ph.speccer.typography.left:after,.ph.speccer.typography:after{left:100%}.ph.speccer.typography.left:after,.ph.speccer.typography.right:after,.ph.speccer.typography:after{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:var(--ph-speccer-pin-space)}.ph.speccer.typography.right:after{left:auto;right:100%}.ph.speccer.typography.top:after{top:100%}.ph.speccer.typography.bottom:after,.ph.speccer.typography.top:after{height:var(--ph-speccer-pin-space);left:50%;right:auto;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.typography.bottom:after{bottom:100%;top:auto}.ph.speccer.typography .speccer-styles{font-size:10px;line-height:140%;list-style:none;margin:0;padding:0 0 0 8px;width:100%}.ph.speccer.typography .speccer-styles .property{color:var(--ph-speccer-typography-color-property);font-size:10px;font-weight:400;margin:0;padding:0;text-align:left}.ph.speccer.typography .speccer-styles>li{border:none;color:var(--ph-speccer-typography-color-value);font-size:10px;font-weight:400;list-style:none;margin:0;padding:0;text-align:left}.ph.speccer.measure.width{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color);height:var(--ph-speccer-measure-size)}.ph.speccer.measure.width:after{content:attr(data-measure);position:absolute;top:calc(-100% - 10px)}.ph.speccer.measure.width.bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-top:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.bottom:after{content:attr(data-measure);position:absolute;top:calc(100% + 5px)}.ph.speccer.measure.width.top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.top:after{bottom:calc(100% + 5px);content:attr(data-measure);position:absolute}.ph.speccer.measure.height.left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-right:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.left:after{content:attr(data-measure);left:calc(-100% - 20px - var(--ph-speccer-line-width));position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg)}.ph.speccer.measure.height.right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-left:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.right:after{content:attr(data-measure);left:calc(100% - var(--ph-speccer-measure-size));position:absolute;top:50%;transform:translateY(-50%) rotate(90deg)}
|
package/CHANGELOG.md
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
# Changelog
|
|
2
|
-
|
|
3
|
-
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
|
-
|
|
5
|
-
### [4.3.2](https://github.com/phun-ky/speccer/compare/v4.3.1...v4.3.2) (2022-02-22)
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
### Bug
|
|
9
|
-
|
|
10
|
-
* And supply the minified version.. ([8cfb69a](https://github.com/phun-ky/speccer/commit/8cfb69a5dc86f1e9c9ccea3f890781a3961a0a7f))
|
|
11
|
-
|
|
12
|
-
### [4.3.1](https://github.com/phun-ky/speccer/compare/v4.3.0...v4.3.1) (2022-02-22)
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
### Bug
|
|
16
|
-
|
|
17
|
-
* Use named exports ([7a4535e](https://github.com/phun-ky/speccer/commit/7a4535e65c04b33365258323376d6710fcb813c3))
|
|
18
|
-
|
|
19
|
-
## [4.3.0](https://github.com/phun-ky/speccer/compare/v4.2.1...v4.3.0) (2022-02-22)
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
### Feature
|
|
23
|
-
|
|
24
|
-
* 🎸 Expose API a bit more ([093b465](https://github.com/phun-ky/speccer/commit/093b465653c32ec77fec6bb1d9d9e3adfd59809f))
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
### Documentation
|
|
28
|
-
|
|
29
|
-
* ✏️ Move images into assets ([2291b31](https://github.com/phun-ky/speccer/commit/2291b31d768a16f202f2ffed453cfc22f3027e67))
|
|
30
|
-
* ✏️ Update documentation ([ec0807e](https://github.com/phun-ky/speccer/commit/ec0807e8c5d9c7eeaa807b80d7c432bee24d59d4))
|
|
31
|
-
|
|
32
|
-
### [4.2.1](https://github.com/phun-ky/speccer/compare/v4.2.0...v4.2.1) (2022-02-22)
|
|
33
|
-
|
|
34
|
-
## [4.2.0](https://github.com/phun-ky/speccer/compare/v4.1.0...v4.2.0) (2022-02-22)
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
### Features
|
|
38
|
-
|
|
39
|
-
* Use CSS variables ([21c3eb3](https://github.com/phun-ky/speccer/commit/21c3eb3f173ee96b0bf452bae44f76155fcf3cdf))
|
|
40
|
-
|
|
41
|
-
## [4.1.0](https://github.com/phun-ky/speccer/compare/v4.0.0...v4.1.0) (2022-02-22)
|
|
42
|
-
|
|
43
|
-
### Features
|
|
44
|
-
|
|
45
|
-
- Add release script ([4cb72cb](https://github.com/phun-ky/speccer/commit/4cb72cbea7dd1d6bcb8f1102384b14eecaa9eef0))
|
package/src/browser.js
DELETED
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
/* eslint no-console:0 */
|
|
2
|
-
'use strict';
|
|
3
|
-
|
|
4
|
-
import * as resize from './lib/resize';
|
|
5
|
-
import * as spec from './spec';
|
|
6
|
-
import * as measure from './measure';
|
|
7
|
-
import * as dissect from './dissect';
|
|
8
|
-
|
|
9
|
-
export const dom = speccer => {
|
|
10
|
-
if (document.readyState === 'loading') {
|
|
11
|
-
document.addEventListener('DOMContentLoaded', speccer);
|
|
12
|
-
} else {
|
|
13
|
-
// `DOMContentLoaded` already fired
|
|
14
|
-
speccer();
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
export const lazy = () => {
|
|
19
|
-
let _spec_observer = new IntersectionObserver((els, observer) => {
|
|
20
|
-
els.forEach(el => {
|
|
21
|
-
if (el.intersectionRatio > 0) {
|
|
22
|
-
spec.element(el.target);
|
|
23
|
-
observer.unobserve(el.target);
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
|
-
});
|
|
27
|
-
document.querySelectorAll('[data-speccer],[data-speccer] *:not(td)').forEach(el => {
|
|
28
|
-
_spec_observer.observe(el);
|
|
29
|
-
});
|
|
30
|
-
let _measure_observer = new IntersectionObserver((els, observer) => {
|
|
31
|
-
els.forEach(el => {
|
|
32
|
-
if (el.intersectionRatio > 0) {
|
|
33
|
-
measure.element(el.target);
|
|
34
|
-
observer.unobserve(el.target);
|
|
35
|
-
}
|
|
36
|
-
});
|
|
37
|
-
});
|
|
38
|
-
document.querySelectorAll('[data-speccer-measure]').forEach(el => {
|
|
39
|
-
_measure_observer.observe(el);
|
|
40
|
-
});
|
|
41
|
-
let _dissect_observer = new IntersectionObserver((els, observer) => {
|
|
42
|
-
els.forEach(el => {
|
|
43
|
-
const targets = el.target.querySelectorAll('[data-anatomy]');
|
|
44
|
-
if (el.intersectionRatio > 0) {
|
|
45
|
-
targets.forEach(dissect.element);
|
|
46
|
-
observer.unobserve(el.target);
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
document.querySelectorAll('[data-anatomy-section]').forEach(el => {
|
|
52
|
-
_dissect_observer.observe(el);
|
|
53
|
-
});
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
export const manual = speccer => {
|
|
57
|
-
window.speccer = speccer;
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
export const activate = speccer => {
|
|
61
|
-
const _script = document.currentScript;
|
|
62
|
-
|
|
63
|
-
if (_script) {
|
|
64
|
-
const _speccer_script_src = _script.getAttribute('src');
|
|
65
|
-
if (
|
|
66
|
-
_speccer_script_src.indexOf('speccer.js') !== -1 ||
|
|
67
|
-
// for codepen
|
|
68
|
-
_speccer_script_src.indexOf('JaXpOK.js') !== -1
|
|
69
|
-
) {
|
|
70
|
-
if (_script.hasAttribute('data-manual')) {
|
|
71
|
-
manual(speccer);
|
|
72
|
-
} else if (_script.hasAttribute('data-instant')) {
|
|
73
|
-
speccer();
|
|
74
|
-
} else if (_script.hasAttribute('data-dom')) {
|
|
75
|
-
dom(speccer);
|
|
76
|
-
} else if (_script.hasAttribute('data-lazy')) {
|
|
77
|
-
lazy();
|
|
78
|
-
} else {
|
|
79
|
-
dom(speccer);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
if (!_script.hasAttribute('data-manual') && !_script.hasAttribute('data-lazy')) {
|
|
83
|
-
resize.activate(speccer);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
};
|