index.tpl.html

<!-- From index.tpl.html - Grunt task index -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Angular Timer, a simple, inter-operable AngularJS directive</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <!-- compiled CSS --><% styles.forEach( function ( file ) { %>
    <link rel="stylesheet" type="text/css" href="<%= file %>" /><% }); %>

    <!-- compiled JavaScript --><% scripts.forEach( function ( file ) { %>
    <script type="text/javascript" src="<%= file %>"></script><% }); %>
</head>
<body ng-app="timer-demo" ng-controller="TimerDemoController">

<ng-include src="'navbar.html'" onload='linkAnchors();'></ng-include>

<div class="container page-content">
    <section id="introduction">
        <h1>
            Introduction</h1>

        <p>
            Directives in <a href="http://angularjs.org" target="_new">AngularJS</a> is a powerful way of building
            reusable <em>UI components</em>. This simple project will serve as a sample/reference implementation
            demonstrating its flexibilities by making it <em>inter-operable</em> across runtime (AngularJS, plain simple
            JavaScript &amp; jQuery)</p>

        <p>
            For basic understanding of how directives work in AngularJS, please head to this <a
                href="http://docs.angularjs.org/guide/directive" target="_new">developer guide</a>.</p>
    </section>
    <section id="basic-timer">
        <h3>
            Basic Example</h3>

        <div class="bs-docs-example">
            <p>
                This simple directive <code>&lt;timer /&gt;</code> will start the timer with the default option of
                ticking every 1 millisecond</p>

            <h3>
                <timer></timer>
            </h3>
            <button class="btn" onclick="startTimer('basic-timer')" type="button">Start</button>
            <button class="btn" onclick="stopTimer('basic-timer')" type="button">Stop</button>
        </div>
    </section>
    <section id="start-time-and-auto-start-set">
        <h3>Timer with start time and auto start set</h3>

        <div class="bs-docs-example">
            <p>This will start a timer with 1410914940000 milliseconds and stopped</p>

            <h3>
                <timer start-time="1410914940000" autostart="false"></timer>
            </h3>
        </div>
    </section>
    <section id="clock-timer">
        <h3>
            Timer with hours, minutes &amp; seconds</h3>

        <div class="bs-docs-example">
            <p>
                This markup <code ng-non-bindable="">&lt;timer interval=&quot;1000&quot;&gt;{{hours}} hour{{hoursS}}, {{minutes}}
                minute{{minutesS}}, {{seconds}} second{{secondsS}}.&lt;/timer&gt;</code> will run the clock timer ticking every second</p>

            <h3>
                <timer interval="1000">{{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.</timer>
            </h3>
            <button class="btn" onclick="stopResumeTimer('clock-timer', this)" type="button">Stop</button>
        </div>
    </section>
    <section id="clock-timer-i18n">
        <h3>
            Timer i18n</h3>

        <div class="bs-docs-example">
            <p>
                This markup <code ng-non-bindable="">&lt;timer interval=&quot;1000&quot; language=&quot;fr&quot; &gt;{{yearUnit}}</code> will run the clock timer ticking every second.
            </p>
            <p>
                You can use a controller variable as the language attribut or a string. If a scope variable is used, the value will be watched, <strong>that is to say if your app language changes, the change will also affects the timer.</strong>
            </p>
            <p>
                Based on <a href="https://github.com/EvanHahn/HumanizeDuration.js">HumanizeDuration</a> with more than 16 languages available.
            </p>

            <h3>Spanish</h3>
            <div id="spanish">
                <h4>Year max unit time : <timer interval="1000" language="es">{{yearUnit}}</timer></h4>
                <h4>Hour max unit time: <timer interval="1000" language="es">{{hourUnit}}</timer></h4>
                <h4>Second max unit time: <timer interval="1000" language="es">{{secondUnit}}</timer></h4>
            </div>


            <h3>French</h3>
            <div id="french">
                <h4>Year max unit time : <timer interval="1000" language="fr">{{yearUnit}}</timer></h4>
                <h4>Hour max unit time: <timer interval="1000" language="fr">{{hourUnit}}</timer></h4>
                <h4>Second max unit time: <timer interval="1000" language="fr">{{secondUnit}}</timer></h4>
            </div>

            <h3>Available units</h3>
            <ul>
                <li><strong>secondUnit</strong>: 8 164 816 seconds</li>
                <li><strong>minuteUnit</strong>: 136 089 minutes, 16 seconds</li>
                <li><strong>hourUnit</strong>: 18 126 hours,9 minutes, 16 seconds</li>
                <li><strong>dayUnit</strong>:  755 days, 6 hours, 9 minutes, 16 seconds</li>
                <li><strong>monthUnit</strong>: 25 month, 5 days, 6 hours, 9 minutes, 16 seconds</li>
                <li><strong>yearUnit </strong>: 2 years, 1 month, 5 days, 6 hours, 9 minutes, 16 seconds</li>
            </ul>
        </div>
    </section>
    <section id="clock-timer-leading-zero">
        <h3>
            Timer with leading zero</h3>

        <div class="bs-docs-example">
            <p>
                This markup <code ng-non-bindable="">&lt;timer interval=&quot;1000&quot;&gt;{{hhours}} hour{{hhoursS}}, {{mminutes}}
                minute{{minutesS}}, {{sseconds}} second{{secondsS}}.&lt;/timer&gt;</code> will run the clock timer ticking every second with an additional zero at the beginning if unit is smaller than 10</p>

            <h3>
                <timer interval="1000">{{hhours}} hour{{hoursS}}, {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}</timer>
            </h3>
            <button class="btn" onclick="stopResumeTimer('clock-timer-leading-zero', this)" type="button">Stop</button>
        </div>
    </section>
    <section id="timer-with-start-time">
        <h3>
            Timer initialised with some predefined start time.</h3>

        <div class="bs-docs-example">
            <p>
                Following is the timer clock setting for the days, hours, minutes & seconds elapsed since <b>January 1, 2013 (GMT-6) </b>
            <p class="muted">(01 Jan 2013 06:00:00 GMT = 1357020000000 milliseconds)</p>
            <code ng-non-bindable="">&lt;timer start-time=&quot;1357020000000&quot;&gt;{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.&lt;/timer&gt;</code>
            <h3>
                <timer start-time="1357020000000">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>
            </h3>
            <button class="btn" onclick="stopResumeTimer('timer-with-start-time', this)" type="button">Stop</button>
        </div>
    </section>
    <section id="timer-with-end-time">
        <h3>
            Timer initialised with some predefined end time.</h3>

        <div class="bs-docs-example">
            <p>
                Following is the countdown timer setting for the days, hours, minutes & seconds to <b>January 1, 2016 (GMT-6) </b>
            <p class="muted">(01 Jan 2016 06:00:00 GMT = 1451628000000 milliseconds)</p>
            <code ng-non-bindable="">&lt;timer end-time=&quot;1451628000000&quot;&gt;{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.&lt;/timer&gt;</code>
            <h3>
                <timer end-time="1451628000000">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>
            </h3>
        </div>
    </section>
    <section id="progressbar-timer">
        <h3>
            Progressbar Timer</h3>

        <div class="bs-docs-example">
            <p>
                Timer directive along with <a href="http://twitter.github.io/bootstrap/components.html#progress"
                                              target="_new">Twitter Bootstrap&#39;s Progressbar</a> will set the timer
                on Progressbar control.</p>
            <code ng-non-bindable="">
                &lt;timer countdown=&quot;30&quot; interval=&quot;1000&quot;&gt;&lt;div class=&quot;progress
                progress-striped active {{displayProgressActive}}&quot;style="height: 30px;"&gt;
            </code>
            <code ng-non-bindable="">
                Remaining time : {{countdown}} second{{secondsS}} ({{progressBar}}%). Activity? {{displayProgressActive}}
            </code>
            <code ng-non-bindable="">
                &lt;div class=&quot;bar&quot; style=&quot;min-width: 2em;width: {{progressBar}}%;&quot;&gt;&lt;/div&gt;
            </code>
            <code ng-non-bindable="">
                &lt;/div&gt;&lt;/timer&gt;
            </code>

            <h3>
                <timer id="countdown" interval="1000" countdown="30">
                    Remaining time : {{countdown}} second{{secondsS}} ({{progressBar}}%). Activity? {{displayProgressActive}}
                    <div class="progress progress-striped {{displayProgressActive}}" style="height: 30px;">
                        <div class="bar" style="min-width: 2em; height: 30px; width: {{progressBar}}%;">
                            {{ progressBar }}%
                        </div>
                    </div>
                </timer>
            </h3>

            <code ng-non-bindable="">
                &lt;timer end-time=&quot;1451628000000&quot; interval=&quot;1000&quot;&gt;&lt;div class=&quot;progress
                progress-striped active {{displayProgressActive}}&quot;style="height: 30px;"&gt;
            </code>
            <code ng-non-bindable="">
                &lt;div class=&quot;bar&quot; style=&quot;min-width: 2em;width: {{progressBar}}%;&quot;&gt;&lt;/div&gt;
            </code>
            <code ng-non-bindable="">
                &lt;/div&gt;&lt;/timer&gt;
            </code>
            <h3>
                <timer interval="1000" end-time="1451628000000">
                    ({{progressBar}}%). Progress bar activity : {{displayProgressActive}}
                    <div class="progress progress-striped {{displayProgressActive}}" style="height: 30px;">
                        <div class="bar" style="min-width: 2em; width: {{progressBar}}%;">
                            {{ progressBar }}%</div>
                    </div>
                </timer>
            </h3>
            <button class="btn" onclick="startTimer('progressbar-timer')" type="button">Start</button>
            <button class="btn" onclick="stopTimer('progressbar-timer')" type="button">Stop</button>
        </div>
    </section>
    <section id="countdown-timer">
        <h3>
            Countdown Timer</h3>

        <div class="bs-docs-example">
            <p>
                The countdown timer <code ng-non-bindable="">&lt;timer interval=&quot;1000&quot; countdown=&quot;100&quot;&gt;{{countdown}}&lt;/timer&gt;</code>
                will start its countdown from 100 until it reaches 0 by ticking every second</p>

            <h3>
                <timer countdown="100" interval="1000">{{countdown}}</timer>
            </h3>
            <button class="btn" onclick="addCDSeconds('countdown-timer', 10)" type="button">Add 10 Seconds</button>
        </div>
    </section>
    <section id="auto-start-false-timer">
        <h3>
            Timer with <em>autostart = false</em></h3>

        <div class="bs-docs-example">
            <p>
                Click on the start button to start the timer. <code ng-non-bindable="">&lt;timer autostart="false" interval="1000"&gt;{{seconds}}&lt;/timer&gt;</code></p>
            <h3>
                <timer autostart="false" interval="1000">{{seconds}}</timer>
            </h3>
            <button class="btn" onclick="stopResumeTimer('auto-start-false-timer', this)" type="button">Start</button>
        </div>
    </section>

    <section id="plural-unit-timer">
        <h3>Plural / Singular units</h3>

        <div class="bs-docs-example">
            <p>
                Two stopped countdown timers to illustrate how to handle pluralization of time units.
                <code ng-non-bindable="">
                    &lt;timer autostart="false" countdown="90061"&gt;{{days}} day{{daysS}}, {{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.&lt;/timer&gt;
                </code>
            <h3 class="singular-counter">
                <timer autostart="false" countdown="90061">{{days}} day{{daysS}}, {{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.</timer>
            </h3>
            <code ng-non-bindable="">
                &lt;timer autostart="false" countdown="190061"&gt;{{days}} day{{daysS}}, {{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.&lt;/timer&gt;
            </code>
            <h3 class="plural-counter">
                <timer autostart="false" countdown="190061">{{days}} day{{daysS}}, {{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.</timer>
            </h3>
        </div>
    </section>

    <section id="max-time-unit-countdown-timer">
        <h3>Countdown time display according to specified <em>max-time-unit</em></h3>

        <div class="bs-docs-example">
            <p>
                This markup will display countdown time in minute and seconds only.  This attribute can be applied to regular clock timer as well.
                <code ng-non-bindable="">
                    &lt;timer countdown="10041" max-time-unit="'minute'" interval="1000"&gt;{{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}&lt;/timer&gt;
                </code>
            </p>
            <p class="muted">countdown Time with max time unit option - year</p>
            <h3 class="WithMaxTimeUnitAsYear">
                <timer countdown="100410000" max-time-unit="'year'" interval="1000">{{yyears}} year{{yearsS}}, {{mmonths}} month{{monthsS}}, {{ddays}} day{{daysS}}, {{hhours}} hour{{hoursS}}, {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}</timer>
            </h3>
            <p class="muted">countdown Time with max time unit option - minute</p>
            <h3 class="WithMaxTimeUnitAsMinute">
                <timer countdown="10041" max-time-unit="'minute'" interval="1000"> {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}</timer>
            </h3>

            <p class="muted">countdown Time with max time unit option - second</p>
            <h3 class="WithMaxTimeUnitAsSecond">
                <timer countdown="10041" max-time-unit="'second'" interval="1000"> {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}</timer>
            </h3>

            <p class="muted">countdown Time without max time unit option - minute</p>
            <h3 class="WithoutMaxTimeUnit">
                <timer countdown="10041" interval="1000"> {{ddays}} day{{daysS}}, {{hhours}} hour{{hoursS}}, {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}</timer>
            </h3>
        </div>
    </section>


    <section id="finish-callback-timer">
        <h3>Countdown Finished Callback</h3>

        <div class="bs-docs-example">
            <p>
                A countdown timer that updates a value once the callback is reached
                <code ng-non-bindable="">
                    &lt;timer countdown="3" interval="1000" finish-callback="callbackTimer.finished()"&gt;{{seconds}} second{{secondsS}}&lt;/timer&gt;
                </code>

            <h3 class="counter">
                <timer countdown="3" interval="1000" finish-callback="callbackTimer.finished()">{{seconds}} second{{secondsS}} </timer>
            </h3>
            Timer: <span class="timer-status">{{callbackTimer.status}}</span>
            Callbacks: <span class="timer-callbacks">{{callbackTimer.callbackCount}}</span>

        </div>
    </section>

    <section id="markup">
        <h3>
            Markup</h3>

        <p>
            Timer directive can be declared using following options. By default, it will display milliseconds inside
            <code>span</code> tag. It can also take <em>template</em> string to display user-defined formats.</p>

        <div class="bs-docs-example">
            <p>
                <code ng-nonbindable="">&lt;timer interval=&quot;1000&quot; /&gt; </code></p>
        </div>
        <div class="bs-docs-example">
            <p>
                <code ng-non-bindable="">&lt;timer interval=&quot;1000&quot;&gt;{{hours}} hours, {{minutes}} minutes,
                    {{seconds}} seconds, {{millis}} milliseconds.&lt;/timer&gt;</code></p>
        </div>
        <h4>
            Attributes</h4>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Required
                </th>
                <th>
                    Default value
                </th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    interval
                </td>
                <td>
                    false
                </td>
                <td>
                    1 millisecond
                </td>
            </tr>
            <tr>
                <td>
                    autostart<br/>
                    <em>Formerly called 'auto-start'. Please see this <a target="_new" href="https://github.com/siddii/angular-timer/issues/14">issue</a></em>
                </td>
                <td>
                    false
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td>
                    countdown
                </td>
                <td>
                    false
                </td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td>
                    start-time
                </td>
                <td>
                    false
                </td>
                <td>starts the timer with predefined time (in milliseconds).
                </td>
            </tr>
            <tr>
                <td>
                    end-time
                </td>
                <td>
                    false
                </td>
                <td>Sets the countdown based on predefined end time (in milliseconds).
                </td>
            </tr>
            <tr>
                <td>
                    max-time-unit
                </td>
                <td>
                    false
                </td>
                <td> no default value.   But you can give value,  'minute', 'second', or 'hour'.
                </td>
            </tr>
            <tr>
                <td>
                    language
                </td>
                <td>
                    false
                </td>
                <td> 'en' for English. Please see <a target='_blank' href="https://github.com/EvanHahn/HumanizeDuration.js#supported-languages">supported languages</a>.
                </td>
            </tr>
            </tbody>
        </table>
        <h4>
            Methods</h4>

        <p>
            Following DOM methods can be invoked to <em>timer</em>. Append to <code>timer-</code> for scope based
            events when calling from AngularJS controllers.</p>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>
                    Method name
                </th>
                <th>
                    Description
                </th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    start
                </td>
                <td>
                    Starts the timer
                </td>
            </tr>
            <tr>
                <td>
                    stop
                </td>
                <td>
                    Stops the timer
                </td>
            </tr>
            <tr>
                <td>
                    clear
                </td>
                <td>
                    Same as <i>stop</i>. But, without the event being triggered
                </td>
            </tr>
            <tr>
                <td>
                    resume
                </td>
                <td>
                    Resumes the timer. Will NOT reset the start time
                </td>
            </tr>
            <tr>
                <td>
                    addCDSeconds
                </td>
                <td>
                    Add <i>seconds</i> to running countdown
                </td>
            </tr>
            </tbody>
        </table>
        <h4>
            Events</h4>

        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>
                    Event name
                </th>
                <th>
                    Description
                </th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    timer-tick
                </td>
                <td>
                    Tick event that gets emitted for every timer tick for specified interval. Please refer to <a href="examples.html#angularjs-polling-timer">Polling Timer</a>
                    example for its usage.
                </td>
            </tr>
            <tr>
                <td>
                    timer-stopped
                </td>
                <td>
                    Tick event that gets emitted when the timer stops. Please refer to <a href="examples.html#angularjs-single-timer">Single Timer</a>
                    example for its usage.
                </td>
            </tr>
            </tbody>
        </table>
    </section>
    <section id="bower">
        <h3>
            Install using Bower</h3>
        <p>
            <code>bower install angular-timer</code>
        </p>
    </section>
    <section id="contribute">
        <h3>
            Contributions welcome!</h3>

        <p>
            We welcome any or all kinds of contributions! Please submit <a
                href="https://github.com/siddii/angular-timer/pulls" target="_new">pull requests</a> or create <a
                href="https://github.com/siddii/angular-timer/issues" target="_new">issues</a> to contribute to this
            project :)</p>
    </section>
    <footer>
        <p>
            &copy; Siddique Hameed 2013</p>
    </footer>
</div>
</body>
</html>