widget structure improvised…

Gemfile.lock

@@ -88,8 +88,6 @@ GEM
     factory_girl_rails (1.7.0)
       factory_girl (~> 2.6.0)
       railties (>= 3.0.0)
-    faraday (0.8.0)
-      multipart-post (~> 1.1)
     fastercsv (1.5.4)
     haml (3.1.4)
     hike (1.2.1)
@@ -123,7 +121,6 @@ GEM
       encrypted_strings (~> 0.3.3)
       mongoid (~> 2)
     multi_json (1.1.0)
-    multipart-post (1.1.5)
     nokogiri (1.5.2)
     nokogiri (1.5.2-x86-mingw32)
     orm_adapter (0.0.6)
@@ -201,7 +198,6 @@ GEM
       tilt (~> 1.3.2)
     sexp_processor (3.1.0)
     shoulda-matchers (1.0.0)
-    simple_oauth (0.1.7)
     simplecov (0.6.1)
       multi_json (~> 1.0)
       simplecov-html (~> 0.5.3)
@@ -227,11 +223,6 @@ GEM
     treetop (1.4.10)
       polyglot
       polyglot (>= 0.3.1)
-    twitter (2.2.0)
-      activesupport (>= 2.3.9, < 4)
-      faraday (~> 0.7)
-      multi_json (~> 1.0)
-      simple_oauth (~> 0.1)
     tzinfo (0.3.32)
     uglifier (1.2.3)
       execjs (>= 0.3.0)
@@ -285,6 +276,5 @@ DEPENDENCIES
   spork
   sprockets
   tinymce-rails
-  twitter
   uglifier
   watchr

app/assets/javascripts/orbitdesktop.js

@@ -1101,7 +1101,22 @@ var orbitDesktop = function(dom){
 
 			}
 			$("div#apps_store div#panel_r").load("/desktop_appstore/widgets",function(){
-				bindHandlers();
+				$.getJSON("/desktop_appstore/getuserwidgets",function(userwidgets){
+					var column = $('<div class="g_col list_t"><ul></ul></div>'),
+						counter = 1,
+						li;
+					$.each(userwidgets,function(i,widge){
+							li = $('<li class="list_t_item" for="'+widge._id+'"><div class="list_t_title">'+widge.name+'</div><div class="list_t_des">'+widge.shape+'</div></li>');
+							column.find("ul").append(li);
+							if(counter%5==0){
+								$("#journal_p div#paper_list div.overview").append(column);
+								column = $('<div class="g_col list_t"><ul></ul></div>');
+							}
+							counter++;
+					})
+					//alert(column);
+				$("#apps_store div#widget_list").append(column);
+				})
 			})
 		}
 
@@ -1109,7 +1124,6 @@ var orbitDesktop = function(dom){
 			$(o.contentHolder).empty().load("/desktop_appstore/"+target,function(){
 				widgets();
 				bindHandlers();
-				
 			});
 		}else{
 			$(o.contentHolder).html(o.desktopData[o.currentface]);

app/controllers/desktop_appstore_controller.rb

@@ -8,4 +8,9 @@ class DesktopAppstoreController< ApplicationController
 		render "desktop/appstore/widgets", :layout => false
 	end
 
+	def getuserwidgets
+		@widgets = current_user.desktop_widgets
+		render :json=>@widgets.to_json
+	end
+
 end

app/models/desktop_widget.rb

@@ -0,0 +1,11 @@
+class DesktopWidget
+	include Mongoid::Document
+  	include Mongoid::Timestamps
+
+  	field :name
+  	field :author
+  	field :shape
+  	field :user_id
+
+  	belongs_to :user
+end

app/models/user/user.rb

@@ -19,6 +19,7 @@ class User
   has_one :desktop, :autosave => true, :dependent => :destroy
   has_many :other_accounts, :autosave => true, :dependent => :destroy
   has_many :journals, :autosave => true, :dependent => :destroy
+  has_many :desktop_widgets, :autosave => true, :dependent => :destroy
   belongs_to :role
   has_and_belongs_to_many :sub_roles
   accepts_nested_attributes_for :attribute_values, :allow_destroy => true

app/views/desktop/appstore/widgets.html.erb

@@ -1 +1,11 @@
-this is widget page...
+<div class="tinycanvas hp">
+	<div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
+	<div class="viewport">
+		<div id="connection_setting" class="overview vp">
+			<div class="s_title hh3">Your Widgets</div>
+			<div class="overview" id="widget_list">
+				
+			</div>
+		</div>
+	</div>
+</div>

config/routes.rb

@@ -129,6 +129,7 @@ Orbit::Application.routes.draw do
 
   match '/desktop_appstore/appstore'=>'desktop_appstore#appstore'
   match '/desktop_appstore/widgets'=>'desktop_appstore#widgets'
+  match '/desktop_appstore/getuserwidgets'=>'desktop_appstore#getuserwidgets'
   
   match '/desktop/temp_func/'=>'desktop#temp_func'
   

public/desktop_widgets/4fa7810ac88514014d7c59bc/index.html.erb

@@ -51,16 +51,16 @@
 .clock .bg.left{ left:0px; }
 
 /* Individual styles for each color: */
-.orange .bg.left{ background:url(desktop_widgets/clock/img/bg_orange.png) no-repeat left top; }
+.orange .bg.left{ background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_orange.png) no-repeat left top; }
-.green .bg.left{ background:url(desktop_widgets/clock/img/bg_green.png) no-repeat left top; }
+.green .bg.left{ background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_green.png) no-repeat left top; }
-.blue .bg.left{	background:url(desktop_widgets/clock/img/bg_blue.png) no-repeat left top; }
+.blue .bg.left{	background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_blue.png) no-repeat left top; }
 
 /* The right part of the background: */
 .clock .bg.right{ left:37.5px; }
 
-.orange .bg.right{ background:url(desktop_widgets/clock/img/bg_orange.png) no-repeat right top; }
+.orange .bg.right{ background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_orange.png) no-repeat right top; }
-.green .bg.right{ background:url(desktop_widgets/clock/img/bg_green.png) no-repeat right top; }
+.green .bg.right{ background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_green.png) no-repeat right top; }
-.blue .bg.right{ background:url(desktop_widgets/clock/img/bg_blue.png) no-repeat right top; }
+.blue .bg.right{ background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_blue.png) no-repeat right top; }
 
 
 .clock .front.left{

public/desktop_widgets/4fa78140c88514014d7c59be/index.html.erb

@@ -22,7 +22,7 @@ input {
 </style>
 <center>
 <form id="search">
-<img src="desktop_widgets/googlesearch/img/google_64.png" style='margin-right:10px;'><br />
+<img src="desktop_widgets/4fa78140c88514014d7c59be/img/google_64.png" style='margin-right:10px;'><br />
 <input id="googlesearch">
 <input type="submit" style="display:none;">
 <br>

public/desktop_widgets/4fa78153c88514014d7c59bf/4fa78153c88514014d7c59bf.js

@@ -1,6 +1,6 @@
 var eventsjson = new Array;
 var loadEvents = function(){
-	$.getJSON(o.widgetfolder+"/school_events/events.json",function(events){
+	$.getJSON(o.widgetfolder+"/4fa78153c88514014d7c59bf/events.json",function(events){
 		$.each(events,function(i,event){
 			eventsjson.push(event);
 		})

public/desktop_widgets/4fa7817cc88514014d7c59c2/index.html.erb

@@ -28,7 +28,7 @@
 </style>
 <div class="g_weather">
 	<div class="gw_recent">
-		<img src="desktop_widgets/weather/img/sunny.png" alt="sunny" class="gw_condition">
+		<img src="desktop_widgets/4fa7817cc88514014d7c59c2/img/sunny.png" alt="sunny" class="gw_condition">
 		<div class="gw_temp">
 			<span class="gw_temp_num thmtxt">29</span><span class="gw_temp_unit thmtxt">°C</span>
 		</div>

public/desktop_widgets/clock1/clock1.js

@@ -1,171 +0,0 @@
-/*!
- * 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

@@ -1,76 +0,0 @@
-<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:37.5px;
-	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:37.5px; }
-
-.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

@@ -1,69 +0,0 @@
-.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;
-}