Extract and move rest of the widgets to /widgets

Every widget now lies in it's own directory which
contains it's ruby class, javascript and css

example/config.yml.example

@@ -30,7 +30,7 @@ Github:
   name: github
   username: your_username
   token: your_token
-  nitems: 10
+  nitems: 5
 
 YahooWeather:
   title: Weather for Paris

public/javascripts/widget.js

@@ -15,15 +15,15 @@ var Widget = Class.create({
   },
 
   handlePayload: function(message) {
-    console.log(this.title, "received message:", message);
+    console.warn(this.title, "should implement handlePayload(payload)");
   },
 
   update: function() {
-    console.warn(this.title, "should redraw");
+    console.warn(this.title, "should implement update()");
   },
 
   build: function() {
-    console.warn(this.title, "should build it's initial structure");
+    console.warn(this.title, "should implement build()");
   },
 
   buildContainer: function(config) {

public/stylesheets/sonia.css

@@ -69,7 +69,6 @@ div.widget p:after {
 div.widget img {
   float: left;
   margin: 5px;
-  border: 0px !important;
 }
 
 div.widget img.icon {
@@ -80,42 +79,3 @@ div.widget img.icon {
   top: -35px;
   right: 0;
 }
-
-
-/* TfL Lines*/
-div.tfl p {
-  position: relative;
-  width: 100%;
-}
-div.tfl p span {
-  width: 50%;
-  text-align: center;
-  margin: 0;
-  float: right;
-  line-height: 32px;
-}
-div.tfl p span.station {
-  float: left;
-}
-
-div.tfl p span.status         { text-transform: uppercase; }
-div.tfl p span.good_service   { background-color: green; color: white }
-div.tfl p span.part_suspended { background-color: #963; color: white }
-div.tfl p span.part_closure,
-div.tfl p span.planned_closure{ background-color: #F7A414; color: white }
-div.tfl p span.suspended      { background-color: black; color: white }
-div.tfl p span.severe_delays  { background-color: red; color: white; font-weight: bold }
-div.tfl p span.minor_delays   { background-color: yellow; color: black }
-div.tfl p span.unknown        { background-color: black; color: white }
-div.widget p#bakerloo         { background-color: #963; color: white }
-div.widget p#central          { background-color: #C03; color: white}
-div.widget p#circle           { background-color: #FC0 }
-div.widget p#district         { background-color: #063; color: white}
-div.widget p#docklands        { background-color: #099; }
-div.widget p#hammersmithcity  { background-color: #F9C; }
-div.widget p#jubilee          { background-color: #666; color: white }
-div.widget p#metropolitan     { background-color: #903; color: white }
-div.widget p#northern         { background-color: #000; color: white; }
-div.widget p#piccadilly       { background-color: #039; color: white; }
-div.widget p#victoria         { background-color: #39C; }
-div.widget p#waterloocity     { background-color: #6CC; }

widgets/campfire/campfire.js

@@ -0,0 +1,51 @@
+var Campfire = Class.create(Widget, {
+  initialize: function($super, widget_id, config) {
+    this.messages = [];
+    return($super(widget_id, config));
+  },
+
+  handlePayload: function(payload) {
+    if(this.messages.length >= this.config.nitems) {
+      this.messages.shift();
+    }
+    this.messages.push(payload);
+  },
+
+  build: function() {
+    this.contentContainer = this.buildContent();
+    this.headerContainer  = this.buildHeader();
+    this.iconContainer    = this.buildWidgetIcon();
+
+    this.container.insert(this.headerContainer);
+    this.container.insert(this.iconContainer);
+    this.container.insert(this.contentContainer);
+
+    new Draggable(this.container, { scroll: window });
+  },
+
+  update: function() {
+    this.contentContainer.childElements().invoke('remove');
+    this.messages.reverse(false).each(function(message) {
+      var cont = new Element('p');
+
+      cont.insert(new Element('img', { src: message.avatar, width: 48, height: 48 }));
+      cont.insert(new Element('div', { 'class': 'author' }).update(message.user));
+      cont.insert(new Element('div', { 'class': 'message' }).update(message.body));
+      cont.insert(new Element('hr' ));
+
+      this.contentContainer.insert(cont);
+    }.bind(this));
+  },
+
+  buildHeader: function() {
+    return(new Element("h2", { 'class': 'handle' }).update(this.title));
+  },
+
+  buildWidgetIcon: function() {
+    return(new Element("img", {src: "images/campfire.png", 'class': 'campfire icon'}));
+  },
+
+  buildContent: function() {
+    return(new Element("div", { 'class': "content" }));
+  },
+});

widgets/tfl/tfl.css

@@ -0,0 +1,38 @@
+/* TfL Lines*/
+
+div.tfl p {
+  position: relative;
+  width: 100%;
+}
+div.tfl p span {
+  width: 50%;
+  text-align: center;
+  margin: 0;
+  float: right;
+  line-height: 32px;
+}
+div.tfl p span.station {
+  float: left;
+}
+
+div.tfl p span.status         { text-transform: uppercase; }
+div.tfl p span.good_service   { background-color: green; color: white }
+div.tfl p span.part_suspended { background-color: #963; color: white }
+div.tfl p span.part_closure,
+div.tfl p span.planned_closure{ background-color: #F7A414; color: white }
+div.tfl p span.suspended      { background-color: black; color: white }
+div.tfl p span.severe_delays  { background-color: red; color: white; font-weight: bold }
+div.tfl p span.minor_delays   { background-color: yellow; color: black }
+div.tfl p span.unknown        { background-color: black; color: white }
+div.tfl p#bakerloo         { background-color: #963; color: white }
+div.tfl p#central          { background-color: #C03; color: white}
+div.tfl p#circle           { background-color: #FC0 }
+div.tfl p#district         { background-color: #063; color: white}
+div.tfl p#docklands        { background-color: #099; }
+div.tfl p#hammersmithcity  { background-color: #F9C; }
+div.tfl p#jubilee          { background-color: #666; color: white }
+div.tfl p#metropolitan     { background-color: #903; color: white }
+div.tfl p#northern         { background-color: #000; color: white; }
+div.tfl p#piccadilly       { background-color: #039; color: white; }
+div.tfl p#victoria         { background-color: #39C; }
+div.tfl p#waterloocity     { background-color: #6CC; }

widgets/tfl/tfl.js

@@ -0,0 +1,50 @@
+var Tfl = Class.create(Widget, {
+  initialize: function($super, widget_id, config) {
+    this.messages = [];
+    return($super(widget_id, config));
+  },
+
+  handlePayload: function(payload) {
+    this.messages = [];
+    payload.each(function(message) {
+      this.messages.push(message);
+    }.bind(this));
+  },
+
+  build: function() {
+    this.contentContainer = this.buildContent();
+    this.headerContainer  = this.buildHeader();
+    this.iconContainer    = this.buildWidgetIcon();
+
+    this.container.insert(this.headerContainer);
+    this.container.insert(this.iconContainer);
+    this.container.insert(this.contentContainer);
+
+    new Draggable(this.container, { scroll: window });
+  },
+
+  update: function() {
+    this.contentContainer.childElements().invoke('remove');
+
+    this.messages.each(function(message) {
+      var cont = new Element('p', { id: message.id });
+
+      cont.insert(new Element('span', { 'class': 'station' }).update(message.name.replace("&", "&")));
+      cont.insert(new Element('span', { 'class': "status " + message.status.replace(" ", "_")}).update(message.status));
+
+      this.contentContainer.insert(cont);
+    }.bind(this));
+  },
+
+  buildWidgetIcon: function() {
+    return(new Element("img", {src: "images/tfl.png",  'class': 'tfl icon'}));
+  },
+
+  buildHeader: function() {
+    return(new Element("h2", { 'class': 'handle' }).update(this.title));
+  },
+
+  buildContent: function() {
+    return(new Element("div", { 'class': "content" }));
+  },
+});

public/javascripts/widgets/twitter.js → widgets/twitter/twitter.js

@@ -3,29 +3,35 @@ var Twitter = Class.create(Widget, {
     this.messages = [];
     return($super(widget_id, config));
   },
-  receive: function(payload) {
+
+  handlePayload: function(payload) {
     if(this.messages.length >= this.config.nitems) {
       this.messages.shift();
     }
     this.messages.push(payload);
-    this.update();
   },
+
   build: function() {
+    this.messagesContainer = this.buildMessages();
+    this.headerContainer = this.buildHeader();
+
+    this.container.insert(this.headerContainer);
     this.container.insert(this.buildWidgetIcon());
-    this.header_container = this.buildHeader();
-    this.container.insert(this.header_container);
-    this.messages_container = this.buildMessages();
-    this.container.insert(this.messages_container);
+    this.container.insert(this.messagesContainer);
+
+    new Draggable(this.container, { scroll: window });
   },
+
   update: function() {
-    this.messages_container.childElements().invoke('remove');
+    this.messagesContainer.childElements().invoke('remove');
     this.messages.reverse(false).each(function(message) {
       var cont = new Element('p');
       cont.insert(new Element('img', { src: message.profile_image_url }));
       cont.insert(new Element('div', { 'class': 'author' }).update(message.user));
-      cont.insert(document.createTextNode(message.text.replace(/http.*\w/ig,"")));
-      cont.insert(new Element('hr' ))
-      this.messages_container.insert(cont);
+      cont.insert(new Element('div', { 'class': 'message' }).update(message.text.replace(/http.*\w/ig,"[link]")));
+      cont.insert(new Element('hr' ));
+
+      this.messagesContainer.insert(cont);
     }.bind(this));
   },
 
@@ -34,7 +40,7 @@ var Twitter = Class.create(Widget, {
   },
 
   buildWidgetIcon: function() {
-    return(new Element("img", { src: "images/twitter.png", width: 32, height: 32, className: 'twitter icon'}));
+    return(new Element("img", { src: "images/twitter.png", 'class': 'twitter icon'}));
   },
 
   buildMessages: function() {