[BUGFIX] Correct position of t3editor autocomplete 06/49706/2
authorRobert Vock <robert.vock@4wdmedia.de>
Thu, 1 Sep 2016 08:30:17 +0000 (10:30 +0200)
committerJan Helke <typo3@helke.de>
Fri, 7 Oct 2016 11:35:10 +0000 (13:35 +0200)
The position of the autocomplete list for the TypoScript was incorrect
when the editing iframe was scrolled.

Resolves: #77719
Releases: master, 7.6
Change-Id: Ib0d17e6bc648fc99b1e02dfb2a212c1b19993bcc
Reviewed-on: https://review.typo3.org/49706
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Riccardo De Contardi <erredeco@gmail.com>
Reviewed-by: Martin Fox <kontakt@mlis.pl>
Tested-by: Martin Fox <kontakt@mlis.pl>
Reviewed-by: Łukasz Uznański
Tested-by: Łukasz Uznański
Reviewed-by: Jan Helke <typo3@helke.de>
Tested-by: Jan Helke <typo3@helke.de>
typo3/sysext/t3editor/Resources/Public/JavaScript/Plugins/CodeCompletion/TsCodeCompletion.js

index 0a6ee17..37a9466 100644 (file)
@@ -224,13 +224,6 @@ define([
 
        /**
         *
-        */
-       TsCodeCompletion.click = function() {
-               TsCodeCompletion.endAutoCompletion();
-       };
-
-       /**
-        *
         * @param cursorNode
         * @returns {*}
         */
@@ -311,6 +304,10 @@ define([
                }
        };
 
+       TsCodeCompletion.scroll = function(e) {
+               TsCodeCompletion.refreshCodeCompletionPosition();
+       };
+
        /**
         * Highlights entry in codecomplete box by id
         *
@@ -468,8 +465,8 @@ define([
                                $cursorNode = $(TsCodeCompletion.latestCursorNode),
                                nodeOffset = $cursorNode.offset();
 
-                       var leftpos = Math.round(wrapOffset.left + nodeOffset.left + TsCodeCompletion.latestCursorNode.offsetWidth) + 'px',
-                               toppos = Math.round($cursorNode.position().top + TsCodeCompletion.latestCursorNode.offsetHeight - $cursorNode.scrollTop()) + 'px';
+                       var leftpos = Math.round(wrapOffset.left + nodeOffset.left + TsCodeCompletion.latestCursorNode.offsetWidth - $(TsCodeCompletion.codemirror.frame.contentDocument.body).scrollLeft()) + 'px',
+                               toppos = Math.round($cursorNode.position().top + TsCodeCompletion.latestCursorNode.offsetHeight - $cursorNode.scrollTop() - $(TsCodeCompletion.codemirror.frame.contentDocument.body).scrollTop()) + 'px';
 
                        TsCodeCompletion.$codeCompleteBox.css({
                                left: leftpos,
@@ -494,6 +491,25 @@ define([
        };
 
        /**
+        * refresh the position of the completion list (after scroll)
+        */
+       TsCodeCompletion.refreshCodeCompletionPosition = function() {
+               if (TsCodeCompletion.proposals && TsCodeCompletion.proposals.length > 0) {
+                       var wrapOffset = TsCodeCompletion.codemirror.options.originalTextarea.parent().find('.t3e_iframe_wrap').offset(),
+                               $cursorNode = $(TsCodeCompletion.latestCursorNode),
+                               nodeOffset = $cursorNode.offset();
+
+                       var leftpos = Math.round(wrapOffset.left + nodeOffset.left + TsCodeCompletion.latestCursorNode.offsetWidth - $(TsCodeCompletion.codemirror.frame.contentDocument.body).scrollLeft()) + 'px',
+                               toppos = Math.round($cursorNode.position().top + TsCodeCompletion.latestCursorNode.offsetHeight - $cursorNode.scrollTop() - $(TsCodeCompletion.codemirror.frame.contentDocument.body).scrollTop()) + 'px';
+
+                       TsCodeCompletion.$codeCompleteBox.css({
+                               left: leftpos,
+                               top: toppos
+                       });
+               }
+       };
+
+       /**
         * Stop code completion and call hooks
         */
        TsCodeCompletion.endAutoCompletion = function() {
@@ -615,6 +631,7 @@ define([
 
                $(codemirror.win)
                        .on('click', TsCodeCompletion.click)
+                       .on('scroll', TsCodeCompletion.scroll)
                        .on('mousemove', TsCodeCompletion.saveMousePos)
                        .on('keydown', function(e) {
                                TsCodeCompletion.codemirror = codemirror;