From d6e568570fb792ab4eab218967b8ac6fd77a819e Mon Sep 17 00:00:00 2001
From: troch <thomas.roch@impact-sys.co.uk>
Date: Mon, 9 Dec 2013 19:17:37 +0000
Subject: [PATCH] feat(typeahead): anchor popup left or right of input

---
 src/typeahead/typeahead.js              | 28 ++++++++++++++++++++++++-
 template/typeahead/typeahead-popup.html |  2 +-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js
index b1eecff95f..e0bfe73571 100644
--- a/src/typeahead/typeahead.js
+++ b/src/typeahead/typeahead.js
@@ -57,6 +57,9 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
 
       var inputFormatter = attrs.typeaheadInputFormatter ? $parse(attrs.typeaheadInputFormatter) : undefined;
 
+      //anchoring typeahead to side of input (left, right or auto)
+      var anchor = attrs.typeaheadAnchor ? attrs.typeaheadAnchor : 'left';
+
       //INTERNAL VARIABLES
 
       //model setter executed upon match selection
@@ -74,7 +77,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
         active: 'activeIdx',
         select: 'select(activeIdx)',
         query: 'query',
-        position: 'position'
+        position: 'position',
+        anchor: anchor
       });
       //custom item template
       if (angular.isDefined(attrs.typeaheadTemplateUrl)) {
@@ -289,6 +293,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
         query:'=',
         active:'=',
         position:'=',
+        anchor:'@',
         select:'&'
       },
       replace:true,
@@ -312,6 +317,27 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
         scope.selectMatch = function (activeIdx) {
           scope.select({activeIdx:activeIdx});
         };
+
+        scope.displayStyle = function() {
+          var style = {display: scope.isOpen()&&'block' || 'none'};
+          if (!angular.isUndefined(scope.position)) {
+            style.top = scope.position.top+'px';
+            if (scope.anchor === 'right' || (scope.anchor === 'auto' && element.width() + scope.position.left > document.documentElement.clientWidth &&
+                element.width() < scope.position.left + scope.position.width)) {
+              //anchor on the right if typeahead-anchor is set to right, or if set to auto and it would
+              //overflow if anchored to left without overflowing when anchored to right
+              style.left = 'auto';
+              style.right = document.documentElement.clientWidth - scope.position.left - scope.position.width;
+            } else if (scope.anchor === 'left') {
+              //if typeahead-anchor is set to left
+              style.left = scope.position.left+'px';
+            } else {
+              //if typeahead-anchor is set to auto and it overflows whatever the side it is anchored to.
+              style.left = 0;
+            }
+          }
+          return style;
+        };
       }
     };
   })
diff --git a/template/typeahead/typeahead-popup.html b/template/typeahead/typeahead-popup.html
index 32ec197185..7e6bbe0c89 100644
--- a/template/typeahead/typeahead-popup.html
+++ b/template/typeahead/typeahead-popup.html
@@ -1,4 +1,4 @@
-<ul class="typeahead dropdown-menu" ng-style="{display: isOpen()&&'block' || 'none', top: position.top+'px', left: position.left+'px'}">
+<ul class="typeahead dropdown-menu" ng-style="displayStyle()">
     <li ng-repeat="match in matches" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
         <div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
     </li>