fakeselection.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals document, console */
  6. import View from '../../../src/view/view';
  7. import DomEventObserver from '../../../src/view/observer/domeventobserver';
  8. import ViewRange from '../../../src/view/range';
  9. import createViewRoot from '../_utils/createroot';
  10. import { setData } from '../../../src/dev-utils/view';
  11. const view = new View();
  12. const viewDocument = view.document;
  13. const domEditable = document.getElementById( 'editor' );
  14. const viewRoot = createViewRoot( viewDocument );
  15. let viewStrong;
  16. view.attachDomRoot( domEditable );
  17. // Add mouseup oberver.
  18. view.addObserver( class extends DomEventObserver {
  19. get domEventType() {
  20. return [ 'mousedown', 'mouseup' ];
  21. }
  22. onDomEvent( domEvent ) {
  23. this.fire( domEvent.type, domEvent );
  24. }
  25. } );
  26. viewDocument.on( 'selectionChange', ( evt, data ) => {
  27. view.change( writer => {
  28. writer.setSelection( data.newSelection );
  29. } );
  30. } );
  31. viewDocument.on( 'mouseup', ( evt, data ) => {
  32. if ( data.target == viewStrong ) {
  33. console.log( 'Making selection around the <strong>.' );
  34. view.change( writer => {
  35. writer.setSelection( ViewRange.createOn( viewStrong ) );
  36. writer.setFakeSelection( true, { label: 'fake selection over bar' } );
  37. } );
  38. data.preventDefault();
  39. }
  40. } );
  41. viewDocument.selection.on( 'change', () => {
  42. if ( !viewStrong ) {
  43. return;
  44. }
  45. const firstPos = viewDocument.selection.getFirstPosition();
  46. const lastPos = viewDocument.selection.getLastPosition();
  47. if ( firstPos && lastPos && firstPos.nodeAfter == viewStrong && lastPos.nodeBefore == viewStrong ) {
  48. viewStrong.addClass( 'selected' );
  49. } else {
  50. viewStrong.removeClass( 'selected' );
  51. }
  52. } );
  53. viewDocument.on( 'focus', () => {
  54. view.change( () => {
  55. viewStrong.addClass( 'focused' );
  56. } );
  57. console.log( 'The document was focused.' );
  58. } );
  59. viewDocument.on( 'blur', () => {
  60. view.change( () => {
  61. viewStrong.removeClass( 'focused' );
  62. } );
  63. console.log( 'The document was blurred.' );
  64. } );
  65. setData( view, '<container:p>{}foo<strong contenteditable="false">bar</strong>baz</container:p>' );
  66. const viewP = viewRoot.getChild( 0 );
  67. viewStrong = viewP.getChild( 1 );
  68. view.focus();