From 88de7a4c75165cd9c41576117a4caabbf18384b9 Mon Sep 17 00:00:00 2001
From: Tj Holowaychuk <tj@vision-media.ca>
Date: Fri, 22 Jul 2011 09:59:13 -0700
Subject: [PATCH] started loading indicator

---
 lib/http/public/javascripts/loading.js  | 111 ++++++++++++++++++++++++
 lib/http/public/javascripts/main.js     |  10 +++
 lib/http/public/javascripts/progress.js |  15 +++-
 lib/http/public/stylesheets/main.styl   |   3 +
 lib/http/views/job/list.jade            |   2 +-
 lib/http/views/layout.jade              |   1 +
 6 files changed, 140 insertions(+), 2 deletions(-)
 create mode 100644 lib/http/public/javascripts/loading.js

diff --git a/lib/http/public/javascripts/loading.js b/lib/http/public/javascripts/loading.js
new file mode 100644
index 00000000..58e10400
--- /dev/null
+++ b/lib/http/public/javascripts/loading.js
@@ -0,0 +1,111 @@
+
+/*!
+ * kue - LoadingIndicator
+ * Copyright (c) 2011 LearnBoost <dev@learnboost.com>
+ * MIT Licensed
+ */
+
+/**
+ * Initialize a new `LoadingIndicator`.
+ */
+
+function LoadingIndicator() {
+  this.size(0);
+  this.fontSize(9);
+  this.font('helvetica, arial, sans-serif');
+}
+
+/**
+ * Set size to `n`.
+ *
+ * @param {Number} n
+ * @return {LoadingIndicator} for chaining
+ * @api public
+ */
+
+LoadingIndicator.prototype.size = function(n){
+  this._size = n;
+  return this;
+};
+
+/**
+ * Set font size to `n`.
+ *
+ * @param {Number} n
+ * @return {LoadingIndicator} for chaining
+ * @api public
+ */
+
+LoadingIndicator.prototype.fontSize = function(n){
+  this._fontSize = n;
+  return this;
+};
+
+/**
+ * Set font `family`.
+ *
+ * @param {String} family
+ * @return {LoadingIndicator} for chaining
+ */
+
+LoadingIndicator.prototype.font = function(family){
+  this._font = family;
+  return this;
+};
+
+/**
+ * Update pos to `n`.
+ *
+ * @param {Number} n
+ * @return {LoadingIndicator} for chaining
+ */
+
+LoadingIndicator.prototype.update = function(n){
+  this.percent = n;
+  return this;
+};
+
+/**
+ * Draw on `ctx`.
+ *
+ * @param {CanvasRenderingContext2d} ctx
+ * @return {LoadingIndicator} for chaining
+ */
+
+LoadingIndicator.prototype.draw = function(ctx){
+  var percent = Math.min(this.percent, 100)
+    , size = this._size
+    , half = size / 2
+    , x = half
+    , y = half
+    , rad = half - 1
+    , fontSize = this._fontSize;
+
+  ctx.font = fontSize + 'px ' + this._font;
+
+  var angle = Math.PI * 2 * (percent / 100);
+  ctx.clearRect(0, 0, size, size);
+
+  // outer circle
+  ctx.strokeStyle = '#9f9f9f';
+  ctx.beginPath();
+  ctx.arc(x, y, rad, 0, angle, false);
+  ctx.stroke();
+
+  // inner circle
+  ctx.strokeStyle = '#eee';
+  ctx.beginPath();
+  ctx.arc(x, y, rad - 1, 0, angle, true);
+  ctx.stroke();
+
+  // text
+  var text = 'Loading'
+    , w = ctx.measureText(text).width;
+
+  ctx.fillText(
+      text
+    , x - w / 2 + 1
+    , y + fontSize / 2 - 1);
+
+  return this;
+};
diff --git a/lib/http/public/javascripts/main.js b/lib/http/public/javascripts/main.js
index 219e5af7..64b2f027 100644
--- a/lib/http/public/javascripts/main.js
+++ b/lib/http/public/javascripts/main.js
@@ -44,6 +44,16 @@ var sort = 'asc';
  */
 
 function init(state) {
+  var canvas = o('#loading').get(0)
+    , ctx = canvas.getContext('2d')
+    , loading = new LoadingIndicator;
+
+  var n = 0;
+  loading.size(canvas.width);
+  setInterval(function(){
+    loading.update(++n % 100).draw(ctx); 
+  }, 10);
+
   pollStats(1000);
   show(state)();
   o('li.inactive a').click(show('inactive'));
diff --git a/lib/http/public/javascripts/progress.js b/lib/http/public/javascripts/progress.js
index d89ae280..3a5a2195 100644
--- a/lib/http/public/javascripts/progress.js
+++ b/lib/http/public/javascripts/progress.js
@@ -29,6 +29,19 @@ Progress.prototype.size = function(n){
   return this;
 };
 
+/**
+ * Set text to `str`.
+ *
+ * @param {String} str
+ * @return {Progress} for chaining
+ * @api public
+ */
+
+Progress.prototype.text = function(str){
+  this._text = str;
+  return this;
+};
+
 /**
  * Set font size to `n`.
  *
@@ -100,7 +113,7 @@ Progress.prototype.draw = function(ctx){
   ctx.stroke();
 
   // text
-  var text = (percent | 0) + '%'
+  var text = this._text || (percent | 0) + '%'
     , w = ctx.measureText(text).width;
 
   ctx.fillText(
diff --git a/lib/http/public/stylesheets/main.styl b/lib/http/public/stylesheets/main.styl
index 6357695f..780bd90c 100644
--- a/lib/http/public/stylesheets/main.styl
+++ b/lib/http/public/stylesheets/main.styl
@@ -45,3 +45,6 @@ table
   reset-table()
   tr td
     padding: 2px 5px
+
+#loading
+  margin-left: 25px
\ No newline at end of file
diff --git a/lib/http/views/job/list.jade b/lib/http/views/job/list.jade
index 0ab98d4d..237ccda1 100644
--- a/lib/http/views/job/list.jade
+++ b/lib/http/views/job/list.jade
@@ -6,5 +6,5 @@ script
   });
 
 
+canvas#loading(width=50, height=50)
 #jobs
-#loading
\ No newline at end of file
diff --git a/lib/http/views/layout.jade b/lib/http/views/layout.jade
index dd9e0661..c622eef8 100644
--- a/lib/http/views/layout.jade
+++ b/lib/http/views/layout.jade
@@ -7,6 +7,7 @@ html
     script(src='/javascripts/jquery.ext.js')
     script(src='/javascripts/caustic.js')
     script(src='/javascripts/progress.js')
+    script(src='/javascripts/loading.js')
     script(src='/javascripts/job.js')
     script(src='/javascripts/main.js')
   body