trumbowyg.table.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430
  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. (function ($) {
  9. 'use strict';
  10. var defaultOptions = {
  11. rows: 8,
  12. columns: 8,
  13. styler: 'table'
  14. };
  15. $.extend(true, $.trumbowyg, {
  16. langs: {
  17. // jshint camelcase:false
  18. en: {
  19. table: 'Insert table',
  20. tableAddRow: 'Add row',
  21. tableAddRowAbove: 'Add row above',
  22. tableAddColumnLeft: 'Add column to the left',
  23. tableAddColumn: 'Add column to the right',
  24. tableDeleteRow: 'Delete row',
  25. tableDeleteColumn: 'Delete column',
  26. tableDestroy: 'Delete table',
  27. error: 'Error'
  28. },
  29. cs: {
  30. table: 'Vytvořit příkaz Table',
  31. tableAddRow: 'Přidat řádek',
  32. tableAddRowAbove: 'Přidat řádek',
  33. tableAddColumnLeft: 'Přidat sloupec',
  34. tableAddColumn: 'Přidat sloupec',
  35. error: 'Chyba'
  36. },
  37. da: {
  38. table: 'Indsæt tabel',
  39. tableAddRow: 'Tilføj række',
  40. tableAddRowAbove: 'Tilføj række',
  41. tableAddColumnLeft: 'Tilføj kolonne',
  42. tableAddColumn: 'Tilføj kolonne',
  43. tableDeleteRow: 'Slet række',
  44. tableDeleteColumn: 'Slet kolonne',
  45. tableDestroy: 'Slet tabel',
  46. error: 'Fejl'
  47. },
  48. de: {
  49. table: 'Tabelle einfügen',
  50. tableAddRow: 'Zeile hinzufügen',
  51. tableAddRowAbove: 'Zeile hinzufügen',
  52. tableAddColumnLeft: 'Spalte hinzufügen',
  53. tableAddColumn: 'Spalte hinzufügen',
  54. tableDeleteRow: 'Zeile löschen',
  55. tableDeleteColumn: 'Spalte löschen',
  56. tableDestroy: 'Tabelle löschen',
  57. error: 'Error'
  58. },
  59. fr: {
  60. table: 'Insérer un tableau',
  61. tableAddRow: 'Ajouter des lignes',
  62. tableAddRowAbove: 'Ajouter des lignes',
  63. tableAddColumnLeft: 'Ajouter des colonnes',
  64. tableAddColumn: 'Ajouter des colonnes',
  65. tableDeleteRow: 'Effacer la ligne',
  66. tableDeleteColumn: 'Effacer la colonne',
  67. tableDestroy: 'Effacer le tableau',
  68. error: 'Erreur'
  69. },
  70. hu: {
  71. table: 'Táblázat beszúrás',
  72. tableAddRow: 'Sor hozzáadás',
  73. tableAddRowAbove: 'Sor beszúrás fönt',
  74. tableAddColumnLeft: 'Sor beszúrás balra',
  75. tableAddColumn: 'Sor beszúrás jobbra',
  76. tableDeleteRow: 'Sor törlés',
  77. tableDeleteColumn: 'Oszlop törlés',
  78. tableDestroy: 'Táblázat törlés',
  79. error: 'Hiba'
  80. },
  81. id: {
  82. table: 'Sisipkan tabel',
  83. tableAddRow: 'Sisipkan baris',
  84. tableAddRowAbove: 'Sisipkan baris',
  85. tableAddColumnLeft: 'Sisipkan kolom',
  86. tableAddColumn: 'Sisipkan kolom',
  87. tableDeleteRow: 'Hapus baris',
  88. tableDeleteColumn: 'Hapus kolom',
  89. tableDestroy: 'Hapus tabel',
  90. error: 'Galat'
  91. },
  92. ja: {
  93. table: '表の挿入',
  94. tableAddRow: '行の追加',
  95. tableAddRowAbove: '行の追加',
  96. tableAddColumnLeft: '列の追加',
  97. tableAddColumn: '列の追加',
  98. error: 'エラー'
  99. },
  100. ko: {
  101. table: '표 넣기',
  102. tableAddRow: '줄 추가',
  103. tableAddRowAbove: '줄 추가',
  104. tableAddColumnLeft: '칸 추가',
  105. tableAddColumn: '칸 추가',
  106. tableDeleteRow: '줄 삭제',
  107. tableDeleteColumn: '칸 삭제',
  108. tableDestroy: '표 지우기',
  109. error: '에러'
  110. },
  111. pt_br: {
  112. table: 'Inserir tabela',
  113. tableAddRow: 'Adicionar linha',
  114. tableAddRowAbove: 'Adicionar linha',
  115. tableAddColumnLeft: 'Adicionar coluna',
  116. tableAddColumn: 'Adicionar coluna',
  117. tableDeleteRow: 'Deletar linha',
  118. tableDeleteColumn: 'Deletar coluna',
  119. tableDestroy: 'Deletar tabela',
  120. error: 'Erro'
  121. },
  122. ru: {
  123. table: 'Вставить таблицу',
  124. tableAddRow: 'Добавить строку',
  125. tableAddRowAbove: 'Добавить строку',
  126. tableAddColumnLeft: 'Добавить столбец',
  127. tableAddColumn: 'Добавить столбец',
  128. tableDeleteRow: 'Удалить строку',
  129. tableDeleteColumn: 'Удалить столбец',
  130. tableDestroy: 'Удалить таблицу',
  131. error: 'Ошибка'
  132. },
  133. sk: {
  134. table: 'Vytvoriť tabuľky',
  135. tableAddRow: 'Pridať riadok',
  136. tableAddRowAbove: 'Pridať riadok',
  137. tableAddColumnLeft: 'Pridať stĺpec',
  138. tableAddColumn: 'Pridať stĺpec',
  139. error: 'Chyba'
  140. },
  141. tr: {
  142. table: 'Tablo ekle',
  143. tableAddRow: 'Satır ekle',
  144. tableAddRowAbove: 'Satır ekle',
  145. tableAddColumnLeft: 'Kolon ekle',
  146. tableAddColumn: 'Kolon ekle',
  147. error: 'Hata'
  148. },
  149. zh_tw: {
  150. table: '插入表格',
  151. tableAddRow: '加入行',
  152. tableAddRowAbove: '加入行',
  153. tableAddColumnLeft: '加入列',
  154. tableAddColumn: '加入列',
  155. tableDeleteRow: '刪除行',
  156. tableDeleteColumn: '刪除列',
  157. tableDestroy: '刪除表格',
  158. error: '錯誤'
  159. },
  160. // jshint camelcase:true
  161. },
  162. plugins: {
  163. table: {
  164. init: function (t) {
  165. t.o.plugins.table = $.extend(true, {}, defaultOptions, t.o.plugins.table || {});
  166. var buildButtonDef = {
  167. fn: function () {
  168. t.saveRange();
  169. var btnName = 'table';
  170. var dropdownPrefix = t.o.prefix + 'dropdown',
  171. dropdownOptions = { // the dropdown
  172. class: dropdownPrefix + '-' + btnName + ' ' + dropdownPrefix + ' ' + t.o.prefix + 'fixed-top'
  173. };
  174. dropdownOptions['data-' + dropdownPrefix] = btnName;
  175. var $dropdown = $('<div/>', dropdownOptions);
  176. if (t.$box.find('.' + dropdownPrefix + '-' + btnName).length === 0) {
  177. t.$box.append($dropdown.hide());
  178. } else {
  179. $dropdown = t.$box.find('.' + dropdownPrefix + '-' + btnName);
  180. }
  181. // clear dropdown
  182. $dropdown.html('');
  183. // when active table show AddRow / AddColumn
  184. if (t.$box.find('.' + t.o.prefix + 'table-button').hasClass(t.o.prefix + 'active-button')) {
  185. $dropdown.append(t.buildSubBtn('tableAddRowAbove'));
  186. $dropdown.append(t.buildSubBtn('tableAddRow'));
  187. $dropdown.append(t.buildSubBtn('tableAddColumnLeft'));
  188. $dropdown.append(t.buildSubBtn('tableAddColumn'));
  189. $dropdown.append(t.buildSubBtn('tableDeleteRow'));
  190. $dropdown.append(t.buildSubBtn('tableDeleteColumn'));
  191. $dropdown.append(t.buildSubBtn('tableDestroy'));
  192. } else {
  193. var tableSelect = $('<table/>');
  194. $('<tbody/>').appendTo(tableSelect);
  195. for (var i = 0; i < t.o.plugins.table.rows; i += 1) {
  196. var row = $('<tr/>').appendTo(tableSelect);
  197. for (var j = 0; j < t.o.plugins.table.columns; j += 1) {
  198. $('<td/>').appendTo(row);
  199. }
  200. }
  201. tableSelect.find('td').on('mouseover', tableAnimate);
  202. tableSelect.find('td').on('mousedown', tableBuild);
  203. $dropdown.append(tableSelect);
  204. $dropdown.append($('<div class="trumbowyg-table-size">1x1</div>'));
  205. }
  206. t.dropdown(btnName);
  207. }
  208. };
  209. var tableAnimate = function(columnEvent) {
  210. var column = $(columnEvent.target),
  211. table = column.closest('table'),
  212. colIndex = this.cellIndex,
  213. rowIndex = this.parentNode.rowIndex;
  214. // reset all columns
  215. table.find('td').removeClass('active');
  216. for (var i = 0; i <= rowIndex; i += 1) {
  217. for (var j = 0; j <= colIndex; j += 1) {
  218. table.find('tr:nth-of-type('+(i+1)+')').find('td:nth-of-type('+(j+1)+')').addClass('active');
  219. }
  220. }
  221. // set label
  222. table.next('.trumbowyg-table-size').html((colIndex+1) + 'x' + (rowIndex+1));
  223. };
  224. var tableBuild = function() {
  225. t.saveRange();
  226. var tabler = $('<table/>');
  227. $('<tbody/>').appendTo(tabler);
  228. if (t.o.plugins.table.styler) {
  229. tabler.attr('class', t.o.plugins.table.styler);
  230. }
  231. var colIndex = this.cellIndex,
  232. rowIndex = this.parentNode.rowIndex;
  233. for (var i = 0; i <= rowIndex; i += 1) {
  234. var row = $('<tr></tr>').appendTo(tabler);
  235. for (var j = 0; j <= colIndex; j += 1) {
  236. $('<td/>').appendTo(row);
  237. }
  238. }
  239. t.range.deleteContents();
  240. t.range.insertNode(tabler[0]);
  241. t.$c.trigger('tbwchange');
  242. };
  243. var addRow = {
  244. title: t.lang.tableAddRow,
  245. text: t.lang.tableAddRow,
  246. ico: 'row-below',
  247. fn: function () {
  248. t.saveRange();
  249. var node = t.doc.getSelection().focusNode;
  250. var focusedRow = $(node).closest('tr');
  251. var table = $(node).closest('table');
  252. if(table.length > 0) {
  253. var row = $('<tr/>');
  254. // add columns according to current columns count
  255. for (var i = 0; i < table.find('tr')[0].childElementCount; i += 1) {
  256. $('<td/>').appendTo(row);
  257. }
  258. // add row to table
  259. focusedRow.after(row);
  260. }
  261. t.syncCode();
  262. }
  263. };
  264. var addRowAbove = {
  265. title: t.lang.tableAddRowAbove,
  266. text: t.lang.tableAddRowAbove,
  267. ico: 'row-above',
  268. fn: function () {
  269. t.saveRange();
  270. var node = t.doc.getSelection().focusNode;
  271. var focusedRow = $(node).closest('tr');
  272. var table = $(node).closest('table');
  273. if(table.length > 0) {
  274. var row = $('<tr/>');
  275. // add columns according to current columns count
  276. for (var i = 0; i < table.find('tr')[0].childElementCount; i += 1) {
  277. $('<td/>').appendTo(row);
  278. }
  279. // add row to table
  280. focusedRow.before(row);
  281. }
  282. t.syncCode();
  283. }
  284. };
  285. var addColumn = {
  286. title: t.lang.tableAddColumn,
  287. text: t.lang.tableAddColumn,
  288. ico: 'col-right',
  289. fn: function () {
  290. t.saveRange();
  291. var node = t.doc.getSelection().focusNode;
  292. var focusedCol = $(node).closest('td');
  293. var table = $(node).closest('table');
  294. var focusedColIdx = focusedCol.index();
  295. if(table.length > 0) {
  296. $(table).find('tr').each(function() {
  297. $($(this).children()[focusedColIdx]).after('<td></td>');
  298. });
  299. }
  300. t.syncCode();
  301. }
  302. };
  303. var addColumnLeft = {
  304. title: t.lang.tableAddColumnLeft,
  305. text: t.lang.tableAddColumnLeft,
  306. ico: 'col-left',
  307. fn: function () {
  308. t.saveRange();
  309. var node = t.doc.getSelection().focusNode;
  310. var focusedCol = $(node).closest('td');
  311. var table = $(node).closest('table');
  312. var focusedColIdx = focusedCol.index();
  313. if(table.length > 0) {
  314. $(table).find('tr').each(function() {
  315. $($(this).children()[focusedColIdx]).before('<td></td>');
  316. });
  317. }
  318. t.syncCode();
  319. }
  320. };
  321. var destroy = {
  322. title: t.lang.tableDestroy,
  323. text: t.lang.tableDestroy,
  324. ico: 'table-delete',
  325. fn: function () {
  326. t.saveRange();
  327. var node = t.doc.getSelection().focusNode,
  328. table = $(node).closest('table');
  329. table.remove();
  330. t.syncCode();
  331. }
  332. };
  333. var deleteRow = {
  334. title: t.lang.tableDeleteRow,
  335. text: t.lang.tableDeleteRow,
  336. ico: 'row-delete',
  337. fn: function () {
  338. t.saveRange();
  339. var node = t.doc.getSelection().focusNode,
  340. row = $(node).closest('tr');
  341. row.remove();
  342. t.syncCode();
  343. }
  344. };
  345. var deleteColumn = {
  346. title: t.lang.tableDeleteColumn,
  347. text: t.lang.tableDeleteColumn,
  348. ico: 'col-delete',
  349. fn: function () {
  350. t.saveRange();
  351. var node = t.doc.getSelection().focusNode,
  352. table = $(node).closest('table'),
  353. td = $(node).closest('td'),
  354. cellIndex = td.index();
  355. $(table).find('tr').each(function() {
  356. $(this).find('td:eq(' + cellIndex + ')').remove();
  357. });
  358. t.syncCode();
  359. }
  360. };
  361. t.addBtnDef('table', buildButtonDef);
  362. t.addBtnDef('tableAddRowAbove', addRowAbove);
  363. t.addBtnDef('tableAddRow', addRow);
  364. t.addBtnDef('tableAddColumnLeft', addColumnLeft);
  365. t.addBtnDef('tableAddColumn', addColumn);
  366. t.addBtnDef('tableDeleteRow', deleteRow);
  367. t.addBtnDef('tableDeleteColumn', deleteColumn);
  368. t.addBtnDef('tableDestroy', destroy);
  369. }
  370. }
  371. }
  372. });
  373. })(jQuery);