Merge pull request #156 from ckeditor/t/152

Feature: Implemented features necessary for creating inline editors UI – `FloatingPanelView` class, `Template.revert()` method and `enableToolbarKeyboardFocus()` util. Closes #152. BREAKING CHANGE: The `ui/balloonpanel/balloonpanelview` module was renamed to `ui/panel/balloon/balloonpanelview`. See #152.
ckeditor · Mar 7, 2017 · cb606d7 · cb606d7
2 parents ce3ddf5 + e42cf46
commit cb606d7
Show file tree

Hide file tree

Showing 25 changed files with 1,719 additions and 237 deletions.
diff --git a/src/dropdown/dropdownview.js b/src/dropdown/dropdownview.js
@@ -69,10 +69,10 @@ export default class DropdownView extends View {
 		this.focusTracker = new FocusTracker();
 
 		/**
-		 * Instance of the {@link module:core/keystrokehandler~KeystrokeHandler}.
+		 * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
 		 *
 		 * @readonly
-		 * @member {module:core/keystrokehandler~KeystrokeHandler}
+		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
 		 */
 		this.keystrokes = new KeystrokeHandler();
 

diff --git a/src/editableui/editableuiview.js b/src/editableui/editableuiview.js
@@ -59,6 +59,14 @@ export default class EditableUIView extends View {
 		 */
 		this.set( 'isFocused', false );
 
+		/**
+		 * An external {@link #editableElement} passed into the constructor, which also means
+		 * the view will not render its {@link #template}.
+		 *
+		 * @member {HTMLElement} #externalElement
+		 */
+		this.externalElement = editableElement;
+
 		/**
 		 * The element which is the main editable element (usually the one with `contentEditable="true"`).
 		 *
@@ -74,8 +82,8 @@ export default class EditableUIView extends View {
 	 * @returns {Promise}
 	 */
 	init() {
-		if ( this.editableElement ) {
-			this.template.apply( this.editableElement );
+		if ( this.externalElement ) {
+			this.template.apply( this.externalElement );
 		} else {
 			this.editableElement = this.element;
 		}
@@ -87,7 +95,9 @@ export default class EditableUIView extends View {
 	 * @inheritDoc
 	 */
 	destroy() {
-		this.editableElement.contentEditable = false;
+		if ( this.externalElement ) {
+			this.template.revert( this.externalElement );
+		}
 
 		return super.destroy();
 	}

diff --git a/src/focuscycler.js b/src/focuscycler.js
@@ -52,7 +52,7 @@ export default class FocusCycler {
 	 * @param {Object} options Configuration options.
 	 * @param {module:utils/collection~Collection|Object} options.focusables
 	 * @param {module:utils/focustracker~FocusTracker} options.focusTracker
-	 * @param {module:core/keystrokehandler~KeystrokeHandler} [options.keystrokeHandler]
+	 * @param {module:utils/keystrokehandler~KeystrokeHandler} [options.keystrokeHandler]
 	 * @param {Object} [options.actions]
 	 */
 	constructor( options ) {
@@ -67,17 +67,17 @@ export default class FocusCycler {
 
 		/**
 		 * A focus tracker instance that cycler uses to determine focus
-		 * state in {@link #viewCollection}.
+		 * state in {@link #focusables}.
 		 *
 		 * @readonly
 		 * @member {module:utils/focustracker~FocusTracker} #focusTracker
 		 */
 
 		/**
-		 * Instance of the {@link module:core/keystrokehandler~KeystrokeHandler}.
+		 * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
 		 *
 		 * @readonly
-		 * @member {module:core/keystrokehandler~KeystrokeHandler} #keystrokeHandler
+		 * @member {module:utils/keystrokehandler~KeystrokeHandler} #keystrokeHandler
 		 */
 
 		/**
@@ -117,7 +117,7 @@ export default class FocusCycler {
 	}
 
 	/**
-	 * Returns the first focusable view in {@link #viewCollection}.
+	 * Returns the first focusable view in {@link #focusables}.
 	 * `null` if there's none.
 	 *
 	 * @readonly
@@ -128,7 +128,7 @@ export default class FocusCycler {
 	}
 
 	/**
-	 * Returns the last focusable view in {@link #viewCollection}.
+	 * Returns the last focusable view in {@link #focusables}.
 	 * `null` if there's none.
 	 *
 	 * @readonly
@@ -139,7 +139,7 @@ export default class FocusCycler {
 	}
 
 	/**
-	 * Returns the next focusable view in {@link #viewCollection} based on {@link #current}.
+	 * Returns the next focusable view in {@link #focusables} based on {@link #current}.
 	 * `null` if there's none.
 	 *
 	 * @readonly
@@ -150,7 +150,7 @@ export default class FocusCycler {
 	}
 
 	/**
-	 * Returns the previous focusable view in {@link #viewCollection} based on {@link #current}.
+	 * Returns the previous focusable view in {@link #focusables} based on {@link #current}.
 	 * `null` if there's none.
 	 *
 	 * @readonly
@@ -161,7 +161,7 @@ export default class FocusCycler {
 	}
 
 	/**
-	 * An index of the view in the {@link #viewCollection} which is focused according
+	 * An index of the view in the {@link #focusables} which is focused according
 	 * to {@link #focusTracker}. `null` when there's no such view.
 	 *
 	 * @readonly
@@ -170,7 +170,7 @@ export default class FocusCycler {
 	get current() {
 		let index = null;
 
-		// There's no focused view in the viewCollection.
+		// There's no focused view in the focusables.
 		if ( this.focusTracker.focusedElement === null ) {
 			return null;
 		}
@@ -229,7 +229,7 @@ export default class FocusCycler {
 	}
 
 	/**
-	 * Returns the next/previous focusable view in {@link #viewCollection} with respect
+	 * Returns the next/previous focusable view in {@link #focusables} with respect
 	 * to {@link #current}.
 	 *
 	 * @protected

diff --git a/src/list/listview.js b/src/list/listview.js
@@ -42,10 +42,10 @@ export default class ListView extends View {
 		this.focusTracker = new FocusTracker();
 
 		/**
-		 * Instance of the {@link module:core/keystrokehandler~KeystrokeHandler}.
+		 * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
 		 *
 		 * @readonly
-		 * @member {module:core/keystrokehandler~KeystrokeHandler}
+		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
 		 */
 		this.keystrokes = new KeystrokeHandler();
 

diff --git a/src/balloonpanel/balloonpanelview.js → src/panel/balloon/balloonpanelview.js b/src/balloonpanel/balloonpanelview.js → src/panel/balloon/balloonpanelview.js
@@ -4,13 +4,13 @@
  */
 
 /**
- * @module ui/balloonpanel/balloonpanelview
+ * @module ui/panel/balloon/balloonpanelview
  */
 
 /* globals document */
 
-import View from '../view';
-import Template from '../template';
+import View from '../../view';
+import Template from '../../template';
 import { getOptimalPosition } from '@ckeditor/ckeditor5-utils/src/dom/position';
 import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
 
@@ -54,7 +54,8 @@ export default class BalloonPanelView extends View {
 		 * controls the minor aspects of the balloon's visual appearance like placement
 		 * of the "arrow". To support a new position, an additional CSS must be created.
 		 *
-		 * Default position names correspond with {@link #defaultPositions}.
+		 * Default position names correspond with
+		 * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}.
 		 *
 		 * @observable
 		 * @default 'se'
@@ -136,7 +137,7 @@ export default class BalloonPanelView extends View {
 	 *
 	 * @param {module:utils/dom/position~Options} options Positioning options compatible with
 	 * {@link module:utils/dom/position~getOptimalPosition}. Default `positions` array is
-	 * {@link module:ui/balloonpanel/balloonpanelview~BalloonPanelView.defaultPositions}.
+	 * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}.
 	 */
 	attachTo( options ) {
 		this.show();
@@ -174,7 +175,7 @@ export default class BalloonPanelView extends View {
  *	    >|-----|<---------------- horizontal offset
  *
  * @default 30
- * @member {Number} module:ui/balloonpanel/balloonpanelview~BalloonPanelView.arrowHorizontalOffset
+ * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowHorizontalOffset
  */
 BalloonPanelView.arrowHorizontalOffset = 30;
 
@@ -193,13 +194,13 @@ BalloonPanelView.arrowHorizontalOffset = 30;
  *		                       ^
  *
  * @default 15
- * @member {Number} module:ui/balloonpanel/balloonpanelview~BalloonPanelView.arrowVerticalOffset
+ * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowVerticalOffset
  */
 BalloonPanelView.arrowVerticalOffset = 15;
 
 /**
  * A default set of positioning functions used by the balloon panel view
- * when attaching using {@link #attachTo} method.
+ * when attaching using {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#attachTo} method.
  *
  * The available positioning functions are as follows:
  *
@@ -238,14 +239,14 @@ BalloonPanelView.arrowVerticalOffset = 15;
  *		              V
  *		         [ Target ]
  *
- * See {@link #attachTo}.
+ * See {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#attachTo}.
  *
  * Positioning functions must be compatible with {@link module:utils/dom/position~Position}.
  *
  * The name that position function returns will be reflected in balloon panel's class that
  * controls the placement of the "arrow". See {@link #position} to learn more.
  *
- * @member {Object} module:ui/balloonpanel/balloonpanelview~BalloonPanelView.defaultPositions
+ * @member {Object} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions
  */
 BalloonPanelView.defaultPositions = {
 	se: ( targetRect ) => ( {