added features

murtuzaalisurti · Feb 9, 2022 · 6b36d12 · 6b36d12
1 parent 515e406
commit 6b36d12
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -33,31 +33,60 @@ In order to use it, insert the following `<script>` tag in the `<head>` tag of y
 - Invoke the below function with the required arguments as shown below in your javascript file! Let's understand **these arguments** which are passed to the function!
 
 ```js
-wavy.wavy(html_element, {words: ["word-1", "word-2", "word-n"]}, {color: 'font-color'});
+
+wavy(html_element, {words: ["word-1", "word-2", "word-n"]}, {color: 'font-color'});
+
 ```
 
 - The **first argument** you should pass is an html element in which you want to place the words! It's like a wrapper element!
 
 - Example for first argument:
 
 ```js
-wavy.wavy(document.querySelector(".text"), second_argument, third_argument);
+
+wavy(document.querySelector(".text"), second_argument, third_argument);
+
 ```
 
 - The **second argument** you should pass is an object with a property of `words` set to a value of an `array` containing as many words as you want to display. There is no word limit. These words will be animated in an infinite loop!
 
 - Example for second argument:
 
 ```js
-wavy.wavy(document.querySelector(".text"), {words: ["Wavy", "Text", "Animation", "Library", "JavaScript"]}, third_argument);
+
+wavy(document.querySelector(".text"), {words: ["Wavy", "Text", "Animation", "Library", "JavaScript"]}, third_argument);
+
 ```
 
-- The **third argument (optional)** you should pass is an object with an option to set the color of the `text`. The color values can be `hex`, `rgb`, `hsl` or standard `css values`. Deafult color is `black`.
+- The **third argument** you should pass is an object with some options to set the color, fontSize, fontFamily and scale properties of the `text`. Here are all the properties that you can modify:
+
+```js
+//these are default values
+
+color: 'black', // you can also use rgb, hsl, rgba, hex
+fontSize: '1rem',
+fontFamily: 'sans-serif',
+transform: scale(1.5)
+
+```
 
 - Example for third argument:
 
 ```js
-wavy.wavy(document.querySelector(".text"), {words: ["Wavy", "Text", "Animation", "Library", "JavaScript"]}, {color: "green"});
+
+wavy(
+ document.querySelector(".text"), 
+ {
+ words: ["Wavy", "Text", "Animation", "Library", "JavaScript"]
+ },
+ {
+ color: 'green', 
+ fontSize: '2rem', 
+ fontFamily: 'Poppins, sans-serif', 
+ transform: 'scale(1.8)'
+ }
+);
+
 ```
 
 > **NOTE: The first two arguments are mandatory!**

diff --git a/main.js b/main.js
@@ -1,16 +1,28 @@
 
 function wavy(element, words, options) {
+
+ const defaults = {
+ color: 'black',
+ fontSize: '1rem',
+ fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
+ transform: 'scale(1.5)'
+ }
+
+ function setOptions(type){
+ return (options !== undefined) ? ((Object.keys(options).length !== 0) ? (options[type] !== undefined ? options[type] : defaults[type]) : defaults[type]) : defaults[type];
+ }
 
  element.style = ` 
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; 
- -webkit-transform: scale(1.5);
- transform: scale(1.5);
+ -webkit-transform: ${setOptions('transform')};
+ transform: ${setOptions('transform')};
+ font-family: ${setOptions('fontFamily')};
+ font-size: ${setOptions('fontSize')};
  `;
 
  const skills_name = words.words;
-
  let iteration = 1;
  let array_of_skills_splitted = skills_name.map((skill) => {
  return skill.split("");
@@ -26,7 +38,6 @@ function wavy(element, words, options) {
  return array_of_html_of_letter.join("");
  })
 
- // let text_string = document.querySelector(".desc_text");
  let text_string = element;
 
  text_string.innerHTML = array_of_final_html_string[0];
@@ -36,24 +47,22 @@ function wavy(element, words, options) {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
- color: ${(options !== undefined) ? (options.color !== undefined ? options.color : "black") : "black"}
+ color: ${setOptions('color')};
  `;
  })
 
- let spans = element.childNodes;
- // let spans = document.querySelectorAll(".desc_text span");
+ let spans = element.childNodes; // document.querySelectorAll(".class span");
 
  for (let i = 0; i < spans.length; i++) {
  let word_length = spans.length;
  let zoom_in = text_string.animate([
  {
- transform: `scale(${Number(1.5)})`
+ transform: `${setOptions('transform')}` // default = `scale(${Number(1.5)})`
  },
  {
  transform: `scale(${Number(1)})`
  }
  ], {
- // delay: 300,
  delay: `${Number((word_length/3)*100)}`,
  duration: 400,
  iterations: 1,
@@ -104,4 +113,12 @@ function wavy(element, words, options) {
  text_animate();
 }
 
-// wavy(document.querySelector(".description"), {words: ["Accenture", "Instagram", "Wordle", "Ginger"]}, {color: blue});
+/* --use--
+
+wavy(
+ document.querySelector(".description"), 
+ {words: ["Accenture", "Instagram", "Wordle", "Ginger"]},
+ {color: 'green', fontSize: '2rem', fontFamily: 'Poppins, sans-serif', transform: 'scale(1.8)'}
+); 
+
+*/