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

Moved the dynamic template regions to the engine to allow the placeholder feature.

Aleksander Nowodzinski 7 лет назад
Родитель
Сommit
f420d64734

+ 17 - 16
packages/ckeditor5-ui/src/editableui/editableuiview.js

@@ -22,10 +22,10 @@ export default class EditableUIView extends View {
 	 * @param {HTMLElement} [editableElement] The editable element. If not specified, this view
 	 * should create it. Otherwise, the existing element should be used.
 	 */
-	constructor( locale, editableElement ) {
+	constructor( locale, editableElement, editingView ) {
 		super( locale );
 
-		const bind = this.bindTemplate;
+		this.editingView = editingView;
 
 		if ( editableElement ) {
 			this.element = this.editableElement = editableElement;
@@ -38,23 +38,11 @@ export default class EditableUIView extends View {
 					'ck',
 					'ck-content',
 					'ck-editor__editable',
-					'ck-rounded-corners',
-					bind.to( 'isFocused', value => value ? 'ck-focused' : 'ck-blurred' ),
-					bind.if( 'isReadOnly', 'ck-read-only' )
-
-				],
-				contenteditable: bind.to( 'isReadOnly', value => !value ),
+					'ck-rounded-corners'
+				]
 			}
 		} );
 
-		/**
-		 * Controls whether the editable is writable or not.
-		 *
-		 * @observable
-		 * @member {Boolean} #isReadOnly
-		 */
-		this.set( 'isReadOnly', false );
-
 		/**
 		 * Controls whether the editable is focused, i.e. the user is typing in it.
 		 *
@@ -93,6 +81,19 @@ export default class EditableUIView extends View {
 		}
 	}
 
+	attachDomRootActions() {
+		const viewRoot = this.editingView.domConverter.domToView( this.element );
+		const updateFocusClasses = () => {
+			this.editingView.change( writer => {
+				writer.addClass( this.isFocused ? 'ck-focused' : 'ck-blurred', viewRoot );
+				writer.removeClass( this.isFocused ? 'ck-blurred' : 'ck-focused', viewRoot );
+			} );
+		};
+
+		this.on( 'change:isFocused', updateFocusClasses );
+		updateFocusClasses();
+	}
+
 	/**
 	 * @inheritDoc
 	 */

+ 21 - 10
packages/ckeditor5-ui/src/editableui/inline/inlineeditableuiview.js

@@ -23,11 +23,8 @@ export default class InlineEditableUIView extends EditableUIView {
 	 * {@link module:ui/editableui/editableuiview~EditableUIView}
 	 * will create it. Otherwise, the existing element will be used.
 	 */
-	constructor( locale, editableElement ) {
-		super( locale, editableElement );
-
-		const bind = this.bindTemplate;
-		const t = this.t;
+	constructor( locale, editableElement, view ) {
+		super( locale, editableElement, view );
 
 		/**
 		 * The name of the editable UI view.
@@ -37,16 +34,30 @@ export default class InlineEditableUIView extends EditableUIView {
 		 */
 		this.set( 'name', null );
 
-		const getLabel = value => {
-			return t( 'Rich Text Editor, %0', [ value ] );
-		};
-
 		this.extendTemplate( {
 			attributes: {
 				role: 'textbox',
-				'aria-label': bind.to( 'name', getLabel ),
 				class: 'ck-editor__editable_inline'
 			}
 		} );
 	}
+
+	attachDomRootActions() {
+		super.attachDomRootActions();
+
+		const t = this.t;
+		const viewRoot = this.editingView.domConverter.domToView( this.element );
+		const updateAriaLabelAttribute = () => {
+			this.editingView.change( writer => {
+				if ( this.name ) {
+					writer.setAttribute( 'aria-label', t( 'Rich Text Editor, %0', [ this.name ] ), viewRoot );
+				} else {
+					writer.removeAttribute( 'aria-label', viewRoot );
+				}
+			} );
+		};
+
+		this.on( 'change:name', updateAriaLabelAttribute );
+		updateAriaLabelAttribute();
+	}
 }