8
0
Просмотр исходного кода

Added changes after code review

Paweł Smyrek 5 лет назад
Родитель
Сommit
06fcecede5

+ 17 - 13
packages/ckeditor5-engine/tests/manual/tickets/4600/1.html

@@ -1,42 +1,46 @@
 <style>
 	.simple-widget-container {
-		margin: 1em 0;
+		margin: 10px 0;
 		font-family: sans-serif;
 	}
 
 	.simple-widget-element {
 		display: flex;
-		height: 14em;
 	}
 
 	.simple-widget-element>fieldset {
-		display: flex;
-		align-items: center;
-		margin: 3em;
+		margin: 18px;
 		width: 50%;
-		border: 1px solid #ddd;
+		border: 1px solid #ccc;
 		border-radius: 4px;
 	}
 
+	.simple-widget-element>fieldset>* {
+		margin: 8px 0;
+	}
+
 	.simple-widget-element>fieldset>legend {
-		font-size: 0.85em;
-		padding: .2em 2em;
-		border: 1px solid #ddd;
+		font-size: 13px;
+		padding: 4px 16px;
+		border: 1px solid #ccc;
 		border-radius: 4px;
 		background: #fff;
 	}
 
 	.simple-widget-element>fieldset>input {
-		flex: 1;
-		margin: 1em 1em 1em 0;
+		width: 100%;
+		box-sizing: border-box;
 	}
 
 	.simple-widget-element>fieldset>button {
-		padding: .2em 3em;
+		padding: 4px 18px;
+	}
+
+	.simple-widget-element>fieldset>img {
+		display: block;
 	}
 </style>
 
 <div id="editor">
 	<section class="simple-widget-container"></section>
-	<section class="ignored" data-cke-ignore-events="true">foo</section>
 </div>

+ 3 - 50
packages/ckeditor5-engine/tests/manual/tickets/4600/1.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals console, document, window, Event */
+/* globals console, document, window */
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
@@ -44,10 +44,6 @@ class SimpleWidgetEditing extends Plugin {
 			inheritAllFrom: '$block',
 			isObject: true
 		} );
-
-		schema.register( 'ignoredParagraph', {
-			inheritAllFrom: 'paragraph'
-		} );
 	}
 
 	_defineConverters() {
@@ -75,25 +71,6 @@ class SimpleWidgetEditing extends Plugin {
 			}
 		} );
 
-		conversion.for( 'downcast' ).elementToElement( {
-			model: 'ignoredParagraph',
-			view: {
-				name: 'section',
-				classes: 'ignored',
-				attributes: {
-					'data-cke-ignore-events': 'true'
-				}
-			}
-		} );
-
-		conversion.for( 'upcast' ).elementToElement( {
-			model: 'ignoredParagraph',
-			view: {
-				name: 'section',
-				classes: 'ignored'
-			}
-		} );
-
 		function createWidgetView( modelElement, { writer } ) {
 			const simpleWidgetContainer = writer.createContainerElement( 'section', { class: 'simple-widget-container' } );
 			const simpleWidgetElement = writer.createRawElement( 'div', { class: 'simple-widget-element' }, domElement => {
@@ -145,7 +122,7 @@ class SimpleWidgetEditing extends Plugin {
 					if ( eventName.startsWith( 'mouse' ) ) {
 						console.log( `Received ${ eventName } event.` );
 					} else {
-						console.log( `Received ${ eventName } event. Target:`, eventData.domTarget );
+						console.log( `Received ${ eventName } event. Target: `, eventData.domTarget || eventData.target );
 					}
 				} );
 			} );
@@ -153,11 +130,9 @@ class SimpleWidgetEditing extends Plugin {
 	}
 }
 
-class SimpleWidgetUI extends Plugin {}
-
 class SimpleWidget extends Plugin {
 	static get requires() {
-		return [ SimpleWidgetEditing, SimpleWidgetUI ];
+		return [ SimpleWidgetEditing ];
 	}
 }
 
@@ -167,29 +142,7 @@ ClassicEditor
 	} )
 	.then( editor => {
 		window.editor = editor;
-		addEventDispatcherForButtons( editor, 'click' );
 	} )
 	.catch( error => {
 		console.error( error.stack );
 	} );
-
-function addEventDispatcherForButtons( editor, eventName ) {
-	const view = editor.editing.view;
-	const container = Array
-		.from( view.document.getRoot().getChildren() )
-		.find( element => element.hasClass( 'simple-widget-container' ) );
-
-	view.domConverter
-		.viewToDom( container )
-		.querySelectorAll( 'button' )
-		.forEach( button => {
-			button.addEventListener( 'click', event => {
-				if ( !event.isTrusted ) {
-					return;
-				}
-
-				console.log( `Dispatched ${ eventName } event.` );
-				button.dispatchEvent( new Event( eventName, { bubbles: true } ) );
-			} );
-		} );
-}

+ 6 - 6
packages/ckeditor5-engine/tests/manual/tickets/4600/1.md

@@ -1,19 +1,19 @@
 ### Ignoring events fired by certain elements [#4600](https://github.com/ckeditor/ckeditor5/issues/4600)
 
-Events are logged in console.
+Events are logged in browser's console.
 
 ### Case 1: Events are ignored and they are not handled by default listeners.
 1. Move mouse cursor over a left container named `Ignored container with data-cke-ignore-events="true"`.
-2. When it is already there, start moving it around within container boundaries, start typing in text field and start clicking on text field and button.
+2. When cursor is already there, start moving it around within container boundaries, start typing in text field and start clicking on text field and button.
 3. Click on the button.
 
-**Expected results**: Only then, when the mouse cursor is over the left container, new logs will stop appearing in the console. Clicking inside it, typing in text field and moving mouse cursor inside the container boundaries should not be logged in console. Clicking on a button dispatches the `click` event (the `Dispatched click event` message should be logged), but `Received click event` shouldn't be present in console.
+**Expected results**: Only then, when the mouse cursor is over the left container, new logs will stop appearing in the console. Clicking inside it, typing in text field and moving mouse cursor inside the container boundaries should not be logged in the console. The `click` event after clicking the button also should not be logged in the console. The `imageLoaded` event from <img> element from ignored container also should not be logged in the console.
 
-One note for `focus` nad `blur` events: they will be logged in console, but only when container lost focus or gets it back, respectively.
+One note for `focus` nad `blur` events: they will be logged in the console, but only when container lost focus or gets it back, respectively.
 
 ### Case 2: Events are not ignored and they are handled by default listeners.
 1. Move mouse cursor over a right container named `Regular container`.
-2. When it is already there, start moving it around within container boundaries, start typing in text field and start clicking on text field and button.
+2. When cursor is already there, start moving it around within container boundaries, start typing in text field and start clicking on text field and button.
 3. Click on the button.
 
-**Expected results**: Events should be logged in console. It shouldn't be possible to focus the text field and type anything there. Clicking on a button dispatches the `click` event (the `Dispatched click event` message should be logged) and doubled `Received click event` should be present in console: one from "real" user mouse click and second one from script-generated `click` event.
+**Expected results**: Events should be logged in the console. It shouldn't be possible to focus the text field and type anything there. The `click` event after clicking the button should be logged in the console (with `mousedown` and `mouseup` events). The `imageLoaded` event also should be logged in the console - its target element should point to the <img> element from regular container.

+ 3 - 3
packages/ckeditor5-engine/tests/view/observer/domeventobserver.js

@@ -122,7 +122,7 @@ describe( 'DomEventObserver', () => {
 		expect( evtSpy.called ).to.be.false;
 	} );
 
-	it( 'should not fire event if target is ignored', () => {
+	it( 'should not fire event if the target is ignored', () => {
 		const domElement = document.createElement( 'p' );
 		const domEvent = new MouseEvent( 'click' );
 		const evtSpy = sinon.spy();
@@ -138,10 +138,10 @@ describe( 'DomEventObserver', () => {
 
 		domElement.dispatchEvent( domEvent );
 
+		ignoreEventFromTargetStub.restore();
+
 		expect( ignoreEventFromTargetStub.called ).to.be.true;
 		expect( evtSpy.called ).to.be.false;
-
-		ignoreEventFromTargetStub.restore();
 	} );
 
 	it( 'should fire event if observer is disabled and re-enabled', () => {