diff --git a/src/plugins/tableresize.js b/src/plugins/tableresize.js index 75cea40cd4..f94f1fa540 100644 --- a/src/plugins/tableresize.js +++ b/src/plugins/tableresize.js @@ -132,21 +132,15 @@ (evt.data || evt).preventDefault(); } - function columnResizer(editor) { - var pillar, document, resizer, isResizing, startOffset, currentShift; + function columnResizer(editor, pillar) { + var document, resizer, resizing, startOffset, currentShift; var leftSideCells, rightSideCells, leftShiftBoundary, rightShiftBoundary; function detach() { - pillar = null; - currentShift = 0; - isResizing = 0; - - document.removeListener('mouseup', onMouseUp); + resizer.removeListener('mouseup', onMouseUp); resizer.removeListener('mousedown', onMouseDown); resizer.removeListener('mousemove', onMouseMove); - - document.getBody().setStyle('cursor', 'auto'); } function resizeStart() { @@ -189,7 +183,7 @@ resizer.setOpacity(0.5); startOffset = parseInt(resizer.getStyle('left'), 10); currentShift = 0; - isResizing = 1; + resizing = 1; resizer.on('mousemove', onMouseMove); @@ -198,7 +192,7 @@ } function resizeEnd() { - isResizing = 0; + resizing = 0; resizer.setOpacity(0); @@ -266,52 +260,36 @@ // Clean DOM when editor is destroyed. editor.on('destroy', function() { - resizer.remove(); + detach(); + + resizer.remove(); }); // Place the resizer after body to prevent it // from being editable. document.getDocumentElement().append(resizer); - this.attachTo = function(targetPillar) { - // Accept only one pillar at a time. - if (isResizing) { - return; - } - - pillar = targetPillar; + resizer.setStyles({ + width: pxUnit(pillar.width), + height: pxUnit(pillar.height), + left: pxUnit(pillar.x), + top: pxUnit(pillar.y) + }); - resizer.setStyles({ - width: pxUnit(targetPillar.width), - height: pxUnit(targetPillar.height), - left: pxUnit(targetPillar.x), - top: pxUnit(targetPillar.y) - }); + resizer.on('mousedown', onMouseDown, this); - resizer.on('mousedown', onMouseDown, this); + document.getBody().setStyle('cursor', 'col-resize'); - document.getBody().setStyle('cursor', 'col-resize'); - - // Display the resizer to receive events but don't show it, - // only change the cursor to resizable shape. - resizer.show(); - }; + // Display the resizer to receive events but don't show it, + // only change the cursor to resizable shape. + resizer.show(); var move = this.move = function(posX) { - if (!pillar){ - return 0; - } - - if (!isResizing && (posX < pillar.x || posX > (pillar.x + pillar.width))) { - detach(); - return 0; - } - var resizerNewPosition = posX - Math.round(resizer.$.offsetWidth / 2); if (isResizing) { if (resizerNewPosition === leftShiftBoundary || resizerNewPosition === rightShiftBoundary) { - return 1; + return; } resizerNewPosition = Math.max(resizerNewPosition, leftShiftBoundary); @@ -321,9 +299,19 @@ } resizer.setStyle('left', pxUnit(resizerNewPosition)); - - return 1; }; + + var destroy = this.destroy = function() { + detach(); + + document.getBody().setStyle('cursor', 'auto'); + + resizer.remove(); + }; + + var isResizing = this.isResizing = function() { + return resizing; + }; } function clearPillarsCache(evt) { @@ -373,10 +361,20 @@ // If we're already attached to a pillar, simply move the // resizer. - if (resizer && resizer.move(pageX)) { - cancel(evt); - return; - } + if (resizer){ + if (resizer.isResizing()) { + resizer.move(pageX); + + cancel(evt); + + return; + } + else { + resizer.destroy(); + + resizer = null; + } + } // Considering table, tr, td, tbody but nothing else. var table, pillars; @@ -401,9 +399,9 @@ } var pillar = getPillarAtPosition(pillars, pageX); + if (pillar) { - !resizer && (resizer = new columnResizer(editor)); - resizer.attachTo(pillar); + resizer = new columnResizer(editor, pillar); } }); });