BinaryMuse/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is the Ractive.js clock example implemented in AngularJS. A working Plunkr is also available.
Much of the JavaScript, most of the HTML, and all of the CSS was taken directly from the Ractive.js example for minimal differences in the samples.

  
## application.js
var app = angular.module('clock', []);

app.filter('pad', function() {
  return function(num) {
    return (num < 10 ? '0' + num : num);
  };
});

app.filter('addSuffix', function() {
  return function(num) {
    if (num % 100 >= 10 && num % 100 <= 19) {
      return num + 'th';
    }

    switch (num % 10) {
      case 1: return num + 'st';
      case 2: return num + 'nd';
      case 3: return num + 'rd';
    }

    return num + 'th';
  };
})

app.controller("ClockController", function($scope, $timeout) {
  $scope.date = new Date();
  $scope.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  $scope.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

  $scope.majors = new Array(12);
  $scope.minors = new Array(60);

  var tick = function() {
    $scope.date = new Date();
    $timeout(tick, 1000);
  };
  $timeout(tick, 1000);
});

## style.css
.left, .right {
  float: left;
  width: 50%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.left {
  padding-right: 1em;
}

.left p {
  font-size: 1.4em;
}

.right {
  padding-left: 1em;
}

#example p {
  margin: 1em 0 0 0;
}

.time {
  font-family: 'Voltaire';
  font-size: 4em;
  margin: 0;
}


.square {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.clock-face {
  stroke: #333;
  fill: white;
}

.minor {
  stroke: #999;
  stroke-width: 0.5;
}

.major {
  stroke: #333;
  stroke-width: 1;
}

.hour {
  stroke: #333;
}

.minute {
  stroke: #666;
}

.second, .second-counterweight {
  stroke: rgb(180,0,0);
}

.second-counterweight {
  stroke-width: 3;
}

## template.html
<body ng-cloak ng-controller="ClockController">
  <div class="left">
    <p>
      Today is {{days[date.getDay()]}}
      the {{date.getDate() | addSuffix}}
      of {{months[date.getMonth()]}}.

      The time is
    </p>

    <span class="time">
      <span class="hours">
        {{date.getHours() | pad}}
      </span>:<span class="minutes">
        {{date.getMinutes() | pad}}
      </span>:<span class="seconds">
        {{date.getSeconds() | pad}}
      </span>
    </span>
  </div>

  <div class="right">
    <div class="square">
      <svg viewBox="0 0 100 100">
        <g transform="translate(50,50)">
          <circle class="clock-face" r="48" />
          <line ng-repeat="minor in minors track by $index" class="minor"
            y1="42" y2="45" transform="rotate({{360 * $index / minors.length}})" />
          <line ng-repeat="major in majors track by $index" class="major"
            y1="35" y2="46" transform="rotate({{360 * $index / majors.length}})" />
          <line class="hour" y1="2" y2="-20"
            transform="rotate({{30 * date.getHours() + date.getMinutes() / 2}})" />
          <line class="minute" y1="4" y2="-30"
            transform="rotate({{6 * date.getMinutes() + date.getSeconds() / 10}})" />
          <g transform="rotate({{6 * date.getSeconds()}})">
            <line class="second" y1="10" y2="-38" />
            <line class="second-counterweight" y1="10" y2="2" />
          </g>
        </g>
      </svg>
    </div>
  </div>
</body>
	var app = angular.module('clock', []);

	app.filter('pad', function() {
	return function(num) {
	return (num < 10 ? '0' + num : num);
	};
	});

	app.filter('addSuffix', function() {
	return function(num) {
	if (num % 100 >= 10 && num % 100 <= 19) {
	return num + 'th';
	}

	switch (num % 10) {
	case 1: return num + 'st';
	case 2: return num + 'nd';
	case 3: return num + 'rd';
	}

	return num + 'th';
	};
	})

	app.controller("ClockController", function($scope, $timeout) {
	$scope.date = new Date();
	$scope.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
	$scope.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

	$scope.majors = new Array(12);
	$scope.minors = new Array(60);

	var tick = function() {
	$scope.date = new Date();
	$timeout(tick, 1000);
	};
	$timeout(tick, 1000);
	});
	.left, .right {
	float: left;
	width: 50%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

	.left {
	padding-right: 1em;
	}

	.left p {
	font-size: 1.4em;
	}

	.right {
	padding-left: 1em;
	}

	#example p {
	margin: 1em 0 0 0;
	}

	.time {
	font-family: 'Voltaire';
	font-size: 4em;
	margin: 0;
	}


	.square {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	}

	svg {
	position: absolute;
	width: 100%;
	height: 100%;
	}

	.clock-face {
	stroke: #333;
	fill: white;
	}

	.minor {
	stroke: #999;
	stroke-width: 0.5;
	}

	.major {
	stroke: #333;
	stroke-width: 1;
	}

	.hour {
	stroke: #333;
	}

	.minute {
	stroke: #666;
	}

	.second, .second-counterweight {
	stroke: rgb(180,0,0);
	}

	.second-counterweight {
	stroke-width: 3;
	}
	<body ng-cloak ng-controller="ClockController">
	<div class="left">
	<p>
	Today is {{days[date.getDay()]}}
	the {{date.getDate() \| addSuffix}}
	of {{months[date.getMonth()]}}.

	The time is
	</p>

	<span class="time">
	<span class="hours">
	{{date.getHours() \| pad}}
	</span>:<span class="minutes">
	{{date.getMinutes() \| pad}}
	</span>:<span class="seconds">
	{{date.getSeconds() \| pad}}
	</span>
	</span>
	</div>

	<div class="right">
	<div class="square">
	<svg viewBox="0 0 100 100">
	<g transform="translate(50,50)">
	<circle class="clock-face" r="48" />
	<line ng-repeat="minor in minors track by $index" class="minor"
	y1="42" y2="45" transform="rotate({{360 * $index / minors.length}})" />
	<line ng-repeat="major in majors track by $index" class="major"
	y1="35" y2="46" transform="rotate({{360 * $index / majors.length}})" />
	<line class="hour" y1="2" y2="-20"
	transform="rotate({{30 * date.getHours() + date.getMinutes() / 2}})" />
	<line class="minute" y1="4" y2="-30"
	transform="rotate({{6 * date.getMinutes() + date.getSeconds() / 10}})" />
	<g transform="rotate({{6 * date.getSeconds()}})">
	<line class="second" y1="10" y2="-38" />
	<line class="second-counterweight" y1="10" y2="2" />
	</g>
	</g>
	</svg>
	</div>
	</div>
	</body>