feat: add methods for disable/enable all parallax elements #11

Author: jscottsmith

src/classes/ParallaxController.test.ts

@@ -128,6 +128,38 @@ describe('Expect the ParallaxController', () => {
     controller.destroy();
   });
 
+  it('to disable all elements when calling disableAllElements()', () => {
+    const controller = ParallaxController.init({
+      scrollAxis: ScrollAxis.vertical,
+    });
+    const elements = Array.from({ length: 3 }, () =>
+      controller.createElement(OPTIONS)
+    );
+    elements.forEach(element => {
+      expect(element.props.disabled).toBe(false);
+    });
+    controller.disableAllElements();
+    elements.forEach(element => {
+      expect(element.props.disabled).toBe(true);
+    });
+  });
+
+  it('to enable all elements when calling enableAllElements()', () => {
+    const controller = ParallaxController.init({
+      scrollAxis: ScrollAxis.vertical,
+    });
+    const elements = Array.from({ length: 3 }, () =>
+      controller.createElement({ ...OPTIONS, props: { disabled: true } })
+    );
+    elements.forEach(element => {
+      expect(element.props.disabled).toBe(true);
+    });
+    controller.enableAllElements();
+    elements.forEach(element => {
+      expect(element.props.disabled).toBe(false);
+    });
+  });
+
   it('to remove listeners when destroyed', () => {
     window.removeEventListener = jest.fn();
     const controller = ParallaxController.init({

src/classes/ParallaxController.ts

@@ -233,7 +233,12 @@ export class ParallaxController {
       const scrollHeight = this.viewEl.scrollHeight;
       // @ts-expect-error
       const scrollWidth = this.viewEl.scrollWidth;
-      return this.view.setSize({ width, height, scrollHeight, scrollWidth });
+      return this.view.setSize({
+        width,
+        height,
+        scrollHeight,
+        scrollWidth,
+      });
     }
 
     const html = document.documentElement;
@@ -277,7 +282,10 @@ export class ParallaxController {
    * Creates and returns new parallax element with provided options to be managed by the controller.
    */
   createElement(options: CreateElementOptions): Element {
-    const newElement = new Element({ ...options, scrollAxis: this.scrollAxis });
+    const newElement = new Element({
+      ...options,
+      scrollAxis: this.scrollAxis,
+    });
     newElement.setCachedAttributes(this.view, this.scroll);
     this.elements = this.elements
       ? [...this.elements, newElement]
@@ -357,6 +365,30 @@ export class ParallaxController {
     this._updateAllElements({ updateCache: true });
   }
 
+  /**
+   * Disable all parallax elements
+   */
+  disableAllElements() {
+    if (this.elements) {
+      this.elements = this.elements.map(el => {
+        return el.updateProps({ disabled: true });
+      });
+    }
+    this.update();
+  }
+
+  /**
+   * Enable all parallax elements
+   */
+  enableAllElements() {
+    if (this.elements) {
+      this.elements = this.elements.map(el => {
+        return el.updateProps({ disabled: false });
+      });
+    }
+    this.update();
+  }
+
   /**
    * Removes all listeners and resets all styles on managed elements.
    */