WIP pages

GunioRobot · May 3, 2010 · 8eac4f1 · 8eac4f1
1 parent 7be1742
commit 8eac4f1
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 31 deletions.
diff --git a/public/javascripts/dispatcher.js b/public/javascripts/dispatcher.js
@@ -16,18 +16,7 @@ var Dispatcher = Class.create({
         console.log("Missing data in message message:", json.message);
       }
     } else if(json.setup) {
-      var widgets = json.setup;
-      widgets.each(function(payload) {
-        var widget    = payload.widget;
-        var widget_id = payload.widget_id;
-        var config    = payload.config;
-        if(widget && widget_id && config) {
-          var widget_object = eval("new " + widget + "(widget_id, config)");
-          this.sonia.addWidget(widget_id, widget_object);
-        } else {
-          console.log("Missing data in setup message:", json.setup);
-        }
-      }.bind(this));
+      this.sonia.addWidgets(json.setup);
     }
   }
 });
diff --git a/public/javascripts/pager.js b/public/javascripts/pager.js
@@ -0,0 +1,25 @@
+var Pager = Class.create({
+  initialize: function(sonia) {
+    this.sonia = sonia;
+    this.pages = [["sha1"], ["sha2"], ["sha3"]];
+    this.currentPage = 0;
+    this.build();
+  },
+
+  build: function() {
+    this.buildPager();
+  },
+
+  update: function() {
+    this.buildPager();
+  },
+
+  buildPager: function() {
+    if(this.pager) this.pager.remove();
+    this.pager = new Element("ul", { id: "pager" });
+    this.pages.each(function(page) {
+      this.pager.insert(new Element("li", { 'class': (this.pages[this.currentPage] == page) ? 'current' : '' }).update("&bull;"));
+    }.bind(this));
+    $("widgets").insert(this.pager);
+  }
+});
diff --git a/public/javascripts/sonia.js b/public/javascripts/sonia.js
@@ -9,6 +9,8 @@ var Sonia = Class.create({
     this.websocket.onmessage = this.onmessage.bind(this);
     this.websocket.onclose   = this.onclose.bind(this);
     this.websocket.onerror   = this.onerror.bind(this);
+
+    this.pager = new Pager(this);
   },
   onopen: function() {
     console.log("Socket opened... ");
@@ -24,6 +26,20 @@ var Sonia = Class.create({
   onerror: function(event) {
     console.log("Received error:", event);
   },
+
+  addWidgets: function(setup) {
+    setup.each(function(payload) {
+      var widget    = payload.widget;
+      var widget_id = payload.widget_id;
+      var config    = payload.config;
+      if(widget && widget_id && config) {
+        var widget_object = eval("new " + widget + "(widget_id, config)");
+        this.addWidget(widget_id, widget_object);
+      } else {
+        console.log("Missing data in setup message:", json.setup);
+      }
+    }.bind(this));
+  },
   addWidget: function(widget_id, widget) {
     this.widgets[widget_id] = widget;
   },

diff --git a/public/stylesheets/sonia.css b/public/stylesheets/sonia.css
@@ -1,17 +1,24 @@
+html {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
 body * {
   cursor: default;
 }
 
 body {
-  background: black; /* fallback for older/unsupporting browsers */
-  background-image: -webkit-gradient(linear,
-    left bottom,
-    left top,
-    color-stop(0.12, rgb(77,77,77)),
-    color-stop(0.59, rgb(0,0,0)));
-  color: white;
-  font-size: 14px;
-  font-family: "Optima";
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  color: #EAEAEA;
+  font-size: 16px;
+  font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 300;
 }
 
 h1 {
@@ -79,3 +86,21 @@ div.widget img.icon {
   top: -35px;
   right: 0;
 }
+
+#pager {
+  list-style-type: none;
+  list-style-position: inline;
+  width: 128px;
+  margin: 0px auto;
+  text-align: center;
+}
+
+#pager li {
+  display: inline;
+  color: #363636;
+  padding: 8px 8px;
+}
+
+#pager li.current {
+  color: #EAEAEA;
+}
diff --git a/views/index.haml b/views/index.haml
@@ -4,25 +4,26 @@
     %title Sonia - Awesome Office Dashboard
     %meta(charset="utf-8")
     %link(media="screen" rel="stylesheet" type="text/css" href="/blueprint/reset.css")
-    %link(media="screen" rel="stylesheet" type="text/css" href="/blueprint/grid.css")
     %link(media="screen" rel="stylesheet" type="text/css" href="/stylesheets/sonia.css")
     - widget_stylesheets.each do |css|
       %link(media="screen" rel="stylesheet" type="text/css" href=css)
-    %script(type="text/javascript" src="/javascripts/swfobject.js")
-    %script(type="text/javascript" src="/javascripts/FABridge.js")
+    %script(type="text/javascript" src="/vendor/swfobject.js")
+    %script(type="text/javascript" src="/vendor/FABridge.js")
     %script(type="text/javascript" src="/javascripts/web_socket.js")
-    %script(type="text/javascript" src="/javascripts/prototype.js")
-    %script(type="text/javascript" src="/javascripts/scriptaculous.js")
-    %script(type="text/javascript" src="/javascripts/livepipe.js")
-    %script(type="text/javascript" src="/javascripts/window.js")
-    %script(type="text/javascript" src="/javascripts/resizable.js")
-    %script(type="text/javascript" src="/javascripts/cookie.js")
+    %script(type="text/javascript" src="/vendor/prototype.js")
+    %script(type="text/javascript" src="/vendor/scriptaculous.js")
+    %script(type="text/javascript" src="/vendor/livepipe.js")
+    %script(type="text/javascript" src="/vendor/window.js")
+    %script(type="text/javascript" src="/vendor/resizable.js")
+    %script(type="text/javascript" src="/vendor/cookie.js")
     %script(type="text/javascript" src="/javascripts/storage.js")
     %script(type="text/javascript" src="/javascripts/sonia.js")
     %script(type="text/javascript" src="/javascripts/dispatcher.js")
     %script(type="text/javascript" src="/javascripts/widget.js")
+    %script(type="text/javascript" src="/javascripts/pager.js")
     - widget_javascripts.each do |js|
       %script(type="text/javascript" src=js)
     %script(type="text/javascript" src="/javascripts/init.js")
-  %body#widgets
+  %body
     %h1 project sonia
+    #widgets