widget-events.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  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, Event */
  6. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  7. import KeyObserver from '@ckeditor/ckeditor5-engine/src/view/observer/keyobserver';
  8. import { toWidget } from '../src/utils';
  9. import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  10. import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
  11. describe( 'Widget - Events', () => {
  12. const EVENT_NAME = 'keyup';
  13. let editor, editorElement, eventCallback, buttonIgnored, buttonRegular;
  14. testUtils.createSinonSandbox();
  15. beforeEach( async () => {
  16. editorElement = createEditorElement();
  17. editor = await createEditor( editorElement );
  18. } );
  19. afterEach( () => {
  20. editorElement.remove();
  21. if ( editor ) {
  22. return editor.destroy();
  23. }
  24. } );
  25. it( 'should not ignore events from child inside parent without the `data-cke-ignore-events` attribute', () => {
  26. buttonRegular.dispatchEvent( new Event( EVENT_NAME, { bubbles: true } ) );
  27. expect( eventCallback.callCount ).to.equal( 1 );
  28. } );
  29. it( 'should ignore events from child inside parent with the `data-cke-ignore-events` attribute', () => {
  30. buttonIgnored.dispatchEvent( new Event( EVENT_NAME, { bubbles: true } ) );
  31. expect( eventCallback.callCount ).to.equal( 0 );
  32. } );
  33. function createEditorElement() {
  34. return document.body.appendChild( document.createElement( 'div' ) );
  35. }
  36. async function createEditor( element ) {
  37. const editor = await ClassicEditor.create( element, { plugins: [ simpleWidgetPlugin ] } );
  38. setModelData( editor.model, '[<simpleWidgetElement></simpleWidgetElement>]' );
  39. const container = Array
  40. .from( editor.editing.view.document.getRoot().getChildren() )
  41. .find( element => element.hasClass( 'simple-widget-container' ) );
  42. const domFragment = editor.editing.view.domConverter.viewToDom( container );
  43. buttonIgnored = domFragment.querySelector( '#ignored-button' );
  44. buttonRegular = domFragment.querySelector( '#regular-button' );
  45. return editor;
  46. }
  47. function simpleWidgetPlugin( editor ) {
  48. defineSchema( editor );
  49. defineConverters( editor );
  50. addObserver( editor );
  51. function defineSchema( editor ) {
  52. editor.model.schema.register( 'simpleWidgetElement', {
  53. inheritAllFrom: '$block',
  54. isObject: true
  55. } );
  56. }
  57. function defineConverters( editor ) {
  58. editor.conversion.for( 'editingDowncast' )
  59. .elementToElement( {
  60. model: 'simpleWidgetElement',
  61. view: ( modelElement, { writer } ) => {
  62. const widgetElement = createWidgetView( modelElement, { writer } );
  63. return toWidget( widgetElement, writer );
  64. }
  65. } );
  66. editor.conversion.for( 'dataDowncast' )
  67. .elementToElement( {
  68. model: 'simpleWidgetElement',
  69. view: createWidgetView
  70. } );
  71. editor.conversion.for( 'upcast' )
  72. .elementToElement( {
  73. model: 'simpleWidgetElement',
  74. view: {
  75. name: 'section',
  76. classes: 'simple-widget-container'
  77. }
  78. } );
  79. function createWidgetView( modelElement, { writer } ) {
  80. const simpleWidgetContainer = writer.createContainerElement( 'section', { class: 'simple-widget-container' } );
  81. const simpleWidgetElement = writer.createRawElement( 'div', { class: 'simple-widget-element' }, domElement => {
  82. domElement.innerHTML = `
  83. <div data-cke-ignore-events="true">
  84. <button id="ignored-button">Click!</button>
  85. </div>
  86. <div>
  87. <button id="regular-button">Click!</button>
  88. </div>
  89. `;
  90. } );
  91. writer.insert( writer.createPositionAt( simpleWidgetContainer, 0 ), simpleWidgetElement );
  92. return simpleWidgetContainer;
  93. }
  94. }
  95. function addObserver( editor ) {
  96. eventCallback = sinon.fake();
  97. editor.editing.view.addObserver( KeyObserver );
  98. editor.editing.view.document.on( EVENT_NAME, eventCallback );
  99. }
  100. }
  101. } );