Lot of changes in gridster

This commit is contained in:
Harry Bomrah 2013-02-26 11:47:05 +08:00 committed by Rueshyna
parent ee4b94ace0
commit b8ee748723
7 changed files with 123 additions and 37 deletions

View File

@ -1328,6 +1328,7 @@
*/ */
fn.draggable = function() { fn.draggable = function() {
var self = this; var self = this;
var draggable_options = $.extend(true, {}, this.options.draggable, { var draggable_options = $.extend(true, {}, this.options.draggable, {
offset_left: this.options.widget_margins[0], offset_left: this.options.widget_margins[0],
start: function(event, ui) { start: function(event, ui) {
@ -3204,6 +3205,7 @@
max_rows += (+$(w).attr('data-sizey')); max_rows += (+$(w).attr('data-sizey'));
}); });
this.cols = Math.max(min_cols, cols, this.options.min_cols); this.cols = Math.max(min_cols, cols, this.options.min_cols);
this.rows = Math.max(max_rows, this.options.min_rows); this.rows = Math.max(max_rows, this.options.min_rows);

View File

@ -420,9 +420,10 @@ var orbitDesktop = function(dom){
$.getJSON("/desktop/getgroups",{sectionid:id},function(tiles){ $.getJSON("/desktop/getgroups",{sectionid:id},function(tiles){
tiles.sort(o.sortJSON("position",true,parseInt)); tiles.sort(o.sortJSON("position",true,parseInt));
var tilecolors = o.themesettings.tilecolor; var tilecolors = o.themesettings.tilecolor;
var totaltiles_in_a_row = 4;
var opacity = ["op05","op06","op07","op08","op09"]; var opacity = ["op05","op06","op07","op08","op09"];
var row = 1,col = 1,x = 1,y = 1; var row = 1,col = 1,x = 1,y = 1;
var $group = $('<div class="grid"></div>'); var $group = $('<div class="grid gridster"></div>');
var $ul = $('<ul style="margin: -6px 0 0 -6px;"></ul>'); var $ul = $('<ul style="margin: -6px 0 0 -6px;"></ul>');
$.each(tiles,function(i,tile){ $.each(tiles,function(i,tile){
@ -436,21 +437,72 @@ var orbitDesktop = function(dom){
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)];
if(tile.data_category == "app") if(tile.data_category == "app")
$li = $('<li data-id="'+tile.id+'" class="element" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><a href="'+tile.data_content+'" 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 data-id="'+tile.id+'" class="widget" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><a href="'+tile.data_content+'" 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 data-id="'+tile.id+'" class="element" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'" js-link="'+tile.js[0].url+'" css-link="'+tile.css.url+'"><span class="tile '+tilecolor+' '+op+'"></span><div class="appholder">Loading...</div><h1 class="appname thmtxt">'+tile.title+'</h1></li>'); $li = $('<li data-id="'+tile.id+'" class="widget" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'" js-link="'+tile.js[0].url+'" css-link="'+tile.css.url+'"><span class="tile '+tilecolor+' '+op+'"></span><div class="appholder">Loading...</div><h1 class="appname thmtxt">'+tile.title+'</h1></li>');
row = row + y; row = row + y;
$ul.append($li); $ul.append($li);
}) })
$group.append($ul); $group.append($ul);
console.log($group);
$("div#desktop div#group_wrapper").append($group); $("div#desktop div#group_wrapper").append($group);
o.gridvar = $(".grid ul").gridster({ var dragged = null,draggable,lastpos = [];
widget_margins: [6, 6], o.gridvar = $(".grid ul").find("> li ").mousedown(function(e){
widget_base_dimensions: [120, 120] !draggable;
}); dragged = $(this);
lastpos = [];
$(".grid ul li").each(function(){
lastpos.push({"col":$(this).attr("data-col"),"row":$(this).attr("data-row")})
})
}).end()
.gridster({
widget_margins: [6, 6],
widget_base_dimensions: [120, 120],
avoid_overlapped_widgets: true,
draggable : {
stop: function(event, ui){
var widgetchanged_col = dragged.attr("data-col");
var total = 0;
// console.log(widgetchanged.col);
// console.log(o.gridvar.serialize_changed());
$(".grid ul li[data-col="+widgetchanged_col+"]").each(function(i,w){
var size = parseInt($(this).attr("data-sizey"));
if(!isNaN(size)){
total += size;
}
})
// other way to calculate the overflow is by top > height of div
if(total>totaltiles_in_a_row){
revertbacktiles();
}else{
console.log(widgetchanged_col-1);
$(".grid ul li[data-col="+(widgetchanged_col-1)+"]").each(function(i,w){
var sizey = parseInt($(this).attr("data-sizey"));
var sizex = parseInt($(this).attr("data-sizex"));
if(sizey==1){
sizex = sizex - 1;
}
console.log(sizex);
if(!isNaN(sizex)){
total += sizex;
}
})
if(total>totaltiles_in_a_row){
revertbacktiles();
}
}
}
}
}).data('gridster');
var revertbacktiles = function(){
lastpos.push({"col":"","row":""});
$(".grid ul li").each(function(i){
$(this).attr({"data-col":lastpos[i].col,"data-row":lastpos[i].row});
})
}
bindHandlers(); bindHandlers();
o.initializeWidgets(); o.initializeWidgets();
}) })
@ -1219,7 +1271,7 @@ var orbitDesktop = function(dom){
}) })
}; };
this.initializeWidgets = function(){ // this function will initialize all the widgets in the desktop this.initializeWidgets = function(){ // this function will initialize all the widgets in the desktop
var elements = $("#group_wrapper li.element"); var elements = $("#group_wrapper li.widget");
$.each(elements,function(){ $.each(elements,function(){
var widget = $(this); var widget = $(this);
if(widget.attr("data-category")=="widget"){ if(widget.attr("data-category")=="widget"){

View File

@ -2,6 +2,7 @@
*This is a manifest file that'll automatically include all the stylesheets available in this directory *This is a manifest file that'll automatically include all the stylesheets available in this directory
*and any sub-directories. You're free to add application-wide styles to this file and they'll appear at *and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
*the top of the compiled file, but it's generally better to create a new file per style scope. *the top of the compiled file, but it's generally better to create a new file per style scope.
*= require desktop_font
*= require style *= require style
*= require bootstrap *= require bootstrap
*= require bootstrap-orbit *= require bootstrap-orbit

View File

@ -0,0 +1 @@
@import url(http://fonts.googleapis.com/css?family=Cuprum|Dosis:400,700|Roboto+Condensed:400,700);

View File

@ -60,9 +60,30 @@ body {
} }
a, a:hover { text-decoration: none; color: #666; } a, a:hover { text-decoration: none; color: #666; }
a:focus { outline: none; } a:focus { outline: none; }
/* box-sizing element */
.appholder, .appname {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.admbg { background-color: #fff; }
.admbg2 { background-color: #ddd; }
.admtxt { color: #666; }
.admtxt:hover { color: #666; }
.hfn {
font-size: 15px;
line-height: 36px;
float: left;
margin: 12px 12px 0 0;
position: relative;
}
.thmtxt { position: relative; }
/* desktop layout */ /* desktop layout */
#container { #container {
margin: 48px 0 0 156px; padding: 48px 0 0 156px;
} }
#header { #header {
padding: 0 0 12px 0; padding: 0 0 12px 0;
@ -117,6 +138,7 @@ a:focus { outline: none; }
padding: 0 6px; padding: 0 6px;
font-size: 15px; font-size: 15px;
position: absolute; position: absolute;
z-index: 9;
min-width: 48px; min-width: 48px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
@ -165,14 +187,28 @@ a:focus { outline: none; }
.appname { .appname {
font-size: 15px; font-size: 15px;
height: 30px;
line-height: 30px; line-height: 30px;
width: 100%;
height: 30px;
padding: 0 12px;
overflow: hidden; overflow: hidden;
cursor: default; cursor: default;
position: absolute;
left: 0;
bottom: 0;
z-index: 3; z-index: 3;
} }
.w1.h1 .appname { text-align: center; } [data-sizex="1"] .appname, .w1.h1 .appname {
.w2.h2 .appname { font-size: 21px; } text-align: center;
}
[data-sizey="2"] .appname {
font-size: 21px;
}
.hh2 .appname {
position: relative;
width: auto;
padding: 0;
}
.appicon { .appicon {
display: block; display: block;
width: 60px; width: 60px;
@ -180,6 +216,9 @@ a:focus { outline: none; }
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
} }
[data-sizex="1"] .appicon {
margin-top: 24px;
}
#sections .appicon { #sections .appicon {
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -189,16 +228,19 @@ a:focus { outline: none; }
.appholder { .appholder {
position: relative; position: relative;
z-index: 2; z-index: 2;
} padding: 12px;
.holder_f .appholder { padding-bottom: 30px;
position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden;
}
.fullsize .appholder {
position: absolute;
padding: 0; padding: 0;
left: 0; left: 0;
top: 0; top: 0;
} }
.holder_f .appname { display: none; } .fullsize .appname { display: none; }
.dtitle { .dtitle {
font-size: 30px; font-size: 30px;
line-height: 60px; line-height: 60px;
@ -209,18 +251,6 @@ a:focus { outline: none; }
} }
/*.section_slc { width: 252px; }*/ /*.section_slc { width: 252px; }*/
.admbg { background-color: #fff; }
.admbg2 { background-color: #ddd; }
.admtxt { color: #666; }
.admtxt:hover { color: #666; }
.hfn {
font-size: 15px;
line-height: 36px;
float: left;
margin: 12px 12px 0 0;
position: relative;
}
.thmtxt { position: relative; }
.tile { .tile {
display: block; display: block;
width: 100%; width: 100%;
@ -388,10 +418,10 @@ a:focus { outline: none; }
.hp { padding-left: 12px; padding-right: 12px; } .hp { padding-left: 12px; padding-right: 12px; }
.vp { padding-top: 12px; padding-bottom: 12px; } .vp { padding-top: 12px; padding-bottom: 12px; }
.element { .element {
/*margin: 0 12px 12px 0; margin: 0 12px 12px 0;
float: left;*/ float: left;
position: absolute; position: relative;
/*display:inline-block;*/ display:inline-block;
} }
.group{ .group{
float: left; float: left;

6
app/assets/stylesheets/jquery.gridster.css Executable file → Normal file
View File

@ -37,9 +37,9 @@
.gridster .preview-holder { .gridster .preview-holder {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
background-color: #fff; background-color: #000;
border-color: #fff; border-color: #000;
opacity: 0.3; opacity: 0.2;
} }
.gridster .player-revert { .gridster .player-revert {

View File

@ -1,6 +1,6 @@
/*style*/ /*style*/
@import url(http://fonts.googleapis.com/css?family=Cuprum); /*@import url(http://fonts.googleapis.com/css?family=Cuprum);*/
@font-face{ @font-face{
font-family: 'WebSymbolsRegular'; font-family: 'WebSymbolsRegular';
src: url(<%= asset_path 'websymbols-regular-webfont.eot' %>); src: url(<%= asset_path 'websymbols-regular-webfont.eot' %>);