clocked - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

index.js

 /**
-	Created By: Anthony Datu
-	Purpose: Modular Analog Clock
-	Date: 07/16/2014
-	Notes: This works in conjunction with moment.js and moment-timezone.js
-	How to use: 
-		1) In html create <div id="clock"><svg></svg></div>
-		2) Set div's height and width equal to each other(e.g 400px by 400px)
-		3) Call new Clock() to instantiate object
-		4) Call method generate("#clock","Manila") <--- City is optional, if no city 
-		time will default to Local time.
-	
-	Clock Description:
-		Between 6 am - 5pm, clock color is orange, otherwise gray. 
+  Created By: Anthony Datu
+  Purpose: Modular Analog Clock
+  Date: 07/16/2014
+  Notes: This works in conjunction with moment.js and moment-timezone.js
+  How to use: 
+    1) In html create <div id='clock'><svg></svg></div>
+    2) Set div's height and width equal to each other(e.g 400px by 400px)
+    3) Call new Clock() to instantiate object
+    4) Call method generate('#clock','Manila') <--- City is optional, if no city 
+    time will default to Local time.
+  
+  Clock Description:
+    Between 6 am - 5pm, clock color is orange, otherwise gray. 
 **/
@@ -19,14 +19,16 @@ var moment = require('moment-timezone');
 function Clock() {
+
   var id,
     city,
     zone,
-    time_adj = [];
+    time_adj = [],
+    timer = {};
 
-  this.getTime = function() {
-      var timeDegrees = [];
+    this.getTime = function() {
+      var timeDegrees = {};
 
       if (city === 'local') {
-        timeDegrees['hour'] = parseInt(moment().format('h')) * 30 + (parseInt(moment().format('mm')) * .5);
-        timeDegrees['minute'] = parseInt(moment().format('mm')) * 6;
-        timeDegrees['second'] = parseInt(moment().format('ss')) * 6;
+        timeDegrees.hour = parseInt(moment().format('h'), 10) * 30 + (parseInt(moment().format('mm')) * 0.5);
+        timeDegrees.minute = parseInt(moment().format('mm'), 10) * 6;
+        timeDegrees.second = parseInt(moment().format('ss'), 10) * 6;
       } else if (time_adj.length > 0) {
@@ -36,24 +38,22 @@
         zone = city;
-        timeDegrees['hour'] = parseInt(moment.tz(zone).format('h')) * 30 + (parseInt(moment.tz(zone).format('mm')) * .5);
-        timeDegrees['minute'] = parseInt(moment.tz(zone).format('mm')) * 6;
-        timeDegrees['second'] = parseInt(moment.tz(zone).format('ss')) * 6;
-
+        timeDegrees.hour = parseInt(moment.tz(zone).format('h'), 10) * 30 + (parseInt(moment.tz(zone).format('mm'), 10) * 0.5);
+        timeDegrees.minute = parseInt(moment.tz(zone).format('mm', 10)) * 6;
+        timeDegrees.second = parseInt(moment.tz(zone).format('ss'), 10) * 6;
       }
 
       return timeDegrees;
-    },
+    };
 
 
     this.dayOrNight = function() {
-
       var time;
 
       if (city === 'local') {
-        time = parseInt(moment().format('HH')) > 17 || parseInt(moment().format('HH')) < 6 ? 'night' : 'day';
+        time = parseInt(moment().format('HH'), 10) > 17 || parseInt(moment().format('HH'), 10) < 6 ? 'night' : 'day';
       } else {
-        time = parseInt(moment.tz(zone).format('HH')) > 17 || parseInt(moment.tz(zone).format('HH')) < 6 ? 'night' : 'day';
+        time = parseInt(moment.tz(zone).format('HH'), 10) > 17 || parseInt(moment.tz(zone).format('HH'), 10) < 6 ? 'night' : 'day';
       }
 
       return time;
-    },
+    };
 
@@ -78,14 +78,12 @@ this.dateTicker = function() {
       return result;
-    },
+    };
 
     this.formatCity = function() {
       var formatted = city.replace(/^(\w+\/)*/gi, '');
-      return formatted.replace("_", " ");
-    },
+      return formatted.replace('_', ' ');
+    };
 
-
-
     this.generate = function() {
       id = arguments[0];
-      city = arguments[1] != undefined ? arguments[1] : "local";
+      city = arguments[1] != undefined ? arguments[1] : 'local';
 
@@ -96,3 +94,3 @@ var el = document.querySelector(id);
 
-      var ns = "http://www.w3.org/2000/svg";
+      var ns = 'http://www.w3.org/2000/svg';
       var position = height / 2;
@@ -102,16 +100,16 @@
       var time = this.getTime();
-      var color = this.dayOrNight() === "night" ? "#005753" : "#FF760D";
+      var color = this.dayOrNight() === 'night' ? '#005753' : '#FF760D';
 
       /** create clock face doms **/
       var svg = el.firstElementChild;
-      var circle = document.createElementNS(ns, "circle");
-      var dot = document.createElementNS(ns, "circle");
-      var hourHand = document.createElementNS(ns, "line");
-      var minuteHand = document.createElementNS(ns, "line");
-      var secondHand = document.createElementNS(ns, "line");
-      var datetext = document.createElementNS(ns, "text");
+      var circle = document.createElementNS(ns, 'circle');
+      var dot = document.createElementNS(ns, 'circle');
+      var hourHand = document.createElementNS(ns, 'line');
+      var minuteHand = document.createElementNS(ns, 'line');
+      var secondHand = document.createElementNS(ns, 'line');
+      var datetext = document.createElementNS(ns, 'text');
       datetext.appendChild(document.createTextNode(this.dateTicker()));
-      var digitalclock = document.createElementNS(ns, "text");
-      digitalclock.appendChild(document.createTextNode(this.dateTicker("get")));
-      var cityName = document.createElementNS(ns, "text");
+      var digitalclock = document.createElementNS(ns, 'text');
+      digitalclock.appendChild(document.createTextNode(this.dateTicker('get')));
+      var cityName = document.createElementNS(ns, 'text');
       cityName.appendChild(document.createTextNode(this.formatCity()));
@@ -122,5 +120,5 @@
       for (var i = 1; i > 12; i++){
-      	numbers[i] = document.createElementNS(ns, "text");
-      	numbers[i].innerHTML = i;
-      	numbers[i].setAttribute("x", )
+        numbers[i] = document.createElementNS(ns, 'text');
+        numbers[i].innerHTML = i;
+        numbers[i].setAttribute('x', )
       } 
@@ -131,75 +129,75 @@ **/
       //Container
-      svg.setAttribute("height", height);
-      svg.setAttribute("width", width);
+      svg.setAttribute('height', height);
+      svg.setAttribute('width', width);
 
       //Clock face
-      circle.setAttribute("cx", height / 2);
-      circle.setAttribute("cy", height / 2);
-      circle.setAttribute("r", (height / 2 - (height * .035)));
-      circle.setAttribute("fill", "transparent");
-      circle.setAttribute("stroke", color);
-      circle.setAttribute("stroke-width", (height * .035));
+      circle.setAttribute('cx', height / 2);
+      circle.setAttribute('cy', height / 2);
+      circle.setAttribute('r', (height / 2 - (height * .035)));
+      circle.setAttribute('fill', 'transparent');
+      circle.setAttribute('stroke', color);
+      circle.setAttribute('stroke-width', (height * .035));
 
       //Clock center dot
-      dot.setAttribute("cx", height / 2);
-      dot.setAttribute("cy", height / 2);
-      dot.setAttribute("r", (height * .033));
-      dot.setAttribute("fill", color);
+      dot.setAttribute('cx', height / 2);
+      dot.setAttribute('cy', height / 2);
+      dot.setAttribute('r', (height * .033));
+      dot.setAttribute('fill', color);
 
 
       //Hour Hand
-      hourHand.setAttribute("x1", position);
-      hourHand.setAttribute("y1", position);
-      hourHand.setAttribute("x2", position);
-      hourHand.setAttribute("y2", ((height / 2) - (height / 2 * .35)));
-      hourHand.setAttribute("stroke", color);
-      hourHand.setAttribute("stroke-width", (height * .04) + 'px');
-      hourHand.setAttribute("stroke-linecap", 'round');
-      hourHand.setAttribute("stroke-opacity", '.4');
-      hourHand.setAttribute("fill", "transparent");
-      hourHand.setAttribute("transform", "rotate( " + time['hour'] + " " + position + " " + position + ")");
+      hourHand.setAttribute('x1', position);
+      hourHand.setAttribute('y1', position);
+      hourHand.setAttribute('x2', position);
+      hourHand.setAttribute('y2', ((height / 2) - (height / 2 * .35)));
+      hourHand.setAttribute('stroke', color);
+      hourHand.setAttribute('stroke-width', (height * .04) + 'px');
+      hourHand.setAttribute('stroke-linecap', 'round');
+      hourHand.setAttribute('stroke-opacity', '.4');
+      hourHand.setAttribute('fill', 'transparent');
+      hourHand.setAttribute('transform', 'rotate( ' + time['hour'] + ' ' + position + ' ' + position + ')');
 
       //Minute Hand
-      minuteHand.setAttribute("x1", height / 2);
-      minuteHand.setAttribute("y1", height / 2);
-      minuteHand.setAttribute("x2", height / 2);
-      minuteHand.setAttribute("y2", ((height / 2) - (height / 2 * .70)));
-      minuteHand.setAttribute("stroke", color);
-      minuteHand.setAttribute("stroke-width", (height * .03) + 'px');
-      minuteHand.setAttribute("stroke-linecap", 'round');
-      minuteHand.setAttribute("stroke-opacity", '.4');
-      minuteHand.setAttribute("fill", "transparent");
-      minuteHand.setAttribute("transform", "rotate( " + time['minute'] + " " + position + " " + position + ")");
+      minuteHand.setAttribute('x1', height / 2);
+      minuteHand.setAttribute('y1', height / 2);
+      minuteHand.setAttribute('x2', height / 2);
+      minuteHand.setAttribute('y2', ((height / 2) - (height / 2 * .70)));
+      minuteHand.setAttribute('stroke', color);
+      minuteHand.setAttribute('stroke-width', (height * .03) + 'px');
+      minuteHand.setAttribute('stroke-linecap', 'round');
+      minuteHand.setAttribute('stroke-opacity', '.4');
+      minuteHand.setAttribute('fill', 'transparent');
+      minuteHand.setAttribute('transform', 'rotate( ' + time['minute'] + ' ' + position + ' ' + position + ')');
 
       //Second Hand
-      secondHand.setAttribute("x1", height / 2);
-      secondHand.setAttribute("y1", height / 2);
-      secondHand.setAttribute("x2", height / 2);
-      secondHand.setAttribute("y2", ((height / 2) - (height / 2 * .80)));
-      secondHand.setAttribute("stroke", color);
-      secondHand.setAttribute("stroke-width", (height * .01) + 'px');
-      secondHand.setAttribute("stroke-linecap", 'round');
-      secondHand.setAttribute("stroke-opacity", '.4');
-      secondHand.setAttribute("fill", "transparent");
-      secondHand.setAttribute("transform", "rotate( " + time['second'] + " " + position + " " + position + ")");
+      secondHand.setAttribute('x1', height / 2);
+      secondHand.setAttribute('y1', height / 2);
+      secondHand.setAttribute('x2', height / 2);
+      secondHand.setAttribute('y2', ((height / 2) - (height / 2 * .80)));
+      secondHand.setAttribute('stroke', color);
+      secondHand.setAttribute('stroke-width', (height * .01) + 'px');
+      secondHand.setAttribute('stroke-linecap', 'round');
+      secondHand.setAttribute('stroke-opacity', '.4');
+      secondHand.setAttribute('fill', 'transparent');
+      secondHand.setAttribute('transform', 'rotate( ' + time['second'] + ' ' + position + ' ' + position + ')');
 
       //Text Date
-      datetext.setAttribute("x", (width * .12));
-      datetext.setAttribute("y", ((height / 2) + (height * .1)));
-      datetext.setAttribute("font-size", height / 2 * .13);
-      datetext.setAttribute("fill", color);
+      datetext.setAttribute('x', (width * .12));
+      datetext.setAttribute('y', ((height / 2) + (height * .1)));
+      datetext.setAttribute('font-size', height / 2 * .13);
+      datetext.setAttribute('fill', color);
 
       //Digital clock
-      digitalclock.setAttribute("x", (width * .12));
-      digitalclock.setAttribute("y", ((height / 2) + (height * .16)));
-      digitalclock.setAttribute("font-size", height / 2 * .16);
-      digitalclock.setAttribute("fill", color);
-      digitalclock.setAttribute("class", "digital");
+      digitalclock.setAttribute('x', (width * .12));
+      digitalclock.setAttribute('y', ((height / 2) + (height * .16)));
+      digitalclock.setAttribute('font-size', height / 2 * .16);
+      digitalclock.setAttribute('fill', color);
+      digitalclock.setAttribute('class', 'digital');
 
       //City Name
-      cityName.setAttribute("x", (width * .12));
-      cityName.setAttribute("y", ((height / 2) + (height * .2)));
-      cityName.setAttribute("font-size", (height / 2 * .1));
-      cityName.setAttribute("fill", color);
-      cityName.setAttribute("class", "digital");
+      cityName.setAttribute('x', (width * .12));
+      cityName.setAttribute('y', ((height / 2) + (height * .2)));
+      cityName.setAttribute('font-size', (height / 2 * .1));
+      cityName.setAttribute('fill', color);
+      cityName.setAttribute('class', 'digital');
 
@@ -219,3 +217,3 @@
       this._start(this);
-    },
+    };
 
@@ -225,5 +223,5 @@ this.updateHands = function() {
       var div = document.querySelector(id);
-      var cir = div.querySelectorAll("circle");
-      var hands = div.querySelectorAll("line"); //Get SVG child nodes (clock hands) 
-      var text = div.querySelectorAll("text");
+      var cir = div.querySelectorAll('circle');
+      var hands = div.querySelectorAll('line'); //Get SVG child nodes (clock hands) 
+      var text = div.querySelectorAll('text');
       var position = div.clientHeight / 2;
@@ -236,22 +234,22 @@
       //update clock hands angles & text info
-      hands[0].setAttribute("transform", "rotate( " + time['hour'] + " " + position + " " + position + ")");
-      hands[1].setAttribute("transform", "rotate( " + time['minute'] + " " + position + " " + position + ")");
-      hands[2].setAttribute("transform", "rotate( " + time['second'] + " " + position + " " + position + ")");
+      hands[0].setAttribute('transform', 'rotate( ' + time['hour'] + ' ' + position + ' ' + position + ')');
+      hands[1].setAttribute('transform', 'rotate( ' + time['minute'] + ' ' + position + ' ' + position + ')');
+      hands[2].setAttribute('transform', 'rotate( ' + time['second'] + ' ' + position + ' ' + position + ')');
       text[0].innerHTML = this.dateTicker();
-      text[1].innerHTML = this.dateTicker("digitclock");
+      text[1].innerHTML = this.dateTicker('digitclock');
 
-      var color = this.dayOrNight() === "night" ? "#005753" : "#FF760D";
+      var color = this.dayOrNight() === 'night' ? '#005753' : '#FF760D';
       //update hands color
       for (var i = 0; i < hands.length; i++) {
-        hands[i].setAttribute("stroke", color);
+        hands[i].setAttribute('stroke', color);
       }
 
       //update texts color
-      text[0].setAttribute("fill", color);
-      text[1].setAttribute("fill", color);
-      text[2].setAttribute("fill", color);
+      text[0].setAttribute('fill', color);
+      text[1].setAttribute('fill', color);
+      text[2].setAttribute('fill', color);
 
-      cir[0].setAttribute("stroke", color);
-      cir[1].setAttribute("fill", color);
-    },
+      cir[0].setAttribute('stroke', color);
+      cir[1].setAttribute('fill', color);
+    };
 
@@ -262,11 +260,8 @@ this.adjustTime = function(time) {
 
-    },
+    };
 
-    this._start = function(obj) {
-      timer[id] = setInterval(function() {
-        obj.updateHands()
-      }, 1000);
-    }
+    this._start = function() {
+      timer[id] = setInterval(this.updateHands.bind(this), 1000);
+    };
 }
-
 module.exports = Clock;

package.json

 {
   "name": "clocked",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "An analog clock using momentjs, moment-timezone and svg",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -29,3 +29,3 @@ # Clocked
 Todos:
-  - Tests!
+ 	- Tests!
 	- Make clock instances configurable.
@@ -32,0 +32,0 @@ - Make clock color configurable.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11735

increased by0.37%

Worsened metrics

Lines of code

212

decreased by-0.47%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes