Merge branch 'master' of github.com:pusewicz/sonia

Gemfile

@@ -16,10 +16,10 @@ group :runtime do
   gem "haml", "2.2.24"
 end
 
-#group :test do
-  #gem "rspec"
+group :test do
+  gem "rspec"
   #gem "cucumber"
-#end
+end
 
 group :development do
   gem "yard"

lib/sonia/helpers.rb

@@ -22,17 +22,17 @@ def widget_stylesheets
 
     def joined_system_javascript
       files = %w(
-        /javascripts/swfobject.js
-        /javascripts/FABridge.js
-        /javascripts/web_socket.js
-        /javascripts/json2.js
-        /javascripts/prototype.js
-        /javascripts/effects.js
-        /javascripts/dragdrop.js
-        /javascripts/livepipe.js
-        /javascripts/window.js
-        /javascripts/resizable.js
-        /javascripts/cookie.js
+        /vendor/swfobject.js
+        /vendor/FABridge.js
+        /vendor/web_socket.js
+        /vendor/json2.js
+        /vendor/prototype.js
+        /vendor/effects.js
+        /vendor/dragdrop.js
+        /vendor/livepipe.js
+        /vendor/window.js
+        /vendor/resizable.js
+        /vendor/cookie.js
         /javascripts/storage.js
         /javascripts/sonia.js
         /javascripts/dispatcher.js

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);
     }
   }
 });

public/javascripts/pager.js

@@ -0,0 +1,123 @@
+var Pager = Class.create({
+  initialize: function(sonia) {
+    this.sonia = sonia;
+    this.pages = [];
+    this.currentPage = 0;
+    this.build();
+    setInterval(this.changePage.bind(this), 60 * 100);
+  },
+
+  addWidgetToCurrentPage: function(widgetSha) {
+    if(!this.pages[this.currentPage]) {
+      this.pages[this.currentPage] = [];
+      this.pageCount = this.pages.size();
+    }
+
+    this.getCurrentPage().push(widgetSha);
+    this.update();
+    // TODO: Remove this in final version
+    if(this.getCurrentPage().size() % 3 == 0) this.currentPage++;
+  },
+
+  changePage: function() {
+    var currPage = this.currentPage;
+    if(++this.currentPage >= this.pageCount) {
+      this.currentPage = 0;
+    }
+
+    this.transitionToNewPage(currPage, this.currentPage);
+    this.update();
+  },
+
+  transitionToNewPage: function(fromIdx, toIdx) {
+    var currentPage = this.pages[fromIdx];
+    var nextPage = this.pages[toIdx];
+
+    var viewportWidth = document.viewport.getWidth();
+    // Prepare next page widgets
+
+    var nextWidgets = nextPage.collect(function(el) {
+      return this.sonia.widgets[el];
+    }, this);
+
+    var currentWidgets = currentPage.collect(function(el) {
+      return this.sonia.widgets[el];
+    }, this);
+
+    nextWidgets.each(function(w) {
+      var destX = w.x + viewportWidth;
+      var widget = $(w.widget_id);
+      console.log("Setting", widget, "to", destX);
+      widget.setStyle({left: destX + "px"});
+      console.log("Morphing next", widget, "to", w.x);
+      widget.morph("left:" + w.x + "px", {
+        duration: 0.7,
+        transition: 'easeInOutExpo',
+        propertyTransitions: {
+          top: 'spring', left: 'easeInOutCirc'
+        }
+      });
+    });
+
+    currentWidgets.each(function(w) {
+      var destX = -(w.x + viewportWidth);
+      var widget = $(w.widget_id);
+      console.log("Morphing current", widget, "to", destX);
+      widget.morph("left:" + destX + "px", {
+        duration: 0.7,
+        transition: 'easeInOutExpo',
+        propertyTransitions: {
+          top: 'spring', left: 'easeInOutCirc'
+        }
+      });
+    });
+  },
+
+  build: function() {
+    this.buildPager();
+  },
+
+  update: function() {
+    this.buildPager();
+    this.showOnlyCurrentPageWidgets();
+  },
+
+  buildPager: function() {
+    if(this.pagerContainer) { $(this.pagerContainer).remove(); }
+    this.pagerContainer = new Element("ul", { id: "pager" });
+    this.pages.each(function(page) {
+      this.pagerContainer.insert(new Element("li", { 'class': (this.getCurrentPage() == page) ? 'current' : '' }).update("•"));
+    }, this);
+    $("widgets").insert(this.pagerContainer);
+  },
+
+  showOnlyCurrentPageWidgets: function() {
+    this.currentPageWidgets().each(function(el) {
+      //$(el).show();
+    }, this);
+
+    this.notCurrentPageWidgets().each(function(el) {
+      //$(el).hide();
+    }, this);
+  },
+
+  currentPageWidgets: function() {
+    return(this.getCurrentPage().collect(function(el) {
+      return $(el);
+    }, this));
+  },
+
+  notCurrentPageWidgets: function() {
+    var nonCurrentPages = this.pages.findAll(function(el) {
+      return(el != this.getCurrentPage());
+    }, this);
+
+    return(nonCurrentPages.flatten().collect(function(el) {
+      return $(el);
+    }));
+  },
+
+  getCurrentPage: function() {
+    return(this.pages[this.currentPage]);
+  }
+});

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,9 +26,30 @@ var Sonia = Class.create({
   onerror: function(event) {
     console.log("Received error:", event);
   },
+
+  getWidgets: function() {
+    return(this.widgets);
+  },
+
+  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;
+    //this.pager.addWidgetToCurrentPage(widget_id);
   },
+
   saveChanges: function() {
     $H(this.widgets).each(function(pair) {
       pair.value.savePosition();

public/javascripts/widget.js

@@ -4,6 +4,10 @@ var Widget = Class.create({
     this.widget_id = widget_id;
     this.title     = config.title;
     this.config    = config;
+
+    this.x = 0;
+    this.y = 0;
+
     this.buildContainer(config);
     this.build();
     this.restorePosition();
@@ -32,8 +36,11 @@ var Widget = Class.create({
   },
 
   savePosition: function() {
-    var position = { left: this.container.measure("left"), top: this.container.measure("top") };
-    Storage.set(this.attrKey("position"), position);
+    var left = this.container.measure("left");
+    var top  = this.container.measure("top");
+    if(left >= 0 && top >= 0) {
+      Storage.set(this.attrKey("position"), { left: left, top: top });
+    }
   },
 
   restorePosition: function() {
@@ -44,11 +51,30 @@ var Widget = Class.create({
 
       this.container.setStyle({ left: (left < 0) ? 0 : left + "px", top: (top < 0) ? 0 : top + "px"});
     } catch(err) {
+      this.container.setStyle({ left: "0px", top: "0px"});
       console.warn("Cound not set restore position", err);
     }
+    var viewportWidth = document.viewport.getWidth();
+    if(this.container.measure("left") >= viewportWidth) {
+      this.container.setStyle({ left: "0px", top: "0px"});
+    }
+    this.setCoordinates();
+  },
+
+  setCoordinates: function() {
+    this.x = parseInt(this.container.measure("left"));
+    this.y = parseInt(this.container.measure("top"));
+    console.log("Stored coordinates", this.x, this.y);
   },
 
   attrKey: function(attr) {
     return(this.widget_id + "_" + attr);
-  }
+  },
+
+  makeDraggable: function() {
+    new Draggable(this.container, { onEnd: function() {
+      this.savePosition();
+      this.setCoordinates();
+    }.bindAsEventListener(this)});
+  },
 });

public/stylesheets/sonia.css

@@ -1,17 +1,25 @@
+html {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
 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 {
@@ -88,3 +96,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;
+}