From: Jeanie Chung <jeanie.chung@gmail.com>
Date: Wed, 18 Feb 2015 02:37:05 +0000 (-0800)
Subject: Changes to gulpfile to make exporting inky index.js easier. Added inline lists and... 
X-Git-Tag: v2.0.0-rc.1~135
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=9eda5ac991d016fa42bbccc2ad2bf71e52c0990b;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

Changes to gulpfile to make exporting inky index.js easier. Added inline lists and some corrections to how columns nest items in td elements. :cool: :cool: :cool:
---

diff --git a/gulpfile.js b/gulpfile.js
index 28c65319..38f8877b 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -104,8 +104,8 @@ gulp.task('copy-html', function() {
 // - - - - - - - - - - - - - - -
 
 gulp.task('inky-prime', function() {
-  return gulp.src('node_modules/gulp-zurb-foundation-email/index.js')
-    .pipe(gulp.dest('./output'));
+  return gulp.src('node_modules/gulp-zurb-foundation-email/node_modules/gulp-zurb-inky/index.js')
+    .pipe(gulp.dest('./output/gulp-zurb-inky'));
 })
 
 gulp.task('js', function() {
diff --git a/html/index.html b/html/index.html
index 2b9e5d4f..09f20608 100644
--- a/html/index.html
+++ b/html/index.html
@@ -90,7 +90,7 @@
         <center>
           <container>
             <row>
-              <columns large="6">
+              <columns large="6" small="12">
                 <callout>
                 <img src="http://placehold.it/100x100">
                       
@@ -99,7 +99,7 @@
                  </p>
                 </callout>
               </columns>
-              <columns large="6">
+              <columns large="6" small="12">
                 <callout>
                 <img src="http://placehold.it/100x100">
                       
@@ -119,20 +119,27 @@
                 </callout>
               </columns>
               <columns large="6">
-                <callout class="success">
-                  <p>
-                   got some success yo 
-                 </p>
-                </callout>
+                <p>great success</p>
               </columns>
             </row>
             <row>
               <columns large="12">
-                <callout class="warning">
-                  <p>
-                        Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch oasdfasdfaout there, cowboy. Watch out there, cowboy. Watch out there, cowboy. 
-                 </p>
-                </callout>
+                <button>Biggest button</button>
+              </columns>
+            </row>
+            <row>
+              <columns large='2'>
+                <inline-list-v>
+                  <a href="#">Link 4</a>
+                  <a href="#">Link 4</a>
+                  <a href="#">Link 4</a>
+                  <a href="#">Link 4</a>
+                  <a href="#">Link 4</a>
+                  <a href="#">Link 4</a>
+                </inline-list-v>
+              </columns>
+              <columns large='10'>
+                <h1> Some side content </h1>
               </columns>
             </row>
           </container>
diff --git a/output/gulp-zurb-inky/index.js b/output/gulp-zurb-inky/index.js
index 77b27b8a..4a3e5edf 100644
--- a/output/gulp-zurb-inky/index.js
+++ b/output/gulp-zurb-inky/index.js
@@ -8,7 +8,9 @@ var Inky = function Inky () {
     callout: 'callout',
     columns: 'columns',
     subcolumns: 'subcolumns',
-    container: 'container'
+    container: 'container',
+    inlineListH: 'inline-list-h',
+    inlineListV: 'inline-list-v'
   }
 };
 
@@ -39,6 +41,37 @@ Inky.prototype = {
     self.zfArray = arr;
   },
 
+  isZfElement: function(elType) {
+    var self = this;
+    // create an array of our custom tags, if we haven't done so already
+    if(!self.zfArray) {
+      self.setTagArray();
+    }
+
+    // if the element is a custom element
+    if (self.zfArray.indexOf(elType) !== -1) {
+      // return true
+      return true;
+    }
+    else {
+      return false;
+    }
+  },
+
+  isTdElement: function(elType) {
+    var tdEls = ['subcolumns', 'callout']
+
+    // if the element is an element that comes with td
+    if (tdEls.indexOf(elType) !== -1) {
+      // return true
+      return true;
+    }
+    else {
+      return false;
+    }
+
+  },
+
   // Description:
   //   Takes in HTML loaded via Cheerio as an argument, checks if there are any custom components.
   //   If there are, it replaces the nested components, traverses the DOM and replaces them with
@@ -226,6 +259,16 @@ Inky.prototype = {
         output = '<table class="row ' + compClass + '"><tbody><tr>'+ inner + '</tr></tbody></table>';
         break;
 
+      case self.zfTags.inlineListH:
+        inner  = self.makeInlineList($, component, 'horizontal');
+        output = '<table class="inline-list ' + compClass + '"><tbody><tr>' + inner + '</tr></tbody></table>';
+        break;
+
+      case self.zfTags.inlineListV:
+        inner  = self.makeInlineList($, component, 'vertical');
+        output = '<table class="inline-list ' + compClass + '"><tbody>' + inner + '</tbody></table>';
+        break;
+
       default: 
         // unless it's a special element, just grab the inside
         // another cheerio quirk
@@ -236,6 +279,26 @@ Inky.prototype = {
     return output;
   },
 
+  makeInlineList: function($, list, orientation) {
+    var output   = '';
+    var children = list.children();
+
+    $(children).each(function(idx, el) {
+      var innerChild = $.html(el);
+
+      if (orientation === 'horizontal') {
+        output += '<td>' + innerChild + '</td>';
+      }
+      else if (orientation === 'vertical') {
+        output += '<tr><td class="vertical">' + innerChild + '</td></tr>';
+      }
+      else {
+        return;
+      }
+    });
+    return output;
+  },
+
   // Description:
   //    Returns output for column elements. TODO: this could be refactored to handle both cols and subcols
   //
@@ -248,7 +311,8 @@ Inky.prototype = {
         wrapperHTML = '',
         colSize     = '',
         colClass    = '',
-        inner       = $(col).html();
+        inner       = $(col).html(),
+        self        = this;
 
 
     if ($(col).attr('class')) {
@@ -267,15 +331,19 @@ Inky.prototype = {
     if ($(col).attr('small')) {
       colSize += 'small' + '-' + $(col).attr('small') + ' ';
     }
+
     if ($(col).attr('large')) {
       colSize += 'large' + '-' + $(col).attr('large') + ' ';
     }
 
     output += '<table class="' + colSize + 'columns"><tr>';
 
-    // subcolumns do not need an extra td
+
+    // if the column has children, put them in a td
+    // if the child already has a td with it (i.e subcolumns/callouts), just place them inside
     // otherwise, place stuff inside columns in a td
-    if ($(col).children()[0] && $(col).children()[0].name !== 'subcolumns') {
+
+    if ($(col).children()[0] && !self.isTdElement($(col).children()[0].name)) {
       output += '<td>' + inner + '</td>';
     }
     else {
@@ -283,7 +351,6 @@ Inky.prototype = {
     }
 
     output += '<td class="expander"></td></tr></table>';
-
     return output;
   }
 };