fakeselection.js 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  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 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 ), { fake: true, label: 'fake selection over bar' } );
  36. } );
  37. data.preventDefault();
  38. }
  39. } );
  40. viewDocument.selection.on( 'change', () => {
  41. if ( !viewStrong ) {
  42. return;
  43. }
  44. const firstPos = viewDocument.selection.getFirstPosition();
  45. const lastPos = viewDocument.selection.getLastPosition();
  46. if ( firstPos && lastPos && firstPos.nodeAfter == viewStrong && lastPos.nodeBefore == viewStrong ) {
  47. view.change( writer => writer.addClass( 'selected', viewStrong ) );
  48. } else {
  49. view.change( writer => writer.removeClass( 'selected', viewStrong ) );
  50. }
  51. } );
  52. viewDocument.on( 'focus', () => {
  53. view.change( writer => writer.addClass( 'focused', viewStrong ) );
  54. console.log( 'The document was focused.' );
  55. } );
  56. viewDocument.on( 'blur', () => {
  57. view.change( writer => writer.removeClass( 'focused', viewStrong ) );
  58. console.log( 'The document was blurred.' );
  59. } );
  60. setData( view, '<container:p>{}foo<strong contenteditable="false">bar</strong>baz</container:p>' );
  61. const viewP = viewRoot.getChild( 0 );
  62. viewStrong = viewP.getChild( 1 );
  63. view.focus();