From 32bf53c9ed0a103ba54044933e31e8d929944072 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 12 Dec 2017 15:37:04 +0100 Subject: [PATCH 1/2] Decorated View#render method. --- src/view.js | 11 +++++++++++ tests/view.js | 11 +++++++++++ 2 files changed, 22 insertions(+) diff --git a/src/view.js b/src/view.js index b95b84da..1f5bb6dc 100644 --- a/src/view.js +++ b/src/view.js @@ -190,6 +190,8 @@ export default class View { * @private * @member {Object} #_bindTemplate */ + + this.decorate( 'render' ); } /** @@ -492,6 +494,15 @@ export default class View { this._viewCollections.map( c => c.destroy() ); } + + /** + * Event fired by the {@link #render} method. Actual rendering is executed as a listener to + * this event with the default priority. + * + * See {@link module:utils/observablemixin~ObservableMixin.decorate} for more information and samples. + * + * @event render + */ } mix( View, DomEmitterMixin ); diff --git a/tests/view.js b/tests/view.js index 241612c7..c7b17886 100644 --- a/tests/view.js +++ b/tests/view.js @@ -195,6 +195,17 @@ describe( 'View', () => { } ); describe( 'render()', () => { + it( 'is decorated', done => { + const view = new View(); + + view.on( 'render', () => { + expect( view.isRendered ).to.be.true; + done(); + } ); + + view.render(); + } ); + it( 'should throw if already rendered', () => { const view = new View(); From 01d0230344f055cb4084986a5dc8eb56fe2cd9e6 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 15 Dec 2017 10:30:42 +0100 Subject: [PATCH 2/2] Used clickOutsideHandler in the closeDropdownOnBlur helper. --- src/dropdown/utils.js | 33 ++++++------------- tests/dropdown/button/createbuttondropdown.js | 8 ++--- tests/dropdown/list/createlistdropdown.js | 8 ++--- 3 files changed, 18 insertions(+), 31 deletions(-) diff --git a/src/dropdown/utils.js b/src/dropdown/utils.js index a5121126..b2b68ba8 100644 --- a/src/dropdown/utils.js +++ b/src/dropdown/utils.js @@ -7,7 +7,7 @@ * @module ui/dropdown/utils */ -/* global document */ +import clickOutsideHandler from '../bindings/clickoutsidehandler'; /** * Adds a behavior to a dropdownView that focuses dropdown panel view contents on keystrokes. @@ -57,27 +57,14 @@ export function closeDropdownOnExecute( dropdownView, viewCollection ) { * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView */ export function closeDropdownOnBlur( dropdownView ) { - dropdownView.on( 'change:isOpen', ( evt, name, value ) => { - if ( value ) { - attachDocumentClickListener( document, dropdownView ); - } else { - dropdownView.stopListening( document ); - } - } ); -} - -// Attaches a "click" listener in DOM to check if any element outside -// the dropdown has been clicked. -// -// @private -// @param {module:ui/dropdown/listdropdownview~ListDropdownView} dropdownView -function attachDocumentClickListener( document, dropdownView ) { - // TODO: It will probably be focus/blur-based rather than click. It should be bound - // to focusmanager of some sort. - dropdownView.listenTo( document, 'click', ( evtInfo, { target: domEvtTarget } ) => { - // Collapse the dropdown when the webpage outside of the component is clicked. - if ( dropdownView.element != domEvtTarget && !dropdownView.element.contains( domEvtTarget ) ) { - dropdownView.isOpen = false; - } + dropdownView.on( 'render', () => { + clickOutsideHandler( { + emitter: dropdownView, + activator: () => dropdownView.isOpen, + callback: () => { + dropdownView.isOpen = false; + }, + contextElements: [ dropdownView.element ] + } ); } ); } diff --git a/tests/dropdown/button/createbuttondropdown.js b/tests/dropdown/button/createbuttondropdown.js index e144bbbe..839b721e 100644 --- a/tests/dropdown/button/createbuttondropdown.js +++ b/tests/dropdown/button/createbuttondropdown.js @@ -95,7 +95,7 @@ describe( 'createButtonDropdown', () => { view.isOpen = true; // Fire event from outside of the dropdown. - document.body.dispatchEvent( new Event( 'click', { + document.body.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) ); @@ -103,7 +103,7 @@ describe( 'createButtonDropdown', () => { expect( view.isOpen ).to.be.false; // Fire event from outside of the dropdown. - document.body.dispatchEvent( new Event( 'click', { + document.body.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) ); @@ -116,7 +116,7 @@ describe( 'createButtonDropdown', () => { view.isOpen = true; // Event from view.element should be discarded. - view.element.dispatchEvent( new Event( 'click', { + view.element.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) ); @@ -127,7 +127,7 @@ describe( 'createButtonDropdown', () => { const child = document.createElement( 'div' ); view.element.appendChild( child ); - child.dispatchEvent( new Event( 'click', { + child.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) ); diff --git a/tests/dropdown/list/createlistdropdown.js b/tests/dropdown/list/createlistdropdown.js index bd807d36..9b709902 100644 --- a/tests/dropdown/list/createlistdropdown.js +++ b/tests/dropdown/list/createlistdropdown.js @@ -106,7 +106,7 @@ describe( 'createListDropdown', () => { view.isOpen = true; // Fire event from outside of the dropdown. - document.body.dispatchEvent( new Event( 'click', { + document.body.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) ); @@ -114,7 +114,7 @@ describe( 'createListDropdown', () => { expect( view.isOpen ).to.be.false; // Fire event from outside of the dropdown. - document.body.dispatchEvent( new Event( 'click', { + document.body.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) ); @@ -127,7 +127,7 @@ describe( 'createListDropdown', () => { view.isOpen = true; // Event from view.element should be discarded. - view.element.dispatchEvent( new Event( 'click', { + view.element.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) ); @@ -138,7 +138,7 @@ describe( 'createListDropdown', () => { const child = document.createElement( 'div' ); view.element.appendChild( child ); - child.dispatchEvent( new Event( 'click', { + child.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) );