Permalink
Browse files

Added maxRows method, and tests

  • Loading branch information...
1 parent dff7fac commit 7695f0c38c60bee01659b6d87883fdb797f6f165 @nCrafts committed Apr 13, 2016
Showing with 489 additions and 124 deletions.
  1. +2 −1 .eslintrc
  2. +2 −0 README.md
  3. +1 −1 dist/css/tabular-input.min.css
  4. +109 −47 dist/js/tabular-input.js
  5. +1 −1 dist/js/tabular-input.min.js
  6. +29 −4 docs/index.html
  7. +97 −2 docs/style.css
  8. +26 −1 gulpfile.js
  9. +10 −1 package.json
  10. +20 −3 src/css/tabular-input.css
  11. +94 −44 src/js/tabular-input.js
  12. +14 −0 test/.eslintrc
  13. +84 −0 test/index.js
  14. +0 −19 webpack.config.js
View
@@ -5,7 +5,8 @@
},
"env": {
"browser": true,
- "jquery": true
+ "jquery": true,
+ "node": true
},
"rules": {
"comma-dangle": [2, "never"],
View
@@ -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
@@ -1 +1 @@
-@keyframes flipDown{from{transform:translate3d(0,0,0) scaleX(1) scaleY(1) rotateX(90deg);background-color:#fafafa}to{transform:translate3d(0,0,0) scaleX(1) scaleY(1) rotateX(0);background-color:inherit}}@keyframes slideOut{from{transform:translate3d(0,0,0) scaleX(1) scaleY(1) rotateX(0);opacity:1;background-color:inherit}to{transform:translate3d(0,0,0) scaleX(1) scaleY(1) rotateX(-90deg);opacity:0;background-color:#fafafa}}.tabularInput-table{border-collapse:collapse;max-width:100%}.tabularInput-table tbody{max-width:100%;width:100%}.tabularInput-table td input{margin:0 0 -1px;padding:.5em .9em;transition:box-shadow .1s;width:100%;font-size:90%;box-sizing:border-box;border:1px solid #ddd;border-right-width:0}.tabularInput-table td:last-child{border-right:1px solid #ddd}.tabularInput-table td input:focus{box-shadow:0 0 4px 2px #A1C2F3;border-color:transparent;outline:0;z-index:1;position:relative}.tabularInput-table tr.animate-add,.tabularInput-table tr.animate-remove{-webkit-perspective:500;-moz-perspective:500;-ms-perspective:500;perspective:500}.tabularInput-table.animate tr.animate-add input{transform-origin:0 0;animation:flipDown .35s ease-in}.tabularInput-table.animate tr.animate-remove input{transform-origin:0 0;animation:slideOut .3s ease-in}.tabularInput-table th{padding:.5em .9em;font-size:95%;background-color:#fafafa;font-weight:400;border:1px solid #ddd;border-bottom-width:0}
+@keyframes flipDown{from{transform:translate3d(0,0,0) scaleX(1) scaleY(1) rotateX(90deg);background-color:#fafafa}to{transform:translate3d(0,0,0) scaleX(1) scaleY(1) rotateX(0);background-color:inherit}}@keyframes flipUp{from{transform:translate3d(0,0,0) scaleX(1) scaleY(1) rotateX(0);opacity:1;background-color:inherit}to{transform:translate3d(0,0,0) scaleX(1) scaleY(1) rotateX(-90deg);opacity:0;background-color:#fafafa}}.tabularInput-table{border-collapse:collapse;max-width:100%}.tabularInput-table tbody{max-width:100%;width:100%}.tabularInput-table.animate td{transition:width .1s}.tabularInput-table td input{margin:0 0 -1px;padding:.5em .9em;transition:box-shadow .1s;width:100%;font-size:90%;box-sizing:border-box;border:1px solid #ddd;border-right-width:0}.tabularInput-table td:last-child{border-right:1px solid #ddd}.tabularInput-table tr.animate-add td:last-child,.tabularInput-table tr.animate-remove td:last-child{border-right-width:0}.tabularInput-table tr.animate-add td:last-child input,.tabularInput-table tr.animate-remove td:last-child input{border-right-width:1px}.tabularInput-table td input:focus{box-shadow:0 0 4px 2px #A1C2F3;border-color:transparent;outline:0;z-index:1;position:relative}.tabularInput-table tr.animate-add,.tabularInput-table tr.animate-remove{-webkit-perspective:500;-moz-perspective:500;-ms-perspective:500;perspective:500}.tabularInput-table.animate tr.animate-add input{transform-origin:0 0;animation:flipDown .25s ease-in}.tabularInput-table.animate tr.animate-remove input{transform-origin:0 0;animation:flipUp .25s ease-in}.tabularInput-table th{padding:.5em .9em;font-size:95%;background-color:#fafafa;font-weight:400;border:1px solid #ddd;border-bottom-width:0}
@@ -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"); } }
@@ -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);
@@ -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);
+ });
}
}]);
@@ -1 +1 @@
-!function(t){function e(a){if(n[a])return n[a].exports;var i=n[a]={exports:{},id:a,loaded:!1};return t[a].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var a=function(){function t(t,e){for(var n=0;n<e.length;n++){var a=e[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}return function(e,n,a){return n&&t(e.prototype,n),a&&t(e,a),e}}(),i=function(t){var e=function(){function e(a,i){var o=this;n(this,e),this.config=i,this.rowCounter=i.rows,a.on("keydown","input",function(e){o.config.newRowOnTab===!0&&9===e.which&&t(e.target).closest("tr").is(":last-child")&&t(e.target).parent("td").is(":last-child")&&o.addRow(a)})}return a(e,[{key:"addRow",value:function(t){for(var e=[],n=0;n<this.config.columns;n++)this.config.name===!1?e.push('<input type="text"/>'):e.push('<input type="text" name="'+this.config.name+"["+n+"]["+this.rowCounter+']"/>');var a="<tr class='"+(this.config.animate===!0?"animate-add":"")+"'><td style='width: "+this.config.cellWidth+"%'>"+e.join("</td><td>")+"</td></tr>";t.find("tr:last").after(a),this.rowCounter++,setTimeout(function(){t.find(".animate-add").removeClass("animate-add")},500)}},{key:"deleteRow",value:function(t,e){var n="undefined"==typeof e?t.find("tr").length-1:e;t.find("tr").eq(n).addClass("animate-remove"),this.config.animate===!1?t.find("tr.animate-remove").remove():setTimeout(function(){t.find("tr.animate-remove").remove()},300)}},{key:"setColumnHeads",value:function(t,e){var n=e.map(function(t){return"<th>"+t+"</th>"}).join();t.find("thead").html("<tr>"+n+"</tr>")}}],[{key:"jQueryInterface",value:function(n,a){if("string"==typeof n&&"function"==typeof this.data().tabularObject[n])return void this.data().tabularObject[n](this,a);var i=t.extend({rows:2,columns:4,name:!1,newRowOnTab:!1,columnHeads:!1,animate:!1},n);i.cellWidth=100/i.columns;for(var o=0,r=[];o<i.rows;){for(var u=[],s=0;s<i.columns;s++)i.name===!1?u.push('<input type="text"/>'):u.push('<input type="text" name="'+i.name+"["+s+"]["+o+']"/>');r.push("<tr><td style='width: "+i.cellWidth+"%'>"+u.join("</td><td>")+"</td></tr>"),o++}this.html(t('<table width="100%" cellspacing="0" cellpadding="0" class="tabularInput-table '+(i.animate?"animate":"")+'"></table>').html("<thead></thead><tbody>"+r.join()+"</tbody>"));var l=new e(this,i);i.columnHeads!==!1&&(i.columnHeads="undefined"==typeof i.columnHeads?" column".repeat(i.columns).split(" ").splice(1):i.columnHeads,l.setColumnHeads(this,i.columnHeads)),this.data("tabularObject",l)}}]),e}();t.fn.tabularInput=e.jQueryInterface,t.fn.tabularInput.Constructor=e}(jQuery);e["default"]=i}]);
+!function(t){function n(i){if(e[i])return e[i].exports;var o=e[i]={exports:{},id:i,loaded:!1};return t[i].call(o.exports,o,o.exports,n),o.loaded=!0,o.exports}var e={};return n.m=t,n.c=e,n.p="",n(0)}([function(t,n){"use strict";function e(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(n,"__esModule",{value:!0});var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t},o=function(){function t(t,n){for(var e=0;e<n.length;e++){var i=n[e];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(n,e,i){return e&&t(n.prototype,e),i&&t(n,i),n}}(),a=function(t){var n=function(){function n(i,o){var a=this;e(this,n),this.config=o,i.on("keydown","input",function(n){a.config.newRowOnTab===!0&&9===n.which&&t(n.target).closest("tr").is(":last-child")&&t(n.target).parent("td").is(":last-child")&&a.addRow(i)})}return o(n,[{key:"addColumn",value:function(n){n.find("tbody tr").each(function(n,e){t(e).find("td:last").after('<td><input type="text"/></td>')}),this.config.columns++,this.setColumnHeads(n,this.config.columnHeads),this.setName(n),this.setWidth(n)}},{key:"deleteColumn",value:function(t,n){if(0!==this.config.columns){var e="number"!=typeof n?this.config.columns:n+1;t.find("tr td:nth-child("+e+")").remove(),this.config.columns--,this.setName(t),this.setWidth(t)}}},{key:"addRow",value:function(t){if(!(this.config.maxRows!==!1&&t.find("tbody tr").length>=this.config.maxRows)){for(var n=[],e=0;e<this.config.columns;e++)n.push('<input type="text"/>');var i="<tr class='"+(this.config.animate===!0?"animate-add":"")+"'><td>"+n.join("</td><td>")+"</td></tr>";t.find("tr:last").after(i),this.setName(t),setTimeout(function(){t.find(".animate-add").removeClass("animate-add")},250)}}},{key:"deleteRow",value:function(t,n){var e=n||t.find("tr").length-1;t.find("tr").eq(e).addClass("animate-remove"),this.config.animate===!1?t.find("tr.animate-remove").remove():setTimeout(function(){t.find("tr.animate-remove").remove()},250)}},{key:"maxRows",value:function(t,n){"number"==typeof n&&(this.config.maxRows=n)}},{key:"setColumnHeads",value:function(t,n){if("object"===("undefined"==typeof n?"undefined":i(n))){for(this.config.columnHeads=!0;n.length<this.config.columns;)n.push("");var e=n.map(function(t){return"<th>"+t+"</th>"}).slice(0,this.config.columns).join();t.find("thead").html("<tr>"+e+"</tr>")}}},{key:"setName",value:function(n){var e=this;this.config.name!==!1&&n.find("tr").each(function(n,i){t(i).find("td").each(function(i,o){t(o).find("input").attr("name",e.config.name+"["+i+"]["+n+"]")})})}},{key:"setWidth",value:function(t){var n=(100/this.config.columns).toFixed(2)+"%";t.find("td").css("width",n),t.find("th").length>0&&t.find("th").css("width",n)}},{key:"destroy",value:function(t){t.find(".tabularInput-table").remove()}}],[{key:"jQueryInterface",value:function(e,i){var o=this;return this.each(function(){if("string"==typeof e&&"function"==typeof o.data().tabularObject[e])return void o.data().tabularObject[e](o,i);for(var a=t.extend({rows:2,columns:4,name:!1,newRowOnTab:!1,columnHeads:!1,animate:!1,maxRows:!1},e),r=0,u=[];r<a.rows;){for(var s=[],f=0;f<a.columns;f++)s.push('<input type="text"/>');u.push("<tr row-index='"+r+"'><td>"+s.join("</td><td>")+"</td></tr>"),r++}o.html(t('<table width="100%" cellspacing="0" cellpadding="0" class="tabularInput-table '+(a.animate?"animate":"")+'"></table>').html("<thead></thead><tbody>"+u.join()+"</tbody>"));var c=new n(o,a);c.setColumnHeads(o,a.columnHeads),c.setName(o),c.setWidth(o),o.data("tabularObject",c)})}}]),n}();t.fn.tabularInput=n.jQueryInterface,t.fn.tabularInput.Constructor=n}(jQuery);n["default"]=a}]);
Oops, something went wrong.

0 comments on commit 7695f0c

Please sign in to comment.