developers
/
Orbit
2
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.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);
})
})

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

@ -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;
}
.g_col_w1 { width: 132px; }
.g_col_w2 { width: 264px; }
.ui-sortable-placeholder { background-color: rgba(0,0,0,0.2); visibility: visible !important; }