trumbowyg.table.js 11 KB

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