8
0
Просмотр исходного кода

Internal: Some basic logic to show up the resizers.

Marek Lewandowski 6 лет назад
Родитель
Сommit
53756bba67

+ 31 - 8
packages/ckeditor5-widget/src/widgetresizefeature.js

@@ -8,20 +8,43 @@
  */
 
 import WidgetFeature from './widgetfeature';
-
-export const WIDGET_RESIZE_ATTRIBUTE_NAME = 'resizer';
+import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
+import dragHandlerIcon from '../theme/icons/drag-handler.svg';
 
 /**
  * The base class for widget features. This type provides a common API for reusable features of widgets.
  */
 export default class WidgetResizeFeature extends WidgetFeature {
-	apply( widget, writer ) {
-		super.apply( widget, writer );
+	apply( widgetElement, writer ) {
+		super.apply( widgetElement, writer );
+
+		const selectionHandler = writer.createUIElement( 'div', {
+			class: 'ck ck-widget__resizer-wrapper'
+		}, function( domDocument ) {
+			const domElement = this.toDomElement( domDocument );
+			const resizerPositions = [ 'top-left', 'top-right', 'bottom-right', 'bottom-left' ];
+
+			for ( const currentPosition of resizerPositions ) {
+				// Use the IconView from the UI library.
+				const icon = new IconView();
+				icon.set( 'content', dragHandlerIcon );
+				icon.extendTemplate( {
+					attributes: {
+						'class': `ck-widget__resizer ck-widget__resizer-${ currentPosition }`
+					}
+				} );
+
+				// Make sure icon#element is rendered before passing to appendChild().
+				icon.render();
+
+				domElement.appendChild( icon.element );
+			}
 
-		// writer.setCustomProperty( WIDGET_RESIZE_ATTRIBUTE_NAME, true, widget );
-		writer.setAttribute( WIDGET_RESIZE_ATTRIBUTE_NAME, true, widget );
+			return domElement;
+		} );
 
-		// widget.setAttribute( WIDGET_RESIZE_ATTRIBUTE_NAME );
-		// aaa
+		// Append resizer wrapper to the widget's wrapper.
+		writer.insert( writer.createPositionAt( widgetElement, widgetElement.childCount ), selectionHandler );
+		writer.addClass( [ 'ck-widget_with-resizer' ], widgetElement );
 	}
 }

+ 54 - 1
packages/ckeditor5-widget/theme/widget.css

@@ -3,12 +3,65 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+.ck .ck-widget_with-resizer {
+	/* Make the widget wrapper a relative positioning container for the drag handler. */
+	position: relative;
+
+	& .ck-widget__resizer-wrapper {
+		visibility: hidden;
+		position: absolute;
+
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+	}
+
+	& .ck-widget__resizer {
+		position: absolute;
+
+		&.ck-widget__resizer-top-left {
+			top: 0;
+			left: 0;
+		}
+		&.ck-widget__resizer-top-right {
+			top: 0;
+			right: 0;
+		}
+		&.ck-widget__resizer-bottom-right {
+			bottom: 0;
+			right: 0;
+		}
+		&.ck-widget__resizer-bottom-left {
+			bottom: 0;
+			left: 0;
+		}
+
+		&.ck-widget__resizer-top-left, &.ck-widget__resizer-bottom-right {
+			&:hover {
+				cursor: nwse-resize;
+			}
+		}
+
+		/* Show the selection handler on mouse hover over the widget. */
+		&:hover {
+			cursor: nesw-resize;
+		}
+	}
+
+	&:hover {
+		& .ck-widget__resizer-wrapper {
+			visibility: visible;
+		}
+	}
+}
+
 .ck .ck-widget.ck-widget_with-selection-handler {
 	/* Make the widget wrapper a relative positioning container for the drag handler. */
 	position: relative;
 
 	& .ck-widget__selection-handler {
-		visibility: hidden;
+		/* visibility: hidden; */
 		position: absolute;
 
 		& .ck-icon {