Widgets Loading dynamically and semi structured

This commit is contained in:
Harry Bomrah committed 2012-04-06 23:48:03 +08:00
1 parent bb2375b15e
commit 35567c2139
25 files changed
+612 -548

No files matched your search

+74 -5
View File
@@ -68,9 +68,16 @@ var orbitDesktop = function(dom){
});
}
});
$("select#change_theme").change(function(){
o.changeTheme($(this).val());
})
$("a#d_settings").click(function(){
var target = $(this).attr("href");
if(o.currenthtml!=target){
o.desktopData[o.currentface] = $(o.contentHolder).html();
$("#content").hide("drop",o.transitionTime,function(){
o.initializeSettings(target);
});
}
});
$(window).resize(function(){
var ww = $(window).width();
$("img#thmbackground").attr({"width":ww});
@@ -140,14 +147,32 @@ var orbitDesktop = function(dom){
});
$('#holder').tinyscrollbar({ axis: 'x'});
$("div.scrollbar").hover(function(){
$(this).removeClass('op01');
}, function(){
$(this).addClass('op01');
});
var $sdm = $('.sdm');
if( !$sdm.children('.sdm_o') ){
return;
} else {
$sdm.hover(function(){
$(this).addClass('thmc2');
}, function(){
$(this).removeClass('thmc2');
});
}
}
if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load("/desktop/"+target,function(){
bindHandlers();
o.initializeWidgets();
});
}else{
$(o.contentHolder).html(o.desktopData[o.currentface]);
bindHandlers();
o.initializeWidgets();
}
};
this.tempFunc = function(){
@@ -200,15 +225,16 @@ 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]);
bindHandlers();
bindHandlers();
}
};
this.initializeSectionsManager = function(target){
o.currenthtml = target;
o.currentface = "settings";
o.currentface = "sections";
var elementParent,element;
var bindHandlers = function(){
$(".group").width(530);
@@ -236,6 +262,17 @@ var orbitDesktop = function(dom){
$(this).toggleClass("op06");
})//.mouseleave(function(){$(this).addClass("op06");});
$('#holder').tinyscrollbar({ axis: 'x'});
var $sdm = $('.sdm');
if( !$sdm.children('.sdm_o') ){
return;
} else {
$sdm.hover(function(){
$(this).addClass('thmc2');
}, function(){
$(this).removeClass('thmc2');
});
}
};
if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load("/desktop/"+target,function(){
@@ -247,6 +284,23 @@ var orbitDesktop = function(dom){
}
};
this.initializeSettings = function(target){
o.currenthtml = target;
o.currentface = "settings";
var bindHandlers = function(){
$("select#change_theme").change(function(){
o.changeTheme($(this).val());
})
}
if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load("/desktop/"+target,function(){
bindHandlers();
});
}else{
$(o.contentHolder).html(o.desktopData[o.currentface]);
bindHandlers();
}
};
this.loadWallpaper = function(wallpaper){
if(!wallpaper)wallpaper = o.themesettings.background;
var ww = $(window).width();
@@ -264,11 +318,26 @@ var orbitDesktop = function(dom){
var setting_name = $(this).attr("id").replace("_icon","");
$(this).attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons[setting_name])
})
};
this.initializeWidgets = function(){
var elements = $("#group_wrapper li.element");
$.each(elements,function(){
var widget = $(this);
if(widget.attr("data-category")=="widget"){
var widgename =widget.attr("data-content");
$.getScript("/desktop_widgets/"+widgename+"/"+widgename+".js",function(){
widget.find("div.appholder").load("/desktop_widgets/"+widgename+"/index.html.erb");
});
// $(this).find("div.appholder").append( $('<link rel="stylesheet" id="dyn_css" type="text/css" />').attr('href', "/desktop_widgets/"+widgename+"/css/"+widgename+".css"));
}
})
}
o.initialize();
}
orbitDesktop.prototype.themefolder = "themes";
orbitDesktop.prototype.widgetfolder = "desktop_widgets";
orbitDesktop.prototype.desktopId = "1";
orbitDesktop.prototype.notifyImgPath = "temp";
+51 -21
View File
@@ -62,7 +62,7 @@ body {
a, a:hover { text-decoration: none; }
/* desktop layout */
#container {
margin: 72px 0 0 156px;
margin: 48px 0 0 156px;
}
#header {
padding: 0 0 12px 0;
@@ -72,7 +72,7 @@ a, a:hover { text-decoration: none; }
width: 156px;
height: 540px;
position: absolute;
top: 144px;
top: 120px;
left: 0;
z-index: 9;
}
@@ -154,7 +154,35 @@ a, a:hover { text-decoration: none; }
height:516px;
}
.appname { font-size: 15px; }
.appname {
font-size: 15px;
height: 30px;
line-height: 30px;
overflow: hidden;
cursor: default;
z-index: 2;
}
.w1.h1 .appname { text-align: center; }
.w2.h2 .appname { font-size: 21px; }
.appicon {
display: block;
width: 60px;
height: 60px;
margin: 0 auto;
position: relative;
}
.appholder {
position: relative;
padding-bottom: 12px;
}
.holder_f {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
/* left: 0;
top: 0; */
}
.dtitle {
font-size: 30px;
line-height: 60px;
@@ -163,22 +191,8 @@ a, a:hover { text-decoration: none; }
position: relative;
z-index: 9;
}
.dtitle:hover {
/* $(this).addClass( .thmc1 or .thmc2 ); */
}
.dtitle:hover .section_slc { display: block; }
.section_slc {
display: none;
position: absolute;
width: 252px;
left: 0;
top: 60px;
font-size: 15px;
line-height: 34px;
}
.section_slc li { border-top: solid 1px #f2f2f2; padding: 0 12px; }
.section_slc li:first-child { border: none; }
.section_slc li:hover { background-color: #F0F0F0; }
/*.section_slc { width: 252px; }*/
.admbg { background-color: #fff; }
.admtxt { color: #666; }
.admtxt:hover { color: #666; }
@@ -198,6 +212,21 @@ a, a:hover { text-decoration: none; }
left: 0;
top: 0;
}
/* simple dropdown menu */
.sdm {}
.sdm:hover .sdm_o { display: block; }
.sdm_o {
display: none;
position: absolute;
left: 0;
top: 60px;
font-size: 15px;
}
.sdm_o li { border-top: solid 1px #f2f2f2; }
.sdm_o li:first-child { border: none; }
.sdm_o .admtxt { display: block; line-height: 36px; }
.sdm_o .admtxt:hover { background-color: #F0F0F0; }
/* theme color opacity */
.op10 { opacity: 1; }
.op09 { opacity: 0.9; }
@@ -231,6 +260,7 @@ a, a:hover { text-decoration: none; }
.element {
margin: 0 12px 12px 0;
float: left;
position: relative;
/*display:inline-block;*/
}
.group{
@@ -250,7 +280,7 @@ a, a:hover { text-decoration: none; }
max-width: 340px;
}
.g_sep { width: 11px; border-left: solid 1px #fff; }
.appicon { width: 60px; height: 60px; }
.clear { clear: both; }
@@ -270,7 +300,7 @@ a, a:hover { text-decoration: none; }
/* Orbit Notification */
#orbitnote {
position: absolute;
position: fixed;
top: 0;
left: 50%;
margin-left: -206px;
+4
View File
@@ -30,4 +30,8 @@ class DesktopController< ApplicationController
@desktop = Desktop.find(params["id"])
render :json => @desktop.to_json
end
def settings
render :layout => false
end
end
+97 -111
View File
@@ -1,113 +1,99 @@
<div id="content">
<div id="header" class="hh3">
<div class="dtitle w2 hh3 hp">
<span class="thmtxth">Desktop</span>
<div class="section_slc admbg">
<ul>
<li><a class="admtxt" href="">Section 1</a></li>
<li><a class="admtxt" href="">Section 2</a></li>
<li><a class="admtxt" href="">Section 3</a></li>
</ul>
</div>
<div id="content">
<div id="header" class="hh3">
<div class="dtitle w2 hh3 hp sdm">
<span class="thmtxth">Campus</span>
<div class="admbg sdm_o">
<ul>
<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>
</ul>
</div>
</div>
</div>
<div id="holder">
<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">
<ul class="grp ui-sortable">
<li class="element w2 h2 hp vp" data-category="abc">
<span class="tile thmc1 op07"></span>
<h1 class="appname thmtxt">MyCourseTimeTable</h1>
<div class="appholder">test content</div>
</li>
<li class="element w1 h1 hp vp" data-category="desktop">
<span class="tile thmc2 op09"></span>
<a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">名人名言</h1>
</li>
<li class="element w2 h2 hp vp" data-category="widget" data-content='weather'>
<span class="tile thmc2 op09"></span>
<h1 class="appname thmtxt">Weather</h1>
<div class="appholder holder_f">
</div>
</li>
<li class="element w2 h1 hp vp" data-category="widget" data-content='clock'>
<span class="tile thmc1 op08"></span>
<h1 class="appname thmtxt">Clock</h1>
<div class="appholder holder_f">test content</div>
</li>
<li class="element w2 h1 hp vp" data-category="widget" data-content="school_events">
<span class="tile thmc1 op08"></span>
<h1 class="appname thmtxt">School Events</h1>
<div class="appholder">test content</div>
</li>
<li class="element w1 h1 hp vp" data-category="desktop">
<span class="tile thmc2 op09"></span>
<a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">每日英文</h1>
</li>
</ul>
</div>
<div class="group">
<ul class="grp ui-sortable">
<li style="" class="element w2 h2 hp vp thmc2 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li><li class="element w2 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w2 h1 hp vp thmc1 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li><li style="" class="element w2 h2 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc2 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li><li style="" class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div id="holder">
<div class="scrollbar"><div class="track"><div class="thumb thmc1"><div class="end"></div></div></div></div>
<div class="viewport">
<div id="group_wrapper" class="overview">
<div class="group">
<ul class="grp ui-sortable">
<li class="element w2 h2 hp vp thmc1 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w2 h2 hp vp thmc2 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w1 h1 hp vp thmc1 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w2 h1 hp vp thmc1 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc1 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li><li style="" class="element w2 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
</ul>
</div>
<div class="group">
<ul class="grp ui-sortable">
<li style="" class="element w2 h2 hp vp thmc2 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li><li class="element w2 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w2 h1 hp vp thmc1 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li><li style="" class="element w2 h2 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc2 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li><li style="" class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
+3 -9
View File
@@ -65,13 +65,7 @@
</div>
</div>
<!--<div id="orbitbar"></div>-->
Change Theme: <select id="change_theme">
<option value='default'>Default Theme</option>
<option value='Snake'>Snake Theme</option>
<option value='sexy'>Sexy Theme</option>
<option value='vintage'>Vintage Theme</option>
<option value='chris'>Chris Theme</option>
</select>
<img src="" id="thmbackground" />
<div id="bgover" ></div>
<div id="orbitnote" style="display:none;">
@@ -80,12 +74,12 @@ Change Theme: <select id="change_theme">
<div class="note_message">Check the Notifications section for more information.</div>
</div>
</div>
<button onClick="od.tempFunc();">Click</button>
<script>
orbitDesktop.prototype.themefolder = "desktop_themes";
orbitDesktop.prototype.notifyImgPath = "/assets/";
orbitDesktop.prototype.desktopId = "<%= @desktop.id %>";
var od = new orbitDesktop("#ajax_container");
o.notify("Fuck yeah!! Notification Working!!","imp",5)
o.notify("Notification Working!!","imp",5)
</script>
+31
View File
@@ -0,0 +1,31 @@
<div id="content">
<div id="header" class="hh3">
<div class="dtitle w2 hh3 hp">
<span class="thmtxth">Settings</span>
</div>
</div>
<div id="holder">
<div class="scrollbar"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
<ul>
<li><a href="" class="admtxt">Overview</a></li>
<li><a href="" class="admtxt">Account</a></li>
<li><a href="" class="admtxt">Sections</a></li>
<li><a href="" class="admtxt">Theme</a></li>
<li><a href="" class="admtxt">Connection</a></li>
</ul>
<div class="clear"></div>
<select id="change_theme">
<option value='default'>Default Theme</option>
<option value='Snake'>Snake Theme</option>
<option value='sexy'>Sexy Theme</option>
<option value='vintage'>Vintage Theme</option>
<option value='chris'>Chris Theme</option>
</select>
<br />
<button onClick="od.tempFunc();">Save</button>
</div>
</div>
</div>
</div>