Parcourir la source

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

Maciej Gołaszewski il y a 7 ans
Parent
commit
0498534f54

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

@@ -0,0 +1,28 @@
+/**
+ * @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 - 21
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -7,7 +7,6 @@
  * @module ui/dropdown/helpers
  */
 
-import clickOutsideHandler from '../bindings/clickoutsidehandler';
 import SplitButtonView from '../button/splitbuttonview';
 import ButtonView from '../button/buttonview';
 import DropdownPanelView from './dropdownpanelview';
@@ -19,26 +18,6 @@ import ListItemView from '../list/listitemview';
 // TODO: This should be per-component import AFAIK. It will result in smaller builds that don't use dropdown with toolbar.
 import '../../theme/components/dropdown/toolbardropdown.css';
 
-/**
- * Adds a behavior to a dropdownView that closes opened dropdown on user click outside the dropdown.
- *
- * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
- */
-export function closeDropdownOnBlur( dropdownView ) {
-	dropdownView.on( 'render', () => {
-		clickOutsideHandler( {
-			emitter: dropdownView,
-			activator: () => dropdownView.isOpen,
-			callback: () => {
-				dropdownView.isOpen = false;
-			},
-			contextElements: [ dropdownView.element ]
-		} );
-	} );
-}
-
-/** TODO: new methods below - refactor to own files later */
-
 export function createButtonForDropdown( model, locale ) {
 	const buttonView = new ButtonView( locale );
 

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

@@ -0,0 +1,75 @@
+/**
+ * @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 ButtonView from '../../../src/button/buttonview';
+import { createDropdownView } from '../../../src/dropdown/utils';
+import closeDropdownOnBlur from '../../../src/dropdown/helpers/closedropdownonblur';
+
+describe( 'closeDropdownOnBlur()', () => {
+	let dropdownView;
+
+	beforeEach( () => {
+		dropdownView = createDropdownView( new Model(), new ButtonView(), {} );
+
+		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;
+	} );
+} );

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

@@ -18,11 +18,11 @@ import ButtonView from '../../../src/button/buttonview';
 import {
 	addListViewToDropdown,
 	addToolbarToDropdown,
-	closeDropdownOnBlur,
 	createButtonForDropdown,
 	createDropdownView
 } from '../../../src/dropdown/utils';
 
+import closeDropdownOnBlur from '../../../src/dropdown/helpers/closedropdownonblur';
 import closeDropdownOnExecute from '../../../src/dropdown/helpers/closedropdownonexecute';
 import focusDropdownContentsOnArrows from '../../../src/dropdown/helpers/focusdropdowncontentsonarrows';
 

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

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-/* globals document, Event */
+/* globals document */
 
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import utilsTestUtils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
@@ -21,7 +21,6 @@ import SplitButtonView from '../../src/button/splitbuttonview';
 import {
 	addListViewToDropdown,
 	addToolbarToDropdown,
-	closeDropdownOnBlur,
 	createButtonForDropdown,
 	createDropdownView,
 	createSplitButtonForDropdown,
@@ -46,60 +45,6 @@ describe( 'utils', () => {
 		}
 	} );
 
-	describe( 'closeDropdownOnBlur()', () => {
-		beforeEach( () => {
-			closeDropdownOnBlur( dropdownView );
-
-			dropdownView.render();
-			document.body.appendChild( dropdownView.element );
-		} );
-
-		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( 'createButtonForDropdown()', () => {
 		beforeEach( () => {
 			buttonView = createButtonForDropdown( new Model(), locale );