From b6fceadff4d3d4704a5b0b6c88b8ae7886f2e43e Mon Sep 17 00:00:00 2001
From: devin <devin@rulincom.com>
Date: Mon, 30 Apr 2012 06:41:05 +0800
Subject: [PATCH] column group experiment

---
 app/assets/javascripts/orbitdesktop.js | 153 +++++++++++++++----------
 app/assets/stylesheets/desktopmain.css |  18 +--
 2 files changed, 102 insertions(+), 69 deletions(-)

diff --git a/app/assets/javascripts/orbitdesktop.js b/app/assets/javascripts/orbitdesktop.js
index 9bdacd51..1977fcb3 100755
--- a/app/assets/javascripts/orbitdesktop.js
+++ b/app/assets/javascripts/orbitdesktop.js
@@ -135,63 +135,48 @@ var orbitDesktop = function(dom){
 		o.currenthtml = target;
 		o.currentface = "home";
 	
-		var extraspace = 300;
-		var currentElement, elementParent, targetParent, tempElement, widthcheck;
-		widthcheck = false;
 		var bindHandlers = function(){ // this function will bind all the handlers in the desktop
-				var groupWrapperWidth = 0;
-				var groupWrapperHeight = 0;
-				$('div#desktop div.group').width(528);
-			$("div#desktop .element").mousedown(function(){
-				currentElement = $(this);
-				elementParent = $(this).parent();
-			})
-			$("div#desktop .group").mouseenter(function(){
-				targetParent = $(this);
-			})
-			$("div#desktop .group").each(function(){groupWrapperWidth+=$(this).width();})
-			groupWrapperWidth+=200;
-			groupWrapperHeight = $(".group").height() + 20;
-		//	groupWrapperHeight = (groupWrapperHeight > ($(window).height()-extraspace))? $(window).height()-extraspace:groupWrapperHeight;
+			var groupWrapperWidth = 0;
+			$("div#desktop .group").each(function(){groupWrapperWidth+=$(this).outerWidth(true);});
 			$("div#desktop #group_wrapper").css("width",groupWrapperWidth);
-				var first = true;
-			$("div#desktop .grp").sortable({
-				connectWith: ".grp",
+			$("div#desktop .g_col").sortable({
+				connectWith: ".g_col",
 				tolerance: 'pointer' ,
-				revert:true,
+				revert: 300,
+				containment: '#group_wrapper',
+				helper: 'clone',
 				stop:function(){
-					o.tp = targetParent.height();
-					var currentElementWidth = currentElement.width();
-					var targetElementWidth = targetParent.width();
-					if(targetParent.height()>540){
-						//targetParent.width(currentElement.width());
-						var newWidth = targetElementWidth+currentElementWidth;
-						targetParent.css("max-width",newWidth);
-						var newParentWidth = $("div#desktop #group_wrapper").width()+currentElementWidth;
-						$("div#desktop #group_wrapper").css("width",newParentWidth);
-					}else if(targetParent.height()<540){
-						var newWidth = targetElementWidth - (540-targetElementWidth);
-						targetParent.css("max-width",newWidth);
-						var newParentWidth = $("div#desktop #group_wrapper").width()+currentElementWidth;
-						$("div#desktop #group_wrapper").css("width",newParentWidth);
-					}
-				first = true;
+					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(".g_col .element");
+						$.each($ul,function(){
+							groupone.push($(this).attr("id"));
+						})
+						newpostitions.push(groupone);
+					});
+					$.post("/desktop/newpositions",{"sectionid":o.sectionId,"newpos":newpostitions,"groupids":groupids});
 				},
 				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})
+					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');
+					}
+
+				},
+				receive: function(event, ui){
+				
+					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){
+						$(ui.sender).sortable('cancel');
 					}
 				}
 			});
@@ -222,7 +207,17 @@ var orbitDesktop = function(dom){
 				var opacity = ["op05","op06","op07","op08","op09"];
 				$.each(groups,function(i,group){
 					group.sort(o.sortJSON("position",true,parseInt));
-					var $group = $('<div class="group"><ul class="grp ui-sortable"></ul></div>');
+					// var $group = $('<div class="group"><ul class="grp ui-sortable"></ul></div>'),
+					var colindex = 0,
+						$group = $('<div class="group"></div>'),
+						$col = $('<ul class="g_col g_col_w2 col'+ colindex +'"/>'),
+						$li,
+						bdsum = 0,
+						bwsum = 0,
+						bhsum = 0;
+
+					$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)];
@@ -232,8 +227,26 @@ var orbitDesktop = function(dom){
 							$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);		
-					})
+						// $group.find("ul").append($li);
+
+						// column experiment start
+						var brick = tile.shape.replace(' holder_f','').split(' '),
+							bw = parseInt(brick[0].substr(1)),
+							bh = parseInt(brick[1].substr(1)),
+							bd = bw * bh;
+
+						bdsum+=bd;
+						bwsum+=bw;
+						bhsum+=bh;
+						if( bdsum > 8 ){
+							bdsum = 0, bhsum = 0, colindex+=1;
+							$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);
+						}
+
+					});
 						$("div#desktop div#group_wrapper").append($group);
 				})
 				bindHandlers();
@@ -258,7 +271,7 @@ var orbitDesktop = function(dom){
 			$("div#desktop ul#section_list li.section_name").click(function(){
 				$("div#desktop li.section_name").show();
 				$(this).hide();
-				$("div#desktop span#section_heading").text($(this).text());
+				$("#desktop #section_heading").text($(this).text());
 				o.sectionId = $(this).find("a").attr("href");
 				loadTiles(o.sectionId);
 			})
@@ -298,10 +311,12 @@ var orbitDesktop = function(dom){
 		o.currentface = "apps_manager";
 		var searchArray,allApps;
 		var bindHandlers = function(){ // bind handler for app manager page
-			$("div#app_manager #group_wrapper").css("min-width",$(window).width()-100);
-			$("div#app_manager .group_search").css("width",$(window).width()-200);
+			var gn = $('.g_col').length,
+				gw = $('.g_col').outerWidth(true);
+			$("#app_manager #group_wrapper").css("width",gn*gw);
+			// $("div#app_manager .group_search").css("width",$(window).width()-200);
 			//for textbox search			
-			$("div#app_manager #searchbox").focus(function(){$(this).val("");}).keyup(function(e){
+			$("#app_manager #searchbox").focus(function(){$(this).val("");}).keyup(function(e){
 				if($(this).val()){				
 					$("div#app_manager .search_result").empty();
 					$("div#app_manager #seperator").hide();
@@ -340,11 +355,27 @@ var orbitDesktop = function(dom){
 		}
 		var loadApps = function(){ //this load apps for sorting and searching 
 			$.getJSON("/desktop/getapplist",{desktopid:o.desktopId},function(appss){
+				var count = 0, colindex = 0;
+				$('#app_list').append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
 				$.each(appss,function(i,apps){
 					$.each(apps,function(i,app){
-						var $div;
-						$div = $('<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>');
-						$("#app_list").append($div);
+						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 +'"/>');
+							$('.g_col.col'+ colindex).append($app);
+						} else {
+							$('.g_col.col'+ colindex).append($app);
+						}
+
+						
+
+						console.log(count, colindex);
 					})
 				})
 			
diff --git a/app/assets/stylesheets/desktopmain.css b/app/assets/stylesheets/desktopmain.css
index b86c88af..406d6266 100644
--- a/app/assets/stylesheets/desktopmain.css
+++ b/app/assets/stylesheets/desktopmain.css
@@ -183,7 +183,6 @@ a:focus { outline: none; }
 .appholder {
 	position: relative;
 	z-index: 2;
-	padding-bottom: 12px;
 	}
 .holder_f .appholder {
 	position: absolute;
@@ -359,7 +358,7 @@ a:focus { outline: none; }
 .group{
 	float: left;
 	margin-right: 24px;
-	max-width: 800px;
+	/*max-width: 800px;*/
 	/*max-height:540px;*/
 }
 .group_search{
@@ -369,7 +368,7 @@ a:focus { outline: none; }
 }
 .search_result{
 	float: left;
-	margin-right: 36px;
+	margin-right: 24px;
 	max-width: 340px;
 }
 .g_sep { width: 11px; border-left: solid 1px #fff; }
@@ -468,9 +467,12 @@ a:focus { outline: none; }
 	color: #fff;
 }
 
-#group_wrapper{
-	
+#group_wrapper {}
+.grp { height:528px; }
+.g_col {
+	height: 516px;
+	float: left;
 }
-.grp{
-	min-height:528px;
-}
\ No newline at end of file
+.g_col_w1 { width: 132px; }
+.g_col_w2 { width: 264px; }
+.ui-sortable-placeholder { background-color: rgba(0,0,0,0.2); visibility: visible !important; }
\ No newline at end of file