From 055d7587696589b4dbd35c83bf49f007b4f24416 Mon Sep 17 00:00:00 2001 From: devin chen Date: Mon, 8 Apr 2013 18:07:46 +0800 Subject: [PATCH] Page Loading Effect tinyscrollbar has problem --- app/assets/javascripts/orbitdesktop.js | 140 ++++++++---------- .../stylesheets/desktop/desktop-component.css | 18 ++- .../desktop/desktop-component.scss | 7 +- .../stylesheets/desktop/desktop-main.css | 5 +- .../stylesheets/desktop/desktop-main.scss | 5 +- app/views/desktop/desktop.html.erb | 2 +- .../desktop/conference_window.html.erb | 4 +- .../desktop/journal_pages/_form.html.erb | 2 +- .../desktop/journal_window.html.erb | 4 +- 9 files changed, 92 insertions(+), 95 deletions(-) diff --git a/app/assets/javascripts/orbitdesktop.js b/app/assets/javascripts/orbitdesktop.js index deeb4831..586cf728 100755 --- a/app/assets/javascripts/orbitdesktop.js +++ b/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.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(){ @@ -378,8 +378,8 @@ 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 $e; + 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 = $("
"); } - $("#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 = $('
'); var $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 = $('

  • '+tile.title+'

    • '); else - $li = $('
  • Loading

    '+tile.title+'

    • '); + $li = $('
  • Loading

    '+tile.title+'

    • '); + + 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($('
  • '+section.name+'
    • ')); + $("div#desktop ul#section_list").append($('
  • '+section.name+'
    • ')); }) 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( '') + // $(this).find(".appholder").append( ''); } - }) + }); }; 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(); } diff --git a/app/assets/stylesheets/desktop/desktop-component.css b/app/assets/stylesheets/desktop/desktop-component.css index 682779b2..0b1eaf88 100644 --- a/app/assets/stylesheets/desktop/desktop-component.css +++ b/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; - background-color: #f0f0f0; } + top: 36px; } .toolbar button { border: none; outline: none; diff --git a/app/assets/stylesheets/desktop/desktop-component.scss b/app/assets/stylesheets/desktop/desktop-component.scss index 0344b52d..81709db2 100644 --- a/app/assets/stylesheets/desktop/desktop-component.scss +++ b/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; diff --git a/app/assets/stylesheets/desktop/desktop-main.css b/app/assets/stylesheets/desktop/desktop-main.css index 1e9a31e3..2d52691d 100644 --- a/app/assets/stylesheets/desktop/desktop-main.css +++ b/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 { diff --git a/app/assets/stylesheets/desktop/desktop-main.scss b/app/assets/stylesheets/desktop/desktop-main.scss index a727963f..5f625cec 100644 --- a/app/assets/stylesheets/desktop/desktop-main.scss +++ b/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 */ diff --git a/app/views/desktop/desktop.html.erb b/app/views/desktop/desktop.html.erb index dbdf06a6..d34a1665 100644 --- a/app/views/desktop/desktop.html.erb +++ b/app/views/desktop/desktop.html.erb @@ -3,7 +3,7 @@