finished index page

kelvinsekx · Oct 30, 2020 · 56d4086 · 56d4086
1 parent ef63298
commit 56d4086
Show file tree

Hide file tree

Showing 9 changed files with 161 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-node_modules
+node_modules
+debug.log
diff --git a/assets/demo.js b/assets/demo.js
@@ -9,4 +9,51 @@ var letter = new LetterLoading('#main', {
     ],
     loadspeed: 5
   });
+
+  var letter2 = new LetterLoading('#main2', {
+    strings: [
+      "You're lovely... yes you are",
+      "This is an example string",
+      "tell me about what more animation you love",
+      "Lastly, Hey, if you're Bukunmi, I love you"
+    ],
+    // set loop to false;
+    loop : false,
+    loadspeed: 5
+  });
+
+  var letter3 = new LetterLoading('#main3', {
+    strings: [
+      "You're lovely... yes you are",
+      "This is an example string",
+      "tell me about what more animation you love",
+      "Lastly, Hey, if you're Bukunmi, I love you"
+    ],
+    loadspeed: 2,
+    randomizeEl: false,
+    char: "",
+  });
+
+  var letter4 = new LetterLoading('#main4', {
+    strings: [
+      "You're lovely... yes you are",
+      "This is an example string",
+      "tell me about what more animation you love",
+      "Lastly, Hey, if you're Bukunmi, I love you"
+    ],
+    loadspeed: 3,
+    randomizeEl: false,
+    hideChaar: false,
+    char: "*",
+  });
+
+  var letter5 = new LetterLoading('#main5', {
+    strings: [
+      "Do this...",
+      "..with cautions",
+    ],
+    loadspeed: 3,
+    hideChaar: false,
+    char: " (* *) ",
+  });
 })
diff --git a/index.html b/index.html
@@ -10,9 +10,12 @@
   </head>
   <body>
     <div id="container">
-      <h1>Letter Loading</h1>
+      <header>
+        <h1>LetterLoading</h1>
+      </header>
+
       <section class="paleteContainer">
-        <h2>Default Letter Loading Simulation</h2>
+        <h2>Default Letter Loading Simulation (loop is set to true by default )</h2>
         <div class="loadingPalete"><span id="main"></span></div>
         <p>
           <pre>
@@ -28,6 +31,93 @@ <h2>Default Letter Loading Simulation</h2>
           </pre>
         </p>
       </section>
+
+      <section class="paleteContainer">
+        <h2> Letter Loading Loop set to false</h2>
+        <div class="loadingPalete"><span id="main2"></span></div>
+        <p>
+          <pre>
+            var letter2 = new LetterLoading('#main2', {
+              strings: [
+                "You're lovely... yes you are",
+                "This is an example string",
+                "tell me about what more animation you love",
+                "Lastly, Hey, if you're Bukunmi, I love you"
+              ],
+              // set loop to false;
+              loop : false,
+              loadspeed: 5
+            });
+          </pre>
+        </p>
+      </section>
+
+      <section class="paleteContainer">
+        <h2> Twick LetterLoading to behave like typed js</h2>
+        <div class="loadingPalete"><span id="main3"></span></div>
+        <p>
+          <pre>
+            var letter3 = new LetterLoading('#main3', {
+              strings: [
+                "You're lovely... yes you are",
+                "This is an example string",
+                "tell me about what more animation you love",
+                "Lastly, Hey, if you're Bukunmi, I love you"
+              ],
+              loadspeed: 2,
+              randomizeEl: false,
+              char: "",
+            });
+          </pre>
+        </p>
+      </section>
+
+      <section class="paleteContainer">
+        <h2> You can make your char visible even</h2>
+        <div class="loadingPalete"><span id="main4"></span></div>
+        <p>
+          <pre>
+            var letter4 = new LetterLoading('#main4', {
+              strings: [
+                "You're lovely... yes you are",
+                "This is an example string",
+                "tell me about what more animation you love",
+                "Lastly, Hey, if you're Bukunmi, I love you"
+              ],
+              loadspeed: 3,
+              randomizeEl: false,
+              // this makes your char visible
+              hideChaar: false,
+              //...
+              char: "*",
+            });
+          </pre>
+        </p>
+      </section>
+
+      <section class="paleteContainer">
+        <h2> Check out</h2>
+        <div class="loadingPalete"><span id="main5"></span></div>
+        <p>
+          <pre>
+            var letter4 = new LetterLoading('#main5', {
+              strings: [
+              "Do this...",
+              "..with cautions",
+              ],
+              loadspeed: 3,
+              // this makes your char visible
+              hideChaar: false,
+              //.replace character with whatever you find beautiful
+              char: " (* *) ",
+            });
+          </pre>
+        </p>
+      </section>
+
+      <footer>
+        <p>LetterLoading is brought to you by kelvinsekx and some amazing contributors</p>
+      </footer>
     </div>
   </body>
 </html>
diff --git a/library/letterloading.js b/library/letterloading.js
diff --git a/library/letterloading.js.map b/library/letterloading.js.map
diff --git a/public/styles.css b/public/styles.css
@@ -33,8 +33,15 @@ section {
 .loadingPalete{
     background-color: rgba(129, 224, 224,0.3);
     width: 99%;
-    height: 2rem;
+    min-height: 2rem;
     border-radius: 1.2rem;
     padding: 0.3em 2rem;
     font-weight: bolder;
 }
+
+footer>p{
+  font-size: 0.8em;
+  border-top: 1px solid rgba(107, 102, 102, 0.3);
+  padding-top: 2rem;
+  font-family: Georgia, 'Times New Roman', Times, serif;
+}
diff --git a/src/defaults.js b/src/defaults.js
@@ -5,6 +5,7 @@ const defaults = {
   hideChaar: true,
   delay: 2500,
   loop: true,
+  randomizeEl: true,
 };
 
 export default defaults;
diff --git a/src/letterloading.js b/src/letterloading.js
@@ -42,7 +42,7 @@ export default class LetterLoading {
   beginAnime(i, curr, str = []) {
     // set this.currentString to the passed string args
     this.currentString = curr;
-    // creates a randomArray element usable to suff our strings
+    // creates a randomArray element usable to suff our strings if told to do so
     this.random();
     // start fetching letters
     this.startFetching(i, curr, str);
@@ -122,7 +122,11 @@ export default class LetterLoading {
 
   random() {
     const randomEl = this.getStringKeysIntoArray(this.currentString.length);
-    this.randomEl = randomEl.sort(() => Math.random() - 0.5);
+    if(this.randomizeEl){
+      this.randomEl = randomEl.sort(() => Math.random() - 0.5);
+      return;
+    }
+    this.randomEl = randomEl
   }
 
   humanize(speed) {

diff --git a/src/loadinitializer.js b/src/loadinitializer.js
@@ -32,6 +32,9 @@ export default class LoadInitializer {
     //current string position
     self.currentStrPos = 0;
 
+    // tell if to randomize letters or not
+    self.randomizeEl = self.options.randomizeEl
+
     //default shuffling
     self._shuffle = false;