focusobserver.js 1.6 KB

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