Added spec and functionality for deeply nested elements within the grid.

diff --git a/html/index.html b/html/index.html
index 09f206089eb673d4b83e0a28a117d4831c657bd9..08251f8ff2caefd883855e093f2dd5c307dde3b2 100644 (file)
--- a/html/index.html
+++ b/html/index.html
@@ -89,59 +89,22 @@
       <td class="center" align="center" valign="top">
         <center>
           <container>
-            <row>
-              <columns large="6" small="12">
-                <callout>
-                <img src="http://placehold.it/100x100">
-                      
-                  <p>
-                   I'm a freakin callout yo. 
-                 </p>
-                </callout>
-              </columns>
-              <columns large="6" small="12">
-                <callout>
-                <img src="http://placehold.it/100x100">
-                      
-                  <p>
-                   I'm a freakin callout yo. 
-                 </p>
-                 <button>lakjsdfla</button>
-                </callout>
-              </columns>
-            </row>
             <row>
               <columns large="6">
-                <callout class="success">
-                  <p>
-                   got some success yo 
-                 </p>
-                </callout>
+                <p>
+                   <callout class="success">
+                   nerewo!!!!!!
+                    <callout class="warning">
+                    hellooo!!!
+                    </callout>
+                   </callout>
+                </p>
               </columns>
               <columns large="6">
                 <p>great success</p>
               </columns>
             </row>
-            <row>
-              <columns large="12">
-                <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>
+            gulp 
           </container>
         </center>
       </td>

diff --git a/output/gulp-zurb-inky/index.js b/output/gulp-zurb-inky/index.js
index 04f0b2736047c81cba996332ce7cf2cdbc15a311..580f45917e27823e97667c1fef6ca2bb3b7c0a74 100644 (file)
--- a/output/gulp-zurb-inky/index.js
+++ b/output/gulp-zurb-inky/index.js
@@ -65,6 +65,21 @@ Inky.prototype = {
     }
   },
 
+  // Description:
+  //   Puts in mark up for microsoft buttons
+  //
+  // Arguments:
+  //    $: Cheerio
+  // Returns:
+  //    null: new buttons
+  msButton: function($) {
+    var buttons = $('table.button');
+    $(buttons).each(function() {
+      // put microsoft markup
+    })
+
+  },
+
   // Description:
   //   Checks if an element is an element with a td included. Currently it's a manual check. 
   //   Array was populated from the markup from the component factory.
@@ -104,7 +119,7 @@ Inky.prototype = {
     self.setTagArray();
 
     //find nested components
-    if (self.checkNestedComponents($) !== false) {
+    if (self.checkZfComponents($) !== false) {
       var nestedComponents = self.findNestedComponents($, center);
 
       // process each element to get the table markup
@@ -113,6 +128,8 @@ Inky.prototype = {
       });
       // see the mark up for dev purposes
       // console.log($.html());
+
+      // BUTTONIFY THINGIES
     }
     else {
       console.log("all done");
@@ -128,7 +145,7 @@ Inky.prototype = {
   // Arguments:
   //    $, str (String): Cheerio, and a string containing the markup of a singular element
   // Returns:
-  //    str (String): A string containing the markup of inputted element with contained elements
+  //    null: his function replaces the syntax directly in the cheerio object
   scaffoldElements: function($, str) {
     // take inner html of elements and nest them inside each others
     var output   = '',
@@ -137,7 +154,6 @@ Inky.prototype = {
         inner    = $(str).html(),
         self     = this;
 
-
     // replace tags with proper table syntax
     // elMarkup retains the inner html within the markup
     if (element !== undefined) {
@@ -150,11 +166,14 @@ Inky.prototype = {
 
     // find if there are more nested elements in the inner syntax
     var moreNested = self.findNestedComponents($, inner);
+    moreNested = moreNested.concat(self.findDeeplyNested($, inner));
+
 
     $(moreNested).each(function(idx, el) {
       // call a recursion to replace all nested elements
       self.scaffoldElements($, $(el));
-    });
+    }); 
+
   },
 
   // Description:
@@ -191,6 +210,41 @@ Inky.prototype = {
     return nestedComponents;
   },
 
+  // Description:
+  //   Executes a function to find and return deeply nested custom elements within another element
+  //   Uses the find selector rather than going through children.
+  //
+  // Arguments:
+  //    $, el (String): Cheerio, and a string containing the markup of an element to be checked for nested components
+  // Returns:
+  //    nestedComponents (Array): An array containing the names (i.e. tags) of the nested components
+  findDeeplyNested: function($, el) {
+    var nestedComponents = [],
+        self             = this;
+
+    // if array hasn't been set yet, set it with properties of object
+    if (!self.zfArray) {
+      self.setTagArray();
+    }
+
+    // if the nested component is an element, find the children
+    // NOTE: this is to avoid a cheerio quirk where it will still pass
+    // special alphanumeric characters as a selector
+    if (el.indexOf('<') !== -1) {
+      $(self.zfArray).each(function(idx, zfElement) {
+        // find any nearby elements that are contained within el
+        if ($(el).find(zfElement).length > 0) {
+          nestedComponents.push(zfElement);
+        }
+      });
+    };
+
+
+
+    // return array containing all nested components
+    return nestedComponents;
+  },
+
   // Description:
   //   Goes through array of custom nested components to determine whether or not there are any on the DOM
   //
@@ -198,7 +252,7 @@ Inky.prototype = {
   //    $ : Cheerio
   // Returns:
   //    boolean: True if there are nested components on the DOM, false otherwise.
-  checkNestedComponents: function($) {
+  checkZfComponents: function($) {
     var self = this;
 
     // if array hasn't been set yet, set it with properties of object
@@ -206,15 +260,13 @@ Inky.prototype = {
       self.setTagArray();
     }
 
-    $(self.zfArray).each(function() {
+    $(self.zfArray).each(function(idx, zfElement) {
       // check if custom elements still exist
-      if ($(this).index() !== -1) {
-        return true; 
-      }
-      else {
-        return false;
+      if ($('center').find(zfElement).length > 0) {
+        return true;
       }
     });
+
   },
 
   // Description:

diff --git a/spec/grid.js b/spec/grid.js
index 9236c2f83721624c5d9787d544db5697e4497d29..79d3540d9f6f1a2d6245410db0d41002c7ce3107 100644 (file)
--- a/spec/grid.js
+++ b/spec/grid.js
@@ -56,4 +56,12 @@ describe("the grid", function () {
     expect($.html()).toEqual('<center><table class="row "><tbody><tr><td class="wrapper last"><table class="large-12 columns"><tr>forever alone<td class="expander"></td></tr></table></td></tr></tbody></table></center>');
 
   })
+
+  it("handles deeply nested components", function() {
+    var $ = cheerio.load('<center><row><columns large="12"><p><callout>deep stuff</callout></p></columns></row></center>');
+
+    $ = inky.releaseTheKraken($);
+    expect($.html()).toEqual('<center><table class="row "><tbody><tr><td class="wrapper last"><table class="large-12 columns"><tr><td><p><td class="callout ">deep stuff</td></p></td><td class="expander"></td></tr></table></td></tr></tbody></table></center>');
+
+  })
 });