angular-clock - npm Package Compare versions

Comparing version 0.2.0 to 0.4.0

angular-clock.js

@@ -9,13 +9,14 @@ (function() {
   angular.module('ds.clock', [])
-    .directive('dsWidgetClock', ['$interval', 'dateFilter',
-      function($interval, dateFilter) {
-        return clock($interval, dateFilter);
+    .directive('dsWidgetClock', ['$interval', '$filter',
+      function($interval, $filter) {
+        return clock($interval, $filter);
       }
     ]);
 
-  function clock($interval, dateFilter) {
+  function clock($interval, $filter) {
     return {
       restrict: 'EA',
       scope: {
-        gmtOffset: '=gmtOffset'
+        gmtOffset: '=gmtOffset',
+        digitalFormat: '=digitalFormat'
       },
@@ -28,9 +29,11 @@ template: '<div class="widget-clock" ng-class="theme" ng-if="date"><div class="digital" ng-if="digital"><span class="time"><span class="hours">{{digital}}</span></span></div><div class="analog" ng-if="analog"><div class="square"><svg viewBox="0 0 100 100"><g transform="translate(50,50)"><circle class="clock-face" r="48" /><line ng-repeat="minor in minors track by $index" class="minor" y1="42" y2="45" ng-attr-transform="rotate({{360 * $index / minors.length}})" /><line ng-repeat="major in majors track by $index" class="major" y1="35" y2="46" ng-attr-transform="rotate({{360 * $index / majors.length}})" /><line class="hour" y1="2" y2="-20" ng-attr-transform="rotate({{30 * date.hrs + date.mins / 2}})" /><line class="minute" y1="4" y2="-30" ng-attr-transform="rotate({{6 * date.mins + date.secs / 10}})" /><g ng-attr-transform="rotate({{6 * date.secs}})"><line class="second" y1="10" y2="-38" /><line class="second-counterweight" y1="10" y2="2" /></g></g></svg></div></div><div ng-if="gmtInfo" class="gmt-info">{{gmtInfo}}</div></div>',
         var gmtOffset = scope.gmtOffset;
+        var digitalFormat = scope.digitalFormat !== undefined ? scope.digitalFormat : 'HH:mm:ss';
         //o.gmtOffset = (gmtOffset !== undefined && gmtOffset !== null) ? parseFloat(gmtOffset) : false;
-        o.showSecs = attrs.hideSecs !== undefined ? false : true;
-        o.showAmPm = attrs.showAmPm !== undefined ? true : false;
+        //o.showSecs = attrs.hideSecs !== undefined ? false : true;
+        //o.showAmPm = attrs.showAmPm !== undefined ? true : false;
         o.showDigital = attrs.showDigital !== undefined ? true : false;
         o.showAnalog = attrs.showAnalog !== undefined ? true : false;
         o.showGmtInfo = attrs.showGmtInfo !== undefined ? true : false;
-        scope.theme = attrs.theme !== undefined ? attrs.theme : "light";
+        o.startTime = parseInt(attrs.startTime, 10); // ms
+        scope.theme = attrs.theme !== undefined ? attrs.theme : 'light';
         if (!o.showDigital && !o.showAnalog) {
@@ -50,6 +53,9 @@ o.showAnalog = true;
         var tick = function() {
+          if (!isNaN(o.startTime)) {
+            o.startTime = o.startTime + 1000;
+          }
           date = getDate(o);
           scope.date = date;
           if (o.showDigital) {
-            scope.digital = timeText(date, o);
+            scope.digital = timeText(date, digitalFormat, gmtOffset, $filter);
           }
@@ -68,2 +74,5 @@ };
         });
+        /*scope.$watch('digitalFormat', function(value) {
+          digitalFormat = value;
+        });*/
         // listen on DOM destroy (removal) event, and cancel the next UI update
@@ -119,3 +128,3 @@ // to prevent updating time after the DOM element was removed.
   function getDate(o) {
-    var now = new Date();
+    var now = (!isNaN(o.startTime)) ? new Date(o.startTime) : new Date();
     if (o.gmtOffset !== null && o.gmtOffset !== false) {
@@ -133,3 +142,4 @@ // Use GMT + gmtOffset
         mins: offsetNow.getMinutes(),
-        secs: offsetNow.getSeconds()
+        secs: offsetNow.getSeconds(),
+        date: offsetNow
       };
@@ -141,3 +151,4 @@ } else {
         mins: now.getMinutes(),
-        secs: now.getSeconds()
+        secs: now.getSeconds(),
+        date: now
       };
@@ -147,10 +158,11 @@ }
 
-  function timeText(d, o) {
-    return '' +
+  function timeText(d, format, timezone, $filter) {
+    return $filter('date')(d.date, format, timezone);
+    /*return '' +
       (o.showAmPm ? ((d.hrs % 12) === 0 ? 12 : (d.hrs % 12)) : d.hrs) + ':' +
       lpad(d.mins) +
       (o.showSecs ? ':' + lpad(d.secs) : '') +
-      (o.showAmPm ? (d.hrs < 12 ? ' AM' : ' PM') : '');
+      (o.showAmPm ? (d.hrs < 12 ? ' AM' : ' PM') : '');*/
   }
 
 })();

bower.json

 {
-  "name": "angular-clock-face",
-  "version": "0.2.0",
+  "name": "angular-ui-clock",
+  "version": "0.4.0",
   "main": [
@@ -5,0 +5,0 @@ "./dist/angular-clock.js",

dist/angular-clock.js

@@ -9,13 +9,14 @@ (function() {
   angular.module('ds.clock', [])
-    .directive('dsWidgetClock', ['$interval', 'dateFilter',
-      function($interval, dateFilter) {
-        return clock($interval, dateFilter);
+    .directive('dsWidgetClock', ['$interval', '$filter',
+      function($interval, $filter) {
+        return clock($interval, $filter);
       }
     ]);
 
-  function clock($interval, dateFilter) {
+  function clock($interval, $filter) {
     return {
       restrict: 'EA',
       scope: {
-        gmtOffset: '=gmtOffset'
+        gmtOffset: '=gmtOffset',
+        digitalFormat: '=digitalFormat'
       },
@@ -28,9 +29,11 @@ template: '<div class="widget-clock" ng-class="theme" ng-if="date"><div class="digital" ng-if="digital"><span class="time"><span class="hours">{{digital}}</span></span></div><div class="analog" ng-if="analog"><div class="square"><svg viewBox="0 0 100 100"><g transform="translate(50,50)"><circle class="clock-face" r="48" /><line ng-repeat="minor in minors track by $index" class="minor" y1="42" y2="45" ng-attr-transform="rotate({{360 * $index / minors.length}})" /><line ng-repeat="major in majors track by $index" class="major" y1="35" y2="46" ng-attr-transform="rotate({{360 * $index / majors.length}})" /><line class="hour" y1="2" y2="-20" ng-attr-transform="rotate({{30 * date.hrs + date.mins / 2}})" /><line class="minute" y1="4" y2="-30" ng-attr-transform="rotate({{6 * date.mins + date.secs / 10}})" /><g ng-attr-transform="rotate({{6 * date.secs}})"><line class="second" y1="10" y2="-38" /><line class="second-counterweight" y1="10" y2="2" /></g></g></svg></div></div><div ng-if="gmtInfo" class="gmt-info">{{gmtInfo}}</div></div>',
         var gmtOffset = scope.gmtOffset;
+        var digitalFormat = scope.digitalFormat !== undefined ? scope.digitalFormat : 'HH:mm:ss';
         //o.gmtOffset = (gmtOffset !== undefined && gmtOffset !== null) ? parseFloat(gmtOffset) : false;
-        o.showSecs = attrs.hideSecs !== undefined ? false : true;
-        o.showAmPm = attrs.showAmPm !== undefined ? true : false;
+        //o.showSecs = attrs.hideSecs !== undefined ? false : true;
+        //o.showAmPm = attrs.showAmPm !== undefined ? true : false;
         o.showDigital = attrs.showDigital !== undefined ? true : false;
         o.showAnalog = attrs.showAnalog !== undefined ? true : false;
         o.showGmtInfo = attrs.showGmtInfo !== undefined ? true : false;
-        scope.theme = attrs.theme !== undefined ? attrs.theme : "light";
+        o.startTime = parseInt(attrs.startTime, 10); // ms
+        scope.theme = attrs.theme !== undefined ? attrs.theme : 'light';
         if (!o.showDigital && !o.showAnalog) {
@@ -50,6 +53,9 @@ o.showAnalog = true;
         var tick = function() {
+          if (!isNaN(o.startTime)) {
+            o.startTime = o.startTime + 1000;
+          }
           date = getDate(o);
           scope.date = date;
           if (o.showDigital) {
-            scope.digital = timeText(date, o);
+            scope.digital = timeText(date, digitalFormat, gmtOffset, $filter);
           }
@@ -68,2 +74,5 @@ };
         });
+        /*scope.$watch('digitalFormat', function(value) {
+          digitalFormat = value;
+        });*/
         // listen on DOM destroy (removal) event, and cancel the next UI update
@@ -119,3 +128,3 @@ // to prevent updating time after the DOM element was removed.
   function getDate(o) {
-    var now = new Date();
+    var now = (!isNaN(o.startTime)) ? new Date(o.startTime) : new Date();
     if (o.gmtOffset !== null && o.gmtOffset !== false) {
@@ -133,3 +142,4 @@ // Use GMT + gmtOffset
         mins: offsetNow.getMinutes(),
-        secs: offsetNow.getSeconds()
+        secs: offsetNow.getSeconds(),
+        date: offsetNow
       };
@@ -141,3 +151,4 @@ } else {
         mins: now.getMinutes(),
-        secs: now.getSeconds()
+        secs: now.getSeconds(),
+        date: now
       };
@@ -147,10 +158,11 @@ }
 
-  function timeText(d, o) {
-    return '' +
+  function timeText(d, format, timezone, $filter) {
+    return $filter('date')(d.date, format, timezone);
+    /*return '' +
       (o.showAmPm ? ((d.hrs % 12) === 0 ? 12 : (d.hrs % 12)) : d.hrs) + ':' +
       lpad(d.mins) +
       (o.showSecs ? ':' + lpad(d.secs) : '') +
-      (o.showAmPm ? (d.hrs < 12 ? ' AM' : ' PM') : '');
+      (o.showAmPm ? (d.hrs < 12 ? ' AM' : ' PM') : '');*/
   }
 
 })();

dist/angular-clock.min.js

@@ -1,2 +0,2 @@
-!function(){"use strict";function t(t){return{restrict:"EA",scope:{gmtOffset:"=gmtOffset"},template:'<div class="widget-clock" ng-class="theme" ng-if="date"><div class="digital" ng-if="digital"><span class="time"><span class="hours">{{digital}}</span></span></div><div class="analog" ng-if="analog"><div class="square"><svg viewBox="0 0 100 100"><g transform="translate(50,50)"><circle class="clock-face" r="48" /><line ng-repeat="minor in minors track by $index" class="minor" y1="42" y2="45" ng-attr-transform="rotate({{360 * $index / minors.length}})" /><line ng-repeat="major in majors track by $index" class="major" y1="35" y2="46" ng-attr-transform="rotate({{360 * $index / majors.length}})" /><line class="hour" y1="2" y2="-20" ng-attr-transform="rotate({{30 * date.hrs + date.mins / 2}})" /><line class="minute" y1="4" y2="-30" ng-attr-transform="rotate({{6 * date.mins + date.secs / 10}})" /><g ng-attr-transform="rotate({{6 * date.secs}})"><line class="second" y1="10" y2="-38" /><line class="second-counterweight" y1="10" y2="2" /></g></g></svg></div></div><div ng-if="gmtInfo" class="gmt-info">{{gmtInfo}}</div></div>',link:function(e,i,r){var g,l={},c=e.gmtOffset;l.showSecs=void 0!==r.hideSecs?!1:!0,l.showAmPm=void 0!==r.showAmPm?!0:!1,l.showDigital=void 0!==r.showDigital?!0:!1,l.showAnalog=void 0!==r.showAnalog?!0:!1,l.showGmtInfo=void 0!==r.showGmtInfo?!0:!1,e.theme=void 0!==r.theme?r.theme:"light",l.showDigital||l.showAnalog||(l.showAnalog=!0,l.showDigital=!0),e.gmtInfo=!1,e.date=a(l),e.digital=l.showDigital?"Loading..":!1,e.analog=l.showAnalog,e.majors=new Array(12),e.minors=new Array(60);var f=null,m=function(){f=a(l),e.date=f,l.showDigital&&(e.digital=o(f,l))};g=t(m,1e3),e.$watch("gmtOffset",function(t){c=t,l.gmtOffset=void 0!==c&&null!==c?s(c):!1,l.showGmtInfo&&l.gmtOffset!==!1&&(e.gmtInfo=n(l.gmtOffset)),m()}),i.on("$destroy",function(){t.cancel(g),g=null})}}}function s(t){t=parseFloat(t);var s=t>0?Math.floor(t):Math.ceil(t),n=t%1/.6;return s+n}function n(t){var s=t>0?Math.floor(t):Math.ceil(t),n=Math.round((t>0?t:-1*t)%1*60);return"GMT"+(0===t?"":(t>0?" +":" ")+e(s)+"."+i(n).substring(0,2))}function e(t){return 0>t?(t>-10?"-0":"-")+-1*t:(10>t?"0":"")+t}function i(t){return t+(10>t?"0":"")}function a(t){var s=new Date;if(null!==t.gmtOffset&&t.gmtOffset!==!1){var n=s.getTime()+6e4*s.getTimezoneOffset(),e=new Date(n+36e5*t.gmtOffset);return{hrs:e.getHours(),mins:e.getMinutes(),secs:e.getSeconds()}}return{hrs:s.getHours(),mins:s.getMinutes(),secs:s.getSeconds()}}function o(t,s){return""+(s.showAmPm?t.hrs%12===0?12:t.hrs%12:t.hrs)+":"+e(t.mins)+(s.showSecs?":"+e(t.secs):"")+(s.showAmPm?t.hrs<12?" AM":" PM":"")}angular.module("ds.clock",[]).directive("dsWidgetClock",["$interval","dateFilter",function(s,n){return t(s,n)}])}();
+!function(){"use strict";function t(t,n){return{restrict:"EA",scope:{gmtOffset:"=gmtOffset",digitalFormat:"=digitalFormat"},template:'<div class="widget-clock" ng-class="theme" ng-if="date"><div class="digital" ng-if="digital"><span class="time"><span class="hours">{{digital}}</span></span></div><div class="analog" ng-if="analog"><div class="square"><svg viewBox="0 0 100 100"><g transform="translate(50,50)"><circle class="clock-face" r="48" /><line ng-repeat="minor in minors track by $index" class="minor" y1="42" y2="45" ng-attr-transform="rotate({{360 * $index / minors.length}})" /><line ng-repeat="major in majors track by $index" class="major" y1="35" y2="46" ng-attr-transform="rotate({{360 * $index / majors.length}})" /><line class="hour" y1="2" y2="-20" ng-attr-transform="rotate({{30 * date.hrs + date.mins / 2}})" /><line class="minute" y1="4" y2="-30" ng-attr-transform="rotate({{6 * date.mins + date.secs / 10}})" /><g ng-attr-transform="rotate({{6 * date.secs}})"><line class="second" y1="10" y2="-38" /><line class="second-counterweight" y1="10" y2="2" /></g></g></svg></div></div><div ng-if="gmtInfo" class="gmt-info">{{gmtInfo}}</div></div>',link:function(s,o,g){var l,m={},c=s.gmtOffset,f=void 0!==s.digitalFormat?s.digitalFormat:"HH:mm:ss";m.showDigital=void 0!==g.showDigital?!0:!1,m.showAnalog=void 0!==g.showAnalog?!0:!1,m.showGmtInfo=void 0!==g.showGmtInfo?!0:!1,m.startTime=parseInt(g.startTime,10),s.theme=void 0!==g.theme?g.theme:"light",m.showDigital||m.showAnalog||(m.showAnalog=!0,m.showDigital=!0),s.gmtInfo=!1,s.date=i(m),s.digital=m.showDigital?"Loading..":!1,s.analog=m.showAnalog,s.majors=new Array(12),s.minors=new Array(60);var d=null,u=function(){isNaN(m.startTime)||(m.startTime=m.startTime+1e3),d=i(m),s.date=d,m.showDigital&&(s.digital=r(d,f,c,n))};l=t(u,1e3),s.$watch("gmtOffset",function(t){c=t,m.gmtOffset=void 0!==c&&null!==c?e(c):!1,m.showGmtInfo&&m.gmtOffset!==!1&&(s.gmtInfo=a(m.gmtOffset)),u()}),o.on("$destroy",function(){t.cancel(l),l=null})}}}function e(t){t=parseFloat(t);var e=t>0?Math.floor(t):Math.ceil(t),a=t%1/.6;return e+a}function a(t){var e=t>0?Math.floor(t):Math.ceil(t),a=Math.round((t>0?t:-1*t)%1*60);return"GMT"+(0===t?"":(t>0?" +":" ")+n(e)+"."+s(a).substring(0,2))}function n(t){return 0>t?(t>-10?"-0":"-")+-1*t:(10>t?"0":"")+t}function s(t){return t+(10>t?"0":"")}function i(t){var e=isNaN(t.startTime)?new Date:new Date(t.startTime);if(null!==t.gmtOffset&&t.gmtOffset!==!1){var a=e.getTime()+6e4*e.getTimezoneOffset(),n=new Date(a+36e5*t.gmtOffset);return{hrs:n.getHours(),mins:n.getMinutes(),secs:n.getSeconds(),date:n}}return{hrs:e.getHours(),mins:e.getMinutes(),secs:e.getSeconds(),date:e}}function r(t,e,a,n){return n("date")(t.date,e,a)}angular.module("ds.clock",[]).directive("dsWidgetClock",["$interval","$filter",function(e,a){return t(e,a)}])}();
 //# sourceMappingURL=angular-clock.min.js.map

examples/app.js

@@ -14,3 +14,3 @@ (function() {
     function($scope) {
-      
+
     }
@@ -21,2 +21,3 @@ ]);
         $scope.gmtValue = 5.45;
+        $scope.startTimeValue = 1430990693334;
     }
@@ -23,0 +24,0 @@ ]);

package.json

 {
   "name": "angular-clock",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "An angular.js clock widget",
@@ -5,0 +5,0 @@ "main": "angular-clock.js",

README.md

@@ -44,2 +44,8 @@ # Angular Clock Widget
 ```
+
+If you need the default digital clock font ```Syncopate```, include this. Else check styling section to use your own font
+```html
+<link href='//fonts.googleapis.com/css?family=Syncopate:400,700' rel='stylesheet' type='text/css'>
+```
+
 ### Options
@@ -49,4 +55,4 @@
 
-1.  `show-secs` : shows second in digital clock, (default: `true`)
-2.  `show-am-pm` : shows am/pm in digital clock, (default: `false`)
+1.  `start-time` : init clock with specific time in milliseconds, (default: `undefined`)
+2.  `digital-format` : digital clock format in [angular date filter format](https://docs.angularjs.org/api/ng/filter/date) (default: `'HH-mm-ss'`). Pass as string enclosed in single quate
 3.  `gmt-offset` : shows time for the given [GMT offset](http://en.wikipedia.org/wiki/List_of_UTC_time_offsets) in clock, (default: `false`, shows local time) example: India -> 5.30, Singapore -> 8 , venezula -> -4.30, Nepal -> 5.45
@@ -69,8 +75,8 @@ 4.  `show-digital`: shows digital clock, (default: `true` if both show-analog &show-digital are not set)
 ```html
-<ds-widget-clock theme="dark" show-secs="true" show-am-pm></ds-widget-clock>
+<ds-widget-clock theme="dark" show-secs="true" digital-format="'hh:mm:ss a'"></ds-widget-clock>
 ```
 
-## Reactive
+## Reactive & Responsive
 
-angular clock widget is fully responsive, resize browser to see it in action
+angular clock widget is reactive and fully responsive
 
@@ -89,5 +95,7 @@
 1. Fork the repo
-1. Make your changes
-1. Run tests: `npm test`
-1. Submit pull request
+2. Make your changes
+3. Write unit tests under test directory
+4. Update examples under examples directory
+5. Run tests: `npm test`, `gulp test`
+6. Submit pull request
 
@@ -94,0 +102,0 @@ ## Contributors

test/test.unit.js

@@ -69,6 +69,30 @@ /*jshint mocha:true*/
     });
-  });
 
+    describe('clock set start time', function() {
+      it('set a intial time and clock is base on this time to tick.', function() {
+        var date = new Date();
+        var ms = date.getTime();
+        var markup = '<div><ds-widget-clock start-time="' +
+          ms + '" data-show-gmt-info></ds-widget-clock></div>';
+        var element = $compile(markup)(scope);
 
+        scope.$digest();
+        expect(element.html()).to.match(/<span class="hours[^>]+>([^<]+)<\/span>/);
+      });
+    });
 
+    describe('digital clock format', function() {
+      it('replaces the element with the appropriate content for digital clock in given format', function() {
+        var format = 'dd-MMM-yyyy hh:mm:ss a';
+        var markup = '<div>' +
+          '<ds-widget-clock show-digital digital-format="\'' + format + '\'"></ds-widget-clock></div>';
+
+        var element = $compile(markup)(scope);
+        scope.$digest();
+
+        expect(element.html()).to.match(/<span class="hours[^>]+>\d{2}[-][A-Z][a-z]{2}[-]\d{4}[ ]\d{2}[:]\d{2}[:]\d{2}[ ]([^<]+)<\/span>/);
+      });
+    });
+  });
+
 });
@@ -75,0 +99,0 @@

No alert changes

Improved metrics

Total package byte prevSize

241142

increased by3.41%

Lines of code

6558

increased by0.71%

Number of lines in readme file

114

increased by7.55%

No dependency changes