saurabh
/
orbit-basic
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Page Loading Effect 

tinyscrollbar has problem
This commit is contained in:
devin chen 2013-04-08 18:07:46 +08:00 committed by Matt K. Fu
parent 0734f73291
commit 055d758769
9 changed files with 92 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
app/assets/javascripts/orbitdesktop.js
View File

@ -108,8 +108,8 @@ var orbitDesktop = function(dom){
this.contentHolder = dom; this.contentHolder = dom;
this.themesettings = ""; this.themesettings = "";
this.theme = "4f8d3f493b67fcd05f086359"; this.theme = "4f8d3f493b67fcd05f086359";
this.transitionTime = 500; this.transitionTime = 1000;
this.currenthtml = "home"; this.currenthtml = "desktop.html";
this.currentface = "home"; this.currentface = "home";
this.desktopData = {}; this.desktopData = {};
this.tp = ""; this.tp = "";
@ -313,8 +313,8 @@ 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(){
@ -379,7 +379,7 @@ var orbitDesktop = function(dom){
this.layout_data = function(h){ this.layout_data = function(h){
var $e; var $e;
var column_container,layout, base_width , no_of_entries = 0, pagination_link , pagination_variable, gutter, total_width; var column_container,layout, base_width, total_width, gutter, no_of_entries = 0, pagination_link, pagination_variable;
o.paging = true; o.paging = true;
gutter = (!isNaN(gutter)) ? gutter : 12; gutter = (!isNaN(gutter)) ? gutter : 12;
this.layout_data.generate_layout_html = function(l){ this.layout_data.generate_layout_html = function(l){
@ -393,7 +393,6 @@ var orbitDesktop = function(dom){
case "simple": case "simple":
total_columns++; total_columns++;
temp_div.append(column_container.html()); temp_div.append(column_container.html());
total_width = "auto";
break; break;
case "datalist": case "datalist":
no_of_entries = (typeof column_container.attr("per-column") != "undefined"? parseInt(column_container.attr("per-column")) : 4); no_of_entries = (typeof column_container.attr("per-column") != "undefined"? parseInt(column_container.attr("per-column")) : 4);
@ -412,10 +411,7 @@ var orbitDesktop = function(dom){
x = 0; x = 0;
temp_div.append(column); temp_div.append(column);
} }
}) });
if(x != 0){
temp_div.append(column);
}
} }
total_width = (!isNaN(base_width)) ? (base_width + gutter*2 +1) * total_columns : null; total_width = (!isNaN(base_width)) ? (base_width + gutter*2 +1) * total_columns : null;
break; break;
@ -428,11 +424,12 @@ var orbitDesktop = function(dom){
column.append(ul); column.append(ul);
x++; x++;
temp_div.append(column); temp_div.append(column);
}) });
total_width = (!isNaN(base_width)) ? (base_width + gutter*2 +1) * total_columns : null;
} }
total_width = (!isNaN(base_width)) ? (base_width + gutter*2 +1) * total_columns : null;
break; break;
default: default:
break; break;
} }
// total_width = (!isNaN(base_width) ? ( base_width + 12 ) * total_columns : null); // total_width = (!isNaN(base_width) ? ( base_width + 12 ) * total_columns : null);
@ -548,16 +545,17 @@ var orbitDesktop = function(dom){
if(customload){ if(customload){
$(o.contentHolder).html("<div id='content'></div>"); $(o.contentHolder).html("<div id='content'></div>");
} }
$("#content").hide("drop",o.transitionTime,function(){ $("#content > #holder").hide("drop",{ easing: "easeInOutQuint" },o.transitionTime,function(){
o.currenthtml = target; o.currenthtml = target;
o.currentface = target; o.currentface = target;
var cache = false; var cache = false;
if(!o.desktopData[o.currentface]){ if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load(url,function(data){ $(o.contentHolder).empty().load(url,function(data){
if(typeof o.data_method != "undefined"){ if(typeof o.data_method != "undefined"){
if(o.data_method != "") if(o.data_method != ""){
window.o[o.data_method](target,url,cache); window.o[o.data_method](target,url,cache);
} }
}
try{ try{
if(!customload) if(!customload)
o.sub_menu_item($(o.contentHolder).find("*[content-type=menu] a[load=true]"),data); o.sub_menu_item($(o.contentHolder).find("*[content-type=menu] a[load=true]"),data);
@ -568,8 +566,8 @@ var orbitDesktop = function(dom){
o.sub_menu_item($(o.contentHolder).find("*[content-type=menu] a[load=true]"),data); o.sub_menu_item($(o.contentHolder).find("*[content-type=menu] a[load=true]"),data);
} }
}catch(EX){} }catch(EX){}
header_ani();
}) });
}else{ }else{
$(o.contentHolder).html(o.desktopData[o.currentface]); $(o.contentHolder).html(o.desktopData[o.currentface]);
try{ try{
@ -584,10 +582,25 @@ var orbitDesktop = function(dom){
}catch(EX){} }catch(EX){}
cache = true; cache = true;
if(typeof o.data_method != "undefined"){ if(typeof o.data_method != "undefined"){
if(o.data_method != "") if(o.data_method != ""){
window.o[o.data_method](target,url,cache); window.o[o.data_method](target,url,cache);
} }
} }
header_ani();
}
});
$('#header')
.delay(600)
.effect('drop',{
easing: 'easeInOutQuint',
direction: 'down'
},300);
}
var header_ani = function(){
$('#header').hide().toggle('drop',{easing: 'easeInOutQuint', direction:'down'});
$('#header > *').each(function(i){
$(this).hide().delay(i*100).fadeIn(400,'easeInOutQuint');
}); });
} }
} }
@ -632,7 +645,7 @@ var orbitDesktop = function(dom){
} }
this.initializeDesktop = function(target,url,cache){ //this is for initializing main desktops that are sections and tiles this.initializeDesktop = function(target,url,cache){ //this is for initializing main desktops that are sections and tiles
if(!target)target = "home"; if(!target)target = "desktop";
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 groupWrapperWidth = 0; // var groupWrapperWidth = 0;
// $("div#desktop .group").each(function(){groupWrapperWidth+=$(this).outerWidth(true);}); // $("div#desktop .group").each(function(){groupWrapperWidth+=$(this).outerWidth(true);});
@ -720,7 +733,6 @@ var orbitDesktop = function(dom){
widget_margins: [6, 6], widget_margins: [6, 6],
widget_base_dimensions: [120, 120], widget_base_dimensions: [120, 120],
// avoid_overlapped_widgets: true, // avoid_overlapped_widgets: true,
serialize_params: function($w, wgd) { return { col: wgd.col, row: wgd.row, id: $w.data("id") } },
draggable : { draggable : {
start : function(event, ui){ start : function(event, ui){
dragged.addClass("noClick"); dragged.addClass("noClick");
@ -773,9 +785,6 @@ var orbitDesktop = function(dom){
}) })
} }
var newpos = o.gridvar.serialize();
console.log(newpos);
$.post("/desktop/newpositions",{"newpositions":newpos});
} }
} }
}).data('gridster'); }).data('gridster');
@ -820,46 +829,24 @@ var orbitDesktop = function(dom){
// }); // });
} }
var loadTiles = function(id){ //This will load tiles for a specific desktop .. id of section has to be passed here to load tiles var loadTiles = function(id){ //This will load tiles for a specific desktop .. id of section has to be passed here to load tiles
$("div#desktop div#group_wrapper").empty(); $("#desktop #group_wrapper").empty();
$.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 totaltiles_in_a_row = 4;
var opacity = ["op07","op08","op09",""]; var opacity = ["op07","op08","op09",""];
var row = 0,col = 1,x = 1,y = 1,total_x = 0,prev_y = 0; var row = 1,col = 1,x = 1,y = 1;
var $group = $('<div class="grid gridster"></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){
var shape = tile.shape.split(" "); if(row >= 4){
// if(tile.title == "Weather")console.log("Big - row : " + tile.row + ", col : "+ tile.column);
// if(tile.title == "Google Scholar")console.log("Scholar - row : " + tile.row + ", col : "+ tile.column);
// if(total_x % 2 != 0)
// row = row - y;
// if(i == 7)tile.row = null;
if(tile.row){
row = tile.row;
col = tile.column;
x = parseInt(shape[0].substr(1,1));
y = parseInt(shape[1].substr(1,1));
}else{
console.log(row + " : " + col);
x = parseInt(shape[0].substr(1,1));
if(total_x % 2 == 0){
row = row + y;
}else if(x == 1){
col++;
}
y = parseInt(shape[1].substr(1,1));
total_x = total_x + ( x * y );
prev_y = y;
if(total_x > 8){
row = 1; row = 1;
total_x = 0;
col++; col++;
} }
} var shape = tile.shape.split(" ");
x = parseInt(shape[0].substr(1,1));
y = parseInt(shape[1].substr(1,1));
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)];
var f = (tile.fullsize?"fullsize":null); var f = (tile.fullsize?"fullsize":null);
@ -867,12 +854,14 @@ var orbitDesktop = function(dom){
if(tile.data_category == "app") if(tile.data_category == "app")
$li = $('<li data-id="'+tile.id+'" class="app" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-title="'+tile.title+'" 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;" data-url="'+tile.link+'"><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="app" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-title="'+tile.title+'" 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;" data-url="'+tile.link+'"><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="widget '+f+'" 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"><div class="thmtxt o-loading"><i class="icon-spinning icon-spinner"></i> Loading</div></div><h1 class="appname thmtxt">'+tile.title+'</h1></li>'); $li = $('<li data-id="'+tile.id+'" class="widget '+f+'" 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"><div class="thmtxt o-loading"><i class="icon-spin icon-spinner"></i> Loading</div></div><h1 class="appname thmtxt">'+tile.title+'</h1></li>');
row = row + y;
$ul.append($li); $ul.append($li);
}) })
$group.append($ul); $group.append($ul);
$("div#desktop div#group_wrapper").append($group); $("#desktop #group_wrapper").append($group);
bindHandlers(); bindHandlers();
o.initializeWidgets(); o.initializeWidgets();
@ -947,7 +936,7 @@ var orbitDesktop = function(dom){
tempstyle = "style='display:none;'"; tempstyle = "style='display:none;'";
$("#desktop #section_heading").text(section.name); $("#desktop #section_heading").text(section.name);
} }
$("div#desktop ul#section_list").append($('<li class="section_name" '+tempstyle+'><a class="admtxt hp w2 hh1" onclick="return false;" href="'+section._id+'" >'+section.name+'</a></li>')); $("div#desktop ul#section_list").append($('<li class="section_name" '+tempstyle+'><a class="admtxt hp hh1" onclick="return false;" href="'+section._id+'" >'+section.name+'</a></li>'));
}) })
bindSecondaryHandlers(); bindSecondaryHandlers();
}) })
@ -1146,9 +1135,9 @@ var orbitDesktop = function(dom){
}); });
$.post("/desktop/save_desktop_settings",{"save":"appnewsection","appid":ui.draggable.attr("id"),"newsectionid":$(this).data("content"),"desktopid":o.desktopId}); $.post("/desktop/save_desktop_settings",{"save":"appnewsection","appid":ui.draggable.attr("id"),"newsectionid":$(this).data("content"),"desktopid":o.desktopId});
// if(o.sectionId == $(this).data("content") || o.sectionId == elementParent.attr("id")){ if(o.sectionId == $(this).data("content") || o.sectionId == elementParent.attr("id")){
o.desktopData["home"]=""; o.desktopData["home"]="";
// } }
} }
$(this).find('span.tile').addClass('op06',400); $(this).find('span.tile').addClass('op06',400);
}, },
@ -1605,19 +1594,26 @@ 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 .widget");
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"){
var widgename = widget.attr("data-content"); var widgetname = widget.attr("data-content");
$.getScript(widget.attr("js-link"),function(){ $.getScript(widget.attr("js-link")).done(function(){
widget.find("div.appholder").load(widget.attr("data-content")); // widget.find(".appholder").load(widget.attr("data-content"));
$.get(widgetname).done(function(html){
widget
.find('.appholder')
.html(html)
.css('top','100%')
.delay(800)
.animate({top:'0%'},500,'easeInOutQuint');
}); });
$(this).find("div.appholder").append( '<link rel="stylesheet" id="dyn_css" href="'+widget.attr("css-link")+'" type="text/css" />') });
// $(this).find(".appholder").append( '<link rel="stylesheet" href="'+widget.attr("css-link")+'" type="text/css" />');
} }
}) });
}; };
this.saveWallpaper = function(wallpaper){ // this function saves wallpaper in db this.saveWallpaper = function(wallpaper){ // this function saves wallpaper in db
$.post("/desktop/save_desktop_settings",{"save":"wallpaper","wallpapernm":wallpaper,"desktopid":o.desktopId},function(result){ $.post("/desktop/save_desktop_settings",{"save":"wallpaper","wallpapernm":wallpaper,"desktopid":o.desktopId},function(result){
@ -1733,12 +1729,6 @@ var orbitDesktop = function(dom){
}); });
}); });
} }
this.use_select2 = function(){
$('select:not(.select2-offscreen)').select2({
minimumResultsForSearch: -1
// minimumInputLength: -1
});
}
o.initialize(); o.initialize();
} }

18
app/assets/stylesheets/desktop/desktop-component.css
View File

@ -93,9 +93,20 @@
left: 0; left: 0;
top: 60px; top: 60px;
font-size: 15px; font-size: 15px;
width: 120px; } width: 120px;
border: solid 2px #dddddd;
-webkit-box-sizing: border-box;
/* webkit */
-khtml-box-sizing: border-box;
/* konqueror */
-moz-box-sizing: border-box;
/* firefox */
-ms-box-sizing: border-box;
/* ie */
box-sizing: border-box;
/* css3 */ }
.sdm_o li { .sdm_o li {
border-top: solid 1px #f2f2f2; } border-top: solid 1px #f7f7f7; }
.sdm_o li:first-child { .sdm_o li:first-child {
border: none; } border: none; }
.sdm_o a { .sdm_o a {
@ -249,8 +260,7 @@
display: inline-block; display: inline-block;
vertical-align: top; } vertical-align: top; }
.toolbar .sdm_o { .toolbar .sdm_o {
top: 36px; top: 36px; }
background-color: #f0f0f0; }
.toolbar button { .toolbar button {
border: none; border: none;
outline: none; outline: none;

7
app/assets/stylesheets/desktop/desktop-component.scss
View File

@ -59,9 +59,11 @@
top: 60px; top: 60px;
font-size: 15px; font-size: 15px;
width: 120px; width: 120px;
border: solid 2px $gray;
@include box-sizing;
li { li {
border-top: solid 1px #f2f2f2; border-top: solid 1px lighten( $gray, 10% );
} }
li:first-child { li:first-child {
border: none; border: none;
@ -90,7 +92,7 @@
line-height: 36px; line-height: 36px;
li { li {
border-top: solid 1px #ddd; border-top: solid 1px $gray;
} }
li:first-child { li:first-child {
border: none; border: none;
@ -239,7 +241,6 @@
} }
.sdm_o { .sdm_o {
top: 36px; top: 36px;
background-color: #f0f0f0;
} }
button { button {
border: none; border: none;

5
app/assets/stylesheets/desktop/desktop-main.css
View File

@ -469,8 +469,6 @@ a:focus {
margin: 0 12px 0 0; margin: 0 12px 0 0;
position: relative; position: relative;
z-index: 9; } z-index: 9; }
.dtitle .sdm_o {
width: auto; }
.tile { .tile {
display: block; display: block;
@ -481,7 +479,8 @@ a:focus {
top: 0; } top: 0; }
.widget.gs_w { .widget.gs_w {
cursor: move; } cursor: move;
overflow: hidden; }
/* header drop menu */ /* header drop menu */
.sdm_mdr .sdm_o { .sdm_mdr .sdm_o {

5
app/assets/stylesheets/desktop/desktop-main.scss
View File

@ -446,10 +446,6 @@ a:focus { outline: none; }
margin: 0 12px 0 0; margin: 0 12px 0 0;
position: relative; position: relative;
z-index: 9; z-index: 9;
.sdm_o {
width: auto;
}
} }
.tile { .tile {
display: block; display: block;
@ -461,6 +457,7 @@ a:focus { outline: none; }
} }
.widget.gs_w { .widget.gs_w {
cursor: move; cursor: move;
overflow: hidden;
} }
/* header drop menu */ /* header drop menu */

2
app/views/desktop/desktop.html.erb
View File

@ -3,7 +3,7 @@
<div id="header" class="hh2"> <div id="header" class="hh2">
<div class="dtitle w2 hh2 hp sdm"> <div class="dtitle w2 hh2 hp sdm">
<div class="thmtxth sdm_t" id="section_heading">Loading...</div> <div class="thmtxth sdm_t" id="section_heading">Loading...</div>
<div class="admbg sdm_o"> <div class="admbg sdm_o w2">
<ul id="section_list"> <ul id="section_list">
<!-- <li><a class="admtxt hp w2 hh2" href="">Campus</a></li> <!-- <li><a class="admtxt hp w2 hh2" href="">Campus</a></li>
<li><a class="admtxt hp w2 hh2" href="">Research</a></li> <li><a class="admtxt hp w2 hh2" href="">Research</a></li>

4
vendor/built_in_modules/personal_conference/app/views/panel/personal_conference/desktop/conference_window.html.erb vendored
View File

@ -4,10 +4,10 @@
<div class="dtitle w2 hh2 hp"> <div class="dtitle w2 hh2 hp">
<span class="thmtxth">Conference</span> <span class="thmtxth">Conference</span>
</div> </div>
<div id="search_app" class="hfn w2 hh1 hp thmc3"> <!-- <div id="search_app" class="hfn w2 hh1 hp thmc3">
<input type="text" class="ini_input form" value="Search" id="searchbox" /> <input type="text" class="ini_input form" value="Search" id="searchbox" />
<input type="submit" class="ini_input submit thmc1" value="Submit"/> <input type="submit" class="ini_input submit thmc1" value="Submit"/>
</div> </div> -->
</div> </div>
<div id="holder"> <div id="holder">
<div id="panel_l" class="ph"> <div id="panel_l" class="ph">

2
vendor/built_in_modules/personal_journal/app/views/panel/personal_journal/desktop/journal_pages/_form.html.erb vendored
View File

@ -3,7 +3,7 @@
<%= f.submit t("save"), name: "commit", class: "fn_btn ini_input hp hh1 thmc2 thmtxt" %> <%= f.submit t("save"), name: "commit", class: "fn_btn ini_input hp hh1 thmc2 thmtxt" %>
<% if not @writing_journal.new_record? %> <% if not @writing_journal.new_record? %>
<%= submit_tag t("cancel"), :type => "button", "callback-method"=>"cancelpaper", "ajax-remote" => "get", :href => panel_personal_journal_desktop_journal_pages_path, class: "ini_input hp hh1 thmadm thmtxt" %> <%= submit_tag t("cancel"), :type => "button", "callback-method"=>"cancelpaper", "ajax-remote" => "get", :href => panel_personal_journal_desktop_journal_pages_path, class: "fn_btn ini_input hp hh1 thmadm thmtxt" %>
<% end %> <% end %>
</div> </div>

4
vendor/built_in_modules/personal_journal/app/views/panel/personal_journal/desktop/journal_window.html.erb vendored
View File

@ -4,10 +4,10 @@
<div class="dtitle w2 hh2 hp"> <div class="dtitle w2 hh2 hp">
<span class="thmtxth">Journal Papers</span> <span class="thmtxth">Journal Papers</span>
</div> </div>
<div id="search_app" class="hfn w2 hh1 hp thmc3"> <!-- <div id="search_app" class="hfn w2 hh1 hp thmc3">
<input type="text" class="ini_input form" value="Search" id="searchbox" /> <input type="text" class="ini_input form" value="Search" id="searchbox" />
<input type="submit" class="ini_input submit thmc1" value="Submit"/> <input type="submit" class="ini_input submit thmc1" value="Submit"/>
</div> </div> -->
</div> </div>
<div id="holder"> <div id="holder">
<div id="panel_l" class="ph"> <div id="panel_l" class="ph">