Skip to content
This repository was archived by the owner on Dec 1, 2023. It is now read-only.

Commit af01d2d

Browse files
Michael Gardnersumt-mgardner
Michael Gardner
authored and
sumt-mgardner
committed
fix(collapse): add key events for expand/collapse
Change-Id: Iaadb69157435bffc1a4853edad192d1dfe5e68d2
1 parent 044f446 commit af01d2d

File tree

1 file changed

+46
-39
lines changed

1 file changed

+46
-39
lines changed

‎src/collapse/collapse.js

Lines changed: 46 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
angular.module('mgcrea.ngStrap.collapse', [])
44

5-
.provider('$collapse', function () {
5+
.provider('$collapse', function() {
66

77
var defaults = this.defaults = {
88
animation: 'am-collapse',
@@ -12,19 +12,19 @@ angular.module('mgcrea.ngStrap.collapse', [])
1212
allowMultiple: false
1313
};
1414

15-
var controller = this.controller = function ($scope, $element, $attrs) {
15+
var controller = this.controller = function($scope, $element, $attrs) {
1616
var self = this;
1717

1818
// Attributes options
1919
self.$options = angular.copy(defaults);
2020
angular.forEach(['animation', 'disallowToggle', 'activeClass', 'startCollapsed', 'allowMultiple'], function (key) {
21-
if (angular.isDefined($attrs[key])) self.$options[key] = $attrs[key];
21+
if(angular.isDefined($attrs[key])) self.$options[key] = $attrs[key];
2222
});
2323

2424
// use string regex match boolean attr falsy values, leave truthy values be
2525
var falseValueRegExp = /^(false|0|)$/i;
26-
angular.forEach(['disallowToggle', 'startCollapsed', 'allowMultiple'], function (key) {
27-
if (angular.isDefined($attrs[key]) && falseValueRegExp.test($attrs[key])) {
26+
angular.forEach(['disallowToggle', 'startCollapsed', 'allowMultiple'], function(key) {
27+
if(angular.isDefined($attrs[key]) && falseValueRegExp.test($attrs[key])) {
2828
self.$options[key] = false;
2929
}
3030
});
@@ -34,19 +34,19 @@ angular.module('mgcrea.ngStrap.collapse', [])
3434

3535
self.$viewChangeListeners = [];
3636

37-
self.$registerToggle = function (element) {
37+
self.$registerToggle = function(element) {
3838
self.$toggles.push(element);
3939
};
40-
self.$registerTarget = function (element) {
40+
self.$registerTarget = function(element) {
4141
self.$targets.push(element);
4242
};
4343

44-
self.$unregisterToggle = function (element) {
44+
self.$unregisterToggle = function(element) {
4545
var index = self.$toggles.indexOf(element);
4646
// remove toggle from $toggles array
4747
self.$toggles.splice(index, 1);
4848
};
49-
self.$unregisterTarget = function (element) {
49+
self.$unregisterTarget = function(element) {
5050
var index = self.$targets.indexOf(element);
5151

5252
// remove element from $targets array
@@ -60,39 +60,39 @@ angular.module('mgcrea.ngStrap.collapse', [])
6060
// fix active item indexes
6161
fixActiveItemIndexes(index);
6262

63-
self.$viewChangeListeners.forEach(function (fn) {
63+
self.$viewChangeListeners.forEach(function(fn) {
6464
fn();
6565
});
6666
};
6767

6868
// use array to store all the currently open panels
6969
self.$targets.$active = !self.$options.startCollapsed ? [0] : [];
70-
self.$setActive = $scope.$setActive = function (value) {
71-
if (angular.isArray(value)) {
70+
self.$setActive = $scope.$setActive = function(value) {
71+
if(angular.isArray(value)) {
7272
self.$targets.$active = value;
7373
} else if (!self.$options.disallowToggle && isActive(value)) {
7474
deactivateItem(value);
7575
} else {
7676
activateItem(value);
7777
}
7878

79-
self.$viewChangeListeners.forEach(function (fn) {
79+
self.$viewChangeListeners.forEach(function(fn) {
8080
fn();
8181
});
8282
};
8383

84-
self.$activeIndexes = function () {
84+
self.$activeIndexes = function() {
8585
if (self.$options.allowMultiple) {
8686
return self.$targets.$active;
8787
}
8888
return self.$targets.$active.length === 1 ? self.$targets.$active[0] : -1;
8989
};
9090

91-
function fixActiveItemIndexes (index) {
91+
function fixActiveItemIndexes(index) {
9292
// item with index was removed, so we
9393
// need to adjust other items index values
9494
var activeIndexes = self.$targets.$active;
95-
for (var i = 0; i < activeIndexes.length; i++) {
95+
for(var i = 0; i < activeIndexes.length; i++) {
9696
if (index < activeIndexes[i]) {
9797
activeIndexes[i] = activeIndexes[i] - 1;
9898
}
@@ -105,19 +105,19 @@ angular.module('mgcrea.ngStrap.collapse', [])
105105
}
106106
}
107107

108-
function isActive (value) {
108+
function isActive(value) {
109109
var activeItems = self.$targets.$active;
110110
return activeItems.indexOf(value) !== -1;
111111
}
112112

113-
function deactivateItem (value) {
113+
function deactivateItem(value) {
114114
var index = self.$targets.$active.indexOf(value);
115115
if (index !== -1) {
116116
self.$targets.$active.splice(index, 1);
117117
}
118118
}
119119

120-
function activateItem (value) {
120+
function activateItem(value) {
121121
if (!self.$options.allowMultiple) {
122122
// remove current selected item
123123
self.$targets.$active.splice(0, 1);
@@ -130,7 +130,7 @@ angular.module('mgcrea.ngStrap.collapse', [])
130130

131131
};
132132

133-
this.$get = function () {
133+
this.$get = function() {
134134
var $collapse = {};
135135
$collapse.defaults = defaults;
136136
$collapse.controller = controller;
@@ -139,25 +139,25 @@ angular.module('mgcrea.ngStrap.collapse', [])
139139

140140
})
141141

142-
.directive('bsCollapse', function ($window, $animate, $collapse) {
142+
.directive('bsCollapse', function($window, $animate, $collapse) {
143143

144144
return {
145145
require: ['?ngModel', 'bsCollapse'],
146146
controller: ['$scope', '$element', '$attrs', $collapse.controller],
147-
link: function postLink (scope, element, attrs, controllers) {
147+
link: function postLink(scope, element, attrs, controllers) {
148148

149149
var ngModelCtrl = controllers[0];
150150
var bsCollapseCtrl = controllers[1];
151151

152-
if (ngModelCtrl) {
152+
if(ngModelCtrl) {
153153

154154
// Update the modelValue following
155-
bsCollapseCtrl.$viewChangeListeners.push(function () {
155+
bsCollapseCtrl.$viewChangeListeners.push(function() {
156156
ngModelCtrl.$setViewValue(bsCollapseCtrl.$activeIndexes());
157157
});
158158

159159
// modelValue -> $formatters -> viewValue
160-
ngModelCtrl.$formatters.push(function (modelValue) {
160+
ngModelCtrl.$formatters.push(function(modelValue) {
161161
// console.warn('$formatter("%s"): modelValue=%o (%o)', element.attr('ng-model'), modelValue, typeof modelValue);
162162
if (angular.isArray(modelValue)) {
163163
// model value is an array, so just replace
@@ -186,11 +186,11 @@ angular.module('mgcrea.ngStrap.collapse', [])
186186

187187
})
188188

189-
.directive('bsCollapseToggle', function () {
189+
.directive('bsCollapseToggle', function() {
190190

191191
return {
192192
require: ['^?ngModel', '^bsCollapse'],
193-
link: function postLink (scope, element, attrs, controllers) {
193+
link: function postLink(scope, element, attrs, controllers) {
194194

195195
// var ngModelCtrl = controllers[0];
196196
var bsCollapseCtrl = controllers[1];
@@ -202,29 +202,36 @@ angular.module('mgcrea.ngStrap.collapse', [])
202202
bsCollapseCtrl.$registerToggle(element);
203203

204204
// remove toggle from collapse controller when toggle is destroyed
205-
scope.$on('$destroy', function () {
205+
scope.$on('$destroy', function() {
206206
bsCollapseCtrl.$unregisterToggle(element);
207207
});
208208

209-
element.on('click', function () {
209+
var actionEventHandler = function () {
210210
if (!attrs.disabled) {
211-
var index = attrs.bsCollapseToggle && attrs.bsCollapseToggle !== 'bs-collapse-toggle' ? attrs.bsCollapseToggle : bsCollapseCtrl.$toggles.indexOf(element);
212-
bsCollapseCtrl.$setActive(index * 1);
213-
scope.$apply();
211+
var index = attrs.bsCollapseToggle && attrs.bsCollapseToggle !== 'bs-collapse-toggle' ? attrs.bsCollapseToggle : bsCollapseCtrl.$toggles.indexOf(element);
212+
bsCollapseCtrl.$setActive(index * 1);
213+
scope.$apply();
214214
}
215-
});
215+
}
216216

217+
element.on('click', actionEventHandler);
218+
element.bind('keydown keypress', function(e) {
219+
if(e.which === 13) {
220+
actionEventHandler();
221+
}
222+
e.preventDefault();
223+
});
217224
}
218225
};
219226

220227
})
221228

222-
.directive('bsCollapseTarget', function ($animate) {
229+
.directive('bsCollapseTarget', function($animate) {
223230

224231
return {
225232
require: ['^?ngModel', '^bsCollapse'],
226233
// scope: true,
227-
link: function postLink (scope, element, attrs, controllers) {
234+
link: function postLink(scope, element, attrs, controllers) {
228235

229236
// var ngModelCtrl = controllers[0];
230237
var bsCollapseCtrl = controllers[1];
@@ -233,19 +240,19 @@ angular.module('mgcrea.ngStrap.collapse', [])
233240
element.addClass('collapse');
234241

235242
// Add animation class
236-
if (bsCollapseCtrl.$options.animation) {
243+
if(bsCollapseCtrl.$options.animation) {
237244
element.addClass(bsCollapseCtrl.$options.animation);
238245
}
239246

240247
// Push pane to parent bsCollapse controller
241248
bsCollapseCtrl.$registerTarget(element);
242249

243250
// remove pane target from collapse controller when target is destroyed
244-
scope.$on('$destroy', function () {
251+
scope.$on('$destroy', function() {
245252
bsCollapseCtrl.$unregisterTarget(element);
246253
});
247254

248-
function render () {
255+
function render() {
249256
var index = bsCollapseCtrl.$targets.indexOf(element);
250257
var active = bsCollapseCtrl.$activeIndexes();
251258
var action = 'removeClass';
@@ -260,7 +267,7 @@ angular.module('mgcrea.ngStrap.collapse', [])
260267
$animate[action](element, bsCollapseCtrl.$options.activeClass);
261268
}
262269

263-
bsCollapseCtrl.$viewChangeListeners.push(function () {
270+
bsCollapseCtrl.$viewChangeListeners.push(function() {
264271
render();
265272
});
266273
render();

0 commit comments

Comments
 (0)