Tiles position saved in db and also change them from section manager

app/assets/javascripts/orbitdesktop.js

@@ -115,7 +115,7 @@ var orbitDesktop = function(dom){
 			groupWrapperHeight = $(".group").height() + 20;
 		//	groupWrapperHeight = (groupWrapperHeight > ($(window).height()-extraspace))? $(window).height()-extraspace:groupWrapperHeight;
 			$("div#desktop #group_wrapper").css("width",groupWrapperWidth);
-				
+				var first = true;
 			$("div#desktop .grp").sortable({
 				connectWith: ".grp",
 				tolerance: 'pointer' ,
@@ -135,9 +135,28 @@ var orbitDesktop = function(dom){
 						targetParent.css("max-width",newWidth);
 						var newParentWidth = $("div#desktop #group_wrapper").width()+currentElementWidth;
 						$("div#desktop #group_wrapper").css("width",newParentWidth);
-					}	
+					}
+				first = true;
+				},
+				update:function(){
+					if(first){
+						first = false;
+						var newpostitions = new Array;
+						var groupids = new Array;
+						$.each($("div#desktop .group"),function(i,grp){
+							var groupone = new Array;
+							groupids.push($(grp).attr("id"));
+							$ul = $(grp).find("ul.grp li");
+							$.each($ul,function(){
+								groupone.push($(this).attr("id"));
+							})
+						newpostitions.push(groupone);
+						});
+						$.post("/desktop/newpositions",{"sectionid":o.sectionId,"newpos":newpostitions,"groupids":groupids},function(){
+					
+						})
+					}
 				}
-			
 			});
 			$('div#desktop .tinycanvas').tinyscrollbar({ axis: 'x'});
 			$("div#desktop div.scrollbar").hover(function(){
@@ -172,10 +191,12 @@ var orbitDesktop = function(dom){
 						$.each(group,function(j,tile){
 							var tilecolor = tilecolors[Math.floor(Math.random()*tilecolors.length)];
 							var op = opacity[Math.floor(Math.random()*opacity.length)];
+							if(j==0)$group.attr("id",tile.group_id);
+							
 							if(tile.data_category == "app")
-								$li = $('<li class="element '+tile.shape+' hp vp" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><a href="'+tile._id+'" 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 id="'+tile._id+'" class="element '+tile.shape+' hp vp" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><a href="'+tile._id+'" 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 class="element '+tile.shape+' hp vp" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><h1 class="appname thmtxt">'+tile.title+'</h1><div class="appholder">Loading...</div></li>');
+								$li = $('<li id="'+tile._id+'" class="element '+tile.shape+' hp vp" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><h1 class="appname thmtxt">'+tile.title+'</h1><div class="appholder">Loading...</div></li>');
 							$group.find("ul").append($li);		
 						})
 							$("div#desktop div#group_wrapper").append($group);
@@ -204,7 +225,8 @@ var orbitDesktop = function(dom){
 				$("div#desktop li.section_name").show();
 				$(this).hide();
 				$("div#desktop span#section_heading").text($(this).text());
-				loadTiles($(this).find("a").attr("href"));
+				o.sectionId = $(this).find("a").attr("href");
+				loadTiles(o.sectionId);
 			})
 		}
 			
@@ -323,8 +345,13 @@ var orbitDesktop = function(dom){
 					if($("#"+$(this).attr("data-category")+" .element").length>=24){
 						o.notify("Section is full.","alert");
 					}
-					else
+					else{
 						$("#"+$(this).attr("data-category")).append(element);
+						$.post("/desktop/save_desktop_settings",{"save":"appnewsection","appid":element.attr("id"),"newsectionid":$(this).attr("data-content"),"desktopid":o.desktopId})
+						if(o.sectionId == $(this).attr("data-content") || o.sectionId == elementParent.attr("id")){
+							o.desktopData["home"]="";
+						}
+					}
 				},
 				over:function(){
 				    $(this).find('span.tile').removeClass('op06');
@@ -347,14 +374,14 @@ var orbitDesktop = function(dom){
 				var $group,$lii,$li;
 				var z=0;
 				for(section in o.sectionList){
-					$group = $('<div class="group"><div class="section_label"><ul class="section_grp"></ul></div><ul class="grp" id="section'+(z+1)+'"></ul></div>');
+					$group = $('<div class="group" id="'+o.sectionList[section]._id+'"><div class="section_label"><ul class="section_grp"></ul></div><ul class="grp" id="section'+(z+1)+'"></ul></div>');
 					for(x=0;x<4;x++){
 						if(x==0){						
-							$li = $('<li class="element w1 h1 hp vp thmtxt" style="font-size:20px;"><span class="tile thmc1"></span><span class="thmtxt">'+o.sectionList[z].name+'</span></li>');
+							$li = $('<li class="element w1 h1 hp vp thmtxt" style="font-size:20px;" data-content="'+o.sectionList[z]._id+'"><span class="tile thmc1"></span><span class="thmtxt">'+o.sectionList[z].name+'</span></li>');
 							$group.find("ul.section_grp").append($li);
 						}
 						if(z!=x){
-							$lii = $('<li class="element w1 h1 hp vp thmtxt" style="display: none;" data-category="section'+(x+1)+'"><span class="tile thmc2 op06"></span><span class="thmtxt">'+o.sectionList[x].name+'</span></li>');
+							$lii = $('<li class="element w1 h1 hp vp thmtxt" style="display: none;" data-category="section'+(x+1)+'" data-content="'+o.sectionList[x]._id+'"><span class="tile thmc2 op06"></span><span class="thmtxt">'+o.sectionList[x].name+'</span></li>');
 								$group.find("ul.section_grp").append($lii);
 						}
 					}
@@ -365,7 +392,7 @@ var orbitDesktop = function(dom){
 				$.each(appss,function(i,apps){
 
 					$.each(apps,function(i,app){
-						$li = $('<li class="element to_drop w1 hh2 hp vp" data-category="'+app.data_category+'" data-content="'+app.data_content+'"><div class="appicon"><img src="'+o.iconPath+app.data_content+'.png" class="" width="30" /></div><h1 class="appname thmtxth">'+app.title+'</h1></li>');
+						$li = $('<li class="element to_drop w1 hh2 hp vp" data-category="'+app.data_category+'" data-content="'+app.data_content+'" id="'+app._id+'"><div class="appicon"><img src="'+o.iconPath+app.data_content+'.png" class="" width="30" /></div><h1 class="appname thmtxth">'+app.title+'</h1></li>');
 						$("ul#section"+yy).append($li);
 					})
 					if(y==1){

app/controllers/desktop_controller.rb

@@ -48,6 +48,18 @@ class DesktopController< ApplicationController
         section.update_attributes(:name => @desktopnewnames[x] )
         x = x+1
       end
+    when "appnewsection"
+      @section = Section.find(params["newsectionid"])
+      @groups = @section.groups
+      @app = Tile.find(params["appid"])
+      @groups.each do |group|
+        @tiles = group.tiles.where(:data_category.all => ["app"])
+        if @tiles.length < 12
+          @app.update_attributes(:group_id => group.id)
+          break
+        end
+      end
+      
     end
      a = Array.new
      a << {"success"=>"true"}
@@ -119,4 +131,34 @@ class DesktopController< ApplicationController
      end
      render :json=>a.to_json
   end
+  
+  def newpositions
+    @newpositions = params["newpos"]
+    @section = Section.find(params["sectionid"])
+    @groupids = params["groupids"]
+    @groups = @section.groups
+     z = 0
+    @newpositions.each do |grp|
+      x = 1
+      grp.each do |tileid|
+        if x != 1
+          y = 1
+          tileid.each do |id|
+            @tile = Tile.find(id)
+            @tile.update_attributes({:position => y})
+            if @tile.group_id != @groupids[z]
+              @tile.update_attributes({:group_id => @groupids[z]})
+            end
+             y = y + 1
+          end
+          z = z + 1
+        end
+        x = x + 1
+      end
+    end
+    b = Array.new
+    b << {"success"=>"true"}
+    render :json=>b.to_json
+  end
+  
 end

config/routes.rb

@@ -113,6 +113,7 @@ Orbit::Application.routes.draw do
   match '/desktop/settingthemes/'=>'desktop#settingthemes'
   match '/desktop/settingsections/'=>'desktop#settingsections'
   match '/desktop/getapplist/'=>'desktop#getapplist'
+  match '/desktop/newpositions/'=>'desktop#newpositions'
   match '/desktop/temp_func/'=>'desktop#temp_func'
   
   match '/panel/:app_name/front_end/:app_action/:id' => 'pages#show_from_link', :constraints => lambda { |request|

public/desktop_themes/natural/css/natural.css

@@ -25,6 +25,7 @@ sub1 Theme Color
 apply to:
 #rwidget
 
+first one
 */
 .thmc4 { background: #5CA360; }