Bring radial-gradient function and mixin up to spec

thoughtbot · Apr 5, 2013 · c9c10af · c9c10af
1 parent b343003
commit c9c10af
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 113 deletions.
diff --git a/app/assets/stylesheets/_bourbon.scss b/app/assets/stylesheets/_bourbon.scss
@@ -1,5 +1,8 @@
 // Custom Helpers
-@import "helpers/calc-gradient-positions";
+@import "helpers/linear-positions-parser";
+@import "helpers/radial-arg-parser";
+@import "helpers/radial-positions-parser";
+@import "helpers/shape-size-stripper";
 
 // Custom Functions
 @import "functions/compact";

diff --git a/app/assets/stylesheets/css3/_background-image.scss b/app/assets/stylesheets/css3/_background-image.scss
@@ -9,10 +9,10 @@
 }
 
 @function add-prefix($images, $vendor: false) {
-  @debug $images;
   $images-prefixed: ();
   $gradient-positions: false;
 
+  // REMOVE FOR LOOP??
   @for $i from 1 through length($images) {
     $type: type-of(nth($images, $i)); // Get type of variable - List or String
 
@@ -22,7 +22,7 @@
       $gradient-pos: null;
       $gradient-args: null;
 
-      @if $gradient-type == linear {
+      @if ($gradient-type == linear) or ($gradient-type == radial) {
         $gradient-pos:  nth(nth($images, $i), 2); // Get gradient position
         $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue)
       }
@@ -31,8 +31,10 @@
       }
 
       @if ($gradient-pos) and ($gradient-type == linear) and (type-of($gradient-pos) != color) and (type-of($gradient-pos) != number) {
-        @debug "happing";
-        $gradient-positions: calc-gradient-positions($gradient-pos);
+        $gradient-positions: _linear-positions-parser($gradient-pos);
+      }
+      @else if ($gradient-pos) and ($gradient-type == radial) and (type-of($gradient-pos) != color) and (type-of($gradient-pos) != number) {
+        $gradient-positions: _radial-positions-parser($gradient-pos);
       }
 
       $gradient: render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
@@ -47,6 +49,7 @@
   @return $images-prefixed;
 }
 
+
 //Examples:
   //@include background-image(linear-gradient(top, orange, red));
   //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));

diff --git a/app/assets/stylesheets/css3/_linear-gradient.scss b/app/assets/stylesheets/css3/_linear-gradient.scss
@@ -19,7 +19,7 @@
   }
 
   @if $pos {
-    $positions: calc-gradient-positions($pos);
+    $positions: _linear-positions-parser($pos);
     $pos-degree: nth($positions, 1);
     $pos-spec:   nth($positions, 2);
   }

diff --git a/app/assets/stylesheets/css3/_radial-gradient.scss b/app/assets/stylesheets/css3/_radial-gradient.scss
@@ -4,58 +4,25 @@
                        $G5: false, $G6: false,
                        $G7: false, $G8: false,
                        $G9: false, $G10: false,
-                       $pos: 50% 50%,
-                       $shape-size: ellipse cover,
+                       $pos: null,
+                       $shape-size: null,
                        $deprecated-pos1: center center,
                        $deprecated-pos2: center center,
                        $deprecated-radius1: 0,
                        $deprecated-radius2: 460,
                        $fallback: false) {
 
-  @each $value in $G1, $G2 {
-    $first-val: nth($value, 1);
-    $pos-type:  type-of($first-val);
-
-    @if ($pos-type != color) or ($first-val != "transparent") {
-      @if ($pos-type == number)
-      or ($first-val == "center")
-      or ($first-val == "top")
-      or ($first-val == "right")
-      or ($first-val == "bottom")
-      or ($first-val == "left") {
-
-        $pos: $value;
-
-        @if $pos == $G1 {
-          $G1: false;
-        }
-      }
-
-      @else if
-         ($first-val == "ellipse")
-      or ($first-val == "circle")
-      or ($first-val == "closest-side")
-      or ($first-val == "closest-corner")
-      or ($first-val == "farthest-side")
-      or ($first-val == "farthest-corner")
-      or ($first-val == "contain")
-      or ($first-val == "cover") {
-
-        $shape-size: $value;
-
-        @if $value == $G1 {
-          $G1: false;
-        }
-
-        @else if $value == $G2 {
-          $G2: false;
-        }
-      }
-    }
-  }
+  $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
+  $G1:  nth($data, 1);
+  $G2:  nth($data, 2);
+  $pos: nth($data, 3);
+  $shape-size: nth($data, 4);
 
   $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
 
+  // Strip deprecated cover/contain for spec
+  $shape-size-spec: _shape-size-stripper($shape-size);
+
   // Set $G1 as the default fallback color
   $first-color: nth($full, 1);
   $fallback-color: nth($first-color, 1);
@@ -64,15 +31,14 @@
     $fallback-color: $fallback;
   }
 
+  // Add Commas and spaces
+  $shape-size: if($shape-size, '#{$shape-size}, ', null);
+  $pos:        if($pos, '#{$pos}, ', null);
+  $pos-spec:   if($pos, 'at #{$pos}', null);
+  $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
+
   background-color:  $fallback-color;
-  background-image: deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0
-  background-image:  -webkit-radial-gradient($pos, $shape-size, $full);
-  background-image:     -moz-radial-gradient($pos, $shape-size, $full);
-  background-image:      -ms-radial-gradient($pos, $shape-size, $full);
-  background-image:       -o-radial-gradient($pos, $shape-size, $full);
-  background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})");
+  background-image: deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4
+  background-image:  -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
+  background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
 }
-
-//  Usage: Gradient position and shape-size are required. Color stops are optional.
-//  @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
-//  @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
diff --git a/app/assets/stylesheets/functions/_radial-gradient.scss b/app/assets/stylesheets/functions/_radial-gradient.scss
@@ -4,54 +4,20 @@
                        $G5: false, $G6: false,
                        $G7: false, $G8: false,
                        $G9: false, $G10: false,
-                       $pos: 50% 50%,
-                       $shape-size: ellipse cover) {
+                       $pos: null,
+                       $shape-size: null) {
 
-  @each $value in $G1, $G2 {
-    $first-val: nth($value, 1);
-    $pos-type:  type-of($first-val);
-
-    @if ($pos-type != color) or ($first-val != "transparent") {
-      @if ($pos-type == number)
-      or ($first-val == "center")
-      or ($first-val == "top")
-      or ($first-val == "right")
-      or ($first-val == "bottom")
-      or ($first-val == "left") {
-
-        $pos: $value;
-
-        @if $pos == $G1 {
-          $G1: false;
-        }
-      }
-
-      @else if
-         ($first-val == "ellipse")
-      or ($first-val == "circle")
-      or ($first-val == "closest-side")
-      or ($first-val == "closest-corner")
-      or ($first-val == "farthest-side")
-      or ($first-val == "farthest-corner")
-      or ($first-val == "contain")
-      or ($first-val == "cover") {
-
-        $shape-size: $value;
-
-        @if $value == $G1 {
-          $G1: false;
-        }
-
-        @else if $value == $G2 {
-          $G2: false;
-        }
-      }
-    }
-  }
+  $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
+  $G1:  nth($data, 1);
+  $G2:  nth($data, 2);
+  $pos: nth($data, 3);
+  $shape-size: nth($data, 4);
 
   $type: radial;
-  $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
-  $type-gradient: append($type, $gradient, comma);
+  $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
 
+  $type-gradient: $type, $shape-size $pos, $gradient;
   @return $type-gradient;
 }
+
+
diff --git a/app/assets/stylesheets/functions/_render-gradients.scss b/app/assets/stylesheets/functions/_render-gradients.scss
@@ -1,22 +1,28 @@
 // User for linear and radial gradients within background-image or border-image properties
 
 @function render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
-  $pos-degree: null;
-  $pos-spec: null;
+  $pre-spec: null;
+  $spec: null;
+  $vendor-gradients: null;
 
-  @if $gradient-positions {
-    $pos-degree: nth($gradient-positions, 1);
-    $pos-spec:   nth($gradient-positions, 2);
+  @if $gradient-type == linear {
+    @if $gradient-positions {
+      $pre-spec: nth($gradient-positions, 1);
+      $spec:   nth($gradient-positions, 2);
+    }
   }
 
-  $vendor-gradients: false;
+  @else if $gradient-type == radial {
+    $pre-spec: nth($gradient-positions, 1);
+    $spec:     nth($gradient-positions, 2);
+  }
 
   @if $vendor {
-    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pos-degree} $gradients);
+    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
   }
 
   @else if $vendor == false {
-    $vendor-gradients: "#{$gradient-type}-gradient(#{$pos-spec} #{$gradients})";
+    $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
     $vendor-gradients: unquote($vendor-gradients);
   }
   @return $vendor-gradients;

diff --git a/...heets/helpers/calc-gradient-position.scss → ...ets/helpers/_linear-positions-parser.scss b/...heets/helpers/calc-gradient-position.scss → ...ets/helpers/_linear-positions-parser.scss
@@ -1,4 +1,4 @@
-@function calc-gradient-positions($pos) {
+@function _linear-positions-parser($pos) {
   $type: type-of(nth($pos, 1));
   $spec: null;
   $degree: null;

diff --git a/app/assets/stylesheets/helpers/_radial-arg-parser.scss b/app/assets/stylesheets/helpers/_radial-arg-parser.scss
@@ -0,0 +1,69 @@
+@function _radial-arg-parser($G1, $G2, $pos, $shape-size) {
+  @each $value in $G1, $G2 {
+    $first-val: nth($value, 1);
+    $pos-type:  type-of($first-val);
+    $spec-at-index: null;
+
+    // Determine if spec was passed to mixin
+    @if type-of($value) == list {
+      $spec-at-index: if(index($value, at), index($value, at), false);
+    }
+    @if $spec-at-index {
+      @if $spec-at-index > 1 {
+        @for $i from 1 through ($spec-at-index - 1) {
+          $shape-size: $shape-size nth($value, $i);
+        }
+        @for $i from ($spec-at-index + 1) through length($value) {
+          $pos: $pos nth($value, $i);
+        }
+      }
+      @else if $spec-at-index == 1 {
+        @for $i from ($spec-at-index + 1) through length($value) {
+          $pos: $pos nth($value, $i);
+        }
+      }
+      $G1: false;
+    }
+
+    // If not spec calculate correct values
+    @else {
+      @if ($pos-type != color) or ($first-val != "transparent") {
+        @if ($pos-type == number)
+        or ($first-val == "center")
+        or ($first-val == "top")
+        or ($first-val == "right")
+        or ($first-val == "bottom")
+        or ($first-val == "left") {
+
+          $pos: $value;
+
+          @if $pos == $G1 {
+            $G1: false;
+          }
+        }
+
+        @else if
+           ($first-val == "ellipse")
+        or ($first-val == "circle")
+        or ($first-val == "closest-side")
+        or ($first-val == "closest-corner")
+        or ($first-val == "farthest-side")
+        or ($first-val == "farthest-corner")
+        or ($first-val == "contain")
+        or ($first-val == "cover") {
+
+          $shape-size: $value;
+
+          @if $value == $G1 {
+            $G1: false;
+          }
+
+          @else if $value == $G2 {
+            $G2: false;
+          }
+        }
+      }
+    }
+  }
+  @return $G1, $G2, $pos, $shape-size;
+}
diff --git a/app/assets/stylesheets/helpers/_radial-positions-parser.scss b/app/assets/stylesheets/helpers/_radial-positions-parser.scss
@@ -0,0 +1,18 @@
+@function _radial-positions-parser($gradient-pos) {
+  $shape-size: nth($gradient-pos, 1);
+  $pos:        nth($gradient-pos, 2);
+  $shape-size-spec: _shape-size-stripper($shape-size);
+
+  $pre-spec: unquote(if($pos, "#{$pos}, ", null))
+             unquote(if($shape-size, "#{$shape-size},", null));
+  $pos-spec: if($pos, "at #{$pos}", null);
+
+  $spec: "#{$shape-size-spec} #{$pos-spec}";
+
+  // Add comma
+  @if ($spec != '  ') {
+    $spec: "#{$spec},"
+  }
+
+  @return $pre-spec $spec;
+}
diff --git a/app/assets/stylesheets/helpers/_shape-size-stripper.scss b/app/assets/stylesheets/helpers/_shape-size-stripper.scss
@@ -0,0 +1,10 @@
+@function _shape-size-stripper($shape-size) {
+  $shape-size-spec: null;
+  @each $value in $shape-size {
+    @if ($value == "cover") or ($value == "contain") {
+      $value: null;
+    }
+    $shape-size-spec: "#{$shape-size-spec} #{$value}";
+  }
+  @return $shape-size-spec;
+}