Devin complete

This commit is contained in:
Harry Bomrah 2012-04-11 15:34:19 +08:00
commit edf6089e0c
24 changed files with 470 additions and 41 deletions

View File

@ -80,14 +80,6 @@ var orbitDesktop = function(dom){
$(window).resize(function(){ $(window).resize(function(){
var ww = $(window).width(); var ww = $(window).width();
$("img#thmbackground").attr({"width":ww}); $("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'); var $widget_fn = $('.widget_fn'),$fn_des = $('.fn_des');
$widget_fn.hover(function(){ $widget_fn.hover(function(){
@ -103,12 +95,13 @@ var orbitDesktop = function(dom){
if(!target)target = "desktop"; if(!target)target = "desktop";
o.currenthtml = target; o.currenthtml = target;
o.currentface = "home"; o.currentface = "home";
var groupWrapperWidth = 0;
var groupWrapperHeight = 0;
var extraspace = 300; var extraspace = 300;
var currentElement, elementParent, targetParent, tempElement, widthcheck; var currentElement, elementParent, targetParent, tempElement, widthcheck;
widthcheck = false; widthcheck = false;
var bindHandlers = function(){ var bindHandlers = function(){
var groupWrapperWidth = 0;
var groupWrapperHeight = 0;
$(".element").mousedown(function(){ $(".element").mousedown(function(){
currentElement = $(this); currentElement = $(this);
elementParent = $(this).parent(); elementParent = $(this).parent();
@ -162,16 +155,65 @@ var orbitDesktop = function(dom){
$(this).removeClass('thmc2'); $(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(); bindHandlers();
o.initializeWidgets(); 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{ }else{
$(o.contentHolder).html(o.desktopData[o.currentface]); $(o.contentHolder).html(o.desktopData[o.currentface]);
bindHandlers(); bindHandlers();
o.initializeWidgets(); o.initializeWidgets();
bindSecondaryHandlers();
} }
}; };
this.tempFunc = function(){ this.tempFunc = function(){
@ -205,7 +247,7 @@ var orbitDesktop = function(dom){
//for Alphabet sorting //for Alphabet sorting
$("a#alphabet_sort_btn").click(function(){ $("a#alphabet_sort_btn").click(function(){
switch ($(this).attr("href")) { switch ($(this).attr("href")){
case "ascending": case "ascending":
$(this).attr("href","descending").find(".thmtxt").text("Alphabet [Z-A]"); $(this).attr("href","descending").find(".thmtxt").text("Alphabet [Z-A]");
allApps = $(".group_search .element").sort(sortAscending); allApps = $(".group_search .element").sort(sortAscending);
@ -224,7 +266,6 @@ var orbitDesktop = function(dom){
if(!o.desktopData[o.currentface]){ if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load("/desktop/"+target,function(){ $(o.contentHolder).empty().load("/desktop/"+target,function(){
bindHandlers(); bindHandlers();
}); });
}else{ }else{
$(o.contentHolder).html(o.desktopData[o.currentface]); $(o.contentHolder).html(o.desktopData[o.currentface]);
@ -275,6 +316,7 @@ var orbitDesktop = function(dom){
}); });
} }
}; };
if(!o.desktopData[o.currentface]){ if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load("/desktop/"+target,function(){ $(o.contentHolder).empty().load("/desktop/"+target,function(){
bindHandlers(); bindHandlers();
@ -293,14 +335,14 @@ var orbitDesktop = function(dom){
o.changeTheme($(this).val()); o.changeTheme($(this).val());
}) })
} }
if(!o.desktopData[o.currentface]){ // if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load("/desktop/"+target,function(){ $(o.contentHolder).empty().load("/desktop/"+target,function(){
bindHandlers(); bindHandlers();
}); });
}else{ // }else{
$(o.contentHolder).html(o.desktopData[o.currentface]); // $(o.contentHolder).html(o.desktopData[o.currentface]);
bindHandlers(); // bindHandlers();
} // }
}; };
this.loadWallpaper = function(wallpaper){ this.loadWallpaper = function(wallpaper){
if(!wallpaper)wallpaper = o.themesettings.background; if(!wallpaper)wallpaper = o.themesettings.background;
@ -325,7 +367,7 @@ var orbitDesktop = function(dom){
$.each(elements,function(){ $.each(elements,function(){
var widget = $(this); var widget = $(this);
if(widget.attr("data-category")=="widget"){ if(widget.attr("data-category")=="widget"){
var widgename =widget.attr("data-content"); var widgename = widget.attr("data-content");
$.getScript("/desktop_widgets/"+widgename+"/"+widgename+".js",function(){ $.getScript("/desktop_widgets/"+widgename+"/"+widgename+".js",function(){
widget.find("div.appholder").load("/desktop_widgets/"+widgename+"/index.html.erb"); widget.find("div.appholder").load("/desktop_widgets/"+widgename+"/index.html.erb");
}); });
@ -342,5 +384,7 @@ orbitDesktop.prototype.widgetfolder = "desktop_widgets";
orbitDesktop.prototype.desktopId = "1"; orbitDesktop.prototype.desktopId = "1";
orbitDesktop.prototype.notifyImgPath = "temp"; orbitDesktop.prototype.notifyImgPath = "temp";
// devin var uselessfunction = function(){
$.post("/desktop/temp_func",{sectionid:"4f83e7bbbd98eb041600001d"});
}

View File

@ -43,4 +43,17 @@ var orbitDesktopAPI = function(){
.delay(time) .delay(time)
.animate({top:-n_height,opacity:0},200); .animate({top:-n_height,opacity:0},200);
}; };
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! before_filter :authenticate_user!
def index def index
@desktop = current_user.desktop @desktop = current_user.desktop
@section = @desktop.sections.first
end end
def desktop def desktop
@ -33,4 +34,37 @@ class DesktopController< ApplicationController
def settings def settings
render :layout => false render :layout => false
end 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 end

View File

@ -7,8 +7,12 @@ class Group
before_create :initialize_tile before_create :initialize_tile
def 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
end end

View File

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

View File

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

View File

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

View File

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