focusobserver.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  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 createViewRoot from '../_utils/createroot';
  8. import { StylesProcessor } from '../../../src/view/stylesmap';
  9. const view = new View( new StylesProcessor() );
  10. const viewDocument = view.document;
  11. viewDocument.on( 'focus', ( evt, data ) => console.log( `Focus in ${ data.domTarget.id }.` ) );
  12. viewDocument.on( 'blur', ( evt, data ) => console.log( `Blur in ${ data.domTarget.id }.` ) );
  13. const domEditable1 = document.getElementById( 'editable1' );
  14. const domEditable2 = document.getElementById( 'editable2' );
  15. const editable1 = createViewRoot( viewDocument, 'div', 'editable1' );
  16. const editable2 = createViewRoot( viewDocument, 'div', 'editable2' );
  17. view.attachDomRoot( domEditable1, 'editable1' );
  18. view.attachDomRoot( domEditable2, 'editable2' );
  19. viewDocument.on( 'selectionChange', ( evt, data ) => {
  20. view.change( writer => {
  21. writer.setSelection( data.newSelection );
  22. } );
  23. } );
  24. view.change( writer => {
  25. writer.insert( writer.createPositionAt( editable1, 0 ), writer.createText( 'First editable.' ) );
  26. writer.insert( writer.createPositionAt( editable2, 0 ), writer.createText( 'Second editable.' ) );
  27. writer.setSelection( editable1, 'end' );
  28. } );
  29. editable1.on( 'change:isFocused', () => {
  30. domEditable1.style.backgroundColor = editable1.isFocused ? 'green' : 'red';
  31. } );
  32. editable2.on( 'change:isFocused', () => {
  33. domEditable2.style.backgroundColor = editable2.isFocused ? 'green' : 'red';
  34. } );
  35. view.focus();