8
0

focusobserver.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals console, document */
  6. import Document from '../../../src/view/document';
  7. import { setData } from '../../../src/dev-utils/view';
  8. const viewDocument = new Document();
  9. viewDocument.on( 'focus', ( evt, data ) => console.log( `Focus in ${ data.domTarget.id }.` ) );
  10. viewDocument.on( 'blur', ( evt, data ) => console.log( `Blur in ${ data.domTarget.id }.` ) );
  11. const domEditable1 = document.getElementById( 'editable1' );
  12. const domEditable2 = document.getElementById( 'editable2' );
  13. const editable1 = viewDocument.createRoot( domEditable1, 'editable1' );
  14. const editable2 = viewDocument.createRoot( domEditable2, 'editable2' );
  15. viewDocument.on( 'selectionChange', ( evt, data ) => {
  16. viewDocument.selection.setTo( data.newSelection );
  17. viewDocument.render();
  18. } );
  19. setData( viewDocument, '<container:p>{}First editable.</container:p>', { rootName: 'editable1' } );
  20. setData( viewDocument, '<container:p>Second editable.</container:p>', { rootName: 'editable2' } );
  21. editable1.on( 'change:isFocused', () => {
  22. domEditable1.style.backgroundColor = editable1.isFocused ? 'green' : 'red';
  23. } );
  24. editable2.on( 'change:isFocused', () => {
  25. domEditable2.style.backgroundColor = editable2.isFocused ? 'green' : 'red';
  26. } );
  27. viewDocument.focus();