Преглед на файлове

Feature: Implement the selection handler.

Maciej Gołaszewski преди 7 години
родител
ревизия
7161488e70
променени са 3 файла, в които са добавени 58 реда и са изтрити 0 реда
  1. 34 0
      packages/ckeditor5-widget/src/utils.js
  2. 23 0
      packages/ckeditor5-widget/tests/utils.js
  3. 1 0
      packages/ckeditor5-widget/theme/icons/drag-handler.svg

+ 34 - 0
packages/ckeditor5-widget/src/utils.js

@@ -8,6 +8,10 @@
  */
 
 import HighlightStack from './highlightstack';
+import Position from '@ckeditor/ckeditor5-engine/src/view/position';
+import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
+
+import dragHandlerIcon from '../theme/icons/drag-handler.svg';
 
 const widgetSymbol = Symbol( 'isWidget' );
 const labelSymbol = Symbol( 'label' );
@@ -49,6 +53,7 @@ export function isWidget( element ) {
  * @param {Object} [options={}]
  * @param {String|Function} [options.label] Element's label provided to {@link ~setLabel} function. It can be passed as
  * a plain string or a function returning a string.
+ * @param {Boolean} [options.addSelectionHandler=false] If set to true the widget will have a selection handler added.
  * @returns {module:engine/view/element~Element} Returns same element.
  */
 export function toWidget( element, writer, options = {} ) {
@@ -61,6 +66,10 @@ export function toWidget( element, writer, options = {} ) {
 		setLabel( element, options.label, writer );
 	}
 
+	if ( options.addSelectionHandler ) {
+		addSelectionHandler( element, writer );
+	}
+
 	setHighlightHandling(
 		element,
 		writer,
@@ -170,3 +179,28 @@ export function toWidgetEditable( editable, writer ) {
 function getFillerOffset() {
 	return null;
 }
+
+// Adds a drag handler to the editable element.
+//
+// @param {module:engine/view/editableelement~EditableElement}
+// @param {module:engine/view/writer~Writer} writer
+function addSelectionHandler( editable, writer ) {
+	const selectionHandler = writer.createUIElement( 'div', { class: 'ck ck-selection-handler' }, function( domDocument ) {
+		const domElement = this.toDomElement( domDocument );
+
+		// Use the IconView from the ui library.
+		const icon = new IconView();
+		icon.set( 'content', dragHandlerIcon );
+
+		// Render the icon view right away to append its #element to the selectionHandler DOM element.
+		icon.render();
+
+		domElement.appendChild( icon.element );
+
+		return domElement;
+	} );
+
+	// Append the selection handler into the widget wrapper.
+	writer.insert( Position.createAt( editable ), selectionHandler );
+	writer.addClass( [ 'ck-widget__selectable' ], editable );
+}

+ 23 - 0
packages/ckeditor5-widget/tests/utils.js

@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
+/* global document */
+
 import Writer from '@ckeditor/ckeditor5-engine/src/view/writer';
 import ViewElement from '@ckeditor/ckeditor5-engine/src/view/element';
 import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
@@ -16,6 +18,7 @@ import {
 	setHighlightHandling,
 	WIDGET_CLASS_NAME
 } from '../src/utils';
+import UIElement from '@ckeditor/ckeditor5-engine/src/view/uielement';
 
 describe( 'widget utils', () => {
 	let element, writer, viewDocument;
@@ -87,6 +90,26 @@ describe( 'widget utils', () => {
 			expect( element.hasClass( 'highlight' ) ).to.be.false;
 			expect( element.hasClass( 'foo' ) ).to.be.false;
 		} );
+
+		it( 'should add element a selection handler to widget if addSelectionHandler=true is passed', () => {
+			toWidget( element, writer, { addSelectionHandler: true } );
+
+			expect( element.hasClass( 'ck-widget__selectable' ) ).to.be.true;
+
+			const selectionHandler = element.getChild( 0 );
+			expect( selectionHandler ).to.be.instanceof( UIElement );
+
+			const domSelectionHandler = selectionHandler.render( document );
+
+			expect( domSelectionHandler.classList.contains( 'ck' ) ).to.be.true;
+			expect( domSelectionHandler.classList.contains( 'ck-selection-handler' ) ).to.be.true;
+
+			const icon = domSelectionHandler.firstChild;
+
+			expect( icon.nodeName ).to.equal( 'svg' );
+			expect( icon.classList.contains( 'ck' ) ).to.be.true;
+			expect( icon.classList.contains( 'ck-icon' ) ).to.be.true;
+		} );
 	} );
 
 	describe( 'isWidget()', () => {

+ 1 - 0
packages/ckeditor5-widget/theme/icons/drag-handler.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 3v1H4v3H3V4a1 1 0 0 1 1-1h3zm6 0h3a1 1 0 0 1 1 1v3h-1V4h-3V3zM7 17H4a1 1 0 0 1-1-1v-3h1v3h3v1zm6 0v-1h3v-3h1v3a1 1 0 0 1-1 1h-3z" fill="#333" fill-rule="evenodd"/></svg>