Merge pull request #104 from ckeditor/t/103

t/103: Update components once UI architecture has been stripped of Controller class.

src/balloonpanel/balloonpanelview.js

@@ -30,62 +30,77 @@ export default class BalloonPanelView extends View {
 
 		const bind = this.bindTemplate;
 
-		this.template = new Template( {
-			tag: 'div',
-			attributes: {
-				class: [
-					'ck-balloon-panel',
-					bind.to( 'arrow', ( value ) => `ck-balloon-panel_arrow_${ value }` ),
-					bind.if( 'isVisible', 'ck-balloon-panel_visible' )
-				],
-
-				style: {
-					top: bind.to( 'top', toPx ),
-					left: bind.to( 'left', toPx ),
-					maxWidth: bind.to( 'maxWidth', toPx )
-				},
-
-				// Make this element `focusable` to be available for adding to FocusTracker.
-				tabindex: -1
-			}
-		} );
-
-		this.register( 'content', el => el );
-
 		/**
 		 * The absolute top position of the balloon panel in pixels.
 		 *
 		 * @observable
+		 * @default 0
 		 * @member {Number} ui.balloonPanel.BalloonPanelView#top
 		 */
-
+		this.set( 'top', 0 );
 		/**
 		 * The absolute left position of the balloon panel in pixels.
 		 *
 		 * @observable
+		 * @default 0
 		 * @member {Number} ui.balloonPanel.BalloonPanelView#left
 		 */
+		this.set( 'left', 0 );
 
 		/**
-		 * The maximum width of the balloon panel, as in CSS.
+		 * Balloon panel arrow direction.
 		 *
 		 * @observable
-		 * @member {Number} ui.balloonPanel.BalloonPanelView#maxWidth
+		 * @default 'se'
+		 * @member {'se'|'sw'|'ne'|'nw'} ui.balloonPanel.BalloonPanelView#arrow
 		 */
+		this.set( 'arrow', 'se' );
 
 		/**
-		 * Balloon panel arrow direction.
+		 * Controls whether the balloon panel is visible or not.
 		 *
 		 * @observable
-		 * @member {'se'|'sw'|'ne'|'nw'} ui.balloonPanel.BalloonPanelView#arrow
+		 * @default false
+		 * @member {Boolean} ui.balloonPanel.BalloonPanelView#isVisible
 		 */
+		this.set( 'isVisible', false );
 
 		/**
-		 * Controls whether the balloon panel is visible or not.
+		 * Max width of the balloon panel, as in CSS.
 		 *
 		 * @observable
-		 * @member {Boolean} ui.balloonPanel.BalloonPanelView#isVisible
+		 * @member {Number} ui.balloonPanel.BalloonPanelView#maxWidth
+		 */
+
+		/**
+		 * Collection of the child views which creates balloon panel contents.
+		 *
+		 * @readonly
+		 * @member {ui.ViewCollection} ui.list.ListView#content
 		 */
+		this.content = this.createCollection();
+
+		this.template = new Template( {
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck-balloon-panel',
+					bind.to( 'arrow', ( value ) => `ck-balloon-panel_arrow_${ value }` ),
+					bind.if( 'isVisible', 'ck-balloon-panel_visible' )
+				],
+
+				style: {
+					top: bind.to( 'top', toPx ),
+					left: bind.to( 'left', toPx ),
+					maxWidth: bind.to( 'maxWidth', toPx )
+				},
+
+				// Make this element `focusable` to be available for adding to FocusTracker.
+				tabindex: -1
+			},
+
+			children: this.content
+		} );
 	}
 
 	/**

src/bindings/clickoutsidehandler.js

@@ -12,27 +12,26 @@
  * opens and closes element at the same time.
  *
  * @param {Object} [options] Configuration options.
- * @param {ui.Controller} [options.controller] The controller to which this behavior should be added.
+ * @param {ui.DOMEmitter} [options.emitter] The emitter to which this behavior should be added.
  * @param {utils.Observable} [options.model] Used together with `options.activeIf` to know when to listen for clicks.
  * @param {String} [options.activeIf] Used together with `options.model` to know when to listen for clicks.
  * @param {HTMLElement} [options.contextElement] Target element, click on it will not fire callback.
  * @param {Function} [options.callback] Function fired after clicking outside of specified element.
  */
-export default function clickOutsideHandler( options ) {
-	const controller = options.controller;
-	const clickHandler = ( evt, domEvt ) => handleClickOutside( domEvt.target, options.contextElement, options.callback );
+export default function clickOutsideHandler( { emitter, model, activeIf, callback, contextElement } ) {
+	const clickHandler = ( evt, domEvt ) => handleClickOutside( domEvt.target, contextElement, callback );
 
-	controller.listenTo( options.model, `change:${ options.activeIf }`, ( evt, name, value ) => {
+	emitter.listenTo( model, `change:${ activeIf }`, ( evt, name, value ) => {
 		if ( value ) {
-			controller.listenTo( document, 'mouseup', clickHandler );
+			emitter.listenTo( document, 'mouseup', clickHandler );
 		} else {
-			controller.stopListening( document, 'mouseup', clickHandler );
+			emitter.stopListening( document, 'mouseup', clickHandler );
 		}
 	} );
 
 	// When `activeIf` property is `true` on init.
-	if ( options.model[ options.activeIf ] ) {
-		controller.listenTo( document, 'mouseup', clickHandler );
+	if ( model[ activeIf ] ) {
+		emitter.listenTo( document, 'mouseup', clickHandler );
 	}
 }
 

src/bindings/escpresshandler.js

@@ -11,27 +11,26 @@ import { keyCodes } from '../../utils/keyboard.js';
  * Handles <kbd>Esc</kbd> keydown and fires action.
  *
  * @param {Object} [options] Configuration options.
- * @param {ui.Controller} [options.controller] The controller to which this behavior should be added.
+ * @param {ui.DOMEmitter} [options.emitter] The emitter to which this behavior should be added.
  * @param {utils.Observable} [options.model] Used together with `options.activeIf` to know when to listen for keydown.
  * @param {String} [options.activeIf] Used together with `options.model` to know when to listen for keydown.
  * @param {Function} [options.callback] Function fired after <kbd>Esc</kbd> is pressed.
  * @returns {Function} Click handler
  */
-export default function escPressHandler( options ) {
-	const controller = options.controller;
-	const keypressHandler = ( evt, domEvt ) => handleEscPress( domEvt.keyCode, options.callback );
+export default function escPressHandler( { emitter, model, activeIf, callback } ) {
+	const keypressHandler = ( evt, domEvt ) => handleEscPress( domEvt.keyCode, callback );
 
-	controller.listenTo( options.model, `change:${ options.activeIf }`, ( evt, name, value ) => {
+	emitter.listenTo( model, `change:${ activeIf }`, ( evt, name, value ) => {
 		if ( value ) {
-			controller.listenTo( document, 'keydown', keypressHandler );
+			emitter.listenTo( document, 'keydown', keypressHandler );
 		} else {
-			controller.stopListening( document, 'keydown', keypressHandler );
+			emitter.stopListening( document, 'keydown', keypressHandler );
 		}
 	} );
 
 	// When `activeIf` property is `true` on init.
-	if ( options.model[ options.activeIf ] ) {
-		controller.listenTo( document, 'keydown', keypressHandler );
+	if ( model[ activeIf ] ) {
+		emitter.listenTo( document, 'keydown', keypressHandler );
 	}
 }