the group more structured and also demo connecting with gmail account..

app/assets/javascripts/orbitdesktop.js

@@ -162,13 +162,15 @@ var orbitDesktop = function(dom){
 					$.post("/desktop/newpositions",{"sectionid":o.sectionId,"newpos":newpostitions,"groupids":groupids});
 				},
 				update:function(){
-					var s = $(this).find('.element').length,
-						last = $(this).find('.element').eq(s-1).position(),
-						lasth = $(this).find('.element').eq(s-1).outerHeight(true);
-
-					if ((last.top+lasth)>528){
-						$(this).sortable('cancel');
-					}
+					var s = $(this).find('.element').length;
+						if(s!=0){
+							last = $(this).find('.element').eq(s-1).position(),
+							lasth = $(this).find('.element').eq(s-1).outerHeight(true);
+					
+							if ((last.top+lasth)>528){
+								$(this).sortable('cancel');
+							}
+						}else{$(this).remove();}
 
 				},
 				receive: function(event, ui){
@@ -216,39 +218,51 @@ var orbitDesktop = function(dom){
 						$li,
 						bdsum = 0,
 						bwsum = 0,
-						bhsum = 0;
-
+						bhsum = 0,
+						small = 0,
+						single = false;
 					$group.append($col);
-
-					$.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 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 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);
-
-						// column experiment start
+					for(j=0;j<group.length;j++){
+						var tile = group[j];	
 						var brick = tile.shape.replace(' holder_f','').split(' '),
 							bw = parseInt(brick[0].substr(1)),
 							bh = parseInt(brick[1].substr(1)),
 							bd = bw * bh;
-
+							
+						if(bh==1 && bw==1){
+							small++;
+						}else if(bh!=1 && bw!=1){
+							single = true;
+						}
+						if(small==2){
+							small=0;
+							single=false;
+						}else if(small==1 && single==true){
+							bh++;
+							small=0;
+							single=false; 
+						}else{small=0;single=false;}
+						
 						bdsum+=bd;
 						bwsum+=bw;
 						bhsum+=bh;
-						if( bdsum > 8 ){
-							bdsum = 0, bhsum = 0, colindex+=1;
+						
+						if(bdsum > 8 || bhsum > 6){
+							bdsum = 0, bhsum = 0, colindex++,j--;
 							$group.append('<ul class="g_col g_col_w2 col'+ colindex +'"/>');
-							$group.find('.col'+colindex).eq(colindex).append($li);
-						} else {
-							$group.find('.col'+colindex).eq(0).append($li);
+						}else{			
+							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 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 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('.col'+colindex).append($li);
 						}
-
-					});
+					}
 						$("div#desktop div#group_wrapper").append($group);
 				})
 				bindHandlers();
@@ -345,8 +359,19 @@ var orbitDesktop = function(dom){
 						allApps = $("div#app_manager .group_search .element").sort(sortDescending);
 						break;
 				}
-				
-				$("div#app_manager .group_search").html(allApps);
+				$("div#app_manager #app_list").empty();
+				var count = 0, colindex = 0;
+				$('#app_list').append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
+				$.each(allApps,function(i,app){
+					count++;
+					if( count > 4 ){
+						count = 1, colindex+=1;
+						$('#app_list').append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
+						$('.g_col.col'+ colindex).append(app);
+					} else {
+						$('.g_col.col'+ colindex).append(app);
+					}
+				})
 				return false;
 			})
 			$('.tinycanvas')
@@ -362,11 +387,8 @@ var orbitDesktop = function(dom){
 				$.each(appss,function(i,apps){
 					$.each(apps,function(i,app){
 						var $app;
-
 						count++;
-
 						$app = $('<div class="element w1 h1 hp vp thmc2" data-category="'+app.data_category+'" data-content="'+app.data_content+'"><span class="tile thmc2"></span><a href="'+app._id+'" class="appicon"><img src="'+o.iconPath+app.data_content+'.png" alt="" onclick="return false;"></a><h1 class="appname thmtxt">'+app.title+'</h1></div>');
-
 						if( count > 4 ){
 							count = 1, colindex+=1;
 							$('#app_list').append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
@@ -374,10 +396,6 @@ var orbitDesktop = function(dom){
 						} else {
 							$('.g_col.col'+ colindex).append($app);
 						}
-
-						
-
-						console.log(count, colindex);
 					})
 				})
 			
@@ -736,7 +754,23 @@ var orbitDesktop = function(dom){
 		
 		var connection = function(){
 			var bindHandlers = function(){
-				
+				$("#gmail_connect_btn").click(function(){
+						var usernm = $("input#gmail_username").val(),
+							pwd = $("input#gmail_password").val(),
+							type = $(this).attr("href"),
+							what = "edit";
+						if(usernm!="" && pwd!="")
+							saveaccount(usernm,pwd,type,what);
+							
+				})
+			}
+			var saveaccount = function(usernm,pwd,type,what){
+					$.post("/desktop/save_account_info",{email:usernm,password:pwd,account:type,dowhat:what},function(result){
+						if(result[0].success=="true")
+							o.notify("Gmail account connected!!","success",2);
+						else
+							o.notify("Gmail account connection failed!!","imp",2);
+					})
 			}
 			$("div#settings div#panel_r").load("/desktop/settingconnection",function(){
 				bindHandlers();
@@ -845,7 +879,7 @@ var orbitDesktop = function(dom){
 		})
 	};
 	this.saveWallpaper = function(wallpaper){ // this function saves wallpaper in db
-		$.post("desktop/save_desktop_settings",{"save":"wallpaper","wallpapernm":wallpaper,"desktopid":o.desktopId},function(result,status){
+		$.post("desktop/save_desktop_settings",{"save":"wallpaper","wallpapernm":wallpaper,"desktopid":o.desktopId},function(result){
 				if(result[0].success=="true")
 					o.notify("Wallpaper saved!!","success",2);
 				else

app/controllers/otheraccounts_controller.rb

@@ -6,10 +6,17 @@ class OtheraccountsController< ApplicationController
   include REXML
 
   def saveaccountinfo
+    @dowhat = params['dowhat']
     @email = params['email']
     @password = params['password']
     @account = params['account']
-    OtherAccount.create(user_id: current_user.id, email: @email, encrypted_password: @password, type: @account)
+    case @dowhat
+    when "new"
+      OtherAccount.create(user_id: current_user.id, email: @email, encrypted_password: @password, type: @account)
+    when "edit"
+      @otheraccount = OtherAccount.where(:type.all => [@account],:user_id.all => [current_user.id])
+      @otheraccount.first.update_attributes(:email => @email, :encrypted_password => @password)
+    end
     a = Array.new
     a << {"success"=>"true"}
     render :json=>a.to_json

app/views/desktop/app_manager.html.erb

@@ -21,157 +21,7 @@
     					
     					<div class="group g_sep op03" id='seperator' style="height: 516px;display:none;"></div>
     					<div class="group_search" id="app_list">
-    					<!--	<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">社團記事</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">每日英文</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">名人名言</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Homework</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">School Events</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">MyCoursesTimeTable</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Clock</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Weather</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">myRefer</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">O-Journals</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">O-Doc</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">ToDos</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Project Progress</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Paper Progress</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Team Stream</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">TED</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Twitter</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Facebook</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">News Feed</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">iClock</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Research Networks</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Gmail</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Youtube</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Calendar</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Talk</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Diary</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Bookeeper</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Movies</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Girls Wall</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
-    							<span class="tile thmc2"></span>
-    							<a href="" class="appicon"><img src="" alt=""></a>
-    							<h1 class="appname thmtxt">Album</h1>
-    						</div>
-    						<div class="element w1 h1 hp vp thmc2" data-category="desktop">
+    					<!--<div class="element w1 h1 hp vp thmc2" data-category="desktop">
     							<span class="tile thmc2"></span>
     							<a href="" class="appicon"><img src="" alt=""></a>
     							<h1 class="appname thmtxt">O-Music</h1>

app/views/desktop/settings/connections.html.erb

@@ -7,11 +7,11 @@
 			<table width="100%" class="s_form">
 				<tr>
 					<td rowspan="2"><img src="assets/gmail.png" alt=""></td>
-					<td valign="top"><label for="s_name1">Username</label><input type="text" /></td>
+					<td valign="top"><label for="s_name1">Username</label><input type="text" id="gmail_username" /></td>
 				</tr>
 				<tr>
-					<td width="400"><label for="s_name1">Password</label><input type="password" /></td>
-					<td><a href="" id="connection_save_btn" class="setting_btn thmc1 thmtxt w1 hh2 hp" onclick='return false;' style='float:left;'>Connect</a></td>
+					<td width="400"><label for="s_name1">Password</label><input type="password" id="gmail_password" /></td>
+					<td><a href="gmail" id="gmail_connect_btn" class="setting_btn thmc1 thmtxt w1 hh2 hp" onclick='return false;' style='float:left;'>Connect</a></td>
 				</tr>
 				<tr>
 					<td rowspan="2"><img src="assets/facebook.png" alt=""></td>
@@ -28,9 +28,6 @@
 					<td><label for="s_name1">Password</label><input type="password" /></td>
 				</tr>
 			</table>
-			<div class="s_action">
-				<a href="" id="connection_save_btn" class="setting_btn thmc1 thmtxt w1 hh2 hp" onclick='return false;'>Save</a>
-			</div>
 		</div>
 	</div>
 </div>

public/desktop_widgets/gmail/gmail.js

@@ -33,12 +33,3 @@ var gmail = function(){
 		});
 }
 
-var saveaccount = function(){
-		var usernm = $("#gmail input[type=text]").val();
-		var pwd = $("#gmail input[type=password]").val();
-		usernm = "harry@rulingcom.com";
-		pwd = "hr08973";
-		if(usernm!="" && pwd!=""){
-			$.post("/desktop/save_account_info",{email:usernm,password:pwd,account:"yahoo"})
-		}
-}