diff --git a/CHANGELOG.md b/CHANGELOG.md index dfefc32..39d0b3a 100644 --- 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 index 044b7bd..9a06d5a 100644 --- 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 index d03474c..f38e8cf 100644 --- 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 index 65b38f1..cb13eeb 100644 --- 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 index f42a46a..5ae333a 100644 --- 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 new file mode 100644 index 0000000..9032b6b --- /dev/null +++ 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'"; + } + } +} \ No newline at end of file