developers
/
orbit-4-1
Archived
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gridster update

This commit is contained in:
devin chen 2013-05-20 17:54:39 +08:00 committed by saurabhbhatia
parent ed22a4d303
commit 3cde26ca4a
5 changed files with 2993 additions and 2402 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5154
app/assets/Archive/javascripts/jquery.gridster.js
View File

File diff suppressed because it is too large Load Diff

261
app/assets/Archive/javascripts/orbitdesktop.js
View File

@ -324,7 +324,9 @@ var orbitDesktop = function(dom){
$(window).resize(function(){ $(window).resize(function(){
// var ww = $(window).width(); // var ww = $(window).width();
// $("img#thmbackground").attr({"width":ww}); // $("img#thmbackground").attr({"width":ww});
if( $('.tinycanvas').length > 0 ){ $('.tinycanvas').tinyscrollbar_update('relative'); } // if( $('.tinycanvas').length > 0 ){
$('.tinycanvas').tinyscrollbar_update('relative');
// }
if($(o.contentHolder).find("div.app_frame").length > 0){ if($(o.contentHolder).find("div.app_frame").length > 0){
$(o.contentHolder).find("div.app_frame").each(function(){ $(o.contentHolder).find("div.app_frame").each(function(){
var app_holder_height = $(this).height() - 72; var app_holder_height = $(this).height() - 72;
@ -378,7 +380,7 @@ var orbitDesktop = function(dom){
var temp_div = $("<div></div>"); var temp_div = $("<div></div>");
var entries = []; var entries = [];
switch (layout){ switch (layout){
case "simple": case "simple":
total_columns++; total_columns++;
temp_div.append(column_container.html()); temp_div.append(column_container.html());
total_width = "auto"; total_width = "auto";
@ -444,7 +446,7 @@ var orbitDesktop = function(dom){
} }
$("div[container=true]") $("div[container=true]")
.find("div.tinycanvas") .find("div.tinycanvas")
.prepend('<div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>'); .prepend('<div class="scrollbar sb_h"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>');
var f = o.layout_data.generate_layout_html(h) var f = o.layout_data.generate_layout_html(h)
$("div[container=true] div.overview").html(f.markup); $("div[container=true] div.overview").html(f.markup);
var settings = {main : ".tinycanvas"}; var settings = {main : ".tinycanvas"};
@ -471,6 +473,7 @@ var orbitDesktop = function(dom){
o.simple_drop_down(); o.simple_drop_down();
o.autocomplete(); o.autocomplete();
o.use_select2(); o.use_select2();
o.check_simple_layout();
} }
this.paging = true; this.paging = true;
this.pagination = function(link,variable,page_no){ this.pagination = function(link,variable,page_no){
@ -652,6 +655,10 @@ var orbitDesktop = function(dom){
target = (!target) ? 'desktop' : target; target = (!target) ? 'desktop' : target;
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 dragged = null,draggable,lastpos = []; var dragged = null,draggable,lastpos = [];
/* Hotfix - Part 1 */
var items = $(".gridster ul li");
items.detach();
o.gridvar = $(".grid ul").find("> li ") o.gridvar = $(".grid ul").find("> li ")
.mousedown(function(e){ .mousedown(function(e){
!draggable; !draggable;
@ -663,6 +670,8 @@ var orbitDesktop = function(dom){
}) })
.end() .end()
.gridster({ .gridster({
max_rows: 4,
shift_larger_widgets_down: false,
widget_margins: [6, 6], widget_margins: [6, 6],
widget_base_dimensions: [120, 120], widget_base_dimensions: [120, 120],
serialize_params: function($w, wgd) { return { col: wgd.col, row: wgd.row, id: $w.data("id") } }, serialize_params: function($w, wgd) { return { col: wgd.col, row: wgd.row, id: $w.data("id") } },
@ -671,21 +680,33 @@ var orbitDesktop = function(dom){
dragged.addClass("noClick"); dragged.addClass("noClick");
}, },
stop: function(event, ui){ stop: function(event, ui){
for (var i = 1; i <= 30; i++) { // for (var i = 1; i <= 30; i++) {
// var celement = $(".grid ul .widget[data-col="+i+"]:last"); // // var celement = $(".grid ul .widget[data-col="+i+"]:last");
$(".grid ul .widget[data-col="+i+"]").each(function(){ // $(".grid ul .widget[data-col="+i+"]").each(function(){
var pos = $(this).position(); // var pos = $(this).position();
if(pos && (pos.top + $(this).height() + 6) > 550){ // if(pos && (pos.top + $(this).height() + 6) > 550){
revertbacktiles(); // revertbacktiles();
} // }
}); // });
} // }
var newpos = o.gridvar.serialize(); $('.tinycanvas').tinyscrollbar_update();
$.post("/desktop/newpositions",{"newpositions":newpos}); var newpos = o.gridvar.serialize();
$.post("/desktop/newpositions",{"newpositions":newpos});
} }
} }
}) })
.data('gridster'); .data('gridster');
/* Hotfix - Part 2 */
$.each(items , function (i, e) {
var item = $(this);
var columns = parseInt(item.attr("data-sizex"));
var rows = parseInt(item.attr("data-sizey"));
var col = parseInt(item.attr("data-col"));
var row = parseInt(item.attr("data-row"));
o.gridvar.add_widget(item, columns, rows, col, row);
});
var revertbacktiles = function(){ var revertbacktiles = function(){
lastpos.push({"col":"","row":""}); lastpos.push({"col":"","row":""});
$(".grid ul li").each(function(i){ $(".grid ul li").each(function(i){
@ -841,26 +862,37 @@ var orbitDesktop = function(dom){
var $elements = $("#app_manager .element"), var $elements = $("#app_manager .element"),
$result = $("#app_manager .search_result"), $result = $("#app_manager .search_result"),
$appinfo = $("#app_info"), $appinfo = $("#app_info"),
$apptitle = $("#app_info .app_info_name"), $applist = $("#app_list"),
$appicon = $("#app_info .app_info_icon") $apptitle = $appinfo.find(".app_info_name"),
$appinfolist = $("#app_info .app_info_list"); $appicon = $appinfo.find(".app_info_icon"),
$appinfolist = $appinfo.find(".app_info_list"),
$canvas = $result.parents('.overview'),
current_width = $canvas.css('width');
$("#app_manager #searchbox") $("#app_manager #searchbox")
.focus(function(){ .focus(function(){
$(this).val(""); $(this).val("");
}) })
.keyup(function(e){ .keyup(function(e){
if($(this).val()){ var query = $(this).val();
$result.empty(); if(query){
$elements.hide(); $appinfo.hide().attr('style','');
$result.empty().show();
$applist.hide();
// searchArray = $elements.filter(":containsi("+$(this).val()+")").clone(1,1);
// searchArray = $('#app_list').find('[data-title*="'+query+'"]').clone(1,1);
searchArray = $elements.filter(function(){
var matcher = new RegExp(query, "i");
return matcher.test( $(this).attr('data-title') );
}).clone(1,1);
searchArray = $elements.filter(":containsi("+$(this).val()+")");
if(searchArray.length > 0){ if(searchArray.length > 0){
// searchArray.each(function(){ // searchArray.each(function(){
// $(this).hide("fold","fast"); // $(this).hide("fold","fast");
// }) // })
// $("#app_manager #seperator").show(); // $("#app_manager #seperator").show();
var i = 0; var i = 0, c = 1; // c for numbers of columns
var $column; var $column;
searchArray.each(function(){ searchArray.each(function(){
i++; i++;
@ -872,23 +904,50 @@ var orbitDesktop = function(dom){
if(i == 4){ if(i == 4){
$result.append($column); $result.append($column);
i = 0; i = 0;
c++;
} }
}) });
if(i != 0){ if(i != 0){
$result.append($column); $result.append($column);
c*=132;
searchArray
.eq(0)
.parents('.overview')
.animate({
'width': c
},0, function(){
$(this)
.parents('.tinycanvas')
.tinyscrollbar_update();
});
} }
elementSetting();
} else { } else {
$result.text("No Result Found."); var $no_result = $('<div class="w2 h1 thmtxt thmc2 vp hp message"><span class="tile"></span>No result for <b></b></div>');
$no_result
.find('b')
.text('"'+$(this).val()+'"')
.end()
.show()
.appendTo($result);
$canvas.animate({
'width':252
}, 0, function(){
$(this)
.parents('.tinycanvas')
.tinyscrollbar_update();
});
} }
} else if( query == "" ) {
} else { info_close();
$result.empty(); $result.empty();
$elements.show(); $applist.show();
$canvas.css('width',current_width);
} }
}) })
.blur(function(){ .blur(function(){
if($(this).val()=="") $(this).val("Search"); if($(this).val()==""){
$(this).val("Search");
}
}); });
//for Alphabet sorting //for Alphabet sorting
@ -921,15 +980,21 @@ var orbitDesktop = function(dom){
}); });
var elementSetting = function(){// for element setting load var elementSetting = function(){// for element setting load
$(".element").click(function(){ $elements.click(function(){
$e = $(this); var $e = $(this);
$apptitle.text($e.data("title")); $apptitle.text($e.data("title"));
$appicon.attr("src",$e.find("img").attr("src")); $appicon.attr("src",$e.find("img").attr("src"));
$appinfolist.find("li:eq(2) div").text($e.data("version")); $appinfolist.find("[info=app_version]").text($e.data("version"));
var dt = new Date($e.data("update")); var dt = new Date($e.data("update"));
$appinfolist.find("li:eq(3) div").text(dt.toUTCString()); $appinfolist.find("[info=app_last_update]").text(dt.toUTCString());
$appinfolist.find("li:eq(4) div").text($e.data("author")); $appinfolist.find("[info=app_author]").text($e.data("author"));
$appinfo
.find(".app_info_header")
.attr('style','')
.css({
"background-color": $e.data("background"),
"color": $e.data("text-color")
});
var sections = elementSettingsData[$e.data("id")].sections; var sections = elementSettingsData[$e.data("id")].sections;
var sectionids = new Array(); var sectionids = new Array();
@ -937,7 +1002,7 @@ var orbitDesktop = function(dom){
sectionids.push(sec.id); sectionids.push(sec.id);
}) })
$appinfolist.find("[info=section_activation]").empty(); $appinfolist.find("[info=app_section_activation]").empty();
$.each(o.sectionList,function(i,sec){ $.each(o.sectionList,function(i,sec){
var present = $.inArray(sec._id,sectionids); var present = $.inArray(sec._id,sectionids);
@ -946,9 +1011,9 @@ var orbitDesktop = function(dom){
}else{ }else{
$sectionswitch = $('<div class="s_grid_row"><label class="s_grid s_grid_3">'+ sec.name +'</label><div class="s_grid s_grid_6 s_switch"><div class="s_switch_status" status-on="On" status-off="Off">On</div><label class="s_switch_switcher thmc2"><input type="checkbox" checked="checked" data-widget="'+ $e.data("id") +'" data-section="'+ sec._id +'" data-type="'+$e.data("type")+'"><span class="s_switch_toggle"></span></label></div></div>'); $sectionswitch = $('<div class="s_grid_row"><label class="s_grid s_grid_3">'+ sec.name +'</label><div class="s_grid s_grid_6 s_switch"><div class="s_switch_status" status-on="On" status-off="Off">On</div><label class="s_switch_switcher thmc2"><input type="checkbox" checked="checked" data-widget="'+ $e.data("id") +'" data-section="'+ sec._id +'" data-type="'+$e.data("type")+'"><span class="s_switch_toggle"></span></label></div></div>');
} }
$appinfolist.find("[info=section_activation]").append($sectionswitch); $appinfolist.find("[info=app_section_activation]").append($sectionswitch);
}) });
$appinfo.show(); info_open();
o.simple_switch(function(dom){ o.simple_switch(function(dom){
var options = { var options = {
"status" : dom.is(":checked"), "status" : dom.is(":checked"),
@ -974,39 +1039,91 @@ var orbitDesktop = function(dom){
} }
} }
} }
}) });
}); });
}) return false;
});
} }
$appinfo.find("a.panel_close").click(function(){ $appinfo.find("a.panel_close").click(function(){
$appinfo.hide(); info_close();
return false; return false;
}) });
var info_open = function(){
if($appinfo.is(":hidden")){
$('.overview').stop().animate({'width': '+=480'},0 , function(){
$('.tinycanvas').tinyscrollbar_update();
});
$appinfo
.css({
'display': 'block',
'margin-left': -480
})
.delay(300)
.animate({
'margin-left': 0
}, 500, 'easeInOutQuint');
} else {
$('.tinycanvas').tinyscrollbar_update();
}
}
var info_close = function(){
if( $appinfo.is(":visible") ){
$appinfo
.stop()
.animate({
'margin-left': -480
},500 , 'easeInOutQuint', function(){
$('.overview').animate({'width': '-=480'}, 0, function(){
$('.tinycanvas').tinyscrollbar_update();
});
$(this).attr("style","");
});
} else {
$('.tinycanvas').tinyscrollbar_update();
}
}
$(window).on('keydown', function(){
if($('#searchbox').val() == 'Search'){
$('#searchbox').focus();
}
});
elementSetting(); elementSetting();
o.appname_substr('#group_wrapper .element'); o.appname_substr('#group_wrapper .element');
o.check_simple_layout();
} }
var elementSettingsData = {}; var elementSettingsData = {};
var loadApps = function(){ //this load apps for sorting and searching var loadApps = function(){ //this load apps for sorting and searching
$('#app_list').empty(); $('#app_info').attr('style','');
$('.search_result').hide().text("");
$('#app_list').empty().show();
$.getJSON("/desktop/getapplistforManager",{desktopid:o.desktopId},function(apps){ $.getJSON("/desktop/getapplistforManager",{desktopid:o.desktopId},function(apps){
var count = 0, colindex = 0; var count = 0,
$('#app_list').append('<div class="g_col g_col_w1 col'+ colindex +'"/>'); colindex = 0,
$.each(apps,function(i,app){ apps_sum = apps.length,
var $app; col_sum;
count++;
elementSettingsData[app.id] = {"sections" : app.sections}; col_sum = (apps_sum - (apps_sum % 4)) / 4 + 1;
o.t[app.id] = {"sections" : app.sections};
$app = $('<div class="element w1 h1 thmc2" data-type="'+app.data_category+'" data-title="'+app.title+'" data-author="'+app.author+'" data-version="'+app.version+'" data-update="'+app.last_update+'" data-id="'+app.id+'" ><span class="tile thmc2"></span><a href="'+app.id+'" class="appicon"><img src="'+app.icon+'" alt="" onclick="return false;"></a><h1 class="appname thmtxt">'+app.title+'</h1></div>'); $('#app_list')
if( count > 4 ){ .css('width',col_sum * 132)
count = 1, colindex+=1; .append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
$('#app_list').append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
$('.g_col.col'+ colindex).append($app); $.each(apps,function(i,app){
} else { var $app;
$('.g_col.col'+ colindex).append($app); count++;
} elementSettingsData[app.id] = {"sections" : app.sections};
}); $app = $('<div class="element w1 h1 thmc2" data-type="'+app.data_category+'" data-title="'+app.title+'" data-author="'+app.author+'" data-version="'+app.version+'" data-update="'+app.last_update+'" data-id="'+app.id+'" data-text-color="'+app.text_color+'" data-background="'+app.background+'" ><span class="tile thmc2"></span><a href="'+app.id+'" class="appicon"><img src="'+app.icon+'" 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);
}
});
bindHandlers(); bindHandlers();
}); });
} }
@ -1627,6 +1744,25 @@ var orbitDesktop = function(dom){
o.tinyscrollbar = target.main.tinyscrollbar( settings ); o.tinyscrollbar = target.main.tinyscrollbar( settings );
}; };
this.check_simple_layout = function(){
// use for various width of columns inside canvas(.overview)
// only count width for visible element which has "s_column" class
// then set width to canvas
// ** not sure to update canvas here ( $.tinyscrollbar_update() )
var sw = 0,
$simple_layout = $('#content .overview[content-layout=simple]');
if($simple_layout.find(".s_column").length > 0){
$simple_layout.each(function(){
$(this).find(".s_column").filter(":visible").each(function(){
sw += $(this).outerWidth();
});
$simple_layout.css('width',sw);
});
}
// if($simple_layout.find(".s_column").length > 0){
// $simple_layout.css('width',sw);
// }
};
this.simple_drop_down = function(){ this.simple_drop_down = function(){
// simple dropdown menu // simple dropdown menu
var $sdm = $('.sdm'); var $sdm = $('.sdm');
@ -1686,8 +1822,9 @@ var orbitDesktop = function(dom){
$status.text(status_off); $status.text(status_off);
break; break;
} }
if(typeof func == "function") if(typeof func == "function"){
func.call(this,$(this)); func.call(this,$(this));
}
}); });
}); });
}; };

4
app/assets/Archive/stylesheets/desktop/desktop-component.css
View File

@ -424,7 +424,7 @@
width: 6px; } width: 6px; }
.tinycanvas .scrollbar { .tinycanvas .scrollbar {
position: absolute; position: absolute;
z-index: 9; z-index: 11;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
-webkit-transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease;
@ -435,7 +435,7 @@
visibility: visible; } visibility: visible; }
.tinycanvas .scrollbar.sb_h { .tinycanvas .scrollbar.sb_h {
left: 0; left: 0;
bottom: -6px; bottom: 0;
height: 6px; } height: 6px; }
.tinycanvas .scrollbar.sb_v { .tinycanvas .scrollbar.sb_v {
right: 0; right: 0;

4
app/assets/Archive/stylesheets/desktop/desktop-component.scss
View File

@ -424,7 +424,7 @@
} }
.scrollbar { .scrollbar {
position: absolute; position: absolute;
z-index: 9; z-index: 11;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
@include transition-type(opacity, 0.3); @include transition-type(opacity, 0.3);
@ -435,7 +435,7 @@
} }
&.sb_h { &.sb_h {
left: 0; left: 0;
bottom: -6px; bottom: 0;
height: 6px; height: 6px;
} }
&.sb_v { &.sb_v {

4
app/models/desktop/desktop_app.rb
View File

@ -6,8 +6,8 @@ class DesktopApp
field :author field :author
field :shape field :shape
field :version, :type => String field :version, :type => String
field :text_color, :type => String, default: "#fff" field :text_color, :type => String, default: ""
field :bg_color, :type => String, default: "#fff" field :bg_color, :type => String, default: ""
field :icon, default: "icon.png" field :icon, default: "icon.png"
field :url field :url