Skip to content

Commit

Permalink
Added maxRows method, and tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@nCrafts
nCrafts committed Apr 13, 2016
1 parent dff7fac commit 7695f0c
Show file tree
Hide file tree
Showing 14 changed files with 489 additions and 124 deletions.
3 changes: 2 additions & 1 deletion .eslintrc
View file
Expand Up @@ -5,7 +5,8 @@
},
"env": {
"browser": true,
"jquery": true
"jquery": true,
"node": true
},
"rules": {
"comma-dangle": [2, "never"],
Expand Down
2 changes: 2 additions & 0 deletions README.md
View file
@@ -1,5 +1,7 @@
# Tabular Input
## Intro
One-line text fields in a tabular format, with support for dynamically adding rows.
## Examples and Usage
[Here](http://ncrafts.github.io/tabular-input/)
## License
MIT License
2 changes: 1 addition & 1 deletion dist/css/tabular-input.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

156 changes: 109 additions & 47 deletions dist/js/tabular-input.js
View file
Expand Up @@ -50,6 +50,8 @@
value: true
});

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
Expand All @@ -62,7 +64,6 @@
_classCallCheck(this, tabularInput);

this.config = config;
this.rowCounter = config.rows;
element.on('keydown', 'input', function (e) {
if (_this.config.newRowOnTab === true && e.which === 9 && $(e.target).closest('tr').is(':last-child') && $(e.target).parent('td').is(':last-child')) {
_this.addRow(element);
Expand All @@ -71,89 +72,150 @@
}

_createClass(tabularInput, [{
key: 'addColumn',
value: function addColumn(element) {
element.find('tbody tr').each(function (x, y) {
$(y).find('td:last').after('<td><input type="text"/></td>');
});
this.config.columns++;
this.setColumnHeads(element, this.config.columnHeads);
this.setName(element);
this.setWidth(element);
}
}, {
key: 'deleteColumn',
value: function deleteColumn(element, _whichColumn) {
if (this.config.columns === 0) {
return;
}
var whichColumn = typeof _whichColumn !== 'number' ? this.config.columns : _whichColumn + 1;
element.find('tr td:nth-child(' + whichColumn + ')').remove();
this.config.columns--;
this.setName(element);
this.setWidth(element);
}
}, {
key: 'addRow',
value: function addRow(element) {
if (this.config.maxRows !== false && element.find('tbody tr').length >= this.config.maxRows) {
return;
}
var newRowInputs = [];
for (var a = 0; a < this.config.columns; a++) {
if (this.config.name === false) {
newRowInputs.push('<input type="text"/>');
} else {
newRowInputs.push('<input type="text" name="' + this.config.name + '[' + a + '][' + this.rowCounter + ']"/>');
}
newRowInputs.push('<input type="text"/>');
}
var newRowHTML = '<tr class=\'' + (this.config.animate === true ? 'animate-add' : '') + '\'><td style=\'width: ' + this.config.cellWidth + '%\'>' + newRowInputs.join('</td><td>') + '</td></tr>';
var newRowHTML = '<tr class=\'' + (this.config.animate === true ? 'animate-add' : '') + '\'><td>' + newRowInputs.join('</td><td>') + '</td></tr>';
element.find('tr:last').after(newRowHTML);
this.rowCounter++;
this.setName(element);
setTimeout(function () {
element.find('.animate-add').removeClass('animate-add');
}, 500);
}, 250);
}
}, {
key: 'deleteRow',
value: function deleteRow(element, _whichRow) {
var whichRow = typeof _whichRow === 'undefined' ? element.find('tr').length - 1 : _whichRow;
var whichRow = _whichRow || element.find('tr').length - 1;
element.find('tr').eq(whichRow).addClass('animate-remove');
if (this.config.animate === false) {
element.find('tr.animate-remove').remove();
} else {
setTimeout(function () {
element.find('tr.animate-remove').remove();
}, 300);
}, 250);
}
}
}, {
key: 'maxRows',
value: function maxRows(element, _maxRows) {
if (typeof _maxRows !== 'number') {
return;
}
this.config.maxRows = _maxRows;
}
}, {
key: 'setColumnHeads',
value: function setColumnHeads(element, heads) {
if ((typeof heads === 'undefined' ? 'undefined' : _typeof(heads)) !== 'object') {
return;
}
this.config.columnHeads = true;
while (heads.length < this.config.columns) {
heads.push('');
}
var headsHTML = heads.map(function (x) {
return '<th>' + x + '</th>';
}).join();
}).slice(0, this.config.columns).join();
element.find('thead').html('<tr>' + headsHTML + '</tr>');
}
}], [{
key: 'jQueryInterface',
value: function jQueryInterface(_config, extraArgument) {
}, {
key: 'setName',
value: function setName(element) {
var _this2 = this;

if (typeof _config === 'string' && typeof this.data().tabularObject[_config] === 'function') {
this.data().tabularObject[_config](this, extraArgument);
if (this.config.name === false) {
return;
}
element.find('tr').each(function (x, tr) {
$(tr).find('td').each(function (y, td) {
$(td).find('input').attr('name', _this2.config.name + '[' + y + '][' + x + ']');
});
});
}
}, {
key: 'setWidth',
value: function setWidth(element) {
var width = (100 / this.config.columns).toFixed(2) + '%';
element.find('td').css('width', width);
if (element.find('th').length > 0) {
element.find('th').css('width', width);
}
}
}, {
key: 'destroy',
value: function destroy(element) {
element.find('.tabularInput-table').remove();
}
}], [{
key: 'jQueryInterface',
value: function jQueryInterface(_config, extraArgument) {
var _this3 = this;

var config = $.extend({
rows: 2,
columns: 4,
name: false,
newRowOnTab: false,
columnHeads: false,
animate: false
}, _config);

config.cellWidth = 100 / config.columns;

var currentRow = 0;
var allRowsArray = [];
return this.each(function () {
if (typeof _config === 'string' && typeof _this3.data().tabularObject[_config] === 'function') {
_this3.data().tabularObject[_config](_this3, extraArgument);
return;
}

while (currentRow < config.rows) {
var currentRowInputs = [];
for (var a = 0; a < config.columns; a++) {
if (config.name === false) {
var config = $.extend({
rows: 2,
columns: 4,
name: false,
newRowOnTab: false,
columnHeads: false,
animate: false,
maxRows: false
}, _config);

var currentRow = 0;
var allRowsArray = [];

while (currentRow < config.rows) {
var currentRowInputs = [];
for (var a = 0; a < config.columns; a++) {
currentRowInputs.push('<input type="text"/>');
} else {
currentRowInputs.push('<input type="text" name="' + config.name + '[' + a + '][' + currentRow + ']"/>');
}
allRowsArray.push('<tr row-index=\'' + currentRow + '\'><td>' + currentRowInputs.join('</td><td>') + '</td></tr>');
currentRow++;
}
allRowsArray.push('<tr><td style=\'width: ' + config.cellWidth + '%\'>' + currentRowInputs.join('</td><td>') + '</td></tr>');
currentRow++;
}

this.html($('<table width="100%" cellspacing="0" cellpadding="0" class="tabularInput-table ' + (config.animate ? 'animate' : '') + '"></table>').html('<thead></thead><tbody>' + allRowsArray.join() + '</tbody>'));
var tabularObject = new tabularInput(this, config);

if (config.columnHeads !== false) {
config.columnHeads = typeof config.columnHeads === 'undefined' ? ' column'.repeat(config.columns).split(' ').splice(1) : config.columnHeads;
tabularObject.setColumnHeads(this, config.columnHeads);
}
_this3.html($('<table width="100%" cellspacing="0" cellpadding="0" class="tabularInput-table ' + (config.animate ? 'animate' : '') + '"></table>').html('<thead></thead><tbody>' + allRowsArray.join() + '</tbody>'));
var tabularObject = new tabularInput(_this3, config);

this.data('tabularObject', tabularObject);
tabularObject.setColumnHeads(_this3, config.columnHeads);
tabularObject.setName(_this3);
tabularObject.setWidth(_this3);
_this3.data('tabularObject', tabularObject);
});
}
}]);

Expand Down
2 changes: 1 addition & 1 deletion dist/js/tabular-input.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 7695f0c

Please sign in to comment.