Lot of changes in gridster

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

View File

@ -1328,6 +1328,7 @@
*/
fn.draggable = function() {
var self = this;
var draggable_options = $.extend(true, {}, this.options.draggable, {
offset_left: this.options.widget_margins[0],
start: function(event, ui) {
@ -3204,6 +3205,7 @@
max_rows += (+$(w).attr('data-sizey'));
});
this.cols = Math.max(min_cols, cols, this.options.min_cols);
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){
tiles.sort(o.sortJSON("position",true,parseInt));
var tilecolors = o.themesettings.tilecolor;
var totaltiles_in_a_row = 4;
var opacity = ["op05","op06","op07","op08","op09"];
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>');
$.each(tiles,function(i,tile){
@ -436,21 +437,72 @@ var orbitDesktop = function(dom){
var tilecolor = tilecolors[Math.floor(Math.random()*tilecolors.length)];
var op = opacity[Math.floor(Math.random()*opacity.length)];
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
$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;
$ul.append($li);
})
$group.append($ul);
console.log($group);
$("div#desktop div#group_wrapper").append($group);
o.gridvar = $(".grid ul").gridster({
var dragged = null,draggable,lastpos = [];
o.gridvar = $(".grid ul").find("> li ").mousedown(function(e){
!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]
});
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();
o.initializeWidgets();
})
@ -1219,7 +1271,7 @@ var orbitDesktop = function(dom){
})
};
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(){
var widget = $(this);
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
*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.
*= require desktop_font
*= require style
*= require bootstrap
*= 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: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 */
#container {
margin: 48px 0 0 156px;
padding: 48px 0 0 156px;
}
#header {
padding: 0 0 12px 0;
@ -117,6 +138,7 @@ a:focus { outline: none; }
padding: 0 6px;
font-size: 15px;
position: absolute;
z-index: 9;
min-width: 48px;
text-align: center;
white-space: nowrap;
@ -165,14 +187,28 @@ a:focus { outline: none; }
.appname {
font-size: 15px;
height: 30px;
line-height: 30px;
width: 100%;
height: 30px;
padding: 0 12px;
overflow: hidden;
cursor: default;
position: absolute;
left: 0;
bottom: 0;
z-index: 3;
}
.w1.h1 .appname { text-align: center; }
.w2.h2 .appname { font-size: 21px; }
[data-sizex="1"] .appname, .w1.h1 .appname {
text-align: center;
}
[data-sizey="2"] .appname {
font-size: 21px;
}
.hh2 .appname {
position: relative;
width: auto;
padding: 0;
}
.appicon {
display: block;
width: 60px;
@ -180,6 +216,9 @@ a:focus { outline: none; }
margin: 0 auto;
position: relative;
}
[data-sizex="1"] .appicon {
margin-top: 24px;
}
#sections .appicon {
width: 30px;
height: 30px;
@ -189,16 +228,19 @@ a:focus { outline: none; }
.appholder {
position: relative;
z-index: 2;
}
.holder_f .appholder {
position: absolute;
padding: 12px;
padding-bottom: 30px;
width: 100%;
height: 100%;
overflow: hidden;
}
.fullsize .appholder {
position: absolute;
padding: 0;
left: 0;
top: 0;
}
.holder_f .appname { display: none; }
.fullsize .appname { display: none; }
.dtitle {
font-size: 30px;
line-height: 60px;
@ -209,18 +251,6 @@ a:focus { outline: none; }
}
/*.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 {
display: block;
width: 100%;
@ -388,10 +418,10 @@ a:focus { outline: none; }
.hp { padding-left: 12px; padding-right: 12px; }
.vp { padding-top: 12px; padding-bottom: 12px; }
.element {
/*margin: 0 12px 12px 0;
float: left;*/
position: absolute;
/*display:inline-block;*/
margin: 0 12px 12px 0;
float: left;
position: relative;
display:inline-block;
}
.group{
float: left;

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

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

View File

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