Răsfoiți Sursa

Changed: Remove dafult dropdown behavior helper methods from API.

Maciej Gołaszewski 8 ani în urmă
părinte
comite
b53db8f03a

+ 0 - 28
packages/ckeditor5-ui/src/dropdown/helpers/closedropdownonblur.js

@@ -1,28 +0,0 @@
-/**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/**
- * @module ui/dropdown/helpers
- */
-
-import clickOutsideHandler from '../../bindings/clickoutsidehandler';
-
-/**
- * Adds a behavior to a dropdownView that closes opened dropdown on user click outside the dropdown.
- *
- * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
- */
-export default function closeDropdownOnBlur( dropdownView ) {
-	dropdownView.on( 'render', () => {
-		clickOutsideHandler( {
-			emitter: dropdownView,
-			activator: () => dropdownView.isOpen,
-			callback: () => {
-				dropdownView.isOpen = false;
-			},
-			contextElements: [ dropdownView.element ]
-		} );
-	} );
-}

+ 0 - 20
packages/ckeditor5-ui/src/dropdown/helpers/closedropdownonexecute.js

@@ -1,20 +0,0 @@
-/**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/**
- * @module ui/dropdown/helpers/closedropdownonexecute
- */
-
-/**
- * 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
- */
-export default function closeDropdownOnExecute( dropdownView ) {
-	// Close the dropdown when one of the list items has been executed.
-	dropdownView.on( 'execute', () => {
-		dropdownView.isOpen = false;
-	} );
-}

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

@@ -1,33 +0,0 @@
-/**
- * @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();
-		}
-	} );
-}

+ 62 - 0
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -12,6 +12,8 @@ import DropdownView from './dropdownview';
 import SplitButtonView from '../button/splitbuttonview';
 import SplitButtonView from '../button/splitbuttonview';
 import ButtonView from '../button/buttonview';
 import ButtonView from '../button/buttonview';
 
 
+import clickOutsideHandler from '../bindings/clickoutsidehandler';
+
 /**
 /**
  * A helper which creates an instance of {@link module:ui/dropdown/dropdownview~DropdownView} class using
  * A helper which creates an instance of {@link module:ui/dropdown/dropdownview~DropdownView} class using
  * a provided {@link module:ui/dropdown/dropdownmodel~DropdownModel}.
  * a provided {@link module:ui/dropdown/dropdownmodel~DropdownModel}.
@@ -45,6 +47,8 @@ export function createDropdown( model, locale ) {
 
 
 	const dropdownView = prepareDropdown( locale, buttonView, model );
 	const dropdownView = prepareDropdown( locale, buttonView, model );
 
 
+	addDefaultBehavior( dropdownView );
+
 	return dropdownView;
 	return dropdownView;
 }
 }
 
 
@@ -81,6 +85,8 @@ export function createSplitButtonDropdown( model, locale ) {
 
 
 	const dropdownView = prepareDropdown( locale, buttonView, model );
 	const dropdownView = prepareDropdown( locale, buttonView, model );
 
 
+	addDefaultBehavior( dropdownView );
+
 	buttonView.delegate( 'execute' ).to( dropdownView );
 	buttonView.delegate( 'execute' ).to( dropdownView );
 
 
 	return dropdownView;
 	return dropdownView;
@@ -121,3 +127,59 @@ function createButtonForDropdown( model, locale ) {
 
 
 	return buttonView;
 	return buttonView;
 }
 }
+
+// @private
+function addDefaultBehavior( dropdown ) {
+	closeDropdownOnBlur( dropdown );
+	closeDropdownOnExecute( dropdown );
+	focusDropdownContentsOnArrows( dropdown );
+}
+
+// Adds a behavior to a dropdownView that closes opened dropdown on user click outside the dropdown.
+//
+// @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+function closeDropdownOnBlur( dropdownView ) {
+	dropdownView.on( 'render', () => {
+		clickOutsideHandler( {
+			emitter: dropdownView,
+			activator: () => dropdownView.isOpen,
+			callback: () => {
+				dropdownView.isOpen = false;
+			},
+			contextElements: [ dropdownView.element ]
+		} );
+	} );
+}
+
+// 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
+function closeDropdownOnExecute( dropdownView ) {
+	// Close the dropdown when one of the list items has been executed.
+	dropdownView.on( 'execute', () => {
+		dropdownView.isOpen = false;
+	} );
+}
+
+// Adds a behavior to a dropdownView that focuses dropdown panel view contents on keystrokes.
+//
+// @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+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();
+		}
+	} );
+}

+ 0 - 75
packages/ckeditor5-ui/tests/dropdown/helpers/closedropdownonblur.js

@@ -1,75 +0,0 @@
-/**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* globals document, Event */
-
-import Model from '../../../src/model';
-
-import { createDropdown } from '../../../src/dropdown/utils';
-import closeDropdownOnBlur from '../../../src/dropdown/helpers/closedropdownonblur';
-
-describe( 'closeDropdownOnBlur()', () => {
-	let dropdownView;
-
-	beforeEach( () => {
-		dropdownView = createDropdown( new Model(), {} );
-
-		closeDropdownOnBlur( dropdownView );
-
-		dropdownView.render();
-		document.body.appendChild( dropdownView.element );
-	} );
-
-	afterEach( () => {
-		if ( dropdownView.element ) {
-			dropdownView.element.remove();
-		}
-	} );
-
-	it( 'listens to view#isOpen and reacts to DOM events (valid target)', () => {
-		// Open the dropdown.
-		dropdownView.isOpen = true;
-
-		// Fire event from outside of the dropdown.
-		document.body.dispatchEvent( new Event( 'mousedown', {
-			bubbles: true
-		} ) );
-
-		// Closed the dropdown.
-		expect( dropdownView.isOpen ).to.be.false;
-
-		// Fire event from outside of the dropdown.
-		document.body.dispatchEvent( new Event( 'mousedown', {
-			bubbles: true
-		} ) );
-
-		// Dropdown is still closed.
-		expect( dropdownView.isOpen ).to.be.false;
-	} );
-
-	it( 'listens to view#isOpen and reacts to DOM events (invalid target)', () => {
-		// Open the dropdown.
-		dropdownView.isOpen = true;
-
-		// Event from view.element should be discarded.
-		dropdownView.element.dispatchEvent( new Event( 'mousedown', {
-			bubbles: true
-		} ) );
-
-		// Dropdown is still open.
-		expect( dropdownView.isOpen ).to.be.true;
-
-		// Event from within view.element should be discarded.
-		const child = document.createElement( 'div' );
-		dropdownView.element.appendChild( child );
-
-		child.dispatchEvent( new Event( 'mousedown', {
-			bubbles: true
-		} ) );
-
-		// Dropdown is still open.
-		expect( dropdownView.isOpen ).to.be.true;
-	} );
-} );

+ 0 - 37
packages/ckeditor5-ui/tests/dropdown/helpers/closedropdownonexecute.js

@@ -1,37 +0,0 @@
-/**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* globals document */
-
-import Model from '../../../src/model';
-import closeDropdownOnExecute from '../../../src/dropdown/helpers/closedropdownonexecute';
-import { createDropdown } from '../../../src/dropdown/utils';
-
-describe( 'closeDropdownOnExecute()', () => {
-	let dropdownView;
-
-	beforeEach( () => {
-		dropdownView = createDropdown( new Model(), {} );
-
-		closeDropdownOnExecute( dropdownView );
-
-		dropdownView.render();
-		document.body.appendChild( dropdownView.element );
-	} );
-
-	afterEach( () => {
-		dropdownView.element.remove();
-	} );
-
-	it( 'changes view#isOpen on view#execute', () => {
-		dropdownView.isOpen = true;
-
-		dropdownView.fire( 'execute' );
-		expect( dropdownView.isOpen ).to.be.false;
-
-		dropdownView.fire( 'execute' );
-		expect( dropdownView.isOpen ).to.be.false;
-	} );
-} );

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

@@ -1,75 +0,0 @@
-/**
- * @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 focusDropdownContentsOnArrows from '../../../src/dropdown/helpers/focusdropdowncontentsonarrows';
-import { createDropdown } from './../../../src/dropdown/utils';
-
-describe( 'focusDropdownContentsOnArrows()', () => {
-	let dropdownView;
-	let panelChildView;
-
-	beforeEach( () => {
-		dropdownView = createDropdown( new Model(), {} );
-
-		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 );
-	} );
-} );

+ 0 - 9
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.js

@@ -17,9 +17,6 @@ import ButtonView from '../../../src/button/buttonview';
 
 
 import addListViewToDropdown from '../../../src/dropdown/helpers/addlistviewtodropdown';
 import addListViewToDropdown from '../../../src/dropdown/helpers/addlistviewtodropdown';
 import addToolbarToDropdown from '../../../src/dropdown/helpers/addtoolbartodropdown';
 import addToolbarToDropdown from '../../../src/dropdown/helpers/addtoolbartodropdown';
-import closeDropdownOnBlur from '../../../src/dropdown/helpers/closedropdownonblur';
-import closeDropdownOnExecute from '../../../src/dropdown/helpers/closedropdownonexecute';
-import focusDropdownContentsOnArrows from '../../../src/dropdown/helpers/focusdropdowncontentsonarrows';
 import { createDropdown } from '../../../src/dropdown/utils';
 import { createDropdown } from '../../../src/dropdown/utils';
 
 
 const ui = testUtils.createTestUIView( {
 const ui = testUtils.createTestUIView( {
@@ -66,9 +63,6 @@ function testList() {
 	const dropdownView = createDropdown( model, {} );
 	const dropdownView = createDropdown( model, {} );
 
 
 	addListViewToDropdown( dropdownView, model, {} );
 	addListViewToDropdown( dropdownView, model, {} );
-	closeDropdownOnBlur( dropdownView );
-	closeDropdownOnExecute( dropdownView );
-	focusDropdownContentsOnArrows( dropdownView );
 
 
 	dropdownView.on( 'execute', evt => {
 	dropdownView.on( 'execute', evt => {
 		/* global console */
 		/* global console */
@@ -141,9 +135,6 @@ function testButton() {
 	const toolbarDropdown = createDropdown( toolbarDropdownModel, locale );
 	const toolbarDropdown = createDropdown( toolbarDropdownModel, locale );
 
 
 	addToolbarToDropdown( toolbarDropdown, toolbarDropdownModel );
 	addToolbarToDropdown( toolbarDropdown, toolbarDropdownModel );
-	closeDropdownOnBlur( toolbarDropdown );
-	closeDropdownOnExecute( toolbarDropdown );
-	focusDropdownContentsOnArrows( toolbarDropdown );
 
 
 	ui.toolbarDropdown.add( toolbarDropdown );
 	ui.toolbarDropdown.add( toolbarDropdown );
 
 

+ 144 - 3
packages/ckeditor5-ui/tests/dropdown/utils.js

@@ -3,7 +3,10 @@
  * For licensing, see LICENSE.md.
  * For licensing, see LICENSE.md.
  */
  */
 
 
+/* globals document Event */
+
 import utilsTestUtils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
 import utilsTestUtils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
+import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
 
 import Model from '../../src/model';
 import Model from '../../src/model';
 
 
@@ -12,18 +15,19 @@ import DropdownView from '../../src/dropdown/dropdownview';
 import DropdownPanelView from '../../src/dropdown/dropdownpanelview';
 import DropdownPanelView from '../../src/dropdown/dropdownpanelview';
 import SplitButtonView from '../../src/button/splitbuttonview';
 import SplitButtonView from '../../src/button/splitbuttonview';
 import { createDropdown, createSplitButtonDropdown } from '../../src/dropdown/utils';
 import { createDropdown, createSplitButtonDropdown } from '../../src/dropdown/utils';
+import View from '../../src/view';
 
 
 const assertBinding = utilsTestUtils.assertBinding;
 const assertBinding = utilsTestUtils.assertBinding;
 
 
 describe( 'utils', () => {
 describe( 'utils', () => {
-	let locale;
+	let locale, dropdownView;
 
 
 	beforeEach( () => {
 	beforeEach( () => {
 		locale = { t() {} };
 		locale = { t() {} };
 	} );
 	} );
 
 
 	describe( 'createDropdown()', () => {
 	describe( 'createDropdown()', () => {
-		let dropdownView, model;
+		let model;
 
 
 		beforeEach( () => {
 		beforeEach( () => {
 			model = new Model();
 			model = new Model();
@@ -132,10 +136,12 @@ describe( 'utils', () => {
 				sinon.assert.calledOnce( spy );
 				sinon.assert.calledOnce( spy );
 			} );
 			} );
 		} );
 		} );
+
+		addDefaultBehaviorTests();
 	} );
 	} );
 
 
 	describe( 'createSplitButtonDropdown()', () => {
 	describe( 'createSplitButtonDropdown()', () => {
-		let dropdownView, model;
+		let model;
 
 
 		beforeEach( () => {
 		beforeEach( () => {
 			model = new Model();
 			model = new Model();
@@ -234,5 +240,140 @@ describe( 'utils', () => {
 				expect( dropdownView.buttonView ).to.be.instanceof( SplitButtonView );
 				expect( dropdownView.buttonView ).to.be.instanceof( SplitButtonView );
 			} );
 			} );
 		} );
 		} );
+
+		addDefaultBehaviorTests();
 	} );
 	} );
+
+	function addDefaultBehaviorTests() {
+		describe( 'hasDefaultBehavior', () => {
+			describe( 'closeDropdownOnBlur()', () => {
+				beforeEach( () => {
+					dropdownView.render();
+					document.body.appendChild( dropdownView.element );
+				} );
+
+				afterEach( () => {
+					dropdownView.element.remove();
+				} );
+
+				it( 'listens to view#isOpen and reacts to DOM events (valid target)', () => {
+					// Open the dropdown.
+					dropdownView.isOpen = true;
+					// Fire event from outside of the dropdown.
+					document.body.dispatchEvent( new Event( 'mousedown', {
+						bubbles: true
+					} ) );
+					// Closed the dropdown.
+					expect( dropdownView.isOpen ).to.be.false;
+					// Fire event from outside of the dropdown.
+					document.body.dispatchEvent( new Event( 'mousedown', {
+						bubbles: true
+					} ) );
+					// Dropdown is still closed.
+					expect( dropdownView.isOpen ).to.be.false;
+				} );
+
+				it( 'listens to view#isOpen and reacts to DOM events (invalid target)', () => {
+					// Open the dropdown.
+					dropdownView.isOpen = true;
+
+					// Event from view.element should be discarded.
+					dropdownView.element.dispatchEvent( new Event( 'mousedown', {
+						bubbles: true
+					} ) );
+
+					// Dropdown is still open.
+					expect( dropdownView.isOpen ).to.be.true;
+
+					// Event from within view.element should be discarded.
+					const child = document.createElement( 'div' );
+					dropdownView.element.appendChild( child );
+
+					child.dispatchEvent( new Event( 'mousedown', {
+						bubbles: true
+					} ) );
+
+					// Dropdown is still open.
+					expect( dropdownView.isOpen ).to.be.true;
+				} );
+			} );
+
+			describe( 'closeDropdownOnExecute()', () => {
+				beforeEach( () => {
+					dropdownView.render();
+					document.body.appendChild( dropdownView.element );
+				} );
+
+				afterEach( () => {
+					dropdownView.element.remove();
+				} );
+
+				it( 'changes view#isOpen on view#execute', () => {
+					dropdownView.isOpen = true;
+
+					dropdownView.fire( 'execute' );
+					expect( dropdownView.isOpen ).to.be.false;
+
+					dropdownView.fire( 'execute' );
+					expect( dropdownView.isOpen ).to.be.false;
+				} );
+			} );
+
+			describe( 'focusDropdownContentsOnArrows()', () => {
+				let panelChildView;
+
+				beforeEach( () => {
+					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 );
+
+					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 );
+				} );
+			} );
+		} );
+	}
 } );
 } );