Custom thème done and theme id done…

app/assets/javascripts/orbitdesktop.js

@@ -5,7 +5,7 @@ var orbitDesktop = function(dom){
 	o = this;
 	this.contentHolder = dom;
 	this.themesettings = "";
-	this.theme = "default";
+	this.theme = "4f8d3f493b67fcd05f086359";
 //	this.themefolder = "themes";
 	this.transitionTime = 500;
 	this.currenthtml = "desktop.html";
@@ -15,17 +15,27 @@ var orbitDesktop = function(dom){
 	this.sectionList;
 	this.initialize = function(){
 			var theme = o.theme;
+			var custom = false;
 		$.getJSON("/desktop/get_desktop_settings",{"get":"desktop","desktopid":o.desktopId},function(desktopSettings){
 			if(desktopSettings){
-				theme = desktopSettings.theme;
+				if(desktopSettings.theme!="custom"){
+					theme = desktopSettings.theme;
+				}else{
+					theme = "4f8d3f493b67fcd05f086359";
+					custom = true;
+				}
 				o.theme = theme;
-				loadTheme();
+				loadTheme(desktopSettings.customtheme);
 			}else{loadTheme();}
 		})
-		var loadTheme = function(){
+		var loadTheme = function(dhtml){
 			$.getJSON("/"+o.themefolder+"/"+theme+"/settings/"+theme+".json",function(ts){
 				o.themesettings = eval(ts);
 				$('head').append( $('<link rel="stylesheet" id="dyn_css" type="text/css" />').attr('href', "/"+o.themefolder+"/"+theme+"/css/"+ts.css));
+				if(custom){
+					$("head").find("#dyn_css").remove();
+					$("head").append(dhtml);
+				}
 				$(document).ready(function(){o.loadWallpaper();o.bindDesktopEvents();o.loadIconCache();o.initializeDesktop();});
 			})
 		}
@@ -422,6 +432,7 @@ var orbitDesktop = function(dom){
 		o.currentface = "settings";
 		var bindHandlers = function(){
 			$("div#settings ul#setting_left_nav li a").click(function(){
+				if(!$(this).data("clicked")){
 				var tfunc = $(this).attr("href");
 				switch(tfunc){
 					case "themes":
@@ -433,6 +444,7 @@ var orbitDesktop = function(dom){
 				}
 				$("div#settings ul#setting_left_nav li a").removeClass('thmc1 thmtxt').data('clicked',null);
 				$(this).addClass('thmc1 thmtxt').data('clicked',true);
+				}
 			});
 			$("div#settings ul#setting_left_nav li a").hover(function(){
 				$(this).removeClass('admtxt').addClass('thmc1 thmtxt');
@@ -482,10 +494,10 @@ var orbitDesktop = function(dom){
 		var themes = function(){
 				var bindHandlers = function(){
 						$(".theme_list > li").click(function(){
-							o.changeTheme($(this).find('.theme_name').text());
+							o.changeTheme($(this).attr("id"));
 							$(".theme_list > li").removeClass('thmc1').data('clicked',null).find('.theme_name').removeClass('thmtxt');
 							$(this).addClass('thmc1').data('clicked',true).find('.theme_name').addClass('thmtxt');
-							$.post("/desktop/save_desktop_settings",{"save":"theme","desktopid":o.desktopId,"theme":$(this).text()},function(result,status){
+							$.post("/desktop/save_desktop_settings",{"save":"theme","desktopid":o.desktopId,"theme":$(this).attr("id")},function(result,status){
 								if(status=="success"){
 									if(result[0].success=="true")
 										o.notify("Theme Saved!!","success",2);
@@ -516,7 +528,33 @@ var orbitDesktop = function(dom){
 								return false;
 							});
 						});
-						$('.color-picker').miniColors();
+					/*	$("tr#color_inputs input").each(function(){
+							var what = $(this).attr("for");
+							alert($("#theme_preview_area ."+what).css("background-color"))
+							$(this).val()
+						}) */
+					
+						$('.color-picker').miniColors({
+							change:function(hex){
+								var changewhat = $(this).attr("for");
+								var previewarea = $("#theme_preview_area");
+								switch(changewhat){
+									case "thmtxt":
+									case "thmtxth":
+										previewarea.find("."+changewhat).css({"color":hex});
+										break;
+									case "g_sep":
+										previewarea.find("."+changewhat).css({"border-color":hex});
+										break;
+									case "background":
+										previewarea.css({"background-color":hex});
+										break;
+									default:
+										previewarea.find("."+changewhat).css({"background-color":hex});
+										break;
+								}
+							}
+						});
 						$('.theme_list li:first-child').data('clicked',true); // this line just for demo
 						$('.theme_list li').hover(function(){
 							$(this).addClass('thmc1').find('.theme_name').addClass('thmtxt');
@@ -525,11 +563,31 @@ var orbitDesktop = function(dom){
 								t = $(this).data('clicked') ? '' : 'thmtxt';
 							$(this).removeClass(c).find('.theme_name').removeClass(t);
 						});
+						
+						$("a#theme_submit").click(function(){
+							var colors = new Array;
+							$("tr#color_inputs input").each(function(){
+								colors[$(this).attr("for")] = $(this).val();
+							})
+							var dhtml ="<style> .thmc1 { background: "+colors['thmc1']+"; }.thmc2 { background: "+colors['thmc2']+"; }.thmc3 { background: #FFFFFF; }.thmc4 { background: "+colors['thmc4']+"; }.thmtxt { color: "+colors['thmtxt']+"; }.thmtxth { color: "+colors['thmtxth']+"; }.g_sep { border-color: "+colors['g_sep']+"; #thmbackground{background-color: "+colors['background']+"} }</style>";
+							$("head").find("#dyn_css").remove();
+							$("head").append(dhtml);
+							$.post("/desktop/save_desktop_settings",{"save":"customtheme","desktopid":o.desktopId,"theme":dhtml},function(result,status){
+								if(status=="success"){
+									if(result[0].success=="true")
+										o.notify("Custom theme saved!!","success",2);
+									else
+										o.notify("Custom theme saving failed!!","imp",2);
+								}else{
+									o.notify("Connection problem!!","alert",2);
+								}
+							})
+						})
 					
 				}
 			$("div#settings div#panel_r").load("/desktop/settingthemes",function(){
 				$.getJSON("/desktop/get_desktop_settings",{"get":"theme","desktopid":o.desktopId},function(theme){
-					$("#st1 ul.theme_list li:containsi("+theme+")").addClass("thmc1").find("span").addClass("thmtxt");
+					$("#st1 ul.theme_list li#"+theme).addClass("thmc1").find("span").addClass("thmtxt");
 					bindHandlers();
 				})
 			})

app/controllers/desktop_controller.rb

@@ -25,6 +25,8 @@ class DesktopController< ApplicationController
   end
   
   def settingthemes
+ #   @themes = Theme.count
+  #  raise @themes.inspect
     render "desktop/settings/themes", :layout => false
   end
   
@@ -59,8 +61,10 @@ class DesktopController< ApplicationController
           break
         end
       end
-      
-    end
+      when "customtheme"
+        @desktop.update_attributes(:theme => "custom")
+        @desktop.update_attributes(:customtheme => params['theme'])
+      end
      a = Array.new
      a << {"success"=>"true"}
      render :json=>a.to_json

app/models/desktop.rb

@@ -3,8 +3,10 @@ class Desktop
   include Mongoid::Timestamps
   
   field :theme, default: "default"
+  field :customtheme
   
   belongs_to :user
+  
   has_many  :sections, :autosave => true, :dependent => :destroy
 
   before_create :initialize_section

app/models/theme.rb

@@ -0,0 +1,10 @@
+class Theme
+  include Mongoid::Document
+  include Mongoid::Timestamps
+  
+  field :name
+  field :author
+  
+  embedded_in :desktop
+  
+end

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

@@ -11,18 +11,17 @@
 		<div class="overview">
 			<div id="st1" class="st_c">
 				<ul class="theme_list">
-					<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">default</span></li>
-					<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">snake</span></li>
-					<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">sexy</span></li>
-					<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">vintage</span></li>
-					<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">natural</span></li>
-					<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">chris</span></li>
-					<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
+					<li id="4f8d3f493b67fcd05f086359"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Default</span></li>
+					<li id="4f8d3f673b67fcd05f08635c"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Snake</span></li>
+					<li id="4f8d3f5d3b67fcd05f08635b"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Sexy</span></li>
+					<li id="4f8d3f783b67fcd05f08635d"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Vintage</span></li>
+					<li id="4f8d3f533b67fcd05f08635a"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Natural</span></li>
+					<li id="4f8d3f3c3b67fcd05f086358"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Chris</span></li>
 				</ul>
 			</div>
 			<div id="st2" class="st_c">
 				<div class="s_title hh3">Preview</div>
-				<div class="theme_preview vp" style="background-color:#000000;">
+				<div class="theme_preview vp" style="background-color:#000000;" id="theme_preview_area">
 					<div class="thmtxth hh2 hp" style="margin-left:108px;">Theme Text1</div>
 					<div class="theme_plate">
 						<div class="thmc4 h1 wh3"></div>
@@ -39,26 +38,26 @@
 							<th class="s_title hh3" width="120px">Text Color</th>
 							<th class="s_title hh3" width="120px">Background Color</th>
 						</tr>
-						<tr>
+						<tr id="color_inputs">
 							<td>
-								<input type="hidden" class="color-picker black" value="#000000">
-								<input type="hidden" class="color-picker black" value="#0099cc">
-								<input type="hidden" class="color-picker black" value="#3366cc">
+								<input type="hidden" class="color-picker black" value="#000000" for="thmc4">
+								<input type="hidden" class="color-picker black" value="#0099cc" for="thmc1">
+								<input type="hidden" class="color-picker black" value="#3366cc" for="thmc2">
 							</td>
 							<td>
-								<input type="hidden" class="color-picker black" value="#ffffff">
+								<input type="hidden" class="color-picker black" value="#ffffff" for="g_sep">
 							</td>
 							<td>
-								<input type="hidden" class="color-picker black" value="#ffffff">
-								<input type="hidden" class="color-picker black" value="#ffffff">
+								<input type="hidden" class="color-picker black" value="#ffffff" for="thmtxth">
+								<input type="hidden" class="color-picker black" value="#ffffff" for="thmtxt">
 							</td>
 							<td>
-								<input type="hidden" class="color-picker black" value="#000000">
+								<input type="hidden" class="color-picker black" value="#000000" for="background">
 							</td>
 						</tr>
 					</table>
 					<div class="s_action">
-						<a href="" id="theme_submit" class="setting_btn thmc1 thmtxt w1 hh2 hp">Confirm</a>
+						<a href="" id="theme_submit" class="setting_btn thmc1 thmtxt w1 hh2 hp" onclick="return false;">Confirm</a>
 					</div>
 					<div class="clear"></div>
 				</div>