smooth-text-rotator - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

dist/text-rotator.d.ts

@@ -23,3 +23,11 @@ declare type Options = {
     private displayPhrase;
+    private showPhrase;
+    private hidePhrase;
+    private setWidth;
+    /**
+     * Hide all the phrases, show the first one and set the width
+     * @private
+     */
+    private resetPhrases;
 }
 export {};

dist/text-rotator.js

@@ -30,6 +30,2 @@ "use strict";
             if (index > 0) {
-                child.style.opacity = "0";
-                child.setAttribute("aria-hidden", "true");
-                child.style.pointerEvents = "none";
-                child.style.userSelect = "none";
                 child.style.position = "absolute";
@@ -49,3 +45,3 @@ child.style.top = "0";
         this.options.element.style.transition = 'width .5s cubic-bezier(.23,1,.32,1)';
-        this.displayPhrase(0);
+        this.resetPhrases();
         this.setupResizeObserver();
@@ -66,3 +62,7 @@ if (this.options.automaticPause) {
         this.index = 0;
-        this.stopInterval();
+        this.resetPhrases();
+        // If the rotator is paused, the interval is already stopped
+        if (this.intervalID) {
+            this.stopInterval();
+        }
     }
@@ -122,10 +122,9 @@ pause() {
         // hide previously displayed element
-        const phraseElementToHideIndex = index === 0 ? this.phraseElements.length - 1 : index - 1;
-        this.phraseElements[phraseElementToHideIndex].style.opacity = '0';
-        this.phraseElements[phraseElementToHideIndex].setAttribute("aria-hidden", "true");
-        this.phraseElements[phraseElementToHideIndex].style.pointerEvents = "none";
-        this.phraseElements[phraseElementToHideIndex].style.userSelect = "none";
+        this.hidePhrase(index === 0 ? this.phraseElements.length - 1 : index - 1);
         // set the width of the parent span according to the width of the child to display
-        this.options.element.style.width = `${this.phraseElements[index].offsetWidth}px`;
+        this.setWidth(index);
         // display the phrase to display
+        this.showPhrase(index);
+    }
+    showPhrase(index) {
         this.phraseElements[index].style.opacity = '1';
@@ -136,4 +135,28 @@ this.phraseElements[index].removeAttribute("aria-hidden");
     }
+    hidePhrase(index) {
+        this.phraseElements[index].style.opacity = '0';
+        this.phraseElements[index].setAttribute("aria-hidden", "true");
+        this.phraseElements[index].style.pointerEvents = "none";
+        this.phraseElements[index].style.userSelect = "none";
+    }
+    setWidth(index) {
+        this.options.element.style.width = `${this.phraseElements[index].offsetWidth}px`;
+    }
+    /**
+     * Hide all the phrases, show the first one and set the width
+     * @private
+     */
+    resetPhrases() {
+        for (let i = 0; i < this.phraseElements.length; i++) {
+            if (i === 0) {
+                this.setWidth(i);
+                this.showPhrase(i);
+            }
+            else {
+                this.hidePhrase(i);
+            }
+        }
+    }
 }
 exports.TextRotator = TextRotator;
 //# sourceMappingURL=text-rotator.js.map

package.json

 {
   "name": "smooth-text-rotator",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Super simple JS library for rotating text with smooth animations",
@@ -36,3 +36,3 @@ "author": "Branchard <[e-mail]>",
     "typescript": "^4.4.4",
-    "vite": "^2.6.10"
+    "vite": "^2.6.11"
   },
@@ -39,0 +39,0 @@ "dependencies": {},

src/text-rotator.ts

@@ -50,6 +50,2 @@ import {isArrayOfString} from "./type-guards";
       if (index > 0) {
-        child.style.opacity = "0";
-        child.setAttribute("aria-hidden", "true");
-        child.style.pointerEvents = "none";
-        child.style.userSelect = "none";
         child.style.position = "absolute";
@@ -70,5 +66,6 @@ child.style.top = "0";
     this.options.element.style.transition = 'width .5s cubic-bezier(.23,1,.32,1)';
-    this.displayPhrase(0);
+    this.resetPhrases();
+
     this.setupResizeObserver();
-    if(this.options.automaticPause){
+    if (this.options.automaticPause) {
       this.setupIntersectionObserver();
@@ -90,3 +87,7 @@ }
     this.index = 0;
-    this.stopInterval();
+    this.resetPhrases();
+    // If the rotator is paused, the interval is already stopped
+    if (this.intervalID) {
+      this.stopInterval();
+    }
   }
@@ -157,12 +158,12 @@
     // hide previously displayed element
-    const phraseElementToHideIndex = index === 0 ? this.phraseElements.length - 1 : index - 1;
-    this.phraseElements[phraseElementToHideIndex].style.opacity = '0';
-    this.phraseElements[phraseElementToHideIndex].setAttribute("aria-hidden", "true");
-    this.phraseElements[phraseElementToHideIndex].style.pointerEvents = "none";
-    this.phraseElements[phraseElementToHideIndex].style.userSelect = "none";
+    this.hidePhrase(index === 0 ? this.phraseElements.length - 1 : index - 1);
 
     // set the width of the parent span according to the width of the child to display
-    this.options.element.style.width = `${this.phraseElements[index].offsetWidth}px`;
+    this.setWidth(index);
 
     // display the phrase to display
+    this.showPhrase(index);
+  }
+
+  private showPhrase(index: number) {
     this.phraseElements[index].style.opacity = '1';
@@ -173,2 +174,28 @@ this.phraseElements[index].removeAttribute("aria-hidden");
   }
+
+  private hidePhrase(index: number) {
+    this.phraseElements[index].style.opacity = '0';
+    this.phraseElements[index].setAttribute("aria-hidden", "true");
+    this.phraseElements[index].style.pointerEvents = "none";
+    this.phraseElements[index].style.userSelect = "none";
+  }
+
+  private setWidth(index: number) {
+    this.options.element.style.width = `${this.phraseElements[index].offsetWidth}px`;
+  }
+
+  /**
+   * Hide all the phrases, show the first one and set the width
+   * @private
+   */
+  private resetPhrases() {
+    for (let i = 0; i < this.phraseElements.length; i++) {
+      if (i === 0) {
+        this.setWidth(i);
+        this.showPhrase(i);
+      } else {
+        this.hidePhrase(i);
+      }
+    }
+  }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24176

increased by5.58%

Lines of code

466

increased by12.83%

No dependency changes