jquery-simple-timer - npm Package Compare versions

Comparing version 0.0.5 to 1.0.0

examples/dojo.js

 $(function(){
   $('.timer').startTimer({
     onComplete: function(element){
-      alert('hey');
-      //$('html, body').addClass('bodyTimeoutBackground');
+      $('html, body').addClass('bodyTimeoutBackground');
     }
   }).click(function(){ location.reload() });
 })

jquery.simple.timer.js

@@ -10,7 +10,28 @@ /*
 */
-(function($){
 
+(function (factory) {
+  // Using as a CommonJS module
+  if(typeof module === "object" && typeof module.exports === "object") {
+    // jQuery must be provided as argument when used
+    // as a CommonJS module.
+    //
+    // For example:
+    //   let $ = require("jquery");
+    //   require("jquery-simple-timer")($);
+    module.exports = function(jq) {
+      factory(jq, window, document);
+    }
+  } else {
+    // Using as script tag
+    //
+    // For example:
+    //   <script src="jquery.simple.timer.js"></script>
+    factory(jQuery, window, document);
+  }
+}(function($, window, document, undefined) {
+
   var timer;
 
   var Timer = function(targetElement){
+    this._options = {};
     this.targetElement = targetElement;
@@ -20,21 +41,38 @@ return this;
 
-  Timer.start = function(options, targetElement){
+  Timer.start = function(userOptions, targetElement){
     timer = new Timer(targetElement);
-    return timer.start(options);
+    mergeOptions(timer, userOptions);
+    return timer.start(userOptions);
   };
 
+  // Writes to `this._options` object so that other
+  // functions can access it without having to
+  // pass this object as argument multiple times.
+  function mergeOptions(timer, opts) {
+    opts = opts || {};
+    var classNames = opts.classNames || {};
+
+    timer._options.classNameSeconds       = classNames.seconds  || 'jst-seconds'
+      , timer._options.classNameMinutes   = classNames.minutes  || 'jst-minutes'
+      , timer._options.classNameHours     = classNames.hours    || 'jst-hours'
+      , timer._options.classNameClearDiv  = classNames.clearDiv || 'jst-clearDiv'
+      , timer._options.classNameTimeout   = classNames.timeout || 'jst-timeout';
+  }
+
   Timer.prototype.start = function(options) {
 
+    var that = this;
+
     var createSubDivs = function(timerBoxElement){
       var seconds = document.createElement('div');
-      seconds.className = 'seconds';
+      seconds.className = that._options.classNameSeconds;
 
       var minutes = document.createElement('div');
-      minutes.className = 'minutes';
+      minutes.className = that._options.classNameMinutes;
 
       var hours = document.createElement('div');
-      hours.className = 'hours';
+      hours.className = that._options.classNameHours;
 
       var clearDiv = document.createElement('div');
-      clearDiv.className = 'clearDiv';
+      clearDiv.className = that._options.classNameClearDiv;
 
@@ -49,2 +87,3 @@ return timerBoxElement.
     this.targetElement.each(function(_index, timerBox) {
+      var that = this;
       var timerBoxElement = $(timerBox);
@@ -62,3 +101,3 @@ var cssClassSnapshot = timerBoxElement.attr('class');
       timerBoxElement.on('complete', function(){
-        timerBoxElement.addClass('timeout');
+        timerBoxElement.addClass(that._options.classNameTimeout);
       });
@@ -72,2 +111,12 @@
 
+      timerBoxElement.on('pause', function() {
+        clearInterval(timerBoxElement.intervalId);
+        timerBoxElement.paused = true;
+      });
+
+      timerBoxElement.on('resume', function() {
+        timerBoxElement.paused = false;
+        that.startCountdown(timerBoxElement, { secondsLeft: timerBoxElement.data('timeLeft') });
+      });
+
       createSubDivs(timerBoxElement);
@@ -100,5 +149,5 @@ return this.startCountdown(timerBoxElement, options);
 
-    if(secondsLeft){
+    if(Number.isFinite(secondsLeft)){
       return parseInt(secondsLeft, 10);
-    } else if(minutesLeft) {
+    } else if(Number.isFinite(minutesLeft)) {
       return parseFloat(minutesLeft) * 60;
@@ -120,4 +169,14 @@ }else {
     element.onComplete = options.onComplete || defaultComplete;
+    element.allowPause = options.allowPause || false;
+    if(element.allowPause){
+      element.on('click', function() {
+        if(element.paused){
+          element.trigger('resume');
+        }else{
+          element.trigger('pause');
+        }
+      });
+    }
 
-    var secondsLeft = this.fetchSecondsLeft(element);
+    var secondsLeft = options.secondsLeft || this.fetchSecondsLeft(element);
 
@@ -132,2 +191,8 @@ var refreshRate = options.refreshRate || 1000;
       timeLeft = endTime - this.currentTime();
+      // When timer has been idle and only resumed past timeout,
+      // then we immediatelly complete the timer.
+      if(timeLeft < 0 ){
+        timeLeft = 0;
+      }
+      element.data('timeLeft', timeLeft);
       this.setFinalValue(this.formatTimeLeft(timeLeft), element);
@@ -140,5 +205,5 @@ }.bind(this)), refreshRate);
   Timer.prototype.clearTimer = function(element){
-    element.find('.seconds').text('00');
-    element.find('.minutes').text('00:');
-    element.find('.hours').text('00:');
+    element.find('.jst-seconds').text('00');
+    element.find('.jst-minutes').text('00:');
+    element.find('.jst-hours').text('00:');
   };
@@ -167,8 +232,10 @@
 
-    var hours, minutes, remaining, seconds;
-    remaining = new Date(timeLeft * 1000);
-    hours = remaining.getUTCHours();
-    minutes = remaining.getUTCMinutes();
-    seconds = remaining.getUTCSeconds();
+    var hours = Math.floor(timeLeft / 3600);
+    timeLeft -= hours * 3600;
 
+    var minutes = Math.floor(timeLeft / 60);
+    timeLeft -= minutes * 60;
+
+    var seconds = parseInt(timeLeft % 60, 10);
+
     if (+hours === 0 && +minutes === 0 && +seconds === 0) {
@@ -189,5 +256,5 @@ return [];
 
-    element.find('.seconds').text(finalValues.pop());
-    element.find('.minutes').text(finalValues.pop() + ':');
-    element.find('.hours').text(finalValues.pop() + ':');
+    element.find('.' + this._options.classNameSeconds).text(finalValues.pop());
+    element.find('.' + this._options.classNameMinutes).text(finalValues.pop() + ':');
+    element.find('.' + this._options.classNameHours).text(finalValues.pop() + ':');
   };
@@ -197,5 +264,7 @@
   $.fn.startTimer = function(options) {
+    this.TimerObject = Timer;
     Timer.start(options, this);
     return this;
   };
-})(jQuery);
+
+}));

package.json

 {
   "name": "jquery-simple-timer",
-  "version": "0.0.5",
+  "version": "1.0.0",
   "description": "A countdown timer plugin for jQuery",
@@ -10,13 +10,15 @@ "main": "jquery.simple.timer.js",
   },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
-    "url": "https://github.com/caike/jQuery-Simple-Timer.git"
+    "url": "git+https://github.com/caike/jQuery-Simple-Timer.git"
   },
   "keywords": [
     "jquery-plugin",
+    "timer",
+    "countdown timer",
     "ecosystem:jquery"
   ],
+  "dependencies" : {
+    "jquery": "~>1.12.4"
+  },
   "author": "Carlos Souza <[e-mail]> (http://csouza.me/)",
@@ -23,0 +25,0 @@ "license": "MIT",

README.md

@@ -27,3 +27,3 @@ ## Simple.Timer
 
-This plugin can be installed manually from github or via Bower.
+This plugin can be installed manually from github or via npm.
 
@@ -39,18 +39,27 @@ ### Manual
 
-### Bower
+### npm
 
-In order to install it using Bower, make sure you have node, npm and bower installed:
+To install from npm, run:
 
 ```
-$ npm install -g bower
+npm install jquery-simple-timer --save
 ```
 
-Use the `bower` command to fetch the plugin:
+jQuery is **NOT** installed automatically. We need to install jQuery (`npm install jquery --save`) and then pass it as an argument to the return value of the `require()` statement. Here's an example:
 
+```javascript
+// file: client.js
+"use strict";
+
+let $ = require("jquery");
+require("jquery-simple-timer")($); // passing jQuery as argument
+
+$(function(){
+  $('.timer').startTimer();
+});
 ```
-$ bower install jquery-simple-timer
-```
 
-The plugin will be installed under *bower_components/jquery-simple-timer/jquery.simple.timer.js* unless you have a *.bowerrc* stating otherwise.
+## Live Examples
 
+Open [examples/index.html](https://rawgit.com/caike/jQuery-Simple-Timer/master/examples/index.html)
 
@@ -65,2 +74,3 @@ ## Tests
 * [Rafael Oshiro](https://github.com/roshiro)
+* [ASCIIcat](https://github.com/ASCIIcat)
 

tests/tests.js

@@ -45,2 +45,10 @@ test('Parses initial time from seconds', function(){
 
+
+test('Adds timeout class when timer is up', function () {
+  var timerElement = $('#timer3');
+  timerElement.startTimer();
+  timerElement.trigger('complete');
+  ok(timerElement.hasClass('jst-timeout'), 'adds default timeout class');
+});
+
 asyncTest('Clears the timer when complete and no options', function () {
@@ -73,9 +81,36 @@ expect(1);
   timerElement.on('complete', function(){
-    setTimeout(function() {
-      equal(timerElement.text(), '00:00:00', 'Cleared timer');
-      start();
-    }, 1000);
+    equal(timerElement.text(), '00:00:00', 'Cleared timer');
+    start();
   });
 });
 
+
+asyncTest('Cleas the timer when 0 minutes left', function () {
+  expect(1);
+
+  var timerElement = $('#timer1');
+  timerElement.data('minutes-left', 0);
+
+  var plugin = timerElement.startTimer({});
+
+  setTimeout(function() {
+    equal(timerElement.text(), '00:00:00', 'Cleared timer');
+    start();
+  }, 1000);
+});
+
+asyncTest('Clears the timer when 0 seconds left', function () {
+  expect(1);
+
+  var timerElement = $('#timer1');
+  timerElement.data('seconds-left', 0);
+
+  var plugin = timerElement.startTimer({});
+
+  setTimeout(function() {
+    equal(timerElement.text(), '00:00:00', 'Cleared timer');
+    start();
+  }, 1000);
+});
+
 asyncTest('Do not restart timer when loop option is false', function() {
@@ -140,1 +175,181 @@ expect(1);
 });
+
+asyncTest('Pauses on click when allowPause is true', function () {
+  expect(1);
+
+  var timerElement = $('#timer1');
+  timerElement.data('seconds-left', 3);
+  timerElement.startTimer({
+    onComplete: function() {
+      console.log('complete');
+    },
+    allowPause: true
+  }).trigger('click')
+
+  setTimeout(function() {
+    equal(timerElement.text(), '00:00:03', 'Timer is on pause');
+    start();
+  }, 3000);
+});
+
+asyncTest('Does NOT pause on click when allowPause is not specified', function () {
+  expect(1);
+
+  var timerElement = $('#timer1');
+  timerElement.data('seconds-left', 2);
+  timerElement.startTimer({
+    onComplete: function() {
+      console.log('complete');
+    },
+    // allowPause: true
+  }).trigger('click')
+
+
+  setTimeout(function() {
+    equal(timerElement.text(), '00:00:01', 'Cleared timer');
+    start();
+  }, 1500);
+});
+
+asyncTest('Does NOT pause on click when allowPause is false', function () {
+  expect(1);
+
+  var timerElement = $('#timer1');
+  timerElement.data('seconds-left', 2);
+  timerElement.startTimer({
+    onComplete: function() {
+      console.log('complete');
+    },
+    allowPause: false
+  }).trigger('click')
+
+
+  setTimeout(function() {
+    equal(timerElement.text(), '00:00:01', 'Cleared timer');
+    start();
+  }, 1000);
+});
+
+asyncTest('When timeLeft is less than 0, it completes upon return (computer asleep or browser tab is inactive)', function () {
+  expect(1);
+
+  var timerElement = $('#timer1');
+  timerElement.data('seconds-left', 3);
+
+  var plugin = timerElement.startTimer({
+    onComplete: function() {
+      console.log('complete');
+    }
+  })
+
+  // Force time in the future
+  plugin.TimerObject.prototype.currentTime = function(){
+    return Math.round((new Date()).getTime() / 1000) + 1000;
+  }
+
+  setTimeout(function() {
+    equal(timerElement.text(), '00:00:00', 'Cleared timer');
+    start();
+  }, 1000);
+});
+
+asyncTest('When seconds left is greater than 24h, timer displays proper hour', function () {
+  expect(1);
+
+  var timerElement = $('#timer1');
+  var twentySixHoursInSeconds = (26*60*60)
+  timerElement.data('seconds-left', twentySixHoursInSeconds);
+
+  var plugin = timerElement.startTimer({
+    onComplete: function() {
+      console.log('complete');
+    }
+  })
+
+  setTimeout(function() {
+    equal(timerElement.text(), '26:00:00', 'Cleared timer');
+    start();
+  }, 500);
+});
+
+asyncTest('When minutes left is greater than 24h, timer displays proper hour', function () {
+  expect(1);
+
+  var timerElement = $('#timer1');
+  var twentyEightHoursInMinutes = (28*60)
+  timerElement.data('minutes-left', twentyEightHoursInMinutes);
+
+  var plugin = timerElement.startTimer({
+    onComplete: function() {
+      console.log('complete');
+    }
+  })
+
+  setTimeout(function() {
+    equal(timerElement.text(), '28:00:00', 'Cleared timer');
+    start();
+  }, 500);
+});
+
+test('Uses default classNames when none given via options', function(){
+  var timerElement = $('#timer1');
+  var secondsLeft = 2;
+
+  timerElement.data('seconds-left', secondsLeft);
+  timerElement.startTimer();
+
+  equal(timerElement.find('.jst-hours').length, 1, 'Default hours class');
+  equal(timerElement.find('.jst-minutes').length, 1, 'Default minutes class');
+  equal(timerElement.find('.jst-seconds').length, 1, 'Default seconds class');
+  equal(timerElement.find('.jst-clearDiv').length, 1, 'Default clearDiv class');
+});
+
+test('Accepts options for element classNames', function(){
+  var timerElement = $('#timer1');
+  var secondsLeft = 10;
+
+  timerElement.data('seconds-left', secondsLeft);
+  timerElement.startTimer({
+    classNames: {
+      hours: 'banana-hours',
+      minutes: 'banana-minutes',
+      seconds: 'banana-seconds',
+      clearDiv: 'banana-clearDiv',
+      timeout: 'banana-timeout'
+    }
+  });
+
+  equal(timerElement.find('.banana-hours').length, 1, 'Found hours class');
+  equal(timerElement.find('.banana-minutes').length, 1, 'Found minutes class');
+  equal(timerElement.find('.banana-seconds').length, 1, 'Found seconds class');
+  equal(timerElement.find('.banana-clearDiv').length, 1, 'Found clearDiv class');
+  timerElement.trigger('complete');
+  ok(timerElement.hasClass('banana-timeout'), 'Found timeout class');
+});
+
+asyncTest('Runs independent timers with custom options', function(){
+  expect(1);
+
+  var timerElement = $('#timer1');
+  timerElement.data('seconds-left', 10);
+  timerElement.startTimer();
+  setTimeout(function() {
+    equal(timerElement.text(), '00:00:08', 'Cleared timer');
+    start();
+  }, 2500);
+
+  var timerElement2 = $('#timer2');
+  timerElement2.data('seconds-left', 5);
+
+  timerElement2.startTimer({
+    classNames: {
+      hours: 'banana-hours',
+      minutes: 'banana-minutes',
+      seconds: 'banana-seconds',
+      clearDiv: 'banana-clearDiv',
+      timeout: 'banana-timeout'
+    }
+  });
+
+});
+

New alerts

NPM Shrinkwrap

Supply chain risk

Package contains a shrinkwrap file. This may allow the package to bypass normal install procedures.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

487517

increased by176.91%

Number of package files

17

increased by21.43%

Lines of code

12258

increased by325.48%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

74

increased by15.63%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of high supply chain risk alerts

1

increased byInfinity%

Number of low supply chain risk alerts

2

increased byInfinity%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedjquery@~>1.12.4

• + Addedjquery@1.12.4(transitive)