focusobserver.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. /**
  2. * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* global console:false */
  6. import Document from '/ckeditor5/engine/view/document.js';
  7. import MutationObserver from '/ckeditor5/engine/view/observer/mutationobserver.js';
  8. import SelectionObserver from '/ckeditor5/engine/view/observer/selectionobserver.js';
  9. import FocusObserver from '/ckeditor5/engine/view/observer/focusobserver.js';
  10. import { setData } from '/tests/engine/_utils/view.js';
  11. const viewDocument = new Document();
  12. viewDocument.on( 'focus', ( evt, data ) => console.log( 'event:focus', data.domTarget ) );
  13. viewDocument.on( 'blur', ( evt, data ) => console.log( 'event:blur', data.domTarget ) );
  14. const domEditable1 = document.getElementById( 'editable1' );
  15. const domEditable2 = document.getElementById( 'editable2' );
  16. const editable1 = viewDocument.createRoot( domEditable1, 'editable1' );
  17. const editable2 = viewDocument.createRoot( domEditable2, 'editable2' );
  18. viewDocument.on( 'selectionChange', ( evt, data ) => {
  19. viewDocument.selection.setTo( data.newSelection );
  20. } );
  21. viewDocument.addObserver( MutationObserver );
  22. viewDocument.addObserver( SelectionObserver );
  23. viewDocument.addObserver( FocusObserver );
  24. setData( viewDocument, '<p>First editable.</p>', { rootName: 'editable1' } );
  25. setData( viewDocument, '<p>Second editable.</p>', { rootName: 'editable2' } );
  26. editable1.on( 'change:isFocused', () => domEditable1.style.backgroundColor = editable1.isFocused ? 'green' : 'red' );
  27. editable2.on( 'change:isFocused', () => domEditable2.style.backgroundColor = editable2.isFocused ? 'green' : 'red' );
  28. viewDocument.render();