widget structure improvised…

This commit is contained in:
Harry Bomrah 2012-05-07 19:00:50 +08:00
parent fcc875bb5d
commit 2083e0bf4f
46 changed files with 54 additions and 338 deletions

View File

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

View File

@ -1101,7 +1101,22 @@ var orbitDesktop = function(dom){
} }
$("div#apps_store div#panel_r").load("/desktop_appstore/widgets",function(){ $("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(){ $(o.contentHolder).empty().load("/desktop_appstore/"+target,function(){
widgets(); widgets();
bindHandlers(); bindHandlers();
}); });
}else{ }else{
$(o.contentHolder).html(o.desktopData[o.currentface]); $(o.contentHolder).html(o.desktopData[o.currentface]);

View File

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

View File

@ -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

View File

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

View File

@ -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>

View File

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

View File

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

View File

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

View File

@ -51,16 +51,16 @@
.clock .bg.left{ left:0px; } .clock .bg.left{ left:0px; }
/* Individual styles for each color: */ /* 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: */ /* The right part of the background: */
.clock .bg.right{ left:37.5px; } .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{ .clock .front.left{

View File

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

View File

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

View File

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@ -22,7 +22,7 @@ input {
</style> </style>
<center> <center>
<form id="search"> <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 id="googlesearch">
<input type="submit" style="display:none;"> <input type="submit" style="display:none;">
<br> <br>

View File

@ -1,6 +1,6 @@
var eventsjson = new Array; var eventsjson = new Array;
var loadEvents = function(){ 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){ $.each(events,function(i,event){
eventsjson.push(event); eventsjson.push(event);
}) })

View File

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -28,7 +28,7 @@
</style> </style>
<div class="g_weather"> <div class="g_weather">
<div class="gw_recent"> <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"> <div class="gw_temp">
<span class="gw_temp_num thmtxt">29</span><span class="gw_temp_unit thmtxt">°C</span> <span class="gw_temp_num thmtxt">29</span><span class="gw_temp_unit thmtxt">°C</span>
</div> </div>

View File

@ -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)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.5 KiB

View File

@ -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>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

View File

@ -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;
}