From b37b130cd67eff836384b1a2f2eed7684532df1b Mon Sep 17 00:00:00 2001 From: Szymon Cofalik Date: Fri, 28 Jun 2019 12:54:19 +0200 Subject: [PATCH] Feature: Added `view.Document#event:beforeinput`. --- src/view/observer/inputobserver.js | 44 ++++++++++++++++++++++++++++ src/view/observer/keyobserver.js | 2 +- src/view/view.js | 2 ++ tests/view/observer/inputobserver.js | 40 +++++++++++++++++++++++++ tests/view/view/view.js | 4 ++- 5 files changed, 90 insertions(+), 2 deletions(-) create mode 100644 src/view/observer/inputobserver.js create mode 100644 tests/view/observer/inputobserver.js diff --git a/src/view/observer/inputobserver.js b/src/view/observer/inputobserver.js new file mode 100644 index 000000000..1ded6f64d --- /dev/null +++ b/src/view/observer/inputobserver.js @@ -0,0 +1,44 @@ +/** + * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/** + * @module engine/view/observer/inputobserver + */ + +import DomEventObserver from './domeventobserver'; + +/** + * Observer for events connected with data input. + * + * Note that this observer is attached by the {@link module:engine/view/view~View} and is available by default. + * + * @extends module:engine/view/observer/domeventobserver~DomEventObserver + */ +export default class InputObserver extends DomEventObserver { + constructor( view ) { + super( view ); + + this.domEventType = [ 'beforeinput' ]; + } + + onDomEvent( domEvent ) { + this.fire( domEvent.type, domEvent ); + } +} + +/** + * Fired before browser inputs (or deletes) some data. + * + * This event is available only on browsers which support DOM `beforeinput` event. + * + * Introduced by {@link module:engine/view/observer/inputobserver~InputObserver}. + * + * Note that because {@link module:engine/view/observer/inputobserver~InputObserver} is attached by the + * {@link module:engine/view/view~View} this event is available by default. + * + * @see module:engine/view/observer/inputobserver~InputObserver + * @event module:engine/view/document~Document#event:beforeinput + * @param {module:engine/view/observer/domeventdata~DomEventData} data Event data. + */ diff --git a/src/view/observer/keyobserver.js b/src/view/observer/keyobserver.js index 84ac2f1ca..7a7873812 100644 --- a/src/view/observer/keyobserver.js +++ b/src/view/observer/keyobserver.js @@ -11,7 +11,7 @@ import DomEventObserver from './domeventobserver'; import { getCode } from '@ckeditor/ckeditor5-utils/src/keyboard'; /** - * {@link module:engine/view/document~Document#event:keydown Key down} event observer. + * Observer for events connected with pressing keyboard keys. * * Note that this observer is attached by the {@link module:engine/view/view~View} and is available by default. * diff --git a/src/view/view.js b/src/view/view.js index 7c6e6a1d5..e7e445218 100644 --- a/src/view/view.js +++ b/src/view/view.js @@ -21,6 +21,7 @@ import FakeSelectionObserver from './observer/fakeselectionobserver'; import SelectionObserver from './observer/selectionobserver'; import FocusObserver from './observer/focusobserver'; import CompositionObserver from './observer/compositionobserver'; +import InputObserver from './observer/inputobserver'; import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin'; import log from '@ckeditor/ckeditor5-utils/src/log'; @@ -172,6 +173,7 @@ export default class View { this.addObserver( KeyObserver ); this.addObserver( FakeSelectionObserver ); this.addObserver( CompositionObserver ); + this.addObserver( InputObserver ); // Inject quirks handlers. injectQuirksHandling( this ); diff --git a/tests/view/observer/inputobserver.js b/tests/view/observer/inputobserver.js new file mode 100644 index 000000000..23a2f7612 --- /dev/null +++ b/tests/view/observer/inputobserver.js @@ -0,0 +1,40 @@ +/** + * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + +import InputObserver from '../../../src/view/observer/inputobserver'; +import View from '../../../src/view/view'; + +describe( 'InputObserver', () => { + let view, viewDocument, observer; + + beforeEach( () => { + view = new View(); + viewDocument = view.document; + observer = view.getObserver( InputObserver ); + } ); + + afterEach( () => { + view.destroy(); + } ); + + it( 'should define domEventType', () => { + expect( observer.domEventType ).to.contains( 'beforeinput' ); + } ); + + it( 'should fire beforeinput with dom event data', () => { + const spy = sinon.spy(); + + viewDocument.on( 'beforeinput', spy ); + + const domEvtData = { + type: 'beforeinput' + }; + + observer.onDomEvent( domEvtData ); + + expect( spy.calledOnce ).to.be.true; + expect( spy.args[ 0 ][ 1 ].domEvent ).to.equal( domEvtData ); + } ); +} ); diff --git a/tests/view/view/view.js b/tests/view/view/view.js index 9efc6d78d..9e1e5326f 100644 --- a/tests/view/view/view.js +++ b/tests/view/view/view.js @@ -9,6 +9,7 @@ import View from '../../../src/view/view'; import Observer from '../../../src/view/observer/observer'; import MutationObserver from '../../../src/view/observer/mutationobserver'; import KeyObserver from '../../../src/view/observer/keyobserver'; +import InputObserver from '../../../src/view/observer/inputobserver'; import FakeSelectionObserver from '../../../src/view/observer/fakeselectionobserver'; import SelectionObserver from '../../../src/view/observer/selectionobserver'; import FocusObserver from '../../../src/view/observer/focusobserver'; @@ -28,7 +29,7 @@ import createElement from '@ckeditor/ckeditor5-utils/src/dom/createelement'; import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; describe( 'view', () => { - const DEFAULT_OBSERVERS_COUNT = 6; + const DEFAULT_OBSERVERS_COUNT = 7; let domRoot, view, viewDocument, ObserverMock, instantiated, enabled, ObserverMockGlobalCount; testUtils.createSinonSandbox(); @@ -85,6 +86,7 @@ describe( 'view', () => { expect( view.getObserver( KeyObserver ) ).to.be.instanceof( KeyObserver ); expect( view.getObserver( FakeSelectionObserver ) ).to.be.instanceof( FakeSelectionObserver ); expect( view.getObserver( CompositionObserver ) ).to.be.instanceof( CompositionObserver ); + expect( view.getObserver( InputObserver ) ).to.be.instanceof( InputObserver ); } ); describe( 'attachDomRoot()', () => {