Advertisement
ilman_hendrawan

timer

Feb 22nd, 2020
128
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2.  * jQuery PieTimer Plugin v0.1
  3.  * Authors: Kus (http://blakek.us/css3-pie-graph-timer-with-jquery/)
  4.  *          Connor Doyle (jQuery plugin)
  5.  *
  6.  * http://github.com/chikamichi/jquery.pietimer
  7.  *
  8.  * Licensed under the MIT licenses:
  9.  * http://www.opensource.org/licenses/mit-license.php
  10.  */
  11. (function($){
  12.   var methods = {
  13.     init: function(options) {
  14.       var state = {
  15.         timer: null,
  16.         timerSeconds: 9999,
  17.         callback: function() {},
  18.         timerCurrent: 0,
  19.         showPercentage: false,
  20.         fill: false,
  21.         color: '#CCC'
  22.       };
  23.  
  24.       state = $.extend(state, options);
  25.  
  26.       return this.each(function() {
  27.         var $this = $(this);
  28.         var data = $this.data('pietimer');
  29.         if (!data) {
  30.           $this.addClass('pietimer');
  31.           $this.css({fontSize: $this.width()});
  32.           $this.data('pietimer', state);
  33.           if (state.showPercentage) {
  34.             $this.find('.percent').show();
  35.           }
  36.           if (state.fill) {
  37.             $this.addClass('fill');
  38.           }
  39.           $this.pietimer('start');
  40.         }
  41.       });
  42.     },
  43.  
  44.     stopWatch: function() {
  45.       var data = $(this).data('pietimer');
  46.       if (data) {
  47.         var seconds = (data.timerFinish-(new Date().getTime()))/1000;
  48.         if (seconds <= 0) {
  49.           clearInterval(data.timer);
  50.           $(this).pietimer('drawTimer', 100);
  51.           data.callback();
  52.         } else {
  53.           var percent = 100-((seconds/(data.timerSeconds))*100);
  54.           $(this).pietimer('drawTimer', percent);
  55.         }
  56.       }
  57.     },
  58.  
  59.     drawTimer: function(percent) {
  60.       $this = $(this);
  61.       var data = $this.data('pietimer');
  62.       if (data) {
  63.         $this.html('<div class="percent"></div><div class="slice'+(percent > 50?' gt50"':'"')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');
  64.         var deg = 360/100*percent;
  65.         $this.find('.slice .pie').css({
  66.           '-moz-transform':'rotate('+deg+'deg)',
  67.           '-webkit-transform':'rotate('+deg+'deg)',
  68.           '-o-transform':'rotate('+deg+'deg)',
  69.           'transform':'rotate('+deg+'deg)'
  70.         });
  71.         $this.find('.percent').html(Math.round(percent)+'%');
  72.         if (data.showPercentage) {
  73.           $this.find('.percent').show();
  74.         }
  75.         if ($this.hasClass('fill')) {
  76.           $this.find('.slice .pie').css({backgroundColor: data.color});
  77.         }
  78.         else {
  79.           $this.find('.slice .pie').css({borderColor: data.color});
  80.         }
  81.       }
  82.     },
  83.    
  84.     start: function() {
  85.       var data = $(this).data('pietimer');
  86.       if (data) {
  87.         data.timerFinish = new Date().getTime()+(data.timerSeconds*1000);
  88.         $(this).pietimer('drawTimer', 0);
  89.         data.timer = setInterval("$this.pietimer('stopWatch')", 50);
  90.       }
  91.     },
  92.  
  93.     reset: function() {
  94.       var data = $(this).data('pietimer');
  95.       if (data) {
  96.         clearInterval(data.timer);
  97.         $(this).pietimer('drawTimer', 0);
  98.       }
  99.     }
  100.   };
  101.  
  102.   $.fn.pietimer = function(method) {
  103.     if (methods[method]) {
  104.       return methods[method].apply( this, Array.prototype.slice.call(arguments, 1));
  105.     } else if (typeof method === 'object' || !method) {
  106.       return methods.init.apply(this, arguments);
  107.     } else {
  108.       $.error('Method ' +  method + ' does not exist on jQuery.pietimer');
  109.     }
  110.   };
  111. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement