From 4862602bea4e4b47a707609f007f5ac5a7abd473 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Z=CC=8Celjko=20Galetic=CC=81?= <zeljkogaletic@gmail.com>
Date: Tue, 5 Apr 2016 19:49:57 +0200
Subject: [PATCH 1/8] Created component library to allow components extending
 and creation of new components

---
 lib/componentFactory.js | 130 ++----------------------------------
 lib/componentLibrary.js | 141 ++++++++++++++++++++++++++++++++++++++++
 lib/inky.js             |   2 +
 3 files changed, 148 insertions(+), 125 deletions(-)
 create mode 100644 lib/componentLibrary.js

diff --git a/lib/componentFactory.js b/lib/componentFactory.js
index 0361e4d..5057150 100644
--- a/lib/componentFactory.js
+++ b/lib/componentFactory.js
@@ -7,130 +7,10 @@ var $ = require('cheerio');
  * @returns {string} HTML converted from a custom element to table syntax.
  */
 module.exports = function(element) {
-  var inner = element.html();
-
-  switch (element[0].name) {
-    // <column>
-    case this.components.columns:
-      return this.makeColumn(element, 'columns');
-
-    // <row>
-    case this.components.row:
-      var classes = ['row'];
-      if (element.attr('class')) {
-        classes = classes.concat(element.attr('class').split(' '));
-      }
-
-      return format('<table class="%s"><tbody><tr>%s</tr></tbody></table>', classes.join(' '), inner);
-
-    // <button>
-    case this.components.button:
-      var expander = '';
-
-      // If we have the href attribute we can create an anchor for the inner of the button;
-      if (element.attr('href')) {
-        inner = format('<a href="%s">%s</a>', element.attr('href'), inner);
-      }
-
-      // If the button is expanded, it needs a <center> tag around the content
-      if (element.hasClass('expand')) {
-        inner = format('<center>%s</center>', inner);
-        expander = '\n<td class="expander"></td>';
-      }
-
-      // The .button class is always there, along with any others on the <button> element
-      var classes = ['button'];
-      if (element.attr('class')) {
-        classes = classes.concat(element.attr('class').split(' '));
-      }
-
-      return format('<table class="%s"><tr><td><table><tr><td>%s</td></tr></table></td>%s</tr></table>', classes.join(' '), inner, expander);
-
-    // <container>
-    case this.components.container:
-      var classes = ['container'];
-      if (element.attr('class')) {
-        classes = classes.concat(element.attr('class').split(' '));
-      }
-
-      return format('<table class="%s"><tbody><tr><td>%s</td></tr></tbody></table>', classes.join(' '), inner);
-
-    // <inky>
-    case this.components.inky:
-      return '<tr><td><img src="https://raw.githubusercontent.com/arvida/emoji-cheat-sheet.com/master/public/graphics/emojis/octopus.png" /></tr></td>';
-
-    // <block-grid>
-    case this.components.blockGrid:
-      var classes = ['block-grid', 'up-'+element.attr('up')];
-      if (element.attr('class')) {
-        classes = classes.concat(element.attr('class').split(' '));
-      }
-      return format('<table class="%s"><tr>%s</tr></table>', classes.join(' '), inner);
-
-    // <menu>
-    case this.components.menu:
-      var classes = ['menu'];
-      if (element.attr('class')) {
-        classes = classes.concat(element.attr('class').split(' '));
-      }
-      var centerAttr = element.attr('align') ? 'align="center"' : '';
-      return format('<table class="%s"%s><tr><td><table><tr>%s</tr></table></td></tr></table>', classes.join(' '), centerAttr, inner);
-
-    // <item>
-    case this.components.menuItem:
-      var classes = ['menu-item'];
-      if (element.attr('class')) {
-        classes = classes.concat(element.attr('class').split(' '));
-      }
-      return format('<th class="%s"><a href="%s">%s</a></th>', classes.join(' '), element.attr('href'), inner);
-
-    // <center>
-    case this.components.center:
-      if (element.children().length > 0) {
-        element.children().each(function() {
-          $(this).attr('align', 'center');
-          $(this).addClass('float-center');
-        });
-        element.find('item, .menu-item').addClass('float-center');
-      }
-
-      element.attr('data-parsed', '');
-
-      return format('%s', $.html(element));
-
-    // <callout>
-    case this.components.callout:
-      var classes = ['callout-inner'];
-      if (element.attr('class')) {
-        classes = classes.concat(element.attr('class').split(' '));
-      }
-
-      return format('<table class="callout"><tr><th class="%s">%s</th><th class="expander"></th></tr></table>', classes.join(' '), inner);
-
-    // <spacer>
-    case this.components.spacer:
-      var classes = ['spacer'];
-      var size = 16;
-      if (element.attr('class')) {
-        classes = classes.concat(element.attr('class').split(' '));
-      }
-      if (element.attr('size')) {
-        size = (element.attr('size'));
-      }
-
-      return format('<table class="%s"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&#xA0;</td></tr></tbody></table>', classes.join(' '), inner);
-
-    // <wrapper>
-    case this.components.wrapper:
-      var classes = ['wrapper'];
-      if (element.attr('class')) {
-        classes = classes.concat(element.attr('class').split(' '));
-      }
-
-      return format('<table class="%s" align="center"><tr><td class="wrapper-inner">%s</td></tr></table>', classes.join(' '), inner);
-
-    default:
-      // If it's not a custom component, return it as-is
-      return format('<tr><td>%s</td></tr>', $.html(element));
+  if (this.components[element[0].name] && this.componentLibrary[element[0].name]) {
+    return this.componentLibrary[element[0].name].call(this, element);
+  } else {
+    // If it's not a custom component, return it as-is
+    return format('<tr><td>%s</td></tr>', $.html(element));
   }
 }
diff --git a/lib/componentLibrary.js b/lib/componentLibrary.js
new file mode 100644
index 0000000..8a29919
--- /dev/null
+++ b/lib/componentLibrary.js
@@ -0,0 +1,141 @@
+var format = require('util').format;
+var $ = require('cheerio');
+
+/**
+ * Returns output for desired custom element
+ * @param {object} element - Element as a Cheerio object.
+ * @returns {string} HTML converted from a custom element to table syntax.
+ */
+module.exports = {
+  // <column>
+  columns: function (element) {
+    return this.makeColumn(element, 'columns');
+  },
+
+  // <row>
+  row: function (element) {
+    var classes = ['row'];
+    if (element.attr('class')) {
+      classes = classes.concat(element.attr('class').split(' '));
+    }
+
+    return format('<table class="%s"><tbody><tr>%s</tr></tbody></table>', classes.join(' '), element.html());
+  },
+
+  // <button>
+  button: function (element) {
+    var expander = '';
+    var inner = element.html();
+
+    // If we have the href attribute we can create an anchor for the inner of the button;
+    if (element.attr('href')) {
+      inner = format('<a href="%s">%s</a>', element.attr('href'), inner);
+    }
+
+    // If the button is expanded, it needs a <center> tag around the content
+    if (element.hasClass('expand')) {
+      inner = format('<center>%s</center>', inner);
+      expander = '\n<td class="expander"></td>';
+    }
+
+    // The .button class is always there, along with any others on the <button> element
+    var classes = ['button'];
+    if (element.attr('class')) {
+      classes = classes.concat(element.attr('class').split(' '));
+    }
+
+    return format('<table class="%s"><tr><td><table><tr><td>%s</td></tr></table></td>%s</tr></table>', classes.join(' '), inner, expander);
+  },
+
+  // <container>
+  container: function (element) {
+    var classes = ['container'];
+    if (element.attr('class')) {
+      classes = classes.concat(element.attr('class').split(' '));
+    }
+
+    return format('<table class="%s"><tbody><tr><td>%s</td></tr></tbody></table>', classes.join(' '), element.html());
+  },
+
+  // <inky>
+  inky: function (element) {
+    return '<tr><td><img src="https://raw.githubusercontent.com/arvida/emoji-cheat-sheet.com/master/public/graphics/emojis/octopus.png" /></tr></td>';
+  },
+
+  // <block-grid>
+  blockGrid: function (element) {
+    var classes = ['block-grid', 'up-'+element.attr('up')];
+    if (element.attr('class')) {
+      classes = classes.concat(element.attr('class').split(' '));
+    }
+    return format('<table class="%s"><tr>%s</tr></table>', classes.join(' '), element.html());
+  },
+
+  // <menu>
+  menu: function (element) {
+    var classes = ['menu'];
+    if (element.attr('class')) {
+      classes = classes.concat(element.attr('class').split(' '));
+    }
+    var centerAttr = element.attr('align') ? 'align="center"' : '';
+    return format('<table class="%s"%s><tr><td><table><tr>%s</tr></table></td></tr></table>', classes.join(' '), centerAttr, element.html());
+  },
+
+  // <item>
+  menuItem: function (element) {
+    var classes = ['menu-item'];
+    if (element.attr('class')) {
+      classes = classes.concat(element.attr('class').split(' '));
+    }
+    return format('<th class="%s"><a href="%s">%s</a></th>', classes.join(' '), element.attr('href'), element.html());
+  },
+
+  // <center>
+  center: function (element) {
+    if (element.children().length > 0) {
+      element.children().each(function() {
+        $(this).attr('align', 'center');
+        $(this).addClass('float-center');
+      });
+      element.find('item, .menu-item').addClass('float-center');
+    }
+
+    element.attr('data-parsed', '');
+
+    return format('%s', $.html(element));
+  },
+
+  // <callout>
+  callout: function (element) {
+    var classes = ['callout-inner'];
+    if (element.attr('class')) {
+      classes = classes.concat(element.attr('class').split(' '));
+    }
+
+    return format('<table class="callout"><tr><th class="%s">%s</th><th class="expander"></th></tr></table>', classes.join(' '), element.html());
+  },
+
+  // <spacer>
+  spacer: function (element) {
+    var classes = ['spacer'];
+    var size = 16;
+    if (element.attr('class')) {
+      classes = classes.concat(element.attr('class').split(' '));
+    }
+    if (element.attr('size')) {
+      size = (element.attr('size'));
+    }
+
+    return format('<table class="%s"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&#xA0;</td></tr></tbody></table>', classes.join(' '), element.html());
+  },
+
+  // <wrapper>
+  wrapper: function (element) {
+    var classes = ['wrapper'];
+    if (element.attr('class')) {
+      classes = classes.concat(element.attr('class').split(' '));
+    }
+
+    return format('<table class="%s" align="center"><tr><td class="wrapper-inner">%s</td></tr></table>', classes.join(' '), element.html());
+  }
+};
\ No newline at end of file
diff --git a/lib/inky.js b/lib/inky.js
index 510177a..be3b2c9 100644
--- a/lib/inky.js
+++ b/lib/inky.js
@@ -61,4 +61,6 @@ Inky.prototype.releaseTheKraken = function($) {
 
 Inky.prototype.componentFactory = require('./componentFactory');
 
+Inky.prototype.componentLibrary = require('./componentLibrary');
+
 Inky.prototype.makeColumn = require('./makeColumn');

From 7e206a1b1e15e7d19832b593fbeb0116a1f7316d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Z=CC=8Celjko=20Galetic=CC=81?= <zeljkogaletic@gmail.com>
Date: Tue, 5 Apr 2016 20:07:35 +0200
Subject: [PATCH 2/8] Readme update

---
 README.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/README.md b/README.md
index 4af247e..a2436ba 100644
--- a/README.md
+++ b/README.md
@@ -111,6 +111,30 @@ Here are the names of the defaults:
 }
 ```
 
+## Extending and Creating Elements
+
+You can extend current elements or create new ones.
+
+```js
+var Inky = require('inky').Inky;
+var format = require('util').format;
+
+Inky.prototype.componentLibrary.box = function (element) {
+  var classes = ['container'];
+  if (element.attr('class')) {
+    classes = classes.concat(element.attr('class').split(' '));
+  }
+
+  return format('<table class="box-wrapper"><tbody><tr><td><table class="%s"><tbody><tr><td>%s</td></tr></tbody></table></td></tr></tbody></table>', classes.join(' '), element.html());
+};
+
+var inky = new Inky({
+  components: {
+    box: 'box'
+  }
+});
+```
+
 ## Programmatic Use
 
 The Inky parser can be accessed directly for programmatic use. It takes in a [Cheerio](https://github.com/cheeriojs/cheerio) object of HTML, and gives you back a converted Cheerio object.

From 8e46377cc305b1ea2780c3abe9845320762fe3ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Z=CC=8Celjko=20Galetic=CC=81?= <zeljkogaletic@gmail.com>
Date: Tue, 5 Apr 2016 22:01:05 +0200
Subject: [PATCH 3/8] Tests class typo

---
 test/components.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/components.js b/test/components.js
index 1e3af90..8b7614b 100644
--- a/test/components.js
+++ b/test/components.js
@@ -1,7 +1,7 @@
 var compare = require('./lib/compare');
 
 describe('Center', () => {
-  it('applies a text-center class and center alignment attribute to the first child', () => {
+  it('applies a float-center class and center alignment attribute to the first child', () => {
     var input = `
       <center>
         <div></div>

From 9f630049e6f6d0323e987139900715bc874469fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Z=CC=8Celjko=20Galetic=CC=81?= <zeljkogaletic@gmail.com>
Date: Tue, 5 Apr 2016 22:03:57 +0200
Subject: [PATCH 4/8] Fixed checking for component method in library

---
 lib/componentFactory.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/lib/componentFactory.js b/lib/componentFactory.js
index 5057150..8b9bc4a 100644
--- a/lib/componentFactory.js
+++ b/lib/componentFactory.js
@@ -1,14 +1,21 @@
 var format = require('util').format;
 var $ = require('cheerio');
 
+var getKeyByValue = function(object, value) {
+  return Object.keys(object).find(key => object[key] === value);
+};
+
 /**
  * Returns output for desired custom element
  * @param {object} element - Element as a Cheerio object.
  * @returns {string} HTML converted from a custom element to table syntax.
  */
 module.exports = function(element) {
-  if (this.components[element[0].name] && this.componentLibrary[element[0].name]) {
-    return this.componentLibrary[element[0].name].call(this, element);
+  var tag = element[0].name;
+  var componentKey = getKeyByValue(this.components, tag);
+
+  if (componentKey && this.componentTags.indexOf(tag) > -1 && this.componentLibrary[componentKey]) {
+    return this.componentLibrary[componentKey].call(this, element);
   } else {
     // If it's not a custom component, return it as-is
     return format('<tr><td>%s</td></tr>', $.html(element));

From c9b25255a6c44b2b9a3995a5573aa56b20a10207 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Z=CC=8Celjko=20Galetic=CC=81?= <zeljkogaletic@gmail.com>
Date: Tue, 5 Apr 2016 22:30:04 +0200
Subject: [PATCH 5/8] Tests were failing on some old node version in Travic CI,
 lets try this

---
 lib/componentFactory.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/lib/componentFactory.js b/lib/componentFactory.js
index 8b9bc4a..aab42f7 100644
--- a/lib/componentFactory.js
+++ b/lib/componentFactory.js
@@ -2,7 +2,9 @@ var format = require('util').format;
 var $ = require('cheerio');
 
 var getKeyByValue = function(object, value) {
-  return Object.keys(object).find(key => object[key] === value);
+  return Object.keys(object).find(function(key) {
+    return object[key] === value;
+  });
 };
 
 /**
@@ -14,7 +16,7 @@ module.exports = function(element) {
   var tag = element[0].name;
   var componentKey = getKeyByValue(this.components, tag);
 
-  if (componentKey && this.componentTags.indexOf(tag) > -1 && this.componentLibrary[componentKey]) {
+  if (componentKey && this.componentTags.indexOf(tag) > -1 && typeof this.componentLibrary[componentKey] === 'function') {
     return this.componentLibrary[componentKey].call(this, element);
   } else {
     // If it's not a custom component, return it as-is

From 622314058456422941779e5a4122b83a9ad881e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Z=CC=8Celjko=20Galetic=CC=81?= <zeljkogaletic@gmail.com>
Date: Tue, 5 Apr 2016 22:55:15 +0200
Subject: [PATCH 6/8] Fix get key by value function for old node version

---
 lib/componentFactory.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/lib/componentFactory.js b/lib/componentFactory.js
index aab42f7..2804f80 100644
--- a/lib/componentFactory.js
+++ b/lib/componentFactory.js
@@ -1,10 +1,13 @@
 var format = require('util').format;
 var $ = require('cheerio');
 
-var getKeyByValue = function(object, value) {
-  return Object.keys(object).find(function(key) {
-    return object[key] === value;
-  });
+var getKeyByValue = function(obj, val) {
+  for (var key in obj) {
+    if (obj[key] === val) {
+      return key;
+    }
+  }
+  return false;
 };
 
 /**

From 239f9c39ba8fc48a4116398b9800d8ffe20dfe21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Z=CC=8Celjko=20Galetic=CC=81?= <zeljkogaletic@gmail.com>
Date: Thu, 21 Apr 2016 19:48:42 +0200
Subject: [PATCH 7/8] Adds expanded class

---
 lib/componentLibrary.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/componentLibrary.js b/lib/componentLibrary.js
index 8a29919..6add5a4 100644
--- a/lib/componentLibrary.js
+++ b/lib/componentLibrary.js
@@ -33,7 +33,7 @@ module.exports = {
     }
 
     // If the button is expanded, it needs a <center> tag around the content
-    if (element.hasClass('expand')) {
+    if (element.hasClass('expand') || element.hasClass('expanded')) {
       inner = format('<center>%s</center>', inner);
       expander = '\n<td class="expander"></td>';
     }

From 74acd743ffc6d26c0a42475ccc708deed0fe32dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Z=CC=8Celjko=20Galetic=CC=81?= <zeljkogaletic@gmail.com>
Date: Fri, 3 Mar 2017 16:45:58 +0100
Subject: [PATCH 8/8] Missing <tbody> elements

---
 lib/componentLibrary.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/componentLibrary.js b/lib/componentLibrary.js
index 6add5a4..2caa057 100644
--- a/lib/componentLibrary.js
+++ b/lib/componentLibrary.js
@@ -44,7 +44,7 @@ module.exports = {
       classes = classes.concat(element.attr('class').split(' '));
     }
 
-    return format('<table class="%s"><tr><td><table><tr><td>%s</td></tr></table></td>%s</tr></table>', classes.join(' '), inner, expander);
+    return format('<table class="%s"><tbody><tr><td><table><tbody><tr><td>%s</td></tr></tbody></table></td>%s</tr></tbody></table>', classes.join(' '), inner, expander);
   },
 
   // <container>
@@ -68,7 +68,7 @@ module.exports = {
     if (element.attr('class')) {
       classes = classes.concat(element.attr('class').split(' '));
     }
-    return format('<table class="%s"><tr>%s</tr></table>', classes.join(' '), element.html());
+    return format('<table class="%s"><tbody><tr>%s</tr></tbody></table>', classes.join(' '), element.html());
   },
 
   // <menu>
@@ -78,7 +78,7 @@ module.exports = {
       classes = classes.concat(element.attr('class').split(' '));
     }
     var centerAttr = element.attr('align') ? 'align="center"' : '';
-    return format('<table class="%s"%s><tr><td><table><tr>%s</tr></table></td></tr></table>', classes.join(' '), centerAttr, element.html());
+    return format('<table class="%s"%s><tbody><tr><td><table><tbody><tr>%s</tr></tbody></table></td></tr></tbody></table>', classes.join(' '), centerAttr, element.html());
   },
 
   // <item>
@@ -112,7 +112,7 @@ module.exports = {
       classes = classes.concat(element.attr('class').split(' '));
     }
 
-    return format('<table class="callout"><tr><th class="%s">%s</th><th class="expander"></th></tr></table>', classes.join(' '), element.html());
+    return format('<table class="callout"><tbody><tr><th class="%s">%s</th><th class="expander"></th></tr></tbody></table>', classes.join(' '), element.html());
   },
 
   // <spacer>
@@ -136,6 +136,6 @@ module.exports = {
       classes = classes.concat(element.attr('class').split(' '));
     }
 
-    return format('<table class="%s" align="center"><tr><td class="wrapper-inner">%s</td></tr></table>', classes.join(' '), element.html());
+    return format('<table class="%s" align="center"><tbody><tr><td class="wrapper-inner">%s</td></tr></tbody></table>', classes.join(' '), element.html());
   }
 };
\ No newline at end of file