departr 0.2

data/public/javascripts/4_coolclock.js

@@ -0,0 +1,325 @@
+/**
+ * CoolClock 2.1.4
+ * Copyright 2010, Simon Baird
+ * Released under the BSD License.
+ *
+ * Display an analog clock using canvas.
+ * http://randomibis.com/coolclock/
+ *
+ */
+
+// Constructor for CoolClock objects
+window.CoolClock = function(options) {
+	return this.init(options);
+}
+
+// Config contains some defaults, and clock skins
+CoolClock.config = {
+	tickDelay: 1000,
+	longTickDelay: 15000,
+	defaultRadius: 85,
+	renderRadius: 100,
+	defaultSkin: "solt",
+	// Should be in skin probably...
+	// (TODO: allow skinning of digital display)
+	showSecs: true,
+	showAmPm: true,
+
+	skins:	{
+		solt: {
+			outerBorder: { lineWidth: 4, radius:97, color: "#ccc", alpha: 1 },
+			smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "#ccc", alpha: 1 },
+			largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "#ccc", alpha: 1 },
+			hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "black", alpha: 1 },
+			minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "black", alpha: 1 },
+			secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "#54ACFF", alpha: 1 },
+			secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "#54ACFF", color: "red", alpha: 1 }
+		}/*,
+		swissRail: {
+			outerBorder: { lineWidth: 2, radius:95, color: "black", alpha: 1 },
+			smallIndicator: { lineWidth: 2, startAt: 88, endAt: 92, color: "black", alpha: 1 },
+			largeIndicator: { lineWidth: 4, startAt: 79, endAt: 92, color: "black", alpha: 1 },
+			hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "black", alpha: 1 },
+			minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "black", alpha: 1 },
+			secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: 1 },
+			secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 1 }
+		},
+		chunkySwiss: {
+			outerBorder: { lineWidth: 4, radius:97, color: "black", alpha: 1 },
+			smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "black", alpha: 1 },
+			largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "black", alpha: 1 },
+			hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "black", alpha: 1 },
+			minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "black", alpha: 1 },
+			secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 },
+			secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 }
+		},
+		chunkySwissOnBlack: {
+			outerBorder: { lineWidth: 4, radius:97, color: "white", alpha: 1 },
+			smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "white", alpha: 1 },
+			largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "white", alpha: 1 },
+			hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "white", alpha: 1 },
+			minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "white", alpha: 1 },
+			secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 },
+			secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 }
+		}
+*/
+	},
+
+	// Test for IE so we can nurse excanvas in a couple of places
+	isIE: !!document.all,
+
+	// Will store (a reference to) each clock here, indexed by the id of the canvas element
+	clockTracker: {},
+
+	// For giving a unique id to coolclock canvases with no id
+	noIdCount: 0
+};
+
+// Define the CoolClock object's methods
+CoolClock.prototype = {
+
+	// Initialise using the parameters parsed from the colon delimited class
+	init: function(options) {
+		// Parse and store the options
+		this.canvasId       = options.canvasId;
+		this.skinId         = options.skinId || CoolClock.config.defaultSkin;
+		this.displayRadius  = options.displayRadius || CoolClock.config.defaultRadius;
+		this.showSecondHand = typeof options.showSecondHand == "boolean" ? options.showSecondHand : true;
+		this.gmtOffset      = (options.gmtOffset !== null && options.gmtOffset !== '') ? parseFloat(options.gmtOffset) : null;
+		this.showDigital    = typeof options.showDigital == "boolean" ? options.showDigital : true;
+		this.logClock       = typeof options.logClock == "boolean" ? options.logClock : false;
+		this.logClockRev    = typeof options.logClock == "boolean" ? options.logClockRev : false;
+
+		this.tickDelay      = CoolClock.config[ this.showSecondHand ? "tickDelay" : "longTickDelay" ];
+    this.label          = options.label || false;
+    this.fontSize       = options.fontSize || "15px";
+
+		// Get the canvas element
+		this.canvas = document.getElementById(this.canvasId);
+
+		// Make the canvas the requested size. It's always square.
+    this.width = this.displayRadius*2;
+    this.height = this.displayRadius*2 + parseInt(this.fontSize) * 2;
+		this.canvas.setAttribute("width",this.width);
+		this.canvas.setAttribute("height",this.height);
+		this.canvas.style.width = this.width + "px";
+		this.canvas.style.height = this.height + "px";
+
+		// Explain me please...?
+		this.renderRadius = CoolClock.config.renderRadius;
+		this.scale = this.displayRadius / this.renderRadius;
+
+		// Initialise canvas context
+		this.ctx = this.canvas.getContext("2d");
+		this.ctx.scale(this.scale,this.scale);
+
+		// Keep track of this object
+		CoolClock.config.clockTracker[this.canvasId] = this;
+
+		// should we be running the clock?
+		this.active = true;
+		this.tickTimeout = null;
+
+		// Start the clock going
+		this.tick();
+
+		return this;
+	},
+
+	// Draw a circle at point x,y with params as defined in skin
+	fullCircleAt: function(x,y,skin) {
+		this.ctx.save();
+		this.ctx.globalAlpha = skin.alpha;
+		this.ctx.lineWidth = skin.lineWidth;
+
+		if (!CoolClock.config.isIE) {
+			this.ctx.beginPath();
+		}
+
+		if (CoolClock.config.isIE) {
+			// excanvas doesn't scale line width so we will do it here
+			this.ctx.lineWidth = this.ctx.lineWidth * this.scale;
+		}
+
+		this.ctx.arc(x, y, skin.radius, 0, 2*Math.PI, false);
+
+		if (CoolClock.config.isIE) {
+			// excanvas doesn't close the circle so let's fill in the tiny gap
+			this.ctx.arc(x, y, skin.radius, -0.1, 0.1, false);
+		}
+
+		if (skin.fillColor) {
+			this.ctx.fillStyle = skin.fillColor
+			this.ctx.fill();
+		}
+		else {
+			// XXX why not stroke and fill
+			this.ctx.strokeStyle = skin.color;
+			this.ctx.stroke();
+		}
+		this.ctx.restore();
+	},
+
+	// Draw some text centered vertically and horizontally
+	drawTextAt: function(theText,x,y,bold) {
+		this.ctx.save();
+		this.ctx.font = (bold?'bold ':'') + this.fontSize + ' sans-serif';
+		var tSize = this.ctx.measureText(theText);
+		if (!tSize.height) tSize.height = 15; // no height in firefox.. :(
+		this.ctx.fillText(theText,x - tSize.width/2,y - tSize.height/2);
+		this.ctx.restore();
+	},
+
+	lpad2: function(num) {
+		return (num < 10 ? '0' : '') + num;
+	},
+
+	tickAngle: function(second) {
+		// Log algorithm by David Bradshaw
+		var tweak = 3; // If it's lower the one second mark looks wrong (?)
+		if (this.logClock) {
+			return second == 0 ? 0 : (Math.log(second*tweak) / Math.log(60*tweak));
+		}
+		else if (this.logClockRev) {
+			// Flip the seconds then flip the angle (trickiness)
+			second = (60 - second) % 60;
+			return 1.0 - (second == 0 ? 0 : (Math.log(second*tweak) / Math.log(60*tweak)));
+		}
+		else {
+			return second/60.0;
+		}
+	},
+
+	timeText: function(hour,min,sec) {
+		var c = CoolClock.config;
+		return '' +
+			(c.showAmPm ? ((hour%12)==0 ? 12 : (hour%12)) : hour) + ':' +
+			this.lpad2(min) +
+			(c.showSecs ? ':' + this.lpad2(sec) : '') +
+			(c.showAmPm ? (hour < 12 ? ' am' : ' pm') : '')
+		;
+	},
+
+	// Draw a radial line by rotating then drawing a straight line
+	// Ha ha, I think I've accidentally used Taus, (see http://tauday.com/)
+	radialLineAtAngle: function(angleFraction,skin) {
+		this.ctx.save();
+		this.ctx.translate(this.renderRadius,this.renderRadius);
+		this.ctx.rotate(Math.PI * (2.0 * angleFraction - 0.5));
+		this.ctx.globalAlpha = skin.alpha;
+		this.ctx.strokeStyle = skin.color;
+		this.ctx.lineWidth = skin.lineWidth;
+
+		if (CoolClock.config.isIE)
+			// excanvas doesn't scale line width so we will do it here
+			this.ctx.lineWidth = this.ctx.lineWidth * this.scale;
+
+		if (skin.radius) {
+			this.fullCircleAt(skin.startAt,0,skin)
+		}
+		else {
+			this.ctx.beginPath();
+			this.ctx.moveTo(skin.startAt,0)
+			this.ctx.lineTo(skin.endAt,0);
+			this.ctx.stroke();
+		}
+		this.ctx.restore();
+	},
+
+	render: function(hour,min,sec) {
+		// Get the skin
+		var skin = CoolClock.config.skins[this.skinId];
+		if (!skin) skin = CoolClock.config.skins[CoolClock.config.defaultSkin];
+
+		// Clear
+		this.ctx.clearRect(0,0,this.renderRadius*2,this.renderRadius*2+2*(parseInt(this.fontSize)+10));
+
+		// Draw the outer edge of the clock
+		if (skin.outerBorder)
+			this.fullCircleAt(this.renderRadius,this.renderRadius,skin.outerBorder);
+
+		// Draw the tick marks. Every 5th one is a big one
+		for (var i=0;i<60;i++) {
+			(i%5)  && skin.smallIndicator && this.radialLineAtAngle(this.tickAngle(i),skin.smallIndicator);
+			!(i%5) && skin.largeIndicator && this.radialLineAtAngle(this.tickAngle(i),skin.largeIndicator);
+		}
+
+		// Write the time
+		if (this.showDigital) {
+			this.drawTextAt(
+				this.timeText(hour,min,sec),
+				this.renderRadius,
+				this.renderRadius*2+parseInt(this.fontSize)+15
+			);
+		}
+
+    if (this.label) {
+			this.drawTextAt(
+				this.label,
+				this.renderRadius,
+				this.renderRadius*2+2*(parseInt(this.fontSize)+10),
+        true
+			);
+    }
+
+		// Draw the hands
+		if (skin.hourHand)
+			this.radialLineAtAngle(this.tickAngle(((hour%12)*5 + min/12.0)),skin.hourHand);
+
+		if (skin.minuteHand)
+			this.radialLineAtAngle(this.tickAngle((min + sec/60.0)),skin.minuteHand);
+
+		if (this.showSecondHand && skin.secondHand)
+			this.radialLineAtAngle(this.tickAngle(sec),skin.secondHand);
+
+		// Second hand decoration doesn't render right in IE so lets turn it off
+		if (!CoolClock.config.isIE && this.showSecondHand && skin.secondDecoration)
+			this.radialLineAtAngle(this.tickAngle(sec),skin.secondDecoration);
+	},
+
+	// Check the time and display the clock
+	refreshDisplay: function() {
+		var now = new Date();
+		if (this.gmtOffset !== null) {
+			// Use GMT + gmtOffset
+			var offsetNow = new Date(now.valueOf() + (this.gmtOffset * 1000 * 60 * 60));
+			this.render(offsetNow.getUTCHours(),offsetNow.getUTCMinutes(),offsetNow.getUTCSeconds());
+		}
+		else {
+			// Use local time
+			this.render(now.getHours(),now.getMinutes(),now.getSeconds());
+		}
+	},
+
+	// Set timeout to trigger a tick in the future
+	nextTick: function() {
+		this.tickTimeout = setTimeout("CoolClock.config.clockTracker['"+this.canvasId+"'].tick()",this.tickDelay);
+	},
+
+	// Check the canvas element hasn't been removed
+	stillHere: function() {
+		return document.getElementById(this.canvasId) != null;
+	},
+
+	// Stop this clock
+	stop: function() {
+		this.active = false;
+		clearTimeout(this.tickTimeout);
+	},
+
+	// Start this clock
+	start: function() {
+		if (!this.active) {
+			this.active = true;
+			this.tick();
+		}
+	},
+
+	// Main tick handler. Refresh the clock then setup the next tick
+	tick: function() {
+		if (this.stillHere() && this.active) {
+			this.refreshDisplay()
+			this.nextTick();
+		}
+	}
+};

data/public/javascripts/5_appliction.js

@@ -0,0 +1,144 @@
+var Application = {
+    init: function() {
+        // Sign In/Out & Dedicated GUI
+        if (Cookie.read('user') && Cookie.read('session')) {
+            // Signed in
+ 
+            var signout = $('signout');
+            signout.addEvent('click', function(e) {
+                e.stop();
+                Cookie.dispose('user');
+                Cookie.dispose('session');
+                Cookie.dispose('name');
+                Cookie.dispose('provider');
+                window.location.reload();
+            }).setStyle('display', 'inline');
+
+            // Edit commands
+            $('edit').addEvent('click', Command.edit).setStyle('display', 'inline');
+
+            // Settings
+            $('settings').addEvent('click', Application.settings).setStyle('display', 'inline');
+
+            new Element('a', {
+                id: 'profile',
+                text: Cookie.read('name')
+            }).inject($('header'), 'top');
+        } else {
+            // Not signed in
+            var signin = $('signin');
+            if (signin) {
+                signin.addEvent('click', function(e) {
+                    e.stop();
+
+                    var modal = new SimpleModal({
+                        draggable: false,
+                        hideFooter: true,
+                        width: 420,
+                        offsetTop: 150
+                    });
+                    modal.show({
+                        model: "modal",
+                        title: "Sign in",
+                        contents: "<iframe frameborder='0' width='400' height='240' src='" + signin.href + "'></iframe>"
+                    });
+                }).setStyle('display', 'inline');
+            }
+        }
+
+        // Help
+        $('help').addEvent('click', Application.help);
+    },
+
+    // Display a notice (instead of alert)
+    notice: function(msg) {
+        var modal = new SimpleModal({
+            draggable: false,
+            hideHeader: true,
+            closeButton: false,
+            width: 300,
+            offsetTop: 150
+        });
+        modal.show({
+            model: "alert",
+            contents: msg
+        });
+    },
+
+    // Help
+    help: function() {
+        var modal = new SimpleModal({
+            draggable: false,
+            hideFooter: true,
+            width: 900
+        });
+        modal.show({
+            model: "modal-ajax",
+            title: "Help",
+            param: { url: "/help" }
+        });
+    },
+
+
+    // Edit settings
+    settings: function() {
+        var modal = new SimpleModal({
+            draggable: false,
+            offsetTop: 150,
+            width: 450
+        });
+        modal.addButton("Save", "btn primary", function() {
+            this.hide();
+            new Request({
+                url: '/settings',
+                urlEncoded: false,
+                headers: { 'Content-Type': 'application/json' },
+                onFailure: function() {
+                    Application.notice('An error occured');
+                }
+            }).post(JSON.encode(Settings));
+        })
+        modal.show({
+            model: "modal-ajax",
+            title: "Settings",
+            param: {
+                url: "/settings",
+                onRequestComplete: function() {
+                    $('setting_default_search').addEvent('change', function() {
+                        Settings.default_search = this.value;
+                    });
+                    $('setting_default_search').value = Settings.default_search;
+
+                    $('setting_open_in_new_page').addEvent('click', function() {
+                        Settings.open_in_new_page = !Settings.open_in_new_page;
+                    })
+                    $('setting_open_in_new_page').checked = (Settings.open_in_new_page === true);
+
+                    $('setting_github').addEvent('click', function() {
+                        Settings.github = !Settings.github;
+                        $(window.parent.document).getElement('#github').setStyle('display', Settings.github === true ? 'block': 'none');
+                    })
+                    $('setting_github').checked = (Settings.github === true);
+
+                    $('setting_calendar').addEvent('click', function() {
+                        Settings.calendar = !Settings.calendar;
+                        $(window.parent.document).getElement('#date').setStyle('display', Settings.calendar === true ? 'block': 'none');
+                    })
+                    $('setting_calendar').checked = (Settings.calendar === true);
+
+                    $('setting_clock1').addEvent('change', function() {
+                        Settings.clock1 = this.value;
+                    });
+
+                    $('setting_clock2').addEvent('change', function() {
+                        Settings.clock2 = this.value;
+                    });
+
+                    $('setting_clock3').addEvent('change', function() {
+                        Settings.clock3 = this.value;
+                    });
+                }
+            }
+        });
+    }
+}