File modules/editor/trumbowyg/plugins/table/trumbowyg.table.js

Last commit: Tue Aug 28 00:33:27 2018 +0200	Jan Dankert	Editoren für Markdown (SimpleMDE) und HTML (Trumbowyg) installiert.


     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);



Download modules/editor/trumbowyg/plugins/table/trumbowyg.table.js


History
Tue, 28 Aug 2018 00:33:27 +0200	Jan Dankert	Editoren für Markdown (SimpleMDE) und HTML (Trumbowyg) installiert.