Fixed autocomplete view positioning.

plugins/autocomplete/plugin.js

@@ -703,20 +703,13 @@
 		setPosition: function( rect ) {
 			var window = this.document.getWindow(),
 				panelHeight = this.element.getSize( 'height' ),
-				viewPane = window.getViewPaneSize(),
-				viewScroll = window.getScrollPosition(),
-				// Position of the top and bottom boundaries of the view
-				// relative to the body.
-				viewTop = viewScroll.x,
-				viewBottom = viewScroll.x + viewPane.height,
-				// How much space is there for the panel above and below the specified rect.
-				spaceAbove = rect.top - viewTop,
-				spaceBelow = viewBottom - rect.bottom,
-
 				frame = this.editor.window.getFrame(),
 				editable = this.editor.editable(),
 				// Bounding rect where view should fit (visible editor viewport).
 				absoluteRect = editable.isInline() ? editable.getAbsoluteClientRect( this.editor ) : frame.getAbsoluteClientRect( this.editor ),
+				// How much space is there for the panel above and below the specified rect.
+				spaceAbove = rect.top - absoluteRect.top,
+				spaceBelow = rect.bottom - absoluteRect.bottom,
 				top;
 
 			// If panel does not fit below the rect and fits above, set it there.

tests/plugins/autocomplete/manual/viewposition.html

@@ -0,0 +1,69 @@
+<style>
+	body {
+		margin: 0px;
+		position: static;
+	}
+</style>
+
+<div style="padding: 1500px">
+	<textarea id="editor1" >
+		<h1>Lorem ipsum dolor sit amet, consectetur.</h1>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum veniam in eligendi, aliquid dicta odio, atque consequatur suscipit quas porro veritatis rerum libero deleniti vero aliquam animi unde voluptatibus dolores deserunt! Explicabo repellat sint pariatur. Sint tempora ea illo, harum quidem iste adipisci libero aliquid, incidunt ullam ex at maiores enim, quia animi quo porro fugiat nihil et. Id in ullam voluptatem a officia corporis consequuntur voluptatum error neque sequi, vitae magnam reprehenderit ipsa reiciendis hic. Totam atque explicabo adipisci debitis, id sit vel error laudantium animi, voluptas voluptate ipsam saepe, molestiae quidem reprehenderit excepturi odio. Eaque, hic quisquam amet.</p>
+		<h1>Lorem ipsum dolor sit amet, consectetur.</h1>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut et rerum autem illo, necessitatibus maiores hic quia vitae fugit quasi ducimus eveniet veritatis amet modi error inventore similique beatae molestiae magnam reiciendis voluptatem quo fuga rem fugiat! Quas suscipit error labore id sit aliquid quia porro, sint quod modi harum laboriosam! Explicabo rerum, autem. Odio laborum quam quidem explicabo nobis, corporis quia maiores ad, sequi possimus consequuntur alias ipsa dolorem distinctio blanditiis saepe, veritatis iure praesentium dicta repudiandae, quos quasi doloribus tempore. Perferendis magni, cum voluptatibus accusantium totam mollitia. Quibusdam accusantium labore voluptates et pariatur animi, nam temporibus magnam vitae.</p>
+		<h1>Lorem ipsum dolor sit amet, consectetur.</h1>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum asperiores reprehenderit delectus tempore ullam repellat, eius voluptate iste, minus deserunt architecto amet velit harum. Natus praesentium atque exercitationem, eum porro magnam molestiae tenetur consequatur delectus sapiente provident inventore unde pariatur voluptates aliquid nulla quidem. Nobis vitae est neque non quis aspernatur quasi culpa, omnis dolorem veniam, veritatis, atque quam nisi sed odit necessitatibus modi deleniti a! Explicabo inventore dolor veritatis, a placeat nobis accusamus! Illum autem a quia perspiciatis, provident eum consectetur quae aliquam recusandae reiciendis nesciunt ratione, fuga quam laborum natus laudantium nostrum, distinctio obcaecati? In officia quod, doloremque.</p>
+	</textarea>
+</div>
+
+<script>
+	var editor;
+
+	CKEDITOR.replace( 'editor1', {
+		width: 600,
+		on: {
+			instanceReady: function( evt ) {
+				editor = evt.editor;
+
+				new CKEDITOR.plugins.autocomplete( editor, getTextTestCallback(), dataCallback );
+			}
+		}
+	} );
+
+	window.scrollTo( 1500, 1500 );
+
+	function getTextTestCallback() {
+		return function( range ) {
+			return CKEDITOR.plugins.textMatch.match( range, matchCallback );
+		};
+	}
+
+	function matchCallback( text, offset ) {
+		var left = text.slice( 0, offset ),
+			right = text.slice( offset ),
+			match = left.match( new RegExp( '@\\w*$' ) );
+
+		if ( !match ) {
+			return null;
+		}
+
+		return { start: match.index, end: offset };
+	}
+
+	function dataCallback( query, range, callback ) {
+		var data = [
+			{ id: 1, name: '@john' },
+			{ id: 2, name: '@thomas' },
+			{ id: 3, name: '@anna' },
+			{ id: 4, name: '@cris' },
+			{ id: 5, name: '@julia' }
+		];
+
+		callback(
+			data.filter( function( item ) {
+				return item.name.indexOf( query ) === 0;
+			} )
+		);
+	}
+
+</script>

tests/plugins/autocomplete/manual/viewposition.md

@@ -0,0 +1,20 @@
+@bender-tags: 4.10.0, bug, tp3559
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, autocomplete, textmatch
+
+1. Scroll the editor content to the middle.
+2. Focus the editor and type `@`.
+3. Scroll the editor up and down.
+
+## Expected
+
+When changing scroll position of the editor the view should be placed differently:
+
+- if there is enough space above a caret position and too little space below, the view should be placed above a caret
+- if there is not enough space above a caret position and enough space below, the view should be placed below a caret
+- if there is not enough space above and below a caret, the view should be placed below a caret
+
+## Unexpected
+
+The view is not changing its position depending on space below and above a caret.
+

tests/plugins/autocomplete/view.js

@@ -150,10 +150,7 @@
 			assertPanePosition( this.editors.classic, {
 				rect: { top: 400, bottom: 410, left: 100 },
 				absoluteRect: { top: 0, bottom: 500 },
-				viewPaneHeight: 500,
-				scrollPosition: 0,
 				elementHeight: 100,
-				scrollX: 0
 			}, function( element ) {
 				assert.areEqual( '300px', element.getStyle( 'top' ) );
 				assert.areEqual( '100px', element.getStyle( 'left' ) );
@@ -165,10 +162,7 @@
 			assertPanePosition( this.editors.classic, {
 				rect: { top: 100, bottom: 110, left: 50 },
 				absoluteRect: { top: 0, bottom: 500 },
-				viewPaneHeight: 500,
-				scrollPosition: 0,
 				elementHeight: 100,
-				scrollX: 0
 			}, function( element ) {
 				assert.areEqual( '110px', element.getStyle( 'top' ) );
 				assert.areEqual( '50px', element.getStyle( 'left' ) );
@@ -180,10 +174,7 @@
 			assertPanePosition( this.editors.classic, {
 				rect: { top: 400, bottom: 410, left: 100 },
 				absoluteRect: { top: 0, bottom: 300 },
-				viewPaneHeight: 500,
-				scrollPosition: 0,
 				elementHeight: 100,
-				scrollX: 0
 			}, function( element ) {
 				assert.areEqual( '300px', element.getStyle( 'top' ) );
 				assert.areEqual( '100px', element.getStyle( 'left' ) );
@@ -195,10 +186,7 @@
 			assertPanePosition( this.editors.classic, {
 				rect: { top: 100, bottom: 110, left: 50 },
 				absoluteRect: { top: 200, bottom: 500 },
-				viewPaneHeight: 500,
-				scrollPosition: 0,
 				elementHeight: 100,
-				scrollX: 0
 			}, function( element ) {
 				assert.areEqual( '200px', element.getStyle( 'top' ) );
 				assert.areEqual( '50px', element.getStyle( 'left' ) );
@@ -225,14 +213,6 @@
 
 	function assertPanePosition( editor, config, callback ) {
 		var view = new CKEDITOR.plugins.autocomplete.view( editor ),
-			windowStub = sinon.stub( CKEDITOR.document, 'getWindow' ).returns( {
-				getViewPaneSize: function() {
-					return { height: config.viewPaneHeight };
-				},
-				getScrollPosition: function() {
-					return { x: config.scrollX };
-				}
-			} ),
 			elementStub = sinon.stub( CKEDITOR.dom.element.prototype, 'getAbsoluteClientRect' ).returns( config.absoluteRect );
 
 		view.append();
@@ -244,7 +224,6 @@
 		callback( view.element );
 
 		// Test fixture down
-		windowStub.restore();
 		elementStub.restore();
 	}