JarCasting
JarCasting JarCasting

angular-ui-clock

WebJar for angular-ui-clock

License

License

MIT
Categories

Categories

Github Development Tools Version Controls Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

github-com-deepu105-angular-clock
Last Version

Last Version

0.5.1
Release Date

Release Date
Type

Type

jar
Description

Description

angular-ui-clock
WebJar for angular-ui-clock
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/deepu105/angular-clock

Download github-com-deepu105-angular-clock

Filename Size
github-com-deepu105-angular-clock-0.5.1.pom
github-com-deepu105-angular-clock-0.5.1.jar 61 KB
github-com-deepu105-angular-clock-0.5.1-sources.jar 22 bytes
github-com-deepu105-angular-clock-0.5.1-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/github-com-deepu105-angular-clock/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>github-com-deepu105-angular-clock</artifactId>
    <version>0.5.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/github-com-deepu105-angular-clock/
implementation 'org.webjars.bower:github-com-deepu105-angular-clock:0.5.1'
// https://jarcasting.com/artifacts/org.webjars.bower/github-com-deepu105-angular-clock/
implementation ("org.webjars.bower:github-com-deepu105-angular-clock:0.5.1")
'org.webjars.bower:github-com-deepu105-angular-clock:jar:0.5.1'
<dependency org="org.webjars.bower" name="github-com-deepu105-angular-clock" rev="0.5.1">
  <artifact name="github-com-deepu105-angular-clock" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='github-com-deepu105-angular-clock', version='0.5.1')
)
libraryDependencies += "org.webjars.bower" % "github-com-deepu105-angular-clock" % "0.5.1"
[org.webjars.bower/github-com-deepu105-angular-clock "0.5.1"]

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.bower : angular jar [1,2)

Project Modules

There are no modules declared in this project.

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

  1. start-time : init clock with specific time in milliseconds, (default: undefined)
  2. digital-format : digital clock format in angular date filter format (default: 'HH-mm-ss'). Pass as string enclosed in single quate
  3. 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
  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

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!

  1. Fork the repo
  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

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.

Versions

Version
0.5.1