Page Loading Effect

tinyscrollbar has problem

app/assets/javascripts/orbitdesktop.js

@@ -108,8 +108,8 @@ var orbitDesktop = function(dom){
   this.contentHolder = dom;
   this.themesettings = "";
   this.theme = "4f8d3f493b67fcd05f086359";
-  this.transitionTime = 500;
+  this.transitionTime = 1000;
-  this.currenthtml = "home";
+  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();
+      // var ww = $(window).width();
-      $("img#thmbackground").attr({"width":ww});
+      // $("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 != "")
+             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');
+      });
     }
   }
   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,
+          //  avoid_overlapped_widgets: true,
-            serialize_params: function($w, wgd) { return { col: wgd.col, row: wgd.row, id: $w.data("id") } },
             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(row >= 4){
-          // if(tile.title == "Weather")console.log("Big - row : " + tile.row + ", col : "+ tile.column);
+            row = 1;
-          // if(tile.title == "Google Scholar")console.log("Scholar - row : " + tile.row + ", col : "+ tile.column);
+            col++;
-
-          // 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++;
-            }
           }
+          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 .widget");
-    var elements = $("#group_wrapper li.widget");
     $.each(elements,function(){
       var widget = $(this);
       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
     $.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();
 }
 

app/assets/stylesheets/desktop/desktop-component.css

@@ -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;
+    top: 36px; }
-    background-color: #f0f0f0; }
   .toolbar button {
     border: none;
     outline: none;

app/assets/stylesheets/desktop/desktop-component.scss

@@ -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;

app/assets/stylesheets/desktop/desktop-main.css

@@ -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 {

app/assets/stylesheets/desktop/desktop-main.scss

@@ -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 */

app/views/desktop/desktop.html.erb

@@ -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>

vendor/built_in_modules/personal_conference/app/views/panel/personal_conference/desktop/conference_window.html.erb

@@ -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">

vendor/built_in_modules/personal_journal/app/views/panel/personal_journal/desktop/journal_pages/_form.html.erb

@@ -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>

vendor/built_in_modules/personal_journal/app/views/panel/personal_journal/desktop/journal_window.html.erb

@@ -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">