Add isTime function and optimize Loadify mixin.

selfishprimate · Jan 21, 2022 · 879d241 · 879d241
1 parent abba7f0
commit 879d241
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 81 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,16 @@
 # Changelog
 _Change is the essence._
 
+## 1.2.3
+
+### Added
+
+- Added `__isTime` function to validate the time values.
+
+### Updated
+
+- Loadify mixin has been refactored.
+
 ## 1.2.2
 
 ### Changed

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "author": "Halil İbrahim Çakıroğlu",
   "main": "scss/_gerillass.scss",
   "license": "Apache-2.0",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/selfishprimate/gerillass"

diff --git a/scss/_gerillass-prefix.scss b/scss/_gerillass-prefix.scss
@@ -799,9 +799,7 @@
 
 @mixin gls-loadify($params...) {
   @if not & {
-    // ROOT LEVEL
-    @if length($params) == 0 {
-      // NO ARGUMENT PASSED
+    @if length($params) == 0 or (length($params) == 1 and nth($params, 1) == "init") {
       @keyframes loadify {
         to {
           opacity: 1;
@@ -816,55 +814,23 @@
         animation-name: loadify;
         animation-fill-mode: forwards;
       }
-    } @else if length($params) == 1 {
-      // ONE ARGUMENT PASSED
-      @if type-of(nth($params, 1)) == "string" {
-        // THE ARGUMENT TYPE IS STRING
-        @if nth($params, 1) == "init" {
-          // THE ARGUMENT VALUE IS `INIT`
-          @keyframes loadify {
-            to {
-              opacity: 1;
-              visibility: visible;
-              backface-visibility: visible;
-            }
-          }
-          .loadify-static-rules {
-            opacity: 0;
-            visibility: hidden;
-            backface-visibility: hidden;
-            animation-name: loadify;
-            animation-fill-mode: forwards;
-          }
-        } @else {
-          // THE ARGUMENT VALUE IS SOMETHING OTHER THAN INIT!
-          @error "#{nth($params, 1)} is not a valid argument. Please pass `init` as an argument to initialize the effect or do not pass any argument at all.";
-        }
-      } @else {
-        // THE ARGUMENT TYPE IS NOT STRING!
-        @error "#{nth($params, 1)} is not a valid argument. Please pass `init` as an argument to initialize the effect or do not pass any argument at all.";
-      }
+    } @else if (length($params) == 1 and nth($params, 1) != "init") or (length($params) == 1 and type-of(nth($params, 1)) != "string") {
+      @error "#{nth($params, 1)} is not a valid argument. Please pass `init` as an argument to initialize the effect or do not pass any argument at all.";
     } @else if length($params) > 1 {
-      // MORE THAN ONE ARGUMENTS PASSED!
       @error "Only one argument is allowed when you call this mixin at the root of your stylesheet! Please pass `init` as an argument to initialize the effect or do not pass any argument at all.";
     }
   } @else if & {
-    // SELECTOR LEVEL
     @extend .loadify-static-rules;
     @if length($params) == 0 {
-      // NO ARGUMENT PASSED!
       animation-delay: 0.2s;
       animation-duration: 0.5s;
     } @else if length($params) == 1 {
-      // ONLY ONE ARGUMENT IS PASSED!
-      animation-delay: #{nth($params, 1)};
+      animation-delay: #{__isTime(nth($params, 1))};
       animation-duration: 0.5s;
     } @else if length($params) == 2 {
-      // TWO ARGUMENTS ARE PASSED!
-      animation-delay: #{nth($params, 1)};
-      animation-duration: #{nth($params, 2)};
+      animation-delay: #{__isTime(nth($params, 1))};
+      animation-duration: #{__isTime(nth($params, 2))};
     } @else if length($params) > 2 {
-      // MORE THAN TWO ARGUMENTS ARE PASSED!
       @error "You cannot pass more than two arguments.";
     }
   }

diff --git a/scss/_gerillass.scss b/scss/_gerillass.scss
@@ -27,6 +27,7 @@
 @import "utilities/font-source";
 @import "utilities/is-color";
 @import "utilities/is-number";
+@import "utilities/is-time";
 @import "utilities/lighten";
 @import "utilities/map-deep-get";
 @import "utilities/null";

diff --git a/scss/library/_loadify.scss b/scss/library/_loadify.scss
@@ -2,9 +2,7 @@
 
 @mixin loadify($params...) {
   @if not & {
-    // ROOT LEVEL
-    @if length($params) == 0 {
-      // NO ARGUMENT PASSED
+    @if length($params) == 0 or (length($params) == 1 and nth($params, 1) == "init") {
       @keyframes loadify {
         to {
           opacity: 1;
@@ -19,55 +17,23 @@
         animation-name: loadify;
         animation-fill-mode: forwards;
       }
-    } @else if length($params) == 1 {
-      // ONE ARGUMENT PASSED
-      @if type-of(nth($params, 1)) == "string" {
-        // THE ARGUMENT TYPE IS STRING
-        @if nth($params, 1) == "init" {
-          // THE ARGUMENT VALUE IS `INIT`
-          @keyframes loadify {
-            to {
-              opacity: 1;
-              visibility: visible;
-              backface-visibility: visible;
-            }
-          }
-          .loadify-static-rules {
-            opacity: 0;
-            visibility: hidden;
-            backface-visibility: hidden;
-            animation-name: loadify;
-            animation-fill-mode: forwards;
-          }
-        } @else {
-          // THE ARGUMENT VALUE IS SOMETHING OTHER THAN INIT!
-          @error "#{nth($params, 1)} is not a valid argument. Please pass `init` as an argument to initialize the effect or do not pass any argument at all.";
-        }
-      } @else {
-        // THE ARGUMENT TYPE IS NOT STRING!
-        @error "#{nth($params, 1)} is not a valid argument. Please pass `init` as an argument to initialize the effect or do not pass any argument at all.";
-      }
+    } @else if (length($params) == 1 and nth($params, 1) != "init") or (length($params) == 1 and type-of(nth($params, 1)) != "string") {
+      @error "#{nth($params, 1)} is not a valid argument. Please pass `init` as an argument to initialize the effect or do not pass any argument at all.";
     } @else if length($params) > 1 {
-      // MORE THAN ONE ARGUMENTS PASSED!
       @error "Only one argument is allowed when you call this mixin at the root of your stylesheet! Please pass `init` as an argument to initialize the effect or do not pass any argument at all.";
     }
   } @else if & {
-    // SELECTOR LEVEL
     @extend .loadify-static-rules;
     @if length($params) == 0 {
-      // NO ARGUMENT PASSED!
       animation-delay: 0.2s;
       animation-duration: 0.5s;
     } @else if length($params) == 1 {
-      // ONLY ONE ARGUMENT IS PASSED!
-      animation-delay: #{nth($params, 1)};
+      animation-delay: #{__isTime(nth($params, 1))};
       animation-duration: 0.5s;
     } @else if length($params) == 2 {
-      // TWO ARGUMENTS ARE PASSED!
-      animation-delay: #{nth($params, 1)};
-      animation-duration: #{nth($params, 2)};
+      animation-delay: #{__isTime(nth($params, 1))};
+      animation-duration: #{__isTime(nth($params, 2))};
     } @else if length($params) > 2 {
-      // MORE THAN TWO ARGUMENTS ARE PASSED!
       @error "You cannot pass more than two arguments.";
     }
   }

diff --git a/scss/utilities/_is-time.scss b/scss/utilities/_is-time.scss
@@ -0,0 +1,9 @@
+@function __isTime($value) {
+  @for $i from 1 through length($value) {
+    @if (type-of($value) == "number" and index("ms" "s", unit($value)) != null) or $value == 0 {
+      @return $value;
+    } @else {
+      @error "'#{$value}' is not a valid time value. Time values must be specified in either seconds (s) or milliseconds (ms). Please try one of the following forms: '1s', '0.2s', or '3ms'";
+    }
+  }
+}