Fix bug where menus were not positioning correctly with fixed position elements

dist/mentio.js

@@ -687,14 +687,16 @@ angular.module('mentio')
 
         // public
         function popUnderMention (ctx, triggerCharSet, selectionEl, requireLeadingSpace) {
-            var coordinates;
+            var coordinates, fixedPosition;
             var mentionInfo = getTriggerInfo(ctx, triggerCharSet, requireLeadingSpace, false);
 
             if (mentionInfo !== undefined) {
 
                 if (selectedElementIsTextAreaOrInput(ctx)) {
-                    coordinates = getTextAreaOrInputUnderlinePosition(ctx, getDocument(ctx).activeElement,
+                    var activeElement = getDocument(ctx).activeElement;
+                    coordinates = getTextAreaOrInputUnderlinePosition(ctx, activeElement,
                         mentionInfo.mentionPosition);
+                    fixedPosition = hasFixedAncestor(activeElement);
                 } else {
                     coordinates = getContentEditableCaretPosition(ctx, mentionInfo.mentionPosition);
                 }
@@ -703,7 +705,7 @@ angular.module('mentio')
                 selectionEl.css({
                     top: coordinates.top + 'px',
                     left: coordinates.left + 'px',
-                    position: 'absolute',
+                    position: fixedPosition ? 'fixed' : 'absolute',
                     zIndex: 10000,
                     display: 'block'
                 });
@@ -1107,39 +1109,16 @@ angular.module('mentio')
                 top: markerEl.offsetHeight
             };
 
-            localToGlobalCoordinates(ctx, markerEl, coordinates);
+            localToGlobalCoordinates(markerEl, coordinates);
 
             markerEl.parentNode.removeChild(markerEl);
             return coordinates;
         }
 
-        function localToGlobalCoordinates(ctx, element, coordinates) {
-            var obj = element;
-            var iframe = ctx ? ctx.iframe : null;
-            while(obj) {
-                coordinates.left += obj.offsetLeft + obj.clientLeft;
-                coordinates.top += obj.offsetTop + obj.clientTop;
-                obj = obj.offsetParent;
-                if (!obj && iframe) {
-                    obj = iframe;
-                    iframe = null;
-                }
-            }            
-            obj = element;
-            iframe = ctx ? ctx.iframe : null;
-            while(obj !== getDocument().body) {
-                if (obj.scrollTop && obj.scrollTop > 0) {
-                    coordinates.top -= obj.scrollTop;
-                }
-                if (obj.scrollLeft && obj.scrollLeft > 0) {
-                    coordinates.left -= obj.scrollLeft;
-                }
-                obj = obj.parentNode;
-                if (!obj && iframe) {
-                    obj = iframe;
-                    iframe = null;
-                }
-            }            
+        function localToGlobalCoordinates(element, coordinates) {
+            var elementRect = getOffset(element);
+            coordinates.top +=  elementRect.top;
+            coordinates.left += elementRect.left;
          }
 
         function getTextAreaOrInputUnderlinePosition (ctx, element, position) {
@@ -1181,7 +1160,7 @@ angular.module('mentio')
             getDocument(ctx).body.appendChild(div);
 
             var style = div.style;
-            var computed = window.getComputedStyle ? getComputedStyle(element) : element.currentStyle;
+            var computed = computedStyle(element);
 
             style.whiteSpace = 'pre-wrap';
             if (element.nodeName !== 'INPUT') {
@@ -1220,13 +1199,54 @@ angular.module('mentio')
                 left: span.offsetLeft + parseInt(computed.borderLeftWidth)
             };
 
-            localToGlobalCoordinates(ctx, element, coordinates);
+            localToGlobalCoordinates(element, coordinates);
 
             getDocument(ctx).body.removeChild(div);
 
             return coordinates;
         }
 
+        function hasFixedAncestor(element) {
+            var nextParent = element.offsetParent;
+            while(nextParent) {
+                var computed = computedStyle(nextParent);
+                if(computed.position === 'fixed') {
+                    return true;
+                }
+                nextParent = nextParent.offsetParent;
+            }
+            return false;
+        }
+
+        function computedStyle(element) {
+            return window.getComputedStyle ? getComputedStyle(element) : element.currentStyle;
+        }
+
+        function getOffset(element) {
+            var docElem, win,
+                box = { top: 0, left: 0 },
+                doc = element && element.ownerDocument;
+
+            if (!doc) {
+                return;
+            }
+
+            docElem = doc.documentElement;
+
+            box = element.getBoundingClientRect();
+            var offset = {
+                top: box.top,
+                left: box.left
+            };
+
+            if(!hasFixedAncestor(element)) {
+                offset.top += (window.pageYOffset - docElem.clientTop);
+                offset.left += (window.pageXOffset - docElem.clientLeft);
+            }
+
+            return offset;
+        }
+
         return {
             // public
             popUnderMention: popUnderMention,

ment.io/index.html

@@ -7,10 +7,8 @@
     <link rel="stylesheet" href="styles.css" />
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.min.js"></script>
-    <script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
     <script src="/dist/mentio.js"></script>
     <script src="scripts.js"></script>
-    <script src="tinymce.js"></script>
     </head>
 <body ng-controller="mentio-demo-ctrl">
 <div>
@@ -122,7 +120,6 @@ <h3>Text Input:</h3>
                                 mentio-search="searchPeople(term)"
                                 mentio-select="getPeopleTextRaw(item)"></mentio-menu>
 
-
                     <div class="form-group">
                         <h3>Minimal:</h3>
                         <!--Note no need for external mentio-menu elements because there is only one trigger character needed-->
@@ -132,14 +129,31 @@ <h3>Minimal:</h3>
                     </div>
 
                     <div class="form-group">
-                        <h3>TinyMCE (iframe-based):</h3>
-                        <textarea ui-tinymce="tinyMceOptions" mentio mentio-typed-text="typedTerm" 
-                            mentio-items="simplePeople | filter:label:typedTerm" ng-model='foo'
-                            mentio-iframe-element="iframeElement"></textarea>
+                         <input type="submit">
                     </div>
 
                     <div class="form-group">
-                         <input type="submit">
+                        <h3>Fixed:</h3>
+                        <span class="btn btn-primary" ng-click="toggleFixed()">Toggle Fixed</span>
+                        <div ng-show="showFixed" class="fixed">
+                            <p>Type the @ symbol in this fixed element</p>
+                            <input
+                                mentio
+                                ng-model="fixedText"
+                                mentio-id="'fixedText' + myIndexValue"
+                                type="text"
+                                class="form-control"
+                                ng-trim="false"
+                                size="100"/>
+
+                            <mentio-menu
+                                mentio-for="'fixedText' + myIndexValue"
+                                mentio-trigger-char="'@'"
+                                mentio-items="people"
+                                mentio-template-url="/people-mentions.tpl"
+                                mentio-search="searchPeople(term)"
+                                mentio-select="getPeopleTextRaw(item)"></mentio-menu>
+                        </div>
                     </div>
                 </div>
             </div>

ment.io/scripts.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('mentio-demo', ['mentio', 'ngRoute', 'ui.tinymce'])
+angular.module('mentio-demo', ['mentio', 'ngRoute'])
 
     .config(function($routeProvider) {
         $routeProvider
@@ -32,12 +32,7 @@ angular.module('mentio-demo', ['mentio', 'ngRoute', 'ui.tinymce'])
 
     .controller('mentio-demo-ctrl', function ($scope, $rootScope, $http, $q, $sce, $timeout, mentioUtil) {
 
-        $scope.tinyMceOptions = {
-            init_instance_callback: function(editor) {
-                $scope.iframeElement = editor.iframeElement;
-            }
-        };
-
+        $scope.showFixed = false;
         $scope.macros = {
             'brb': 'Be right back',
             'omw': 'On my way',
@@ -127,6 +122,10 @@ angular.module('mentio-demo', ['mentio', 'ngRoute', 'ui.tinymce'])
             }, 0);
         };
 
+        $scope.toggleFixed = function() {
+            $scope.showFixed = !$scope.showFixed;
+        }
+
         $rootScope.$on('$routeChangeSuccess', function (event, current) {
             $scope.resetDemo();
         });

ment.io/styles.css

@@ -91,3 +91,14 @@
     overflow-y: auto;
 }
 
+.fixed {
+    border: solid 1px #e8e8e8;
+    padding: 10px;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+}
+
+.relative {
+    position: relative;
+}

package.json

@@ -1,15 +1,16 @@
 {
   "name": "ment.io",
-  "version": "0.9.24",
+  "version": "0.9.27",
   "description": "Mentions for Angular",
   "main": "dist/mentio.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "coveralls": "gulp coveralls"
+    "coveralls": "gulp coveralls",
+    "gulp": "gulp"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/jeff-collins/ment.io.git"
+    "url": "https://github.com/sconno05/ment.io.git"
   },
   "keywords": [
     "angular",
@@ -19,9 +20,8 @@
   "author": "",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/jeff-collins/ment.io/issues"
+    "url": "https://github.com/sconno05/ment.io/issues"
   },
-  "homepage": "https://github.com/jeff-collins/ment.io",
   "devDependencies": {
     "connect-livereload": "^0.4.0",
     "express": "^4.1.2",