clickobserver.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /* globals console, document */
  6. import View from '../../../src/view/view';
  7. import DomEventObserver from '../../../src/view/observer/domeventobserver';
  8. import createViewRoot from '../_utils/createroot';
  9. import { StylesProcessor } from '../../../src/view/stylesmap';
  10. const view = new View( new StylesProcessor() );
  11. const viewDocument = view.document;
  12. // Disable rendering for this example, because it re-enables all observers each time view is rendered.
  13. view.render = () => {};
  14. class ClickObserver1 extends DomEventObserver {
  15. constructor( view ) {
  16. super( view );
  17. this.id = 1;
  18. this.domEventType = 'click';
  19. }
  20. onDomEvent( domEvt ) {
  21. this.fire( 'click', domEvt, { id: this.id } );
  22. }
  23. }
  24. class ClickObserver2 extends DomEventObserver {
  25. constructor( view ) {
  26. super( view );
  27. this.id = 2;
  28. this.domEventType = 'click';
  29. }
  30. onDomEvent( domEvt ) {
  31. this.fire( 'click', domEvt, { id: this.id } );
  32. }
  33. }
  34. viewDocument.on( 'click', ( evt, evtData ) => console.log( 'click', evtData.id, evtData.domTarget.id ) );
  35. // Random order.
  36. view.addObserver( ClickObserver1 );
  37. createViewRoot( viewDocument, 'div', 'clickerA' );
  38. view.attachDomRoot( document.getElementById( 'clickerA' ), 'clickerA' );
  39. view.addObserver( ClickObserver2 );
  40. createViewRoot( viewDocument, 'div', 'clickerB' );
  41. view.attachDomRoot( document.getElementById( 'clickerB' ), 'clickerB' );
  42. document.getElementById( 'enable1' ).addEventListener( 'click', () => view.getObserver( ClickObserver1 ).enable() );
  43. document.getElementById( 'disable1' ).addEventListener( 'click', () => view.getObserver( ClickObserver1 ).disable() );