add data attribute support for layerDepth setting

Author: nateplusplus

dist/esm/constants.d.ts

@@ -7,3 +7,4 @@ export declare const PUSH_IN_DEFAULT_BREAKPOINTS: number[];
 export declare const PUSH_IN_LAYER_INDEX_ATTRIBUTE = "data-pushin-layer-index";
 export declare const PUSH_IN_DEFAULT_ASPECT_RATIO: number[];
 export declare const PUSH_IN_DEFAULT_TRANSITION_LENGTH = 200;
+export declare const PUSH_IN_DEFAULT_LAYER_DEPTH = 1000;

dist/esm/pushInScene.d.ts

@@ -25,6 +25,7 @@ export declare class PushInScene extends PushInBase {
      * - screen-top          Start effect when target element top at viewport top.
      */
     setAutoStart(): void;
+    setLayerDepth(): void;
     /**
      * Setup composition for the scene.
      */

dist/esm/pushin.js

@@ -31,10 +31,10 @@ export interface SceneOptions {
     ratio?: number[];
 }
 export interface SceneSettings {
-    layerDepth: number;
     breakpoints: number[];
     inpoints: number[];
     layers: LayerOptions[];
+    layerDepth?: number;
     composition?: CompositionOptions;
     ratio?: number[];
     autoStart?: string;

dist/esm/pushin.js.map

@@ -18,3 +18,5 @@ export const PUSH_IN_LAYER_INDEX_ATTRIBUTE = 'data-pushin-layer-index';
 export const PUSH_IN_DEFAULT_ASPECT_RATIO = [1, 2];
 
 export const PUSH_IN_DEFAULT_TRANSITION_LENGTH = 200;
+
+export const PUSH_IN_DEFAULT_LAYER_DEPTH = 1000;

dist/esm/types.d.ts

@@ -2,6 +2,7 @@ import {
   PUSH_IN_FROM_DATA_ATTRIBUTE,
   PUSH_IN_BREAKPOINTS_DATA_ATTRIBUTE,
   PUSH_IN_DEFAULT_BREAKPOINTS,
+  PUSH_IN_DEFAULT_LAYER_DEPTH,
 } from './constants';
 import { PushInComposition } from './pushInComposition';
 import { PushInLayer } from './pushInLayer';
@@ -12,7 +13,7 @@ import { LayerOptions, SceneSettings } from './types';
 
 export class PushInScene extends PushInBase {
   public layers: PushInLayer[];
-  public layerDepth: number;
+  public layerDepth!: number;
   public settings: SceneSettings;
   public composition?: PushInComposition;
   public layerCount!: number;
@@ -24,7 +25,7 @@ export class PushInScene extends PushInBase {
     const options = pushin.options?.scene ?? {};
 
     this.settings = {
-      layerDepth: options?.layerDepth || 1000,
+      layerDepth: options?.layerDepth,
       breakpoints: options?.breakpoints || [],
       inpoints: options?.inpoints || [],
       composition: pushin.options?.composition,
@@ -33,14 +34,14 @@ export class PushInScene extends PushInBase {
       autoStart: pushin.options?.autoStart,
     };
 
-    this.layerDepth = this.settings.layerDepth;
     this.layers = [];
   }
 
   /* istanbul ignore next */
   start(): void {
     this.setContainer();
     this.setAutoStart();
+    this.setLayerDepth();
     this.setSceneClasses();
     this.setComposition();
     this.setBreakpoints();
@@ -88,6 +89,17 @@ export class PushInScene extends PushInBase {
     this.settings.autoStart = autoStart;
   }
 
+  setLayerDepth() {
+    let layerDepth = this.getNumberOption('layerDepth');
+
+    if (layerDepth && typeof layerDepth !== 'number') {
+      // not yet compatible with array - set to first index if array passed in.
+      [layerDepth] = layerDepth;
+    }
+
+    this.layerDepth = layerDepth ?? PUSH_IN_DEFAULT_LAYER_DEPTH;
+  }
+
   /**
    * Setup composition for the scene.
    */