Fetching desktop from db

app/assets/javascripts/orbitdesktop.js

@@ -81,14 +81,6 @@ var orbitDesktop = function(dom){
 		$(window).resize(function(){
 			var ww = $(window).width();
 			$("img#thmbackground").attr({"width":ww});
-		});
-		$(o.contentHolder).mousemove(function(event){
-			/*if(($(window).width()-50)<=event.pageX){
-				$("#holder").animate({scrollLeft:$("#holder").scrollLeft()+500},1000);
-			}
-			if(event.pageX<300){
-				$("#holder").animate({scrollLeft:0},1000);
-			}*/
 		});
 		var $widget_fn = $('.widget_fn'),$fn_des = $('.fn_des');
 		$widget_fn.hover(function(){
@@ -104,12 +96,13 @@ var orbitDesktop = function(dom){
 		if(!target)target = "desktop";
 		o.currenthtml = target;
 		o.currentface = "home";
-		var groupWrapperWidth = 0;
+	
-		var groupWrapperHeight = 0;
 		var extraspace = 300;
 		var currentElement, elementParent, targetParent, tempElement, widthcheck;
 		widthcheck = false;
 		var bindHandlers = function(){
+				var groupWrapperWidth = 0;
+				var groupWrapperHeight = 0;
 			$(".element").mousedown(function(){
 				currentElement = $(this);
 				elementParent = $(this).parent();
@@ -163,16 +156,65 @@ var orbitDesktop = function(dom){
 					$(this).removeClass('thmc2');
 				});
 			}
+			
 		}
-		if(!o.desktopData[o.currentface]){
+			
-			$(o.contentHolder).empty().load("/desktop/"+target,function(){
+			var loadTiles = function(id){
+				$("div#group_wrapper").empty();
+				$.getJSON("/desktop/getgroups",{sectionid:id},function(groups){
+					var tilecolors = o.themesettings.tilecolor;
+					var opacity = ["op05","op06","op07","op08"];
+					$.each(groups,function(i,group){
+						group.sort(o.sortJSON("position",true,parseInt));
+						var $group = $('<div class="group"><ul class="grp ui-sortable"></ul></div>');
+						$.each(group,function(j,tile){
+							var tilecolor = tilecolors[Math.floor(Math.random()*tilecolors.length)];
+							var op = opacity[Math.floor(Math.random()*opacity.length)];
+							if(tile.data_category == "app")
+								$li = $('<li class="element '+tile.shape+' hp vp" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><a href="" class="appicon"><img src="" alt=""></a><h1 class="appname thmtxt">'+tile.title+'</h1></li>');
+							else
+								$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 holder_f">test content</div></li>');
+							$group.find("ul").append($li);		
+						})
+							$("div#group_wrapper").append($group);
+					})
 					bindHandlers();
 					o.initializeWidgets();
+				})
+			}
+			var loadSectionList = function(){
+				$.getJSON("/desktop/getsectionlist",{desktopid:o.desktopId},function(sectionlist){
+					$.each(sectionlist,function(i,section){
+						var tempstyle="";
+						if(i==0){
+							tempstyle = "style='display:none;'";
+							$("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>'));
+					})
+					bindSecondaryHandlers();
+				})
+			}
+			
+		var bindSecondaryHandlers = function(){
+			$("ul#section_list li.section_name").click(function(){
+				$("li.section_name").show();
+				$(this).hide();
+				$("span#section_heading").text($(this).text());
+				loadTiles($(this).find("a").attr("href"));
+			})
+		}
+			
+		if(!o.desktopData[o.currentface]){
+			$(o.contentHolder).empty().load("/desktop/"+target,function(){
+					loadTiles(o.sectionId);
+					loadSectionList();	
 			});
 		}else{
 			$(o.contentHolder).html(o.desktopData[o.currentface]);
 				bindHandlers();
 				o.initializeWidgets();
+				bindSecondaryHandlers();
 		}
 	};
 	this.tempFunc = function(){
@@ -225,7 +267,6 @@ var orbitDesktop = function(dom){
 		if(!o.desktopData[o.currentface]){
 			$(o.contentHolder).empty().load("/desktop/"+target,function(){
 				bindHandlers();
-			
 			});
 		}else{
 			$(o.contentHolder).html(o.desktopData[o.currentface]);
@@ -276,6 +317,7 @@ var orbitDesktop = function(dom){
 				});
 			}
 		};
+	
 		if(!o.desktopData[o.currentface]){
 			$(o.contentHolder).empty().load("/desktop/"+target,function(){
 				bindHandlers();	
@@ -294,14 +336,14 @@ var orbitDesktop = function(dom){
 				o.changeTheme($(this).val());	
 			})
 		}
-		if(!o.desktopData[o.currentface]){
+	//	if(!o.desktopData[o.currentface]){
 			$(o.contentHolder).empty().load("/desktop/"+target,function(){
 				bindHandlers();
 			});
-		}else{
+	//	}else{
-			$(o.contentHolder).html(o.desktopData[o.currentface]);
+	//		$(o.contentHolder).html(o.desktopData[o.currentface]);
-				bindHandlers();	
+	//			bindHandlers();	
-		}
+	//	}
 	};
 	this.loadWallpaper = function(wallpaper){
 		if(!wallpaper)wallpaper = o.themesettings.background;
@@ -343,4 +385,6 @@ orbitDesktop.prototype.widgetfolder = "desktop_widgets";
 orbitDesktop.prototype.desktopId = "1";
 orbitDesktop.prototype.notifyImgPath = "temp";
 
-// devin
+var uselessfunction = function(){
+	$.post("/desktop/temp_func",{sectionid:"4f83e7bbbd98eb041600001d"});
+}

app/assets/javascripts/orbitdesktopAPI.js

@@ -38,4 +38,17 @@ var orbitDesktopAPI = function(){
 		if(!time)time=5000; else time=time*1000;
 		$notify.slideDown().delay(time).slideUp();
 	};
+	this.executeFunc = function(func,callbackFn){
+		func.call(this);
+		if(callbackFn){
+			callbackFn.call(this,func);
+		}
+	};
+	this.sortJSON = function(field, reverse, primer){
+	   var key = function (x) {return primer ? primer(x[field]) : x[field]};
+	   return function (a,b) {
+	       var A = key(a), B = key(b);
+	       return ((A < B) ? -1 : (A > B) ? +1 : 0) * [-1,1][+!!reverse];                  
+	   }
+	}
 };

app/controllers/desktop_controller.rb

@@ -3,6 +3,7 @@ class DesktopController< ApplicationController
   before_filter :authenticate_user!
   def index
     @desktop = current_user.desktop
+    @section = @desktop.sections.first
   end
   
   def desktop
@@ -34,4 +35,37 @@ class DesktopController< ApplicationController
   def settings
     render :layout => false
   end
+  
+  def getgroups
+    @section = Section.find(params["sectionid"])
+    @groups = @section.groups
+    a = Array.new
+    @groups.each do |group|
+      a << group.tiles
+    end
+    render :json =>a.to_json
+  end
+  
+  def getsectionlist
+    @desktop = Desktop.find(params["desktopid"])
+    @sections = @desktop.sections
+    render :json => @sections.to_json 
+  end
+  
+  def temp_func
+     @section = Section.find(params["sectionid"])
+      @groups = @section.groups
+      
+      @groups.each do |group|
+        a = 1;
+        @tiles = group.tiles
+        @tiles.each do |tile|
+          tile.update_attributes({:data_category => "widget",:data_content => "temp", :position => a})
+          a = a+1;
+        end
+      end
+      b = Array.new
+       b << {"success"=>"true"}
+       render :json=>b.to_json
+  end
 end

app/models/group.rb

@@ -7,8 +7,12 @@ class Group
   before_create :initialize_tile
   
   def initialize_tile
-    self.tiles.build
+    self.tiles.build(data_category: "widget", data_content: "timetable", position: 1, shape: "w2 h2", title: "Tiime Table")
-    self.tiles.build
+    self.tiles.build(data_category: "app", data_content: "quotes", position: 2, shape: "w1 h1", title: "Quotes")
+    self.tiles.build(data_category: "widget", data_content: "weather", position: 3, shape: "w2 h2", title: "Weather")
+    self.tiles.build(data_category: "widget", data_content: "clock", position: 4, shape: "w2 h1", title: "Clock")
+    self.tiles.build(data_category: "app", data_content: "dailyenglish", position: 5, shape: "w1 h1", title: "Daily English Word")
+    self.tiles.build(data_category: "widget", data_content: "school_events", position: 6, shape: "w2 h1", title: "School Events")
   end
   
 end

app/models/tile.rb

@@ -2,6 +2,12 @@ class Tile
   include Mongoid::Document
   include Mongoid::Timestamps
   
+  field :data_category
+  field :data_content
+  field :position, type: Integer
+  field :shape
+  field :title
+  
   belongs_to :group
   
   

app/views/desktop/desktop.html.erb

@@ -1,12 +1,13 @@
 <div id="content">
 	<div id="header" class="hh3">
 		<div class="dtitle w2 hh3 hp sdm">
-			<span class="thmtxth">Campus</span>
+			<span class="thmtxth" id="section_heading">Loading...</span>
 			<div class="admbg sdm_o">
-				<ul>
+				<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>
 					<li><a class="admtxt hp w2 hh2" href="">Social</a></li>
-					<li><a class="admtxt hp w2 hh2" href="">Private</a></li>
+					<li><a class="admtxt hp w2 hh2" href="">Private</a></li> -->
 				</ul>
 			</div>
 		</div>
@@ -15,7 +16,7 @@
 		<div class="scrollbar op01"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
 			<div class="viewport">
 	        <div id="group_wrapper" class="overview">
-	        <div class="group">
+	      <!--  <div class="group">
 	            <ul class="grp ui-sortable">
                 	<li class="element w2 h2 hp vp" data-category="abc">
 	                    <span class="tile thmc1 op07"></span>
@@ -89,7 +90,7 @@
 	                        <h1 class="appname thmtxt">Aperture</h1>
 	                    </li> 
 	                </ul>
-	            </div>
+	            </div>-->
                 <div class="clear"></div>
 				</div>
 			</div>

app/views/desktop/index.html.erb

@@ -80,6 +80,8 @@
 	orbitDesktop.prototype.themefolder = "desktop_themes";
 	orbitDesktop.prototype.notifyImgPath = "/assets/";
 	orbitDesktop.prototype.desktopId = "<%= @desktop.id %>";
+	orbitDesktop.prototype.sectionId = "<%= @section.id %>";
+	//uselessfunction();
 	var od = new orbitDesktop("#ajax_container");
-	o.notify("Notification Working!!","imp",5)
+	o.notify("Notification Working!!","imp",3)
 </script>

config/routes.rb

@@ -108,6 +108,9 @@ Orbit::Application.routes.draw do
   match '/desktop/settings'=>'desktop#settings'
   match '/desktop/get_desktop_settings/'=>'desktop#get_desktop_settings'
   match '/desktop/save_desktop_settings/'=>'desktop#save_desktop_settings'
+  match '/desktop/getgroups/'=>'desktop#getgroups'
+  match '/desktop/getsectionlist/'=>'desktop#getsectionlist'
+  match '/desktop/temp_func/'=>'desktop#temp_func'
   match '/panel/:app_name/front_end/:app_action/:id' => 'pages#show_from_link', :constraints => lambda { |request|
     !request.query_string.include?("inner=true")
   }

public/desktop_widgets/clock1/clock1.js

@@ -0,0 +1,171 @@
+/*!
+ * jquery.tzineClock.js - Tutorialzine Colorful Clock Plugin
+ *
+ * Copyright (c) 2009 Martin Angelov
+ * http://tutorialzine.com/
+ *
+ * Licensed under MIT
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Launch  : December 2009
+ * Version : 1.0
+ * Released: Monday 28th December, 2009 - 00:00
+ */
+
+(function($){
+	
+	// A global array used by the functions of the plug-in:
+	var gVars = {};
+
+	// Extending the jQuery core:
+	$.fn.tzineClock = function(opts){
+	
+		// "this" contains the elements that were selected when calling the plugin: $('elements').tzineClock();
+		// If the selector returned more than one element, use the first one:
+		
+		var container = this.eq(0);
+	
+		if(!container)
+		{
+			try{
+				console.log("Invalid selector!");
+			} catch(e){}
+			
+			return false;
+		}
+		
+		if(!opts) opts = {}; 
+		
+		var defaults = {
+			/* Additional options will be added in future versions of the plugin. */
+		};
+		
+		/* Merging the provided options with the default ones (will be used in future versions of the plugin): */
+		$.each(defaults,function(k,v){
+			opts[k] = opts[k] || defaults[k];
+		})
+
+		// Calling the setUp function and passing the container,
+		// will be available to the setUp function as "this":
+		setUp.call(container);
+		
+		return this;
+	}
+	
+	function setUp()
+	{
+		// The colors of the dials:
+		var colors = ['orange','blue','green'];
+		
+		var tmp;
+		
+		for(var i=0;i<3;i++)
+		{
+			// Creating a new element and setting the color as a class name:
+			
+			tmp = $('<div>').attr('class',colors[i]+' clock').html(
+				'<div class="display"></div>'+
+				
+				'<div class="front left"></div>'+
+				
+				'<div class="rotate left">'+
+					'<div class="bg left"></div>'+
+				'</div>'+
+				
+				'<div class="rotate right">'+
+					'<div class="bg right"></div>'+
+				'</div>'
+			);
+			
+			// Appending to the container:
+			$(this).append(tmp);
+			
+			// Assigning some of the elements as variables for speed:
+			tmp.rotateLeft = tmp.find('.rotate.left');
+			tmp.rotateRight = tmp.find('.rotate.right');
+			tmp.display = tmp.find('.display');
+			
+			// Adding the dial as a global variable. Will be available as gVars.colorName
+			gVars[colors[i]] = tmp;
+		}
+		
+		// Setting up a interval, executed every 1000 milliseconds:
+		setInterval(function(){
+		
+			var currentTime = new Date();
+			var h = currentTime.getHours();
+			var m = currentTime.getMinutes();
+			var s = currentTime.getSeconds();
+			
+			animation(gVars.green, s, 60);
+			animation(gVars.blue, m, 60);
+			animation(gVars.orange, h, 24);
+		
+		},1000);
+	}
+	
+	function animation(clock, current, total)
+	{
+		// Calculating the current angle:
+		var angle = (360/total)*(current+1);
+	
+		var element;
+
+		if(current==0)
+		{
+			// Hiding the right half of the background:
+			clock.rotateRight.hide();
+			
+			// Resetting the rotation of the left part:
+			rotateElement(clock.rotateLeft,0);
+		}
+		
+		if(angle<=180)
+		{
+			// The left part is rotated, and the right is currently hidden:
+			element = clock.rotateLeft;
+		}
+		else
+		{
+			// The first part of the rotation has completed, so we start rotating the right part:
+			clock.rotateRight.show();
+			clock.rotateLeft.show();
+			
+			rotateElement(clock.rotateLeft,180);
+			
+			element = clock.rotateRight;
+			angle = angle-180;
+		}
+
+		rotateElement(element,angle);
+		
+		// Setting the text inside of the display element, inserting a leading zero if needed:
+		clock.display.html(current<10?'0'+current:current);
+	}
+	
+	function rotateElement(element,angle)
+	{
+		// Rotating the element, depending on the browser:
+		var rotate = 'rotate('+angle+'deg)';
+		
+		if(element.css('MozTransform')!=undefined)
+			element.css('MozTransform',rotate);
+			
+		else if(element.css('WebkitTransform')!=undefined)
+			element.css('WebkitTransform',rotate);
+	
+		// A version for internet explorer using filters, works but is a bit buggy (no surprise here):
+		else if(element.css("filter")!=undefined)
+		{
+			var cos = Math.cos(Math.PI * 2 / 360 * angle);
+			var sin = Math.sin(Math.PI * 2 / 360 * angle);
+			
+			element.css("filter","progid:DXImageTransform.Microsoft.Matrix(M11="+cos+",M12=-"+sin+",M21="+sin+",M22="+cos+",SizingMethod='auto expand',FilterType='nearest neighbor')");
+	
+			element.css("left",-Math.floor((element.width()-200)/2));
+			element.css("top",-Math.floor((element.height()-200)/2));
+		}
+	
+	}
+	
+})(jQuery)

public/desktop_widgets/clock1/index.html.erb

@@ -0,0 +1,76 @@
+<style>
+.clock{
+	/* The .clock div. Created dynamically by jQuery */
+	background-color:#252525;
+	height:75px;
+	width:75px;
+	position:relative;
+	overflow:hidden;
+	float:left;
+}
+
+.clock .rotate{
+	/* There are two .rotate divs - one for each half of the background */
+	position:absolute;
+	width:75px;
+	height:75px;
+	top:0;
+	left:0;
+}
+
+.rotate.right{
+	display:none;
+	z-index:11;
+}
+
+.clock .bg, .clock .front{
+	width:50px;
+	height:75px;
+	background-color:#252525;
+	position:absolute;
+	top:0;
+}
+
+.clock .display{
+	/* Holds the number of seconds, minutes or hours respectfully */
+	position:absolute;
+	width:75px;
+	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
+	z-index:20;
+	color:#F5F5F5;
+	font-size:22.5px;
+	text-align:center;
+	top:27.5px;
+	left:0;
+	
+	/* CSS3 text shadow: */
+	text-shadow:4px 4px 5px #333333;
+}
+
+/* The left part of the background: */
+
+.clock .bg.left{ left:0; }
+
+/* Individual styles for each color: */
+.orange .bg.left{ background:url(desktop_widgets/clock/img/bg_orange.png) no-repeat left top; }
+.green .bg.left{ background:url(desktop_widgets/clock/img/bg_green.png) no-repeat left top; }
+.blue .bg.left{	background:url(desktop_widgets/clock/img/bg_blue.png) no-repeat left top; }
+
+/* The right part of the background: */
+.clock .bg.right{ left:25px; }
+
+.orange .bg.right{ background:url(desktop_widgets/clock/img/bg_orange.png) no-repeat right top; }
+.green .bg.right{ background:url(desktop_widgets/clock/img/bg_green.png) no-repeat right top; }
+.blue .bg.right{ background:url(desktop_widgets/clock/img/bg_blue.png) no-repeat right top; }
+
+
+.clock .front.left{
+	left:0;
+	z-index:10;
+}
+
+</style>
+<div id="fancyClock1"></div>
+<script>
+$('#fancyClock1').tzineClock();
+</script>

public/desktop_widgets/clock1/temp/clock.css

@@ -0,0 +1,69 @@
+.clock{
+	/* The .clock div. Created dynamically by jQuery */
+	background-color:#252525;
+	height:200px;
+	width:200px;
+	position:relative;
+	overflow:hidden;
+	float:left;
+}
+
+.clock .rotate{
+	/* There are two .rotate divs - one for each half of the background */
+	position:absolute;
+	width:200px;
+	height:200px;
+	top:0;
+	left:0;
+}
+
+.rotate.right{
+	display:none;
+	z-index:11;
+}
+
+.clock .bg, .clock .front{
+	width:100px;
+	height:200px;
+	background-color:#252525;
+	position:absolute;
+	top:0;
+}
+
+.clock .display{
+	/* Holds the number of seconds, minutes or hours respectfully */
+	position:absolute;
+	width:200px;
+	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
+	z-index:20;
+	color:#F5F5F5;
+	font-size:60px;
+	text-align:center;
+	top:65px;
+	left:0;
+	
+	/* CSS3 text shadow: */
+	text-shadow:4px 4px 5px #333333;
+}
+
+/* The left part of the background: */
+
+.clock .bg.left{ left:0; }
+
+/* Individual styles for each color: */
+.orange .bg.left{ background:url(bg_orange.png) no-repeat left top; }
+.green .bg.left{ background:url(bg_green.png) no-repeat left top; }
+.blue .bg.left{	background:url(bg_blue.png) no-repeat left top; }
+
+/* The right part of the background: */
+.clock .bg.right{ left:100px; }
+
+.orange .bg.right{ background:url(bg_orange.png) no-repeat right top; }
+.green .bg.right{ background:url(bg_green.png) no-repeat right top; }
+.blue .bg.right{ background:url(bg_blue.png) no-repeat right top; }
+
+
+.clock .front.left{
+	left:0;
+	z-index:10;
+}

public/desktop_widgets/weather1/index.html.erb

@@ -0,0 +1,6 @@
+<div style='width: 180px; height: 150px; background-image: url( /desktop_widgets/weather/img/clouds_180x150_bg.jpg );
+background-repeat: no-repeat; background-color: #;' ><div id='NetweatherContainer'
+style='height: 138px;' ><script src='http://netweather.accuweather.com/adcbin/
+netweather_v2/netweatherV2ex.asp?
+partner=netweather&tStyle=normal&logo=1&zipcode=ASI|TW|TW018|HSINCHU|
+&lang=eng&size=8&theme=clouds&metric=0&target=_self'></script></div></div>