deepu105 / angular-clock Goto Github PK

View Code? Open in Web Editor NEW

64.0 7.0 43.0 701 KB

angular clock widget directive: Demo-

Home Page: http://deepu105.github.io/angular-clock/

JavaScript 27.34% HTML 70.54% CSS 2.12%

angular-clock's Introduction

Angular Clock Widget

Responsive, beautiful clocks for AngularJS built using SVG

Demo & Documentation

Getting started

Dependencies

This repository contains native AngularJS directives to render a clock face. The only required dependencies are:

AngularJS (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. and copy the files from dist/. Then add the sources to your code (adjust paths as needed) after adding the dependencies for Angular first:

<script src="../bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-clock/dist/angular-clock.js"></script>

Whichever method you choose the good news is that the overall size is very small: < 4kb for all directives (~1kb with gzip compression!)

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:

angular.module('myModule', ['ds.clock']);

CSS

You need to include a link to the css file in your page.

<link rel="stylesheet" href="bower_components/dist/angular-clock.css">

If you need the default digital clock font Syncopate, include this. Else check styling section to use your own font

<link href='//fonts.googleapis.com/css?family=Syncopate:400,700' rel='stylesheet' type='text/css'>

Options

There are several options that you can set as attributes on the directive element

start-time : init clock with specific time in milliseconds, (default: undefined)
digital-format : digital clock format in angular date filter format (default: 'HH-mm-ss'). Pass as string enclosed in single quate
gmt-offset : shows time for the given GMT offset in clock, (default: false, shows local time) example: India -> 5.30, Singapore -> 8 , venezula -> -4.30, Nepal -> 5.45
show-digital: shows digital clock, (default: true if both show-analog &show-digital are not set)
show-analog : shows analog clock, (default: true if both show-analog &show-digital are not set)
show-gmt-info : shows GMT offset value, (default: false)
theme : analog clockface theme, (default: light)

Browser compatibility

For IE8 and older browsers, you will need SVG polyfills and Shims

Example

Markup

<ds-widget-clock theme="dark" show-secs="true" digital-format="'hh:mm:ss a'"></ds-widget-clock>

Reactive & Responsive

angular clock widget is reactive and fully responsive

Issues

Please check if issue exists and otherwise open issue in github

Please add a link to a plunker, jsbin, or equivalent.

Contributing

Pull requests welcome!

Fork the repo
Make your changes
Write unit tests under test directory
Update examples under examples directory
Run tests: npm test, gulp test
Submit pull request

Contributors

Thank you!

Author

Designed and built by Deepu K Sasidharan

Issues

Inspired from this demo.

License

angular-clock.js is available under the MIT license.

angular-clock's People

Contributors

Stargazers

Watchers

angular-clock's Issues

How to import into Angular CLI project

I can't, for the life of me, figure out how to import angular-clock into my project. It has to be easy, but nothing I tried is working. I have an example set up here, if someone could just show how to import it, that would be awesome. It's in 'node-modules' since I 'npm install angular-clock --save-dev' https://stackblitz.com/edit/angular-issue-repro2-hgzq4g?file=src%2Fapp%2Fapp.module.ts

Dynamically Adding Clock(s)

I have an add button. I would like it so when that add button is pushed a clock appears. Currently when i click my add button it adds an [[object HTMLElement]]

Here is my code currently. Any help would be appreciated.

Clock doesnt update when translate using google web translator

I'm Using google web translator to my web app, and as soon as I change language to any other then English, clock stops updating..

Negative GMT offset not working with Chrome but with Firefox

Hello,

Negative GMT offset is not working with Chrome but with Firefox, I'm forced to put it in positive.

install failure

How to set time for angular-clock

This repo is awesome! May be angular-clock can receive time from attribute.

the css path in README seems wrong.

README: import css by

<link rel="stylesheet" href="bower_components/dist/angular-clock.css">

i installed by bower install angular-ui-clock --save
the css file shows at bower_components/angular-ui-clock/dist/angular-clock.css
Environment:
OS: macOS 10.13.4
bower version: 1.8.3

Digital Clock Doesnt Update When using gmt-offset

I have a Analog + Digital Clock showing via this HTML:

<ds-widget-clock theme="light" show-secs="true" gmt-offset="-5" show-analog show-digital digital-format="'hh:mm:ss a'" ></ds-widget-clock>

The analog clock is correct, however, the digital clock shows the wrong hour.

Change Time on started

The plugin is not updating once it's started if we update the $scope.startTimeValue.
If we change the $scope.gmtValue then only it's updating.

Changing day and month text for localization

When I change the days and months arrays in source code, it doesn't honor the changes I make on the screen. Any workarounds on how we can make this work?

Feature Request : numbers on dial

Would make it more readable if numbers were added on the analog dial

Clock is not updating, it's updating only after url refresh .

Negative GMT offset

Negative gmt offset returns time with many hours difference. Is there any solution for that?

Updating time when start-time value is changed

I get my start-time value from an HTTP get request and by the time request is answered, clock starts working and there is no way to update it based on changed start-time value.

I created #16 to fix my issue.

Fixed Time Clock?

Nice clock! I was searching for this for a long while.

What I need is not a moving time clock but a representation of a specific time in analog form.

My suggestion is to add an attribute "live" as:

<ds-widget-clock start-time="10800000" live="false"></ds-widget-clock> (time in milliseconds right?)

This would show a clock fixed at 3.

It will allow much more versatility in what your clock can do.

Difference between analog and digital

Hi,
Just started working with your custom directive. When setting a custom GMT value, the digital value updates correctly, the analog however does now. Any ideas what could be causing this?

Thanks in advance.
Tolga

deepu105 / angular-clock Goto Github PK

angular-clock's Introduction

Angular Clock Widget

Getting started

Dependencies

Installation

CSS

Options

Browser compatibility

Example

Markup

Reactive & Responsive

Issues

Contributing

Contributors

Author

License

angular-clock's People

Contributors

Stargazers

Watchers

Forkers

angular-clock's Issues

Recommend Projects

Recommend Topics

Recommend Org