[BUGFIX] t3editor: Fix code completion when running multiple editor instances 94/42094/3
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Wed, 29 Jul 2015 13:29:28 +0000 (15:29 +0200)
committerAndreas Fernandez <typo3@scripting-base.de>
Wed, 29 Jul 2015 18:16:28 +0000 (20:16 +0200)
Resolves: #68622
Releases: master
Change-Id: I961de20ab92d6cff1626f03dd1d479a70a686cd1
Reviewed-on: http://review.typo3.org/42094
Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Reviewed-by: Daniel Goerz <ervaude@gmail.com>
Tested-by: Daniel Goerz <ervaude@gmail.com>
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
typo3/sysext/t3editor/Resources/Public/Css/t3editor.css
typo3/sysext/t3editor/Resources/Public/JavaScript/Plugins/CodeCompletion/CompletionResult.js
typo3/sysext/t3editor/Resources/Public/JavaScript/Plugins/CodeCompletion/DescriptionPlugin.js
typo3/sysext/t3editor/Resources/Public/JavaScript/Plugins/CodeCompletion/TsCodeCompletion.js

index c0ebb64..7ad5ce5 100644 (file)
@@ -54,11 +54,13 @@ div.CodeMirror-line-numbers {
        height: 20px;
        float: left;
 }
-.t3e_codeCompleteBox {
+.t3e_codeCompleteWrap {
        position: absolute;
        top: 0; left: 0;
-       background-color: #EFEFF4;
        z-index:190;
+}
+.t3e_codeCompleteBox {
+       background-color: #EFEFF4;
        border:2px solid silver;
        padding:0px;
 }
index 480a4e5..9be6fb2 100644 (file)
@@ -54,7 +54,7 @@ define('TYPO3/CMS/T3editor/Plugins/CodeCompletion/CompletionResult', ['jquery'],
                        value = CompletionResult.tsTreeNode.getValue();
 
                // first get the childNodes of the Node (=properties defined by the user)
-               for (key in childNodes) {
+               for (var key in childNodes) {
                        if (typeof childNodes[key].value !== 'undefined' && childNodes[key].value !== null) {
                                var propObj = {};
                                propObj.word = key;
@@ -76,7 +76,7 @@ define('TYPO3/CMS/T3editor/Plugins/CodeCompletion/CompletionResult', ['jquery'],
 
                // then get the tsref properties
                var props = CompletionResult.tsRef.getPropertiesFromTypeId(CompletionResult.tsTreeNode.getValue());
-               for (key in props) {
+               for (var key in props) {
                        // show just the TSREF properties - no properties of the array-prototype and no properties which have been defined by the user
                        if (typeof props[key].value !== 'undefined' && defined[key] !== true) {
                                var propObj = {};
index 6f29250..1420fe8 100644 (file)
@@ -30,7 +30,9 @@ define('TYPO3/CMS/T3editor/Plugins/CodeCompletion/DescriptionPlugin', [
                DescriptionPlugin.codeCompleteBox = pluginContext.codeCompleteBox;
                DescriptionPlugin.codemirror = pluginContext.codemirror;
 
-               DescriptionPlugin.codeCompleteBox.parent().append(DescriptionPlugin.$descriptionBox);
+               if (DescriptionPlugin.codeCompleteBox.has(DescriptionPlugin.$descriptionBox).length === 0) {
+                       DescriptionPlugin.codeCompleteBox.append(DescriptionPlugin.$descriptionBox);
+               }
        };
 
        DescriptionPlugin.afterMouseOver = function(currWordObj, compResult) {
@@ -101,10 +103,9 @@ define('TYPO3/CMS/T3editor/Plugins/CodeCompletion/DescriptionPlugin', [
                DescriptionPlugin.$descriptionBox.addClass('descriptionBox');
 
                var addX = 18,
-                       leftOffset = parseInt(DescriptionPlugin.codeCompleteBox.css('left')) + parseInt(DescriptionPlugin.codeCompleteBox.width()) + addX;
+                       leftOffset = parseInt(DescriptionPlugin.codeCompleteBox.width()) + addX;
 
                DescriptionPlugin.$descriptionBox.css({
-                       top: DescriptionPlugin.codeCompleteBox.css('top'),
                        left: leftOffset + 'px'
                });
 
index efb9e07..d663cdc 100644 (file)
@@ -46,7 +46,9 @@ define('TYPO3/CMS/T3editor/Plugins/CodeCompletion/TsCodeCompletion', [
                plugins: [
                        'TYPO3/CMS/T3editor/Plugins/CodeCompletion/DescriptionPlugin'
                ],
-               $codeCompleteBox: $('<div />', {class: 't3e_codeCompleteBox'}).hide()
+               $codeCompleteBox: $('<div />', {class: 't3e_codeCompleteWrap'}).append(
+                       $('<div />', {class: 't3e_codeCompleteBox'})
+               )
        };
 
        /**
@@ -260,12 +262,13 @@ define('TYPO3/CMS/T3editor/Plugins/CodeCompletion/TsCodeCompletion', [
         * Eventhandler function executed after keystroke release
         * triggers CC on pressed dot and typing on
         *
-        * @param event fired prototype event object
+        * @param e fired prototype event object
         * @type void
         */
        TsCodeCompletion.keyUp = function(e) {
                // 190 = .
                if (e.which === 190) {
+                       TsCodeCompletion.initCodeCompletion();
                        TsCodeCompletion.refreshCodeCompletion();
                } else if (TsCodeCompletion.cc === 1) {
                        // 38 = KEYUP, 40 = KEYDOWN
@@ -362,12 +365,22 @@ define('TYPO3/CMS/T3editor/Plugins/CodeCompletion/TsCodeCompletion', [
                } else { // if autocompletion is deactivated and ctrl+space is pressed
                        if (e.which === 32 && (e.ctrlKey || e.metaKey)) {
                                e.preventDefault();
+                               TsCodeCompletion.initCodeCompletion();
                                TsCodeCompletion.refreshCodeCompletion();
                        }
                }
        };
 
        /**
+        * Initializes the code completion
+        */
+       TsCodeCompletion.initCodeCompletion = function() {
+               if (TsCodeCompletion.outerDiv.has(TsCodeCompletion.$codeCompleteBox).length === 0) {
+                       TsCodeCompletion.outerDiv.append(TsCodeCompletion.$codeCompleteBox);
+               }
+       };
+
+       /**
         * Refreshes the code completion list based on the cursor's position
         */
        TsCodeCompletion.refreshCodeCompletion = function() {
@@ -417,17 +430,17 @@ define('TYPO3/CMS/T3editor/Plugins/CodeCompletion/TsCodeCompletion', [
                        }
 
                        // put HTML and show box
-                       TsCodeCompletion.$codeCompleteBox.html($ul);
-                       TsCodeCompletion.$codeCompleteBox.show();
-                       TsCodeCompletion.$codeCompleteBox.scrollTop(0);
+                       var $codeCompleteBox = TsCodeCompletion.$codeCompleteBox.find('.t3e_codeCompleteBox');
+                       $codeCompleteBox.html($ul);
+                       $codeCompleteBox.scrollTop(0);
 
                        // init styles
-                       TsCodeCompletion.$codeCompleteBox.css({
+                       $codeCompleteBox.css({
                                overflow: 'scroll',
                                height: ((TsCodeCompletion.options.ccWords + 1) * $('#cc_word_0').height()) + 'px'
                        });
 
-                       var wrapOffset = $('.t3e_iframe_wrap', document).offset(),
+                       var wrapOffset = TsCodeCompletion.codemirror.options.originalTextarea.parent().find('.t3e_iframe_wrap').offset(),
                                $cursorNode = $(TsCodeCompletion.latestCursorNode),
                                nodeOffset = $cursorNode.offset();
 
@@ -461,7 +474,7 @@ define('TYPO3/CMS/T3editor/Plugins/CodeCompletion/TsCodeCompletion', [
         */
        TsCodeCompletion.endAutoCompletion = function() {
                TsCodeCompletion.cc = 0;
-               TsCodeCompletion.$codeCompleteBox.hide();
+               TsCodeCompletion.$codeCompleteBox.remove();
                // force full refresh
                TsCodeCompletion.compResult = null;
                for (var i = 0; i < TsCodeCompletion.plugins.length; i++) {
@@ -494,7 +507,7 @@ define('TYPO3/CMS/T3editor/Plugins/CodeCompletion/TsCodeCompletion', [
                                TsCodeCompletion.cc_down = TsCodeCompletion.proposals.length - 1;
                                TsCodeCompletion.cc_up = TsCodeCompletion.cc_down - (TsCodeCompletion.options.ccWords - 1);
                        }
-                       TsCodeCompletion.$codeCompleteBox.scrollTop(TsCodeCompletion.cc_up * 18);
+                       TsCodeCompletion.$codeCompleteBox.find('.t3e_codeCompleteBox').scrollTop(TsCodeCompletion.cc_up * 18);
                }
        };
 
@@ -520,7 +533,7 @@ define('TYPO3/CMS/T3editor/Plugins/CodeCompletion/TsCodeCompletion', [
                                TsCodeCompletion.cc_up = 0;
                                TsCodeCompletion.cc_down = TsCodeCompletion.options.ccWords - 1;
                        }
-                       TsCodeCompletion.$codeCompleteBox.scrollTop(TsCodeCompletion.cc_up * 18);
+                       TsCodeCompletion.$codeCompleteBox.find('.t3e_codeCompleteBox').scrollTop(TsCodeCompletion.cc_up * 18);
                }
        };
 
@@ -570,17 +583,25 @@ define('TYPO3/CMS/T3editor/Plugins/CodeCompletion/TsCodeCompletion', [
        };
 
        $(document).on('t3editor:init', function(e, codemirror, $outerDiv) {
-               $outerDiv.append(TsCodeCompletion.$codeCompleteBox);
-               TsCodeCompletion.outerDiv = $outerDiv;
                TsCodeCompletion.codemirror = codemirror;
+               TsCodeCompletion.outerDiv = $outerDiv;
 
                TsCodeCompletion.parser = TsParser.init(TsCodeCompletion.tsRef, TsCodeCompletion.extTsObjTree);
                TsCodeCompletion.tsRef.loadTsrefAsync();
 
-               $(TsCodeCompletion.codemirror.win).on('click', TsCodeCompletion.click);
-               $(TsCodeCompletion.codemirror.win).on('mousemove', TsCodeCompletion.saveMousePos);
-               $(TsCodeCompletion.codemirror.win).on('keydown', TsCodeCompletion.keyDown);
-               $(TsCodeCompletion.codemirror.win).on('keyup', TsCodeCompletion.keyUp);
+               $(codemirror.win)
+                       .on('click', TsCodeCompletion.click)
+                       .on('mousemove', TsCodeCompletion.saveMousePos)
+                       .on('keydown', function(e) {
+                               TsCodeCompletion.codemirror = codemirror;
+                               TsCodeCompletion.outerDiv = $outerDiv;
+                               TsCodeCompletion.keyDown(e);
+                       })
+                       .on('keyup', function(e) {
+                               TsCodeCompletion.codemirror = codemirror;
+                               TsCodeCompletion.outerDiv = $outerDiv;
+                               TsCodeCompletion.keyUp(e);
+                       });
 
                TsCodeCompletion.loadExtTemplatesAsync();
                TsCodeCompletion.loadPluginArray();