8
0

selectionobserver.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. /**
  2. * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* bender-tags: view, browser-only */
  6. 'use strict';
  7. import ViewRange from '/ckeditor5/engine/view/range.js';
  8. import ViewSelection from '/ckeditor5/engine/view/selection.js';
  9. import ViewDocument from '/ckeditor5/engine/view/document.js';
  10. import SelectionObserver from '/ckeditor5/engine/view/observer/selectionobserver.js';
  11. import MutationObserver from '/ckeditor5/engine/view/observer/mutationobserver.js';
  12. import EmitterMixin from '/ckeditor5/utils/emittermixin.js';
  13. import { parse } from '/tests/engine/_utils/view.js';
  14. describe( 'SelectionObserver', () => {
  15. let viewDocument, viewRoot, mutationObserver, selectionObserver, listenter;
  16. before( () => {
  17. listenter = Object.create( EmitterMixin );
  18. viewDocument = new ViewDocument();
  19. viewDocument.createRoot( document.getElementById( 'main' ) );
  20. mutationObserver = viewDocument.addObserver( MutationObserver );
  21. selectionObserver = viewDocument.addObserver( SelectionObserver );
  22. viewRoot = viewDocument.getRoot();
  23. viewRoot.appendChildren( parse( '<container:p>foo</container:p><container:p>bar</container:p>' ) );
  24. viewDocument.render();
  25. } );
  26. beforeEach( ( done ) => {
  27. viewDocument.selection.removeAllRanges();
  28. document.getSelection().removeAllRanges();
  29. viewDocument.focusedEditable = viewRoot;
  30. viewDocument.getObserver( SelectionObserver ).enable();
  31. // Ensure selectionchange will not be fired.
  32. setTimeout( () => done(), 100 );
  33. } );
  34. afterEach( () => {
  35. listenter.stopListening();
  36. } );
  37. it( 'should fire selectionChange when it is the only change', ( done ) => {
  38. listenter.listenTo( viewDocument, 'selectionChange', ( evt, data ) => {
  39. expect( data ).to.have.property( 'domSelection' ).that.equals( document.getSelection() );
  40. expect( data ).to.have.property( 'oldSelection' ).that.is.instanceof( ViewSelection );
  41. expect( data.oldSelection.rangeCount ).to.equal( 0 );
  42. expect( data ).to.have.property( 'newSelection' ).that.is.instanceof( ViewSelection );
  43. expect( data.newSelection.rangeCount ).to.equal( 1 );
  44. const newViewRange = data.newSelection.getFirstRange();
  45. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  46. expect( newViewRange.start.parent ).to.equal( viewFoo );
  47. expect( newViewRange.start.offset ).to.equal( 1 );
  48. expect( newViewRange.end.parent ).to.equal( viewFoo );
  49. expect( newViewRange.end.offset ).to.equal( 2 );
  50. done();
  51. } );
  52. changeDomSelection();
  53. } );
  54. it( 'should add only one listener to one document', ( done ) => {
  55. // Add second roots to ensure that listener is added once.
  56. viewDocument.createRoot( document.getElementById( 'additional' ), 'additional' );
  57. listenter.listenTo( viewDocument, 'selectionChange', () => {
  58. done();
  59. } );
  60. changeDomSelection();
  61. } );
  62. it( 'should not fire selectionChange on render', ( done ) => {
  63. listenter.listenTo( viewDocument, 'selectionChange', () => {
  64. throw 'selectionChange on render';
  65. } );
  66. setTimeout( () => done(), 70 );
  67. const viewBar = viewDocument.getRoot().getChild( 1 ).getChild( 0 );
  68. viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewBar, 1, viewBar, 2 ) );
  69. viewDocument.render();
  70. } );
  71. it( 'should not fired if observer is disabled', ( done ) => {
  72. viewDocument.getObserver( SelectionObserver ).disable();
  73. listenter.listenTo( viewDocument, 'selectionChange', () => {
  74. throw 'selectionChange on render';
  75. } );
  76. setTimeout( () => done(), 70 );
  77. changeDomSelection();
  78. } );
  79. it( 'should not fired if there is no focusedEditable', ( done ) => {
  80. viewDocument.focusedEditable = null;
  81. listenter.listenTo( viewDocument, 'selectionChange', () => {
  82. throw 'selectionChange on render';
  83. } );
  84. setTimeout( () => done(), 70 );
  85. changeDomSelection();
  86. } );
  87. it( 'should call render after selection change which reset selection if it was not changed', ( done ) => {
  88. const viewBar = viewDocument.getRoot().getChild( 1 ).getChild( 0 );
  89. viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewBar, 0, viewBar, 1 ) );
  90. listenter.listenTo( viewDocument, 'selectionChange', () => {
  91. setTimeout( () => {
  92. const domSelection = document.getSelection();
  93. expect( domSelection.rangeCount ).to.equal( 1 );
  94. const domRange = domSelection.getRangeAt( 0 );
  95. const domBar = document.getElementById( 'main' ).childNodes[ 1 ].childNodes[ 0 ];
  96. expect( domRange.startContainer ).to.equal( domBar );
  97. expect( domRange.startOffset ).to.equal( 0 );
  98. expect( domRange.endContainer ).to.equal( domBar );
  99. expect( domRange.endOffset ).to.equal( 1 );
  100. done();
  101. } );
  102. } );
  103. changeDomSelection();
  104. } );
  105. } );
  106. function changeDomSelection() {
  107. const domSelection = document.getSelection();
  108. domSelection.removeAllRanges();
  109. const domFoo = document.getElementById( 'main' ).childNodes[ 0 ].childNodes[ 0 ];
  110. const domRange = new Range();
  111. domRange.setStart( domFoo, 1 );
  112. domRange.setEnd( domFoo, 2 );
  113. domSelection.addRange( domRange );
  114. }