1/* TXT2TAGS TABLES
2 *
3 * include this just before the </body> tag, at the end of
4 * your template main.php file, like this:
5 *
6 *    <script src="lib/plugins/txt2tags/tables.js" type="text/javascript"></script>
7 *
8 * Based on Starter Bootstrap Dokuwiki Template
9 * by Cameron Little](http://camlittle.com)
10*/
11
12jQNew(document).ready(function() {
13    jQNew('.ui-dialog-titlebar-close').click(function() {
14        jQNew('.ui-dialog').hide();
15    });
16
17    jQNew('.sidebar-page ul .li').each(function() {
18        var $that = jQNew(this);
19        if ($that.parent().find('ul').length > 0) {
20            $that.prepend('<span class="glyphicon glyphicon-chevron-down pull-right"></span>');
21        }
22    });
23
24    jQNew('.sidebar-page ul .li').click(function() {
25        jQNew(this).parent().find('ul').first().slideToggle(300);
26    });
27
28    jQNew('#toc_contents ul > li:first-child').each(function(e) {
29        if (jQNew(this).children(':first').filter('ul').length > 0) {
30            jQNew(this).css('list-style-type', 'none');
31        }
32    });
33
34    jQNew('abbr').tooltip({
35        delay: { open: 500, close: 100 }
36    });
37
38    /* http://www.kryogenix.org/code/browser/sorttable/ */
39    jQNew('#dokuwiki__content .page table').each(function() {
40        sorttable.makeSortable(jQNew(this).get(0));
41    });
42});
43
44/* toolbar button to add a table */
45function addBtnActionInsertTable($btn, props, edid) {
46    // set up what happens when the button is clicked
47    $btn.click(function() {
48        // create a new element on the page.
49        var $picker = jQNew(document.createElement('div'));
50        $picker.addClass('modal fade');
51        $picker.attr('role', 'dialog')
52               .attr('aria-hidden', 'true')
53               .attr('aria-labelledby', 'Insert Table Modal Box')
54               .attr('id', 'insert-table-popup')
55               .css('position', 'absolute');
56
57        // set up the content of the element
58        var html = '<div class="modal-dialog">' +
59                    '<div class="modal-content">' +
60                     '<div class="modal-header">' +
61                      '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
62                      '<h3 class="modal-title">Insert table markup</h3>' +
63                     '</div>' +
64                     '<div class="modal-body">' +
65                      '<form class="form-horizontal">' +
66                       '<div class="form-group">' +
67                        '<label class="control-label col-lg-6" for="hrows">Header rows</label>' +
68                        '<div class="col-lg-2">' +
69                         '<input class="form-control" type="number" id="hrows" value=1 min=0 step=1>' +
70                        '</div>' +
71                       '</div>' +
72                       '<div class="form-group">' +
73                        '<label class="control-label col-lg-6" for="hcols">Header columns</label>' +
74                        '<div class="col-lg-2">' +
75                         '<input class="form-control" type="number" id="hcols" value=0 min=0 step=1>' +
76                        '</div>' +
77                       '</div>' +
78                       '<div class="form-group">' +
79                        '<label class="control-label col-lg-6" for="rows">Body Rows</label>' +
80                        '<div class="col-lg-2">' +
81                         '<input class="form-control" type="number" id="rows" value=3 min=0 step=1>' +
82                        '</div>' +
83                       '</div>' +
84                       '<div class="form-group">' +
85                        '<label class="control-label col-lg-6" for="cols">Body Columns</label>' +
86                        '<div class="col-lg-2">' +
87                         '<input class="form-control" type="number" id="cols" value=3 min=0 step=1>' +
88                        '</div>' +
89                       '</div>' +
90                      '</form>' +
91                      '<div class="preview">' +
92                       '<h4>Preview</h4>' +
93                       '<table class="table table-bordered">' +
94                       '</table>' +
95                      '</div>' +
96                      '<div class="markup">' +
97                       '<h4>Markup</h4>' +
98                       '<pre>' +
99                       '</pre>' +
100                      '</div>' +
101                     '</div>' +
102                     '<div class="modal-footer">' +
103                      '<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
104                      '<button type="button" class="btn btn-primary">Insert</button>' +
105                     '</div>' +
106                    '</div>' +
107                   '</div>';
108
109        // the ultimate action of the new button
110        function tableInsert($picker) {
111            // get the size of the table
112            var tabletext = "\n";
113            hrows = $picker.find('#hrows').val();
114            hcols = $picker.find('#hcols').val();
115            rows = $picker.find('#rows').val();
116            cols = $picker.find('#cols').val();
117
118            // make sure the table has cells
119            if (hrows + rows < 1) {
120                alert("You need more than 0 rows.");
121                return false;
122            } else if (hcols + cols < 1) {
123                alert("You need more than 0 columns.");
124                return false;
125            }
126
127            // create header rows
128            for (var i = 0; i < hrows; i++) {
129				tabletext = "|" + tabletext;
130				tabletext = tabletext.replace(/(\r\n|\n|\r)/gm,"");
131                for (var j = 0; j < parseInt(hcols) + parseInt(cols); j++) {
132                    tabletext += "|  ";
133                }
134                tabletext += "|\n";
135            }
136            // create body rows
137            for (var i = 0; i < rows; i++) {
138                // create header columns
139                for (var j = 0; j < hcols; j++) {
140                    tabletext += "|  ";
141                }
142                // create body columns
143                for (var j = 0; j < cols; j++) {
144                    tabletext += "|  ";
145                }
146                tabletext += "|\n";
147            }
148
149            // insert the table into the page
150            insertAtCarret(edid, tabletext + '\n');
151
152            // hide and remove the element
153            $picker.modal('hide');
154        }
155
156        function updatePreview() {
157            var $table = $preview.find('table').html('');
158            var $markup = $picker.find('pre').text('');
159
160            var tablehtml = '';
161            var tabletext = "";
162
163            // make sure the table has cells
164            if (hrows + rows < 1) {
165                return false;
166            } else if (hcols + cols < 1) {
167                return false;
168            }
169
170            // create header rows
171            for (var i = 0; i < hrows; i++) {
172                tablehtml += '<tr>';
173                tabletext += "|";
174                for (var j = 0; j < parseInt(hcols) + parseInt(cols); j++) {
175                    tablehtml += "<th></th>";
176                    tabletext += "| Header ";
177                }
178                tablehtml += "</tr>\n";
179                tabletext += "|\n";
180            }
181            // create body rows
182            for (var i = 0; i < rows; i++) {
183                tablehtml += '<tr>'
184                // create header columns
185                for (var j = 0; j < hcols; j++) {
186                    tablehtml += "<th></th>";
187                    tabletext += "| Header ";
188                }
189                // create body columns
190                for (var j = 0; j < cols; j++) {
191                    tablehtml += "<td></td>";
192                    tabletext += "| content ";
193                }
194                tablehtml += "</tr>\n";
195                tabletext += "|\n";
196            }
197
198            $table.html(tablehtml);
199            $markup.text(tabletext);
200        }
201
202        // add the content to the element and insert it into the page
203        $picker.append(html);
204        jQNew('body').append($picker);
205
206        var hrows = $picker.find('#hrows').val();
207        var hcols = $picker.find('#hcols').val();
208        var rows = $picker.find('#rows').val();
209        var cols = $picker.find('#cols').val();
210        var $preview = jQNew('.preview');
211
212        // set up the insert table action
213        $picker.find('.btn-primary').bind('click', bind(tableInsert, $picker));
214
215        // set up handlers to show table preview
216        $picker.find('#hrows').on('propertychange keyup input paste', function(e) {
217            hrows = jQNew(this).val();
218            updatePreview();
219        });
220        $picker.find('#hcols').on('propertychange keyup input paste', function(e) {
221            hcols = jQNew(this).val();
222            updatePreview();
223        });
224        $picker.find('#rows').on('propertychange keyup input paste', function(e) {
225            rows = jQNew(this).val();
226            updatePreview();
227        });
228        $picker.find('#cols').on('propertychange keyup input paste', function(e) {
229            cols = jQNew(this).val();
230            updatePreview();
231        });
232
233        updatePreview();
234
235        $picker.on('hidden.bs.modal', function() {
236            $picker.remove();
237        });
238
239        // show the element as a modal window
240        $picker.modal('show');
241
242        return $picker[0];
243    });
244
245    return true;
246}
247// add a new toolbar button
248if (window.toolbar != undefined) {
249    window.toolbar[window.toolbar.length] = {
250        'type'  : 'InsertTable', // new type that links to the function
251        'title' : 'Insert Table',
252        'icon'  : '../../plugins/txt2tags/table.png'
253    };
254}
255jQNew('#toc_contents').slideToggle('slow');
256// index of contents dropdown menu on pages
257jQNew('#dw_toc .panel-heading').click(function() {
258    jQNew('#toc_contents').slideToggle('fast');
259});
260