Skip to content

Commit

Permalink
Merge branch 'master' into i/6087
Browse files Browse the repository at this point in the history
  • Loading branch information
@oleq
oleq committed Apr 6, 2020
2 parents 99587a5 + 167a781 commit 277686f
Show file tree
Hide file tree
Showing 10 changed files with 134 additions and 120 deletions.
2 changes: 1 addition & 1 deletion packages/ckeditor5-ui/.travis.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ language: node_js
services:
- xvfb
node_js:
- '8'
- '10'
cache:
yarn: true
branches:
Expand Down
12 changes: 0 additions & 12 deletions packages/ckeditor5-ui/src/dropdown/dropdownview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
*/

import View from '../view';
import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';

import '../../theme/components/dropdown/dropdown.css';
Expand Down Expand Up @@ -155,14 +154,6 @@ export default class DropdownView extends View {
*/
this.set( 'panelPosition', 'auto' );

/**
* Tracks information about DOM focus in the dropdown.
*
* @readonly
* @member {module:utils/focustracker~FocusTracker}
*/
this.focusTracker = new FocusTracker();

/**
* Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}. It manages
* keystrokes of the dropdown:
Expand Down Expand Up @@ -277,9 +268,6 @@ export default class DropdownView extends View {
// Listen for keystrokes coming from within #element.
this.keystrokes.listenTo( this.element );

// Register #element in the focus tracker.
this.focusTracker.add( this.element );

const closeDropdown = ( data, cancel ) => {
if ( this.isOpen ) {
this.buttonView.focus();
Expand Down
18 changes: 18 additions & 0 deletions packages/ckeditor5-ui/src/editorui/bodycollection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,24 @@ import createElement from '@ckeditor/ckeditor5-utils/src/dom/createelement';
* @extends module:ui/viewcollection~ViewCollection
*/
export default class BodyCollection extends ViewCollection {
/**
* Creates a new instance of the {@link module:ui/editorui/bodycollection~BodyCollection}.
*
* @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor editor's locale} instance.
* @param {Iterable.<module:ui/view~View>} [initialItems] The initial items of the collection.
*/
constructor( locale, initialItems = [] ) {
super( initialItems );

/**
* The {@link module:core/editor/editor~Editor#locale editor's locale} instance.
* See the view {@link module:ui/view~View#locale locale} property.
*
* @member {module:utils/locale~Locale}
*/
this.locale = locale;
}

/**
* Attaches the body collection to the DOM body element. You need to execute this method to render the content of
* the body collection.
Expand Down
16 changes: 6 additions & 10 deletions packages/ckeditor5-ui/src/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,8 @@ export default class View {
* constructor( locale ) {
* super( locale );
*
* this.items = this.createCollection();
* const child = new ChildView( locale );
* this.items = this.createCollection( [ child ] );
*
* this.setTemplate( {
* tag: 'p',
Expand All @@ -265,21 +266,16 @@ export default class View {
* }
*
* const view = new SampleView( locale );
* const child = new ChildView( locale );
*
* view.render();
*
* // It will append <p></p> to the <body>.
* // It will append <p><child#element></p> to the <body>.
* document.body.appendChild( view.element );
*
* // From now on the child is nested under its parent, which is also reflected in DOM.
* // <p><child#element></p>
* view.items.add( child );
*
* @param {Iterable.<module:ui/view~View>} [views] Initial views of the collection.
* @returns {module:ui/viewcollection~ViewCollection} A new collection of view instances.
*/
createCollection() {
const collection = new ViewCollection();
createCollection( views ) {
const collection = new ViewCollection( views );

this._viewCollections.add( collection );

Expand Down
51 changes: 33 additions & 18 deletions packages/ckeditor5-ui/src/viewcollection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,24 +51,18 @@ export default class ViewCollection extends Collection {
/**
* Creates a new instance of the {@link module:ui/viewcollection~ViewCollection}.
*
* @param {module:utils/locale~Locale} [locale] The {@link module:core/editor/editor~Editor editor's locale} instance.
* @param {Iterable.<module:ui/view~View>} [initialItems] The initial items of the collection.
*/
constructor( locale ) {
super( {
constructor( initialItems = [] ) {
super( initialItems, {
// An #id Number attribute should be legal and not break the `ViewCollection` instance.
// https://github.com/ckeditor/ckeditor5-ui/issues/93
idProperty: 'viewUid'
} );

// Handle {@link module:ui/view~View#element} in DOM when a new view is added to the collection.
this.on( 'add', ( evt, view, index ) => {
if ( !view.isRendered ) {
view.render();
}

if ( view.element && this._parentElement ) {
this._parentElement.insertBefore( view.element, this._parentElement.children[ index ] );
}
this._renderViewIntoCollectionParent( view, index );
} );

// Handle {@link module:ui/view~View#element} in DOM when a view is removed from the collection.
Expand All @@ -78,14 +72,6 @@ export default class ViewCollection extends Collection {
}
} );

/**
* The {@link module:core/editor/editor~Editor#locale editor's locale} instance.
* See the view {@link module:ui/view~View#locale locale} property.
*
* @member {module:utils/locale~Locale}
*/
this.locale = locale;

/**
* A parent element within which child views are rendered and managed in DOM.
*
Expand All @@ -112,6 +98,11 @@ export default class ViewCollection extends Collection {
*/
setParent( elementOrDocFragment ) {
this._parentElement = elementOrDocFragment;

// Take care of the initial collection items passed to the constructor.
for ( const view of this ) {
this._renderViewIntoCollectionParent( view );
}
}

/**
Expand Down Expand Up @@ -194,6 +185,30 @@ export default class ViewCollection extends Collection {
};
}

/**
* This method {@link module:ui/view~View#render renders} a new view added to the collection.
*
* If the {@link #_parentElement parent element} of the collection is set, this method also adds
* the view's {@link module:ui/view~View#element} as a child of the parent in DOM at a specified index.
*
* **Note**: If index is not specified, the view's element is pushed as the last child
* of the parent element.
*
* @private
* @param {module:ui/view~View} view A new view added to the collection.
* @param {Number} [index] An index the view holds in the collection. When not specified,
* the view is added at the end.
*/
_renderViewIntoCollectionParent( view, index ) {
if ( !view.isRendered ) {
view.render();
}

if ( view.element && this._parentElement ) {
this._parentElement.insertBefore( view.element, this._parentElement.children[ index ] );
}
}

/**
* Removes a child view from the collection. If the {@link #setParent parent element} of the
* collection has been set, the {@link module:ui/view~View#element element} of the view is also removed
Expand Down
19 changes: 0 additions & 19 deletions packages/ckeditor5-ui/tests/dropdown/dropdownview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@

import DropdownView from '../../src/dropdown/dropdownview';
import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
import ButtonView from '../../src/button/buttonview';
import DropdownPanelView from '../../src/dropdown/dropdownpanelview';
Expand Down Expand Up @@ -72,10 +71,6 @@ describe( 'DropdownView', () => {
expect( view.panelPosition ).to.equal( 'auto' );
} );

it( 'creates #focusTracker instance', () => {
expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
} );

it( 'creates #keystrokeHandler instance', () => {
expect( view.keystrokes ).to.be.instanceOf( KeystrokeHandler );
} );
Expand Down Expand Up @@ -214,20 +209,6 @@ describe( 'DropdownView', () => {
view.element.remove();
} );

it( 'adds #element to #focusTracker', () => {
const view = new DropdownView( locale,
new ButtonView( locale ),
new DropdownPanelView( locale ) );

const spy = sinon.spy( view.focusTracker, 'add' );

view.render();
sinon.assert.calledOnce( spy );
sinon.assert.calledWithExactly( spy, view.element );

view.element.remove();
} );

describe( 'activates keyboard navigation for the dropdown', () => {
it( 'so "arrowdown" opens the #panelView', () => {
const keyEvtData = {
Expand Down
17 changes: 17 additions & 0 deletions packages/ckeditor5-ui/tests/editorui/bodycollection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,23 @@ describe( 'BodyCollection', () => {
}
} );

describe( 'constructor', () => {
it( 'assigns locale', () => {
const instance = new BodyCollection( locale );

expect( instance.locale ).to.be.equal( locale );
} );

it( 'stores pre-initialized collection', () => {
const collectionItems = [ new View(), new View() ];
const instance = new BodyCollection( locale, collectionItems );

expect( instance ).to.have.lengthOf( 2 );
expect( instance.get( 0 ) ).to.be.equal( collectionItems[ 0 ] );
expect( instance.get( 1 ) ).to.be.equal( collectionItems[ 1 ] );
} );
} );

describe( 'attachToDom', () => {
it( 'should create wrapper and put the collection in that wrapper', () => {
const body = new BodyCollection( locale );
Expand Down
Loading

0 comments on commit 277686f

Please sign in to comment.