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

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';
 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}.
  * It uses the {@link basic-styles.LinkEngine link engine feature}.
  *
  *
@@ -36,15 +36,13 @@ export default class Link extends Feature {
 	 * @inheritDoc
 	 * @inheritDoc
 	 */
 	 */
 	init() {
 	init() {
-		const viewDocument = this.editor.editing.view;
-
 		// Register document click observer.
 		// Register document click observer.
-		viewDocument.addObserver( ClickObserver );
+		this.editor.editing.view.addObserver( ClickObserver );
 
 
 		/**
 		/**
 		 * Link balloon panel component.
 		 * Link balloon panel component.
 		 *
 		 *
-		 * @member {link.ui.LinkBalloonPanel}
+		 * @member {link.LinkBalloonPanel}
 		 */
 		 */
 		this.balloonPanel = this._createBalloonPanel();
 		this.balloonPanel = this._createBalloonPanel();
 
 
@@ -55,7 +53,7 @@ export default class Link extends Feature {
 
 
 	/**
 	/**
 	 * Create toolbar link button. Click on button will show
 	 * 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
 	 * @private
 	 */
 	 */
@@ -71,7 +69,7 @@ export default class Link extends Feature {
 			isOn: false,
 			isOn: false,
 			label: t( 'Link' ),
 			label: t( 'Link' ),
 			icon: 'link',
 			icon: 'link',
-			keystroke: 'CTRL+l'
+			keystroke: 'CTRL+L'
 		} );
 		} );
 
 
 		// Bind button model to command.
 		// Bind button model to command.
@@ -111,11 +109,11 @@ export default class Link extends Feature {
 		// Bind button model to command.
 		// Bind button model to command.
 		unlinkButtonModel.bind( 'isEnabled' ).to( unlinkCommand, 'hasValue' );
 		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', () => {
 		this.listenTo( unlinkButtonModel, 'execute', () => {
 			editor.execute( 'unlink' );
 			editor.execute( 'unlink' );
 
 
-			if ( this.balloonPanel && this.balloonPanel.view.isVisible ) {
+			if ( this.balloonPanel.view.isVisible ) {
 				this.balloonPanel.view.hide();
 				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.
 	 * and attach link command to LinkBalloonPanelModel#execute event.
 	 *
 	 *
 	 *	                       +------------------------------------+
 	 *	                       +------------------------------------+
@@ -161,7 +159,7 @@ export default class Link extends Feature {
 	 *	                            |                   +----+ |
 	 *	                            |                   +----+ |
 	 *	                            +--------------------------+
 	 *	                            +--------------------------+
 	 * @private
 	 * @private
-	 * @returns {link.ui.LinkBalloonPanel} Link balloon panel instance.
+	 * @returns {link.LinkBalloonPanel} Link balloon panel instance.
 	 */
 	 */
 	_createBalloonPanel() {
 	_createBalloonPanel() {
 		const editor = this.editor;
 		const editor = this.editor;
@@ -170,8 +168,7 @@ export default class Link extends Feature {
 
 
 		// Create the model of the panel.
 		// Create the model of the panel.
 		const panelModel = new Model( {
 		const panelModel = new Model( {
-			maxWidth: 300,
-			url: linkCommand.value
+			maxWidth: 300
 		} );
 		} );
 
 
 		// Bind panel model to command.
 		// 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
 	 * 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.
 	 * 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';
 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.
  * 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
  * @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.
  * The link balloon panel controller class.
  *
  *
- * 		const model = new Model( {
+ *		const model = new Model( {
  *			maxWidth: 300,
  *			maxWidth: 300,
  *			url: 'http://ckeditor.com'
  *			url: 'http://ckeditor.com'
  *		} );
  *		} );
@@ -25,16 +25,16 @@ import InputTextView from '../../ui/inputtext/inputtextview.js';
  *		// An instance of LinkBalloonPanel.
  *		// An instance of LinkBalloonPanel.
  *		new LinkBalloonPanel( model, new LinkBalloonPanelView() );
  *		new LinkBalloonPanel( model, new LinkBalloonPanelView() );
  *
  *
- * See {@link link.ui.LinkBalloonPanelView}.
+ * See {@link link.LinkBalloonPanelView}.
  *
  *
- * @memberOf link.ui
+ * @memberOf link
  * @extends ui.balloonPanel.BalloonPanel
  * @extends ui.balloonPanel.BalloonPanel
  */
  */
 export default class LinkBalloonPanel extends 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.
 	 * @param {ui.View} view View of this link balloon panel.
 	 */
 	 */
 	constructor( model, view ) {
 	constructor( model, view ) {
@@ -57,28 +57,28 @@ export default class LinkBalloonPanel extends BalloonPanel {
 		/**
 		/**
 		 * Instance of {@link ui.form.Form Form} component.
 		 * 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 ) );
 		this.form = new LinkForm( formModel, new LinkFormView( this.locale ) );
 
 
 		/**
 		/**
 		 * Button component for submitting form.
 		 * Button component for submitting form.
 		 *
 		 *
-		 * @member {ui.button.Button} link.ui.LinkBalloonPanel#saveButton
+		 * @member {ui.button.Button} link.LinkBalloonPanel#saveButton
 		 */
 		 */
 		this.saveButton = this._createSaveButton();
 		this.saveButton = this._createSaveButton();
 
 
 		/**
 		/**
 		 * Button component for canceling form.
 		 * Button component for canceling form.
 		 *
 		 *
-		 * @member {ui.button.Button} link.ui.LinkBalloonPanel#cancelButton
+		 * @member {ui.button.Button} link.LinkBalloonPanel#cancelButton
 		 */
 		 */
 		this.cancelButton = this._createCancelButton();
 		this.cancelButton = this._createCancelButton();
 
 
 		/**
 		/**
 		 * Button component for unlinking.
 		 * Button component for unlinking.
 		 *
 		 *
-		 * @member {ui.button.Button} link.ui.LinkBalloonPanel#unlinkButton
+		 * @member {ui.button.Button} link.LinkBalloonPanel#unlinkButton
 		 */
 		 */
 		this.unlinkButton = this._createUnlinkButton();
 		this.unlinkButton = this._createUnlinkButton();
 
 
@@ -111,7 +111,7 @@ export default class LinkBalloonPanel extends BalloonPanel {
 		/**
 		/**
 		 * Input component for providing `href` value.
 		 * 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 );
 		this.urlInput = new LabeledInput( model, new LabeledInputView( this.locale ), inputText );
 
 
@@ -173,15 +173,13 @@ export default class LinkBalloonPanel extends BalloonPanel {
 			isEnabled: true,
 			isEnabled: true,
 			isOn: false,
 			isOn: false,
 			label: t( 'Unlink' ),
 			label: t( 'Unlink' ),
-			withText: true
+			icon: 'unlink'
 		} );
 		} );
 
 
 		unlinkModel.on( 'execute', () => this.model.fire( 'execute-unlink' ) );
 		unlinkModel.on( 'execute', () => this.model.fire( 'execute-unlink' ) );
 
 
 		const button = new Button( unlinkModel, new ButtonView( this.locale ) );
 		const button = new Button( unlinkModel, new ButtonView( this.locale ) );
 
 
-		button.view.element.classList.add( 'ck-button-action' );
-
 		return button;
 		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.
  * The link balloon panel view class.
  *
  *
- * See {@link link.ui.LinkBalloonPanel}.
+ * See {@link link.LinkBalloonPanel}.
  *
  *
- * @memberOf link.ui
+ * @memberOf link
  * @extends ui.balloonPanel.BalloonPanelView
  * @extends ui.balloonPanel.BalloonPanelView
  */
  */
 export default class LinkBalloonPanelView extends 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() );
  *		new LinkForm( new Model(), new LinkFormView() );
  *
  *
- * See {@link link.ui.LinkFormView}.
+ * See {@link link.LinkFormView}.
  *
  *
- * @memberOf link.ui
+ * @memberOf link
  * @extends ui.form.Form
  * @extends ui.form.Form
  */
  */
 export default class LinkForm extends 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.
 	 * @param {ui.View} view View of this link form.
 	 */
 	 */
 	constructor( model, view ) {
 	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.
  * The link form view controller class.
  *
  *
- * See {@link link.ui.LinkForm}.
+ * See {@link link.LinkForm}.
  *
  *
- * @memberOf link.ui
+ * @memberOf link
  * @extends ui.form.FormView
  * @extends ui.form.FormView
  */
  */
 export default class LinkFormView extends FormView {
 export default class LinkFormView extends FormView {
@@ -34,12 +34,12 @@ export default class LinkFormView extends FormView {
 				tag: 'div',
 				tag: 'div',
 				attributes: {
 				attributes: {
 					class: [
 					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.
 		 * the command's attribute set. For range selection it means that all nodes inside have the attribute applied.
 		 *
 		 *
 		 * @observable
 		 * @observable
-		 * @member {Boolean} core.command.ToggleAttributeCommand#value
+		 * @member {Boolean} core.command.ToggleAttributeCommand#hasValue
 		 */
 		 */
 		this.set( 'hasValue', undefined );
 		this.set( 'hasValue', undefined );
 
 

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

@@ -29,16 +29,16 @@ describe( 'Link', () => {
 		return ClassicTestEditor.create( editorElement, {
 		return ClassicTestEditor.create( editorElement, {
 			features: [ Link ]
 			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( () => {
 	afterEach( () => {
@@ -81,6 +81,8 @@ describe( 'Link', () => {
 		} );
 		} );
 
 
 		it( 'should not open panel on linkButton#model execute event, when editor is not focused', () => {
 		it( 'should not open panel on linkButton#model execute event, when editor is not focused', () => {
+			editor.editing.view.isFocused = false;
+
 			linkButton.model.fire( 'execute' );
 			linkButton.model.fire( 'execute' );
 
 
 			expect( linkFeature.balloonPanel.view.isVisible ).to.false;
 			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.
 1. Select fragment of regular text.
 2. Click toolbar link button.
 2. Click toolbar link button.
 3. Check if balloon panel attached to the selection appeared.
 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.
 5. Click `Save` button.
 6. Check if selected text is converted into a link.
 6. Check if selected text is converted into a link.
 
 
@@ -16,17 +16,17 @@
 1. Set collapsed selection inside a regular text.
 1. Set collapsed selection inside a regular text.
 2. Click toolbar link button.
 2. Click toolbar link button.
 3. Check if balloon panel attached to the selection appeared.
 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.
 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
 ### Edit link
 
 
-1. Click on link element.
+1. Click a link element.
 2. Check if balloon panel attached to the link element appeared.
 2. Check if balloon panel attached to the link element appeared.
 3. Change `Link URL` input value.
 3. Change `Link URL` input value.
 4. Click `Save` button.
 4. Click `Save` button.
-5. Check if link href value is changed.
+5. Check if link href value has changed.
 
 
 ### Keyboard support
 ### Keyboard support
 
 
@@ -36,10 +36,10 @@
 
 
 1. Select link fragment.
 1. Select link fragment.
 2. Click toolbar unlink button.
 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
 ### Unlink whole link
 
 
-1. Click on link element.
+1. Click a link element.
 2. Click toolbar unlink button.
 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', () => {
 		it( 'should register "actions" region', () => {
 			expect( view.regions.get( 1 ).name ).to.equal( 'actions' );
 			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.
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 // 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;
 		clear: both;
 		padding-top: ck-spacing();
 		padding-top: ck-spacing();