🏷️ Update index.d.ts #54

Author: geosigno

README.md

@@ -97,8 +97,8 @@ scale | Number | 1.3 | need to be above 1
 overflow | Boolean | false | 
 delay | Number | 0 | the delay is in second **Watch out, sometimes this delay is causing issue on iOS devices [#47](https://github.com/geosigno/simpleParallax.js/issues/47)**
 transition | String | '' | any CSS transition
-customContainer | String or Node | false | 
-customWrapper | string | '' | the selector of the custom wrapper
+customContainer | String or Node | '' | 
+customWrapper | String | '' | the selector of the custom wrapper
 maxTransition | Number | 0 | it should be a percentage between 1 and 99
 
 You can apply these settings with the following JS code:
@@ -133,7 +133,7 @@ The *transition* setting works closely with the *delay* setting. This setting wi
 ### customContainer - *String or Node*
 By default, the parallax calculation is done with the body scroll percentage. In some cases, the images may be in a container that has its own scroll area, so to have an accurate calculation, the custom container should be set.
 
-### customWrapper - *string*
+### customWrapper - *String*
 In some cases, you want to use your own wrapper instead of the one created by the plugin. If you specify your custom wrapper, the plugin will add the "simpleParallax" class along with an "overflow: hidden" style.
 
 ### maxTransition - *Number* - see [example](https://simpleparallax.com#example-max-transition)

dist/simpleParallax.js

@@ -1,6 +1,6 @@
 /*!
  * simpleParallax - simpleParallax is a simple JavaScript library that gives your website parallax animations on any images or videos, 
- * @date: 09-06-2020 12:9:37, 
+ * @date: 21-06-2020 13:22:47, 
  * @version: 5.5.1,
  * @link: https://simpleparallax.com/
  */
@@ -258,7 +258,8 @@ var parallax_ParallaxInstance = /*#__PURE__*/function () {
     this.isVisible = true;
     this.isInit = false;
     this.oldTranslateValue = -1;
-    this.init = this.init.bind(this); // check if images has not been loaded yet
+    this.init = this.init.bind(this);
+    this.customWrapper = this.settings.customWrapper && this.element.closest(this.settings.customWrapper) ? this.element.closest(this.settings.customWrapper) : null; // check if images has not been loaded yet
 
     if (helpers_isImageLoaded(element)) {
       this.init();
@@ -322,22 +323,16 @@ var parallax_ParallaxInstance = /*#__PURE__*/function () {
   }, {
     key: "wrapElement",
     value: function wrapElement() {
-      // get the customWrapper if any
-      var customWrapper = this.settings.customWrapper && this.element.closest(this.settings.customWrapper); // check is current image is in a <picture> tag
-
+      // check is current image is in a <picture> tag
       var elementToWrap = this.element.closest('picture') || this.element; // create a .simpleParallax wrapper container
-
-      var wrapper = document.createElement('div'); // if there is a custom wrapper
+      // if there is a custom wrapper
       // override the wrapper with it
 
-      if (customWrapper) {
-        wrapper = this.element.closest(this.settings.customWrapper);
-      }
-
+      var wrapper = this.customWrapper || document.createElement('div');
       wrapper.classList.add('simpleParallax');
       wrapper.style.overflow = 'hidden'; // append the image inside the new wrapper
 
-      if (!customWrapper) {
+      if (!this.customWrapper) {
         elementToWrap.parentNode.insertBefore(wrapper, elementToWrap);
         wrapper.appendChild(elementToWrap);
       }
@@ -348,11 +343,9 @@ var parallax_ParallaxInstance = /*#__PURE__*/function () {
   }, {
     key: "unWrapElement",
     value: function unWrapElement() {
-      var wrapper = this.elementContainer; // get the customWrapper if any
-
-      var customWrapper = this.settings.customWrapper && this.element.closest(this.settings.customWrapper); // if there is a custom wrapper, we jusy need to remove the class and style
+      var wrapper = this.elementContainer; // if there is a custom wrapper, we jusy need to remove the class and style
 
-      if (customWrapper) {
+      if (this.customWrapper) {
         wrapper.classList.remove('simpleParallax');
         wrapper.style.overflow = '';
       } else {
@@ -589,8 +582,8 @@ var simpleParallax_SimpleParallax = /*#__PURE__*/function () {
       scale: 1.3,
       overflow: false,
       transition: 'cubic-bezier(0,0,0,1)',
-      customContainer: false,
-      customWrapper: false,
+      customContainer: '',
+      customWrapper: '',
       maxTransition: 0
     };
     this.settings = Object.assign(this.defaults, options);

dist/simpleParallax.min.js

@@ -6,10 +6,9 @@ declare module 'simple-parallax-js' {
         delay?: number;
         transition?: string;
         breakpoint?: number;
-        customContainer?: boolean;
-        customWrapper?: boolean;
+        customContainer?: string | HTMLElement;
+        customWrapper?: string;
         maxTransition?: number;
-
     }
 
     export default class SimpleParallax {

index.d.ts

@@ -14,6 +14,11 @@ class ParallaxInstance {
 
         this.init = this.init.bind(this);
 
+        this.customWrapper =
+            this.settings.customWrapper && this.element.closest(this.settings.customWrapper)
+                ? this.element.closest(this.settings.customWrapper)
+                : null;
+
         // check if images has not been loaded yet
         if (isImageLoaded(element)) {
             this.init();
@@ -77,26 +82,19 @@ class ParallaxInstance {
     // if overflow option is set to false
     // wrap the element into a .simpleParallax div and apply overflow hidden to hide the image excedant (result of the scale)
     wrapElement() {
-        // get the customWrapper if any
-        const customWrapper = this.settings.customWrapper && this.element.closest(this.settings.customWrapper);
-
         // check is current image is in a <picture> tag
         const elementToWrap = this.element.closest('picture') || this.element;
 
         // create a .simpleParallax wrapper container
-        let wrapper = document.createElement('div');
-
         // if there is a custom wrapper
         // override the wrapper with it
-        if (customWrapper) {
-            wrapper = this.element.closest(this.settings.customWrapper);
-        }
+        let wrapper = this.customWrapper || document.createElement('div');
 
         wrapper.classList.add('simpleParallax');
         wrapper.style.overflow = 'hidden';
 
         // append the image inside the new wrapper
-        if (!customWrapper) {
+        if (!this.customWrapper) {
             elementToWrap.parentNode.insertBefore(wrapper, elementToWrap);
             wrapper.appendChild(elementToWrap);
         }
@@ -108,11 +106,8 @@ class ParallaxInstance {
     unWrapElement() {
         const wrapper = this.elementContainer;
 
-        // get the customWrapper if any
-        const customWrapper = this.settings.customWrapper && this.element.closest(this.settings.customWrapper);
-
         // if there is a custom wrapper, we jusy need to remove the class and style
-        if (customWrapper) {
+        if (this.customWrapper) {
             wrapper.classList.remove('simpleParallax');
             wrapper.style.overflow = '';
         } else {

src/instances/parallax.js

@@ -23,8 +23,8 @@ export default class SimpleParallax {
             scale: 1.3,
             overflow: false,
             transition: 'cubic-bezier(0,0,0,1)',
-            customContainer: false,
-            customWrapper: false,
+            customContainer: '',
+            customWrapper: '',
             maxTransition: 0
         };