Fetching desktop from db

This commit is contained in:
Harry Bomrah 2012-04-11 15:31:10 +08:00
parent eb219c14b7
commit 4875b339f8
24 changed files with 470 additions and 41 deletions

View File

@ -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{
$(o.contentHolder).html(o.desktopData[o.currentface]);
bindHandlers();
}
// }else{
// $(o.contentHolder).html(o.desktopData[o.currentface]);
// 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"});
}

View File

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

View File

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

View File

@ -7,8 +7,12 @@ class Group
before_create :initialize_tile
def initialize_tile
self.tiles.build
self.tiles.build
self.tiles.build(data_category: "widget", data_content: "timetable", position: 1, shape: "w2 h2", title: "Tiime Table")
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

View File

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

View File

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

View File

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

View File

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

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

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

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