angular-bootstrap-confirm - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

bower.json

 {
   "name": "angular-bootstrap-confirm",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "homepage": "https://github.com/mattlewis92/angular-bootstrap-confirm",
@@ -5,0 +5,0 @@ "authors": [

CHANGELOG.md

@@ -0,1 +1,4 @@
+# 0.4.0 (2015-09-28)
+* Auto focus the confirm button when opening the popover. Thanks to @andreptb! 
+
 # 0.3.1 (2015-08-29)
@@ -2,0 +5,0 @@ * Make `is-open` optional for angular 1.3 compatibility

dist/angular-bootstrap-confirm.js

 /**
  * angular-bootstrap-confirm - Displays a bootstrap confirmation popover when clicking the given element.
- * @version v0.3.1
+ * @version v0.4.0
  * @link https://github.com/mattlewis92/angular-bootstrap-confirm
@@ -95,3 +95,3 @@ * @license MIT
 	              '<button class="btn btn-block" ng-class="\'btn-\' + (vm.cancelButtonType || vm.defaults.cancelButtonType)" ' +
-	              'ng-click="vm.onCancel(); vm.hidePopover()" ng-bind-html="vm.cancelText || vm.defaults.cancelText"></button>',
+	              'ng-click="vm.onCancel(); vm.hidePopover(true)" ng-bind-html="vm.cancelText || vm.defaults.cancelText"></button>',
 	            '</div>',
@@ -117,2 +117,8 @@ '</div>',
 
+	    function applyFocus(target) {
+	      if (vm.handleFocus || vm.defaults.handleFocus) {
+	        target[0].focus();
+	      }
+	    }
+
 	    function showPopover() {
@@ -122,2 +128,3 @@ if (!vm.isVisible) {
 	        positionPopover();
+	        applyFocus(popover.find('button'));
 	        vm.isVisible = true;
@@ -128,6 +135,9 @@ }
 
-	    function hidePopover() {
+	    function hidePopover(focusElement) {
 	      if (vm.isVisible) {
 	        popover.css({display: 'none'});
 	        vm.isVisible = false;
+	        if (focusElement) {
+	          applyFocus($element);
+	        }
 	      }
@@ -200,3 +210,4 @@ vm.isOpen = false;
 	        cancelButtonType: '@',
-	        isOpen: '=?'
+	        isOpen: '=?',
+	        handleFocus: '='
 	      }
@@ -211,3 +222,4 @@ };
 	    cancelButtonType: 'default',
-	    placement: 'top'
+	    placement: 'top',
+	    handleFocus: true
 	  })
@@ -214,0 +226,0 @@

dist/angular-bootstrap-confirm.min.js

 /**
  * angular-bootstrap-confirm - Displays a bootstrap confirmation popover when clicking the given element.
- * @version v0.3.1
+ * @version v0.4.0
  * @link https://github.com/mattlewis92/angular-bootstrap-confirm
  * @license MIT
  */
-!function(e,n){if("object"==typeof exports&&"object"==typeof module)module.exports=n(require("angular"),require("angular-bootstrap"),require("angular-sanitize"));else if("function"==typeof define&&define.amd)define(["angular","angular-bootstrap","angular-sanitize"],n);else{var t="object"==typeof exports?n(require("angular"),require("angular-bootstrap"),require("angular-sanitize")):n(e.angular,e["angular-bootstrap"],e["angular-sanitize"]);for(var o in t)("object"==typeof exports?exports:e)[o]=t[o]}}(this,function(e,n,t){return function(e){function n(o){if(t[o])return t[o].exports;var i=t[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,n),i.loaded=!0,i.exports}var t={};return n.m=e,n.c=t,n.p="",n(0)}([function(e,n,t){"use strict";var o=t(1);t(3),t(2),e.exports=o.module("mwl.confirm",["ngSanitize","ui.bootstrap.position"]).controller("PopoverConfirmCtrl",["$scope","$element","$compile","$document","$window","$timeout","$position","confirmationPopoverDefaults",function(e,n,t,i,r,s,c,l){function a(){var e=c.positionElements(n,b,f.popoverPlacement,!0);e.top+="px",e.left+="px",b.css(e)}function p(){f.isVisible||(b.css({display:"block"}),a(),f.isVisible=!0),f.isOpen=!0}function u(){f.isVisible&&(b.css({display:"none"}),f.isVisible=!1),f.isOpen=!1}function m(){f.isVisible?u():p(),e.$apply()}function d(t){!f.isVisible||b[0].contains(t.target)||n[0].contains(t.target)||(u(),e.$apply())}var f=this;f.defaults=l,f.popoverPlacement=f.placement||f.defaults.placement;var v=['<div class="popover" ng-class="vm.popoverPlacement">','<div class="arrow"></div>','<h3 class="popover-title" ng-bind-html="vm.title"></h3>','<div class="popover-content">','<p ng-bind-html="vm.message"></p>','<div class="row">','<div class="col-xs-6">','<button class="btn btn-block" ng-class="\'btn-\' + (vm.confirmButtonType || vm.defaults.confirmButtonType)" ng-click="vm.onConfirm(); vm.hidePopover()" ng-bind-html="vm.confirmText || vm.defaults.confirmText"></button>',"</div>",'<div class="col-xs-6">','<button class="btn btn-block" ng-class="\'btn-\' + (vm.cancelButtonType || vm.defaults.cancelButtonType)" ng-click="vm.onCancel(); vm.hidePopover()" ng-bind-html="vm.cancelText || vm.defaults.cancelText"></button>',"</div>","</div>","</div>","</div>"].join("\n"),b=o.element(v);b.css("display","none"),t(b)(e),i.find("body").append(b),f.isVisible=!1,f.showPopover=p,f.hidePopover=u,f.togglePopover=m,e.$watch("vm.isOpen",function(e){s(function(){e?p():u()})}),n.bind("click",m),r.addEventListener("resize",a),i.bind("click",d),i.bind("touchend",d),e.$on("$destroy",function(){b.remove(),n.unbind("click",m),r.removeEventListener("resize",a),i.unbind("click",d),i.unbind("touchend",d)})}]).directive("mwlConfirm",function(){return{restrict:"EA",controller:"PopoverConfirmCtrl as vm",bindToController:!0,scope:{confirmText:"@",cancelText:"@",message:"@",title:"@",placement:"@",onConfirm:"&",onCancel:"&",confirmButtonType:"@",cancelButtonType:"@",isOpen:"=?"}}}).value("confirmationPopoverDefaults",{confirmText:"Confirm",cancelText:"Cancel",confirmButtonType:"success",cancelButtonType:"default",placement:"top"}).name},function(n,t){n.exports=e},function(e,t){e.exports=n},function(e,n){e.exports=t}])});
+!function(e,n){if("object"==typeof exports&&"object"==typeof module)module.exports=n(require("angular"),require("angular-bootstrap"),require("angular-sanitize"));else if("function"==typeof define&&define.amd)define(["angular","angular-bootstrap","angular-sanitize"],n);else{var t="object"==typeof exports?n(require("angular"),require("angular-bootstrap"),require("angular-sanitize")):n(e.angular,e["angular-bootstrap"],e["angular-sanitize"]);for(var o in t)("object"==typeof exports?exports:e)[o]=t[o]}}(this,function(e,n,t){return function(e){function n(o){if(t[o])return t[o].exports;var i=t[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,n),i.loaded=!0,i.exports}var t={};return n.m=e,n.c=t,n.p="",n(0)}([function(e,n,t){"use strict";var o=t(1);t(3),t(2),e.exports=o.module("mwl.confirm",["ngSanitize","ui.bootstrap.position"]).controller("PopoverConfirmCtrl",["$scope","$element","$compile","$document","$window","$timeout","$position","confirmationPopoverDefaults",function(e,n,t,i,s,r,c,l){function a(){var e=c.positionElements(n,g,v.popoverPlacement,!0);e.top+="px",e.left+="px",g.css(e)}function u(e){(v.handleFocus||v.defaults.handleFocus)&&e[0].focus()}function p(){v.isVisible||(g.css({display:"block"}),a(),u(g.find("button")),v.isVisible=!0),v.isOpen=!0}function d(e){v.isVisible&&(g.css({display:"none"}),v.isVisible=!1,e&&u(n)),v.isOpen=!1}function f(){v.isVisible?d():p(),e.$apply()}function m(t){!v.isVisible||g[0].contains(t.target)||n[0].contains(t.target)||(d(),e.$apply())}var v=this;v.defaults=l,v.popoverPlacement=v.placement||v.defaults.placement;var b=['<div class="popover" ng-class="vm.popoverPlacement">','<div class="arrow"></div>','<h3 class="popover-title" ng-bind-html="vm.title"></h3>','<div class="popover-content">','<p ng-bind-html="vm.message"></p>','<div class="row">','<div class="col-xs-6">','<button class="btn btn-block" ng-class="\'btn-\' + (vm.confirmButtonType || vm.defaults.confirmButtonType)" ng-click="vm.onConfirm(); vm.hidePopover()" ng-bind-html="vm.confirmText || vm.defaults.confirmText"></button>',"</div>",'<div class="col-xs-6">','<button class="btn btn-block" ng-class="\'btn-\' + (vm.cancelButtonType || vm.defaults.cancelButtonType)" ng-click="vm.onCancel(); vm.hidePopover(true)" ng-bind-html="vm.cancelText || vm.defaults.cancelText"></button>',"</div>","</div>","</div>","</div>"].join("\n"),g=o.element(b);g.css("display","none"),t(g)(e),i.find("body").append(g),v.isVisible=!1,v.showPopover=p,v.hidePopover=d,v.togglePopover=f,e.$watch("vm.isOpen",function(e){r(function(){e?p():d()})}),n.bind("click",f),s.addEventListener("resize",a),i.bind("click",m),i.bind("touchend",m),e.$on("$destroy",function(){g.remove(),n.unbind("click",f),s.removeEventListener("resize",a),i.unbind("click",m),i.unbind("touchend",m)})}]).directive("mwlConfirm",function(){return{restrict:"EA",controller:"PopoverConfirmCtrl as vm",bindToController:!0,scope:{confirmText:"@",cancelText:"@",message:"@",title:"@",placement:"@",onConfirm:"&",onCancel:"&",confirmButtonType:"@",cancelButtonType:"@",isOpen:"=?",handleFocus:"="}}}).value("confirmationPopoverDefaults",{confirmText:"Confirm",cancelText:"Cancel",confirmButtonType:"success",cancelButtonType:"default",placement:"top",handleFocus:!0}).name},function(n,t){n.exports=e},function(e,t){e.exports=n},function(e,n){e.exports=t}])});
 //# sourceMappingURL=angular-bootstrap-confirm.min.js.map

package.json

 {
   "name": "angular-bootstrap-confirm",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Displays a bootstrap confirmation popover when clicking the given element.",
@@ -35,6 +35,6 @@ "browser": "src/angular-bootstrap-confirm.js",
     "ejs": "~2.3.3",
-    "eslint": "~1.3.1",
+    "eslint": "~1.5.1",
     "eslint-config-mwl": "~0.3.0",
     "eslint-loader": "~1.0.0",
-    "eslint-plugin-angular": "~0.9.0",
+    "eslint-plugin-angular": "~0.12.0",
     "istanbul-instrumenter-loader": "~0.1.3",
@@ -51,4 +51,4 @@ "jquery": "~2.1.4",
     "karma-webpack": "~1.7.0",
-    "mocha": "~2.2.4",
-    "ng-annotate-loader": "0.0.6",
+    "mocha": "~2.3.3",
+    "ng-annotate-loader": "0.0.10",
     "node-libs-browser": "~0.5.2",
@@ -59,3 +59,3 @@ "open": "0.0.5",
     "webpack": "~1.12.0",
-    "webpack-dev-server": "~1.10.1"
+    "webpack-dev-server": "~1.12.0"
   },
@@ -62,0 +62,0 @@ "peerDependencies": {

README.md

@@ -117,2 +117,5 @@ # Angular bootstrap confirm
 
+#### handle-focus
+Whether to auto focus the confirm button. Default true.
+
 ### confirmationPopoverDefaults
@@ -119,0 +122,0 @@ There is also a value you can use to set the defaults like so:

src/angular-bootstrap-confirm.js

@@ -32,3 +32,3 @@ 'use strict';
               '<button class="btn btn-block" ng-class="\'btn-\' + (vm.cancelButtonType || vm.defaults.cancelButtonType)" ' +
-              'ng-click="vm.onCancel(); vm.hidePopover()" ng-bind-html="vm.cancelText || vm.defaults.cancelText"></button>',
+              'ng-click="vm.onCancel(); vm.hidePopover(true)" ng-bind-html="vm.cancelText || vm.defaults.cancelText"></button>',
             '</div>',
@@ -54,2 +54,8 @@ '</div>',
 
+    function applyFocus(target) {
+      if (vm.handleFocus || vm.defaults.handleFocus) {
+        target[0].focus();
+      }
+    }
+
     function showPopover() {
@@ -59,2 +65,3 @@ if (!vm.isVisible) {
         positionPopover();
+        applyFocus(popover.find('button'));
         vm.isVisible = true;
@@ -65,6 +72,9 @@ }
 
-    function hidePopover() {
+    function hidePopover(focusElement) {
       if (vm.isVisible) {
         popover.css({display: 'none'});
         vm.isVisible = false;
+        if (focusElement) {
+          applyFocus($element);
+        }
       }
@@ -137,3 +147,4 @@ vm.isOpen = false;
         cancelButtonType: '@',
-        isOpen: '=?'
+        isOpen: '=?',
+        handleFocus: '='
       }
@@ -148,5 +159,6 @@ };
     cancelButtonType: 'default',
-    placement: 'top'
+    placement: 'top',
+    handleFocus: true
   })
 
   .name;

test/angular-bootstrap-confirm.spec.js

 'use strict';
 
+/* eslint-disable angular/angularelement */
+
 require('./../src/angular-bootstrap-confirm.js');
@@ -37,8 +39,10 @@ var $ = require('jquery');
 
-    var scope, element, popover;
+    var scope, element, popover, $document;
 
-    beforeEach(inject(function($controller, $rootScope) {
-
+    beforeEach(inject(function($controller, $rootScope, _$document_) {
+      $document = _$document_;
+      var body = $('body');
       scope = $rootScope.$new();
       element = angular.element('<button>Test</button>');
+      body.append(element);
       $controller('PopoverConfirmCtrl as vm', {
@@ -48,3 +52,3 @@ $scope: scope,
       });
-      popover = $('body').find('.popover:first');
+      popover = body.find('.popover:first');
 
@@ -130,2 +134,23 @@ }));
 
+    describe('handle focus', function() {
+      /*
+      * Unfortunately phantomjs won't work with target.is(':focus'). See https://github.com/ariya/phantomjs/issues/10427
+      */
+      function expectToHaveFocus(target) {
+        expect(target[0]).to.equal($document[0].activeElement);
+      }
+
+      it('should focus popover confirm button when the element is clicked', function() {
+        $(element).click();
+        expectToHaveFocus(getConfirmButton(popover));
+      });
+
+      it('should focus element when the cancel button is clicked', function() {
+        $(element).click();
+        getCancelButton(popover).click();
+        expectToHaveFocus(element);
+      });
+
+    });
+
     describe('$destroy', function() {
@@ -132,0 +157,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

71824

increased by3.85%

Lines of code

942

increased by4.78%

Number of lines in readme file

169

increased by1.81%

No dependency changes