feat(dropdown): added contextmenu trigger for dropdown and tooltip

lightswitch05 · mgcrea · commit 56b9c412503b · 2016-01-21T12:22:46.000+01:00
diff --git a/src/dropdown/docs/dropdown.demo.html b/src/dropdown/docs/dropdown.demo.html
@@ -91,7 +91,7 @@ <h4>This module supports exotic placement options!</h4>
           <td>trigger</td>
           <td>string</td>
           <td>'click'</td>
-          <td>how dropdown is triggered - click | hover | focus | manual</td>
+          <td>how dropdown is triggered - click | hover | focus | contextmenu | manual</td>
         </tr>
         <tr>
           <td>html</td>
diff --git a/src/tooltip/docs/tooltip.demo.html b/src/tooltip/docs/tooltip.demo.html
@@ -93,7 +93,7 @@ <h4>This module supports exotic placement options!</h4>
           <td>trigger</td>
           <td>string</td>
           <td>'hover focus'</td>
-          <td>how tooltip is triggered - click | hover | focus | manual</td>
+          <td>how tooltip is triggered - click | hover | focus | contextmenu | manual</td>
         </tr>
         <tr>
           <td>title</td>
diff --git a/src/tooltip/test/tooltip.spec.js b/src/tooltip/test/tooltip.spec.js
@@ -156,6 +156,9 @@ describe('tooltip', function() {
     'options-trigger': {
       element: '<a data-trigger="click" bs-tooltip="tooltip">click me</a>'
     },
+    'options-trigger-contextmenu': {
+      element: '<a data-trigger="contextmenu" bs-tooltip="tooltip">right-click me</a>'
+    },
     'options-html': {
       scope: {tooltip: {title: 'title<br>next'}},
       element: '<a data-html="{{html}}" bs-tooltip="tooltip">hover me</a>'
@@ -809,7 +812,6 @@ describe('tooltip', function() {
     });
 
     describe('trigger', function() {
-
       it('should support an alternative trigger', function() {
         var elm = compileDirective('options-trigger');
         expect(sandboxEl.children('.tooltip').length).toBe(0);
@@ -819,6 +821,14 @@ describe('tooltip', function() {
         expect(sandboxEl.children('.tooltip').length).toBe(0);
       });
 
+      it('should support a contextmenu trigger', function() {
+        var elm = compileDirective('options-trigger-contextmenu');
+        expect(sandboxEl.children('.tooltip').length).toBe(0);
+        angular.element(elm[0]).triggerHandler('contextmenu');
+        expect(sandboxEl.children('.tooltip').length).toBe(1);
+        angular.element(elm[0]).triggerHandler('contextmenu');
+        expect(sandboxEl.children('.tooltip').length).toBe(0);
+      });
     });
 
     describe('html', function() {
diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
@@ -320,7 +320,8 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.core', 'mgcrea.ngStrap
           }
         }
 
-        $tooltip.toggle = function () {
+        $tooltip.toggle = function (evt) {
+          if (evt) { evt.preventDefault(); }
           if ($tooltip.$isShown) {
             $tooltip.leave();
           } else {
@@ -421,8 +422,8 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.core', 'mgcrea.ngStrap
         function bindTriggerEvents() {
           var triggers = options.trigger.split(' ');
           angular.forEach(triggers, function (trigger) {
-            if (trigger === 'click') {
-              element.on('click', $tooltip.toggle);
+            if (trigger === 'click' || trigger === 'contextmenu') {
+              element.on(trigger, $tooltip.toggle);
             } else if (trigger !== 'manual') {
               element.on(trigger === 'hover' ? 'mouseenter' : 'focus', $tooltip.enter);
               element.on(trigger === 'hover' ? 'mouseleave' : 'blur', $tooltip.leave);
@@ -437,8 +438,8 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.core', 'mgcrea.ngStrap
           var triggers = options.trigger.split(' ');
           for (var i = triggers.length; i--;) {
             var trigger = triggers[i];
-            if (trigger === 'click') {
-              element.off('click', $tooltip.toggle);
+            if (trigger === 'click' || trigger === 'contextmenu') {
+              element.off(trigger, $tooltip.toggle);
             } else if (trigger !== 'manual') {
               element.off(trigger === 'hover' ? 'mouseenter' : 'focus', $tooltip.enter);
               element.off(trigger === 'hover' ? 'mouseleave' : 'blur', $tooltip.leave);
