Widgets Loading dynamically and semi structured
This commit is contained in:
Harry Bomrah
parent
bb2375b15e
commit
35567c2139
|
|
@ -68,9 +68,16 @@ var orbitDesktop = function(dom){
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("select#change_theme").change(function(){
|
$("a#d_settings").click(function(){
|
||||||
o.changeTheme($(this).val());
|
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(){
|
$(window).resize(function(){
|
||||||
var ww = $(window).width();
|
var ww = $(window).width();
|
||||||
$("img#thmbackground").attr({"width":ww});
|
$("img#thmbackground").attr({"width":ww});
|
||||||
|
|
@ -140,14 +147,32 @@ var orbitDesktop = function(dom){
|
||||||
|
|
||||||
});
|
});
|
||||||
$('#holder').tinyscrollbar({ axis: 'x'});
|
$('#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]){
|
if(!o.desktopData[o.currentface]){
|
||||||
$(o.contentHolder).empty().load("/desktop/"+target,function(){
|
$(o.contentHolder).empty().load("/desktop/"+target,function(){
|
||||||
bindHandlers();
|
bindHandlers();
|
||||||
|
o.initializeWidgets();
|
||||||
});
|
});
|
||||||
}else{
|
}else{
|
||||||
$(o.contentHolder).html(o.desktopData[o.currentface]);
|
$(o.contentHolder).html(o.desktopData[o.currentface]);
|
||||||
bindHandlers();
|
bindHandlers();
|
||||||
|
o.initializeWidgets();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
this.tempFunc = function(){
|
this.tempFunc = function(){
|
||||||
|
|
@ -200,6 +225,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();
|
||||||
|
|
||||||
});
|
});
|
||||||
}else{
|
}else{
|
||||||
$(o.contentHolder).html(o.desktopData[o.currentface]);
|
$(o.contentHolder).html(o.desktopData[o.currentface]);
|
||||||
|
|
@ -208,7 +234,7 @@ var orbitDesktop = function(dom){
|
||||||
};
|
};
|
||||||
this.initializeSectionsManager = function(target){
|
this.initializeSectionsManager = function(target){
|
||||||
o.currenthtml = target;
|
o.currenthtml = target;
|
||||||
o.currentface = "settings";
|
o.currentface = "sections";
|
||||||
var elementParent,element;
|
var elementParent,element;
|
||||||
var bindHandlers = function(){
|
var bindHandlers = function(){
|
||||||
$(".group").width(530);
|
$(".group").width(530);
|
||||||
|
|
@ -236,6 +262,17 @@ var orbitDesktop = function(dom){
|
||||||
$(this).toggleClass("op06");
|
$(this).toggleClass("op06");
|
||||||
})//.mouseleave(function(){$(this).addClass("op06");});
|
})//.mouseleave(function(){$(this).addClass("op06");});
|
||||||
$('#holder').tinyscrollbar({ axis: 'x'});
|
$('#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]){
|
if(!o.desktopData[o.currentface]){
|
||||||
$(o.contentHolder).empty().load("/desktop/"+target,function(){
|
$(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){
|
this.loadWallpaper = function(wallpaper){
|
||||||
if(!wallpaper)wallpaper = o.themesettings.background;
|
if(!wallpaper)wallpaper = o.themesettings.background;
|
||||||
var ww = $(window).width();
|
var ww = $(window).width();
|
||||||
|
|
@ -264,11 +318,26 @@ var orbitDesktop = function(dom){
|
||||||
var setting_name = $(this).attr("id").replace("_icon","");
|
var setting_name = $(this).attr("id").replace("_icon","");
|
||||||
$(this).attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons[setting_name])
|
$(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();
|
o.initialize();
|
||||||
}
|
}
|
||||||
|
|
||||||
orbitDesktop.prototype.themefolder = "themes";
|
orbitDesktop.prototype.themefolder = "themes";
|
||||||
|
orbitDesktop.prototype.widgetfolder = "desktop_widgets";
|
||||||
orbitDesktop.prototype.desktopId = "1";
|
orbitDesktop.prototype.desktopId = "1";
|
||||||
orbitDesktop.prototype.notifyImgPath = "temp";
|
orbitDesktop.prototype.notifyImgPath = "temp";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,7 @@ body {
|
||||||
a, a:hover { text-decoration: none; }
|
a, a:hover { text-decoration: none; }
|
||||||
/* desktop layout */
|
/* desktop layout */
|
||||||
#container {
|
#container {
|
||||||
margin: 72px 0 0 156px;
|
margin: 48px 0 0 156px;
|
||||||
}
|
}
|
||||||
#header {
|
#header {
|
||||||
padding: 0 0 12px 0;
|
padding: 0 0 12px 0;
|
||||||
|
|
@ -72,7 +72,7 @@ a, a:hover { text-decoration: none; }
|
||||||
width: 156px;
|
width: 156px;
|
||||||
height: 540px;
|
height: 540px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 144px;
|
top: 120px;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
}
|
}
|
||||||
|
|
@ -154,7 +154,35 @@ a, a:hover { text-decoration: none; }
|
||||||
height:516px;
|
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 {
|
.dtitle {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
line-height: 60px;
|
line-height: 60px;
|
||||||
|
|
@ -163,22 +191,8 @@ a, a:hover { text-decoration: none; }
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
}
|
}
|
||||||
.dtitle:hover {
|
/*.section_slc { width: 252px; }*/
|
||||||
/* $(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; }
|
|
||||||
.admbg { background-color: #fff; }
|
.admbg { background-color: #fff; }
|
||||||
.admtxt { color: #666; }
|
.admtxt { color: #666; }
|
||||||
.admtxt:hover { color: #666; }
|
.admtxt:hover { color: #666; }
|
||||||
|
|
@ -198,6 +212,21 @@ a, a:hover { text-decoration: none; }
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 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 */
|
/* theme color opacity */
|
||||||
.op10 { opacity: 1; }
|
.op10 { opacity: 1; }
|
||||||
.op09 { opacity: 0.9; }
|
.op09 { opacity: 0.9; }
|
||||||
|
|
@ -231,6 +260,7 @@ a, a:hover { text-decoration: none; }
|
||||||
.element {
|
.element {
|
||||||
margin: 0 12px 12px 0;
|
margin: 0 12px 12px 0;
|
||||||
float: left;
|
float: left;
|
||||||
|
position: relative;
|
||||||
/*display:inline-block;*/
|
/*display:inline-block;*/
|
||||||
}
|
}
|
||||||
.group{
|
.group{
|
||||||
|
|
@ -250,7 +280,7 @@ a, a:hover { text-decoration: none; }
|
||||||
max-width: 340px;
|
max-width: 340px;
|
||||||
}
|
}
|
||||||
.g_sep { width: 11px; border-left: solid 1px #fff; }
|
.g_sep { width: 11px; border-left: solid 1px #fff; }
|
||||||
.appicon { width: 60px; height: 60px; }
|
|
||||||
|
|
||||||
.clear { clear: both; }
|
.clear { clear: both; }
|
||||||
|
|
||||||
|
|
@ -270,7 +300,7 @@ a, a:hover { text-decoration: none; }
|
||||||
|
|
||||||
/* Orbit Notification */
|
/* Orbit Notification */
|
||||||
#orbitnote {
|
#orbitnote {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -206px;
|
margin-left: -206px;
|
||||||
|
|
|
||||||
|
|
@ -30,4 +30,8 @@ class DesktopController< ApplicationController
|
||||||
@desktop = Desktop.find(params["id"])
|
@desktop = Desktop.find(params["id"])
|
||||||
render :json => @desktop.to_json
|
render :json => @desktop.to_json
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def settings
|
||||||
|
render :layout => false
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
|
@ -1,66 +1,53 @@
|
||||||
<div id="content">
|
<div id="content">
|
||||||
<div id="header" class="hh3">
|
<div id="header" class="hh3">
|
||||||
<div class="dtitle w2 hh3 hp">
|
<div class="dtitle w2 hh3 hp sdm">
|
||||||
<span class="thmtxth">Desktop</span>
|
<span class="thmtxth">Campus</span>
|
||||||
<div class="section_slc admbg">
|
<div class="admbg sdm_o">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a class="admtxt" href="">Section 1</a></li>
|
<li><a class="admtxt hp w2 hh2" href="">Research</a></li>
|
||||||
<li><a class="admtxt" href="">Section 2</a></li>
|
<li><a class="admtxt hp w2 hh2" href="">Social</a></li>
|
||||||
<li><a class="admtxt" href="">Section 3</a></li>
|
<li><a class="admtxt hp w2 hh2" href="">Private</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="holder">
|
<div id="holder">
|
||||||
<div class="scrollbar"><div class="track"><div class="thumb thmc1"><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 thmc1 op07" data-category="abc">
|
<li class="element w2 h2 hp vp" data-category="abc">
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
<span class="tile thmc1 op07"></span>
|
||||||
|
<h1 class="appname thmtxt">MyCourseTimeTable</h1>
|
||||||
|
<div class="appholder">test content</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="element w2 h2 hp vp thmc2 op07" data-category="abc">
|
<li class="element w1 h1 hp vp" data-category="desktop">
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
<span class="tile thmc2 op09"></span>
|
||||||
|
<a href="" class="appicon"><img src="" alt=""></a>
|
||||||
|
<h1 class="appname thmtxt">名人名言</h1>
|
||||||
</li>
|
</li>
|
||||||
<li class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
|
<li class="element w2 h2 hp vp" data-category="widget" data-content='weather'>
|
||||||
<h1 class="appname thmtxt">Aperture</h1>
|
<span class="tile thmc2 op09"></span>
|
||||||
|
<h1 class="appname thmtxt">Weather</h1>
|
||||||
|
<div class="appholder holder_f">
|
||||||
|
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="element w1 h1 hp vp thmc1 op07" data-category="abc">
|
<li class="element w2 h1 hp vp" data-category="widget" data-content='clock'>
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
<span class="tile thmc1 op08"></span>
|
||||||
|
<h1 class="appname thmtxt">Clock</h1>
|
||||||
|
<div class="appholder holder_f">test content</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
|
<li class="element w2 h1 hp vp" data-category="widget" data-content="school_events">
|
||||||
<h1 class="appname thmtxt">Aperture</h1>
|
<span class="tile thmc1 op08"></span>
|
||||||
|
<h1 class="appname thmtxt">School Events</h1>
|
||||||
|
<div class="appholder">test content</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
|
<li class="element w1 h1 hp vp" data-category="desktop">
|
||||||
<h1 class="appname thmtxt">Aperture</h1>
|
<span class="tile thmc2 op09"></span>
|
||||||
</li>
|
<a href="" class="appicon"><img src="" alt=""></a>
|
||||||
<li class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
|
<h1 class="appname thmtxt">每日英文</h1>
|
||||||
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -110,4 +97,3 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="clear"></div>
|
<div class="clear"></div>
|
||||||
|
|
||||||
|
|
@ -65,13 +65,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--<div id="orbitbar"></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" />
|
<img src="" id="thmbackground" />
|
||||||
<div id="bgover" ></div>
|
<div id="bgover" ></div>
|
||||||
<div id="orbitnote" style="display:none;">
|
<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 class="note_message">Check the Notifications section for more information.</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button onClick="od.tempFunc();">Click</button>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
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 %>";
|
||||||
var od = new orbitDesktop("#ajax_container");
|
var od = new orbitDesktop("#ajax_container");
|
||||||
o.notify("Fuck yeah!! Notification Working!!","imp",5)
|
o.notify("Notification Working!!","imp",5)
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -105,6 +105,7 @@ Orbit::Application.routes.draw do
|
||||||
match '/desktop/desktop'=>'desktop#desktop'
|
match '/desktop/desktop'=>'desktop#desktop'
|
||||||
match '/desktop/app_manager'=>'desktop#app_manager'
|
match '/desktop/app_manager'=>'desktop#app_manager'
|
||||||
match '/desktop/sections'=>'desktop#sections'
|
match '/desktop/sections'=>'desktop#sections'
|
||||||
|
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 '/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|
|
||||||
|
|
|
||||||
|
|
@ -1,121 +0,0 @@
|
||||||
<div id="content">
|
|
||||||
<div id="header" class="hh3">
|
|
||||||
<div class="dtitle thmtxth w2 hh3 hp">Apps Manager</div>
|
|
||||||
<a href="" class="hfn w1 hh2 hp"><span class="tile thmc1 op06"></span><span class="thmtxt">Date</span></a>
|
|
||||||
<a href="ascending" class="hfn w1 hh2 hp" id="alphabet_sort_btn" ><span class="tile thmc2 op03"></span><span class="thmtxt">Alphabet [A-Z]</span></a>
|
|
||||||
<div id="search_app" class="hfn w2 hh2 hp thmc3">
|
|
||||||
<input type="text" class="ini_input form" value="Search" id="searchbox" />
|
|
||||||
<input type="submit" class="ini_input submit thmc1" value="Submit"/>
|
|
||||||
</div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
<div class="search_result">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div id="holder">
|
|
||||||
|
|
||||||
<div id="group_wrapper">
|
|
||||||
|
|
||||||
<div class="group g_sep op03" id='seperator' style="height: 516px;display:none;"></div>
|
|
||||||
<div class="group_search">
|
|
||||||
<div class="element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iWork</h1>
|
|
||||||
</div>
|
|
||||||
<div class="element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">Aperture</h1>
|
|
||||||
</div>
|
|
||||||
<div class="element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iTunes</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iWork</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">Aperture</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iTunes</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">Aperture</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iWork</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iTunes</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">Aperture</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iWork</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">Aperture</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iTunes</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iWork</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">Aperture</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iTunes</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">Aperture</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iWork</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">Aperture</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iWork</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iTunes</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">Aperture</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iWork</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iTunes</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iWork</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iWork</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">Aperture</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iTunes</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">Aperture</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">Aperture</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iTunes</h1>
|
|
||||||
</div>
|
|
||||||
<div class=" element w1 h1 hp vp thmc2" data-category="desktop">
|
|
||||||
<h1 class="appname thmtxt">iWork</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,110 +0,0 @@
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div id="holder">
|
|
||||||
<div id="group_wrapper">
|
|
||||||
<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 class="clear"></div>
|
|
||||||
|
|
||||||
|
|
@ -1,171 +0,0 @@
|
||||||
<div id="content">
|
|
||||||
<div id="header" class="hh3">
|
|
||||||
<div class="dtitle w2 hh3 hp">
|
|
||||||
<span class="thmtxth">All Sections</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="holder">
|
|
||||||
<div id="group_wrapper">
|
|
||||||
<div class="group">
|
|
||||||
<div class="section_label" >
|
|
||||||
<ul>
|
|
||||||
<li class="element w1 h1 hp vp thmtxt"><span class="tile thmc1"></span><span class="thmtxt">section 1</span></li>
|
|
||||||
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section2"><span class="tile thmc1 op06"></span><span class="thmtxt">section 2</span></li>
|
|
||||||
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section3"><span class="tile thmc1 op06"></span><span class="thmtxt">section 3</span></li>
|
|
||||||
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section4"><span class="tile thmc1 op06"></span><span class="thmtxt">section 4</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<ul class="grp" id="section1">
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="group">
|
|
||||||
<div class="section_label" >
|
|
||||||
<ul>
|
|
||||||
<li class="element w1 h1 hp vp thmtxt"><span class="tile thmc1"></span><span class="thmtxt">section 2</span></li>
|
|
||||||
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section1"><span class="tile thmc1 op06"></span><span class="thmtxt">section 1</span></li>
|
|
||||||
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section3"><span class="tile thmc1 op06"></span><span class="thmtxt">section 3</span></li>
|
|
||||||
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section4"><span class="tile thmc1 op06"></span><span class="thmtxt">section 4</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<ul class="grp" id="section2">
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
<li class="element w1 hh2 hp vp" data-category="abc">
|
|
||||||
<h1 class="appname thmtxt">Garage Band</h1>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
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 |
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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 |
|
|
@ -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="fancyClock"></div>
|
||||||
|
<script>
|
||||||
|
$('#fancyClock').tzineClock();
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
{"first":{"date":"25 Feb","event":"國立政治大學101學年度碩士班暨…","timing":"時間：07:00-17:00"},"second":{"date":"26 Feb","event":"國立政治大學101學年度碩士班暨…","timing":"時間：07:00-17:00"}}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<div id="school_events">
|
||||||
|
<span id='date' style="color:#fff; font-size:15px; margin:5px;"></span><br/><br /><span id='event' style="color:#fff;"></span><br /><span id='timings' style="color:#fff;"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
loadEvents();
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
var eventsjson = new Array;
|
||||||
|
var loadEvents = function(){
|
||||||
|
$.getJSON(o.widgetfolder+"/school_events/events.json",function(events){
|
||||||
|
$.each(events,function(i,event){
|
||||||
|
eventsjson.push(event);
|
||||||
|
})
|
||||||
|
|
||||||
|
displayevents();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
var i = 0;
|
||||||
|
var displayevents = function(){
|
||||||
|
$("#school_events").fadeOut(500);
|
||||||
|
$("span#date").text(eventsjson[i].date);
|
||||||
|
$("span#event").text(eventsjson[i].event);
|
||||||
|
$("span#timings").text(eventsjson[i].timing);
|
||||||
|
$("#school_events").fadeIn(500);
|
||||||
|
i++;
|
||||||
|
if(i==eventsjson.length)i=0;
|
||||||
|
setTimeout(displayevents,5000);
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -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>
|
||||||
Reference in New Issue