<tr>
<td class="center" align="center" valign="top">
<center>
- <row class='header'>
- <column large='6' small='6'>
- <img src="http://placehold.it/200x50" />
- </column>
- <column large='6' small='6'>
- <span class="template-label">SIDEBAR HERO</span>
- </column>
- </row>
<container>
<row>
- <column large='12'>
- <div>
- <h1>Welcome, Daneel Olivan</h1>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
- <img width="580" height="300" src="http://placehold.it/580x300">
- </div>
- <panel>
- <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! ยป</a></p>
- </panel>
- </column>
- </row>
- <row>
- <column large='6'>
- <!-- Make it so that you don't have to put divs in here. So basically it will nest everything until the next column element -->
- <div>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
-
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
- </div>
- <button>
- <a href="#">Click me!</a>
- </button>
- </column>
- <column large='6'>
- <panel>
- <h6>Header Thing</h6>
- <p>Sub-head or something</p>
- <!-- It appears from the other example that these should be in their own separate tables. Confirm with Tim/Brandon. -->
- <a href="#">Just a Plain Link »</a>
- <hr>
- <a href="#">Just a Plain Link »</a>
- <hr>
- <a href="#">Just a Plain Link »</a>
- <hr>
- <a href="#">Just a Plain Link »</a>
- <hr>
- <a href="#">Just a Plain Link »</a>
- </panel>
- <br>
- <panel>
- <h6 style="margin-bottom:5px;">Connect With Us:</h6>
-
- <button size='tiny' class='facebook'>
- <a href="#">Facebook</a>
- </button>
- <hr>
- <button size='tiny' class='twitter'>
- <a href="#">Twitter</a>
- </button>
- <hr>
- <button size='tiny' class='google-plus'>
- <a href="#">Google +</a>
- </button>
- <hr>
-
- <br>
- <h6 style="margin-bottom:5px;">Contact Info:</h6>
- <p>Phone: <b>408.341.0600</b></p>
- <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
- </column>
- </row>
- <row>
- <column large='12'>
- <center>
- <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
- </center>
- </column>
+ I'm a row!
+
+ <columns small='4' large='10'>
+ <H1>HEADERRR TAGGG</H1>
+ <a href="#">HELLOS</a>
+ </columns>
+ <columns small='8' large='2'>
+ <panel>
+ Hello!!!
+ </panel>
+ </columns>
</row>
</container>
+ <container>
+ <columns small='8' large='2'>
+ <panel>
+ Hello again!!!
+ </panel>
+ </columns>
+ <button>
+ button
+ </button>
+ </container>
</center>
</td>
</tr>
var str = file.contents.toString('utf8');
var $ = cheerio.load(str);
- var nestedComponents = function(str) {
- var output = '';
- var children = $(str);
+ var customTags = [
+ "panel",
+ "row",
+ "container",
+ "columns",
+ "button"
+ ];
+
+ // Description:
+ // Returns output for column elements
+ //
+ // Arguments:
+ // col (obj), siblings (str): the initial target column and its siblings within the same row
+ // Returns:
+ // HTML (string): Mark up for columns all contained in a row
+ var makeCols = function(col, siblings) {
+ var output = '';
+ var columns = [col, siblings];
+ var colCount = col.length + siblings.length;
- $(children).each(function(i, el) {
- var temp = $.html(el);
+ $(columns).each(function(i, el) {
+ var wrapperHTML = '';
+ var colSize = '';
+ var col = $(el)
+ var inner = $(el).html();
- if (el.name === 'button') {
- var compClass = $(el).attr('class') || '';
- var inner = $(el).html();
- var buttSize = 'button';
+ var colClass = '';
+ if ($(col).attr('class')) {
+ colClass = $(col).attr('class');
+ }
- if ($(el).attr('size')) {
- buttSize = $(el).attr('size') + '-button';
- }
+ wrapperHTML = '<td class="wrapper ' + colClass + '">';
- temp = '<table class="' + buttSize + ' ' + compClass +'"><tbody><tr><td>' + inner + '</td></tr></tbody></table>'
+ if (i === colCount - 1) {
+ wrapperHTML = '<td class="wrapper ' + colClass + 'last">';
+ }
+ // check for sizes
+ if ($(col).attr('small')) {
+ colSize += 'small' + '-' + $(col).attr('small') + ' ';
+ }
+ if ($(col).attr('large')) {
+ colSize += 'large' + '-' + $(col).attr('large') + ' ';
}
- output += temp;
- });
-
- return output;
- };
+ wrapperHTML += '<table class="' + colSize + 'columns"><tr><td>';
+ wrapperHTML += inner;
+ wrapperHTML += '</td><td class="expander"></td></tr></table>';
- var componentFactory = function(element, type, content) {
+ $(col).replaceWith(wrapperHTML);
+ });
+ }
+
+ // Description:
+ // Returns output for desired custom element
+ //
+ // Arguments:
+ // element (obj), type (str): element as a cheerio object and type as the tag name
+ // Returns:
+ // HTML (string): Mark up for corresponding element with inner html contents untouched
+ var componentFactory = function(element, type) {
var output = '';
var component = $(element);
- var inner = content || $(element).html();
+ var inner = $(element).html();
var compClass = '';
if ($(component).attr('class')) {
compClass = $(component).attr('class');
};
- if ($(element).children('button').length > 0) {
- inner = nestedComponents(inner);
- }
if (type === "panel") {
output = '<td class="panel ' + compClass +'">' + inner + '</td>';
}
else if (type === "button") {
- output = '<td><table class="button ' + compClass +'"><tbody><tr><td>' + inner + '</td></tr></tbody></table></td>'
+ output = '<table class="button ' + compClass +'"><tbody><tr><td>' + inner + '</td></tr></tbody></table>'
+ }
+ // TODO: This is super messed up right now
+ else if (type === "subcolumn") {
+ var subColSize = '';
+
+ if ($(component).attr('small')) {
+ subColSize += 'small' + '-' + $(component).attr('small') + ' ';
+ }
+ if ($(component).attr('large')) {
+ subColSize += 'large' + '-' + $(component).attr('large') + ' ';
+ }
+ output = '<td class="sub-columns ' + compClass + ' ' + subColSize +'">' + inner + '</td>';
+ }
+ else if (type === "container") {
+ output = '<table class="container ' + compClass + '"><tbody><tr><td>' + inner + '</td></tr></tbody></table>'
+ }
+ else if (type === "columns") {
+ makeCols(component, component.nextAll('columns'));
+ }
+ // TODO: INTEGRATE COL FUNCTION
+ else if (type === "row") {
+ output = '<table class="row ' + compClass + '"><tbody><tr>'+ inner + '</tr></tbody></table>';
+
}
else {
// unless it's a special element, just grab the inside
return output;
};
-
-
- var createCol = function(obj) {
- var output = '';
-
- // create tables with column class for each nested element
- var colElements = function(elements, colSize) {
- var colHTML = '';
- var colContent = '';
- $(elements).each(function(i, el) {
- // get included tags of each element in the column
- var element = el;
- var elType = el.name;
- var colClass = 'columns ';
-
- // transclude any class that might have been added onto element
- if ($(el).attr('class')) {
- colClass += $(el).attr('class');
- };
-
- colContent = componentFactory(element, elType);
-
- // construct column class for each element
- colHTML += '<table class="' + colClass + ' ' + colSize + '">'
- +'<tr>'
- + colContent +'<td class="expander"></td></tr></table>';
- });
-
- // search for still existing elements
-
- return colHTML;
- };
-
- // create tables with wrapper class for each column
-
- var colCount = obj.length;
-
- $(obj).each(function(k,v) {
- var wrapperHTML = '';
- var colSize = '';
- var col = $(v)[0];
- var elements = $(v).children();
- var colClass = '';
- if ($(col).attr('class')) {
- colClass = $(col).attr('class');
- }
-
- // if wrapper is last or the only one, put last class
- if (!obj[k].data) {
- wrapperHTML = '<td class="wrapper ' + colClass + '">';
- }
- // weird math thing to do with cheerio including closing tags and stuff
- // so it throws off the number of objects being counted as elements
- if (k === colCount - 3) {
- wrapperHTML = '<td class="wrapper ' + colClass + 'last">';
- }
- // check for sizes
- if ($(col).attr('small')) {
- colSize += 'small' + '-' + $(col).attr('small') + ' ';
+ // Description:
+ // Goes through array of custom nested components to determine whether or not there are any on the DOM
+ //
+ // Arguments:
+ // null
+ // Returns:
+ // boolean: True if there are nested components on the DOM, false otherwise.
+ var checkNestedComponents = function() {
+ $(customTags).each(function() {
+ // check if custom elements still exist
+ if ($(this).index() !== -1) {
+ return true;
}
- if ($(col).attr('large')) {
- colSize += 'large' + '-' + $(col).attr('large') + ' ';
+ else {
+ return false;
}
+ });
+ }
+
+ // Description:
+ // Executes a function to find and return nested custom elements within another element
+ //
+ // Arguments:
+ // str (String): 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
+ var findNestedComponents = function(str) {
+ var nestedComponents = [];
+ var children;
+
+ // 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 (str.indexOf('<') !== -1) {
+ children = $(str);
+ };
- wrapperHTML += colElements(elements, colSize);
- wrapperHTML += '</td>';
+ $(children).each(function(i, el) {
+ // if the element's name matches an element in the array
+ if (customTags.indexOf(el.name) !== -1) {
+ // push them to array of nested component names
+ nestedComponents.push(el.name);
+ }
+ });
- output += wrapperHTML;
+ // return array containing all nested components
+ return nestedComponents;
+ }
+
+ // Description:
+ // Executes a function place the correct mark up for custom components in the correct place in the DOM
+ // It is a recursive function that drills down the DOM to find all custom nested elements within an element
+ // and replaces the custom tags with the correct table email markup.
+ //
+ // Arguments:
+ // str (String): A string containing the markup of a singular element
+ // Returns:
+ // str (String): A string containing the markup of inputted element with contained elements
+ var scaffoldElements = function(str) {
+ // take inner html of elements and nest them inside each others
+ var output = '',
+ elMarkup = '',
+ element = $(str)[0],
+ inner = $(str).html();
+
+ // replace tags with proper table syntax
+ // elMarkup retains the inner html within the markup
+ elMarkup = componentFactory(element, element.name);
+
+ $(element).replaceWith(elMarkup);
+ // find if there are more nested elements in the inner syntax
+ var moreNested = findNestedComponents(inner);
+
+ $(moreNested).each(function() {
+ // call a recursion to replace all nested elements
+ scaffoldElements($(this));
});
+ }
- return output;
- };
+ var releaseTheKraken = function() {
+ var center = $('center').html();
+
+ // find nested components
+ if (checkNestedComponents() !== false) {
+ var nestedComponents = findNestedComponents(center);
- $('row').each(function(i) {
- var contents = $(this).html();
- var rowClass = '';
- // if row does has nested elements (i.e. not empty)
- if ($(this).children('column')) {
- contents = createCol($(contents));
+ // process each element to get the table markup
+ $(nestedComponents).each(function() {
+ var containerScaffold = scaffoldElements($(this));
+ });
+ console.log($.html());
}
- if ($(this).attr('class')) {
- rowClass = $(this).attr('class');
+ else {
+ console.log("all done");
}
-
- $(this).replaceWith('<table class="row ' + rowClass + '"><tbody><tr>'+ contents + '</tr></tbody></table>');
-
- });
-
-
- $('container').each(function() {
- var contents = $(this).html();
-
- $(this).replaceWith('<table class="container"><tbody><tr><td>' + contents + '</td></tr></tbody></table>');
- });
+ }();
file.contents = new Buffer($.html({normalizeWhitespace: true}));
projects / thirdparty / foundation / foundation-emails.git / commitdiff
