new icons and widgets

app/assets/javascripts/orbitdesktop.js

@@ -15,7 +15,7 @@ var orbitDesktop = function(dom){
 	this.sectionList;
 	this.initialize = function(){
 			var theme = o.theme;
-		$.getJSON("/desktop/get_desktop_settings",{id:o.desktopId},function(desktopSettings){
+		$.getJSON("/desktop/get_desktop_settings",{"get":"desktop","desktopid":o.desktopId},function(desktopSettings){
 			if(desktopSettings){
 				theme = desktopSettings.theme;
 				o.theme = theme;
@@ -103,20 +103,20 @@ var orbitDesktop = function(dom){
 		var bindHandlers = function(){
 				var groupWrapperWidth = 0;
 				var groupWrapperHeight = 0;
-			$(".element").mousedown(function(){
+			$("div#desktop .element").mousedown(function(){
 				currentElement = $(this);
 				elementParent = $(this).parent();
 			})
-			$(".group").mouseenter(function(){
+			$("div#desktop .group").mouseenter(function(){
 				targetParent = $(this);
 			})
-			$(".group").each(function(){groupWrapperWidth+=$(this).width();})
+			$("div#desktop .group").each(function(){groupWrapperWidth+=$(this).width();})
 			groupWrapperWidth+=200;
 			groupWrapperHeight = $(".group").height() + 20;
 		//	groupWrapperHeight = (groupWrapperHeight > ($(window).height()-extraspace))? $(window).height()-extraspace:groupWrapperHeight;
-			$("#group_wrapper").css("width",groupWrapperWidth);
+			$("div#desktop #group_wrapper").css("width",groupWrapperWidth);
 				
-			$(".grp").sortable({
+			$("div#desktop .grp").sortable({
 				connectWith: ".grp",
 				tolerance: 'pointer' ,
 				revert:true,
@@ -128,19 +128,19 @@ var orbitDesktop = function(dom){
 						//targetParent.width(currentElement.width());
 						var newWidth = targetElementWidth+currentElementWidth;
 						targetParent.css("max-width",newWidth);
-						var newParentWidth = $("#group_wrapper").width()+currentElementWidth;
+						var newParentWidth = $("div#desktop #group_wrapper").width()+currentElementWidth;
-						$("#group_wrapper").css("width",newParentWidth);
+						$("div#desktop #group_wrapper").css("width",newParentWidth);
 					}else if(targetParent.height()<540){
 						var newWidth = targetElementWidth - (540-targetElementWidth);
 						targetParent.css("max-width",newWidth);
-						var newParentWidth = $("#group_wrapper").width()+currentElementWidth;
+						var newParentWidth = $("div#desktop #group_wrapper").width()+currentElementWidth;
-						$("#group_wrapper").css("width",newParentWidth);
+						$("div#desktop #group_wrapper").css("width",newParentWidth);
 					}	
 				}
 			
 			});
-			$('.tinycanvas').tinyscrollbar({ axis: 'x'});
+			$('div#desktop .tinycanvas').tinyscrollbar({ axis: 'x'});
-			$("div.scrollbar").hover(function(){
+			$("div#desktop div.scrollbar").hover(function(){
 				$(this).removeClass('op01');
 			}, function(){
 				$(this).addClass('op01');
@@ -162,7 +162,7 @@ var orbitDesktop = function(dom){
 		}
 			
 			var loadTiles = function(id){
-				$("div#group_wrapper").empty();
+				$("div#desktop div#group_wrapper").empty();
 				$.getJSON("/desktop/getgroups",{sectionid:id},function(groups){
 					var tilecolors = o.themesettings.tilecolor;
 					var opacity = ["op05","op06","op07","op08","op09"];
@@ -178,7 +178,7 @@ var orbitDesktop = function(dom){
 								$li = $('<li class="element '+tile.shape+' hp vp" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><h1 class="appname thmtxt">'+tile.title+'</h1><div class="appholder">Loading...</div></li>');
 							$group.find("ul").append($li);		
 						})
-							$("div#group_wrapper").append($group);
+							$("div#desktop div#group_wrapper").append($group);
 					})
 					bindHandlers();
 					o.initializeWidgets();
@@ -191,19 +191,19 @@ var orbitDesktop = function(dom){
 						var tempstyle="";
 						if(i==0){
 							tempstyle = "style='display:none;'";
-							$("span#section_heading").text(section.name);
+							$("div#desktop span#section_heading").text(section.name);
 						}
-						$("ul#section_list").append($('<li class="section_name" '+tempstyle+'><a class="admtxt hp w2 hh2" 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 w2 hh2" onclick="return false;" href="'+section._id+'" >'+section.name+'</a></li>'));
 					})
 					bindSecondaryHandlers();
 				})
 			}
 			
 		var bindSecondaryHandlers = function(){
-			$("ul#section_list li.section_name").click(function(){
+			$("div#desktop ul#section_list li.section_name").click(function(){
-				$("li.section_name").show();
+				$("div#desktop li.section_name").show();
 				$(this).hide();
-				$("span#section_heading").text($(this).text());
+				$("div#desktop span#section_heading").text($(this).text());
 				loadTiles($(this).find("a").attr("href"));
 			})
 		}
@@ -221,49 +221,45 @@ var orbitDesktop = function(dom){
 		}
 	};
 	this.tempFunc = function(th){
-		//o.notify("This is test notification!!","alert",2)
+	
-		console.log(th);
-		$.post("/desktop/save_desktop_settings",{"id":o.desktopId,"theme":th},function(){
-			o.notify("Settings Saved!!","success");
-		})
 	}
 	this.initializeAppSearch = function(target){
 		o.currenthtml = target;
 		o.currentface = "apps_manager";
 		var searchArray,allApps;
 		var bindHandlers = function(){
-			$("#group_wrapper").css("min-width",$(window).width()-100);
+			$("div#app_manager #group_wrapper").css("min-width",$(window).width()-100);
-			$(".group_search").css("width",$(window).width()-200);
+			$("div#app_manager .group_search").css("width",$(window).width()-200);
 			//for textbox search			
-			$("#searchbox").focus(function(){$(this).val("");}).keyup(function(e){
+			$("div#app_manager #searchbox").focus(function(){$(this).val("");}).keyup(function(e){
 				if($(this).val()){				
-					$(".search_result").empty();
+					$("div#app_manager .search_result").empty();
-					$("#seperator").hide();
+					$("div#app_manager #seperator").hide();
-					searchArray = $(".element:containsi("+$(this).val()+")");
+					searchArray = $("div#app_manager .element:containsi("+$(this).val()+")");
 					if(searchArray.length>0){
-						$("#seperator").show();
+						$("div#app_manager #seperator").show();
 						searchArray.each(function(){
 							var $newelement = $('<div class="search element w1 h1 hp vp thmc2" data-category="desktop">'+$(this).html()+'</div>');
-							$(".search_result").prepend($newelement);
+							$("div#app_manager .search_result").prepend($newelement);
 						})
 					}
-				}else{$("#seperator").hide();$(".search_result").empty();}
+				}else{$("div#app_manager #seperator").hide();$("div#app_manager .search_result").empty();}
 			}).blur(function(){$(this).val("Search");});
 			
 			//for Alphabet sorting
-			$("a#alphabet_sort_btn").click(function(){
+			$("div#app_manager a#alphabet_sort_btn").click(function(){
 				switch ($(this).attr("href")){
 					case "ascending":
 						$(this).attr("href","descending").find(".thmtxt").text("Alphabet [Z-A]");
-						allApps = $(".group_search .element").sort(sortAscending);
+						allApps = $("div#app_manager .group_search .element").sort(sortAscending);
 						break;
 					case "descending":
 						$(this).attr("href","ascending").find(".thmtxt").text("Alphabet [A-Z]");
-						allApps = $(".group_search .element").sort(sortDescending);
+						allApps = $("div#app_manager .group_search .element").sort(sortDescending);
 						break;
 				}
 				
-				$(".group_search").html(allApps);
+				$("div#app_manager .group_search").html(allApps);
 				return false;
 			})
 			$('.tinycanvas').tinyscrollbar({ axis: 'x'});
@@ -295,13 +291,13 @@ var orbitDesktop = function(dom){
 		o.currentface = "sections";
 		var elementParent,element,groupWrapperWidth;
 		var bindHandlers = function(){
-			$(".group").width(530);
+			$("div#sections .group").width(530);
-				$(".group").each(function(){groupWrapperWidth+=$(this).width();})
+				$("div#sections .group").each(function(){groupWrapperWidth+=$(this).width();})
 				groupWrapperWidth+=200;
 			//	groupWrapperHeight = $(".group").height() + 20;
 			//	groupWrapperHeight = (groupWrapperHeight > ($(window).height()-extraspace))? $(window).height()-extraspace:groupWrapperHeight;
-				$("#group_wrapper").css("width",groupWrapperWidth);
+				$("div#sections #group_wrapper").css("width",groupWrapperWidth);
-			$("#group_wrapper .to_drop").sortable({
+			$("div#sections #group_wrapper .to_drop").sortable({
 				start:function(){
 					var $elementParent = $(this).parent().parent();
 					elementParent = $elementParent;
@@ -312,7 +308,7 @@ var orbitDesktop = function(dom){
 					elementParent.find("div.section_label ul li:not(:nth-child(1))").fadeOut(500);
 				}
 			});
-			$(".section_label ul li:not(:nth-child(1))").droppable({
+			$("div#sections .section_label ul li:not(:nth-child(1))").droppable({
 				drop:function(){
 					if($("#"+$(this).attr("data-category")+" .element").length>=24){
 						o.notify("Section is full.","alert");
@@ -388,7 +384,7 @@ var orbitDesktop = function(dom){
 		o.currenthtml = target;
 		o.currentface = "settings";
 		var bindHandlers = function(){
-			$("ul#setting_left_nav li a").click(function(){
+			$("div#settings ul#setting_left_nav li a").click(function(){
 				var tfunc = $(this).attr("href");
 				switch(tfunc){
 					case "themes":
@@ -398,10 +394,10 @@ var orbitDesktop = function(dom){
 					sections();
 					break;
 				}
-				$("ul#setting_left_nav li a").removeClass('thmc1 thmtxt').data('clicked',null);
+				$("div#settings ul#setting_left_nav li a").removeClass('thmc1 thmtxt').data('clicked',null);
 				$(this).addClass('thmc1 thmtxt').data('clicked',true);
 			});
-			$("ul#setting_left_nav li a").hover(function(){
+			$("div#settings ul#setting_left_nav li a").hover(function(){
 				$(this).removeClass('admtxt').addClass('thmc1 thmtxt');
 			}, function(){
 				var t = $(this).data('clicked') ? '' : 'thmc1 thmtxt';
@@ -415,9 +411,31 @@ var orbitDesktop = function(dom){
 						sh = $(this).siblings('.s_tab').height();
 					$(this).css({'height': h-sh-24}).tinyscrollbar({ axis: 'y'});
 				});
+				
+				$("a#name_save_btn").click(function(){
+					var desktopnm = new Array;
+					$("#desktop_names input").each(function(){
+						desktopnm.push($(this).val());
+					})
+					$.post("/desktop/save_desktop_settings",{"save":"desktopnames","desktopid":o.desktopId,"desktopnms":desktopnm},function(result,status){
+						if(status=="success"){
+							if(result[0].success=="true")
+								o.notify("Names Saved!!","success",2);
+							else
+								o.notify("Name saving failed!!","imp",2);
+						}else{
+							o.notify("Connection problem!!","alert",2);
+						}
+					})
+				})
 			}
-			$("div#panel_r").load("/desktop/settingsections",function(){
+			$("div#settings div#panel_r").load("/desktop/settingsections",function(){
+				$.getJSON("/desktop/get_desktop_settings",{"get":"sectionnames","desktopid":o.desktopId},function(sectionnames){
+					$("#desktop_names input").each(function(i){
+						$(this).val(sectionnames[i]);
+					})
 					bindHandlers();
+				})				
 			})
 			
 		}
@@ -427,7 +445,16 @@ var orbitDesktop = function(dom){
 							o.changeTheme($(this).find('.theme_name').text());
 							$(".theme_list > li").removeClass('thmc1').data('clicked',null).find('.theme_name').removeClass('thmtxt');
 							$(this).addClass('thmc1').data('clicked',true).find('.theme_name').addClass('thmtxt');
-							od.tempFunc($(this).text());
+							$.post("/desktop/save_desktop_settings",{"save":"theme","desktopid":o.desktopId,"theme":$(this).text()},function(result,status){
+								if(status=="success"){
+									if(result[0].success=="true")
+										o.notify("Theme Saved!!","success",2);
+									else
+										o.notify("Theme saving failed!!","imp",2);
+								}else{
+									o.notify("Connection problem!!","alert",2);
+								}
+							});
 						});
 						$('.tinycanvas').each(function(){
 							var h = $(this).parent().height(),
@@ -460,8 +487,11 @@ var orbitDesktop = function(dom){
 						});
 					
 				}
-			$("div#panel_r").load("/desktop/settingthemes",function(){
+			$("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");
 					bindHandlers();
+				})
 			})
 		}
 
@@ -510,7 +540,7 @@ orbitDesktop.prototype.widgetfolder = "desktop_widgets";
 orbitDesktop.prototype.desktopId = "1";
 orbitDesktop.prototype.notifyImgPath = "temp";
 orbitDesktop.prototype.iconPath = "/assets/icons/";
-
+orbitDesktop.prototype.currentLanguage = "en";
 var uselessfunction = function(){
 	$.post("/desktop/temp_func",{sectionid:"4f83e7bbbd98eb041600001d"});
 }

app/assets/stylesheets/desktopmain.css

@@ -271,7 +271,7 @@ a:focus { outline: none; }
 .theme_plate > div:first-child { margin-right: 48px;}
 .s_title { font-size: 15px; line-height: 60px; text-align: left; }
 .s_action { padding: 24px 0; overflow: hidden; }
-#theme_submit {
+.setting_btn {
 	display: block;
 	float: right;
 	font-size: 15px;

app/controllers/desktop_controller.rb

@@ -35,16 +35,42 @@ class DesktopController< ApplicationController
   #ajax data load....
   
   def save_desktop_settings
-    @desktop = Desktop.find(params["id"])
+    @desktop = Desktop.find(params["desktopid"])
-    @desktop.update_attributes(:theme => params["theme"])
+    @savewhat = params["save"]
+    case @savewhat
+    when "theme"
+      @desktop.update_attributes(:theme => params["theme"])
+    when "desktopnames"
+      @sections = @desktop.sections
+      x = 0;
+      @sections.each do |section|
+        @desktopnewnames = params["desktopnms"]
+        section.update_attributes(:name => @desktopnewnames[x] )
+        x = x+1
+      end
+    end
      a = Array.new
      a << {"success"=>"true"}
      render :json=>a.to_json
   end
   
   def get_desktop_settings
-     @desktop = Desktop.find(params["id"])
+     @desktop = Desktop.find(params["desktopid"])
-     render :json => @desktop.to_json
+     @getwhat = params["get"]
+     case @getwhat
+      when "desktop"
+        render :json => @desktop.to_json
+      when "sectionnames"
+        secnames = Array.new
+        @sections = @desktop.sections
+        @sections.each do |section|
+          secnames << section.name
+        end
+        render :json => secnames.to_json
+      when "theme"
+        @theme = @desktop.theme
+        render :json => @theme.to_json
+     end
   end
   
   def getgroups

app/views/desktop/index.html.erb

@@ -59,6 +59,7 @@
 	</div>
 </div>
 <div id="container">
+	
 <div id='ajax_container' class="<%= controller.action_name %>">
  
 	
@@ -81,6 +82,7 @@
 	orbitDesktop.prototype.notifyImgPath = "/assets/";
 	orbitDesktop.prototype.desktopId = "<%= @desktop.id %>";
 	orbitDesktop.prototype.sectionId = "<%= @section.id %>";
+	orbitDesktop.prototype.currentLanguage = "<%= I18n.locale %>";
 	//uselessfunction();
 	var od = new orbitDesktop("#ajax_container");
 	o.notify("Notification Working!!","imp",3)

app/views/desktop/settings.html.erb

@@ -22,15 +22,6 @@
 					
 				</div>
 				<div class="clear"></div>
-				<!-- <select id="change_theme">
-				<option value='default'>Default Theme</option>
-				<option value='snake'>Snake Theme</option>
-				<option value='sexy'>Sexy Theme</option>
-				<option value='vintage'>Vintage Theme</option>
-				<option value='chris'>Chris Theme</option>
-				</select>
-				<br />
-				<button onClick="od.tempFunc();">Save</button> -->
 	</div>
 </div>
 </div>

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

@@ -1,19 +1,18 @@
-<div id="sections_sections">
+
 <div class="tinycanvas vp">
 	<div class="scrollbar sb_v vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
 	<div class="viewport">
 		<div class="overview">
 			<div class="s_title hh3">Sections Name</div>
-			<ul class="s_form">
+			<ul class="s_form" id="desktop_names">
-				<li><label for="s_name1">Section1</label><input id="s_name1" type="text" value="Desktop1"></li>
+				<li><label for="s_name1">Section1</label><input id="s_name1" type="text" value=""></li>
-				<li><label for="s_name2">Section1</label><input id="s_name2" type="text" value="Desktop1"></li>
+				<li><label for="s_name2">Section1</label><input id="s_name2" type="text" value=""></li>
-				<li><label for="s_name3">Section1</label><input id="s_name3" type="text" value="Desktop1"></li>
+				<li><label for="s_name3">Section1</label><input id="s_name3" type="text" value=""></li>
-				<li><label for="s_name4">Section1</label><input id="s_name4" type="text" value="Desktop1"></li>
+				<li><label for="s_name4">Section1</label><input id="s_name4" type="text" value=""></li>
 			</ul>
 			<div class="s_action">
-				<a href="" id="theme_submit" class="thmc1 thmtxt w1 hh2 hp">Confirm</a>
+				<a href="" id="name_save_btn" class="setting_btn thmc1 thmtxt w1 hh2 hp" onclick='return false;'>Confirm</a>
 			</div>
 		</div>
 	</div>
 </div>
-</div>

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

@@ -1,4 +1,3 @@
-<div id="sections_themes">
 <div class="s_tab stb_h">
 	<ul>
 		<li><a href="#st1" class="hh2 hp thmtxt thmc2">Select Theme</a></li>
@@ -11,21 +10,13 @@
 		<div class="overview">
 			<div id="st1" class="st_c">
 				<ul class="theme_list">
-					<li class="thmc1"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name thmtxt">default</span></li>
+					<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><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</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><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</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><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</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><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</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>
 				</ul>
 			</div>
 			<div id="st2" class="st_c">
@@ -66,12 +57,11 @@
 						</tr>
 					</table>
 					<div class="s_action">
-						<a href="" id="theme_submit" class="thmc1 thmtxt w1 hh2 hp">Confirm</a>
+						<a href="" id="theme_submit" class="setting_btn thmc1 thmtxt w1 hh2 hp">Confirm</a>
 					</div>
 					<div class="clear"></div>
 				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </div>

app/views/layouts/_orbit_bar.html.erb

@@ -15,7 +15,7 @@
 			</div>
 			<ul class="nav">
 				<li><%= link_to t(:homepage), root_path, :class => 'orbit-bar-home' %></li>
-				<li><a class="orbit-bar-desktop" href="#">Desktop</a></li>
+				<li><%= link_to t(:desktop), desktop_path, :class => 'orbit-bar-desktop' %></li>
 			</ul>
 			<ul class="nav pull-right">
         <li class="dropdown language">

public/desktop_widgets/googlesearch/googlesearch.js

@@ -0,0 +1,10 @@
+var search = function(){
+	$("#search").submit(function(){
+		var val=$("#googlesearch").val();
+		if(val=="") return false;
+		val.replace(" ", "+");
+		//replace the zh-tw to something
+		window.open("https://www.google.com.tw/#hl="+o.currentLanguage+"&q="+val);
+		return false;
+	});
+}

public/desktop_widgets/googlesearch/index.html.erb

@@ -0,0 +1,34 @@
+<style>
+#search{border-radius: 5px; margin:10px;margin-top:25px;}
+input {
+	border:none; 
+	-webkit-border-radius:5px; 
+	-moz-border-radius:5px; 
+	border-radius:5px;
+	-webkit-box-shadow:0 0 5px #666 inset; 
+	-moz-box-shadow:0 0 5px #666 inset; 
+	box-shadow:0 0 5px #666 inset; 
+	height:15px;
+	line-height:25px;
+	width:200px; 
+	text-indent:5px;
+}
+#eric {
+	font: 15px Tahoma, Helvetica, Arial, Sans-Serif;
+	text-align: center;
+	color: #222;
+	text-shadow: 0px 1px 1px #555;
+}
+</style>
+<center>
+<form id="search">
+<img src="desktop_widgets/googlesearch/img/google_64.png" style='margin-right:10px;'><br />
+<input id="googlesearch">
+<input type="submit" style="display:none;">
+<br>
+<span id="eric">Powered by Eric</span>
+</form>
+</center>
+<script>
+search();
+</script>

public/desktop_widgets/timetable/timetable.js

@@ -1,8 +1,6 @@
 function timetable(){
 	var d = new Date();
 	var n = d.getHours();
-
-
 	$('#tt_timetable .tt_time div').each(function(){
 		if($(this).data('tthour') == n ){
 			$(this).parents('tr').addClass('timenow');

public/desktop_widgets/youtube/index.html.erb

@@ -0,0 +1 @@
+<iframe width="250" height="250" src="http://www.youtube.com/embed/RQieoqCLWDo" frameborder="0" allowfullscreen></iframe>