fakeselection.js 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  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 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. import { StylesProcessor } from '../../../src/view/stylesmap';
  12. const view = new View( new StylesProcessor() );
  13. const viewDocument = view.document;
  14. const domEditable = document.getElementById( 'editor' );
  15. const viewRoot = createViewRoot( viewDocument );
  16. let viewStrong;
  17. view.attachDomRoot( domEditable );
  18. // Add mouseup oberver.
  19. view.addObserver( class extends DomEventObserver {
  20. get domEventType() {
  21. return [ 'mousedown', 'mouseup' ];
  22. }
  23. onDomEvent( domEvent ) {
  24. this.fire( domEvent.type, domEvent );
  25. }
  26. } );
  27. viewDocument.on( 'selectionChange', ( evt, data ) => {
  28. view.change( writer => {
  29. writer.setSelection( data.newSelection );
  30. } );
  31. } );
  32. viewDocument.on( 'mouseup', ( evt, data ) => {
  33. if ( data.target == viewStrong ) {
  34. console.log( 'Making selection around the <strong>.' );
  35. view.change( writer => {
  36. writer.setSelection( ViewRange._createOn( viewStrong ), { fake: 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. view.change( writer => writer.addClass( 'selected', viewStrong ) );
  49. } else {
  50. view.change( writer => writer.removeClass( 'selected', viewStrong ) );
  51. }
  52. } );
  53. viewDocument.on( 'focus', () => {
  54. view.change( writer => writer.addClass( 'focused', viewStrong ) );
  55. console.log( 'The document was focused.' );
  56. } );
  57. viewDocument.on( 'blur', () => {
  58. view.change( writer => writer.removeClass( 'focused', viewStrong ) );
  59. console.log( 'The document was blurred.' );
  60. } );
  61. setData( view, '<container:p>{}foo<strong contenteditable="false">bar</strong>baz</container:p>' );
  62. const viewP = viewRoot.getChild( 0 );
  63. viewStrong = viewP.getChild( 1 );
  64. view.focus();