(function() {
var module = angular.module('toggle-switch', ['ng']);
module.provider('toggleSwitchConfig', [function() {
this.onLabel = 'On';
this.offLabel = 'Off';
this.knobLabel = '\u00a0';
this.reverse = false;
var self = this;
this.$get = function() {
return {
onLabel: self.onLabel,
offLabel: self.offLabel,
knobLabel: self.knobLabel,
reverse: self.reverse
};
};
}]);
module.directive('toggleSwitch',['toggleSwitchConfig', function (toggleSwitchConfig) {
return {
restrict: 'EA',
replace: true,
require:'ngModel',
scope: {
disabled: '@',
onLabel: '@',
offLabel: '@',
knobLabel: '@',
reverse: '@'
},
template: '
' +
'
' +
'' +
'' +
'' +
'
' +
'
',
compile: function(element, attrs) {
if (!attrs.onLabel) { attrs.onLabel = toggleSwitchConfig.onLabel; }
if (!attrs.offLabel) { attrs.offLabel = toggleSwitchConfig.offLabel; }
if (!attrs.knobLabel) { attrs.knobLabel = toggleSwitchConfig.knobLabel; }
if (!attrs.reverse) { attrs.reverse = toggleSwitchConfig.reverse; }
return this.link;
},
link: function(scope, element, attrs, ngModelCtrl){
var KEY_SPACE = 32;
element.on('click', function() {
scope.$apply(scope.toggle);
});
element.on('keydown', function(e) {
var key = e.which ? e.which : e.keyCode;
if (key === KEY_SPACE) {
scope.$apply(scope.toggle);
}
});
ngModelCtrl.$formatters.push(function(modelValue){
return modelValue;
});
ngModelCtrl.$parsers.push(function(viewValue){
return viewValue;
});
ngModelCtrl.$viewChangeListeners.push(function() {
scope.$eval(attrs.ngChange);
});
ngModelCtrl.$render = function(){
if (scope.reverse) {
scope.model = !ngModelCtrl.$viewValue;
}
else {
scope.model = ngModelCtrl.$viewValue;
}
};
scope.toggle = function toggle() {
if(!scope.disabled) {
scope.model = !scope.model;
if (scope.reverse) {
ngModelCtrl.$setViewValue(!scope.model);
}
else {
ngModelCtrl.$setViewValue(scope.model);
}
}
};
}
};
}]);
})();