Lot of changes in gridster
This commit is contained in:
parent
dbf93ea9a8
commit
e9c0f443b7
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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"){
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
@import url(http://fonts.googleapis.com/css?family=Cuprum|Dosis:400,700|Roboto+Condensed:400,700);
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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' %>);
|
||||
|
|
|
|||
Loading…
Reference in New Issue