@vtbag/inspection-chamber 1.0.6 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -3
- package/lib/index.js +24 -40
- package/package.json +6 -4
package/README.md
CHANGED
|
@@ -1,22 +1,26 @@
|
|
|
1
|
+
[⭐️ Please star to support this work! ⭐️](https://github.com/vtbag/inspection-chamber)
|
|
1
2
|
# The Inspection Chamber
|
|
2
3
|
|
|
3
4
|
Put your view transitions through their paces in the Inspection Chamber!
|
|
4
5
|
|
|
5
|
-
|
|
6
6
|
[](https://www.npmjs.com/package/@vtbag/inspection-chamber)
|
|
7
|
+
|
|
8
|
+
|
|
7
9
|
[](https://www.npmjs.com/package/@vtbag/inspection-chamber)
|
|
8
10
|
|
|
9
11
|
The @vtbag website can be found at https://vtbag.pages.dev/
|
|
10
12
|
|
|
11
13
|
## !!! News !!!
|
|
12
|
-
v1.0.5 introduces the ability to switch single animations on and off as you navigate through the timeline of view transitions. For example, you can temporarily disable fades while investigating a morph animation or disable morphing to focus on other features of your transition.
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
The current version also includes smaller improvements, moving the Chamber closer to becoming a stable product rather than just a prototype.
|
|
15
16
|
|
|
16
17
|
For details, see the [CHANGELOG](https://github.com/vtbag/inspection-chamber/blob/main/CHANGELOG.md)
|
|
17
18
|
|
|
18
19
|
## What happened so far:
|
|
19
20
|
|
|
21
|
+
v1.0.5 introduced the ability to switch single animations on and off as you navigate through the timeline of view transitions. For example, you can temporarily disable fades while investigating a morph animation or disable morphing to focus on other features of your transition.
|
|
22
|
+
|
|
23
|
+
|
|
20
24
|
v1.0.4 improves opening the Chamber on mobiles, adds an explicit close button to the inner panel and fixes some styling issues.
|
|
21
25
|
|
|
22
26
|
v1.0.3 fixes some teething issues. The main areas affected are:
|
package/lib/index.js
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<meta name="astro-view-transitions-enabled" content="true" />
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
10
|
-
<
|
|
10
|
+
<iframe id="vtbag-main-frame" src="/"></iframe>
|
|
11
11
|
<div id="divider" class="divider"></div>
|
|
12
12
|
|
|
13
13
|
<button id="vtbag-ui-control-play">
|
|
@@ -437,7 +437,12 @@
|
|
|
437
437
|
padding: 8px;
|
|
438
438
|
margin: 4px;
|
|
439
439
|
border: 1px solid #888;
|
|
440
|
-
min-width:
|
|
440
|
+
min-width: 180px;
|
|
441
|
+
min-height: 212px;
|
|
442
|
+
overflow: auto;
|
|
443
|
+
}
|
|
444
|
+
#vtbag-ui-panel > #vtbag-ui-modi {
|
|
445
|
+
min-width: 160px;
|
|
441
446
|
}
|
|
442
447
|
#vtbag-ui-animations,
|
|
443
448
|
#vtbag-ui-messages {
|
|
@@ -515,7 +520,7 @@
|
|
|
515
520
|
padding-left: 0px;
|
|
516
521
|
margin: 8px;
|
|
517
522
|
overflow-y: auto;
|
|
518
|
-
width: calc(100% -
|
|
523
|
+
width: calc(100% - 16px);
|
|
519
524
|
flex-grow: 1;
|
|
520
525
|
list-style-type: none;
|
|
521
526
|
}
|
|
@@ -637,7 +642,7 @@
|
|
|
637
642
|
#vtbag-ui-panel {
|
|
638
643
|
flex-direction: column;
|
|
639
644
|
height: 100vh;
|
|
640
|
-
width: var(--vtbag-panel-width,
|
|
645
|
+
width: var(--vtbag-panel-width, 216px);
|
|
641
646
|
}
|
|
642
647
|
.horizontal {
|
|
643
648
|
display: none;
|
|
@@ -694,29 +699,8 @@
|
|
|
694
699
|
}
|
|
695
700
|
|
|
696
701
|
:root {
|
|
697
|
-
--vtbag-panel-height:
|
|
698
|
-
--vtbag-panel-width:
|
|
699
|
-
}
|
|
700
|
-
#canvas {
|
|
701
|
-
cursor: wait;
|
|
702
|
-
background-color: rgba(71, 61, 139, 0.33);
|
|
703
|
-
position: absolute;
|
|
704
|
-
top: 0;
|
|
705
|
-
left: 0;
|
|
706
|
-
height: calc(100vh - var(--vtbag-panel-height));
|
|
707
|
-
width: 100vw;
|
|
708
|
-
}
|
|
709
|
-
:root.vtbag-ui-column #canvas {
|
|
710
|
-
width: calc(100vw - var(--vtbag-panel-width));
|
|
711
|
-
height: 100vh;
|
|
712
|
-
}
|
|
713
|
-
:root.vtbag-ui-tl #canvas {
|
|
714
|
-
left: 0;
|
|
715
|
-
top: var(--vtbag-panel-height);
|
|
716
|
-
}
|
|
717
|
-
:root.vtbag-ui-tl :root.vtbag-ui-column #canvas {
|
|
718
|
-
left: var(--vtbag-panel-width);
|
|
719
|
-
top: 0;
|
|
702
|
+
--vtbag-panel-height: 245px;
|
|
703
|
+
--vtbag-panel-width: 216px;
|
|
720
704
|
}
|
|
721
705
|
|
|
722
706
|
#vtbag-main-frame {
|
|
@@ -765,7 +749,7 @@
|
|
|
765
749
|
}
|
|
766
750
|
|
|
767
751
|
:root.vtbag-ui-tl #divider {
|
|
768
|
-
bottom: calc(100vh - var(--vtbag-panel-height) -
|
|
752
|
+
bottom: calc(100vh - var(--vtbag-panel-height) - 4px);
|
|
769
753
|
}
|
|
770
754
|
:root.vtbag-ui-column {
|
|
771
755
|
#divider:hover,
|
|
@@ -792,7 +776,7 @@
|
|
|
792
776
|
}
|
|
793
777
|
:root.vtbag-ui-tl.vtbag-ui-column {
|
|
794
778
|
#vtbag-ui-panel {
|
|
795
|
-
right: calc(100vw - var(--vtbag-panel-width)
|
|
779
|
+
right: calc(100vw - var(--vtbag-panel-width));
|
|
796
780
|
bottom: 0;
|
|
797
781
|
}
|
|
798
782
|
#vtbag-main-frame {
|
|
@@ -803,7 +787,7 @@
|
|
|
803
787
|
animation: slide-from-left 0.5s both;
|
|
804
788
|
}
|
|
805
789
|
#divider {
|
|
806
|
-
right: calc(100vw - var(--vtbag-panel-width) -
|
|
790
|
+
right: calc(100vw - var(--vtbag-panel-width) - 4px);
|
|
807
791
|
}
|
|
808
792
|
}
|
|
809
793
|
@keyframes slide-from-bottom {
|
|
@@ -890,22 +874,22 @@
|
|
|
890
874
|
[data-vtbag-transition-name] {
|
|
891
875
|
cursor: help;
|
|
892
876
|
}
|
|
893
|
-
`)}function At(){
|
|
877
|
+
`)}function At(){vt(),pt()}function pt(){let t=1/Math.max(1e-6,parseFloat(top.document.querySelector("#vtbag-ui-tsf")?.innerText??"1.0"));top.__vtbag.inspectionChamber.animations?.forEach(e=>{e.playbackRate=t,e.playState==="paused"&&e.play()})}function Ct(){let t=top.document.querySelector("#vtbag-ui-slo-mo"),e=top.document.querySelector("#vtbag-ui-tsf");t.addEventListener("input",n=>{if(n.target instanceof HTMLInputElement){let i=(Math.exp(parseInt(n.target.value,10)/100)-100)/100+1-.14;e.innerText=`${i.toFixed(1)}`,pt()}})}function vt(){let t=top.__vtbag.inspectionChamber,e=t.longestAnimation;e&&(top.document.querySelector("#vtbag-ui-slo-mo-progress").innerText=` ${~~(e.currentTime??0)} / ${t.animationEndTime} ms`,p()&&top.setTimeout(vt,20))}function bt(t,e,n,i,o){let g=e.createElement("vtbag-pseudo-twin");d(g,t,"::view-transition","");let l=top.__vtbag.inspectionChamber.twin=g.firstElementChild;n.forEach(s=>{let I=d(l,t,"group",s),r=d(I,t,"image-pair",s);d(r,t,"old",s)&&i.add(s),d(r,t,"new",s)&&o.add(s)}),e.body.insertAdjacentElement("beforeend",l);function d(s,I,r,a){if(!s){console.error("[inspection chamber] Works not as expected ;-)");return}let c=top.__vtbag.inspectionChamber,m=s.ownerDocument,A=I.defaultView,b=a?`::view-transition-${r}(${a})`:r,C=A.getComputedStyle(I.documentElement,b);if(!C.height.endsWith("px"))return;c?.styleMap.set(a?`${r}-${a}`:r,C);let v=m.createElement("vtbag-pseudo-twin");return v.id=ie(a,r),v.dataset.vtbagTransitionName=a,v.dataset.vtbagTransitionPseudo=r,s.insertAdjacentElement("beforeend",v),yt(C,v.style),v.style.visibility="hidden",v}}function ie(t,e){return e?`vtbag-twin--view-transition-${e}-${t}`:"vtbag-twin--view-transition"}async function Mt(t){top.document.documentElement.classList.add("vtbag-twin-sync");let e=top.__vtbag.inspectionChamber,n=e.frameDocument.documentElement;for(let i of[...e.twin.children]){let o=i.dataset.vtbagTransitionName;t.has(o)||(W(n,i,o),W(n,i.children[0],o),W(n,i.children[0].children[0],o),W(n,i.children[0].children[1],o),await new Promise(g=>self.setTimeout(g)))}top.document.documentElement.classList.remove("vtbag-twin-sync")}function W(t,e,n){if(!e)return;let i=e.dataset.vtbagTransitionPseudo,o=top.__vtbag.inspectionChamber.styleMap.get(`${i}-${n}`),g=e.style;yt(o,g)}function yt(t,e){e.position=t.position,e.inset=t.inset,e.height=t.height,e.width=t.width,e.transform=t.transform,e.zIndex=t.zIndex,e.transformOrigin=t.transformOrigin,e.perspective=t.perspective}function ht(t){if(p()){let e,n=1/0;top.__vtbag.inspectionChamber.twin.querySelectorAll("vtbag-pseudo-twin > vtbag-pseudo-twin > vtbag-pseudo-twin > vtbag-pseudo-twin").forEach(i=>{let{clientX:o,clientY:g}=t,{top:l,bottom:d,left:s,right:I,width:r,height:a}=i.getBoundingClientRect(),c=i.dataset.vtbagTransitionName,m=i.dataset.vtbagTransitionPseudo;if(r&&a&&r*a<n&&l<=g&&g<=d&&s<=o&&o<=I){let A=!0,b;window.top.document.querySelectorAll("#vtbag-ui-names li").forEach(C=>{C.innerText===c&&(b=C,C.classList.contains(`${m}-hidden`)&&(A=!1))}),A&&(n=r*a,e=b)}}),e?.click()}}function ft(){let t=top.__vtbag.inspectionChamber.frameDocument.body;w(`
|
|
894
878
|
@keyframes vtbag-twin-noop {
|
|
895
879
|
from { opacity: 1; } to { opacity: 1; }
|
|
896
880
|
}
|
|
897
881
|
::view-transition-image-pair(*) {
|
|
898
882
|
animation: vtbag-twin-noop forwards;
|
|
899
883
|
animation-duration: inherit;
|
|
900
|
-
}`,"catch",void 0,!0)}async function Lt(){let t=top.__vtbag.inspectionChamber,e=t.frameDocument,n=t.animations=[],i=t.keyframesMap=new Map,o=new Set;t.styleMap=new Map;let g=new WeakSet,l=!0,d=!1;for(;l;)l=!1,e.getAnimations().forEach(a=>{if(a.effect?.pseudoElement?.startsWith("::view-transition")){let{pseudoName:c,viewTransitionName:m}=q(a);if(!g.has(a)){let A=a instanceof CSSAnimation?a.animationName:void 0,b=a instanceof CSSTransition?a.transitionProperty:void 0;b?console.warn("[inspection-chamber] Unhandled transition:",m,c,b):A?(a.pause(),a.currentTime=0,m&&c==="image-pair"&&o.add(m),!m&&c==="::view-transition"&&(d=!0),A==="vtbag-twin-noop"?a.cancel():(n.push(a),i.set(A,a.effect?.getKeyframes()))):console.warn("[inspection-chamber] Unhandled animation:",m,c,a.constructor.name),l=!0}g.add(a)}}),l&&await new Promise(a=>e.defaultView.setTimeout(a)),d&&console.warn("[inspection-chamber] Root root animation detected");let s=a=>a.effect?.getComputedTiming().endTime?.valueOf()??0;t.longestAnimation=n.reduce((a,c)=>s(c)>s(a)?c:a),t.animationEndTime=~~s(t.longestAnimation);let I=new Set,r=new Set;bt(e,e,o,I,r),H(I,r)}function wt(){let t=top.__vtbag.inspectionChamber;t.frameDocument.querySelector("#vtbag-adopted-sheet")?.remove(),t.animations?.forEach(n=>{try{n.finish()}catch(i){console.error(i,n,n.effect?.getComputedTiming())}})}function B(t){let e=(r,a)=>a?`<tr><td style="text-align:right">${r}</td><td><tt><b>${a}</b></tt></td><tr>`:"",n=["offset","computedOffset","easing","composite"],i=top.__vtbag.inspectionChamber,o=i.styleMap,g=top.document.querySelector("#vtbag-ui-animations");g.innerHTML=p()?`<h4 data-vtbag-name=${t}>Animations of ${t}:</h4>`+l("group")+l("image-pair")+l("old")+l("new"):"",g.querySelectorAll('input[type="checkbox"]').forEach(r=>{let a=JSON.parse(r.dataset.vtbagContext);r.removeAttribute("data-vtbag-context"),r.checked=xt(t,a.pseudo,a.idx)?.playState==="paused",r.addEventListener("change",c=>{oe(t,a.pseudo,a.idx,r.checked)||(r.checked=!r.checked)})}),S(g);function l(r){let a=[],c=o.get(`${r}-${t}`),m=c?.animation,A=c?.animationName;if(A&&A!=="vtbag-twin-noop"&&A!=="none"){let
|
|
884
|
+
}`,"catch",void 0,!0)}async function Lt(){let t=top.__vtbag.inspectionChamber,e=t.frameDocument,n=t.animations=[],i=t.keyframesMap=new Map,o=new Set;t.styleMap=new Map;let g=new WeakSet,l=!0,d=!1;for(;l;)l=!1,e.getAnimations().forEach(a=>{if(a.effect?.pseudoElement?.startsWith("::view-transition")){let{pseudoName:c,viewTransitionName:m}=q(a);if(!g.has(a)){let A=a instanceof CSSAnimation?a.animationName:void 0,b=a instanceof CSSTransition?a.transitionProperty:void 0;b?console.warn("[inspection-chamber] Unhandled transition:",m,c,b):A?(a.pause(),a.currentTime=0,m&&c==="image-pair"&&o.add(m),!m&&c==="::view-transition"&&(d=!0),A==="vtbag-twin-noop"?a.cancel():(n.push(a),i.set(A,a.effect?.getKeyframes()))):console.warn("[inspection-chamber] Unhandled animation:",m,c,a.constructor.name),l=!0}g.add(a)}}),l&&await new Promise(a=>e.defaultView.setTimeout(a)),d&&console.warn("[inspection-chamber] Root root animation detected");let s=a=>a.effect?.getComputedTiming().endTime?.valueOf()??0;t.longestAnimation=n.reduce((a,c)=>s(c)>s(a)?c:a),t.animationEndTime=~~s(t.longestAnimation);let I=new Set,r=new Set;bt(e,e,o,I,r),H(I,r)}function wt(){let t=top.__vtbag.inspectionChamber;t.frameDocument.querySelector("#vtbag-adopted-sheet")?.remove(),t.animations?.forEach(n=>{try{n.finish()}catch(i){console.error(i,n,n.effect?.getComputedTiming())}})}function B(t){let e=(r,a)=>a?`<tr><td style="text-align:right">${r}</td><td><tt><b>${a}</b></tt></td><tr>`:"",n=["offset","computedOffset","easing","composite"],i=top.__vtbag.inspectionChamber,o=i.styleMap,g=top.document.querySelector("#vtbag-ui-animations");g.innerHTML=p()?`<h4 data-vtbag-name=${t}>Animations of ${t}:</h4>`+l("group")+l("image-pair")+l("old")+l("new"):"",g.querySelectorAll('input[type="checkbox"]').forEach(r=>{let a=JSON.parse(r.dataset.vtbagContext);r.removeAttribute("data-vtbag-context"),r.checked=xt(t,a.pseudo,a.idx)?.playState==="paused",r.addEventListener("change",c=>{oe(t,a.pseudo,a.idx,r.checked)||(r.checked=!r.checked)})}),S(g);function l(r){let a=[],c=o.get(`${r}-${t}`),m=c?.animation,A=c?.animationName;if(A&&A!=="vtbag-twin-noop"&&A!=="none"){let C=c.animationName.split(", ");m.split(/,(?![^(]*\))/).forEach((v,E)=>{a.push(`<details><summary><input type="checkbox" data-vtbag-context='{"pseudo":"${r}","idx":${E}}'/> ${r}: <tt>${C[E]}</tt></summary>${b(C[E],v.endsWith(A)?v.slice(0,-A.length):v)}</details>`)})}return a.length>0?a.join("")+"<hr>":"";function b(C,v){return`
|
|
901
885
|
<table>
|
|
902
|
-
${e("animation:",
|
|
903
|
-
${e("animates:",s(
|
|
904
|
-
${I(
|
|
905
|
-
</table>`}}function d(r){let a=o.get(`${r}-${t}`),c=a?.animationName;if(!a||!c||c==="vtbag-twin-noop"||c==="none")return"";let m=c.split(", "),A=a.animationDelay.split(", "),b=a.animationDuration.split(", "),
|
|
886
|
+
${e("animation:",v)}
|
|
887
|
+
${e("animates:",s(C))}
|
|
888
|
+
${I(C)}
|
|
889
|
+
</table>`}}function d(r){let a=o.get(`${r}-${t}`),c=a?.animationName;if(!a||!c||c==="vtbag-twin-noop"||c==="none")return"";let m=c.split(", "),A=a.animationDelay.split(", "),b=a.animationDuration.split(", "),C=a.animationDirection.split(", "),v=a.animationFillMode.split(", "),E=a.animationIterationCount.split(", "),X=a.animationTimingFunction.split(/,(?![^(]*\))/),K="animationTimeline"in a?a.animationTimeline.split(", "):[],$=[];return m.forEach((L,T)=>{$.push(`<details><summary><input type="checkbox" data-vtbag-context='{"pseudo":"${r}","idx":${T}}'/> ${r}: <tt>${L}(${b[T%b.length]}, ${A[T%A.length]})</tt></summary>${Ft(T,L)}</details>`)}),$.join("")+"<hr>";function Ft(L,T){return`
|
|
906
890
|
<table>
|
|
907
|
-
${e("direction:",
|
|
908
|
-
${e("fill-mode:",
|
|
891
|
+
${e("direction:",C[L%C.length])}
|
|
892
|
+
${e("fill-mode:",v[L%v.length])}
|
|
909
893
|
${e("iteration-count:",E[L%E.length])}
|
|
910
894
|
${e("timing-function:",X[L%X.length])}
|
|
911
895
|
${e("timeline:",K[L%K.length])}
|
|
@@ -931,6 +915,6 @@
|
|
|
931
915
|
::view-transition-new(${t}) {
|
|
932
916
|
opacity: 1;
|
|
933
917
|
outline: 2px dashed darkolivegreen;
|
|
934
|
-
}`,"glow"),self.setTimeout(()=>w("","glow"),300)}function Zt(){let t=top.document.querySelector("#vtbag-ui-names li");t?.click(),t?.click()}function Yt(){let t=top.__vtbag.inspectionChamber.animationEndTime;top.document.querySelector("#vtbag-ui-controller-max").innerText=t+" ms",top.document.querySelector("#vtbag-ui-progress").innerText="0";let e=top.document.querySelector("#vtbag-ui-controller");e.max=""+t,e.value="0",e.disabled=!1,top.document.querySelector("#vtbag-ui-progress2").innerText="0";let n=top.document.querySelector("#vtbag-ui-controller2");n.max=""+t,n.value="0",n.disabled=!1,Zt(),f(),J()}function f(){let t=top.__vtbag.inspectionChamber,e=t.animations;if(t.updateNameVisibilityTimeout&&(top.clearTimeout(t.updateNameVisibilityTimeout),t.updateNameVisibilityTimeout=void 0),t.updateNameVisibilityTimeout=top.setTimeout(J,zt),e){let n=parseInt(top.document.querySelector("#vtbag-ui-progress").innerText,10),i=parseInt(top.document.querySelector("#vtbag-ui-progress2").innerText,10),o=new Set;top.document.querySelectorAll("#vtbag-ui-names li.selected").forEach(g=>o.add(g.innerText)),e.forEach(g=>{if(g.playState==="paused"){let{viewTransitionName:l}=q(g);g.currentTime=l&&o.has(l)?n:i}})}}function q(t){let e=t.effect?.pseudoElement?.replace(/::view-transition-(new|old|group|image-pair)\((.*)\)/,"$1 $2").split(" ");return{pseudoName:e?.[0],viewTransitionName:e?.[1]}}function Ht(){let t=top.document.querySelector("#vtbag-ui-controller"),e=top.document.querySelector("#vtbag-ui-progress");t.addEventListener("input",o=>{o.target instanceof HTMLInputElement&&(e.innerText=""+~~o.target.value,f())});let n=top.document.querySelector("#vtbag-ui-controller2"),i=top.document.querySelector("#vtbag-ui-progress2");n.addEventListener("input",o=>{o.target instanceof HTMLInputElement&&(i.innerText=""+~~o.target.value,f())})}function V(){p()&&y()==="full-control"&&f()}var Ot="vtbag-ui-panel-orientation",Wt="vtbag-ui-framed",Pt="named_only",Vt="\u{1F52C}";top.__vtbag??={};top.__vtbag.inspectionChamber??={};var M=top.__vtbag.inspectionChamber;top===self?top.setTimeout(Ie,500):se();function se(){let t=M.frameDocument=self.document;self.addEventListener("pageswap",Ut,{once:!0}),self.addEventListener("pagereveal",ce,{once:!0}),e();function e(){let n=t.startViewTransition
|
|
918
|
+
}`,"glow"),self.setTimeout(()=>w("","glow"),300)}function Zt(){let t=top.document.querySelector("#vtbag-ui-names li");t?.click(),t?.click()}function Yt(){let t=top.__vtbag.inspectionChamber.animationEndTime;top.document.querySelector("#vtbag-ui-controller-max").innerText=t+" ms",top.document.querySelector("#vtbag-ui-progress").innerText="0";let e=top.document.querySelector("#vtbag-ui-controller");e.max=""+t,e.value="0",e.disabled=!1,top.document.querySelector("#vtbag-ui-progress2").innerText="0";let n=top.document.querySelector("#vtbag-ui-controller2");n.max=""+t,n.value="0",n.disabled=!1,Zt(),f(),J()}function f(){let t=top.__vtbag.inspectionChamber,e=t.animations;if(t.updateNameVisibilityTimeout&&(top.clearTimeout(t.updateNameVisibilityTimeout),t.updateNameVisibilityTimeout=void 0),t.updateNameVisibilityTimeout=top.setTimeout(J,zt),e){let n=parseInt(top.document.querySelector("#vtbag-ui-progress").innerText,10),i=parseInt(top.document.querySelector("#vtbag-ui-progress2").innerText,10),o=new Set;top.document.querySelectorAll("#vtbag-ui-names li.selected").forEach(g=>o.add(g.innerText)),e.forEach(g=>{if(g.playState==="paused"){let{viewTransitionName:l}=q(g);g.currentTime=l&&o.has(l)?n:i}})}}function q(t){let e=t.effect?.pseudoElement?.replace(/::view-transition-(new|old|group|image-pair)\((.*)\)/,"$1 $2").split(" ");return{pseudoName:e?.[0],viewTransitionName:e?.[1]}}function Ht(){let t=top.document.querySelector("#vtbag-ui-controller"),e=top.document.querySelector("#vtbag-ui-progress");t.addEventListener("input",o=>{o.target instanceof HTMLInputElement&&(e.innerText=""+~~o.target.value,f())});let n=top.document.querySelector("#vtbag-ui-controller2"),i=top.document.querySelector("#vtbag-ui-progress2");n.addEventListener("input",o=>{o.target instanceof HTMLInputElement&&(i.innerText=""+~~o.target.value,f())})}function V(){p()&&y()==="full-control"&&f()}var Ot="vtbag-ui-panel-orientation",Wt="vtbag-ui-framed",Pt="named_only",Vt="\u{1F52C}";top.__vtbag??={};top.__vtbag.inspectionChamber??={};var M=top.__vtbag.inspectionChamber;top===self?top.setTimeout(Ie,500):se();function se(){let t=M.frameDocument=self.document;self.addEventListener("pageswap",Ut,{once:!0}),self.addEventListener("pagereveal",ce,{once:!0}),e();function e(){let n=t.startViewTransition;!n||n.toString()!=="function startViewTransition() { [native code] }"||(t.startViewTransition=i=>{"@vtbag";return Ut(),M.viewTransition=n.call(t,async()=>{await Promise.resolve(),await i(),Qt()}),M.viewTransition})}}function Ut(){!1,M.glow?.cancel(),z(!1,!1)}function ce(t){M.viewTransition="viewTransition"in t&&t.viewTransition||void 0,Qt()}function Qt(){!1,M.viewTransition&&(ft(),ue())}function ue(){at();let t=top.document.documentElement,e=M.viewTransition,n={bypass:()=>{},"slow-motion":At,"full-control":Yt,compare:()=>{}},i=y();e.updateCallbackDone.catch(()=>{}),e.ready.then(async()=>{if(i&&i!=="bypass"){try{await Lt(),z(!!top.document.querySelector("#vtbag-ui-framed")?.checked,!!top.document.querySelector("#vtbag-ui-named-only")?.checked),M.twin.ownerDocument.addEventListener("click",ht)}finally{}n[i]()}top.history.replaceState(history.state,"",self.location.href),top.document.title=Vt+" "+self.document.title}).finally(()=>{}),e.finished.finally(()=>{gt(),M.viewTransition=void 0,M.frameDocument?.querySelector("#vtbag-twin--view-transition")?.remove(),wt(),M.animations=void 0,M.longestAnimation=void 0,z(!!top.document.querySelector("#vtbag-ui-framed")?.checked,!!top.document.querySelector("#vtbag-ui-named-only")?.checked),H(Q()),N(),top.document.querySelector("#vtbag-ui-slo-mo-progress").innerText="",top.document.querySelector("#vtbag-ui-animations").innerText="",!y()&&top.document.querySelector("#vtbag-ui-modi li input")?.click(),M.frameDocument.addEventListener("click",Bt),st()})}function Gt(){let t=top.document.documentElement;t.style.setProperty("--vtbag-background-accent",t.style.colorScheme.startsWith("dark")?"#4E545D":"#c6d1d7")}function de(){let t=top.document.querySelector("#vtbag-tutorial-mode");t.checked=localStorage.getItem("vtbag-tutorial-mode")!=="false",t.addEventListener("change",()=>{localStorage.setItem("vtbag-tutorial-mode",""+t.checked);let e=top.document.querySelector("#vtbag-ui-inner-panel #vtbag-ui-messages h4"),n=top.document.querySelector("#vtbag-ui-panel #vtbag-ui-messages h4");!t.checked&&e&&e.click(),t.checked&&n&&n.click()})}async function Ie(){if(top.document.querySelector("#vtbag-ui-panel"))return;let t=top.document.documentElement;if(top.sessionStorage.getItem(k)==="true"){ot();return}let e=top.getComputedStyle(t).colorScheme,n=top.document.title,i=top.document.querySelector('link[rel="icon"]')?.outerHTML??"",o=_.replace('<iframe id="vtbag-main-frame" src="/"></iframe>',`<iframe id="vtbag-main-frame" style="opacity: 0;" src="${location.href}"></iframe>`).replace("<title></title>",`<title>${Vt} ${n}</title>`).replace('<link rel="icon"/>',i);top.addEventListener("resize",Rt),t.innerHTML=o,t.style.colorScheme=e,Rt(),Gt(),de(),G();let g=top.document.querySelector("#vtbag-main-frame");if(await new Promise(s=>g.onload=s),!top.document.startViewTransition){top.document.querySelector("#vtbag-ui-messages").innerHTML=`
|
|
935
919
|
<p>I'm sorry!</p><p>Native view transitions are required to make the \u{1F52C} Inspection Chamber work, but they are not supported by this browser.</p>
|
|
936
|
-
<p>Sadly have to give up.</p>`,top.document.querySelectorAll("#vtbag-ui-modi, #vtbag-ui-filter, #vtbag-ui-names, #vtbag-ui-animations, #vtbag-ui-info").forEach(s=>s.remove());return}let l=top.__vtbag.inspectionChamber.frameDocument=g.contentDocument;H(Q()),me();let d=top.document.querySelector("#divider");x(d,(s,I)=>{t.classList.contains("vtbag-ui-column")?t.classList.contains("vtbag-ui-tl")?t.style.setProperty("--vtbag-panel-width",`calc(max(
|
|
920
|
+
<p>Sadly have to give up.</p>`,top.document.querySelectorAll("#vtbag-ui-modi, #vtbag-ui-filter, #vtbag-ui-names, #vtbag-ui-animations, #vtbag-ui-info").forEach(s=>s.remove());return}let l=top.__vtbag.inspectionChamber.frameDocument=g.contentDocument;H(Q()),me();let d=top.document.querySelector("#divider");x(d,(s,I)=>{t.classList.contains("vtbag-ui-column")?t.classList.contains("vtbag-ui-tl")?t.style.setProperty("--vtbag-panel-width",`calc(max(216px, ${Math.min(innerWidth-100,s)}px))`):t.style.setProperty("--vtbag-panel-width",`calc(max(216px, 100vw - ${Math.max(100,s+1)}px))`):t.classList.contains("vtbag-ui-tl")?t.style.setProperty("--vtbag-panel-height",`calc(max(245px, ${Math.min(innerHeight-100,I)}px))`):t.style.setProperty("--vtbag-panel-height",`calc(max(245px, 100vh - ${Math.max(100,I+1)}px))`)}),localStorage.getItem("vtbag-tutorial-mode")!=="false"&&top.document.querySelector("#vtbag-ui-messages h4").click(),g.animate([{opacity:0,transform:"translateY(100vh)"},{opacity:1}],{duration:500,fill:"forwards"}),l.addEventListener("click",Bt)}function Bt(t){if(p())return;let n=t.target.closest("[data-vtbag-transition-name]");if(n){let i=n.dataset.vtbagTransitionName;top.document.querySelectorAll("#vtbag-ui-names li").forEach(o=>{o.innerText===i&&(o.click(),t.ctrlKey&&t.shiftKey&&t.preventDefault())})}}function Rt(){let t=top.document.documentElement,e=top.localStorage.getItem(Ot)??"";e?(e.split(" ").forEach(n=>t.classList.add(n)),Jt()):top.matchMedia("(orientation: landscape)").matches!==t.classList.contains("vtbag-ui-column")&&qt()}function qt(){h(()=>{let t=top.document.documentElement.classList;Z(),t.toggle("vtbag-ui-column"),t.contains("vtbag-ui-column")&&t.toggle("vtbag-ui-tl"),top.localStorage.setItem(Ot,[...t].filter(e=>e.startsWith("vtbag-ui-")).join(" ")),Jt()},"switch orientation")}function Jt(){let t=top.document.querySelector("#vtbag-ui-turn"),e=top.document.documentElement.classList;t.innerText="\u292A\u2928\u2929\u2927"[(e.contains("vtbag-ui-column")?2:0)+(e.contains("vtbag-ui-tl")?1:0)]}function me(){top.document.querySelector("#vtbag-ui-turn").addEventListener("click",()=>qt()),top.document.querySelector("#vtbag-ui-light-dark").addEventListener("click",()=>{let o=top.document.documentElement.style;top.document.querySelector("#vtbag-main-frame").contentDocument.documentElement.style.colorScheme=o.colorScheme=o.colorScheme.startsWith("dark")?"light":"dark",Gt()}),rt(),top.document.querySelector("#vtbag-ui-standby").addEventListener("click",()=>{top.sessionStorage.setItem(k,"true"),top.location.reload()}),top.document.querySelector("#vtbag-ui-modi ul").addEventListener("change",Ae),Nt(),kt();let e=top.document.querySelector("#vtbag-ui-framed"),n=top.document.querySelector("#vtbag-ui-named-only");e.addEventListener("change",i),n.addEventListener("change",i);function i(){let o=e.checked,g=n.checked;top.sessionStorage.setItem(Wt,o?"X":""),top.sessionStorage.setItem(Pt,g?"X":""),z(o,g)}Ct(),Ht(),top.document.querySelectorAll("#vtbag-ui-control-exit, #vtbag-ui-control-play").forEach(o=>o.addEventListener("click",Z)),top.addEventListener("keyup",function(o){o.key==="Escape"&&(p()?Z():(top.sessionStorage.setItem(k,"true"),top.location.reload()))})}function Ae(){let t=top.document.querySelector("#vtbag-ui-modi ul input:checked");if(t){let e=t.id.replace("vtbag-m-","");e!==y()&&h(()=>{G(e),Z(),top.document.querySelector("#vtbag-ui-filter ul input").click(),e==="slow-motion"&&F("#vtbag-ui-slow-motion"),e==="full-control"&&F("#vtbag-ui-control"),e==="bypass"&&F("#vtbag-ui-modi"),mt(e),lt()},"update-modus")}}function F(t){let e=top.document.querySelector("#vtbag-ui-framed"),n=top.document.querySelector("#vtbag-ui-named-only"),i=e.parentElement,o=top.document.querySelector(t);e.checked=!!top.sessionStorage.getItem(Wt),n.checked=!!top.sessionStorage.getItem(Pt),z(e.checked,n.checked),i&&o&&i.parentElement!==o&&o.insertAdjacentElement("beforeend",i)}})();
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vtbag/inspection-chamber",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
|
-
"description": "The Inspection Chamber gives you all the knobs and dials to interactively put your view transitions through their paces.",
|
|
5
|
+
"description": "The Inspection Chamber is an in-browser development tool that gives you all the knobs and dials to interactively put your view transitions through their paces.",
|
|
6
6
|
"files": [
|
|
7
7
|
"lib/index.js"
|
|
8
8
|
],
|
|
@@ -20,9 +20,11 @@
|
|
|
20
20
|
},
|
|
21
21
|
"keywords": [
|
|
22
22
|
"view",
|
|
23
|
-
"
|
|
23
|
+
"transition",
|
|
24
24
|
"view transition",
|
|
25
|
-
"
|
|
25
|
+
"animation",
|
|
26
|
+
"debugging",
|
|
27
|
+
"development"
|
|
26
28
|
],
|
|
27
29
|
"author": "vtbag",
|
|
28
30
|
"license": "ISC",
|