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

Added TextareaView to alternate text form.

Szymon Kupś 9 лет назад
Родитель
Сommit
37d56401a1

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

@@ -11,7 +11,7 @@ import View from 'ckeditor5-ui/src/view';
 import ButtonView from 'ckeditor5-ui/src/button/buttonview';
 import Template from 'ckeditor5-ui/src/template';
 import LabeledInputView from 'ckeditor5-ui/src/labeledinput/labeledinputview';
-import InputTextView from 'ckeditor5-ui/src/inputtext/inputtextview';
+import TextAreaView from './textareaview';
 import submitHandler from 'ckeditor5-ui/src/bindings/submithandler';
 
 export default class AlternateTextFormView extends View{
@@ -94,7 +94,7 @@ export default class AlternateTextFormView extends View{
 	_createAlternateTextInput() {
 		const t = this.locale.t;
 
-		const labeledInput = new LabeledInputView( this.locale, InputTextView );
+		const labeledInput = new LabeledInputView( this.locale, TextAreaView );
 
 		labeledInput.label = t( 'Alternate image text' );
 

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

@@ -0,0 +1,63 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module image/imagealternatetext/ui/textareaview
+ */
+
+import View from 'ckeditor5-ui/src/view';
+import Template from 'ckeditor5-ui/src/template';
+
+/**
+ * The textarea view 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();
+	}
+}

+ 11 - 3
packages/ckeditor5-image/src/imagetoolbar.js

@@ -7,6 +7,7 @@
  * @module image/imagetoolbar
  */
 
+import Template from 'ckeditor5-ui/src/template';
 import Plugin from 'ckeditor5-core/src/plugin';
 import ToolbarView from 'ckeditor5-ui/src/toolbar/toolbarview';
 import { isImageWidget } from './utils';
@@ -31,12 +32,19 @@ export default class ImageToolbar extends Plugin {
 			return;
 		}
 
-		this._panel = new ImageBalloonPanel( editor );
-
-		const panel = this._panel;
+		const panel = this._panel = new ImageBalloonPanel( editor );
 		const promises = [];
 		const toolbar = new ToolbarView();
 
+		// Add CSS class to the panel.
+		Template.extend( panel.template, {
+			attributes: {
+				class: [
+					'ck-toolbar__container',
+				]
+			}
+		} );
+
 		// Add toolbar to balloon panel.
 		promises.push( panel.content.add( toolbar ) );
 

+ 0 - 9
packages/ckeditor5-image/src/ui/imageballoonpanel.js

@@ -7,7 +7,6 @@
  * @module image/ui/imageballoonpanel
  */
 
-import Template from 'ckeditor5-ui/src/template';
 import throttle from 'ckeditor5-utils/src/lib/lodash/throttle';
 import global from 'ckeditor5-utils/src/dom/global';
 import BalloonPanelView from 'ckeditor5-ui/src/balloonpanel/balloonpanelview';
@@ -45,14 +44,6 @@ export default class ImageBalloonPanel extends BalloonPanelView {
 		this.editor = editor;
 		const editingView = editor.editing.view;
 
-		Template.extend( this.template, {
-			attributes: {
-				class: [
-					'ck-toolbar__container',
-				]
-			}
-		} );
-
 		// Let the focusTracker know about new focusable UI element.
 		editor.ui.focusTracker.add( this.element );
 

+ 21 - 0
packages/ckeditor5-image/theme/theme.scss

@@ -2,6 +2,10 @@
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 @import '~ckeditor5-theme-lark/theme/helpers/_spacing';
+@import '~ckeditor5-theme-lark/theme/helpers/_colors';
+@import '~ckeditor5-theme-lark/theme/helpers/_rounded';
+@import '~ckeditor5-theme-lark/theme/helpers/_shadow';
+@import '~ckeditor5-theme-lark/theme/helpers/_states';
 
 // Common styles applied to all widgets.
 .ck-widget {
@@ -61,3 +65,20 @@
 		}
 	}
 }
+
+// Textarea view.
+// TODO: how to define by class only without textarea
+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;
+	resize: none;
+
+	&:focus {
+		@include ck-focus-ring();
+		@include ck-box-shadow( $ck-focus-outer-shadow, $ck-inner-shadow );
+	}
+}