chore(tooltip): improve keyboard support for focused elements

mgcrea · Jan 10, 2014 · 95abe16 · 95abe16
1 parent fecc2f5
commit 95abe16
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/tooltip/docs/tooltip.demo.html b/src/tooltip/docs/tooltip.demo.html
@@ -1,7 +1,7 @@
 <div class="bs-docs-section" ng-controller="TooltipDemoCtrl">
 
   <div class="page-header">
-    <h1 id="tooltips">Tooltips <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/directives/tooltip.js" target="_blank">tooltip.js</a>
+    <h1 id="tooltips">Tooltips <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/tooltip/tooltip.js" target="_blank">tooltip.js</a>
     </h1>
     <code>mgcrea.ngStrap.tooltip</code>
   </div>

diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
@@ -49,7 +49,7 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.jqlite.dimensions'])
         // Common vars
         var options = angular.extend({}, defaults, config);
         $tooltip.$promise = $q.when($templateCache.get(options.template) || $http.get(options.template/*, {cache: true}*/));
-        var scope = options.scope.$new() || $rootScope.$new();
+        var scope = $tooltip.$scope = options.scope.$new() || $rootScope.$new();
         if(options.delay && angular.isString(options.delay)) {
           options.delay = parseFloat(options.delay);
         }
@@ -71,8 +71,10 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.jqlite.dimensions'])
           });
         };
 
-        // Initial private vars
-        var timeout, hoverState, isShown;
+        $tooltip.$isShown = false;
+
+        // Private vars
+        var timeout, hoverState;
 
         // Fetch, compile then initialize tooltip
         var tipLinker, tipElement, tipTemplate;
@@ -166,14 +168,18 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.jqlite.dimensions'])
           if(options.type) tipElement.addClass(options.prefixClass + '-' + options.type);
 
           $animate.enter(tipElement, parent, after, function() {});
-          isShown = true;
+          $tooltip.$isShown = true;
           scope.$digest();
           requestAnimationFrame($tooltip.$applyPlacement);
 
           // Bind events
           if(options.keyboard) {
-            $tooltip.focus();
-            tipElement.on('keyup', $tooltip.$onKeyUp);
+            if(options.trigger !== 'focus') {
+              $tooltip.focus();
+              tipElement.on('keyup', $tooltip.$onKeyUp);
+            } else {
+              element.on('keyup', $tooltip.$onFocusKeyUp);
+            }
           }
 
         };
@@ -197,7 +203,7 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.jqlite.dimensions'])
 
           $animate.leave(tipElement, function() {});
           scope.$digest();
-          isShown = false;
+          $tooltip.$isShown = false;
 
           // Unbind events
           if(options.keyboard) {
@@ -207,7 +213,7 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.jqlite.dimensions'])
         };
 
         $tooltip.toggle = function() {
-          isShown ? $tooltip.leave() : $tooltip.enter();
+          $tooltip.$isShown ? $tooltip.leave() : $tooltip.enter();
         };
 
         $tooltip.focus = function() {
@@ -240,6 +246,10 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.jqlite.dimensions'])
           evt.which === 27 && $tooltip.hide();
         };
 
+        $tooltip.$onFocusKeyUp = function(evt) {
+          evt.which === 27 && element[0].blur();
+        };
+
         // Private methods
 
         function getPosition() {