Преглед изворни кода

Refactored code style and docs.

Oskar Wrobel пре 9 година
родитељ
комит
39377ce481

+ 11 - 14
packages/ckeditor5-link/src/link.js

@@ -17,7 +17,7 @@ import LinkBalloonPanel from './ui/linkballoonpanel.js';
 import LinkBalloonPanelView from './ui/linkballoonpanelview.js';
 
 /**
- * The link feature.
+ * The link feature. It introduces the Link and Unlink buttons and the <kbd>Ctrl+L</kbd> keystroke.
  *
  * It uses the {@link basic-styles.LinkEngine link engine feature}.
  *
@@ -36,15 +36,13 @@ export default class Link extends Feature {
 	 * @inheritDoc
 	 */
 	init() {
-		const viewDocument = this.editor.editing.view;
-
 		// Register document click observer.
-		viewDocument.addObserver( ClickObserver );
+		this.editor.editing.view.addObserver( ClickObserver );
 
 		/**
 		 * Link balloon panel component.
 		 *
-		 * @member {link.ui.LinkBalloonPanel}
+		 * @member {link.LinkBalloonPanel}
 		 */
 		this.balloonPanel = this._createBalloonPanel();
 
@@ -55,7 +53,7 @@ export default class Link extends Feature {
 
 	/**
 	 * Create toolbar link button. Click on button will show
-	 * {@link link.ui.LinkBalloonPanel LinkBalloonPanel} attached to the selection.
+	 * {@link link.LinkBalloonPanel LinkBalloonPanel} attached to the selection.
 	 *
 	 * @private
 	 */
@@ -71,7 +69,7 @@ export default class Link extends Feature {
 			isOn: false,
 			label: t( 'Link' ),
 			icon: 'link',
-			keystroke: 'CTRL+l'
+			keystroke: 'CTRL+L'
 		} );
 
 		// Bind button model to command.
@@ -111,11 +109,11 @@ export default class Link extends Feature {
 		// Bind button model to command.
 		unlinkButtonModel.bind( 'isEnabled' ).to( unlinkCommand, 'hasValue' );
 
-		// Execute unlink command and hide panel if is opened.
+		// Execute unlink command and hide panel if is open.
 		this.listenTo( unlinkButtonModel, 'execute', () => {
 			editor.execute( 'unlink' );
 
-			if ( this.balloonPanel && this.balloonPanel.view.isVisible ) {
+			if ( this.balloonPanel.view.isVisible ) {
 				this.balloonPanel.view.hide();
 			}
 		} );
@@ -125,7 +123,7 @@ export default class Link extends Feature {
 	}
 
 	/**
-	 * Create {@link link.ui.LinkBalloonPanel LinkBalloonPanel} instance
+	 * Create {@link link.LinkBalloonPanel LinkBalloonPanel} instance
 	 * and attach link command to LinkBalloonPanelModel#execute event.
 	 *
 	 *	                       +------------------------------------+
@@ -161,7 +159,7 @@ export default class Link extends Feature {
 	 *	                            |                   +----+ |
 	 *	                            +--------------------------+
 	 * @private
-	 * @returns {link.ui.LinkBalloonPanel} Link balloon panel instance.
+	 * @returns {link.LinkBalloonPanel} Link balloon panel instance.
 	 */
 	_createBalloonPanel() {
 		const editor = this.editor;
@@ -170,8 +168,7 @@ export default class Link extends Feature {
 
 		// Create the model of the panel.
 		const panelModel = new Model( {
-			maxWidth: 300,
-			url: linkCommand.value
+			maxWidth: 300
 		} );
 
 		// Bind panel model to command.
@@ -222,7 +219,7 @@ export default class Link extends Feature {
 	}
 
 	/**
-	 * Show {@link link.ui.LinkBalloonPanel LinkBalloonPanel} and attach to target element.
+	 * Show {@link link#balloonPanel LinkBalloonPanel} and attach to target element.
 	 * If selection is collapsed and is placed inside link element, then panel will be attached
 	 * to whole link element, otherwise will be attached to the selection.
 	 *

+ 1 - 1
packages/ckeditor5-link/src/linkelement.js

@@ -6,7 +6,7 @@
 import AttributeElement from '../engine/view/attributeelement.js';
 
 /**
- * This class is to identifying that specified {@link engine.view.Node} is a {@link link.LinkElement} instance.
+ * This class is to identify that specified {@link engine.view.Node} is a {@link link.LinkElement} instance.
  * E.g. There could be a situation when different features will create nodes with the same names, and we need to identify them.
  *
  * @memberOf link

+ 11 - 13
packages/ckeditor5-link/src/ui/linkballoonpanel.js

@@ -17,7 +17,7 @@ import InputTextView from '../../ui/inputtext/inputtextview.js';
 /**
  * The link balloon panel controller class.
  *
- * 		const model = new Model( {
+ *		const model = new Model( {
  *			maxWidth: 300,
  *			url: 'http://ckeditor.com'
  *		} );
@@ -25,16 +25,16 @@ import InputTextView from '../../ui/inputtext/inputtextview.js';
  *		// An instance of LinkBalloonPanel.
  *		new LinkBalloonPanel( model, new LinkBalloonPanelView() );
  *
- * See {@link link.ui.LinkBalloonPanelView}.
+ * See {@link link.LinkBalloonPanelView}.
  *
- * @memberOf link.ui
+ * @memberOf link
  * @extends ui.balloonPanel.BalloonPanel
  */
 export default class LinkBalloonPanel extends BalloonPanel {
 	/**
-	 * Creates an instance of {@link link.ui.LinkBalloonPanel} class.
+	 * Creates an instance of {@link link.LinkBalloonPanel} class.
 	 *
-	 * @param {link.ui.balloonPanel.LinkBalloonPanelModel} model Model of this link balloon panel.
+	 * @param {link.balloonPanel.LinkBalloonPanelModel} model Model of this link balloon panel.
 	 * @param {ui.View} view View of this link balloon panel.
 	 */
 	constructor( model, view ) {
@@ -57,28 +57,28 @@ export default class LinkBalloonPanel extends BalloonPanel {
 		/**
 		 * Instance of {@link ui.form.Form Form} component.
 		 *
-		 * @member {ui.form.Form} link.ui.LinkBalloonPanel#form
+		 * @member {ui.form.Form} link.LinkBalloonPanel#form
 		 */
 		this.form = new LinkForm( formModel, new LinkFormView( this.locale ) );
 
 		/**
 		 * Button component for submitting form.
 		 *
-		 * @member {ui.button.Button} link.ui.LinkBalloonPanel#saveButton
+		 * @member {ui.button.Button} link.LinkBalloonPanel#saveButton
 		 */
 		this.saveButton = this._createSaveButton();
 
 		/**
 		 * Button component for canceling form.
 		 *
-		 * @member {ui.button.Button} link.ui.LinkBalloonPanel#cancelButton
+		 * @member {ui.button.Button} link.LinkBalloonPanel#cancelButton
 		 */
 		this.cancelButton = this._createCancelButton();
 
 		/**
 		 * Button component for unlinking.
 		 *
-		 * @member {ui.button.Button} link.ui.LinkBalloonPanel#unlinkButton
+		 * @member {ui.button.Button} link.LinkBalloonPanel#unlinkButton
 		 */
 		this.unlinkButton = this._createUnlinkButton();
 
@@ -111,7 +111,7 @@ export default class LinkBalloonPanel extends BalloonPanel {
 		/**
 		 * Input component for providing `href` value.
 		 *
-		 * @member {ui.input.LabeledInput} link.ui.LinkBalloonPanel#urlInput
+		 * @member {ui.input.LabeledInput} link.LinkBalloonPanel#urlInput
 		 */
 		this.urlInput = new LabeledInput( model, new LabeledInputView( this.locale ), inputText );
 
@@ -173,15 +173,13 @@ export default class LinkBalloonPanel extends BalloonPanel {
 			isEnabled: true,
 			isOn: false,
 			label: t( 'Unlink' ),
-			withText: true
+			icon: 'unlink'
 		} );
 
 		unlinkModel.on( 'execute', () => this.model.fire( 'execute-unlink' ) );
 
 		const button = new Button( unlinkModel, new ButtonView( this.locale ) );
 
-		button.view.element.classList.add( 'ck-button-action' );
-
 		return button;
 	}
 }

+ 2 - 2
packages/ckeditor5-link/src/ui/linkballoonpanelview.js

@@ -9,9 +9,9 @@ import BalloonPanelView from '../../ui/balloonpanel/balloonpanelview.js';
 /**
  * The link balloon panel view class.
  *
- * See {@link link.ui.LinkBalloonPanel}.
+ * See {@link link.LinkBalloonPanel}.
  *
- * @memberOf link.ui
+ * @memberOf link
  * @extends ui.balloonPanel.BalloonPanelView
  */
 export default class LinkBalloonPanelView extends BalloonPanelView {

+ 4 - 4
packages/ckeditor5-link/src/ui/linkform.js

@@ -10,16 +10,16 @@ import Form from '../../ui/form/form.js';
  *
  *		new LinkForm( new Model(), new LinkFormView() );
  *
- * See {@link link.ui.LinkFormView}.
+ * See {@link link.LinkFormView}.
  *
- * @memberOf link.ui
+ * @memberOf link
  * @extends ui.form.Form
  */
 export default class LinkForm extends Form {
 	/**
-	 * Creates an instance of {@link link.ui.LinkForm} class.
+	 * Creates an instance of {@link link.LinkForm} class.
 	 *
-	 * @param {link.ui.LinkFormModel} model Model of this link form.
+	 * @param {link.LinkFormModel} model Model of this link form.
 	 * @param {ui.View} view View of this link form.
 	 */
 	constructor( model, view ) {

+ 4 - 4
packages/ckeditor5-link/src/ui/linkformview.js

@@ -9,9 +9,9 @@ import FormView from '../../ui/form/formview.js';
 /**
  * The link form view controller class.
  *
- * See {@link link.ui.LinkForm}.
+ * See {@link link.LinkForm}.
  *
- * @memberOf link.ui
+ * @memberOf link
  * @extends ui.form.FormView
  */
 export default class LinkFormView extends FormView {
@@ -34,12 +34,12 @@ export default class LinkFormView extends FormView {
 				tag: 'div',
 				attributes: {
 					class: [
-						'ck-link-form-actions'
+						'ck-link-form__actions'
 					]
 				}
 			}
 		];
 
-		this.register( 'actions', 'div.ck-link-form-actions' );
+		this.register( 'actions', 'div.ck-link-form__actions' );
 	}
 }

+ 1 - 1
packages/ckeditor5-link/src/unlinkcommand.js

@@ -25,7 +25,7 @@ export default class UnlinkCommand extends Command {
 		 * the command's attribute set. For range selection it means that all nodes inside have the attribute applied.
 		 *
 		 * @observable
-		 * @member {Boolean} core.command.ToggleAttributeCommand#value
+		 * @member {Boolean} core.command.ToggleAttributeCommand#hasValue
 		 */
 		this.set( 'hasValue', undefined );
 

+ 10 - 8
packages/ckeditor5-link/tests/link.js

@@ -29,16 +29,16 @@ describe( 'Link', () => {
 		return ClassicTestEditor.create( editorElement, {
 			features: [ Link ]
 		} )
-			.then( newEditor => {
-				newEditor.editing.view.attachDomRoot( editorElement );
+		.then( newEditor => {
+			newEditor.editing.view.attachDomRoot( editorElement );
 
-				editor = newEditor;
+			editor = newEditor;
 
-				linkFeature = editor.plugins.get( Link );
-				linkButton = editor.ui.featureComponents.create( 'link' );
-				unlinkButton = editor.ui.featureComponents.create( 'unlink' );
-				balloonPanel = linkFeature.balloonPanel;
-			} );
+			linkFeature = editor.plugins.get( Link );
+			linkButton = editor.ui.featureComponents.create( 'link' );
+			unlinkButton = editor.ui.featureComponents.create( 'unlink' );
+			balloonPanel = linkFeature.balloonPanel;
+		} );
 	} );
 
 	afterEach( () => {
@@ -81,6 +81,8 @@ describe( 'Link', () => {
 		} );
 
 		it( 'should not open panel on linkButton#model execute event, when editor is not focused', () => {
+			editor.editing.view.isFocused = false;
+
 			linkButton.model.fire( 'execute' );
 
 			expect( linkFeature.balloonPanel.view.isVisible ).to.false;

+ 8 - 8
packages/ckeditor5-link/tests/manual/link.md

@@ -7,7 +7,7 @@
 1. Select fragment of regular text.
 2. Click toolbar link button.
 3. Check if balloon panel attached to the selection appeared.
-4. Fill in `Link URL` input on panel.
+4. Fill in `Link URL` input in the panel.
 5. Click `Save` button.
 6. Check if selected text is converted into a link.
 
@@ -16,17 +16,17 @@
 1. Set collapsed selection inside a regular text.
 2. Click toolbar link button.
 3. Check if balloon panel attached to the selection appeared.
-4. Fill in `Link URL` input on panel.
+4. Fill in `Link URL` input in the panel.
 5. Click `Save` button.
-6. Check if new link with anchor text the same as url value is inserted and selected.
+6. Check if new link with anchor text the same as url value has been inserted and selected.
 
 ### Edit link
 
-1. Click on link element.
+1. Click a link element.
 2. Check if balloon panel attached to the link element appeared.
 3. Change `Link URL` input value.
 4. Click `Save` button.
-5. Check if link href value is changed.
+5. Check if link href value has changed.
 
 ### Keyboard support
 
@@ -36,10 +36,10 @@
 
 1. Select link fragment.
 2. Click toolbar unlink button.
-3. Check if selected text is converted into a regular text.
+3. Check if selected text has been converted into a regular text.
 
 ### Unlink whole link
 
-1. Click on link element.
+1. Click a link element.
 2. Click toolbar unlink button.
-3. Check if link is converted into a regular text.
+3. Check if link has been converted into a regular text.

+ 1 - 1
packages/ckeditor5-link/tests/ui/linkformview.js

@@ -28,7 +28,7 @@ describe( 'LinkFormView', () => {
 
 		it( 'should register "actions" region', () => {
 			expect( view.regions.get( 1 ).name ).to.equal( 'actions' );
-			expect( view.regions.get( 1 ).element ).to.equal( view.element.querySelector( '.ck-link-form-actions' ) );
+			expect( view.regions.get( 1 ).element ).to.equal( view.element.querySelector( '.ck-link-form__actions' ) );
 		} );
 	} );
 } );

+ 24 - 4
packages/ckeditor5-link/theme/components/linkballoonpanel.scss

@@ -1,11 +1,31 @@
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
-.ck-link-balloon-panel {
-	padding: ck-spacing();
+.ck-link {
+	&-balloon-panel {
+		padding: ck-spacing();
+		background: ck-color( 'foreground' );
 
-	// Box to accommodate buttons.
-	.ck-link-form-actions {
+		&.ck-balloon-panel {
+			&_arrow_se,
+			&_arrow_sw {
+				&:after {
+					border-bottom-color: ck-color( 'foreground' );
+				}
+			}
+
+			&_arrow_ne,
+			&_arrow_nw {
+				border-top-color: ck-color( 'foreground' );
+			}
+		}
+
+		.ck-input-text {
+			background: ck-color( 'background' );
+		}
+	}
+
+	&-form__actions {
 		clear: both;
 		padding-top: ck-spacing();