Replace Gridster with Gridstack and clean up styling

app/assets/javascripts/graph.js

@@ -39,6 +39,12 @@ $(function () {
     graph[widget.attr('id')].series[0].data[2].y = graph[widget.attr('id')].series[0].data[1].y;
     graph[widget.attr('id')].series[0].data[1].y = data;
 
+    var width = widget.width();
+    var height = widget.height();
+
+    graph[widget.attr('id')].width = width;
+    graph[widget.attr('id')].height = height;
+
     graph[widget.attr('id')].render();
 
     widget.find('.updated-at').html('Last updated at ' + new Date().toLocaleTimeString())

app/assets/javascripts/kiteboard.js

@@ -1,43 +1,47 @@
-//= require jquery.knob
-//= require jquery.gridster
-//= require d3.min
-//= require d3.layout.min
-//= require rickshaw.min
+//= require rickshaw-rails
+//= require gridstack-js-rails
+//= require jquery.knob.min.js
 //= require_tree .
 
-$(function () {
+$(function() {
   'use strict';
   window.Kiteboard = {
-    init: function () {
-      var contentWidth = 1240;
-      $('.gridster').width(contentWidth);
-      $('.gridster ul').gridster({
-        widget_margins: [5, 5],
-        widget_base_dimensions: [300, 360]
+    init: function() {
+      $('.grid-stack').gridstack({
+        cellHeight: 360,
+        width: 4,
+        minWidth: 1240,
+        alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
+        resizable: {
+          handles: 'e, se, s, sw, w'
+        }
       });
+      Kiteboard.resizeWidgets();
 
-      var clockWidgets = $(".gridster>ul>li[data-widget='Clock']");
-      $(clockWidgets).each(function () {
+      var clockWidgets = $(".grid-stack>.grid-stack-item[data-widget='Clock']");
+      $(clockWidgets).each(function() {
         Clock.startClock($(this));
       });
 
-      var graphWidgets = $(".gridster>ul>li[data-widget='Graph']");
-      $(graphWidgets).each(function () {
+      var graphWidgets = $(".grid-stack>.grid-stack-item[data-widget='Graph']");
+      $(graphWidgets).each(function() {
         Graph.setup($(this));
       });
+
+      $(window).resize(Kiteboard.resizeWidgets);
     },
 
-    updateWidgets: function (data) {
-      var widgets = $('.gridster>ul>li');
-      $(widgets).each(function () {
+    updateWidgets: function(data) {
+      var widgets = $('.grid-stack>.grid-stack-item');
+      $(widgets).each(function() {
         var widget = $(this);
         if (widget.data('widget') != 'Clock') {
           window[widget.data('widget')].setData(widget, data[this.id]);
         }
       });
     },
 
-    nFormatter: function (num) {
+    nFormatter: function(num) {
       if (num >= 1000000000) {
         return (num / 1000000000).toFixed(1).replace(/\.0$/, '') + 'g';
       }
@@ -48,6 +52,40 @@ $(function () {
         return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'k';
       }
       return num;
+
+    },
+
+    resizeWidgets: function() {
+      var gridStack = $('.grid-stack');
+
+      if (window.innerWidth < gridStack.width()) {
+        var grid = gridStack.gridstack({
+          cellHeight: 360,
+          width: 4,
+          minWidth: 1240,
+          alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
+          resizable: {
+            handles: 'e, se, s, sw, w'
+          }
+        }).data('gridstack');
+        grid.resizable('.grid-stack-item', false);
+        grid.movable('.grid-stack-item', false);
+        var rightMargin = (gridStack.width() - window.innerWidth) + 20;
+        $('.grid-stack-item').attr('style', 'margin-right: ' + rightMargin + 'px');
+      } else {
+        var grid = gridStack.gridstack({
+          cellHeight: 360,
+          width: 4,
+          minWidth: 1240,
+          alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
+          resizable: {
+            handles: 'e, se, s, sw, w'
+          }
+        }).data('gridstack');
+        grid.resizable('.grid-stack-item', true);
+        grid.movable('.grid-stack-item', true);
+        $('.grid-stack-item').attr('style', 'margin-right: 0px');
+      }
     }
   };
 });

app/assets/javascripts/temperature.js

@@ -1,26 +1,22 @@
 $(function () {
   'use strict';
-
   window.Temperature = window.Temperature || {};
 
   Temperature.setData = function (widget, data) {
-    widget.find('.widget-hotness').removeClass('hotness0');
-    widget.find('.widget-hotness').removeClass('hotness1');
-    widget.find('.widget-hotness').removeClass('hotness2');
-    widget.find('.widget-hotness').removeClass('hotness3');
-    widget.find('.widget-hotness').removeClass('hotness4');
+    var widgetTemperature = widget.find('.widget-temperature');
+    widgetTemperature.removeClass('temperature0', 'temperature1', 'temperature2', 'temperature3', 'temperature4');
 
-    var min = widget.find('.widget-hotness')[0].getAttribute('data-min');
-    var max = widget.find('.widget-hotness')[0].getAttribute('data-max');
+    var min = widgetTemperature[0].getAttribute('data-min');
+    var max = widgetTemperature[0].getAttribute('data-max');
 
     if (data <= min) {
-      widget.find('.widget-hotness').addClass('hotness0');
-    } else if (data >= max) {
-      widget.find('.widget-hotness').addClass('hotness4');
+      widgetTemperature.addClass('temperature0');
+    } else if(data >= max) {
+      widgetTemperature.addClass('temperature4');
     } else {
       var temperatureLevel = Math.ceil((data - min) / ((max - min) / 3));
-      var backgroundClass = 'hotness' + temperatureLevel;
-      widget.find('.widget-hotness').addClass(backgroundClass);
+      var backgroundClass = 'temperature' + temperatureLevel;
+      widgetTemperature.addClass(backgroundClass);
     }
 
     widget.find('.value').html(Kiteboard.nFormatter(data));