scroll: indexes 2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aptechka",
-  "version": "0.50.18",
+  "version": "0.50.19",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/denisavitski/aptechka.git"

src/components/packages/scroll/ScrollElement.ts

@@ -205,6 +205,8 @@ export class ScrollElement extends HTMLElement {
 
   #mutationObserver: MutationObserver = null!
 
+  #currentSections: Array<ScrollSection> = []
+
   constructor() {
     super()
 
@@ -1138,6 +1140,8 @@ export class ScrollElement extends HTMLElement {
       }
     }
 
+    this.#updateIndexes()
+
     scrollEntries.update(
       this,
       this.#axisCSSProperty.current,
@@ -1289,12 +1293,11 @@ export class ScrollElement extends HTMLElement {
           this.#sectionsInViewCSSProperty.current +
           this.#currentIndexEndOffsetCSSProperty.current
 
-        const currentSections: Array<ScrollSection> = []
+        this.#currentSections = []
 
         this.#sections.forEach((section, index) => {
           section.setCurrentIndex(null)
           section.setCurrentIndexArc(null)
-          section.setIndex(section.index)
 
           const overflow =
             counter -
@@ -1308,7 +1311,7 @@ export class ScrollElement extends HTMLElement {
 
           if ((index >= counter && index < currentRange) || index <= overflow) {
             section.setMark('current')
-            currentSections.push(section)
+            this.#currentSections.push(section)
           } else if (
             (index >= currentRange && index < currentRange + vv / 2) ||
             index <= overflow + sectionsInView
@@ -1318,25 +1321,26 @@ export class ScrollElement extends HTMLElement {
             section.setMark('previous')
           }
         })
+      }
+    }
+  }
 
-        const middle = Math.floor(currentSections.length / 2)
+  #updateIndexes() {
+    if (this.#classesCSSProperty.current) {
+      const middle = Math.floor(this.#currentSections.length / 2)
 
-        currentSections.sort((a, b) => {
-          return a.transformPosition - b.transformPosition
-        })
+      this.#currentSections.sort((a, b) => {
+        return (
+          a.element.getBoundingClientRect().left -
+          b.element.getBoundingClientRect().left
+        )
+      })
 
-        currentSections.forEach((section, i) => {
-          const arcIndex = Math.abs(i - middle)
+      this.#currentSections.forEach((section, i) => {
+        const arcIndex = Math.abs(i - middle)
 
-          section.setCurrentIndex(i)
-          section.setCurrentIndexArc(arcIndex)
-        })
-      }
-    } else {
-      this.#sections.forEach((section, index) => {
-        section.element.style.removeProperty('--current-index')
-        section.element.style.removeProperty('--current-index-arc')
-        section.element.style.removeProperty('--index')
+        section.setCurrentIndex(i)
+        section.setCurrentIndexArc(arcIndex)
       })
     }
   }

src/components/packages/scroll/ScrollSection.ts

@@ -42,6 +42,8 @@ export class ScrollSection {
     this.#scrollElement = scrollElement
 
     scrollEntries.register(this.#element)
+
+    this.setIndex(this.#index)
   }
 
   public get element() {
@@ -183,7 +185,7 @@ export class ScrollSection {
   }
 
   #setVar(name: string, value: string | number | null) {
-    if (value) {
+    if (value !== null) {
       this.#element.style.setProperty(name, value.toString())
     } else {
       this.#element.style.removeProperty(name)

src/components/packages/scroll/playground/index.css

@@ -10,6 +10,7 @@ e-scroll {
   --classes: true;
   --loop: true;
   --classes: true;
+  /* --split: true; */
 
   display: block;
   height: max-content;
@@ -23,3 +24,11 @@ section {
 
   background-color: tomato;
 }
+
+div {
+  width: 100%;
+  height: 100%;
+  background-color: blue;
+  transition: transform 0.3s;
+  transform: scale(calc(0.6 + (0.4 - var(--current-index-arc, 2) * 0.2)));
+}

src/components/packages/scroll/playground/index.html

@@ -1,5 +1,23 @@
 <e-scroll>
-  <section>1</section>
-  <section>2</section>
-  <section>3</section>
+  <section>
+    <div>1</div>
+  </section>
+  <section>
+    <div>2</div>
+  </section>
+  <section>
+    <div>3</div>
+  </section>
+  <section>
+    <div>4</div>
+  </section>
+  <section>
+    <div>5</div>
+  </section>
+  <section>
+    <div>6</div>
+  </section>
+  <section>
+    <div>7</div>
+  </section>
 </e-scroll>