2015-07-14 13:45:54 -07:00

274 lines
8.0 KiB
JavaScript

/**
* angular-strap
* @version v2.2.1 - 2015-03-10
* @link http://mgcrea.github.io/angular-strap
* @author Olivier Louvignes (olivier@mg-crea.com)
* @license MIT License, http://www.opensource.org/licenses/MIT
*/
'use strict';
angular.module('mgcrea.ngStrap.collapse', [])
.provider('$collapse', function() {
var defaults = this.defaults = {
animation: 'am-collapse',
disallowToggle: false,
activeClass: 'in',
startCollapsed: false,
allowMultiple: false
};
var controller = this.controller = function($scope, $element, $attrs) {
var self = this;
// Attributes options
self.$options = angular.copy(defaults);
angular.forEach(['animation', 'disallowToggle', 'activeClass', 'startCollapsed', 'allowMultiple'], function (key) {
if(angular.isDefined($attrs[key])) self.$options[key] = $attrs[key];
});
self.$toggles = [];
self.$targets = [];
self.$viewChangeListeners = [];
self.$registerToggle = function(element) {
self.$toggles.push(element);
};
self.$registerTarget = function(element) {
self.$targets.push(element);
};
self.$unregisterToggle = function(element) {
var index = self.$toggles.indexOf(element);
// remove toggle from $toggles array
self.$toggles.splice(index, 1);
};
self.$unregisterTarget = function(element) {
var index = self.$targets.indexOf(element);
// remove element from $targets array
self.$targets.splice(index, 1);
if (self.$options.allowMultiple) {
// remove target index from $active array values
deactivateItem(element);
}
// fix active item indexes
fixActiveItemIndexes(index);
self.$viewChangeListeners.forEach(function(fn) {
fn();
});
};
// use array to store all the currently open panels
self.$targets.$active = !self.$options.startCollapsed ? [0] : [];
self.$setActive = $scope.$setActive = function(value) {
if(angular.isArray(value)) {
self.$targets.$active = angular.copy(value);
}
else if(!self.$options.disallowToggle) {
// toogle element active status
isActive(value) ? deactivateItem(value) : activateItem(value);
} else {
activateItem(value);
}
self.$viewChangeListeners.forEach(function(fn) {
fn();
});
};
self.$activeIndexes = function() {
return self.$options.allowMultiple ? self.$targets.$active :
self.$targets.$active.length === 1 ? self.$targets.$active[0] : -1;
};
function fixActiveItemIndexes(index) {
// item with index was removed, so we
// need to adjust other items index values
var activeIndexes = self.$targets.$active;
for(var i = 0; i < activeIndexes.length; i++) {
if (index < activeIndexes[i]) {
activeIndexes[i] = activeIndexes[i] - 1;
}
// the last item is active, so we need to
// adjust its index
if (activeIndexes[i] === self.$targets.length) {
activeIndexes[i] = self.$targets.length - 1;
}
}
}
function isActive(value) {
var activeItems = self.$targets.$active;
return activeItems.indexOf(value) === -1 ? false : true;
}
function deactivateItem(value) {
var index = self.$targets.$active.indexOf(value);
if (index !== -1) {
self.$targets.$active.splice(index, 1);
}
}
function activateItem(value) {
if (!self.$options.allowMultiple) {
// remove current selected item
self.$targets.$active.splice(0, 1);
}
if (self.$targets.$active.indexOf(value) === -1) {
self.$targets.$active.push(value);
}
}
};
this.$get = function() {
var $collapse = {};
$collapse.defaults = defaults;
$collapse.controller = controller;
return $collapse;
};
})
.directive('bsCollapse', ["$window", "$animate", "$collapse", function($window, $animate, $collapse) {
var defaults = $collapse.defaults;
return {
require: ['?ngModel', 'bsCollapse'],
controller: ['$scope', '$element', '$attrs', $collapse.controller],
link: function postLink(scope, element, attrs, controllers) {
var ngModelCtrl = controllers[0];
var bsCollapseCtrl = controllers[1];
if(ngModelCtrl) {
// Update the modelValue following
bsCollapseCtrl.$viewChangeListeners.push(function() {
ngModelCtrl.$setViewValue(bsCollapseCtrl.$activeIndexes());
});
// modelValue -> $formatters -> viewValue
ngModelCtrl.$formatters.push(function(modelValue) {
// console.warn('$formatter("%s"): modelValue=%o (%o)', element.attr('ng-model'), modelValue, typeof modelValue);
if (angular.isArray(modelValue)) {
// model value is an array, so just replace
// the active items directly
bsCollapseCtrl.$setActive(modelValue);
}
else {
var activeIndexes = bsCollapseCtrl.$activeIndexes();
if (angular.isArray(activeIndexes)) {
// we have an array of selected indexes
if (activeIndexes.indexOf(modelValue * 1) === -1) {
// item with modelValue index is not active
bsCollapseCtrl.$setActive(modelValue * 1);
}
}
else if (activeIndexes !== modelValue * 1) {
bsCollapseCtrl.$setActive(modelValue * 1);
}
}
return modelValue;
});
}
}
};
}])
.directive('bsCollapseToggle', function() {
return {
require: ['^?ngModel', '^bsCollapse'],
link: function postLink(scope, element, attrs, controllers) {
var ngModelCtrl = controllers[0];
var bsCollapseCtrl = controllers[1];
// Add base attr
element.attr('data-toggle', 'collapse');
// Push pane to parent bsCollapse controller
bsCollapseCtrl.$registerToggle(element);
// remove toggle from collapse controller when toggle is destroyed
scope.$on('$destroy', function() {
bsCollapseCtrl.$unregisterToggle(element);
});
element.on('click', function() {
var index = attrs.bsCollapseToggle || bsCollapseCtrl.$toggles.indexOf(element);
bsCollapseCtrl.$setActive(index * 1);
scope.$apply();
});
}
};
})
.directive('bsCollapseTarget', ["$animate", function($animate) {
return {
require: ['^?ngModel', '^bsCollapse'],
// scope: true,
link: function postLink(scope, element, attrs, controllers) {
var ngModelCtrl = controllers[0];
var bsCollapseCtrl = controllers[1];
// Add base class
element.addClass('collapse');
// Add animation class
if(bsCollapseCtrl.$options.animation) {
element.addClass(bsCollapseCtrl.$options.animation);
}
// Push pane to parent bsCollapse controller
bsCollapseCtrl.$registerTarget(element);
// remove pane target from collapse controller when target is destroyed
scope.$on('$destroy', function() {
bsCollapseCtrl.$unregisterTarget(element);
});
function render() {
var index = bsCollapseCtrl.$targets.indexOf(element);
var active = bsCollapseCtrl.$activeIndexes();
var action = 'removeClass';
if (angular.isArray(active)) {
if (active.indexOf(index) !== -1) {
action = 'addClass';
}
}
else if (index === active) {
action = 'addClass';
}
$animate[action](element, bsCollapseCtrl.$options.activeClass);
}
bsCollapseCtrl.$viewChangeListeners.push(function() {
render();
});
render();
}
};
}]);