Changes to gulpfile to make exporting inky index.js easier. Added inline lists and...

diff --git a/gulpfile.js b/gulpfile.js
index 28c65319e0880af0ef3672672113ade6cdec463c..38f8877b9574442ea039af81cbafafa1dfbddc29 100644 (file)
--- 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 2b9e5d4f8a65103a38c4f2cbe1f76f2ed9da12ed..09f206089eb673d4b83e0a28a117d4831c657bd9 100644 (file)
--- 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 77b27b8a51f8693939be95b9d1e1c4eea8b6d0fb..4a3e5edfef0913f30cc519fa37c0a94a7a62e43a 100644 (file)
--- 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;
   }
 };