simple component update

minor update

app/assets/Archive/javascripts/orbitdesktop.js

@@ -1072,7 +1072,7 @@ var orbitDesktop = function(dom){
           var $app;
           count++;
           elementSettingsData[app.id] = {"sections" : app.sections};
-          $app = $('<div class="element w1 h1 thmc2" data-type="'+app.data_category+'" 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 text_ofl"><span>'+app.title+'</span></h1></div>');
+          $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 text_ofl"><span>'+app.title+'</span></h1></div>');
           if( count > 4 ){
             count = 1, colindex+=1;
             $('#app_list').append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
@@ -1286,8 +1286,6 @@ var orbitDesktop = function(dom){
             }
           });
         });
-        o.single_select();
-        o.simple_tab();
 
         $('.color-picker').miniColors({
           change:function(hex){
@@ -1338,7 +1336,10 @@ var orbitDesktop = function(dom){
         $(".stock_wallpaper .ssl_item").click(function(){
           var wallpapername = $(this).find("img").attr("alt");
           o.changeWallpaper(wallpapername);
-        })
+        });
+
+        o.single_select();
+        o.simple_tab();
       }
       var loadthmc = function(){ // a general function to load the themecolor in color selector
         $('.color-picker').each(function(){
@@ -1361,10 +1362,11 @@ var orbitDesktop = function(dom){
           color = $('#theme_preview_area .'+cc).css(hex);
         $(this).miniColors("value", o.rgb2hex(color));
         });
-      }
+      };
 
 
       $.getJSON("/desktop/get_desktop_settings",{"get":"theme","desktopid":o.desktopId},function(theme){
+        
         $('#st1 .theme_list [id='+theme+']')
           .addClass("thmc1 active", 300)
           .find("span")
@@ -1372,8 +1374,7 @@ var orbitDesktop = function(dom){
 
         bindHandlers();
         loadthmc();
-      })
-
+      });
     }
 
     this.initializeSettings.connection = function(){
@@ -1612,7 +1613,6 @@ var orbitDesktop = function(dom){
     } else {
       $("#thmbackground").css("background-image","url("+o.wallpaperPath+wallpaper+")");
     }
-    console.log('loaded');
   };
 
   this.loadIconCache = function(){  // this function load or refresh icon cache for the theme
@@ -1707,6 +1707,7 @@ var orbitDesktop = function(dom){
     // ** 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(){
@@ -1733,46 +1734,64 @@ var orbitDesktop = function(dom){
   };
   this.simple_tab = function(){
     // tab
-    var $anchor = $('.s_tab a[href*=#]'),
-        $tabcontent = $('.st_c');
+    var active = 'thmc2 thmtxt',
+        normal = 'admtxt admbg';
+
+    $('.s_tab').each(function(){
+      var $anchor = $(this).find('a[href*=#]'),
+          $current_tab = $anchor.filter('[data-active="true"]');
+
+      // initialize
+      $current_tab.switchClass(normal,active,300);
+      $($current_tab.attr('href')).show();
 
       $anchor.each(function(){
         $(this).click(function(){
           var target = $(this).attr('href');
-        $anchor.removeClass('thmc2 thmtxt admtxt admbg').addClass('admtxt admbg');
-        $(this).toggleClass('thmc2 thmtxt admtxt admbg');
-        $tabcontent.hide();
-        $(target).show();
-        if( $('.tinycanvas').length > 0 ){
-          $('.tinycanvas').tinyscrollbar_update();
+          $anchor.switchClass(active,normal,200);
+          $(this)
+            .switchClass(normal,active,200)
+            .parents('.s_tab')
+            .find('a[href*=#]').not('a[href*='+target+']')
+            .switchClass(active,normal,200);
+          $(target)
+            .siblings('.st_c')
+            .hide()
+            .end()
+            .show();
+          if( $(target).parents('.tinycanvas').length > 0 ){
+            $(target).parents('.tinycanvas').tinyscrollbar_update();
           }
           return false;
         });
       });
+    });
   };
 
   this.simple_switch = function(func){
     $('.s_switch').each(function(){
-      var $switcher = $(this).find('.s_switch_switcher'),
-          $checkbox = $(this).find('input[type=checkbox]'),
-          $status = $(this).find('.s_switch_status'),
+      var switcher = $(this).find('.s_switch_switcher'),
+          checkbox = $(this).find('input[type=checkbox]'),
+          status = $(this).find('.s_switch_status'),
           toggle = '<span class="s_switch_toggle"></span>',
-          status_on = $status.attr('status-on'),
-          status_off = $status.attr('status-off'),
+          text_on = status.attr('status-on'),
+          text_off = status.attr('status-off'),
+          status_on = 'thmc2',
+          status_off = 'admbg2',
           ini, set;
-      ini = ($switcher.hasClass('admbg2')) ? null : $switcher.addClass('admbg2');
-      ini = ($switcher.find('.s_switch_toggle').length < 1) ? $checkbox.after(toggle) : null;
-      set = ($checkbox.is(':checked')) ? $status.text(status_on) : $status.text(status_off);
-      $checkbox.unbind().change(function(){
+      ini = switcher.hasClass(status_off) ? null : switcher.addClass(status_off);
+      ini = switcher.find('.s_switch_toggle').length < 1 ? checkbox.after(toggle) : null;
+      set = checkbox.is(':checked') ? status.text(text_on) : status.text(text_off);
+      checkbox.unbind().change(function(){
         var v = $(this).attr('checked');
         switch (v) {
           case 'checked':
-            $switcher.switchClass('admbg2','thmc2');
-            $status.text(status_on);
+            switcher.switchClass(status_off,status_on);
+            status.text(text_on);
           break;
           case undefined:
-            $switcher.switchClass('thmc2','admbg2');
-            $status.text(status_off);
+            switcher.switchClass(status_on,status_off);
+            status.text(text_off);
           break;
         }
         if(typeof func == "function"){

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

@@ -157,8 +157,6 @@
 
 .st_c {
   display: none; }
-  .st_c:first-child {
-    display: block; }
 
 /* simple form */
 .s_form {

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

@@ -127,10 +127,6 @@
 .stb_v {}
 .st_c {
 	display: none;
-
-	&:first-child {
-		display: block;
-	}
 }
 
 /* simple form */

app/views/desktop/settings/themes.html.erb

@@ -1,12 +1,12 @@
 <div class="s_tab stb_h">
 	<ul>
-		<li><a href="#st1" class="hh1 hp thmtxt thmc2">Themes</a></li>
+		<li><a href="#st1" class="hh1 hp admtxt admbg" data-active="true">Themes</a></li>
 		<li><a href="#st2" class="hh1 hp admtxt admbg">Theme Color</a></li>
 		<li><a href="#st3" class="hh1 hp admtxt admbg">Wallpaper</a></li>
 	</ul>
 </div>
 
-		<div class="overview" content-layout="simple">
+		<div class="overview tab_holder" content-layout="simple">
 			<div id="st1" class="st_c">
 				<div class="theme_list ssl">
 					<% @themes.each do |theme| %>