CanJS jQuery Template

Includes jQuery, CanJS and all of its plugins. Use it as a starting point when you want to demo something.

by cherif_b

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.construct.proxy.js"></script>
<script src="http://canjs.us/release/latest/can.control.plugin.js"></script>
<script src="http://canjs.us/release/latest/can.view.modifiers.js"></script>
<script src="http://canjs.us/release/latest/can.fixture.js"></script>
<script src="http://canjs.us/release/latest/can.construct.super.js"></script>
<script src="http://canjs.us/release/latest/can.object.js"></script>
<script src="http://canjs.us/release/latest/can.ejs.js"></script>
<script src="http://canjs.us/release/latest/can.map.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.map.backup.js"></script>
<script src="http://canjs.us/release/latest/can.map.delegate.js"></script>
<script src="http://canjs.us/release/latest/can.map.setter.js"></script>
<script src="http://canjs.us/release/latest/can.map.validations.js"></script>
 <canvas id="analog"  width="255" height="255"></canvas>
  <div id="digital"></div>
  <div>
  <button id="stop">STOP</button>
  <button id="start">START</button>
  </div>
<script type='text/mustache' id="digital-template">
  	{{hh}}:{{mm}}:{{ss}}
  </script>

CSS

#digital {
			font-family: monospace;
			float: left;
			font-size: 60px;
			padding: 90px 10px;
			margin: 0px 20px 0px 0px;
			border: solid 1px black;
		}

JavaScript

// parts of this code were adopted from: http://jsbin.com/evodil/28/edit
var Analog = can.Control({
	defaults: {
  		rad: 250
	}
}, {
	init: function(){
		this.canvas = this.element[0].getContext('2d');
		this.rad = this.options.rad;
		this.radius = this.rad/2 - 5;
		this.center = this.rad/2;
	},
	"{timer} time": function(timer, ev, newTime){
		
		var seconds = newTime.getSeconds()
		
		// draw circle
	    this.canvas.clearRect(0,0,this.center*2,this.center*2);
	    this.canvas.lineWidth = 4.0;
	    this.canvas.strokeStyle = "#567";
	    this.canvas.beginPath();
	    this.canvas.arc(this.center,this.center,this.radius,0,Math.PI * 2,true);
	    this.canvas.closePath();
	    this.canvas.stroke();
	
	    // draw second hand
	    var dist = newTime.getSeconds()
	    this.drawNeedle(
	    	this.center * 0.80,
	    	newTime.getSeconds(),
	    	{
	    		lineWidth:  2.0,
	    		strokeStyle: "#FF0000",
				lineCap: "round"
	    	}
	    );
	    // draw minute hand
	    this.drawNeedle(
	    	this.center * 0.65,
	    	dist = newTime.getMinutes() + dist/ 60,
	    	{
	    		lineWidth:  3.0,
	    		strokeStyle: "#423",
				lineCap: "round"
	    	}
	    );
	    this.drawNeedle(
	    	this.center * 0.40,
	    	newTime.getHours() * 60 / 12 + dist / 60,
	    	{
	    		lineWidth:  4.0,
	    		strokeStyle: "#42F",
				lineCap: "round"
	    	}
	    );
	
	},
	drawNeedle: function(size, dist, styles){
		var theta = (6 * Math.PI / 180),
	    	x = this.center + size * Math.cos(dist * theta - Math.PI/2),
			y = this.center + size * Math.sin(dist * theta - Math.PI/2);
		
		$.extend(this.canvas, styles)
		
		this.canvas.beginPath();
		this.canvas.moveTo(x,y);
		this.canvas.lineTo(this.center,this.center);
		this.canvas.closePath();
		this.canvas.stroke();
	}
});


  	var timer = new can.Map({
  		time: new Date()
  	});
  		
  	
  	new Analog("#analog",{
  		timer: timer
  	})
  	
  	var pad = function(n){
  		n = ""+n;
  		return n.length <= 1 ? "0"+n : n;
  	}
  	
 ...