https://wlivestock.com/app/directives/doubleClickButton.js?v=buster20250808

1app.directive('doubleClickButton', function () {
2    return {
3        templateUrl: 'app/directives/doubleClickButton.html',
4        restrict: 'EA',
5        scope: {
6            content: '='
7            , buttonClickCallback: '&'
8            , singleButtonClickCallback: '&'
9            , buttonText: '='
10            , buttonClass: '='
11            , buttonConfirmText: '='
12            , buttonConfirmClass: '='
13            , progressBarHeight: '='
14            , isPendingDoubleClick: '='
15            , isDisabled: '='
16        },
17        controller: 'doubleClickButtonController',
18        controllerAs: 'vm',
19        bindToController: true
20    }
21});
22
23
24
25app.controller('doubleClickButtonController', ['$scope', '$interval',
26    function ($scope, $interval) {
27        var vm = this;
28
29        //vm.buttonClick = function () {
30        //    vm.buttonClickCallback();
31        //}
32
33        $scope.$watch('vm.buttonClass', function (newValue, oldValue) {
34            if (vm.buttonClass != null) {
35                vm.doubleClickButtonClass = angular.copy(vm.buttonClass);
36            }
37        });
38
39        $scope.$watch('vm.buttonText', function (newValue, oldValue) {
40            if (vm.buttonText != null) {
41                vm.doubleClickButtonText = angular.copy(vm.buttonText);
42            }
43        });
44
45        $scope.$watch('vm.isDisabled', function (newValue, oldValue) {
46            if (vm.isDisabled === true) {
47                $interval.cancel(vm.buttonDoubleClickProgressInterval);
48                vm.buttonDoubleClickProgress = 0;
49
50                // Reset the class and text
51                vm.doubleClickButtonClass = angular.copy(vm.buttonClass);
52                vm.doubleClickButtonText = angular.copy(vm.buttonText);
53            }
54        });
55
56        vm.buttonClick = function () {
57            if (vm.buttonDoubleClickProgress == 0) {                
58
59                //start the countdown
60                vm.resetButton();
61
62                if (vm.isPendingDoubleClick != null) {
63                    vm.isPendingDoubleClick = true;
64                }                
65
66                if (vm.buttonDoubleClickProgress == 0) {
67                    vm.buttonDoubleClickProgress = 100;
68                }
69
70                // If there is a confirm class, use it
71                if (vm.buttonConfirmClass != null) {
72                    vm.doubleClickButtonClass = angular.copy(vm.buttonConfirmClass);
73                }
74
75                // If there is confirm text, use it
76                if (vm.buttonConfirmText != null) {
77                    vm.doubleClickButtonText = angular.copy(vm.buttonConfirmText);
78                }
79
80                vm.doubleClickTick();
81                vm.buttonDoubleClickProgressInterval = $interval(vm.doubleClickTick, 20); //20 would be 2 seconds. 10 would be 1 second
82
83                vm.singleButtonClickCallback();
84
85            } else {                
86                if (vm.buttonDoubleClickProgress > 0) {
87                    //This means they've clicked the button again before the confirm timer ran out
88                    vm.resetButton();
89                    vm.buttonClickCallback();
90                    return;
91                }
92            }
93        };
94
95        vm.doubleClickTick = function () {
96            vm.buttonDoubleClickProgress -= 1;
97            vm.buttonDoubleClickProgressPercentage = Math.round((vm.buttonDoubleClickProgress / 100) * 100, 0) + '%';
98            if (vm.buttonDoubleClickProgress <= 0) {
99                vm.resetButton();
100            }
101        };
102
103        vm.resetButton = function () {
104            $interval.cancel(vm.buttonDoubleClickProgressInterval);
105            vm.buttonDoubleClickProgress = 0;
106
107            // Reset the class and text
108            vm.doubleClickButtonClass = angular.copy(vm.buttonClass);
109            vm.doubleClickButtonText = angular.copy(vm.buttonText);
110
111            if (vm.isPendingDoubleClick != null) {
112                vm.isPendingDoubleClick = false;
113            }    
114            
115        };
116
117        vm.buttonDoubleClickProgress = 0;
118        vm.buttonDoubleClickProgressInterval = null;
119        vm.buttonDoubleClickProgressPercentage = '0%';
120
121        vm.doubleClickButtonClass = '';
122        vm.doubleClickButtonText = '';
123
124}]);