gerillass 1.2.1 → 1.2.2

package/CHANGELOG.md

@@ -1,23 +1,54 @@
 # Changelog
 _Change is the essence._
 
-## 1.2.1
-* Add @extend fuctionality to use Loadify mixin for multiple selectors.
+## [1.2.2]
 
-## 1.2.0
-* Add Loadify: A new mixin to help page elements render more natural during the time of page loads.
+### Changed
 
-## 1.1.3
-* Add box-sizing property to Columnizer mixin.
+- Improved Loadify mixin. The `init` argument is now available to initialize the mixin at the root level of stylesheet.
 
-## 1.1.2
-* Uptade for security vulnerabilities.
+### Removed
 
-## 1.1.1
-* Bugfix for a comment.
+- Removed `.travis.yml` file. Travis CI integration no longer available.
 
-## 1.1.0
-* Remove all the `gls-` prefixes from the mixin files under the `library` folder and make prefix usage optional (`gls-` prefix still can ben use).
+## [1.2.1]
 
-## 0.0.1
-* Changelog created!
+### Added
+
+- The `extend` directive has been added to use Loadify mixin for multiple selectors.
+
+## [1.2.0]
+
+### Added
+
+- Added Loadify: A new mixin to help page elements render more natural during the time of page loads.
+
+## [1.1.3]
+
+### Added
+
+- Added box-sizing property to Columnizer mixin.
+
+## [1.1.2]
+
+### Updated
+
+- Uptade for security vulnerabilities.
+
+## [1.1.1]
+
+### Fixed
+
+- Bugfix for a comment.
+
+## [1.1.0]
+
+### Removed
+
+- Remove all the `gls-` prefixes from the mixin files under the `library` folder and make prefix usage optional (`gls-` prefix still can ben use).
+
+## [0.0.1]
+
+### Added
+
+- Changelog created!

package/package.json

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

package/scss/_gerillass-prefix.scss

@@ -798,37 +798,75 @@
 
 
 @mixin gls-loadify($params...) {
-  @if not & and length($params) == 0 {
-    @keyframes loadify {
-      to {
-        opacity: 1;
-        visibility: visible;
-        backface-visibility: visible;
+  @if not & {
+    // ROOT LEVEL
+    @if length($params) == 0 {
+      // NO ARGUMENT PASSED
+      @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 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 {
+      // 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.";
     }
-    .static-rules {
-      opacity: 0;
-      visibility: hidden;
-      backface-visibility: hidden;
-      animation-name: loadify;
-      animation-fill-mode: forwards;
-    }
-  } @else if not & and length($params) > 0 {
-    @error "PLEASE DO NOT PASS AN ARGUMENT WHEN YOU CALL LOADIFY MIXIN AT THE ROOT OF YOUR STYLESHEET! \A";
-  } @else if & and length($params) == 0 or length($params) < 3 {
-    @extend .static-rules;
+  } @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-duration: 0.5s;
     } @else if length($params) == 2 {
+      // TWO ARGUMENTS ARE PASSED!
       animation-delay: #{nth($params, 1)};
       animation-duration: #{nth($params, 2)};
+    } @else if length($params) > 2 {
+      // MORE THAN TWO ARGUMENTS ARE PASSED!
+      @error "You cannot pass more than two arguments.";
     }
-  } @else if length($params) > 2 {
-    @error "NO MORE THAN 2 ARGUMENTS ARE ALLOWED! \A";
   }
 }
 

package/scss/library/_loadify.scss

@@ -1,36 +1,74 @@
 @charset "UTF-8";
 
 @mixin loadify($params...) {
-  @if not & and length($params) == 0 {
-    @keyframes loadify {
-      to {
-        opacity: 1;
-        visibility: visible;
-        backface-visibility: visible;
+  @if not & {
+    // ROOT LEVEL
+    @if length($params) == 0 {
+      // NO ARGUMENT PASSED
+      @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 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 {
+      // 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.";
     }
-    .static-rules {
-      opacity: 0;
-      visibility: hidden;
-      backface-visibility: hidden;
-      animation-name: loadify;
-      animation-fill-mode: forwards;
-    }
-  } @else if not & and length($params) > 0 {
-    @error "PLEASE DO NOT PASS AN ARGUMENT WHEN YOU CALL LOADIFY MIXIN AT THE ROOT OF YOUR STYLESHEET! \A";
-  } @else if & and length($params) == 0 or length($params) < 3 {
-    @extend .static-rules;
+  } @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-duration: 0.5s;
     } @else if length($params) == 2 {
+      // TWO ARGUMENTS ARE PASSED!
       animation-delay: #{nth($params, 1)};
       animation-duration: #{nth($params, 2)};
+    } @else if length($params) > 2 {
+      // MORE THAN TWO ARGUMENTS ARE PASSED!
+      @error "You cannot pass more than two arguments.";
     }
-  } @else if length($params) > 2 {
-    @error "NO MORE THAN 2 ARGUMENTS ARE ALLOWED! \A";
   }
 }