Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
angular-clock
Advanced tools
angular-clock - npm Package Compare versions
Comparing version 0.1.0 to 0.2.0
@@ -28,3 +28,3 @@ (function() { | ||
| //o.gmtOffset = (gmtOffset !== undefined && gmtOffset !== null) ? parseFloat(gmtOffset) : false; | ||
| o.showSecs = attrs.showSecs !== undefined ? attrs.showSecs : true; | ||
| o.showSecs = attrs.hideSecs !== undefined ? false : true; | ||
| o.showAmPm = attrs.showAmPm !== undefined ? true : false; | ||
@@ -31,0 +31,0 @@ o.showDigital = attrs.showDigital !== undefined ? true : false; |
| { | ||
| "name": "angular-clock", | ||
| "version": "0.1.0", | ||
| "name": "angular-clock-face", | ||
| "version": "0.2.0", | ||
| "main": [ | ||
| "./dist/angular-clock.js", | ||
| "./dist/angular-clock.css" | ||
| "./dist/angular-clock.js", | ||
| "./dist/angular-clock.css" | ||
| ], | ||
| "authors": [ | ||
| "Deepu K Sasidharan <d4udts@gmail.com>" | ||
| "Deepu K Sasidharan <d4udts@gmail.com>" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git://github.com/deepu105/angular-clock.git" | ||
| "url": "git://github.com/deepu105/angular-clock.git" | ||
| }, | ||
@@ -15,0 +15,0 @@ "description": "An angular.js directive for clock svg widgets - reactive, responsive, beautiful.", |
@@ -5,11 +5,2 @@ (function() { | ||
| /* <ds-widget-clock data-gmt-offset="0"></ds-widget-clock> */ | ||
| /* var defaults = { | ||
| showSecs: false, | ||
| showAmPm: false, | ||
| gmtOffset: false, | ||
| showDigital: true, | ||
| showAnalog: true, | ||
| showGmtInfo: false, | ||
| theme:"light" | ||
| };*/ | ||
| var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; | ||
@@ -38,3 +29,3 @@ var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; | ||
| //o.gmtOffset = (gmtOffset !== undefined && gmtOffset !== null) ? parseFloat(gmtOffset) : false; | ||
| o.showSecs = attrs.showSecs !== undefined ? attrs.showSecs : true; | ||
| o.showSecs = attrs.hideSecs !== undefined ? false : true; | ||
| o.showAmPm = attrs.showAmPm !== undefined ? true : false; | ||
@@ -41,0 +32,0 @@ o.showDigital = attrs.showDigital !== undefined ? true : false; |
@@ -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,o,r){var g,l={},c=e.gmtOffset;l.showSecs=void 0!==r.showSecs?r.showSecs:!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=i(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()}),o.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)+"."+o(n).substring(0,2))}function e(t){return 0>t?(t>-10?"-0":"-")+-1*t:(10>t?"0":"")+t}function o(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 i(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){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)}])}(); | ||
| //# sourceMappingURL=angular-clock.min.js.map |
| { | ||
| "name": "angular-clock", | ||
| "version": "0.1.0", | ||
| "version": "0.2.0", | ||
| "description": "An angular.js clock widget", | ||
@@ -5,0 +5,0 @@ "main": "angular-clock.js", |
110
README.md
@@ -1,12 +0,21 @@ | ||
| # angular-clock | ||
| # Angular Clock Widget | ||
| Beautiful, reactive, responsive Clock widgets for Angular.JS using SVG. | ||
| Responsive, beautiful clocks for [AngularJS](http://angularjs.org) built using [SVG](https://developer.mozilla.org/en/docs/Web/SVG) | ||
| [Demo](http://deepu105.github.io/angular-clock/) | ||
| # Installation | ||
| # Getting started | ||
| bower install angular-clock --save | ||
| or copy the files from `dist/`. Then add the sources to your code (adjust paths as needed) after | ||
| ### Dependencies | ||
| This repository contains **native AngularJS directives** to render a clock face. The **only required dependencies** are: | ||
| * [AngularJS](http://angularjs.org) (tested with 1.3.14 although it probably works with older versions) | ||
| ### Installation | ||
| bower install angular-ui-clock --save | ||
| Alternatively files can be downloaded [downloaded from Github](https://github.com/deepu105/angular-clock). | ||
| and copy the files from `dist/`. Then add the sources to your code (adjust paths as needed) after | ||
| adding the dependencies for Angular first: | ||
@@ -19,22 +28,31 @@ | ||
| # Utilisation | ||
| Whichever method you choose the good news is that the overall size is very small: < 4kb for all directives (~1kb with gzip compression!) | ||
| There are 6 types of charts so 6 directives: `chart-line`, `chart-bar`, `chart-radar`, `chart-pie`, | ||
| `chart-polar-area`, `chart-doughnut`. | ||
| They all use mostly the same API: | ||
| As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the `ds.clock` [module](http://docs.angularjs.org/guide/module): | ||
| - `data`: series data | ||
| - `labels`: x axis labels (line, bar, radar) or series labels (pie, doughnut, polar area) | ||
| - `options`: chart options (as from [Chart.js documentation](http://www.chartjs.org/docs/)) | ||
| - `series`: (default: `[]`): series labels (line, bar, radar) | ||
| - `colours`: data colours (will use default colours if not specified) | ||
| - `getColour`: function that returns a colour in case there are not enough (will use random colours if not specified) | ||
| - `click`: onclick event handler | ||
| - `hover`: onmousemove event handler | ||
| - `legend`: (default: `false`): show legend below the chart | ||
| ```javascript | ||
| angular.module('myModule', ['ds.clock']); | ||
| ``` | ||
| There is another directive `chart-base` that takes an extra attribute `chart-type` to define the type | ||
| dynamically, see [stacked bar example](http://jtblin.github.io/angular-chart.js/examples/stacked-bars.html). | ||
| ### CSS | ||
| You need to include a link to the css file in your page. | ||
| ```html | ||
| <link rel="stylesheet" href="bower_components/dist/angular-clock.css"> | ||
| ``` | ||
| ### Options | ||
| There are several options that you can set as attributes on the directive element | ||
| 1. `show-secs` : shows second in digital clock, (default: `true`) | ||
| 2. `show-am-pm` : shows am/pm in digital clock, (default: `false`) | ||
| 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 | ||
| 4. `show-digital`: shows digital clock, (default: `true` if both show-analog &show-digital are not set) | ||
| 5. `show-analog` : shows analog clock, (default: `true` if both show-analog &show-digital are not set) | ||
| 6. `show-gmt-info` : shows GMT offset value, (default: `false`) | ||
| 7. `theme` : analog clockface theme, (default: `light`) | ||
| ## Browser compatibility | ||
@@ -50,52 +68,15 @@ | ||
| ```html | ||
| <canvas id="line" class="chart chart-line" data="data" labels="labels" | ||
| legend="true" series="series" click="onClick"></canvas> | ||
| <ds-widget-clock theme="dark" show-secs="true" show-am-pm></ds-widget-clock> | ||
| ``` | ||
| ## Javascript | ||
| ```javascript | ||
| angular.module("app", ["chart.js"]).controller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) { | ||
| $scope.labels = ["January", "February", "March", "April", "May", "June", "July"]; | ||
| $scope.series = ['Series A', 'Series B']; | ||
| $scope.data = [ | ||
| [65, 59, 80, 81, 56, 55, 40], | ||
| [28, 48, 40, 19, 86, 27, 90] | ||
| ]; | ||
| $scope.onClick = function (points, evt) { | ||
| console.log(points, evt); | ||
| }; | ||
| // Simulate async data update | ||
| $timeout(function () { | ||
| $scope.data = [ | ||
| [28, 48, 40, 19, 86, 27, 90], | ||
| [65, 59, 80, 81, 56, 55, 40] | ||
| ]; | ||
| }, 3000); | ||
| }]); | ||
| ``` | ||
| ## Reactive | ||
| angular-chart.js watch updates on data, series, labels, colours and options and will update, or destroy and recreate, | ||
| the chart on changes. | ||
| angular clock widget is fully responsive, resize browser to see it in action | ||
| ## Colours | ||
| There are a set of 7 default colours. Colours can be replaced using the `colours` attribute. | ||
| If there is more data than colours, colours are generated randomly or can be provided | ||
| via a function through the `getColour` attribute. | ||
| Hex colours are converted to Chart.js colours automatically, | ||
| including different shades for highlight, fill, stroke, etc. | ||
| # Issues | ||
| Please check if issue exists and otherwise open issue in [github](https://github.com/jtblin/angular-chart.js/issues). | ||
| Please check if issue exists and otherwise open issue in [github](https://github.com/deepu105/angular-clock/issues?state=open) | ||
| **Please add a link to a plunker, jsbin, or equivalent.** | ||
| Here is a [jsbin template](http://jsbin.com/dufibi/3/edit?html,js,output) for convenience. | ||
@@ -116,7 +97,8 @@ # Contributing | ||
| # Author | ||
| Deepu K Sasidharan | ||
| Designed and built by [Deepu K Sasidharan](https://github.com/jtblin) | ||
| [Issues](https://github.com/deepu105/angular-clock/issues?state=open) | ||
| Inspired from [this demo](https://gist.github.com/BinaryMuse/6100363). | ||
@@ -123,0 +105,0 @@ |
@@ -6,4 +6,4 @@ /*jshint mocha:true*/ | ||
| /*global sinon:true*/ | ||
| 'use strict'; | ||
| describe('Angular Clock Unit testing', function() { | ||
| 'use strict'; | ||
@@ -45,3 +45,3 @@ var $compile, scope, sandbox; | ||
| //var mock = sandbox.mock(Chart.prototype); | ||
| //var mock = sandbox.mock(Chart.prototype); | ||
| //mock.expects(type); | ||
@@ -78,7 +78,5 @@ | ||
| function getGMTText(offset) { | ||
| var f = offset > 0 ? Math.floor(offset) : Math.ceil(offset), | ||
| s = Math.round(((offset > 0 ? offset : offset * -1) % 1) *100); | ||
| s = Math.round(((offset > 0 ? offset : offset * -1) % 1) * 100); | ||
@@ -85,0 +83,0 @@ return 'GMT' + (offset === 0 ? '' : ((offset > 0 ? ' +' : ' ') + lpad(f) + '.' + rpad(s).substring(0, 2))); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis 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
- increased by10.23%
233195
- Lines of code
- increased by0.62%
6512
Worsened metrics
- Number of lines in readme file
- decreased by-14.52%
106
No dependency changes