From: Jeanie Chung <jeanie.chung@gmail.com>
Date: Tue, 27 Jan 2015 00:03:44 +0000 (-0800)
Subject: Updated col.js to reflect new scss classes.
X-Git-Tag: v2.0.0-rc.1~156^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=9abecd4d1e7e6aef4262134e5b0b1e277b4cfd8b;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

Updated col.js to reflect new scss classes.
---

diff --git a/html/index.html b/html/index.html
index bb37dc13..54deb0ce 100644
--- a/html/index.html
+++ b/html/index.html
@@ -16,45 +16,23 @@
     <tr>
       <container>
         <row>
-          <column num="four">
-            Explicitly declare four col
-            <div class="bloop">
-            bloop 
-            </div>
+          <column class="green">
+            I'm evenly
           </column>
-          <column num="eight">eight col</column>
+          <column class="blue">distributed</column>
+          <column class="red">into 3 columns</column>
         </row>
       </container>
 
       <container>
         <row>
-          <column num="two">
-            <center>two col centered</center> 
-          </column>
-          <column num="eight">
-            <center>eight col centered</center>
-          </column>
-          <column num="two">
-            <center>two col centered</center> 
-          </column>
-        </row>
-      </container>
-
-        <container>
-        <row>
-          <column class="green">
-            I'm evenly
+          <column class="green" small='8'>
+            .large-4 .small-8
           </column>
-          <column class="blue">distributed</column>
-          <column class="red">into</column>
-          <column class="green">two</column>
-          <column class="blue">columns</column>
-          <column class="red">each</column>
+          <column class="blue" small='2'>.large-4 .small-2</column>
+          <column class="red" small='2'>.large-4 .small-2</column>
         </row>
       </container>
-
-      <container>empty container</container>
-      <row>empty row</row>
     </tr>
   </table>
 </body>
diff --git a/js/components/col.js b/js/components/col.js
index db2a04db..bccddfe7 100644
--- a/js/components/col.js
+++ b/js/components/col.js
@@ -3,31 +3,53 @@
 
 var createCol = function(obj) {
   var output = '';
+  var mQ     = {small: 0, large: 0};
+  var colEven  = '';
+
+  $.each(obj, function() {
+    var col = $(this);
+
+    // do the maths first
+    $.each( mQ, function(i, val) {
+      if (!col.attr(i)) {
+        // count the number of columns that do not have a specified width
+        mQ[i]++;
+
+        // at the final iteration
+        if (mQ[i] === obj.length) {
+          // divide the default grid number by the number of colums with no width
+          var evenSplit = Math.floor( 12 / (mQ[i]) );
+
+          // append the missing class to the column class
+          colEven += i + '-' + evenSplit + ' ';
+        }
+      };
+    });
+  });
 
   $.each(obj, function(v,k) {
-    var temp = ''
+    var temp     = ''
     var contents = $(this).html();
     var colClass = 'columns ' + $(this).attr('class');
-    var colNum;
-    if ($(this).attr('num')) {
-      colNum = $(this).attr('num');
-    }
-    else {
-      // divide row evenly into number of column elements
-      // round down, just in case
-      var map   = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve"];
-      var index = Math.floor( 12 / (obj.length) );
-      colNum = map[index - 1];
-    }
+    var colNum   = '';
+    var col      = $(this);
+
+    $.each( mQ, function(i, val) {
+      if (col.attr(i)) {
+        colNum += i + '-' + col.attr(i) + ' ';
+      };
+    });
+
     // check if this is the last element in the row
+    // add previously calculated even class
     if (v !== obj.length - 1) {
       temp = '<td class="wrapper">' 
-              +'<table class="' + colClass + ' ' + colNum +'">'
+              +'<table class="' + colClass + ' ' + colNum + colEven +'">'
               +'<tr><td>'
               + contents +'</td><td class="expander"></td></tr></table></td>';
     } else {
       temp = '<td class="wrapper last">' 
-              +'<table class="' + colClass + ' ' + colNum +'">'
+              +'<table class="' + colClass + ' ' + colNum + colEven +'">'
               +'<tr><td>'
               + contents +'</td><td class="expander"></td></tr></table></td>';
     }   
diff --git a/scss/ink.scss b/scss/ink.scss
index 6d81bd70..abd52a24 100755
--- a/scss/ink.scss
+++ b/scss/ink.scss
@@ -22,6 +22,7 @@
     background: #00558B;
     font-family: Helvetica;
   }
+
   .container{
     background:#fff;
     border:1px solid #eee;