瀏覽代碼

Other: Extract `focusDropdownContentsOnArrows()` to own file.

Maciej Gołaszewski 7 年之前
父節點
當前提交
64215ef2b3

+ 33 - 0
packages/ckeditor5-ui/src/dropdown/helpers/focusdropdowncontentsonarrows.js

@@ -0,0 +1,33 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module ui/dropdown/helpers/focusdropdowncontentsonarrows
+ */
+
+/**
+ * Adds a behavior to a dropdownView that focuses dropdown panel view contents on keystrokes.
+ *
+ * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+ */
+export default function focusDropdownContentsOnArrows( dropdownView ) {
+	// If the dropdown panel is already open, the arrow down key should
+	// focus the first element in list.
+	dropdownView.keystrokes.set( 'arrowdown', ( data, cancel ) => {
+		if ( dropdownView.isOpen ) {
+			dropdownView.panelView.focus();
+			cancel();
+		}
+	} );
+
+	// If the dropdown panel is already open, the arrow up key should
+	// focus the last element in the list.
+	dropdownView.keystrokes.set( 'arrowup', ( data, cancel ) => {
+		if ( dropdownView.isOpen ) {
+			dropdownView.panelView.focusLast();
+			cancel();
+		}
+	} );
+}

+ 1 - 26
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * @module ui/dropdown/utils
+ * @module ui/dropdown/helpers
  */
 
 import clickOutsideHandler from '../bindings/clickoutsidehandler';
@@ -20,31 +20,6 @@ import ListItemView from '../list/listitemview';
 import '../../theme/components/dropdown/toolbardropdown.css';
 
 /**
- * Adds a behavior to a dropdownView that focuses dropdown panel view contents on keystrokes.
- *
- * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
- */
-export function focusDropdownContentsOnArrows( dropdownView ) {
-	// If the dropdown panel is already open, the arrow down key should
-	// focus the first element in list.
-	dropdownView.keystrokes.set( 'arrowdown', ( data, cancel ) => {
-		if ( dropdownView.isOpen ) {
-			dropdownView.panelView.focus();
-			cancel();
-		}
-	} );
-
-	// If the dropdown panel is already open, the arrow up key should
-	// focus the last element in the list.
-	dropdownView.keystrokes.set( 'arrowup', ( data, cancel ) => {
-		if ( dropdownView.isOpen ) {
-			dropdownView.panelView.focusLast();
-			cancel();
-		}
-	} );
-}
-
-/**
  * Adds a behavior to a dropdownView that closes dropdown view on any view collection item's "execute" event.
  *
  * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView

+ 76 - 0
packages/ckeditor5-ui/tests/dropdown/helpers/focusdropdowncontentsonarrows.js

@@ -0,0 +1,76 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals document */
+
+import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
+
+import View from '../../../src/view';
+import Model from '../../../src/model';
+import ButtonView from '../../../src/button/buttonview';
+
+import focusDropdownContentsOnArrows from '../../../src/dropdown/helpers/focusdropdowncontentsonarrows';
+import { createDropdownView } from '../../../src/dropdown/utils';
+
+describe( 'focusDropdownContentsOnArrows()', () => {
+	let dropdownView;
+	let panelChildView;
+
+	beforeEach( () => {
+		dropdownView = createDropdownView( new Model(), new ButtonView(), {} );
+
+		panelChildView = new View();
+		panelChildView.setTemplate( { tag: 'div' } );
+		panelChildView.focus = () => {};
+		panelChildView.focusLast = () => {};
+
+		// TODO: describe this as #contentView instead of #listView and #toolbarView
+		dropdownView.panelView.children.add( panelChildView );
+
+		focusDropdownContentsOnArrows( dropdownView );
+
+		dropdownView.render();
+		document.body.appendChild( dropdownView.element );
+	} );
+
+	afterEach( () => {
+		dropdownView.element.remove();
+	} );
+
+	it( '"arrowdown" focuses the #innerPanelView if dropdown is open', () => {
+		const keyEvtData = {
+			keyCode: keyCodes.arrowdown,
+			preventDefault: sinon.spy(),
+			stopPropagation: sinon.spy()
+		};
+		const spy = sinon.spy( panelChildView, 'focus' );
+
+		dropdownView.isOpen = false;
+		dropdownView.keystrokes.press( keyEvtData );
+		sinon.assert.notCalled( spy );
+
+		dropdownView.isOpen = true;
+		dropdownView.keystrokes.press( keyEvtData );
+
+		sinon.assert.calledOnce( spy );
+	} );
+
+	it( '"arrowup" focuses the last #item in #innerPanelView if dropdown is open', () => {
+		const keyEvtData = {
+			keyCode: keyCodes.arrowup,
+			preventDefault: sinon.spy(),
+			stopPropagation: sinon.spy()
+		};
+		const spy = sinon.spy( panelChildView, 'focusLast' );
+
+		dropdownView.isOpen = false;
+		dropdownView.keystrokes.press( keyEvtData );
+		sinon.assert.notCalled( spy );
+
+		dropdownView.isOpen = true;
+		dropdownView.keystrokes.press( keyEvtData );
+		sinon.assert.calledOnce( spy );
+	} );
+} );

+ 2 - 2
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.js

@@ -21,9 +21,9 @@ import {
 	closeDropdownOnBlur,
 	closeDropdownOnExecute,
 	createButtonForDropdown,
-	createDropdownView,
-	focusDropdownContentsOnArrows,
+	createDropdownView
 } from '../../../src/dropdown/utils';
+import focusDropdownContentsOnArrows from '../../../src/dropdown/helpers/focusdropdowncontentsonarrows';
 
 const ui = testUtils.createTestUIView( {
 	dropdown: '#dropdown',

+ 1 - 59
packages/ckeditor5-ui/tests/dropdown/utils.js

@@ -5,14 +5,11 @@
 
 /* globals document, Event */
 
-import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
-
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import utilsTestUtils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
 
 import Model from '../../src/model';
 
-import View from '../../src/view';
 import ButtonView from '../../src/button/buttonview';
 import ToolbarView from '../../src/toolbar/toolbarview';
 import ListItemView from '../../src/list/listitemview';
@@ -29,8 +26,7 @@ import {
 	createButtonForDropdown,
 	createDropdownView,
 	createSplitButtonForDropdown,
-	enableModelIfOneIsEnabled,
-	focusDropdownContentsOnArrows
+	enableModelIfOneIsEnabled
 } from '../../src/dropdown/utils';
 
 const assertBinding = utilsTestUtils.assertBinding;
@@ -51,60 +47,6 @@ describe( 'utils', () => {
 		}
 	} );
 
-	describe( 'focusDropdownContentsOnArrows()', () => {
-		let panelChildView;
-
-		beforeEach( () => {
-			panelChildView = new View();
-			panelChildView.setTemplate( { tag: 'div' } );
-			panelChildView.focus = () => {};
-			panelChildView.focusLast = () => {};
-
-			// TODO: describe this as #contentView instaed of #listView and #toolbarView
-			dropdownView.panelView.children.add( panelChildView );
-
-			focusDropdownContentsOnArrows( dropdownView );
-
-			dropdownView.render();
-			document.body.appendChild( dropdownView.element );
-		} );
-
-		it( '"arrowdown" focuses the #innerPanelView if dropdown is open', () => {
-			const keyEvtData = {
-				keyCode: keyCodes.arrowdown,
-				preventDefault: sinon.spy(),
-				stopPropagation: sinon.spy()
-			};
-			const spy = sinon.spy( panelChildView, 'focus' );
-
-			dropdownView.isOpen = false;
-			dropdownView.keystrokes.press( keyEvtData );
-			sinon.assert.notCalled( spy );
-
-			dropdownView.isOpen = true;
-			dropdownView.keystrokes.press( keyEvtData );
-
-			sinon.assert.calledOnce( spy );
-		} );
-
-		it( '"arrowup" focuses the last #item in #innerPanelView if dropdown is open', () => {
-			const keyEvtData = {
-				keyCode: keyCodes.arrowup,
-				preventDefault: sinon.spy(),
-				stopPropagation: sinon.spy()
-			};
-			const spy = sinon.spy( panelChildView, 'focusLast' );
-
-			dropdownView.isOpen = false;
-			dropdownView.keystrokes.press( keyEvtData );
-			sinon.assert.notCalled( spy );
-
-			dropdownView.isOpen = true;
-			dropdownView.keystrokes.press( keyEvtData );
-			sinon.assert.calledOnce( spy );
-		} );
-	} );
-
 	describe( 'closeDropdownOnExecute()', () => {
 		beforeEach( () => {
 			closeDropdownOnExecute( dropdownView );