developers
/
orbit-4-1
Archived
2
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

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

@ -108,8 +108,8 @@ var orbitDesktop = function(dom){
this.contentHolder = dom;
this.themesettings = "";
this.theme = "4f8d3f493b67fcd05f086359";
this.transitionTime = 500;
this.currenthtml = "home";
this.transitionTime = 1000;
this.currenthtml = "desktop.html";
this.currentface = "home";
this.desktopData = {};
this.tp = "";
@ -313,8 +313,8 @@ var orbitDesktop = function(dom){
})
$(window).resize(function(){
var ww = $(window).width();
$("img#thmbackground").attr({"width":ww});
// var ww = $(window).width();
// $("img#thmbackground").attr({"width":ww});
if( $('.tinycanvas').length > 0 ){ $('.tinycanvas').tinyscrollbar_update('relative'); }
if($(o.contentHolder).find("div.app_frame").length > 0){
$(o.contentHolder).find("div.app_frame").each(function(){
@ -379,7 +379,7 @@ var orbitDesktop = function(dom){
this.layout_data = function(h){
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;
gutter = (!isNaN(gutter)) ? gutter : 12;
this.layout_data.generate_layout_html = function(l){
@ -393,7 +393,6 @@ var orbitDesktop = function(dom){
case "simple":
total_columns++;
temp_div.append(column_container.html());
total_width = "auto";
break;
case "datalist":
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;
temp_div.append(column);
}
})
if(x != 0){
temp_div.append(column);
}
});
}
total_width = (!isNaN(base_width)) ? (base_width + gutter*2 +1) * total_columns : null;
break;
@ -423,16 +419,17 @@ var orbitDesktop = function(dom){
entries = column_container.find("div[column=true]"),x = 0,column;
if(entries.length!=0){
entries.each(function(i,ul){
column = $("<div class='column type_column' style='width:"+base_width+"px;margin-right:"+gutter+"px;padding-right:"+gutter+"px;'></div");
column = $("<div class='column type_column' style='width:"+base_width+"px;margin-right:"+gutter+"px;padding-right:"+gutter+"px;'></div");
total_columns++;
column.append(ul);
x++;
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;
default:
break;
}
// total_width = (!isNaN(base_width) ? ( base_width + 12 ) * total_columns : null);
@ -548,15 +545,16 @@ var orbitDesktop = function(dom){
if(customload){
$(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.currentface = target;
var cache = false;
if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load(url,function(data){
if(typeof o.data_method != "undefined"){
if(o.data_method != "")
if(o.data_method != ""){
window.o[o.data_method](target,url,cache);
}
}
try{
if(!customload)
@ -568,8 +566,8 @@ var orbitDesktop = function(dom){
o.sub_menu_item($(o.contentHolder).find("*[content-type=menu] a[load=true]"),data);
}
}catch(EX){}
})
header_ani();
});
}else{
$(o.contentHolder).html(o.desktopData[o.currentface]);
try{
@ -584,11 +582,26 @@ var orbitDesktop = function(dom){
}catch(EX){}
cache = true;
if(typeof o.data_method != "undefined"){
if(o.data_method != "")
window.o[o.data_method](target,url,cache);
if(o.data_method != ""){
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');
});
}
}
this.sub_menu_item = function(dom,data){
@ -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
if(!target)target = "home";
if(!target)target = "desktop";
var bindHandlers = function(){ // this function will bind all the handlers in the desktop
// var groupWrapperWidth = 0;
// $("div#desktop .group").each(function(){groupWrapperWidth+=$(this).outerWidth(true);});
@ -719,8 +732,7 @@ var orbitDesktop = function(dom){
.gridster({
widget_margins: [6, 6],
widget_base_dimensions: [120, 120],
// avoid_overlapped_widgets: true,
serialize_params: function($w, wgd) { return { col: wgd.col, row: wgd.row, id: $w.data("id") } },
// avoid_overlapped_widgets: true,
draggable : {
start : function(event, ui){
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');
@ -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
$("div#desktop div#group_wrapper").empty();
$("#desktop #group_wrapper").empty();
$.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 totaltiles_in_a_row = 4;
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 $ul = $('<ul style="margin: -6px 0 0 -6px;"></ul>');
$.each(tiles,function(i,tile){
var shape = tile.shape.split(" ");
// 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;
total_x = 0;
col++;
}
if(row >= 4){
row = 1;
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 op = opacity[Math.floor(Math.random()*opacity.length)];
var f = (tile.fullsize?"fullsize":null);
@ -867,12 +854,14 @@ var orbitDesktop = function(dom){
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>');
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);
})
$group.append($ul);
$("div#desktop div#group_wrapper").append($group);
$("#desktop #group_wrapper").append($group);
bindHandlers();
o.initializeWidgets();
@ -947,7 +936,7 @@ var orbitDesktop = function(dom){
tempstyle = "style='display:none;'";
$("#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();
})
@ -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});
// 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"]="";
// }
}
}
$(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
var elements = $("#group_wrapper li.widget");
var elements = $("#group_wrapper .widget");
$.each(elements,function(){
var widget = $(this);
if(widget.attr("data-category")=="widget"){
var widgename = widget.attr("data-content");
$.getScript(widget.attr("js-link"),function(){
widget.find("div.appholder").load(widget.attr("data-content"));
var widgetname = widget.attr("data-content");
$.getScript(widget.attr("js-link")).done(function(){
// 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
$.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();
}

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

@ -93,9 +93,20 @@
left: 0;
top: 60px;
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 {
border-top: solid 1px #f2f2f2; }
border-top: solid 1px #f7f7f7; }
.sdm_o li:first-child {
border: none; }
.sdm_o a {
@ -249,8 +260,7 @@
display: inline-block;
vertical-align: top; }
.toolbar .sdm_o {
top: 36px;
background-color: #f0f0f0; }
top: 36px; }
.toolbar button {
border: none;
outline: none;

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

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

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

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

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

@ -3,7 +3,7 @@
<div id="header" class="hh2">
<div class="dtitle w2 hh2 hp sdm">
<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">
<!-- <li><a class="admtxt hp w2 hh2" href="">Campus</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">
<span class="thmtxth">Conference</span>
</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="submit" class="ini_input submit thmc1" value="Submit"/>
</div>
</div> -->
</div>
<div id="holder">
<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" %>
<% 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 %>
</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">
<span class="thmtxth">Journal Papers</span>
</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="submit" class="ini_input submit thmc1" value="Submit"/>
</div>
</div> -->
</div>
<div id="holder">
<div id="panel_l" class="ph">