From 48e04780f7c59b58dd0083c07c1b6576054d5dc8 Mon Sep 17 00:00:00 2001 From: Mudloop Date: Sat, 9 Nov 2024 02:00:40 +0100 Subject: [PATCH] fixed a scrolling issue --- docs/bundle/js/index.js | 5 +++-- docs/bundle/js/index.js.map | 6 +++--- playground/src/components/Tabs.ts | 25 ++++++++++++++++++++++--- 3 files changed, 28 insertions(+), 8 deletions(-) diff --git a/docs/bundle/js/index.js b/docs/bundle/js/index.js index c46b84c..a929f36 100644 --- a/docs/bundle/js/index.js +++ b/docs/bundle/js/index.js @@ -2036,6 +2036,7 @@ const dependencies = { overflow-y: hidden; position: relative; background-color: #202223; + visibility: hidden; } main { position: absolute; @@ -2108,7 +2109,7 @@ const dependencies = { .tab:hover .close { opacity: 1; } - `;firstUpdated(t){super.firstUpdated(t),this.playground.onChange.add(()=>this.requestUpdate())}prevSelected;updated(){if(this.prevSelected!=this.playground.project.editorsOrder.at(-1))this.shadowRoot.querySelector(".active")?.scrollIntoView({behavior:"smooth"}),this.prevSelected=this.playground.project.editorsOrder.at(-1)}render=()=>Fn`
${this.playground.project.editors.map((t)=>this.rendertab(t))}
`;rendertab=(t)=>Fn` + `;firstUpdated(t){super.firstUpdated(t),this.playground.onChange.add(()=>this.requestUpdate()),setTimeout(()=>{this.checkScroll(!0),this.style.visibility="visible"},30)}firstScroll=!0;prevSelected;updated(){if(this.prevSelected!=this.playground.project.editorsOrder.at(-1))this.checkScroll()}checkScroll(t){const j=this.shadowRoot.querySelector(".active");if(!j)return;const r=this.shadowRoot.querySelector("main"),g=j.offsetLeft,S=j.offsetWidth,I=r.clientWidth/2,a=g-I+S/2;r.scrollTo({left:a,behavior:t?"instant":"smooth"}),this.prevSelected=this.playground.project.editorsOrder.at(-1)}render=()=>Fn`
${this.playground.project.editors.map((t)=>this.rendertab(t))}
`;rendertab=(t)=>Fn`
this.playground.project.focusEditor(t)}>