Skip to content

Commit

Permalink
Merge af89135 into 9f08fc6
Browse files Browse the repository at this point in the history
  • Loading branch information
Gerardo committed Oct 2, 2015
2 parents 9f08fc6 + af89135 commit 93a06d2
Show file tree
Hide file tree
Showing 7 changed files with 330 additions and 16 deletions.
19 changes: 19 additions & 0 deletions dist/css/medium-editor-tables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,22 @@
.medium-editor-table,
.medium-editor-table td {
border: 1px dashed #e3e3e3; }

.medium-editor-table-builder-toolbar {
display: block;
background-color: #333;
font-size: 0.8em;
color: white; }
.medium-editor-table-builder-toolbar span {
width: 45px;
display: block;
float: left;
margin-left: 5px; }
.medium-editor-table-builder-toolbar button {
margin: 0 3px;
background-color: #333;
border: 0;
width: 30px;
cursor: pointer; }
.medium-editor-table-builder-toolbar button i {
color: white; }
2 changes: 1 addition & 1 deletion dist/css/medium-editor-tables.min.css
View file

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

149 changes: 142 additions & 7 deletions dist/js/medium-editor-tables.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,56 @@ Builder.prototype = {
this.options.rows,
this.options.columns
);

this._range = null;
this._toolbar = this._doc.createElement('div');
this._toolbar.className = 'medium-editor-table-builder-toolbar';

var spanRow = this._doc.createElement('span');
spanRow.innerHTML = 'Row:';
this._toolbar.appendChild(spanRow);
var addRowBefore = this._doc.createElement('button');
addRowBefore.title = 'Add row before';
addRowBefore.innerHTML = '<i class="fa fa-long-arrow-up"></i>';
addRowBefore.onclick = this.addRow.bind(this, true);
this._toolbar.appendChild(addRowBefore);

var addRowAfter = this._doc.createElement('button');
addRowAfter.title = 'Add row after';
addRowAfter.innerHTML = '<i class="fa fa-long-arrow-down"></i>';
addRowAfter.onclick = this.addRow.bind(this, false);
this._toolbar.appendChild(addRowAfter);

var remRow = this._doc.createElement('button');
remRow.title = 'Remove row';
remRow.innerHTML = '<i class="fa fa-close"></i>';
remRow.onclick = this.removeRow.bind(this);
this._toolbar.appendChild(remRow);

var spanCol = this._doc.createElement('span');
spanCol.innerHTML = 'Column:';
this._toolbar.appendChild(spanCol);
var addColumnBefore = this._doc.createElement('button');
addColumnBefore.title = 'Add column before';
addColumnBefore.innerHTML = '<i class="fa fa-long-arrow-left"></i>';
addColumnBefore.onclick = this.addColumn.bind(this, true);
this._toolbar.appendChild(addColumnBefore);

var addColumnAfter = this._doc.createElement('button');
addColumnAfter.title = 'Add column after';
addColumnAfter.innerHTML = '<i class="fa fa-long-arrow-right"></i>';
addColumnAfter.onclick = this.addColumn.bind(this, false);
this._toolbar.appendChild(addColumnAfter);

var remColumn = this._doc.createElement('button');
remColumn.title = 'Remove column';
remColumn.innerHTML = '<i class="fa fa-close"></i>';
remColumn.onclick = this.removeColumn.bind(this);
this._toolbar.appendChild(remColumn);

var grid = this._root.childNodes[0];
this._root.insertBefore(this._toolbar, grid);
console.log(this._root);
},

getElement: function () {
Expand All @@ -238,6 +288,85 @@ Builder.prototype = {
show: function (left) {
this._root.style.display = 'block';
this._root.style.left = left + 'px';
},

setEditor: function (range) {
this._range = range;
this._doc.getElementsByClassName('medium-editor-table-builder-toolbar')[0].style.display = 'block';
},

setBuilder: function () {
this._range = null;
this._doc.getElementsByClassName('medium-editor-table-builder-toolbar')[0].style.display = 'none';
var elements = this._doc.getElementsByClassName('medium-editor-table-builder-grid');
for (var i = 0; i < elements.length; i++) {
// TODO: what is 16 and what is 2?
elements[i].style.height = (16 * this.rows + 2) + 'px';
elements[i].style.width = (16 * this.columns + 2) + 'px';
}
},

addRow: function (before, e) {
e.preventDefault();
e.stopPropagation();
var tbody = this._range.parentNode.parentNode,
tr = this._doc.createElement('tr'),
td;
for (var i = 0; i < this._range.parentNode.childNodes.length; i++) {
td = this._doc.createElement('td');
td.appendChild(this._doc.createElement('br'));
tr.appendChild(td);
}
if (before !== true && this._range.parentNode.nextSibling) {
tbody.insertBefore(tr, this._range.parentNode.nextSibling);
} else if (before === true) {
tbody.insertBefore(tr, this._range.parentNode);
} else {
tbody.appendChild(tr);
}
this.options.onClick(0, 0);
},

removeRow: function (e) {
e.preventDefault();
e.stopPropagation();
this._range.parentNode.parentNode.removeChild(this._range.parentNode);
this.options.onClick(0, 0);
},

addColumn: function (before, e) {
e.preventDefault();
e.stopPropagation();
var cell = Array.prototype.indexOf.call(this._range.parentNode.childNodes, this._range),
tbody = this._range.parentNode.parentNode,
td;

for (var i = 0; i < tbody.childNodes.length; i++) {
td = this._doc.createElement('td');
td.appendChild(this._doc.createElement('br'));
if (before === true) {
tbody.childNodes[i].insertBefore(td, tbody.childNodes[i].childNodes[cell]);
} else if (this._range.parentNode.parentNode.childNodes[i].childNodes[cell].nextSibling) {
tbody.childNodes[i].insertBefore(td, tbody.childNodes[i].childNodes[cell].nextSibling);
} else {
tbody.childNodes[i].appendChild(td);
}
}

this.options.onClick(0, 0);
},

removeColumn: function (e) {
e.preventDefault();
e.stopPropagation();
var cell = Array.prototype.indexOf.call(this._range.parentNode.childNodes, this._range),
tbody = this._range.parentNode.parentNode,
rows = tbody.childNodes.length;

for (var i = 0; i < rows; i++) {
tbody.childNodes[i].removeChild(tbody.childNodes[i].childNodes[cell]);
}
this.options.onClick(0, 0);
}
};

Expand Down Expand Up @@ -370,6 +499,7 @@ var MediumEditorTable = MediumEditor.extensions.form.extend({
handleClick: function (event) {
event.preventDefault();
event.stopPropagation();

this[this.isActive() === true ? 'hide' : 'show']();
},

Expand All @@ -380,19 +510,24 @@ var MediumEditorTable = MediumEditor.extensions.form.extend({

show: function () {
this.setActive();
this.builder.show(this.button.offsetLeft);
var elements = this.document.getElementsByClassName('medium-editor-table-builder-grid');
for (var i = 0; i < elements.length; i++) {
// TODO: what is 16 and what is 2?
elements[i].style.height = (16 * this.rows + 2) + 'px';
elements[i].style.width = (16 * this.columns + 2) + 'px';

var range = MediumEditor.selection.getSelectionRange(this.document);
if (range.startContainer.nodeName.toLowerCase() === 'td' ||
range.endContainer.nodeName.toLowerCase() === 'td' ||
MediumEditor.util.getClosestTag(MediumEditor.selection.getSelectedParentElement(range), 'td')) {
this.builder.setEditor(MediumEditor.selection.getSelectedParentElement(range));
} else {
this.builder.setBuilder();
}
this.builder.show(this.button.offsetLeft);
},

getForm: function () {
this.builder = new Builder({
onClick: function (rows, columns) {
this.table.insert(rows, columns);
if (rows > 0 && columns > 0) {
this.table.insert(rows, columns);
}
this.hide();
}.bind(this),
ownerDocument: this.document,
Expand Down
Loading

0 comments on commit 93a06d2

Please sign in to comment.