284 lines
11 KiB
JavaScript
284 lines
11 KiB
JavaScript
|
/* ===========================================================
|
|||
|
|
* trumbowyg.table.custom.js v2.0
|
|||
|
|
* Table plugin for Trumbowyg
|
|||
|
|
* http://alex-d.github.com/Trumbowyg
|
|||
|
|
* ===========================================================
|
|||
|
|
* Author : Sven Dunemann [dunemann@forelabs.eu]
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
(function ($) {
|
|||
|
|
'use strict';
|
|||
|
|
|
|||
|
|
var defaultOptions = {
|
|||
|
|
rows: 8,
|
|||
|
|
columns: 8,
|
|||
|
|
styler: 'table'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
$.extend(true, $.trumbowyg, {
|
|||
|
|
langs: {
|
|||
|
|
en: {
|
|||
|
|
table: 'Insert table',
|
|||
|
|
tableAddRow: 'Add row',
|
|||
|
|
tableAddColumn: 'Add column',
|
|||
|
|
tableDeleteRow: 'Delete row',
|
|||
|
|
tableDeleteColumn: 'Delete column',
|
|||
|
|
tableDestroy: 'Delete table',
|
|||
|
|
error: 'Error'
|
|||
|
|
},
|
|||
|
|
de: {
|
|||
|
|
table: 'Tabelle einfügen',
|
|||
|
|
tableAddRow: 'Zeile hinzufügen',
|
|||
|
|
tableAddColumn: 'Spalte hinzufügen',
|
|||
|
|
tableDeleteRow: 'Zeile löschen',
|
|||
|
|
tableDeleteColumn: 'Spalte löschen',
|
|||
|
|
tableDestroy: 'Tabelle löschen',
|
|||
|
|
error: 'Error'
|
|||
|
|
},
|
|||
|
|
sk: {
|
|||
|
|
table: 'Vytvoriť tabuľky',
|
|||
|
|
tableAddRow: 'Pridať riadok',
|
|||
|
|
tableAddColumn: 'Pridať stĺpec',
|
|||
|
|
error: 'Chyba'
|
|||
|
|
},
|
|||
|
|
fr: {
|
|||
|
|
table: 'Insérer un tableau',
|
|||
|
|
tableAddRow: 'Ajouter des lignes',
|
|||
|
|
tableAddColumn: 'Ajouter des colonnes',
|
|||
|
|
error: 'Erreur'
|
|||
|
|
},
|
|||
|
|
cs: {
|
|||
|
|
table: 'Vytvořit příkaz Table',
|
|||
|
|
tableAddRow: 'Přidat řádek',
|
|||
|
|
tableAddColumn: 'Přidat sloupec',
|
|||
|
|
error: 'Chyba'
|
|||
|
|
},
|
|||
|
|
ru: {
|
|||
|
|
table: 'Вставить таблицу',
|
|||
|
|
tableAddRow: 'Добавить строки',
|
|||
|
|
tableAddColumn: 'Добавить столбцы',
|
|||
|
|
error: 'Ошибка'
|
|||
|
|
},
|
|||
|
|
ja: {
|
|||
|
|
table: '表の挿入',
|
|||
|
|
tableAddRow: '行の追加',
|
|||
|
|
tableAddColumn: '列の追加',
|
|||
|
|
error: 'エラー'
|
|||
|
|
},
|
|||
|
|
tr: {
|
|||
|
|
table: 'Tablo ekle',
|
|||
|
|
tableAddRow: 'Satır ekle',
|
|||
|
|
tableAddColumn: 'Kolon ekle',
|
|||
|
|
error: 'Hata'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
plugins: {
|
|||
|
|
table: {
|
|||
|
|
init: function (t) {
|
|||
|
|
t.o.plugins.table = $.extend(true, {}, defaultOptions, t.o.plugins.table || {});
|
|||
|
|
|
|||
|
|
var buildButtonDef = {
|
|||
|
|
fn: function () {
|
|||
|
|
t.saveRange();
|
|||
|
|
|
|||
|
|
var btnName = 'table';
|
|||
|
|
|
|||
|
|
var dropdownPrefix = t.o.prefix + 'dropdown',
|
|||
|
|
dropdownOptions = { // the dropdown
|
|||
|
|
class: dropdownPrefix + '-' + btnName + ' ' + dropdownPrefix + ' ' + t.o.prefix + 'fixed-top'
|
|||
|
|
};
|
|||
|
|
dropdownOptions['data-' + dropdownPrefix] = btnName;
|
|||
|
|
var $dropdown = $('<div/>', dropdownOptions);
|
|||
|
|
|
|||
|
|
if (t.$box.find("." + dropdownPrefix + "-" + btnName).length === 0) {
|
|||
|
|
t.$box.append($dropdown.hide());
|
|||
|
|
} else {
|
|||
|
|
$dropdown = t.$box.find("." + dropdownPrefix + "-" + btnName);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// clear dropdown
|
|||
|
|
$dropdown.html('');
|
|||
|
|
|
|||
|
|
// when active table show AddRow / AddColumn
|
|||
|
|
if (t.$box.find("." + t.o.prefix + "table-button").hasClass(t.o.prefix + 'active-button')) {
|
|||
|
|
$dropdown.append(t.buildSubBtn('tableAddRow'));
|
|||
|
|
$dropdown.append(t.buildSubBtn('tableAddColumn'));
|
|||
|
|
$dropdown.append(t.buildSubBtn('tableDeleteRow'));
|
|||
|
|
$dropdown.append(t.buildSubBtn('tableDeleteColumn'));
|
|||
|
|
$dropdown.append(t.buildSubBtn('tableDestroy'));
|
|||
|
|
} else {
|
|||
|
|
var tableSelect = $('<table></table>');
|
|||
|
|
for (var i = 0; i < t.o.plugins.table.rows; i += 1) {
|
|||
|
|
var row = $('<tr></tr>').appendTo(tableSelect);
|
|||
|
|
for (var j = 0; j < t.o.plugins.table.columns; j += 1) {
|
|||
|
|
$('<td></td>').appendTo(row);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
tableSelect.find('td').on('mouseover', tableAnimate);
|
|||
|
|
tableSelect.find('td').on('mousedown', tableBuild);
|
|||
|
|
|
|||
|
|
$dropdown.append(tableSelect);
|
|||
|
|
$dropdown.append($('<center>1x1</center>'));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
t.dropdown(btnName);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var tableAnimate = function(column_event) {
|
|||
|
|
var column = $(column_event.target),
|
|||
|
|
table = column.parents('table'),
|
|||
|
|
colIndex = this.cellIndex,
|
|||
|
|
rowIndex = this.parentNode.rowIndex;
|
|||
|
|
|
|||
|
|
// reset all columns
|
|||
|
|
table.find('td').removeClass('active');
|
|||
|
|
|
|||
|
|
for (var i = 0; i <= rowIndex; i += 1) {
|
|||
|
|
for (var j = 0; j <= colIndex; j += 1) {
|
|||
|
|
table.find("tr:nth-of-type("+(i+1)+")").find("td:nth-of-type("+(j+1)+")").addClass('active');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// set label
|
|||
|
|
table.next('center').html((colIndex+1) + "x" + (rowIndex+1));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var tableBuild = function(column_event) {
|
|||
|
|
t.saveRange();
|
|||
|
|
|
|||
|
|
var tabler = $('<table></table>');
|
|||
|
|
if (t.o.plugins.table.styler) {
|
|||
|
|
tabler.attr('class', t.o.plugins.table.styler);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var column = $(column_event.target),
|
|||
|
|
colIndex = this.cellIndex,
|
|||
|
|
rowIndex = this.parentNode.rowIndex;
|
|||
|
|
|
|||
|
|
for (var i = 0; i <= rowIndex; i += 1) {
|
|||
|
|
var row = $('<tr></tr>').appendTo(tabler);
|
|||
|
|
for (var j = 0; j <= colIndex; j += 1) {
|
|||
|
|
$('<td></td>').appendTo(row);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
t.range.deleteContents();
|
|||
|
|
t.range.insertNode(tabler[0]);
|
|||
|
|
t.$c.trigger('tbwchange');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var addRow = {
|
|||
|
|
title: t.lang['tableAddRow'],
|
|||
|
|
text: t.lang['tableAddRow'],
|
|||
|
|
ico: 'row-below',
|
|||
|
|
|
|||
|
|
fn: function () {
|
|||
|
|
t.saveRange();
|
|||
|
|
|
|||
|
|
var node = t.doc.getSelection().focusNode;
|
|||
|
|
var table = $(node).closest('table');
|
|||
|
|
|
|||
|
|
if(table.length > 0) {
|
|||
|
|
var row = $('<tr></tr>');
|
|||
|
|
// add columns according to current columns count
|
|||
|
|
for (var i = 0; i < table.find('tr')[0].childElementCount; i += 1) {
|
|||
|
|
$('<td></td>').appendTo(row);
|
|||
|
|
}
|
|||
|
|
// add row to table
|
|||
|
|
row.appendTo(table);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var addColumn = {
|
|||
|
|
title: t.lang['tableAddColumn'],
|
|||
|
|
text: t.lang['tableAddColumn'],
|
|||
|
|
ico: 'col-right',
|
|||
|
|
|
|||
|
|
fn: function () {
|
|||
|
|
t.saveRange();
|
|||
|
|
|
|||
|
|
var node = t.doc.getSelection().focusNode;
|
|||
|
|
var table = $(node).closest('table');
|
|||
|
|
|
|||
|
|
if(table.length > 0) {
|
|||
|
|
$(table).find('tr').each(function() {
|
|||
|
|
$(this).find('td:last').after('<td></td>');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var destroy = {
|
|||
|
|
title: t.lang['tableDestroy'],
|
|||
|
|
text: t.lang['tableDestroy'],
|
|||
|
|
ico: 'table-delete',
|
|||
|
|
|
|||
|
|
fn: function () {
|
|||
|
|
t.saveRange();
|
|||
|
|
|
|||
|
|
var node = t.doc.getSelection().focusNode,
|
|||
|
|
table = $(node).closest('table');
|
|||
|
|
|
|||
|
|
table.remove();
|
|||
|
|
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var deleteRow = {
|
|||
|
|
title: t.lang['tableDeleteRow'],
|
|||
|
|
text: t.lang['tableDeleteRow'],
|
|||
|
|
ico: 'row-delete',
|
|||
|
|
|
|||
|
|
fn: function () {
|
|||
|
|
t.saveRange();
|
|||
|
|
|
|||
|
|
var node = t.doc.getSelection().focusNode,
|
|||
|
|
row = $(node).closest('tr');
|
|||
|
|
|
|||
|
|
row.remove();
|
|||
|
|
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var deleteColumn = {
|
|||
|
|
title: t.lang['tableDeleteColumn'],
|
|||
|
|
text: t.lang['tableDeleteColumn'],
|
|||
|
|
ico: 'col-delete',
|
|||
|
|
|
|||
|
|
fn: function () {
|
|||
|
|
t.saveRange();
|
|||
|
|
|
|||
|
|
var node = t.doc.getSelection().focusNode,
|
|||
|
|
table = $(node).closest('table'),
|
|||
|
|
td = $(node).closest('td'),
|
|||
|
|
cellIndex = td.index();
|
|||
|
|
|
|||
|
|
$(table).find('tr').each(function() {
|
|||
|
|
$(this).find('td:eq('+cellIndex+')').remove();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
t.addBtnDef('table', buildButtonDef);
|
|||
|
|
t.addBtnDef('tableAddRow', addRow);
|
|||
|
|
t.addBtnDef('tableAddColumn', addColumn);
|
|||
|
|
t.addBtnDef('tableDeleteRow', deleteRow);
|
|||
|
|
t.addBtnDef('tableDeleteColumn', deleteColumn);
|
|||
|
|
t.addBtnDef('tableDestroy', destroy);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
})(jQuery);
|