trumbowyg.table.js (10837B)
1 /* =========================================================== 2 * trumbowyg.table.custom.js v2.0 3 * Table plugin for Trumbowyg 4 * http://alex-d.github.com/Trumbowyg 5 * =========================================================== 6 * Author : Sven Dunemann [dunemann@forelabs.eu] 7 */ 8 9 (function ($) { 10 'use strict'; 11 12 var defaultOptions = { 13 rows: 8, 14 columns: 8, 15 styler: 'table' 16 }; 17 18 $.extend(true, $.trumbowyg, { 19 langs: { 20 en: { 21 table: 'Insert table', 22 tableAddRow: 'Add row', 23 tableAddColumn: 'Add column', 24 tableDeleteRow: 'Delete row', 25 tableDeleteColumn: 'Delete column', 26 tableDestroy: 'Delete table', 27 error: 'Error' 28 }, 29 de: { 30 table: 'Tabelle einfügen', 31 tableAddRow: 'Zeile hinzufügen', 32 tableAddColumn: 'Spalte hinzufügen', 33 tableDeleteRow: 'Zeile löschen', 34 tableDeleteColumn: 'Spalte löschen', 35 tableDestroy: 'Tabelle löschen', 36 error: 'Error' 37 }, 38 sk: { 39 table: 'Vytvoriť tabuľky', 40 tableAddRow: 'Pridať riadok', 41 tableAddColumn: 'Pridať stĺpec', 42 error: 'Chyba' 43 }, 44 fr: { 45 table: 'Insérer un tableau', 46 tableAddRow: 'Ajouter des lignes', 47 tableAddColumn: 'Ajouter des colonnes', 48 error: 'Erreur' 49 }, 50 cs: { 51 table: 'Vytvořit příkaz Table', 52 tableAddRow: 'Přidat řádek', 53 tableAddColumn: 'Přidat sloupec', 54 error: 'Chyba' 55 }, 56 ru: { 57 table: 'Вставить таблицу', 58 tableAddRow: 'Добавить строки', 59 tableAddColumn: 'Добавить столбцы', 60 error: 'Ошибка' 61 }, 62 ja: { 63 table: '表の挿入', 64 tableAddRow: '行の追加', 65 tableAddColumn: '列の追加', 66 error: 'エラー' 67 }, 68 tr: { 69 table: 'Tablo ekle', 70 tableAddRow: 'Satır ekle', 71 tableAddColumn: 'Kolon ekle', 72 error: 'Hata' 73 } 74 }, 75 76 plugins: { 77 table: { 78 init: function (t) { 79 t.o.plugins.table = $.extend(true, {}, defaultOptions, t.o.plugins.table || {}); 80 81 var buildButtonDef = { 82 fn: function () { 83 t.saveRange(); 84 85 var btnName = 'table'; 86 87 var dropdownPrefix = t.o.prefix + 'dropdown', 88 dropdownOptions = { // the dropdown 89 class: dropdownPrefix + '-' + btnName + ' ' + dropdownPrefix + ' ' + t.o.prefix + 'fixed-top' 90 }; 91 dropdownOptions['data-' + dropdownPrefix] = btnName; 92 var $dropdown = $('<div/>', dropdownOptions); 93 94 if (t.$box.find("." + dropdownPrefix + "-" + btnName).length === 0) { 95 t.$box.append($dropdown.hide()); 96 } else { 97 $dropdown = t.$box.find("." + dropdownPrefix + "-" + btnName); 98 } 99 100 // clear dropdown 101 $dropdown.html(''); 102 103 // when active table show AddRow / AddColumn 104 if (t.$box.find("." + t.o.prefix + "table-button").hasClass(t.o.prefix + 'active-button')) { 105 $dropdown.append(t.buildSubBtn('tableAddRow')); 106 $dropdown.append(t.buildSubBtn('tableAddColumn')); 107 $dropdown.append(t.buildSubBtn('tableDeleteRow')); 108 $dropdown.append(t.buildSubBtn('tableDeleteColumn')); 109 $dropdown.append(t.buildSubBtn('tableDestroy')); 110 } else { 111 var tableSelect = $('<table></table>'); 112 for (var i = 0; i < t.o.plugins.table.rows; i += 1) { 113 var row = $('<tr></tr>').appendTo(tableSelect); 114 for (var j = 0; j < t.o.plugins.table.columns; j += 1) { 115 $('<td></td>').appendTo(row); 116 } 117 } 118 tableSelect.find('td').on('mouseover', tableAnimate); 119 tableSelect.find('td').on('mousedown', tableBuild); 120 121 $dropdown.append(tableSelect); 122 $dropdown.append($('<center>1x1</center>')); 123 } 124 125 t.dropdown(btnName); 126 } 127 }; 128 129 var tableAnimate = function(column_event) { 130 var column = $(column_event.target), 131 table = column.parents('table'), 132 colIndex = this.cellIndex, 133 rowIndex = this.parentNode.rowIndex; 134 135 // reset all columns 136 table.find('td').removeClass('active'); 137 138 for (var i = 0; i <= rowIndex; i += 1) { 139 for (var j = 0; j <= colIndex; j += 1) { 140 table.find("tr:nth-of-type("+(i+1)+")").find("td:nth-of-type("+(j+1)+")").addClass('active'); 141 } 142 } 143 144 // set label 145 table.next('center').html((colIndex+1) + "x" + (rowIndex+1)); 146 }; 147 148 var tableBuild = function(column_event) { 149 t.saveRange(); 150 151 var tabler = $('<table></table>'); 152 if (t.o.plugins.table.styler) { 153 tabler.attr('class', t.o.plugins.table.styler); 154 } 155 156 var column = $(column_event.target), 157 colIndex = this.cellIndex, 158 rowIndex = this.parentNode.rowIndex; 159 160 for (var i = 0; i <= rowIndex; i += 1) { 161 var row = $('<tr></tr>').appendTo(tabler); 162 for (var j = 0; j <= colIndex; j += 1) { 163 $('<td></td>').appendTo(row); 164 } 165 } 166 167 t.range.deleteContents(); 168 t.range.insertNode(tabler[0]); 169 t.$c.trigger('tbwchange'); 170 }; 171 172 var addRow = { 173 title: t.lang['tableAddRow'], 174 text: t.lang['tableAddRow'], 175 ico: 'row-below', 176 177 fn: function () { 178 t.saveRange(); 179 180 var node = t.doc.getSelection().focusNode; 181 var table = $(node).closest('table'); 182 183 if(table.length > 0) { 184 var row = $('<tr></tr>'); 185 // add columns according to current columns count 186 for (var i = 0; i < table.find('tr')[0].childElementCount; i += 1) { 187 $('<td></td>').appendTo(row); 188 } 189 // add row to table 190 row.appendTo(table); 191 } 192 193 return true; 194 } 195 }; 196 197 var addColumn = { 198 title: t.lang['tableAddColumn'], 199 text: t.lang['tableAddColumn'], 200 ico: 'col-right', 201 202 fn: function () { 203 t.saveRange(); 204 205 var node = t.doc.getSelection().focusNode; 206 var table = $(node).closest('table'); 207 208 if(table.length > 0) { 209 $(table).find('tr').each(function() { 210 $(this).find('td:last').after('<td></td>'); 211 }); 212 } 213 214 return true; 215 } 216 }; 217 218 var destroy = { 219 title: t.lang['tableDestroy'], 220 text: t.lang['tableDestroy'], 221 ico: 'table-delete', 222 223 fn: function () { 224 t.saveRange(); 225 226 var node = t.doc.getSelection().focusNode, 227 table = $(node).closest('table'); 228 229 table.remove(); 230 231 return true; 232 } 233 }; 234 235 var deleteRow = { 236 title: t.lang['tableDeleteRow'], 237 text: t.lang['tableDeleteRow'], 238 ico: 'row-delete', 239 240 fn: function () { 241 t.saveRange(); 242 243 var node = t.doc.getSelection().focusNode, 244 row = $(node).closest('tr'); 245 246 row.remove(); 247 248 return true; 249 } 250 }; 251 252 var deleteColumn = { 253 title: t.lang['tableDeleteColumn'], 254 text: t.lang['tableDeleteColumn'], 255 ico: 'col-delete', 256 257 fn: function () { 258 t.saveRange(); 259 260 var node = t.doc.getSelection().focusNode, 261 table = $(node).closest('table'), 262 td = $(node).closest('td'), 263 cellIndex = td.index(); 264 265 $(table).find('tr').each(function() { 266 $(this).find('td:eq('+cellIndex+')').remove(); 267 }); 268 269 return true; 270 } 271 }; 272 273 t.addBtnDef('table', buildButtonDef); 274 t.addBtnDef('tableAddRow', addRow); 275 t.addBtnDef('tableAddColumn', addColumn); 276 t.addBtnDef('tableDeleteRow', deleteRow); 277 t.addBtnDef('tableDeleteColumn', deleteColumn); 278 t.addBtnDef('tableDestroy', destroy); 279 } 280 } 281 } 282 }); 283 })(jQuery);