Jelajahi Sumber

Removed TextAreaView and using InputTextView in image alternate text form.

Szymon Kupś 9 tahun lalu
induk
melakukan
cd06288a76

+ 3 - 3
packages/ckeditor5-image/src/imagealternatetext/imagealternatetext.js

@@ -95,7 +95,7 @@ export default class ImageAlternateText extends Plugin {
 		const form = new AlternateTextFormView( editor.locale );
 		const form = new AlternateTextFormView( editor.locale );
 
 
 		this.listenTo( form, 'submit', () => {
 		this.listenTo( form, 'submit', () => {
-			editor.execute( 'imageAlternateText', { newValue: form.labeledTextarea.inputView.element.value } );
+			editor.execute( 'imageAlternateText', { newValue: form.lebeledInput.inputView.element.value } );
 			this._hideBalloonPanel();
 			this._hideBalloonPanel();
 		} );
 		} );
 
 
@@ -128,9 +128,9 @@ export default class ImageAlternateText extends Plugin {
 			imageToolbar.hide();
 			imageToolbar.hide();
 		}
 		}
 
 
-		this.form.labeledTextarea.value = command.value || '';
+		this.form.lebeledInput.value = command.value || '';
 		this.balloonPanel.attach();
 		this.balloonPanel.attach();
-		this.form.labeledTextarea.select();
+		this.form.lebeledInput.select();
 	}
 	}
 
 
 	/**
 	/**

+ 6 - 6
packages/ckeditor5-image/src/imagealternatetext/ui/alternatetextformview.js

@@ -11,7 +11,7 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import Template from '@ckeditor/ckeditor5-ui/src/template';
 import Template from '@ckeditor/ckeditor5-ui/src/template';
 import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinputview';
 import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinputview';
-import TextAreaView from './textareaview';
+import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
 import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
 import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
 
 
 /**
 /**
@@ -31,7 +31,7 @@ export default class AlternateTextFormView extends View {
 		 *
 		 *
 		 * @member {module:ui/labeledinput/labeledinputview~LabeledInputView} #labeledTextarea
 		 * @member {module:ui/labeledinput/labeledinputview~LabeledInputView} #labeledTextarea
 		 */
 		 */
-		this.labeledTextarea = this._createLabeledTextarea();
+		this.lebeledInput = this._createLabeledInputView();
 
 
 		/**
 		/**
 		 * Button used to submit the form.
 		 * Button used to submit the form.
@@ -69,7 +69,7 @@ export default class AlternateTextFormView extends View {
 			},
 			},
 
 
 			children: [
 			children: [
-				this.labeledTextarea,
+				this.lebeledInput,
 				{
 				{
 					tag: 'div',
 					tag: 'div',
 
 
@@ -115,14 +115,14 @@ export default class AlternateTextFormView extends View {
 	}
 	}
 
 
 	/**
 	/**
-	 * Creates textarea with label.
+	 * Creates input with label.
 	 *
 	 *
 	 * @private
 	 * @private
 	 * @return {module:ui/labeledinput/labeledinputview~LabeledInputView}
 	 * @return {module:ui/labeledinput/labeledinputview~LabeledInputView}
 	 */
 	 */
-	_createLabeledTextarea() {
+	_createLabeledInputView() {
 		const t = this.locale.t;
 		const t = this.locale.t;
-		const labeledInput = new LabeledInputView( this.locale, TextAreaView );
+		const labeledInput = new LabeledInputView( this.locale, InputTextView );
 		labeledInput.label = t( 'Alternate image text' );
 		labeledInput.label = t( 'Alternate image text' );
 
 
 		return labeledInput;
 		return labeledInput;

+ 0 - 64
packages/ckeditor5-image/src/imagealternatetext/ui/textareaview.js

@@ -1,64 +0,0 @@
-/**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/**
- * @module image/imagealternatetext/ui/textareaview
- */
-
-import View from '@ckeditor/ckeditor5-ui/src/view';
-import Template from '@ckeditor/ckeditor5-ui/src/template';
-import '../../../theme/textareaview/theme.scss';
-
-/**
- * The TextAreaView class.
- *
- * @extends module:ui/view~View
- */
-export default class TextAreaView extends View {
-	/**
-	 * @inheritDoc
-	 */
-	constructor( locale ) {
-		super( locale );
-
-		/**
-		 * The value of the textarea.
-		 *
-		 * @observable
-		 * @member {String} #value
-		 */
-		this.set( 'value' );
-
-		/**
-		 * The `id` attribute of the textarea (i.e. to pair with a `<label>` element).
-		 *
-		 * @observable
-		 * @member {String} #id
-		 */
-		this.set( 'id' );
-
-		const bind = this.bindTemplate;
-
-		this.template = new Template( {
-			tag: 'textarea',
-			attributes: {
-				class: [
-					'ck-textarea',
-				],
-				id: bind.to( 'id' )
-			}
-		} );
-
-		// Note: `value` cannot be an HTML attribute, because it doesn't change HTMLInputElement value once changed.
-		this.on( 'change:value', ( evt, propertyName, value ) => this.element.value = value || '' );
-	}
-
-	/**
-	 * Moves the focus to the textarea and selects the value.
-	 */
-	select() {
-		this.element.select();
-	}
-}

+ 5 - 5
packages/ckeditor5-image/tests/imagealternatetext/imagealternatetext.js

@@ -98,21 +98,21 @@ describe( 'ImageAlternateText', () => {
 		} );
 		} );
 
 
 		it( 'should set alt attribute value to textarea and select it', () => {
 		it( 'should set alt attribute value to textarea and select it', () => {
-			const spy = sinon.spy( form.labeledTextarea, 'select' );
+			const spy = sinon.spy( form.lebeledInput, 'select' );
 			setData( editor.document, '[<image src="" alt="foo bar"></image>]' );
 			setData( editor.document, '[<image src="" alt="foo bar"></image>]' );
 			button.fire( 'execute' );
 			button.fire( 'execute' );
 
 
 			sinon.assert.calledOnce( spy );
 			sinon.assert.calledOnce( spy );
-			expect( plugin.form.labeledTextarea.value ).equals( 'foo bar' );
+			expect( plugin.form.lebeledInput.value ).equals( 'foo bar' );
 		} );
 		} );
 
 
 		it( 'should set empty text to textarea and select it when there is no alt attribute', () => {
 		it( 'should set empty text to textarea and select it when there is no alt attribute', () => {
-			const spy = sinon.spy( form.labeledTextarea, 'select' );
+			const spy = sinon.spy( form.lebeledInput, 'select' );
 			setData( editor.document, '[<image src=""></image>]' );
 			setData( editor.document, '[<image src=""></image>]' );
 			button.fire( 'execute' );
 			button.fire( 'execute' );
 
 
 			sinon.assert.calledOnce( spy );
 			sinon.assert.calledOnce( spy );
-			expect( plugin.form.labeledTextarea.value ).equals( '' );
+			expect( plugin.form.lebeledInput.value ).equals( '' );
 		} );
 		} );
 	} );
 	} );
 
 
@@ -122,7 +122,7 @@ describe( 'ImageAlternateText', () => {
 			form.fire( 'submit' );
 			form.fire( 'submit' );
 
 
 			sinon.assert.calledOnce( spy );
 			sinon.assert.calledOnce( spy );
-			sinon.assert.calledWithExactly( spy, 'imageAlternateText', { newValue: form.labeledTextarea.inputView.element.value } );
+			sinon.assert.calledWithExactly( spy, 'imageAlternateText', { newValue: form.lebeledInput.inputView.element.value } );
 		} );
 		} );
 
 
 		it( 'should detach panel on cancel', () => {
 		it( 'should detach panel on cancel', () => {

+ 1 - 1
packages/ckeditor5-image/tests/imagealternatetext/ui/alternatetextformview.js

@@ -23,7 +23,7 @@ describe( 'AlternateTextFormView', () => {
 		} );
 		} );
 
 
 		it( 'should create child views', () => {
 		it( 'should create child views', () => {
-			expect( view.labeledTextarea ).to.be.instanceOf( View );
+			expect( view.lebeledInput ).to.be.instanceOf( View );
 			expect( view.saveButtonView ).to.be.instanceOf( View );
 			expect( view.saveButtonView ).to.be.instanceOf( View );
 			expect( view.cancelButtonView ).to.be.instanceOf( View );
 			expect( view.cancelButtonView ).to.be.instanceOf( View );
 		} );
 		} );

+ 0 - 70
packages/ckeditor5-image/tests/imagealternatetext/ui/textareaview.js

@@ -1,70 +0,0 @@
-/**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-import TextAreaView from '../../../src/imagealternatetext/ui/textareaview';
-
-describe( 'TextAreaView', () => {
-	let view;
-
-	beforeEach( () => {
-		view = new TextAreaView();
-
-		view.init();
-	} );
-
-	describe( 'constructor()', () => {
-		it( 'should creates element from template', () => {
-			expect( view.element.tagName ).to.equal( 'TEXTAREA' );
-			expect( view.element.classList.contains( 'ck-textarea' ) ).to.be.true;
-		} );
-	} );
-
-	describe( 'DOM bindings', () => {
-		beforeEach( () => {
-			view.value = 'foo';
-			view.id = 'bar';
-		} );
-
-		describe( 'value', () => {
-			it( 'should react on view#value', () => {
-				expect( view.element.value ).to.equal( 'foo' );
-
-				view.value = 'baz';
-
-				expect( view.element.value ).to.equal( 'baz' );
-			} );
-
-			it( 'should set to empty string when using `falsy` values', () => {
-				[ undefined, false, null ].forEach( ( value ) => {
-					view.value = value;
-
-					expect( view.element.value ).to.equal( '' );
-				} );
-			} );
-		} );
-
-		describe( 'id', () => {
-			it( 'should react on view#id', () => {
-				expect( view.element.id ).to.equal( 'bar' );
-
-				view.id = 'baz';
-
-				expect( view.element.id ).to.equal( 'baz' );
-			} );
-		} );
-	} );
-
-	describe( 'select', () => {
-		it( 'should select input value', () => {
-			const selectSpy = sinon.spy( view.element, 'select' );
-
-			view.select();
-
-			expect( selectSpy.calledOnce ).to.true;
-
-			selectSpy.restore();
-		} );
-	} );
-} );

+ 0 - 25
packages/ckeditor5-image/theme/textareaview/theme.scss

@@ -1,25 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_spacing';
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_colors';
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_rounded';
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_shadow';
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_states';
-
-// Textarea view.
-textarea.ck-textarea {
-	@include ck-rounded-corners();
-	@include ck-box-shadow( $ck-inner-shadow );
-
-	border: 1px solid ck-border-color( 'foreground' );
-	padding: ck-spacing( 'medium' );
-	min-width: 250px;
-	min-height: 60px;
-	resize: none;
-
-	&:focus {
-		@include ck-focus-ring();
-		@include ck-box-shadow( $ck-focus-outer-shadow, $ck-inner-shadow );
-	}
-}