clocked - npm Package Compare versions

Comparing version 0.3.1 to 1.0.0

index.js

@@ -16,242 +16,172 @@ /**
 **/
-var moment = require('moment-timezone');
+var moment = require('moment-timezone'),
+  extend = require('util')._extend,
+  format = require('util').format,
+  components = require('./lib/components'),
+  parse = require('angular-expressions').compile,
+  defaults = {
+    autoStart: true,
+    colors: {
+      'day': '#FF760D',
+      'night': '#005753'
+    }
+  };
 
-function Clock() {
+function Clock(el, options) {
+  var ns = 'http://www.w3.org/2000/svg';
 
-  var id,
-    city,
-    zone,
-    time_adj = [],
-    timer = {};
+  if (!el) {
+    throw new Error('No element given when instantiating clocked.');
+  }
 
-    this.getTime = function() {
-      var timeDegrees = {};
+  Object.defineProperties(this, {
+    el: {
+      value: el instanceof Node ? el : document.querySelector(el),
+      writable: true
+    },
+    options: {
+      value: options && extend(defaults, options) || defaults
+    },
+    svgNs: {
+      value: ns
+    },
+    reqFrame: {
+      writable: true
+    },
+    svg: {
+      enumerable: true,
+      configurable: true,
+      value: document.createElementNS(ns, 'svg'),
+      writable: true
+    }
+  });
 
-      if (city === 'local') {
-        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) {
+  this.generate();
 
-      } else {
-        zone = city;
-        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;
-      }
+  if (this.options.autoStart) {
+    this.start();
+  }
+}
 
-      return timeDegrees;
-    };
+Clock.prototype.getTime = function() {
+  var city = this.options.city,
+    fn = city && moment.tz || moment;
+  return {
+    hour: (parseInt(fn(city).format('h'), 10) * 30) + (parseInt(fn(city).format('mm'), 10) * 0.5),
+    minute: parseInt(fn(city).format('mm'), 10) * 6,
+    second: parseInt(fn(city).format('ss'), 10) * 6
+  };
+};
 
 
-    this.dayOrNight = function() {
-      var time;
+Clock.prototype.dayOrNight = function() {
+  var city = this.options.city,
+    fn = city && moment.tz || moment;
+  return parseInt(fn(city).format('HH'), 10) > 17 || parseInt(fn(city).format('HH'), 10) < 6 ? 'night' : 'day';
+};
 
-      if (city === 'local') {
-        time = parseInt(moment().format('HH'), 10) > 17 || parseInt(moment().format('HH'), 10) < 6 ? 'night' : 'day';
-      } else {
-        time = parseInt(moment.tz(zone).format('HH'), 10) > 17 || parseInt(moment.tz(zone).format('HH'), 10) < 6 ? 'night' : 'day';
-      }
+Clock.prototype.dateTicker = function() {
+  var city = this.options.city,
+    format = arguments.length ? 'HH:mm' : 'ddd D',
+    fn = city && moment.tz || moment;
+  return fn(city).format(format);
+};
 
-      return time;
-    };
+Clock.prototype.formatCity = function() {
+  var city = this.options.city || 'local',
+    formatted = city.replace(/^(\w+\/)*/gi, '');
+  return formatted.replace('_', ' ');
+};
 
-    this.dateTicker = function() {
-      var result;
-      if (arguments[0] === undefined) {
-        if (zone) {
-          result = moment.tz(zone).format('ddd D');
-        } else {
-          result = moment().format('ddd D');
-        }
-      } else { // digital clock
-        if (zone) {
-          result = moment.tz(zone).format('HH:mm');
-        } else {
+Clock.prototype.generate = function() {
+  var el = this.el,
+    height = el.clientHeight,
+    ns = this.svgNs,
+    position = height / 2,
+    /** Get Clock hands angles **/
+    time = this.getTime(),
+    colors = this.options.colors,
+    color = colors[this.dayOrNight()],
+    svg = this.svg,
+    compMap = {
+      circle: document.createElementNS(ns, 'circle'),
+      city: document.createElementNS(ns, 'text'),
+      date: document.createElementNS(ns, 'text'),
+      dot: document.createElementNS(ns, 'circle'),
+      hour: document.createElementNS(ns, 'line'),
+      minute: document.createElementNS(ns, 'line'),
+      second: document.createElementNS(ns, 'line'),
+      svg: svg,
+      time: document.createElementNS(ns, 'text')
+    },
+    context = {
+      fill: 'transparent',
+      height: height,
+      width: height,
+      color: color,
+      format: format,
+      position: position,
+      time: time
+    },
+    component, attr;
 
-          result = moment().format('HH:mm');
-        }
-      }
 
-      return result;
-    };
+  compMap.date.appendChild(document.createTextNode(this.dateTicker()));
+  compMap.time.appendChild(document.createTextNode(this.dateTicker(true)));
+  compMap.city.appendChild(document.createTextNode(this.formatCity()));
 
-    this.formatCity = function() {
-      var formatted = city.replace(/^(\w+\/)*/gi, '');
-      return formatted.replace('_', ' ');
-    };
+  for (component in components) {
+    for(attr in components[component]) {
+      compMap[component].setAttribute(attr, parse(components[component][attr])(context));
+    }
+  }
+  
+  delete compMap.svg;
 
-    this.generate = function() {
-      id = arguments[0];
-      city = arguments[1] != undefined ? arguments[1] : 'local';
+  for (component in compMap) {
+    svg.appendChild(compMap[component]);
+  }
+  el.appendChild(svg);
+};
 
-      var el = document.querySelector(id);
-      var height = el.clientHeight;
-      var width = height;
+Clock.prototype.tick = function() {
+  var div = this.el,
+    cir = div.querySelectorAll('circle'),
+    hands = div.querySelectorAll('line'), //Get SVG child nodes (clock hands) 
+    text = div.querySelectorAll('text'),
+    position = div.clientHeight / 2,
+    time = this.getTime(),
+    hour = time.hour,
+    minute = time.minute,
+    second = time.second,
+    fmt = 'rotate(%s %s %s)';
 
-      var ns = 'http://www.w3.org/2000/svg';
-      var position = height / 2;
+  [hour, minute, second].forEach(function(time, idx) {
+    hands[idx].setAttribute('transform', format(fmt, time, position, position));
+  });
 
-      /** Get Clock hands angles **/
-      var time = this.getTime();
-      var color = this.dayOrNight() === 'night' ? '#005753' : '#FF760D';
+  text[1].innerHTML = this.dateTicker();
+  text[2].innerHTML = this.dateTicker(true);
 
-      /** 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');
-      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');
-      cityName.appendChild(document.createTextNode(this.formatCity()));
+  var colors = this.options.colors,
+    color = colors[this.dayOrNight()];
 
-      /**
-      var numbers = [];
-      for (var i = 1; i > 12; i++){
-        numbers[i] = document.createElementNS(ns, 'text');
-        numbers[i].innerHTML = i;
-        numbers[i].setAttribute('x', )
-      } 
-      **/
+  Array.prototype.forEach.call(hands, function(hand) {
+    hand.setAttribute('stroke', color);
+  });
 
-      /** Set the Attributes **/
-      //Container
-      svg.setAttribute('height', height);
-      svg.setAttribute('width', width);
+  Array.prototype.forEach.call(text, function(txt) {
+    txt.setAttribute('fill', color);
+  });
 
-      //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));
+  cir[0].setAttribute('stroke', color);
+  cir[1].setAttribute('fill', color);
 
-      //Clock center dot
-      dot.setAttribute('cx', height / 2);
-      dot.setAttribute('cy', height / 2);
-      dot.setAttribute('r', (height * .033));
-      dot.setAttribute('fill', color);
+  this.reqFrame = window.requestAnimationFrame(this.tick.bind(this));
+};
 
+Clock.prototype.start = function() {
+  this.reqFrame = window.requestAnimationFrame(this.tick.bind(this));
+};
 
-      //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 + ')');
-
-      //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 + ')');
-
-      //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 + ')');
-
-      //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);
-
-      //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');
-
-      //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');
-
-
-      /** Append the clock to the div **/
-      svg.appendChild(circle);
-      svg.appendChild(datetext);
-      svg.appendChild(digitalclock);
-      svg.appendChild(cityName);
-      svg.appendChild(hourHand);
-      svg.appendChild(minuteHand);
-      svg.appendChild(secondHand);
-      svg.appendChild(dot);
-      el.appendChild(svg);
-
-      this._start(this);
-    };
-
-    this.updateHands = function() {
-      //console.log(id);
-      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 position = div.clientHeight / 2;
-
-      //Get the angles 
-      var time = this.getTime();
-
-      //console.log(time['second']);
-      //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 + ')');
-      text[0].innerHTML = this.dateTicker();
-      text[1].innerHTML = this.dateTicker('digitclock');
-
-      var color = this.dayOrNight() === 'night' ? '#005753' : '#FF760D';
-      //update hands color
-      for (var i = 0; i < hands.length; i++) {
-        hands[i].setAttribute('stroke', color);
-      }
-
-      //update texts 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);
-    };
-
-    this.adjustTime = function(time) {
-      time_adj['hr'] = time[0];
-      time_adj['min'] = time[1];
-
-    };
-
-    this._start = function() {
-      timer[id] = setInterval(this.updateHands.bind(this), 1000);
-    };
-}
 module.exports = Clock;

package.json

 {
   "name": "clocked",
-  "version": "0.3.1",
+  "version": "1.0.0",
   "description": "An analog clock using momentjs, moment-timezone and svg",
@@ -27,3 +27,4 @@ "main": "index.js",
   "dependencies": {
-    "moment-timezone": "^0.4.1"
+    "moment-timezone": "^0.4.1",
+    "angular-expressions": "^0.3.0"
   },
@@ -30,0 +31,0 @@ "devDependencies": {

README.md

@@ -6,29 +6,56 @@ # Clocked
 
-	Created By: Anthony Datu
-	Updated By: webmech
-	Purpose: Modular Analog Clock
+#### Originally Created by: Anthony Datu
 
-	Dependencies:
-		1) moment.js
-		2) moment-timezone.js
+#### Revived by: webmech
 
-	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 clock.generate("#clock","Asia/Manila") <--- Zone is optional, if no city 
-		time will default to Local time. Zone follows the moment-timezone.js zone name convention.
-		5) Global timer[] key/value pair array holds the timer id for each clock. Key is the ID of element.
-	           If you want to stop one clock, use clearInterval(timer['#element_id']);
-	           
-	Clock Description:
-		Between 6 am - 5pm, clock color is orange, otherwise gray. The color follows the sun. 
+###### Purpose: Modular Analog Clock For use in browserify based apps
+
+##### Dependencies:
+- moment.js
+- moment-timezone.js
+- angular-expressions
+
 		
+##### Installation
+```
+npm install --save clocked
+```
+
+###### Basic Usage
+```
+var Clock = require('clocked'),
+	el = document.createElement('div');
+
+var clock = new Clock(el, {
+	autoStart: false
+});
+
+clock.start();
+```
+
+###### Parameters:
+- Element Can be a valid selector a htmlElement (any instance of Node)
+- Options:
+	- autoStart [default true] - Automaticall start when instantiated
+
+###### Clock Default Colors:
+Between 6 am - 5pm, clock color is orange, otherwise gray. The color follows the sun. The colors are overridable
+
+```
+ new Clock('#clock', {
+   colors: {
+   	'day': 'red',
+   	'night': 'black'
+   }
+ });
+```
+		
 [Example](http://codepen.io/anon/pen/YwPOXO)
 
 Todos:
- 	- Tests!
-	- Make clock instances configurable.
-	- Make clock color configurable.
-	- Instantiate with element.
-	- Generate svg element within constructor.
+
+- Tests!
+- Make clock instances configurable.
+- Make clock color configurable.
+- Instantiate with element.
+- Generate svg element within constructor.

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

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

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

Number of package files

18

increased by157.14%

Lines of code

262

increased by23.58%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

61

increased by79.41%

Worsened metrics

Total package byte prevSize

10560

decreased by-10.01%

Dependency count

2

increased by100%

Dependency changes

• + Addedangular-expressions@^0.3.0

• + Addedangular-expressions@0.3.0(transitive)