Permalink
Browse files

added my directive

  • Loading branch information...
1 parent 5ba4e5e commit 9c13612919a0a11c0d131df7424652c493bfa292 @zemirco committed Apr 4, 2013
Showing with 48 additions and 1 deletion.
  1. +1 −1 index.html
  2. +47 −0 scoreboard.js
View
@@ -23,7 +23,7 @@ <h1>Angular.js directive <a href="https://github.com/zeMirco/ng-scoreboard-clock
<p>Font: <a href="http://fontstruct.com/fontstructions/show/segment_5">segment</a> by "Mylicia".</p>
<p>Optimized for web with <a href="http://www.fontsquirrel.com/tools/webfont-generator">Font Squirrel</a>.</p>
<p>
- <a href="https://twitter.com/share" class="twitter-share-button" data-via="zeMirco">Tweet</a> -
+ <a href="https://twitter.com/share" class="twitter-share-button" data-via="zeMirco">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a href="https://twitter.com/zeMirco" class="twitter-follow-button" data-show-count="false">Follow @zeMirco</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
View
@@ -0,0 +1,47 @@
+angular.module('scoreboard', [])
+ // inject $timeout and dateFilter service
+ .directive('clock', function($timeout, dateFilter) {
+ return {
+ restrict: 'E',
+ template: '<span></span>',
+ replace: true,
+ link: function(scope, iElem, iAttrs) {
+ // save timeoutIds, so that we can cancel the time updates
+ var updateTimeoutId;
+ var hideTimeoutId;
+
+ var colon = '<span class="colon" style="opacity: 100;">:</span>';
+
+ // schedule update in one second
+ var updateLater = function() {
+ updateTimeoutId = $timeout(function() {
+ updateUi();
+ }, 1000);
+ };
+
+ // show and hide colon for 500ms, reappear each second
+ var hideColon = function() {
+ hideTimeoutId = $timeout(function() {
+ angular.element('span.colon').css('opacity', '0');
+ }, 500);
+ };
+
+ // update UI
+ var updateUi = function() {
+ iElem.html(dateFilter(Date.now(), iAttrs.format).split(':').join(colon));
+ hideColon();
+ updateLater();
+ };
+
+ // listen on DOM destroy and cancel the next UI update
+ iElem.bind('$destroy', function() {
+ $timeout.cancel(updateTimeoutId);
+ $timeout.cancel(hideTimeoutId);
+ });
+
+ // start process
+ updateUi();
+
+ }
+ };
+ });

0 comments on commit 9c13612

Please sign in to comment.