https://arctic-images.com/js/jquery.polartimer.js

1(function($) {
2
3  $.fn.polartimer = function(method) {
4    // Method calling logic
5    if (methods[method]) {
6      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
7    }
8    else if (typeof method === 'object' || ! method) {
9      return methods.init.apply(this, arguments);
10    }
11    else {
12      $.error('Method ' + method + ' does not exist on jQuery.polartimer');
13    }
14  };
15
16  var methods = {
17    init : function(options) {
18      var state = {
19        timerSeconds : 10,
20        callback : function() {
21        },
22        color : '#CCC',
23        opacity : 1
24      };
25      state = $.extend(state, options);
26
27      return this.each(function() {
28        var $this = $(this);
29        var data = $this.data('polartimer');
30        if (! data) {
31          $this.addClass('polartimer');
32          $this.height($this.width());
33          state.timer = null;
34          state.timerCurrent = 0;
35          state.pi2 = Math.PI * 2;
36          state.piOver2 = Math.PI / 2;
37          state.width = $this.width();
38          state.height = $this.height();
39          state.raphael = Raphael($this.context, state.width, state.height);
40          $this.data('polartimer', state);
41        }
42      });
43    },
44
45    stopWatch : function() {
46      return this.each(function() {
47        var data = $(this).data('polartimer');
48        if (data) {
49          var seconds = (data.timerFinish - (new Date().getTime())) / 1000;
50          if(seconds <= 0) {
51            clearInterval(data.timer);
52            $(this).polartimer('drawTimer', 100);
53            data.callback();
54          }
55          else {
56            var percent = 100 - ((seconds / (data.timerSeconds)) * 100);
57            $(this).polartimer('drawTimer', percent);
58          }
59        }
60      });
61    },
62
63    drawTimer : function(percent) {
64      return this.each(function() {
65        $this = $(this);
66        var data = $this.data('polartimer');
67        if (data) {
68          var w = data.width;
69          var h = data.height;
70          var cx = w / 2;
71
72          data.raphael.clear();
73
74          if (percent == 100) {
75            data.raphael.circle(cx, cx, cx).attr({
76              fill : data.color,
77              stroke : 'none',
78              opacity : data.opacity
79            });
80          }
81          else {
82            var theta = data.pi2 * percent / 100 - data.piOver2;
83            var x1 = Math.cos(theta) * cx + cx;
84            var y1 = Math.sin(theta) * cx + cx;
85
86            var longArcFlag = (percent <= 50) ? 0 : 1;
87
88            var path = "M" + cx + "," + cx + " L" + cx + ",0 ";
89            path += "A" + cx + "," + cx + " 0 " + longArcFlag + ",1 " + x1 + "," + y1 + " ";
90            path += "L" + cx + "," + cx + "z";
91
92            var frame = data.raphael.path(path);
93            frame.attr({
94              fill : data.color,
95              stroke : 'none',
96              opacity : data.opacity
97            });
98          }
99        }
100      });
101    },
102
103    start : function(percent) {
104      return this.each(function() {
105        var data = $(this).data('polartimer');
106        if (data) {
107          if (percent < 0 || !percent) percent = 0;
108          if (percent > 100) percent = 100;
109          clearInterval(data.timer);
110          data.resumeSeconds = null; // clears paused state
111          data.timerFinish = new Date().getTime() + (data.timerSeconds * 1000) * (1 - percent / 100);
112          $(this).polartimer('drawTimer', percent);
113          var id = $this.attr('id');
114          data.timer = (! id || id === "") ?
115            setInterval("$this.polartimer('stopWatch')", 50) :
116            setInterval("$('#"+id+"').polartimer('stopWatch')", 50);
117        }
118      });
119    },
120
121    pause : function() {
122      return this.each(function() {
123        var data = $(this).data('polartimer');
124        if (data && ! data.resumeSeconds) {
125          data.resumeSeconds = (data.timerFinish - (new Date().getTime())) / 1000;
126          clearInterval(data.timer);
127        }
128      });
129    },
130
131    resume : function() {
132      return this.each(function() {
133        var data = $(this).data('polartimer');
134        if (data && data.resumeSeconds) {
135          clearInterval(data.timer);
136          data.timerFinish = new Date().getTime() + (data.resumeSeconds * 1000);
137          $(this).polartimer('drawTimer', 100 * (data.timerSeconds - data.resumeSeconds) / data.timerSeconds);
138          data.resumeSeconds = null;
139          var id = $this.attr('id');
140          data.timer = (! id || id === "") ?
141            setInterval("$this.polartimer('stopWatch')", 50) :
142            setInterval("$('#"+id+"').polartimer('stopWatch')", 50);
143        }
144      });
145    },
146
147    reset : function() {
148      return this.each(function() {
149        var data = $(this).data('polartimer');
150        if (data) {
151          clearInterval(data.timer);
152          data.resumeSeconds = null; // clears paused state
153          $(this).polartimer('drawTimer', 0);
154        }
155      });
156    },
157
158    destroy : function() {
159      return this.each(function() {
160        var $this = $(this);
161        var data = $this.data('polartimer');
162        if (data) {
163          clearInterval(data.timer);
164          data.raphael.remove();
165          $this.removeData('polartimer');
166        }
167      });
168    }
169
170  };
171})(jQuery);