diff --git a/lib/componentFactory.js b/lib/componentFactory.js index 0361e4d..319cc52 100644 --- a/lib/componentFactory.js +++ b/lib/componentFactory.js @@ -13,7 +13,29 @@ module.exports = function(element) { // case this.components.columns: return this.makeColumn(element, 'columns'); + + // + case this.components.columns2: + return this.makeColumn2(element, 'columns2'); + + // + case this.components.innerrow: + var classes = ['innerrow']; + if (element.attr('class')) { + classes = classes.concat(element.attr('class').split(' ')); + } + + return format('%s', classes.join(' '), inner); + + // + case this.components.row2: + var classes = ['row2']; + if (element.attr('class')) { + classes = classes.concat(element.attr('class').split(' ')); + } + return format('%s
', classes.join(' '), inner); + // case this.components.row: var classes = ['row']; diff --git a/lib/inky.js b/lib/inky.js index 510177a..a5769d2 100644 --- a/lib/inky.js +++ b/lib/inky.js @@ -24,7 +24,10 @@ function Inky(options) { menuItem: 'item', center: 'center', spacer: 'spacer', - wrapper: 'wrapper' + wrapper: 'wrapper', + columns2: 'columns2', + innerrow: 'innerrow', + row2: 'row2' }, options.components || {}); // Column count for grid @@ -62,3 +65,5 @@ Inky.prototype.releaseTheKraken = function($) { Inky.prototype.componentFactory = require('./componentFactory'); Inky.prototype.makeColumn = require('./makeColumn'); + +Inky.prototype.makeColumn2 = require('./makeColumn2'); diff --git a/lib/makeColumn2.js b/lib/makeColumn2.js new file mode 100644 index 0000000..22edcc9 --- /dev/null +++ b/lib/makeColumn2.js @@ -0,0 +1,57 @@ +var format = require('util').format; +var multiline = require('multiline'); +var $ = require('cheerio'); + +/** + * Returns output for column elements. + * @todo This could be refactored to handle both cols and subcols. + * @param {string} col - Column to format. + * @returns {string} Column HTML. + */ +module.exports = function(col) { + var output = ''; + var inner = $(col).html(); + var classes = []; + var expander = ''; + + // Add 1 to include current column + var colCount = $(col).siblings().length + 1; + + // Inherit classes from the tag + if ($(col).attr('class')) { + classes = classes.concat($(col).attr('class').split(' ')); + } + + // Check for sizes. If no attribute is provided, default to small-12. Divide evenly for large columns + var smallSize = $(col).attr('small') || this.columnCount; + var largeSize = $(col).attr('large') || $(col).attr('small') || Math.floor(this.columnCount / colCount); + + classes.push(format('small-%s', smallSize)); + classes.push(format('large-%s', largeSize)); + + // Add the basic "columns" class also + classes.push('columns'); + + // Determine if it's the first or last column, or both + if (!$(col).prev(this.components.columns).length) classes.push('first'); + if (!$(col).next(this.components.columns).length) classes.push('last'); + + // If the column contains a nested row, the .expander class should not be used + // The == on the first check is because we're comparing a string pulled from $.attr() to a number + if (largeSize == this.columnCount && col.find('.innerrow, innerrow').length === 0) { + expander = '\n'; + } + + // Final HTML output + output = multiline(function() {/* + + + + %s + +
%s
+ + */}); + + return format(output, classes.join(' '), inner, expander); +} \ No newline at end of file