saurabh
/
orbit-basic
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

column group experiment

This commit is contained in:
devin 2012-04-30 06:41:05 +08:00
parent a99d685bce
commit b6fceadff4
2 changed files with 102 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
app/assets/javascripts/orbitdesktop.js
View File

@ -135,63 +135,48 @@ var orbitDesktop = function(dom){
o.currenthtml = target; o.currenthtml = target;
o.currentface = "home"; 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 bindHandlers = function(){ // this function will bind all the handlers in the desktop
var groupWrapperWidth = 0; var groupWrapperWidth = 0;
var groupWrapperHeight = 0; $("div#desktop .group").each(function(){groupWrapperWidth+=$(this).outerWidth(true);});
$('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;
$("div#desktop #group_wrapper").css("width",groupWrapperWidth); $("div#desktop #group_wrapper").css("width",groupWrapperWidth);
var first = true; $("div#desktop .g_col").sortable({
$("div#desktop .grp").sortable({ connectWith: ".g_col",
connectWith: ".grp",
tolerance: 'pointer' , tolerance: 'pointer' ,
revert:true, revert: 300,
containment: '#group_wrapper',
helper: 'clone',
stop:function(){ stop:function(){
o.tp = targetParent.height(); var newpostitions = new Array;
var currentElementWidth = currentElement.width(); var groupids = new Array;
var targetElementWidth = targetParent.width(); $.each($("div#desktop .group"),function(i,grp){
if(targetParent.height()>540){ var groupone = new Array;
//targetParent.width(currentElement.width()); groupids.push($(grp).attr("id"));
var newWidth = targetElementWidth+currentElementWidth; $ul = $(grp).find(".g_col .element");
targetParent.css("max-width",newWidth); $.each($ul,function(){
var newParentWidth = $("div#desktop #group_wrapper").width()+currentElementWidth; groupone.push($(this).attr("id"));
$("div#desktop #group_wrapper").css("width",newParentWidth); })
}else if(targetParent.height()<540){ newpostitions.push(groupone);
var newWidth = targetElementWidth - (540-targetElementWidth); });
targetParent.css("max-width",newWidth); $.post("/desktop/newpositions",{"sectionid":o.sectionId,"newpos":newpostitions,"groupids":groupids});
var newParentWidth = $("div#desktop #group_wrapper").width()+currentElementWidth;
$("div#desktop #group_wrapper").css("width",newParentWidth);
}
first = true;
}, },
update:function(){ update:function(){
if(first){ var s = $(this).find('.element').length,
first = false; last = $(this).find('.element').eq(s-1).position(),
var newpostitions = new Array; lasth = $(this).find('.element').eq(s-1).outerHeight(true);
var groupids = new Array;
$.each($("div#desktop .group"),function(i,grp){ if ((last.top+lasth)>528){
var groupone = new Array; $(this).sortable('cancel');
groupids.push($(grp).attr("id")); }
$ul = $(grp).find("ul.grp li");
$.each($ul,function(){ },
groupone.push($(this).attr("id")); receive: function(event, ui){
})
newpostitions.push(groupone); var s = $(this).find('.element').length,
}); last = $(this).find('.element').eq(s-1).position(),
$.post("/desktop/newpositions",{"sectionid":o.sectionId,"newpos":newpostitions,"groupids":groupids}) 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"]; var opacity = ["op05","op06","op07","op08","op09"];
$.each(groups,function(i,group){ $.each(groups,function(i,group){
group.sort(o.sortJSON("position",true,parseInt)); 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){ $.each(group,function(j,tile){
var tilecolor = tilecolors[Math.floor(Math.random()*tilecolors.length)]; var tilecolor = tilecolors[Math.floor(Math.random()*tilecolors.length)];
var op = opacity[Math.floor(Math.random()*opacity.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>'); $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 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>'); $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); $("div#desktop div#group_wrapper").append($group);
}) })
bindHandlers(); bindHandlers();
@ -258,7 +271,7 @@ var orbitDesktop = function(dom){
$("div#desktop ul#section_list li.section_name").click(function(){ $("div#desktop ul#section_list li.section_name").click(function(){
$("div#desktop li.section_name").show(); $("div#desktop li.section_name").show();
$(this).hide(); $(this).hide();
$("div#desktop span#section_heading").text($(this).text()); $("#desktop #section_heading").text($(this).text());
o.sectionId = $(this).find("a").attr("href"); o.sectionId = $(this).find("a").attr("href");
loadTiles(o.sectionId); loadTiles(o.sectionId);
}) })
@ -298,10 +311,12 @@ var orbitDesktop = function(dom){
o.currentface = "apps_manager"; o.currentface = "apps_manager";
var searchArray,allApps; var searchArray,allApps;
var bindHandlers = function(){ // bind handler for app manager page var bindHandlers = function(){ // bind handler for app manager page
$("div#app_manager #group_wrapper").css("min-width",$(window).width()-100); var gn = $('.g_col').length,
$("div#app_manager .group_search").css("width",$(window).width()-200); 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 //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()){ if($(this).val()){
$("div#app_manager .search_result").empty(); $("div#app_manager .search_result").empty();
$("div#app_manager #seperator").hide(); $("div#app_manager #seperator").hide();
@ -340,11 +355,27 @@ var orbitDesktop = function(dom){
} }
var loadApps = function(){ //this load apps for sorting and searching var loadApps = function(){ //this load apps for sorting and searching
$.getJSON("/desktop/getapplist",{desktopid:o.desktopId},function(appss){ $.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(appss,function(i,apps){
$.each(apps,function(i,app){ $.each(apps,function(i,app){
var $div; var $app;
$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); 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);
}) })
}) })

18
app/assets/stylesheets/desktopmain.css
View File

@ -183,7 +183,6 @@ a:focus { outline: none; }
.appholder { .appholder {
position: relative; position: relative;
z-index: 2; z-index: 2;
padding-bottom: 12px;
} }
.holder_f .appholder { .holder_f .appholder {
position: absolute; position: absolute;
@ -359,7 +358,7 @@ a:focus { outline: none; }
.group{ .group{
float: left; float: left;
margin-right: 24px; margin-right: 24px;
max-width: 800px; /*max-width: 800px;*/
/*max-height:540px;*/ /*max-height:540px;*/
} }
.group_search{ .group_search{
@ -369,7 +368,7 @@ a:focus { outline: none; }
} }
.search_result{ .search_result{
float: left; float: left;
margin-right: 36px; margin-right: 24px;
max-width: 340px; max-width: 340px;
} }
.g_sep { width: 11px; border-left: solid 1px #fff; } .g_sep { width: 11px; border-left: solid 1px #fff; }
@ -468,9 +467,12 @@ a:focus { outline: none; }
color: #fff; color: #fff;
} }
#group_wrapper{ #group_wrapper {}
.grp { height:528px; }
} .g_col {
.grp{ height: 516px;
min-height:528px; float: left;
} }
.g_col_w1 { width: 132px; }
.g_col_w2 { width: 264px; }
.ui-sortable-placeholder { background-color: rgba(0,0,0,0.2); visibility: visible !important; }