Nimble Package Maestros

    angular-clock

    0.7.0 • Public • Published

    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.

    Keywords

    none

    Install

    npm i angular-clock

    DownloadsWeekly Downloads

    49

    Version

    0.7.0

    License

    MIT

    Last publish

    Collaborators

    • deepu105
    • deepu8224