angular-named-toggle/angular-named-toggle.js at master · advancedcontrol/angular-named-toggle · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
(function (angular) {
    'use strict';


    // Use existing module otherwise create a new one
    var module;
    try {
        module = angular.module('coUtils');
    } catch (e) {
        module = angular.module('coUtils', []);
    }


    // Reference code:
    // https://github.com/nostalgiaz/bootstrap-switch
    // https://github.com/cgarvis/angular-toggle-switch

    var toggle = ['$scope', '$timeout', function ($scope, $timeout) {
            $scope.toggle = function toggle() {
                if (!$scope.disabled) {
                    if ($scope.model === $scope.trueValue) {
                        $scope.model = $scope.falseValue;
                    } else {
                        $scope.model = $scope.trueValue;
                    }
                }
                $timeout($scope.onChange);
            };
        }];

    module
    .directive('toggleSwitch', function () {
        return {
            restrict: 'EA',
            scope: {
                model: '=?',
                disabled: '=?',
                onLabel: '=?',
                offLabel: '=?',
                trueValue: '=?',
                falseValue: '=?',
                knobLabel: '=?',
                onChange: '&'
            },
            template:
                '<div ng-click="toggle()" ng-class="{ disabled: disabled }">' +
                    '<div class="switch-animate" ng-class="{coActive: model === trueValue}">' +
                        '<span class="switch-left">{{onLabel}}</span>' +
                        '<span class="knob">{{knobLabel}}</span>' +
                        '<span class="switch-right">{{offLabel}}</span>' +
                    '</div>' +
                    '<span class="switch-min">{{largeText}}</span>' +
                '</div>',
            controller: toggle,
            link: function(scope, $element) {
                scope.onLabel = scope.onLabel || "On";
                scope.offLabel = scope.offLabel || "Off";
                scope.knobLabel = scope.knobLabel || "\u00a0";
                scope.trueValue = scope.trueValue === undefined ? true : scope.trueValue;
                scope.falseValue = scope.falseValue === undefined ? false : scope.falseValue;

                // Add class to outer element (no replace)
                $element.addClass('co-toggle');

                var longest = [
                        scope.onLabel, scope.knobLabel, scope.offLabel
                    ].sort(function (a, b) { return b.length - a.length; })[0];

                scope.largeText = longest + longest + 'buffer';
            }
        };
    })

    .directive('iosToggle', function () {
        return {
            template: '<div ng-click="toggle()" ng-class="{coActive: model === trueValue, disabled: disabled}"></div>',
            restrict: 'EA',
            controller: toggle,
            scope: {
                model: '=?',
                disabled: '=?',
                trueValue: '=?',
                falseValue: '=?',
                onChange: '&'
            },
            link: function (scope, $element) {
                scope.trueValue = scope.trueValue === undefined ? true : scope.trueValue;
                scope.falseValue = scope.falseValue === undefined ? false : scope.falseValue;

                // Add class to outer element (no replace)
                $element.addClass('ios-toggle');
            }
        };
    })

    // Requires the images to be defined in CSS
    .directive('imageToggle', function () {
        return {
            template:
                '<div ng-click="toggle()" ' +
                    'ng-class="{trueImg: model === trueValue, disabled: disabled}"' +
                '></div>',
            restrict: 'EA',
            controller: toggle,
            scope: {
                model: '=?',
                disabled: '=?',
                trueValue: '=?',
                falseValue: '=?',
                onChange: '&'
            },
            link: function (scope, $element) {
                scope.trueValue = scope.trueValue === undefined ? true : scope.trueValue;
                scope.falseValue = scope.falseValue === undefined ? false : scope.falseValue;

                // Add class to outer element (no replace)
                $element.addClass('image-toggle');
            }
        };
    });

}(this.angular));