fakeselection.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  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 ViewDocument from '../../../src/view/document';
  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 viewDocument = new ViewDocument();
  12. const domEditable = document.getElementById( 'editor' );
  13. const viewRoot = createViewRoot();
  14. let viewStrong;
  15. viewDocument.attachDomRoot( domEditable );
  16. // Add mouseup oberver.
  17. viewDocument.addObserver( class extends DomEventObserver {
  18. get domEventType() {
  19. return [ 'mousedown', 'mouseup' ];
  20. }
  21. onDomEvent( domEvent ) {
  22. this.fire( domEvent.type, domEvent );
  23. }
  24. } );
  25. viewDocument.on( 'selectionChange', ( evt, data ) => {
  26. viewDocument.selection.setTo( data.newSelection );
  27. viewDocument.render();
  28. } );
  29. viewDocument.on( 'mouseup', ( evt, data ) => {
  30. if ( data.target == viewStrong ) {
  31. console.log( 'Making selection around the <strong>.' );
  32. const range = ViewRange.createOn( viewStrong );
  33. viewDocument.selection.setRanges( [ range ] );
  34. viewDocument.selection.setFake( true, { label: 'fake selection over bar' } );
  35. viewDocument.render();
  36. data.preventDefault();
  37. }
  38. } );
  39. viewDocument.selection.on( 'change', () => {
  40. if ( !viewStrong ) {
  41. return;
  42. }
  43. const firstPos = viewDocument.selection.getFirstPosition();
  44. const lastPos = viewDocument.selection.getLastPosition();
  45. if ( firstPos && lastPos && firstPos.nodeAfter == viewStrong && lastPos.nodeBefore == viewStrong ) {
  46. viewStrong.addClass( 'selected' );
  47. } else {
  48. viewStrong.removeClass( 'selected' );
  49. }
  50. } );
  51. viewDocument.on( 'focus', () => {
  52. viewStrong.addClass( 'focused' );
  53. viewDocument.render();
  54. console.log( 'The document was focused.' );
  55. } );
  56. viewDocument.on( 'blur', () => {
  57. viewStrong.removeClass( 'focused' );
  58. viewDocument.render();
  59. console.log( 'The document was blurred.' );
  60. } );
  61. setData( viewDocument, '<container:p>{}foo<strong contenteditable="false">bar</strong>baz</container:p>' );
  62. const viewP = viewRoot.getChild( 0 );
  63. viewStrong = viewP.getChild( 1 );
  64. viewDocument.focus();