소스 검색

Separate theme for ImageAlternateText. Update docs.

Szymon Kupś 9 년 전
부모
커밋
c96a56ca8a

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

@@ -4,7 +4,7 @@
  */
 
 /**
- * @module image/image
+ * @module image/imagealternatetext/imagealternatetext
  */
 
 import Plugin from 'ckeditor5-core/src/plugin';
@@ -17,7 +17,7 @@ import AlternateTextFormView from './ui/alternatetextformview';
 import ImageBalloonPanel from '../ui/imageballoonpanel';
 
 import alternateTextIcon from 'ckeditor5-core/theme/icons/source.svg';
-// TODO: move part of the theme to this sub-directory.
+import '../../theme/imagealternatetext/theme.scss';
 
 /**
  * The image alternate text plugin.
@@ -36,11 +36,21 @@ export default class ImageAlternateText extends Plugin {
 	 * @inheritDoc
 	 */
 	init() {
-		// TODO: docs for this._panel and this._form.
 		this._createButton();
 
 		return this._createBalloonPanel().then( panel => {
+			/**
+			 * Balloon panel containing alternate text change form.
+			 *
+			 * @member {module:image/ui/imageballoonpanel~ImageBalloonPanel} #baloonPanel
+			 */
 			this.balloonPanel = panel;
+
+			/**
+			 * Form containing textarea and buttons, used to change `alt` text value.
+			 *
+			 * @member {module:image/imagealternatetext/ui/imagealternatetextformview~AlternateTextFormView} #form
+			 */
 			this.form = panel.content.get( 0 );
 		} );
 	}
@@ -72,6 +82,12 @@ export default class ImageAlternateText extends Plugin {
 		} );
 	}
 
+	/**
+	 * Creates balloon panel.
+	 *
+	 * @private
+	 * @return {Promise.<module:image/ui/imageballoonpanel~ImageBalloonPanel>}
+	 */
 	_createBalloonPanel() {
 		const editor = this.editor;
 
@@ -106,6 +122,11 @@ export default class ImageAlternateText extends Plugin {
 		] ).then( () => panel ) ;
 	}
 
+	/**
+	 * Shows the balloon panel.
+	 *
+	 * @private
+	 */
 	_showBalloonPanel() {
 		const editor = this.editor;
 		const command = editor.commands.get( 'imageAlternateText' );
@@ -120,6 +141,11 @@ export default class ImageAlternateText extends Plugin {
 		this.form.labeledTextarea.select();
 	}
 
+	/**
+	 * Hides the balloon panel.
+	 *
+	 * @private
+	 */
 	_hideBalloonPanel() {
 		const editor = this.editor;
 		this.balloonPanel.detach();

+ 8 - 1
packages/ckeditor5-image/src/imagealternatetext/imagealternatetextcommand.js

@@ -21,7 +21,14 @@ export default class ImageAlternateTextCommand extends Command {
 	 */
 	constructor( editor ) {
 		super( editor );
-
+		/**
+		 * The current command value - `false` if there is no `alt` attribute, otherwise contains string wilt `alt`
+		 * attribute value.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {String|Boolean} #value
+		 */
 		this.set( 'value', false );
 
 		// Update current value and refresh state each time something change in model document.

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

@@ -4,7 +4,7 @@
  */
 
 /**
- * @module image/ui/imagealternativetextformview
+ * @module image/imagealternatetext/ui/imagealternatetextformview
  */
 
 import View from 'ckeditor5-ui/src/view';

+ 32 - 0
packages/ckeditor5-image/theme/imagealternatetext/theme.scss

@@ -0,0 +1,32 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+@import '~ckeditor5-theme-lark/theme/helpers/_spacing';
+
+.ck-alternate-text {
+	&-form {
+		padding: ck-spacing( 'large' );
+		overflow: hidden;
+
+		.ck-label {
+			margin-bottom: ck-spacing( 'small' );
+		}
+
+		&__actions {
+			clear: both;
+			padding-top: ck-spacing( 'large' );
+
+			.ck-button {
+				float: right;
+
+				& + .ck-button {
+					margin-right: ck-spacing( 'medium' );
+
+					& + .ck-button {
+						float: left;
+					}
+				}
+			}
+		}
+	}
+}

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

@@ -37,35 +37,6 @@
 	}
 }
 
-// Alternate text form.
-.ck-alternate-text {
-	&-form {
-		padding: ck-spacing( 'large' );
-		overflow: hidden;
-
-		.ck-label {
-			margin-bottom: ck-spacing( 'small' );
-		}
-
-		&__actions {
-			clear: both;
-			padding-top: ck-spacing( 'large' );
-
-			.ck-button {
-				float: right;
-
-				& + .ck-button {
-					margin-right: ck-spacing( 'medium' );
-
-					& + .ck-button {
-						float: left;
-					}
-				}
-			}
-		}
-	}
-}
-
 // Textarea view.
 // TODO: how to define by class only without textarea
 textarea.ck-textarea {