Lot of changes in gridster

app/assets/javascripts/jquery.gridster.js

@@ -1328,6 +1328,7 @@
     */
     fn.draggable = function() {
         var self = this;
+
         var draggable_options = $.extend(true, {}, this.options.draggable, {
             offset_left: this.options.widget_margins[0],
             start: function(event, ui) {
@@ -3204,6 +3205,7 @@
             max_rows += (+$(w).attr('data-sizey'));
         });
 
+
         this.cols = Math.max(min_cols, cols, this.options.min_cols);
         this.rows = Math.max(max_rows, this.options.min_rows);
 

app/assets/javascripts/orbitdesktop.js

@@ -420,9 +420,10 @@ var orbitDesktop = function(dom){
       $.getJSON("/desktop/getgroups",{sectionid:id},function(tiles){
         tiles.sort(o.sortJSON("position",true,parseInt)); 
         var tilecolors = o.themesettings.tilecolor;
+        var totaltiles_in_a_row = 4;
         var opacity = ["op05","op06","op07","op08","op09"];
         var row = 1,col = 1,x = 1,y = 1; 
-        var $group = $('<div class="grid"></div>');
+        var $group = $('<div class="grid gridster"></div>');
         var $ul = $('<ul style="margin: -6px 0 0 -6px;"></ul>');
         
         $.each(tiles,function(i,tile){
@@ -436,21 +437,72 @@ var orbitDesktop = function(dom){
           var tilecolor = tilecolors[Math.floor(Math.random()*tilecolors.length)];
           var op = opacity[Math.floor(Math.random()*opacity.length)];
           if(tile.data_category == "app")
-            $li =  $('<li data-id="'+tile.id+'" class="element" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><a href="'+tile.data_content+'" class="appicon"  onclick="return false;"><img src="'+o.iconPath+tile.data_content+'.png" alt="" ></a><h1 class="appname thmtxt">'+tile.title+'</h1></li>');
+            $li =  $('<li data-id="'+tile.id+'" class="widget" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><a href="'+tile.data_content+'" class="appicon"  onclick="return false;"><img src="'+o.iconPath+tile.data_content+'.png" alt="" ></a><h1 class="appname thmtxt">'+tile.title+'</h1></li>');
           else
-            $li =  $('<li data-id="'+tile.id+'" class="element" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'" js-link="'+tile.js[0].url+'" css-link="'+tile.css.url+'"><span class="tile '+tilecolor+' '+op+'"></span><div class="appholder">Loading...</div><h1 class="appname thmtxt">'+tile.title+'</h1></li>');
+            $li =  $('<li data-id="'+tile.id+'" class="widget" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'" js-link="'+tile.js[0].url+'" css-link="'+tile.css.url+'"><span class="tile '+tilecolor+' '+op+'"></span><div class="appholder">Loading...</div><h1 class="appname thmtxt">'+tile.title+'</h1></li>');
 
           row = row + y;
           
           $ul.append($li);
         })
         $group.append($ul);
-        console.log($group);
         $("div#desktop div#group_wrapper").append($group);
-        o.gridvar = $(".grid ul").gridster({
+        var dragged = null,draggable,lastpos = [];
+        o.gridvar = $(".grid ul").find("> li ").mousedown(function(e){
+          !draggable;
+           dragged = $(this);
+           lastpos = [];
+           $(".grid ul li").each(function(){
+            lastpos.push({"col":$(this).attr("data-col"),"row":$(this).attr("data-row")})
+           })
+          }).end()
+          .gridster({
             widget_margins: [6, 6],
-          widget_base_dimensions: [120, 120]
+            widget_base_dimensions: [120, 120],
-        });
+            avoid_overlapped_widgets: true,
+            draggable : { 
+              stop: function(event, ui){
+                
+                var widgetchanged_col = dragged.attr("data-col");
+                var total = 0;
+                // console.log(widgetchanged.col);
+                // console.log(o.gridvar.serialize_changed());
+                $(".grid ul li[data-col="+widgetchanged_col+"]").each(function(i,w){
+                   var size = parseInt($(this).attr("data-sizey"));
+                  if(!isNaN(size)){
+                    total += size;
+                  }
+                })
+                 // other way to calculate the overflow is by top > height of div 
+                if(total>totaltiles_in_a_row){
+                  revertbacktiles();       
+                 }else{
+                  console.log(widgetchanged_col-1);
+                  $(".grid ul li[data-col="+(widgetchanged_col-1)+"]").each(function(i,w){
+                     var sizey = parseInt($(this).attr("data-sizey"));
+                     var sizex = parseInt($(this).attr("data-sizex"));
+                     if(sizey==1){
+                      sizex = sizex - 1;
+                     }
+                    console.log(sizex);
+
+                    if(!isNaN(sizex)){
+                      total += sizex;
+                    }
+                  })
+                  if(total>totaltiles_in_a_row){
+                    revertbacktiles(); 
+                  }
+                 }
+              } 
+            }
+        }).data('gridster');
+        var revertbacktiles = function(){
+          lastpos.push({"col":"","row":""});
+          $(".grid ul li").each(function(i){
+              $(this).attr({"data-col":lastpos[i].col,"data-row":lastpos[i].row});
+          })
+        }
           bindHandlers();
           o.initializeWidgets();
       })
@@ -1219,7 +1271,7 @@ var orbitDesktop = function(dom){
     })
   };
   this.initializeWidgets = function(){ // this function will initialize all the widgets in the desktop
-    var elements = $("#group_wrapper li.element");
+    var elements = $("#group_wrapper li.widget");
     $.each(elements,function(){
       var widget = $(this);
       if(widget.attr("data-category")=="widget"){

app/assets/stylesheets/desktop.css

@@ -2,6 +2,7 @@
  *This is a manifest file that'll automatically include all the stylesheets available in this directory
  *and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
  *the top of the compiled file, but it's generally better to create a new file per style scope.
+ *= require desktop_font
  *= require style
  *= require bootstrap
  *= require bootstrap-orbit

app/assets/stylesheets/desktop_font.css

@@ -0,0 +1 @@
+@import url(http://fonts.googleapis.com/css?family=Cuprum|Dosis:400,700|Roboto+Condensed:400,700);

app/assets/stylesheets/desktopmain.css

@@ -60,9 +60,30 @@ body {
 	}
 a, a:hover { text-decoration: none; color: #666; }
 a:focus { outline: none; }
+
+/* box-sizing element */
+.appholder, .appname {
+	-webkit-box-sizing: border-box;
+	   -moz-box-sizing: border-box;
+	        box-sizing: border-box;
+}
+
+.admbg { background-color: #fff; }
+.admbg2 { background-color: #ddd; }
+.admtxt { color: #666; }
+.admtxt:hover { color: #666; }
+.hfn {
+	font-size: 15px;
+	line-height: 36px;
+	float: left;
+	margin: 12px 12px 0 0;
+	position: relative;
+	}
+.thmtxt { position: relative; }
+
 /* desktop layout */
 #container {
-	margin: 48px 0 0 156px;
+	padding: 48px 0 0 156px;
 	}
 #header {
 	padding: 0 0 12px 0;
@@ -117,6 +138,7 @@ a:focus { outline: none; }
 	padding: 0 6px;
 	font-size: 15px;
 	position: absolute;
+	z-index: 9;
 	min-width: 48px;
 	text-align: center;
 	white-space: nowrap;
@@ -165,14 +187,28 @@ a:focus { outline: none; }
 	
 .appname {
 	font-size: 15px;
-	height: 30px;
 	line-height: 30px;
+	width: 100%;
+	height: 30px;
+	padding: 0 12px;
 	overflow: hidden;
 	cursor: default;
+	position: absolute;
+	left: 0;
+	bottom: 0;
 	z-index: 3;
 	}
-.w1.h1 .appname { text-align: center; }
+[data-sizex="1"] .appname, .w1.h1 .appname {
-.w2.h2 .appname { font-size: 21px; }
+	text-align: center;
+}
+[data-sizey="2"] .appname {
+	font-size: 21px;
+}
+.hh2 .appname {
+	position: relative;
+	width: auto;
+	padding: 0;
+}
 .appicon { 
 	display: block;
 	width: 60px; 
@@ -180,6 +216,9 @@ a:focus { outline: none; }
 	margin: 0 auto;
 	position: relative;
 	}
+[data-sizex="1"] .appicon {
+	margin-top: 24px;
+}
 #sections .appicon {
 	width: 30px;
 	height: 30px;
@@ -189,16 +228,19 @@ a:focus { outline: none; }
 .appholder {
 	position: relative;
 	z-index: 2;
-	}
+	padding: 12px;
-.holder_f .appholder {
+	padding-bottom: 30px;
-	position: absolute;
 	width: 100%;
 	height: 100%;
+	overflow: hidden;
+	}
+.fullsize .appholder {
+	position: absolute;
 	padding: 0;
 	left: 0;
 	top: 0;
 	}
-.holder_f .appname { display: none; }
+.fullsize .appname { display: none; }
 .dtitle { 
 	font-size: 30px;
 	line-height: 60px;
@@ -209,18 +251,6 @@ a:focus { outline: none; }
 	}
 /*.section_slc { width: 252px; }*/
 
-.admbg { background-color: #fff; }
-.admbg2 { background-color: #ddd; }
-.admtxt { color: #666; }
-.admtxt:hover { color: #666; }
-.hfn {
-	font-size: 15px;
-	line-height: 36px;
-	float: left;
-	margin: 12px 12px 0 0;
-	position: relative;
-	}
-.thmtxt { position: relative; }
 .tile {
 	display: block;
 	width: 100%;
@@ -388,10 +418,10 @@ a:focus { outline: none; }
 .hp { padding-left: 12px; padding-right: 12px; }
 .vp { padding-top: 12px; padding-bottom: 12px; }
 .element {
-	/*margin: 0 12px 12px 0;
+	margin: 0 12px 12px 0;
-	float: left;*/
+	float: left;
-	position: absolute;
+	position: relative;
-	/*display:inline-block;*/
+	display:inline-block;
 	}
 .group{
 	float: left;

app/assets/stylesheets/jquery.gridster.css

@@ -37,9 +37,9 @@
 .gridster .preview-holder {
     z-index: 1;
     position: absolute;
-    background-color: #fff;
+    background-color: #000;
-    border-color: #fff;
+    border-color: #000;
-    opacity: 0.3;
+    opacity: 0.2;
 }
 
 .gridster .player-revert {

app/assets/stylesheets/style.css.erb

@@ -1,6 +1,6 @@
 /*style*/
 
-@import url(http://fonts.googleapis.com/css?family=Cuprum);
+/*@import url(http://fonts.googleapis.com/css?family=Cuprum);*/
 @font-face{ 
 	font-family: 'WebSymbolsRegular';
 	src: url(<%= asset_path 'websymbols-regular-webfont.eot' %>);