28 |
29 |
45 |
46 |
49 |
51 |
52 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/demo/sass/demo.scss:
--------------------------------------------------------------------------------
1 | ::selection {
2 | background: #a0ced9;
3 | color: #fff;
4 | }
5 |
6 | body {
7 | background-color: #fafafa;
8 | color: #333;
9 | font-family: 'Roboto', sans-serif;
10 | font-size: 16px;
11 | line-height: 1.6;
12 | }
13 |
14 | p {
15 | &:first-child {
16 | margin-top: 0;
17 | }
18 |
19 | &:last-child {
20 | margin-bottom: 0;
21 | }
22 | }
23 |
24 | h1 {
25 | margin-bottom: 60px;
26 | text-align: center;
27 | }
28 |
29 | .container {
30 | margin: 60px auto;
31 | width: 600px;
32 | }
33 |
34 | .editable {
35 | background-color: #fff;
36 | border: 1px solid #abf4b4;
37 | padding: 30px;
38 |
39 | &:focus {
40 | outline: none;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/dist/css/medium-editor-tables.css:
--------------------------------------------------------------------------------
1 | .medium-editor-table-builder {
2 | display: none;
3 | position: absolute;
4 | left: 0;
5 | top: 101%; }
6 | .medium-editor-table-builder * {
7 | box-sizing: border-box; }
8 |
9 | .medium-editor-table-builder-grid {
10 | border: 1px solid #000;
11 | border-radius: 3px;
12 | overflow: hidden; }
13 |
14 | .medium-editor-table-builder-cell {
15 | background-color: #333;
16 | border: 1px solid #000;
17 | display: block;
18 | float: left;
19 | height: 16px;
20 | margin: 0;
21 | width: 16px; }
22 | .medium-editor-table-builder-cell.active {
23 | background-color: #ccc; }
24 |
25 | .medium-editor-table-builder-cell:hover {
26 | background-color: #ccc; }
27 |
28 | .medium-editor-table {
29 | border-collapse: collapse;
30 | resize: both;
31 | table-layout: fixed; }
32 |
33 | .medium-editor-table,
34 | .medium-editor-table td {
35 | border: 1px dashed #e3e3e3; }
36 |
37 | .medium-editor-table-builder-toolbar {
38 | display: block;
39 | min-width: 162px;
40 | background-color: #333;
41 | font-size: 0.8em;
42 | color: white; }
43 | .medium-editor-table-builder-toolbar span {
44 | width: 45px;
45 | display: block;
46 | float: left;
47 | margin-left: 5px; }
48 | .medium-editor-table-builder-toolbar button {
49 | margin: 0 3px;
50 | background-color: #333;
51 | border: 0;
52 | width: 30px;
53 | cursor: pointer; }
54 | .medium-editor-table-builder-toolbar button i {
55 | color: white; }
56 |
--------------------------------------------------------------------------------
/dist/css/medium-editor-tables.min.css:
--------------------------------------------------------------------------------
1 | .medium-editor-table-builder{display:none;position:absolute;left:0;top:101%}.medium-editor-table-builder *{box-sizing:border-box}.medium-editor-table-builder-grid{border:1px solid #000;border-radius:3px;overflow:hidden}.medium-editor-table-builder-cell{background-color:#333;border:1px solid #000;display:block;float:left;height:16px;margin:0;width:16px}.medium-editor-table-builder-cell.active,.medium-editor-table-builder-cell:hover{background-color:#ccc}.medium-editor-table{border-collapse:collapse;resize:both;table-layout:fixed}.medium-editor-table,.medium-editor-table td{border:1px dashed #e3e3e3}.medium-editor-table-builder-toolbar{display:block;min-width:162px;background-color:#333;font-size:.8em;color:#fff}.medium-editor-table-builder-toolbar span{width:45px;display:block;float:left;margin-left:5px}.medium-editor-table-builder-toolbar button{margin:0 3px;background-color:#333;border:0;width:30px;cursor:pointer}.medium-editor-table-builder-toolbar button i{color:#fff}
--------------------------------------------------------------------------------
/dist/js/medium-editor-tables.js:
--------------------------------------------------------------------------------
1 | (function (root, factory) {
2 | 'use strict';
3 | var isElectron = typeof module === 'object' && process && process.versions && process.versions.electron;
4 | if (!isElectron && typeof module === 'object') {
5 | module.exports = factory;
6 | } else if (typeof define === 'function' && define.amd) {
7 | define(function() {
8 | return factory;
9 | });
10 | } else {
11 | root.MediumEditorTable = factory;
12 | }
13 | }(this, function (MediumEditor) {
14 |
15 | 'use strict';
16 |
17 | function extend(dest, source) {
18 | var prop;
19 | dest = dest || {};
20 | for (prop in source) {
21 | if (source.hasOwnProperty(prop) && !dest.hasOwnProperty(prop)) {
22 | dest[prop] = source[prop];
23 | }
24 | }
25 | return dest;
26 | }
27 |
28 | function getSelectionText(doc) {
29 | if (doc.getSelection) {
30 | return doc.getSelection().toString();
31 | }
32 | if (doc.selection && doc.selection.type !== 'Control') {
33 | return doc.selection.createRange().text;
34 | }
35 | return '';
36 | }
37 |
38 | function getSelectionStart(doc) {
39 | var node = doc.getSelection().anchorNode,
40 | startNode = (node && node.nodeType === 3 ? node.parentNode : node);
41 |
42 | return startNode;
43 | }
44 |
45 | function placeCaretAtNode(doc, node, before) {
46 | if (doc.getSelection !== undefined && node) {
47 | var range = doc.createRange(),
48 | selection = doc.getSelection();
49 |
50 | if (before) {
51 | range.setStartBefore(node);
52 | } else {
53 | range.setStartAfter(node);
54 | }
55 |
56 | range.collapse(true);
57 |
58 | selection.removeAllRanges();
59 | selection.addRange(range);
60 | }
61 | }
62 |
63 | function isInsideElementOfTag(node, tag) {
64 | if (!node) {
65 | return false;
66 | }
67 |
68 | var parentNode = node.parentNode,
69 | tagName = parentNode.tagName.toLowerCase();
70 |
71 | while (tagName !== 'body') {
72 | if (tagName === tag) {
73 | return true;
74 | }
75 | parentNode = parentNode.parentNode;
76 |
77 | if (parentNode && parentNode.tagName) {
78 | tagName = parentNode.tagName.toLowerCase();
79 | } else {
80 | return false;
81 | }
82 | }
83 |
84 | return false;
85 | }
86 |
87 | function getParentOf(el, tagTarget) {
88 | var tagName = el && el.tagName ? el.tagName.toLowerCase() : false;
89 |
90 | if (!tagName) {
91 | return false;
92 | }
93 | while (tagName && tagName !== 'body') {
94 | if (tagName === tagTarget) {
95 | return el;
96 | }
97 | el = el.parentNode;
98 | tagName = el && el.tagName ? el.tagName.toLowerCase() : false;
99 | }
100 | }
101 |
102 | function Grid(el, callback, rows, columns) {
103 | return this.init(el, callback, rows, columns);
104 | }
105 |
106 | Grid.prototype = {
107 | init: function (el, callback, rows, columns) {
108 | this._root = el;
109 | this._callback = callback;
110 | this.rows = rows;
111 | this.columns = columns;
112 | return this._render();
113 | },
114 |
115 | setCurrentCell: function (cell) {
116 | this._currentCell = cell;
117 | },
118 |
119 | markCells: function () {
120 | [].forEach.call(this._cellsElements, function (el) {
121 | var cell = {
122 | column: parseInt(el.dataset.column, 10),
123 | row: parseInt(el.dataset.row, 10)
124 | },
125 | active = this._currentCell &&
126 | cell.row <= this._currentCell.row &&
127 | cell.column <= this._currentCell.column;
128 |
129 | if (active === true) {
130 | el.classList.add('active');
131 | } else {
132 | el.classList.remove('active');
133 | }
134 | }.bind(this));
135 | },
136 |
137 | _generateCells: function () {
138 | var row = -1;
139 |
140 | this._cells = [];
141 |
142 | for (var i = 0; i < this.rows * this.columns; i++) {
143 | var column = i % this.columns;
144 |
145 | if (column === 0) {
146 | row++;
147 | }
148 |
149 | this._cells.push({
150 | column: column,
151 | row: row,
152 | active: false
153 | });
154 | }
155 | },
156 |
157 | _html: function () {
158 | var width = this.columns * COLUMN_WIDTH + BORDER_WIDTH * 2,
159 | height = this.rows * COLUMN_WIDTH + BORDER_WIDTH * 2,
160 | html = 'MediumEditor Tables
30 |
31 |
44 | 32 | He always thought of the sea as 'la mar' which is what people call 33 | her in Spanish when they love her. Sometimes those who love her say 34 | bad things of her but they are always said as though she were a woman. 35 | Some of the younger fishermen, those who used buoys as floats for their 36 | lines and had motorboats, bought when the shark livers had brought much 37 | money, spoke of her as 'el mar' which is masculine.They spoke of her as 38 | a contestant or a place or even an enemy. But the old man always thought 39 | of her as feminine and as something that gave or withheld great favours, 40 | and if she did wild or wicked things it was because she could not help 41 | them. The moon affects her as it does a woman, he thought. 42 |
43 |';
161 | html += this._cellsHTML();
162 | html += '
';
163 | return html;
164 | },
165 |
166 | _cellsHTML: function () {
167 | var html = '';
168 | this._generateCells();
169 | this._cells.map(function (cell) {
170 | html += '';
174 | html += '';
175 | });
176 | return html;
177 | },
178 |
179 | _render: function () {
180 | this._root.innerHTML = this._html();
181 | this._cellsElements = this._root.querySelectorAll('a');
182 | this._bindEvents();
183 | },
184 |
185 | _bindEvents: function () {
186 | [].forEach.call(this._cellsElements, function (el) {
187 | this._onMouseEnter(el);
188 | this._onClick(el);
189 | }.bind(this));
190 | },
191 |
192 | _onMouseEnter: function (el) {
193 | var self = this,
194 | timer;
195 |
196 | el.addEventListener('mouseenter', function () {
197 | clearTimeout(timer);
198 |
199 | var dataset = this.dataset;
200 |
201 | timer = setTimeout(function () {
202 | self._currentCell = {
203 | column: parseInt(dataset.column, 10),
204 | row: parseInt(dataset.row, 10)
205 | };
206 | self.markCells();
207 | }, 50);
208 | });
209 | },
210 |
211 | _onClick: function (el) {
212 | var self = this;
213 | el.addEventListener('click', function (e) {
214 | e.preventDefault();
215 | self._callback(this.dataset.row, this.dataset.column);
216 | });
217 | }
218 | };
219 |
220 | function Builder(options) {
221 | return this.init(options);
222 | }
223 |
224 | Builder.prototype = {
225 | init: function (options) {
226 | this.options = options;
227 | this._doc = options.ownerDocument || document;
228 | this._root = this._doc.createElement('div');
229 | this._root.className = 'medium-editor-table-builder';
230 | this.grid = new Grid(
231 | this._root,
232 | this.options.onClick,
233 | this.options.rows,
234 | this.options.columns
235 | );
236 |
237 | this._range = null;
238 | this._toolbar = this._doc.createElement('div');
239 | this._toolbar.className = 'medium-editor-table-builder-toolbar';
240 |
241 | var spanRow = this._doc.createElement('span');
242 | spanRow.innerHTML = 'Row:';
243 | this._toolbar.appendChild(spanRow);
244 | var addRowBefore = this._doc.createElement('button');
245 | addRowBefore.title = 'Add row before';
246 | addRowBefore.innerHTML = '';
247 | addRowBefore.onclick = this.addRow.bind(this, true);
248 | this._toolbar.appendChild(addRowBefore);
249 |
250 | var addRowAfter = this._doc.createElement('button');
251 | addRowAfter.title = 'Add row after';
252 | addRowAfter.innerHTML = '';
253 | addRowAfter.onclick = this.addRow.bind(this, false);
254 | this._toolbar.appendChild(addRowAfter);
255 |
256 | var remRow = this._doc.createElement('button');
257 | remRow.title = 'Remove row';
258 | remRow.innerHTML = '';
259 | remRow.onclick = this.removeRow.bind(this);
260 | this._toolbar.appendChild(remRow);
261 |
262 | var spanCol = this._doc.createElement('span');
263 | spanCol.innerHTML = 'Column:';
264 | this._toolbar.appendChild(spanCol);
265 | var addColumnBefore = this._doc.createElement('button');
266 | addColumnBefore.title = 'Add column before';
267 | addColumnBefore.innerHTML = '';
268 | addColumnBefore.onclick = this.addColumn.bind(this, true);
269 | this._toolbar.appendChild(addColumnBefore);
270 |
271 | var addColumnAfter = this._doc.createElement('button');
272 | addColumnAfter.title = 'Add column after';
273 | addColumnAfter.innerHTML = '';
274 | addColumnAfter.onclick = this.addColumn.bind(this, false);
275 | this._toolbar.appendChild(addColumnAfter);
276 |
277 | var remColumn = this._doc.createElement('button');
278 | remColumn.title = 'Remove column';
279 | remColumn.innerHTML = '';
280 | remColumn.onclick = this.removeColumn.bind(this);
281 | this._toolbar.appendChild(remColumn);
282 |
283 | var remTable = this._doc.createElement('button');
284 | remTable.title = 'Remove table';
285 | remTable.innerHTML = '';
286 | remTable.onclick = this.removeTable.bind(this);
287 | this._toolbar.appendChild(remTable);
288 |
289 | var grid = this._root.childNodes[0];
290 | this._root.insertBefore(this._toolbar, grid);
291 | },
292 |
293 | getElement: function () {
294 | return this._root;
295 | },
296 |
297 | hide: function () {
298 | this._root.style.display = '';
299 | this.grid.setCurrentCell({ column: -1, row: -1 });
300 | this.grid.markCells();
301 | },
302 |
303 | show: function (left) {
304 | this._root.style.display = 'block';
305 | this._root.style.left = left + 'px';
306 | },
307 |
308 | setEditor: function (range, restrictNestedTable) {
309 | this._range = range;
310 | this._toolbar.style.display = 'block';
311 | if (restrictNestedTable) {
312 | var elements = this._doc.getElementsByClassName('medium-editor-table-builder-grid');
313 | elements[0].style.display = 'none';
314 | }
315 | },
316 |
317 | setBuilder: function () {
318 | this._range = null;
319 | this._toolbar.style.display = 'none';
320 | var elements = this._doc.getElementsByClassName('medium-editor-table-builder-grid');
321 | elements[0].style.display = 'block';
322 | for (var i = 0; i < elements.length; i++) {
323 | elements[i].style.height = (COLUMN_WIDTH * this.rows + BORDER_WIDTH * 2) + 'px';
324 | elements[i].style.width = (COLUMN_WIDTH * this.columns + BORDER_WIDTH * 2) + 'px';
325 | }
326 | },
327 |
328 | getParentType: function (el, targetNode) {
329 | var nodeName = el && el.nodeName ? el.nodeName.toLowerCase() : false;
330 | if (!nodeName) {
331 | return false;
332 | }
333 | while (nodeName && nodeName !== 'body') {
334 | if (nodeName === targetNode) {
335 | return el;
336 | }
337 | el = el.parentNode;
338 | nodeName = el && el.nodeName ? el.nodeName.toLowerCase() : false;
339 | }
340 | },
341 |
342 | addRow: function (before, e) {
343 | e.preventDefault();
344 | e.stopPropagation();
345 | var tbody = this.getParentType(this._range, 'tbody'),
346 | selectedTR = this.getParentType(this._range, 'tr'),
347 | tr = this._doc.createElement('tr'),
348 | td;
349 | for (var i = 0; i < selectedTR.childNodes.length; i++) {
350 | td = this._doc.createElement('td');
351 | td.appendChild(this._doc.createElement('br'));
352 | tr.appendChild(td);
353 | }
354 | if (before !== true && selectedTR.nextSibling) {
355 | tbody.insertBefore(tr, selectedTR.nextSibling);
356 | } else if (before === true) {
357 | tbody.insertBefore(tr, selectedTR);
358 | } else {
359 | tbody.appendChild(tr);
360 | }
361 | this.options.onClick(0, 0);
362 | },
363 |
364 | removeRow: function (e) {
365 | e.preventDefault();
366 | e.stopPropagation();
367 | var tbody = this.getParentType(this._range, 'tbody'),
368 | selectedTR = this.getParentType(this._range, 'tr');
369 | tbody.removeChild(selectedTR);
370 | this.options.onClick(0, 0);
371 | },
372 |
373 | addColumn: function (before, e) {
374 | e.preventDefault();
375 | e.stopPropagation();
376 | var selectedTR = this.getParentType(this._range, 'tr'),
377 | selectedTD = this.getParentType(this._range, 'td'),
378 | cell = Array.prototype.indexOf.call(selectedTR.childNodes, selectedTD),
379 | tbody = this.getParentType(this._range, 'tbody'),
380 | td;
381 |
382 | for (var i = 0; i < tbody.childNodes.length; i++) {
383 | td = this._doc.createElement('td');
384 | td.appendChild(this._doc.createElement('br'));
385 | if (before === true) {
386 | tbody.childNodes[i].insertBefore(td, tbody.childNodes[i].childNodes[cell]);
387 | } else if (tbody.childNodes[i].childNodes[cell].nextSibling) {
388 | tbody.childNodes[i].insertBefore(td, tbody.childNodes[i].childNodes[cell].nextSibling);
389 | } else {
390 | tbody.childNodes[i].appendChild(td);
391 | }
392 | }
393 |
394 | this.options.onClick(0, 0);
395 | },
396 |
397 | removeColumn: function (e) {
398 | e.preventDefault();
399 | e.stopPropagation();
400 | var selectedTR = this.getParentType(this._range, 'tr'),
401 | selectedTD = this.getParentType(this._range, 'td'),
402 | cell = Array.prototype.indexOf.call(selectedTR.childNodes, selectedTD),
403 | tbody = this.getParentType(this._range, 'tbody'),
404 | rows = tbody.childNodes.length;
405 |
406 | for (var i = 0; i < rows; i++) {
407 | tbody.childNodes[i].removeChild(tbody.childNodes[i].childNodes[cell]);
408 | }
409 | this.options.onClick(0, 0);
410 | },
411 |
412 | removeTable: function (e) {
413 | e.preventDefault();
414 | e.stopPropagation();
415 | var selectedTR = this.getParentType(this._range, 'tr'),
416 | selectedTD = this.getParentType(this._range, 'td'),
417 | cell = Array.prototype.indexOf.call(selectedTR.childNodes, selectedTD),
418 | table = this.getParentType(this._range, 'table');
419 |
420 | table.parentNode.removeChild(table);
421 | this.options.onClick(0, 0);
422 | }
423 | };
424 |
425 | function Table(editor) {
426 | return this.init(editor);
427 | }
428 |
429 | var TAB_KEY_CODE = 9;
430 |
431 | Table.prototype = {
432 | init: function (editor) {
433 | this._editor = editor;
434 | this._doc = this._editor.options.ownerDocument;
435 | this._bindTabBehavior();
436 | },
437 |
438 | insert: function (rows, cols) {
439 | var html = this._html(rows, cols);
440 |
441 | this._editor.pasteHTML(
442 | '') + '
")+"
";d.innerHTML=e,a.appendChild(d)},_isLastCell:function(a,b,c){return b.cells.length-1===a.cellIndex&&c.rows.length-1===b.rowIndex},_getPreviousRowLastCell:function(a){if(a=a.previousSibling)return a.cells[a.cells.length-1]}};var j,k=16,l=1;return j=MediumEditor.extensions.form.extend({name:"table",aria:"create table",action:"table",contentDefault:"TBL",contentFA:'',handleClick:function(a){a.preventDefault(),a.stopPropagation(),this[this.isActive()===!0?"hide":"show"]()},hide:function(){this.setInactive(),this.builder.hide()},show:function(){this.setActive();var a=MediumEditor.selection.getSelectionRange(this.document);"td"===a.startContainer.nodeName.toLowerCase()||"td"===a.endContainer.nodeName.toLowerCase()||MediumEditor.util.getClosestTag(MediumEditor.selection.getSelectedParentElement(a),"td")?this.builder.setEditor(MediumEditor.selection.getSelectedParentElement(a),this.restrictNestedTable):this.builder.setBuilder(),this.builder.show(this.button.offsetLeft)},getForm:function(){return this.builder||(this.builder=new g({onClick:function(a,b){(a>0||b>0)&&this.table.insert(a,b),this.hide()}.bind(this),ownerDocument:this.document,rows:this.rows||10,columns:this.columns||10}),this.table=new h(this.base)),this.builder.getElement()}})}()); -------------------------------------------------------------------------------- /grunt/aliases.yaml: -------------------------------------------------------------------------------- 1 | test: 2 | - jscs 3 | - jshint 4 | - jasmine 5 | 6 | travis: 7 | - test 8 | - coveralls 9 | 10 | lint: 11 | - jscs 12 | - jshint 13 | 14 | js: 15 | - concat 16 | - test 17 | - uglify 18 | 19 | css: 20 | - sass 21 | - autoprefixer 22 | - cssmin 23 | 24 | default: 25 | - css 26 | - js 27 | - watch 28 | -------------------------------------------------------------------------------- /grunt/autoprefixer.js: -------------------------------------------------------------------------------- 1 | var autoprefixerBrowsers = ['last 3 versions', 'ie >= 9']; 2 | 3 | module.exports = { 4 | main: { 5 | expand: true, 6 | cwd: 'dist/css/', 7 | src: ['*.css', '!*.min.css'], 8 | dest: 'dist/css/', 9 | browsers: autoprefixerBrowsers 10 | }, 11 | themes: { 12 | expand: true, 13 | cwd: 'demo/css/', 14 | src: ['*.css', '!*.min.css'], 15 | dest: 'demo/css/', 16 | browsers: autoprefixerBrowsers 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /grunt/bump.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | options: { 3 | files: ['package.json'], 4 | updateConfigs: [], 5 | commit: false, 6 | createTag: false, 7 | push: false 8 | } 9 | }; 10 | -------------------------------------------------------------------------------- /grunt/concat.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dist: { 3 | src: ['src/wrappers/start.js'] 4 | .concat(jsSourceFiles) 5 | .concat(['src/wrappers/end.js']), 6 | dest: 'dist/js/<%= package.name %>.js' 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /grunt/coveralls.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dist: { 3 | src: 'reports/jasmine/lcov/lcov.info' 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /grunt/cssmin.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | options: { 3 | shorthandCompacting: false, 4 | roundingPrecision: -1 5 | }, 6 | target: { 7 | files: { 8 | 'dist/css/<%= package.name %>.min.css': ['dist/css/<%= package.name %>.css'] 9 | } 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /grunt/jasmine.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | suite: { 3 | src: 'src/js/**/*.js', 4 | options: { 5 | specs: 'spec/*.spec.js', 6 | helpers: 'spec/helpers/*.js', 7 | styles: 'dist/css/*.css', 8 | vendor: 'node_modules/medium-editor/dist/js/medium-editor.js', 9 | junit: { 10 | path: 'reports/jasmine/', 11 | consolidate: true 12 | }, 13 | keepRunner: true, 14 | template: require('grunt-template-jasmine-istanbul'), 15 | templateOptions: { 16 | coverage: 'reports/jasmine/coverage.json', 17 | report: [ 18 | { 19 | type: 'lcov', 20 | options: { 21 | dir: 'reports/jasmine/lcov' 22 | } 23 | }, { 24 | type: 'html', 25 | options: { 26 | dir: 'coverage' 27 | } 28 | } 29 | ] 30 | }, 31 | summary: true 32 | } 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /grunt/jscs.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | src: jsSourceFiles.concat(['Gruntfile.js', 'grunt/*.js', 'spec/*.js']), 3 | options: { 4 | config: '.jscsrc' 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /grunt/jshint.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | build: jsSourceFiles.concat(['Gruntfile.js', 'grunt/*.js', 'spec/*.js']) 3 | }; 4 | -------------------------------------------------------------------------------- /grunt/sass.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dist: { 3 | files: { 4 | 'dist/css/<%= package.name %>.css': 'src/sass/<%= package.name %>.scss', 5 | 'demo/css/demo.css': 'demo/sass/demo.scss' 6 | } 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /grunt/uglify.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dist: { 3 | files: { 4 | 'dist/js/<%= package.name %>.min.js': ['dist/js/<%= package.name %>.js'] 5 | } 6 | } 7 | }; 8 | -------------------------------------------------------------------------------- /grunt/watch.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | scripts: { 3 | files: ['src/js/**/*.js', 'spec/*.js', 'Gruntfile.js', 'grunt/*.js'], 4 | tasks: ['js'], 5 | options: { 6 | debounceDelay: 250 7 | } 8 | }, 9 | styles: { 10 | files: ['src/sass/**/*.scss', 'demo/sass/**/*.scss'], 11 | tasks: ['css'], 12 | options: { 13 | debounceDelay: 250 14 | } 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "medium-editor-tables", 3 | "version": "0.6.1", 4 | "author": "Davi Ferreira
';
68 | html += this._cellsHTML();
69 | html += '
';
70 | return html;
71 | },
72 |
73 | _cellsHTML: function () {
74 | var html = '';
75 | this._generateCells();
76 | this._cells.map(function (cell) {
77 | html += '';
81 | html += '';
82 | });
83 | return html;
84 | },
85 |
86 | _render: function () {
87 | this._root.innerHTML = this._html();
88 | this._cellsElements = this._root.querySelectorAll('a');
89 | this._bindEvents();
90 | },
91 |
92 | _bindEvents: function () {
93 | [].forEach.call(this._cellsElements, function (el) {
94 | this._onMouseEnter(el);
95 | this._onClick(el);
96 | }.bind(this));
97 | },
98 |
99 | _onMouseEnter: function (el) {
100 | var self = this,
101 | timer;
102 |
103 | el.addEventListener('mouseenter', function (e) {
104 | clearTimeout(timer);
105 |
106 | timer = setTimeout(function () {
107 | self._currentCell = {
108 | column: parseInt(e.target.getAttribute('data-column'), 10),
109 | row: parseInt(e.target.getAttribute('data-row'), 10)
110 | };
111 | self.markCells();
112 | }, 50);
113 | });
114 | },
115 |
116 | _onClick: function (el) {
117 | var self = this;
118 | el.addEventListener('click', function (e) {
119 | e.preventDefault();
120 | self._callback(e.target.getAttribute('data-row'), e.target.getAttribute('data-column'));
121 | });
122 | }
123 | };
124 |
--------------------------------------------------------------------------------
/src/js/plugin.js:
--------------------------------------------------------------------------------
1 | var COLUMN_WIDTH = 16,
2 | BORDER_WIDTH = 1,
3 | MediumEditorTable;
4 |
5 | MediumEditorTable = MediumEditor.extensions.form.extend({
6 | name: 'table',
7 |
8 | aria: 'create table',
9 | action: 'table',
10 | contentDefault: 'TBL',
11 | contentFA: '',
12 |
13 | handleClick: function (event) {
14 | event.preventDefault();
15 | event.stopPropagation();
16 |
17 | this[this.isActive() === true ? 'hide' : 'show']();
18 | },
19 |
20 | hide: function () {
21 | this.setInactive();
22 | this.builder.hide();
23 | },
24 |
25 | show: function () {
26 | this.setActive();
27 |
28 | var range = MediumEditor.selection.getSelectionRange(this.document);
29 | if (range.startContainer.nodeName.toLowerCase() === 'td' ||
30 | range.endContainer.nodeName.toLowerCase() === 'td' ||
31 | MediumEditor.util.getClosestTag(MediumEditor.selection.getSelectedParentElement(range), 'td')) {
32 | this.builder.setEditor(MediumEditor.selection.getSelectedParentElement(range), this.restrictNestedTable);
33 | } else {
34 | this.builder.setBuilder();
35 | }
36 | this.builder.show(this.button.offsetLeft);
37 | },
38 |
39 | getForm: function () {
40 | if (!this.builder) {
41 | this.builder = new Builder({
42 | onClick: function (rows, columns) {
43 | if (rows > 0 || columns > 0) {
44 | this.table.insert(rows, columns);
45 | }
46 | this.hide();
47 | }.bind(this),
48 | ownerDocument: this.document,
49 | rows: this.rows || 10,
50 | columns: this.columns || 10
51 | });
52 |
53 | this.table = new Table(this.base);
54 | }
55 |
56 | return this.builder.getElement();
57 | }
58 | });
59 |
--------------------------------------------------------------------------------
/src/js/table.js:
--------------------------------------------------------------------------------
1 | function Table(editor) {
2 | return this.init(editor);
3 | }
4 |
5 | var TAB_KEY_CODE = 9;
6 |
7 | Table.prototype = {
8 | init: function (editor) {
9 | this._editor = editor;
10 | this._doc = this._editor.options.ownerDocument;
11 | this._bindTabBehavior();
12 | },
13 |
14 | insert: function (rows, cols) {
15 | var html = this._html(rows, cols);
16 |
17 | this._editor.pasteHTML(
18 | '') + '