betsol-ng-time-counter
Version:
Minimalistic time-counter for Angular.js
180 lines (149 loc) • 5.67 kB
HTML
<html ng-app="betsol.timeCounter.test">
<head>
<title>betsol-ng-time-counter demo</title>
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<style>
.repo-button {
position: relative;
top: 10px;
float: right;
}
.timer .label {
font-size: 16px;
line-height: 40px;
padding: .3em .6em;
}
</style>
</head>
<body class="container-fluid" ng-controller="TestController as vm">
<h1>
betsol-ng-time-counter demo
<iframe
class="repo-button"
src="https://ghbtns.com/github-btn.html?user=betsol&repo=ng-time-counter&type=star&size=large"
frameborder="0"
scrolling="0"
width="90px"
height="30px"
></iframe>
</h1>
<hr>
<h2>Future Date</h2>
<p class="text-info">Future date is displayed like countdown timer.</p>
<div
bs-time-counter
date="vm.futureDate"
interval="100"
on-finish="vm.countdownComplete()"
>
<ng-include src="'~timer'"></ng-include>
</div>
<p class="text-info">
You can change date dynamically and timer will be updated accordingly.
</p>
<p class="text-info">
<strong>«onFinish»</strong> callback will be triggered when counter will reach zero.
</p>
<button class="btn btn-default" type="button" ng-click="vm.changeDate()">Change Date</button>
<hr>
<h2>Past Date</h2>
<p class="text-info">Past date is displayed like forward-counting timer.</p>
<div bs-time-counter date="vm.pastDate">
<ng-include src="'~timer'"></ng-include>
</div>
<h2>Custom Date</h2>
<p class="text-info">Counting direction and target date could be fully controlled.</p>
<div bs-time-counter date="vm.customDate" direction="vm.customDirection">
<ng-include src="'~timer'"></ng-include>
</div>
<button class="btn btn-default" type="button" ng-click="vm.customFutureUp()">
Future Date + Up
</button>
<button class="btn btn-default" type="button" ng-click="vm.customFutureDown()">
Future Date + Down
</button>
<button class="btn btn-default" type="button" ng-click="vm.customPastUp()">
Past Date + Up
</button>
<button class="btn btn-default" type="button" ng-click="vm.customPastDown()">
Past Date + Down
</button>
<br><br>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/betsol-ng-time-counter/scripts/betsol-ng-time-counter.js"></script>
<script type="application/javascript">
(function (angular) {
'use strict';
angular
.module('betsol.timeCounter.test', [
'betsol.timeCounter'
])
.controller('TestController', function ($scope) {
var vm = this;
var pastTime = Date.now() - 3 * 60 * 60 * 1000;
var futureTime = Date.now() + 3 * 60 * 60 * 1000;
vm.pastDate = new Date(pastTime);
vm.futureDate = new Date(futureTime);
vm.customDate = new Date();
vm.customDirection = 'up';
vm.countdownComplete = function () {
alert('Countdown finished!');
};
vm.changeDate = function () {
vm.futureDate = new Date(Date.now() + 10 * 1000);
};
vm.customFutureUp = function () {
vm.customDate = new Date(Date.now() + 10 * 1000);
vm.customDirection = 'up';
};
vm.customFutureDown = function () {
vm.customDate = new Date(Date.now() + 10 * 1000);
vm.customDirection = 'down';
};
vm.customPastUp = function () {
vm.customDate = new Date(Date.now() - 10 * 1000);
vm.customDirection = 'up';
};
vm.customPastDown = function () {
vm.customDate = new Date(Date.now() - 10 * 1000);
vm.customDirection = 'down';
};
})
;
})(angular);
</script>
<script type="text/ng-template" id="~timer">
<ul class="timer list-unstyled row well">
<li class="col-sm-1">
<span class="label label-info">{{ years }}</span><br>
years
</li>
<li class="col-sm-1">
<span class="label label-info">{{ months }}</span><br>
months
</li>
<li class="col-sm-1">
<span class="label label-info">{{ days }}</span><br>
days
</li>
<li class="col-sm-1">
<span class="label label-primary">{{ hours }}</span><br>
hours
</li>
<li class="col-sm-1">
<span class="label label-primary">{{ minutes }}</span><br>
minutes
</li>
<li class="col-sm-1">
<span class="label label-primary">{{ seconds }}</span><br>
seconds
</li>
<li class="col-sm-1">
<span class="label label-warning">{{ milliseconds }}</span><br>
milliseconds
</li>
</ul>
</script>
</body>
</html>