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">×</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