瀏覽代碼

Merge pull request #110 from ckeditor/t/99

Other: Renamed "handler" to "handle" in the entire package. Closes #99.

BREAKING CHANGE: The `drag-handler.svg` icon is now `drag-handle.svg`. If you use it in your integration, please update the path.

BREAKING CHANGE: The `hasSelectionHandler` option of the [`toWidget()`](https://ckeditor.com/docs/ckeditor5/latest/api/module_widget_utils.html#static-function-toWidget) utility has been renamed to `hasSelectionHandle`. Consider this change if you create your own widgets using this helper.

BREAKING CHANGE: `.ck-widget__selection-handler` and `.ck-widget_with-selection-handler` CSS classes set on widgets have been renamed to `.ck-widget__selection-handle` and `.ck-widget_with-selection-handle`. This change may affect styling in your integration.
Piotrek Koszuliński 6 年之前
父節點
當前提交
7842d450c3

+ 12 - 12
packages/ckeditor5-widget/src/utils.js

@@ -11,7 +11,7 @@ import HighlightStack from './highlightstack';
 import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
 import env from '@ckeditor/ckeditor5-utils/src/env';
 
-import dragHandlerIcon from '../theme/icons/drag-handler.svg';
+import dragHandleIcon from '../theme/icons/drag-handle.svg';
 
 /**
  * CSS class added to each widget element.
@@ -85,7 +85,7 @@ export function isWidget( node ) {
  * @param {Object} [options={}]
  * @param {String|Function} [options.label] Element's label provided to the {@link ~setLabel} function. It can be passed as
  * a plain string or a function returning a string. It represents the widget for assistive technologies (like screen readers).
- * @param {Boolean} [options.hasSelectionHandler=false] If `true`, the widget will have a selection handler added.
+ * @param {Boolean} [options.hasSelectionHandle=false] If `true`, the widget will have a selection handle added.
  * @returns {module:engine/view/element~Element} Returns the same element.
  */
 /* eslint-enable max-len */
@@ -104,8 +104,8 @@ export function toWidget( element, writer, options = {} ) {
 		setLabel( element, options.label, writer );
 	}
 
-	if ( options.hasSelectionHandler ) {
-		addSelectionHandler( element, writer );
+	if ( options.hasSelectionHandle ) {
+		addSelectionHandle( element, writer );
 	}
 
 	setHighlightHandling(
@@ -355,19 +355,19 @@ function getFillerOffset() {
 	return null;
 }
 
-// Adds a drag handler to the widget.
+// Adds a drag handle to the widget.
 //
 // @param {module:engine/view/containerelement~ContainerElement}
 // @param {module:engine/view/downcastwriter~DowncastWriter} writer
-function addSelectionHandler( widgetElement, writer ) {
-	const selectionHandler = writer.createUIElement( 'div', { class: 'ck ck-widget__selection-handler' }, function( domDocument ) {
+function addSelectionHandle( widgetElement, writer ) {
+	const selectionHandle = writer.createUIElement( 'div', { class: 'ck ck-widget__selection-handle' }, function( domDocument ) {
 		const domElement = this.toDomElement( domDocument );
 
 		// Use the IconView from the ui library.
 		const icon = new IconView();
-		icon.set( 'content', dragHandlerIcon );
+		icon.set( 'content', dragHandleIcon );
 
-		// Render the icon view right away to append its #element to the selectionHandler DOM element.
+		// Render the icon view right away to append its #element to the selectionHandle DOM element.
 		icon.render();
 
 		domElement.appendChild( icon.element );
@@ -375,7 +375,7 @@ function addSelectionHandler( widgetElement, writer ) {
 		return domElement;
 	} );
 
-	// Append the selection handler into the widget wrapper.
-	writer.insert( writer.createPositionAt( widgetElement, 0 ), selectionHandler );
-	writer.addClass( [ 'ck-widget_with-selection-handler' ], widgetElement );
+	// Append the selection handle into the widget wrapper.
+	writer.insert( writer.createPositionAt( widgetElement, 0 ), selectionHandle );
+	writer.addClass( [ 'ck-widget_with-selection-handle' ], widgetElement );
 }

+ 1 - 1
packages/ckeditor5-widget/src/widgetresize/resizer.js

@@ -380,7 +380,7 @@ export default class Resizer {
 	 * Determines the position of a given resize handle.
 	 *
 	 * @private
-	 * @param {HTMLElement} domHandle Handler used to calculate the reference point.
+	 * @param {HTMLElement} domHandle Handle used to calculate the reference point.
 	 * @returns {String|undefined} Returns a string like `"top-left"` or `undefined` if not matched.
 	 */
 	_getHandlePosition( domHandle ) {

+ 1 - 1
packages/ckeditor5-widget/src/widgetresize/resizerstate.js

@@ -191,7 +191,7 @@ function getResizerHandleClass( resizerPosition ) {
 // Determines the position of a given resize handle.
 //
 // @private
-// @param {HTMLElement} domHandle Handler used to calculate the reference point.
+// @param {HTMLElement} domHandle Handle used to calculate the reference point.
 // @returns {String|undefined} Returns a string like `"top-left"` or `undefined` if not matched.
 function getHandlePosition( domHandle ) {
 	const resizerPositions = [ 'top-left', 'top-right', 'bottom-right', 'bottom-left' ];

+ 1 - 1
packages/ckeditor5-widget/tests/manual/keyboard.js

@@ -25,7 +25,7 @@ function BlockWidget( editor ) {
 					class: 'widget'
 				} ),
 				writer,
-				{ hasSelectionHandler: true }
+				{ hasSelectionHandle: true }
 			);
 		}
 	} );

packages/ckeditor5-widget/tests/manual/selection-handler.html → packages/ckeditor5-widget/tests/manual/selection-handle.html


+ 1 - 1
packages/ckeditor5-widget/tests/manual/selection-handler.js

@@ -23,7 +23,7 @@ function MyPlugin( editor ) {
 				class: 'widget'
 			} ),
 			writer,
-			{ hasSelectionHandler: true } );
+			{ hasSelectionHandle: true } );
 		}
 	} );
 

+ 17 - 0
packages/ckeditor5-widget/tests/manual/selection-handle.md

@@ -0,0 +1,17 @@
+# Widget selection handle
+
+**Note**: For the best testing, run manual tests adding Arabic to [additional languages configuration](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/testing-environment.html#running-manual-tests).
+
+---
+
+1. Focus the widget.
+1. The outline of the widget and the selection handle should be continuous.
+1. The selection handle should be attached to the top of the widget.
+
+## LTR
+
+1. The selection handle should be displayed on the **left** side of the widget.
+
+## RTL
+
+1. The selection handle should be displayed on the **right** side of the widget.

+ 0 - 17
packages/ckeditor5-widget/tests/manual/selection-handler.md

@@ -1,17 +0,0 @@
-# Widget selection handler
-
-**Note**: For the best testing, run manual tests adding Arabic to [additional languages configuration](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/testing-environment.html#running-manual-tests).
-
----
-
-1. Focus the widget.
-1. The outline of the widget and the selection handler should be continuous.
-1. The selection handler should be attached to the top of the widget.
-
-## LTR
-
-1. The selection handler should be displayed on the **left** side of the widget.
-
-## RTL
-
-1. The selection handler should be displayed on the **right** side of the widget.

+ 9 - 9
packages/ckeditor5-widget/tests/utils.js

@@ -107,20 +107,20 @@ describe( 'widget utils', () => {
 			expect( element.hasClass( 'foo' ) ).to.be.false;
 		} );
 
-		it( 'should add element a selection handler to widget if hasSelectionHandler=true is passed', () => {
-			toWidget( element, writer, { hasSelectionHandler: true } );
+		it( 'should add element a selection handle to widget if hasSelectionHandle=true is passed', () => {
+			toWidget( element, writer, { hasSelectionHandle: true } );
 
-			expect( element.hasClass( 'ck-widget_with-selection-handler' ) ).to.be.true;
+			expect( element.hasClass( 'ck-widget_with-selection-handle' ) ).to.be.true;
 
-			const selectionHandler = element.getChild( 0 );
-			expect( selectionHandler ).to.be.instanceof( UIElement );
+			const selectionHandle = element.getChild( 0 );
+			expect( selectionHandle ).to.be.instanceof( UIElement );
 
-			const domSelectionHandler = selectionHandler.render( document );
+			const domSelectionHandle = selectionHandle.render( document );
 
-			expect( domSelectionHandler.classList.contains( 'ck' ) ).to.be.true;
-			expect( domSelectionHandler.classList.contains( 'ck-widget__selection-handler' ) ).to.be.true;
+			expect( domSelectionHandle.classList.contains( 'ck' ) ).to.be.true;
+			expect( domSelectionHandle.classList.contains( 'ck-widget__selection-handle' ) ).to.be.true;
 
-			const icon = domSelectionHandler.firstChild;
+			const icon = domSelectionHandle.firstChild;
 
 			expect( icon.nodeName ).to.equal( 'svg' );
 			expect( icon.classList.contains( 'ck' ) ).to.be.true;

+ 44 - 44
packages/ckeditor5-widget/tests/widget.js

@@ -1257,7 +1257,7 @@ describe( 'Widget', () => {
 		} );
 	} );
 
-	describe( 'selection handler', () => {
+	describe( 'selection handle', () => {
 		beforeEach( () => {
 			return VirtualTestEditor.create( { plugins: [ Widget, Typing ] } )
 				.then( newEditor => {
@@ -1289,7 +1289,7 @@ describe( 'Widget', () => {
 							view: ( modelItem, viewWriter ) => {
 								const widget = viewWriter.createContainerElement( 'div' );
 
-								return toWidget( widget, viewWriter, { hasSelectionHandler: true } );
+								return toWidget( widget, viewWriter, { hasSelectionHandle: true } );
 							}
 						} )
 						.elementToElement( {
@@ -1302,10 +1302,10 @@ describe( 'Widget', () => {
 		it( 'should select a widget on mouse click', () => {
 			setModelData( model, '<paragraph>bar</paragraph><widget></widget><paragraph>foo[]</paragraph>' );
 
-			const viewWidgetSelectionHandler = viewDocument.getRoot().getChild( 1 ).getChild( 0 );
+			const viewWidgetSelectionHandle = viewDocument.getRoot().getChild( 1 ).getChild( 0 );
 
 			const domEventDataMock = {
-				target: viewWidgetSelectionHandler,
+				target: viewWidgetSelectionHandle,
 				preventDefault: sinon.spy()
 			};
 
@@ -1318,24 +1318,24 @@ describe( 'Widget', () => {
 			setModelData( model, '<widget><widget></widget><widget></widget></widget>' );
 
 			// The top-outer widget.
-			const viewWidgetSelectionHandler = viewDocument.getRoot().getChild( 0 );
+			const viewWidgetSelectionHandle = viewDocument.getRoot().getChild( 0 );
 
 			const domEventDataMock = {
-				target: viewWidgetSelectionHandler,
+				target: viewWidgetSelectionHandle,
 				preventDefault: sinon.spy()
 			};
 
 			viewDocument.fire( 'mousedown', domEventDataMock );
 
 			expect( getViewData( view ) ).to.equal(
-				'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handler" contenteditable="false">' +
-					'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-						'<div class="ck ck-widget__selection-handler"></div>' +
+				'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handle" contenteditable="false">' +
+					'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+						'<div class="ck ck-widget__selection-handle"></div>' +
 					'</div>' +
-					'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-						'<div class="ck ck-widget__selection-handler"></div>' +
+					'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+						'<div class="ck ck-widget__selection-handle"></div>' +
 					'</div>' +
-					'<div class="ck ck-widget__selection-handler"></div>' +
+					'<div class="ck ck-widget__selection-handle"></div>' +
 				'</div>]'
 			);
 		} );
@@ -1350,30 +1350,30 @@ describe( 'Widget', () => {
 				'<widget></widget>'
 			);
 
-			const viewWidgetSelectionHandler = viewDocument.getRoot().getChild( 1 );
+			const viewWidgetSelectionHandle = viewDocument.getRoot().getChild( 1 );
 
 			const domEventDataMock = {
-				target: viewWidgetSelectionHandler,
+				target: viewWidgetSelectionHandle,
 				preventDefault: sinon.spy()
 			};
 
 			viewDocument.fire( 'mousedown', domEventDataMock );
 
 			expect( getViewData( view ) ).to.equal(
-				'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-					'<div class="ck ck-widget__selection-handler"></div>' +
+				'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+					'<div class="ck ck-widget__selection-handle"></div>' +
 				'</div>' +
-				'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handler" contenteditable="false">' +
-					'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-						'<div class="ck ck-widget__selection-handler"></div>' +
+				'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handle" contenteditable="false">' +
+					'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+						'<div class="ck ck-widget__selection-handle"></div>' +
 					'</div>' +
-					'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-						'<div class="ck ck-widget__selection-handler"></div>' +
+					'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+						'<div class="ck ck-widget__selection-handle"></div>' +
 					'</div>' +
-					'<div class="ck ck-widget__selection-handler"></div>' +
+					'<div class="ck ck-widget__selection-handle"></div>' +
 				'</div>]' +
-				'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-					'<div class="ck ck-widget__selection-handler"></div>' +
+				'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+					'<div class="ck ck-widget__selection-handle"></div>' +
 				'</div>'
 			);
 		} );
@@ -1386,22 +1386,22 @@ describe( 'Widget', () => {
 				'</widget>'
 			);
 
-			const viewWidgetSelectionHandler = viewDocument.getRoot().getChild( 0 );
+			const viewWidgetSelectionHandle = viewDocument.getRoot().getChild( 0 );
 
 			const domEventDataMock = {
-				target: viewWidgetSelectionHandler,
+				target: viewWidgetSelectionHandle,
 				preventDefault: sinon.spy()
 			};
 
 			viewDocument.fire( 'mousedown', domEventDataMock );
 
 			expect( getViewData( view ) ).to.equal(
-				'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handler" contenteditable="false">' +
+				'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handle" contenteditable="false">' +
 					'<figcaption contenteditable="true">foo bar</figcaption>' +
-					'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-						'<div class="ck ck-widget__selection-handler"></div>' +
+					'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+						'<div class="ck ck-widget__selection-handle"></div>' +
 					'</div>' +
-					'<div class="ck ck-widget__selection-handler"></div>' +
+					'<div class="ck ck-widget__selection-handle"></div>' +
 				'</div>]'
 			);
 		} );
@@ -1416,27 +1416,27 @@ describe( 'Widget', () => {
 				'</widget>'
 			);
 
-			const viewWidgetSelectionHandler = viewDocument.getRoot().getChild( 0 ).getChild( 1 );
+			const viewWidgetSelectionHandle = viewDocument.getRoot().getChild( 0 ).getChild( 1 );
 
 			const domEventDataMock = {
-				target: viewWidgetSelectionHandler,
+				target: viewWidgetSelectionHandle,
 				preventDefault: sinon.spy()
 			};
 
 			viewDocument.fire( 'mousedown', domEventDataMock );
 
 			expect( getViewData( view ) ).to.equal(
-				'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-					'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-						'<div class="ck ck-widget__selection-handler"></div>' +
+				'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+					'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+						'<div class="ck ck-widget__selection-handle"></div>' +
 					'</div>' +
-					'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handler" contenteditable="false">' +
-						'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-							'<div class="ck ck-widget__selection-handler"></div>' +
+					'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handle" contenteditable="false">' +
+						'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+							'<div class="ck ck-widget__selection-handle"></div>' +
 						'</div>' +
-						'<div class="ck ck-widget__selection-handler"></div>' +
+						'<div class="ck ck-widget__selection-handle"></div>' +
 					'</div>]' +
-					'<div class="ck ck-widget__selection-handler"></div>' +
+					'<div class="ck ck-widget__selection-handle"></div>' +
 				'</div>'
 			);
 		} );
@@ -1456,13 +1456,13 @@ describe( 'Widget', () => {
 			viewDocument.fire( 'mousedown', domEventDataMock );
 
 			expect( getViewData( view ) ).to.equal(
-				'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
+				'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
 					'<figcaption contenteditable="true">' +
-						'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handler" contenteditable="false">' +
-							'<div class="ck ck-widget__selection-handler"></div>' +
+						'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handle" contenteditable="false">' +
+							'<div class="ck ck-widget__selection-handle"></div>' +
 						'</div>]' +
 					'</figcaption>' +
-					'<div class="ck ck-widget__selection-handler"></div>' +
+					'<div class="ck ck-widget__selection-handle"></div>' +
 				'</div>'
 			);
 		} );

packages/ckeditor5-widget/theme/icons/drag-handler.svg → packages/ckeditor5-widget/theme/icons/drag-handle.svg


+ 6 - 6
packages/ckeditor5-widget/theme/widget.css

@@ -78,18 +78,18 @@
 	}
 }
 
-.ck .ck-widget.ck-widget_with-selection-handler {
+.ck .ck-widget.ck-widget_with-selection-handle {
 	/* Make the widget wrapper a relative positioning container for the drag handle. */
 	position: relative;
 
-	/* Show the selection handler on mouse hover over the widget. */
+	/* Show the selection handle on mouse hover over the widget. */
 	&:hover {
-		& .ck-widget__selection-handler {
+		& .ck-widget__selection-handle {
 			visibility: visible;
 		}
 	}
 
-	& .ck-widget__selection-handler {
+	& .ck-widget__selection-handle {
 		position: absolute;
 
 		& .ck-icon {
@@ -99,8 +99,8 @@
 		}
 	}
 
-	/* Show the selection handler when the widget is selected. */
-	&.ck-widget_selected .ck-widget__selection-handler {
+	/* Show the selection handle when the widget is selected. */
+	&.ck-widget_selected .ck-widget__selection-handle {
 		visibility: visible;
 	}
 }