Subversion Repositories Applications.papyrus

/*

	Copyright (c) 2004-2006, The Dojo Foundation

	All Rights Reserved.

	Licensed under the Academic Free License version 2.1 or above OR the

	modified BSD license. For more information on Dojo licensing, see:

		http://dojotoolkit.org/community/licensing.shtml

*/

dojo.provide("dojo.widget.Clock");

dojo.require("dojo.widget.*");

dojo.require("dojo.gfx.*");

dojo.require("dojo.uri.Uri");

dojo.require("dojo.lang.common");

dojo.require("dojo.lang.timing.Timer");

dojo.widget.defineWidget("dojo.widget.Clock", dojo.widget.HtmlWidget, function () {

	var self = this;

	this.timeZoneOffset = 0;

	this.label = "";

	this.date = new Date();

	this.handColor = "#788598";

	this.handStroke = "#6f7b8c";

	this.secondHandColor = [201, 4, 5, 0.8];

	this.topLabelColor = "#efefef";

	this.labelColor = "#fff";

	this.timer = new dojo.lang.timing.Timer(1000);

	this.center = {x:75, y:75};

	this.hands = {hour:null, minute:null, second:null};

	this.shadows = {hour:{shadow:null, shift:{dx:2, dy:2}}, minute:{shadow:null, shift:{dx:2, dy:3}}, second:{shadow:null, shift:{dx:4, dy:4}}};

	this.image = dojo.uri.moduleUri("dojo.widget", "templates/images/clock.png");

	this.surface = null;

	this.labelNode = null;

	this.topLabelNode = null;

	this.draw = function () {

		self.date = new Date();

		var h = (self.date.getHours() + self.timeZoneOffset) % 12;

		var m = self.date.getMinutes();

		var s = self.date.getSeconds();

		self.placeHour(h, m, s);

		self.placeMinute(m, s);

		self.placeSecond(s);

		self.topLabelNode.innerHTML = ((self.date.getHours() + self.timeZoneOffset) > 11) ? "PM" : "AM";

	};

	this.timer.onTick = self.draw;

}, {set:function (dt) {

	this.date = dt;

	if (!this.timer.isRunning) {

		this.draw();

	}

}, start:function () {

	this.timer.start();

}, stop:function () {

	this.timer.stop();

}, _initPoly:function (parent, points) {

	var path = parent.createPath();

	var first = true;

	dojo.lang.forEach(points, function (c) {

		if (first) {

			path.moveTo(c.x, c.y);

			first = false;

		} else {

			path.lineTo(c.x, c.y);

		}

	});

	return path;

}, _placeHand:function (shape, angle, shift) {

	var move = {dx:this.center.x + (shift ? shift.dx : 0), dy:this.center.y + (shift ? shift.dy : 0)};

	return shape.setTransform([move, dojo.gfx.matrix.rotateg(-angle)]);

}, placeHour:function (h, m, s) {

	var angle = 30 * (h + m / 60 + s / 3600);

	this._placeHand(this.hands.hour, angle);

	this._placeHand(this.shadows.hour.shadow, angle, this.shadows.hour.shift);

}, placeMinute:function (m, s) {

	var angle = 6 * (m + s / 60);

	this._placeHand(this.hands.minute, angle);

	this._placeHand(this.shadows.minute.shadow, angle, this.shadows.minute.shift);

}, placeSecond:function (s) {

	var angle = 6 * s;

	this._placeHand(this.hands.second, angle);

	this._placeHand(this.shadows.second.shadow, angle, this.shadows.second.shift);

}, init:function () {

	if (this.domNode.style.position != "absolute") {

		this.domNode.style.position = "relative";

	}

	while (this.domNode.childNodes.length > 0) {

		this.domNode.removeChild(this.domNode.childNodes[0]);

	}

	this.domNode.style.width = "150px";

	this.domNode.style.height = "150px";

	this.surface = dojo.gfx.createSurface(this.domNode, 150, 150);

	this.surface.createRect({width:150, height:150});

	this.surface.createImage({width:150, height:150, src:this.image + ""});

	var hP = [{x:-3, y:-4}, {x:3, y:-4}, {x:1, y:-27}, {x:-1, y:-27}, {x:-3, y:-4}];

	var mP = [{x:-3, y:-4}, {x:3, y:-4}, {x:1, y:-38}, {x:-1, y:-38}, {x:-3, y:-4}];

	var sP = [{x:-2, y:-2}, {x:2, y:-2}, {x:1, y:-45}, {x:-1, y:-45}, {x:-2, y:-2}];

	this.shadows.hour.shadow = this._initPoly(this.surface, hP).setFill([0, 0, 0, 0.1]);

	this.hands.hour = this._initPoly(this.surface, hP).setStroke({color:this.handStroke, width:1}).setFill({type:"linear", x1:0, y1:0, x2:0, y2:-27, colors:[{offset:0, color:"#fff"}, {offset:0.33, color:this.handColor}]});

	this.shadows.minute.shadow = this._initPoly(this.surface, mP).setFill([0, 0, 0, 0.1]);

	this.hands.minute = this._initPoly(this.surface, mP).setStroke({color:this.handStroke, width:1}).setFill({type:"linear", x1:0, y1:0, x2:0, y2:-38, colors:[{offset:0, color:"#fff"}, {offset:0.33, color:this.handColor}]});

	this.surface.createCircle({r:6}).setStroke({color:this.handStroke, width:2}).setFill("#fff").setTransform({dx:75, dy:75});

	this.shadows.second.shadow = this._initPoly(this.surface, sP).setFill([0, 0, 0, 0.1]);

	this.hands.second = this._initPoly(this.surface, sP).setFill(this.secondHandColor);

	this.surface.createCircle({r:4}).setFill(this.secondHandColor).setTransform({dx:75, dy:75});

	this.topLabelNode = document.createElement("div");

	with (this.topLabelNode.style) {

		position = "absolute";

		top = "3px";

		left = "0px";

		color = this.topLabelColor;

		textAlign = "center";

		width = "150px";

		fontFamily = "sans-serif";

		fontSize = "11px";

		textTransform = "uppercase";

		fontWeight = "bold";

	}

	this.topLabelNode.innerHTML = ((this.date.getHours() + this.timeZoneOffset) > 11) ? "PM" : "AM";

	this.domNode.appendChild(this.topLabelNode);

	this.labelNode = document.createElement("div");

	with (this.labelNode.style) {

		position = "absolute";

		top = "134px";

		left = "0px";

		color = this.labelColor;

		textAlign = "center";

		width = "150px";

		fontFamily = "sans-serif";

		fontSize = "10px";

		textTransform = "uppercase";

		fontWeight = "bold";

	}

	this.labelNode.innerHTML = this.label || " ";

	this.domNode.appendChild(this.labelNode);

	this.draw();

}, postCreate:function () {

	this.init();

	this.start();

}});