From 328d5f905a1b2b2f7912b7686fcb0a94390d11f9 Mon Sep 17 00:00:00 2001 From: Derek Bess <2bitsolutions@gmail.com> Date: Wed, 22 Feb 2017 01:18:17 -0500 Subject: [PATCH 1/7] Horizontal Ruler Helper Custom helper that adds a horizontal ruler to your email templates. --- src/helpers/ruler.js | 55 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 src/helpers/ruler.js diff --git a/src/helpers/ruler.js b/src/helpers/ruler.js new file mode 100644 index 0000000..75d660e --- /dev/null +++ b/src/helpers/ruler.js @@ -0,0 +1,55 @@ +/** + * Add a horizontal ruler to your email + * + * @example + * {{{ruler color="#ec6225" width="60px" height="3px" spacing="15px"}}} + * + * Attribute Options + * color: Must be hex color value + * width: Can be percentage (50%) or pixel (50px) unit + * height: Defaults to pixel unit + * spacing: Default to pixel unit + * + */ + +module.exports = function(options) { + + String.prototype.trimUnit = function() { return this.replace(/\D/g, ''); } + var color = options.hash.color; + var spacing = options.hash.spacing.trimUnit(); + var height = options.hash.height.trimUnit(); + var width = options.hash.width; + var widthType = ''; + var trimWidth = width.trimUnit(); + var spacer = ''; + + if (typeof color === 'undefined') color = ''; + if (typeof height === 'undefined') height = ''; + if (typeof width === 'undefined') width = ''; + + if (typeof spacing === 'undefined') { + spacer = ''; + } else { + spacer = ''; + }; + + if(width.match('%$')) { + widthType = width = trimWidth+'%'; + } else if (width.match('px$')) { + widthType = trimWidth+'px'; + width = trimWidth; + } else { + widthType = 'auto'; + width = trimWidth; + } + + var ruler = '\ + '+spacer+'\ + \ + '+spacer+'\ +
\ + \ +
'; + + return ruler; +} From c6e54c8ae26a1c16d0243425a9e2fdb89a19040b Mon Sep 17 00:00:00 2001 From: Derek Bess <2bitsolutions@gmail.com> Date: Wed, 22 Feb 2017 01:35:52 -0500 Subject: [PATCH 2/7] Update ruler.js --- src/helpers/ruler.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helpers/ruler.js b/src/helpers/ruler.js index 75d660e..d5dd910 100644 --- a/src/helpers/ruler.js +++ b/src/helpers/ruler.js @@ -4,7 +4,7 @@ * @example * {{{ruler color="#ec6225" width="60px" height="3px" spacing="15px"}}} * - * Attribute Options + * @Attribute Options * color: Must be hex color value * width: Can be percentage (50%) or pixel (50px) unit * height: Defaults to pixel unit From c9965f044718fe3234edca6a01998adb6bc2de27 Mon Sep 17 00:00:00 2001 From: Derek Bess <2bitsolutions@gmail.com> Date: Wed, 22 Feb 2017 01:46:11 -0500 Subject: [PATCH 3/7] Added Comments & Optimized Variables --- src/helpers/ruler.js | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/helpers/ruler.js b/src/helpers/ruler.js index d5dd910..c83bf6b 100644 --- a/src/helpers/ruler.js +++ b/src/helpers/ruler.js @@ -4,7 +4,7 @@ * @example * {{{ruler color="#ec6225" width="60px" height="3px" spacing="15px"}}} * - * @Attribute Options + * Attribute Options * color: Must be hex color value * width: Can be percentage (50%) or pixel (50px) unit * height: Defaults to pixel unit @@ -14,25 +14,29 @@ module.exports = function(options) { + // Trim Non-Numberic Chracters String.prototype.trimUnit = function() { return this.replace(/\D/g, ''); } - var color = options.hash.color; - var spacing = options.hash.spacing.trimUnit(); - var height = options.hash.height.trimUnit(); - var width = options.hash.width; - var widthType = ''; - var trimWidth = width.trimUnit(); - var spacer = ''; + + // Variables & Options + var color = options.hash.color, + spacing = options.hash.spacing.trimUnit(), + height = options.hash.height.trimUnit(), + width = options.hash.width, + widthType = '', + trimWidth = width.trimUnit(), + spacer = ''; + // Set Undefined Options if (typeof color === 'undefined') color = ''; if (typeof height === 'undefined') height = ''; if (typeof width === 'undefined') width = ''; - if (typeof spacing === 'undefined') { spacer = ''; } else { spacer = ''; }; + // Set Width Variables if(width.match('%$')) { widthType = width = trimWidth+'%'; } else if (width.match('px$')) { @@ -43,6 +47,7 @@ module.exports = function(options) { width = trimWidth; } + // HTML Output var ruler = '\ '+spacer+'\ '; - }; + // Set Undefined Options + if (typeof color === 'undefined') color = ''; + if (typeof height === 'undefined') height = ''; + if (typeof width === 'undefined') width = ''; + if (typeof spacing === 'undefined') { + spacer = ''; + } else { + spacer = ''; + }; - // Set Width Variables - if(width.match('%$')) { - widthType = width = trimWidth+'%'; - } else if (width.match('px$')) { - widthType = trimWidth+'px'; - width = trimWidth; - } else { - widthType = 'auto'; - width = trimWidth; - } + // Set Width Variables + if(width.match('%$')) { + widthType = width = trimWidth+'%'; + } else if (width.match('px$')) { + widthType = trimWidth+'px'; + width = trimWidth; + } else { + widthType = 'auto'; + width = trimWidth; + } - // HTML Output - var ruler = '\ + // HTML Output + var ruler = '\
\ From e7c4a6c55ee1e4f05fb03220a3ea40496487e1e7 Mon Sep 17 00:00:00 2001 From: Derek Bess <2bitsolutions@gmail.com> Date: Wed, 22 Feb 2017 11:26:00 -0500 Subject: [PATCH 4/7] Updated spaces from tab 4 to tab 2 --- src/helpers/ruler.js | 33 +++++++++++++++++++-------------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/src/helpers/ruler.js b/src/helpers/ruler.js index c83bf6b..fe335a4 100644 --- a/src/helpers/ruler.js +++ b/src/helpers/ruler.js @@ -18,13 +18,14 @@ module.exports = function(options) { String.prototype.trimUnit = function() { return this.replace(/\D/g, ''); } // Variables & Options - var color = options.hash.color, - spacing = options.hash.spacing.trimUnit(), - height = options.hash.height.trimUnit(), - width = options.hash.width, - widthType = '', - trimWidth = width.trimUnit(), - spacer = ''; + var + color = options.hash.color, + spacing = options.hash.spacing.trimUnit(), + height = options.hash.height.trimUnit(), + width = options.hash.width, + widthType = '', + trimWidth = width.trimUnit(), + spacer = ''; // Set Undefined Options if (typeof color === 'undefined') color = ''; @@ -48,13 +49,17 @@ module.exports = function(options) { } // HTML Output - var ruler = '\ - '+spacer+'\ - \ - '+spacer+'\ -
\ - \ -
'; + var ruler = '\ + \ + '+spacer+'\ + \ + \ + \ + '+spacer+'\ +
\ + \ +
\ + '; return ruler; } From 8d2f686022d08bc0f2eb8451a6c7552d1135d6e3 Mon Sep 17 00:00:00 2001 From: Derek Bess <2bitsolutions@gmail.com> Date: Wed, 22 Feb 2017 11:33:55 -0500 Subject: [PATCH 5/7] Changed code spacing Changed spacing from tab to spaces and size from 4 to 2. --- src/helpers/ruler.js | 78 ++++++++++++++++++++++---------------------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/src/helpers/ruler.js b/src/helpers/ruler.js index fe335a4..8822a36 100644 --- a/src/helpers/ruler.js +++ b/src/helpers/ruler.js @@ -14,52 +14,52 @@ module.exports = function(options) { - // Trim Non-Numberic Chracters - String.prototype.trimUnit = function() { return this.replace(/\D/g, ''); } - - // Variables & Options - var + // Trim Non-Numberic Chracters + String.prototype.trimUnit = function() { return this.replace(/\D/g, ''); } + + // Variables & Options + var color = options.hash.color, - spacing = options.hash.spacing.trimUnit(), - height = options.hash.height.trimUnit(), - width = options.hash.width, - widthType = '', - trimWidth = width.trimUnit(), - spacer = ''; + spacing = options.hash.spacing.trimUnit(), + height = options.hash.height.trimUnit(), + width = options.hash.width, + widthType = '', + trimWidth = width.trimUnit(), + spacer = ''; - // Set Undefined Options - if (typeof color === 'undefined') color = ''; - if (typeof height === 'undefined') height = ''; - if (typeof width === 'undefined') width = ''; - if (typeof spacing === 'undefined') { - spacer = ''; - } else { - spacer = '
\ - '+spacer+'\ - \ + '+spacer+'\ + \ \ + \ + \ \ - '+spacer+'\ -
\ - \ -
\ + '+spacer+'\ + \ '; - return ruler; + return ruler; } From c1f70c57c8a4b2de4b7c0727e3bbbd53294a3e59 Mon Sep 17 00:00:00 2001 From: Derek Bess <2bitsolutions@gmail.com> Date: Wed, 22 Feb 2017 22:53:23 -0500 Subject: [PATCH 6/7] Added option to align the ruler I added the option to align the ruler left, right and center. I also updated the spacer variable and ruler output code block. I'm looking for a way to eliminate the use of a spacer.gif image in order for the email to render pixel perfect in outlook. Any suggestions on how to achieve perfect pixel height with empty cells in outlook? --- src/helpers/ruler.js | 53 +++++++++++++++++++++++++++++++------------- 1 file changed, 38 insertions(+), 15 deletions(-) diff --git a/src/helpers/ruler.js b/src/helpers/ruler.js index 8822a36..e345d0d 100644 --- a/src/helpers/ruler.js +++ b/src/helpers/ruler.js @@ -2,9 +2,10 @@ * Add a horizontal ruler to your email * * @example - * {{{ruler color="#ec6225" width="60px" height="3px" spacing="15px"}}} + * {{{ruler align="center" color="#ec6225" width="60px" height="3px" spacing="15px"}}} * * Attribute Options + * align: Can be aligned left, right or center. If Undefined alignment defaults to center. * color: Must be hex color value * width: Can be percentage (50%) or pixel (50px) unit * height: Defaults to pixel unit @@ -15,10 +16,13 @@ module.exports = function(options) { // Trim Non-Numberic Chracters - String.prototype.trimUnit = function() { return this.replace(/\D/g, ''); } - + String.prototype.trimUnit = function() { + return this.replace(/\D/g, ''); + }; + // Variables & Options var + align = options.hash.align, color = options.hash.color, spacing = options.hash.spacing.trimUnit(), height = options.hash.height.trimUnit(), @@ -28,20 +32,33 @@ module.exports = function(options) { spacer = ''; // Set Undefined Options + if (typeof align === 'undefined') align = 'center'; if (typeof color === 'undefined') color = ''; if (typeof height === 'undefined') height = ''; if (typeof width === 'undefined') width = ''; + if (typeof spacing === 'undefined') { spacer = ''; } else { - spacer = ''; + spacer = '\ + \ + \ + \ + \ + \ + \ +
\ + \ +
\ + \ + '; }; // Set Width Variables - if(width.match('%$')) { - widthType = width = trimWidth+'%'; + if (width.match('%$')) { + widthType = width = trimWidth + '%'; } else if (width.match('px$')) { - widthType = trimWidth+'px'; + widthType = trimWidth + 'px'; width = trimWidth; } else { widthType = 'auto'; @@ -50,15 +67,21 @@ module.exports = function(options) { // HTML Output var ruler = '\ - \ - '+spacer+'\ - \ - ' + + spacer + + '
\ - \ + ' + + spacer + + '\ + \ - \ - '+spacer+'\ -
\ + \ + \ + \ + \ +
\ + \ +
\
\ +
\ '; return ruler; From fd1dc0f4a350b68e137c724ef4ec6f9a7093da2e Mon Sep 17 00:00:00 2001 From: Derek Bess <2bitsolutions@gmail.com> Date: Thu, 23 Feb 2017 11:43:39 -0500 Subject: [PATCH 7/7] Eliminated spacer.gif I managed to find a way to eliminate the need for the spacer.gif image that works in Outlook. --- src/helpers/ruler.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/helpers/ruler.js b/src/helpers/ruler.js index e345d0d..84c022e 100644 --- a/src/helpers/ruler.js +++ b/src/helpers/ruler.js @@ -2,7 +2,7 @@ * Add a horizontal ruler to your email * * @example - * {{{ruler align="center" color="#ec6225" width="60px" height="3px" spacing="15px"}}} + * {{ruler align="center" color="#ec6225" width="60px" height="3px" spacing="15px"}} * * Attribute Options * align: Can be aligned left, right or center. If Undefined alignment defaults to center. @@ -45,9 +45,7 @@ module.exports = function(options) { \ \ \ - \ + \ \
\ - \ -  
\ \ @@ -71,11 +69,9 @@ module.exports = function(options) { + spacer + '\ \ - \ +
\ \ - \ + \ \
\ - \ -  
\ \