Merge branch 't/11281b'

ckeditor · Jan 7, 2014 · eee34a6 · eee34a6
2 parents e3c7913 + ed2f018
commit eee34a6
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 24 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -16,6 +16,7 @@ CKEditor 4 Changelog
 * [#11131](http://dev.ckeditor.com/ticket/11131): [[Divarea](http://ckeditor.com/addon/divarea)] Fixed: Error thrown when switching to source mode if selection was in widget's nested editable.
 * [#11139](http://dev.ckeditor.com/ticket/11139): [[Divarea](http://ckeditor.com/addon/divarea)] Fixed: Elements path is not cleared after switching to source mode.
 * [#10778](http://dev.ckeditor.com/ticket/10778): Fix bug with range enlarge; range no longer expanded visible whitespace.
+* [#11281](http://dev.ckeditor.com/ticket/11281): Fixed: Drag handler and mask are duplicated after widget reinitialization.
 
 ## CKEditor 4.3.1
 

diff --git a/plugins/widget/plugin.js b/plugins/widget/plugin.js
@@ -2517,35 +2517,42 @@
 			return;
 
 		var editor = widget.editor,
-			editable = editor.editable(),
-			img = new CKEDITOR.dom.element( 'img', editor.document ),
+			container = widget.wrapper.findOne( '.cke_widget_drag_handler_container' ),
+			img;
+
+		// Reuse drag handler if already exists (#11281).
+		if ( container )
+			img = container.findOne( 'img' );
+		else {
 			container = new CKEDITOR.dom.element( 'span', editor.document );
+			container.setAttributes( {
+				'class': 'cke_reset cke_widget_drag_handler_container',
+				// Split background and background-image for IE8 which will break on rgba().
+				style: 'background:rgba(220,220,220,0.5);background-image:url(' + editor.plugins.widget.path + 'images/handle.png)'
+			} );
 
-		container.setAttributes( {
-			'class': 'cke_reset cke_widget_drag_handler_container',
-			// Split background and background-image for IE8 which will break on rgba().
-			style: 'background:rgba(220,220,220,0.5);background-image:url(' + editor.plugins.widget.path + 'images/handle.png)'
-		} );
+			img = new CKEDITOR.dom.element( 'img', editor.document );
+			img.setAttributes( {
+				'class': 'cke_reset cke_widget_drag_handler',
+				'data-cke-widget-drag-handler': '1',
+				src: transparentImageData,
+				width: DRAG_HANDLER_SIZE,
+				title: editor.lang.widget.move,
+				height: DRAG_HANDLER_SIZE
+			} );
+			widget.inline && img.setAttribute( 'draggable', 'true' );
 
-		img.setAttributes( {
-			'class': 'cke_reset cke_widget_drag_handler',
-			'data-cke-widget-drag-handler': '1',
-			src: transparentImageData,
-			width: DRAG_HANDLER_SIZE,
-			title: editor.lang.widget.move,
-			height: DRAG_HANDLER_SIZE
-		} );
+			container.append( img );
+			widget.wrapper.append( container );
+		}
 
 		if ( widget.inline ) {
-			img.setAttribute( 'draggable', 'true' );
 			img.on( 'dragstart', function( evt ) {
 				evt.data.$.dataTransfer.setData( 'text', JSON.stringify( { type: 'cke-widget', editor: editor.name, id: widget.id } ) );
 			} );
 		} else
 			img.on( 'mousedown', onBlockWidgetDrag, widget );
 
-		container.append( img );
-		widget.wrapper.append( container );
 		widget.dragHandlerContainer = container;
 	}
 
@@ -2668,12 +2675,18 @@
 		if ( !widget.mask )
 			return;
 
-		var img = new CKEDITOR.dom.element( 'img', widget.editor.document );
-		img.setAttributes( {
-			src: transparentImageData,
-			'class': 'cke_reset cke_widget_mask'
-		} );
-		widget.wrapper.append( img );
+		// Reuse mask if already exists (#11281).
+		var img = widget.wrapper.findOne( '.cke_widget_mask' );
+
+		if ( !img ) {
+			img = new CKEDITOR.dom.element( 'img', widget.editor.document );
+			img.setAttributes( {
+				src: transparentImageData,
+				'class': 'cke_reset cke_widget_mask'
+			} );
+			widget.wrapper.append( img );
+		}
+
 		widget.mask = img;
 	}