Skip to content

Instantly share code, notes, and snippets.

/index.html

Created January 30, 2017 17:42
Show Gist options
  • Save anonymous/e58d7f44b12a78e666bd9318625533a3 to your computer and use it in GitHub Desktop.
Save anonymous/e58d7f44b12a78e666bd9318625533a3 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/jupaxuruja
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
table {
width: 100%;
border: 1px solid black;
margin: 10px 0;
}
td {
border: 1px solid red;
}
</style>
</head>
<body>
<script id="jsbin-javascript">
'use strict';
var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
var el = function el() {
var tag = arguments.length <= 0 || arguments[0] === undefined ? 'div' : arguments[0];
var children = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1];
var attrs = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
var node = document.createElement(tag);
for (var key in attrs) {
node.setAttribute(key, attrs[key]);
}
children.forEach(function (child) {
var childNode = typeof child == 'string' ? document.createTextNode(child) : child;
node.appendChild(childNode);
});
return node;
};
var elFactory = function elFactory(tag) {
return function (children, attrs) {
return el(tag, children, attrs);
};
};
var td = elFactory('td');
var tr = elFactory('tr');
var table = elFactory('table');
function alphaRow() {
var letter = arguments.length <= 0 || arguments[0] === undefined ? '•' : arguments[0];
var repeat = arguments.length <= 1 || arguments[1] === undefined ? 3 : arguments[1];
var args = [];
for (var i = 1; i <= repeat; i++) {
var content = letter.repeat(i);
if (i % 2 == 0) {
content = el('b', [content]);
}
args.push(td([content]));
}
return tr(args);
}
function setup() {
var $body = document.querySelector('body');
var aSource = 'abc'.split('');
var $tableA = table(aSource.map(function (char) {
return alphaRow(char);
}));
var bSource = '01234'.split('');
var $tableB = table(bSource.map(function (char) {
return alphaRow(char, 5);
}));
$body.appendChild($tableA);
$body.appendChild($tableB);
return [$tableA, $tableB];
}
function padRow(row) {
var requiredNumberOfCells = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
while (row.length < requiredNumberOfCells) {
row.push(td());
}
return row;
}
function mergeCells($tableA, cells, from) {
var _from = _slicedToArray(from, 2);
var fromRow = _from[0];
var fromCol = _from[1];
var toRow = fromRow + cells.length;
var toCol = fromCol + cells[0].length;
var numberOfSourceCols = $tableA.childNodes[0].childNodes.length;
var numberOfSourceRows = $tableA.childNodes.length;
var numberOfColsToAdd = Math.max(0, toCol - fromCol - numberOfSourceCols);
var currentRowIndex = fromRow;
// Case C: cells has more cols than $tableA
if (numberOfColsToAdd) {
(function () {
var cellsToAdd = [];
for (var i = 0; i < numberOfColsToAdd; i++) {
cellsToAdd.push(td());
}
$tableA.childNodes.forEach(function ($row) {
cellsToAdd.map(function (node) {
return $row.appendChild(node.cloneNode());
});
});
})();
}
// Case A: cells fits within $tableA
var _loop = function () {
var rowToCopy = padRow(cells.shift(), numberOfSourceCols);
var $currentRow = $tableA.childNodes.item(currentRowIndex);
// Case B: cells has more rows than $tableA
if (!$currentRow) {
$tableA.appendChild(tr(rowToCopy));
} else {
rowToCopy.forEach(function (cell, index) {
var $cell = $currentRow.childNodes.item(fromCol + index);
$cell.innerHTML = cell.innerHTML;
});
}
currentRowIndex++;
};
while (cells.length) {
_loop();
}
}
function selectCells(source, from, to) {
var _from2 = _slicedToArray(from, 2);
var fromRow = _from2[0];
var fromCol = _from2[1];
var _to = _slicedToArray(to, 2);
var toRow = _to[0];
var toCol = _to[1];
// Clone rows first
var rows = [];
for (var i = fromRow; i <= toRow; i++) {
var item = source.childNodes.item(i);
rows.push(item && item.cloneNode(true));
}
// Select the cols we need. Assume LTR selection for now.
var slice = Array.prototype.slice;
return rows.map(function ($row) {
return slice.call($row.childNodes, fromCol, toCol + 1);
});
}
var _setup = setup();
var _setup2 = _slicedToArray(_setup, 2);
var $tableA = _setup2[0];
var $tableB = _setup2[1];
var cells = selectCells($tableB, [0, 0], [4, 4]);
mergeCells($tableA, cells, [2, 0]);
</script>
<script id="jsbin-source-css" type="text/css">table {
width: 100%;
border: 1px solid black;
margin: 10px 0;
}
td {
border: 1px solid red;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
const el = (tag = 'div', children = [], attrs = {}) => {
let node = document.createElement(tag);
for( let key in attrs ) {
node.setAttribute(key, attrs[key]);
}
children.forEach(child => {
const childNode = typeof child == 'string'
? document.createTextNode(child)
: child;
node.appendChild(childNode);
});
return node;
}
const elFactory = tag => (children, attrs) => el(tag, children, attrs)
const td = elFactory('td');
const tr = elFactory('tr');
const table = elFactory('table');
function alphaRow(letter = '•', repeat = 3) {
let args = [];
for (let i=1; i<=repeat; i++) {
let content = letter.repeat(i)
if (i%2 == 0) {
content = el('b', [content]);
}
args.push(td([content]));
}
return tr(args);
}
function setup() {
const $body = document.querySelector('body');
const aSource = 'abc'.split('');
const $tableA = table(aSource.map(char => alphaRow(char)));
const bSource = '01234'.split('');
const $tableB = table(bSource.map(char => alphaRow(char, 5)));
$body.appendChild($tableA);
$body.appendChild($tableB);
return [$tableA, $tableB];
}
function padRow(row, requiredNumberOfCells = 0) {
while (row.length < requiredNumberOfCells) {
row.push(td());
}
return row;
}
function mergeCells($tableA, cells, from) {
const [fromRow, fromCol] = from;
const toRow = fromRow + cells.length;
const toCol = fromCol + cells[0].length;
const numberOfSourceCols = $tableA.childNodes[0].childNodes.length;
const numberOfSourceRows = $tableA.childNodes.length;
const numberOfColsToAdd = Math.max(0, (toCol - fromCol) - numberOfSourceCols);
let currentRowIndex = fromRow;
// Case C: cells has more cols than $tableA
if (numberOfColsToAdd) {
const cellsToAdd = [];
for (let i=0; i<numberOfColsToAdd; i++) {
cellsToAdd.push(td())
}
$tableA.childNodes.forEach($row => {
cellsToAdd.map(node => $row.appendChild(node.cloneNode()));
});
}
// Case A: cells fits within $tableA
while(cells.length) {
let rowToCopy = padRow(cells.shift(), numberOfSourceCols);
let $currentRow = $tableA.childNodes.item(currentRowIndex);
// Case B: cells has more rows than $tableA
if (!$currentRow) {
$tableA.appendChild(tr(rowToCopy))
} else {
rowToCopy.forEach((cell, index) => {
const $cell = $currentRow.childNodes.item(fromCol+index);
$cell.innerHTML = cell.innerHTML;
});
}
currentRowIndex++;
}
}
function selectCells(source, from, to) {
const [fromRow, fromCol] = from;
const [toRow, toCol] = to;
// Clone rows first
const rows = [];
for( let i=fromRow; i<=toRow; i++ ) {
let item = source.childNodes.item(i);
rows.push(item && item.cloneNode(true));
}
// Select the cols we need. Assume LTR selection for now.
const slice = Array.prototype.slice;
return rows.map($row => slice.call($row.childNodes, fromCol, toCol+1))
}
const [$tableA, $tableB] = setup();
const cells = selectCells($tableB, [0,0], [4,4])
mergeCells($tableA, cells, [2,0]);
</script></body>
</html>
Raw
jsbin.jupaxuruja.css
table {
width: 100%;
border: 1px solid black;
margin: 10px 0;
}
td {
border: 1px solid red;
}
Raw
jsbin.jupaxuruja.js
'use strict';
var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
var el = function el() {
var tag = arguments.length <= 0 || arguments[0] === undefined ? 'div' : arguments[0];
var children = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1];
var attrs = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
var node = document.createElement(tag);
for (var key in attrs) {
node.setAttribute(key, attrs[key]);
}
children.forEach(function (child) {
var childNode = typeof child == 'string' ? document.createTextNode(child) : child;
node.appendChild(childNode);
});
return node;
};
var elFactory = function elFactory(tag) {
return function (children, attrs) {
return el(tag, children, attrs);
};
};
var td = elFactory('td');
var tr = elFactory('tr');
var table = elFactory('table');
function alphaRow() {
var letter = arguments.length <= 0 || arguments[0] === undefined ? '•' : arguments[0];
var repeat = arguments.length <= 1 || arguments[1] === undefined ? 3 : arguments[1];
var args = [];
for (var i = 1; i <= repeat; i++) {
var content = letter.repeat(i);
if (i % 2 == 0) {
content = el('b', [content]);
}
args.push(td([content]));
}
return tr(args);
}
function setup() {
var $body = document.querySelector('body');
var aSource = 'abc'.split('');
var $tableA = table(aSource.map(function (char) {
return alphaRow(char);
}));
var bSource = '01234'.split('');
var $tableB = table(bSource.map(function (char) {
return alphaRow(char, 5);
}));
$body.appendChild($tableA);
$body.appendChild($tableB);
return [$tableA, $tableB];
}
function padRow(row) {
var requiredNumberOfCells = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
while (row.length < requiredNumberOfCells) {
row.push(td());
}
return row;
}
function mergeCells($tableA, cells, from) {
var _from = _slicedToArray(from, 2);
var fromRow = _from[0];
var fromCol = _from[1];
var toRow = fromRow + cells.length;
var toCol = fromCol + cells[0].length;
var numberOfSourceCols = $tableA.childNodes[0].childNodes.length;
var numberOfSourceRows = $tableA.childNodes.length;
var numberOfColsToAdd = Math.max(0, toCol - fromCol - numberOfSourceCols);
var currentRowIndex = fromRow;
// Case C: cells has more cols than $tableA
if (numberOfColsToAdd) {
(function () {
var cellsToAdd = [];
for (var i = 0; i < numberOfColsToAdd; i++) {
cellsToAdd.push(td());
}
$tableA.childNodes.forEach(function ($row) {
cellsToAdd.map(function (node) {
return $row.appendChild(node.cloneNode());
});
});
})();
}
// Case A: cells fits within $tableA
var _loop = function () {
var rowToCopy = padRow(cells.shift(), numberOfSourceCols);
var $currentRow = $tableA.childNodes.item(currentRowIndex);
// Case B: cells has more rows than $tableA
if (!$currentRow) {
$tableA.appendChild(tr(rowToCopy));
} else {
rowToCopy.forEach(function (cell, index) {
var $cell = $currentRow.childNodes.item(fromCol + index);
$cell.innerHTML = cell.innerHTML;
});
}
currentRowIndex++;
};
while (cells.length) {
_loop();
}
}
function selectCells(source, from, to) {
var _from2 = _slicedToArray(from, 2);
var fromRow = _from2[0];
var fromCol = _from2[1];
var _to = _slicedToArray(to, 2);
var toRow = _to[0];
var toCol = _to[1];
// Clone rows first
var rows = [];
for (var i = fromRow; i <= toRow; i++) {
var item = source.childNodes.item(i);
rows.push(item && item.cloneNode(true));
}
// Select the cols we need. Assume LTR selection for now.
var slice = Array.prototype.slice;
return rows.map(function ($row) {
return slice.call($row.childNodes, fromCol, toCol + 1);
});
}
var _setup = setup();
var _setup2 = _slicedToArray(_setup, 2);
var $tableA = _setup2[0];
var $tableB = _setup2[1];
var cells = selectCells($tableB, [0, 0], [4, 4]);
mergeCells($tableA, cells, [2, 0]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment