98 lines
3.9 KiB
JavaScript
98 lines
3.9 KiB
JavaScript
|
(function($){
|
||
|
|
$(function(){
|
||
|
|
$('body').on('grav-editor-ready', function() {
|
||
|
|
var Instance = Grav.default.Forms.Fields.EditorField.Instance;
|
||
|
|
Instance.addButton({
|
||
|
|
table: {
|
||
|
|
identifier: 'table',
|
||
|
|
title: 'Table',
|
||
|
|
label: '<i class="fa fa-fw fa-table"></i>',
|
||
|
|
modes: ['gfm', 'markdown'],
|
||
|
|
action: function(_ref) {
|
||
|
|
var codemirror = _ref.codemirror, button = _ref.button, textarea = _ref.textarea, $allSquares;
|
||
|
|
|
||
|
|
button.on('click.editor.table', function() {
|
||
|
|
if ($('#grid-chooser').is(':visible')) {
|
||
|
|
$('#grid-chooser').remove();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Credit: http://jsfiddle.net/tnn3qgvj/8/
|
||
|
|
var rows = 5;
|
||
|
|
var cols = 5;
|
||
|
|
|
||
|
|
var grid = '<div class="grid" id="grid-chooser">';
|
||
|
|
for (var i = 0; i < rows; i++) {
|
||
|
|
grid += '<div class="row">';
|
||
|
|
for (var c = 0; c < cols; c++) {
|
||
|
|
grid += '<div class="square"><div class="inner"></div></div>';
|
||
|
|
}
|
||
|
|
grid += '</div>';
|
||
|
|
}
|
||
|
|
grid += '</div>';
|
||
|
|
|
||
|
|
var $grid = button.append($(grid));
|
||
|
|
|
||
|
|
$allSquares = $('.square');
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
button.on('mouseover', '.square', function () {
|
||
|
|
var $this = $(this);
|
||
|
|
var col = $this.index() + 1;
|
||
|
|
var row = $this.parent().index() + 1;
|
||
|
|
$allSquares.removeClass('highlight');
|
||
|
|
$('.row:nth-child(-n+'+row+') .square:nth-child(-n+'+col+')')
|
||
|
|
.addClass('highlight');
|
||
|
|
});
|
||
|
|
|
||
|
|
button.on('click', '.square', function () {
|
||
|
|
var $this = $(this);
|
||
|
|
var cols = $this.index() + 1;
|
||
|
|
var rows = $this.parent().index() + 1;
|
||
|
|
$('#grid-chooser').remove();
|
||
|
|
|
||
|
|
//Generate the markdown text to insert
|
||
|
|
var text = '';
|
||
|
|
|
||
|
|
var i = 0;
|
||
|
|
var j = 0;
|
||
|
|
|
||
|
|
while (i < cols) {
|
||
|
|
text += '| Column ' + (i + 1) + ' Title ';
|
||
|
|
i++;
|
||
|
|
}
|
||
|
|
|
||
|
|
text += '|' + '\n';
|
||
|
|
|
||
|
|
i = 0;
|
||
|
|
while (i < cols) {
|
||
|
|
text += '| :----- ';
|
||
|
|
i++;
|
||
|
|
}
|
||
|
|
|
||
|
|
text += '|' + '\n';
|
||
|
|
|
||
|
|
i = 0;
|
||
|
|
while (i < rows) {
|
||
|
|
j = 0;
|
||
|
|
while (j < cols) {
|
||
|
|
text += '| Column ' + (j + 1) + ' Item ' + (i + 1) + ' ';
|
||
|
|
j++;
|
||
|
|
}
|
||
|
|
i++;
|
||
|
|
|
||
|
|
text += '|' + '\n';
|
||
|
|
}
|
||
|
|
Instance.buttonStrategies.replaceLine({ token: '$1', template: text, codemirror: codemirror });
|
||
|
|
button.trigger('click.editor.table');
|
||
|
|
codemirror.focus();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
})(jQuery);
|