Completed simple day-chaning greeter.
This commit is contained in:
Jonathan Bernard
parent
2fd4ea998f
commit
b0ee73607f
276
css/lightdm-uestibulum.scss
Normal file
276
css/lightdm-uestibulum.scss
Normal file
@ -0,0 +1,276 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css?family=Abel|Aldrich|Audiowide|Black+Ops+One|Cherry+Cream+Soda|Exo|Exo 2|Graduate|Josefin+Sans|Kelly+Slab|Michroma|Monoton|Nixie+One|Open+Sans+Condensed:300|Orbitron|Poiret+One|Press+Start+2P|Prompt|Rajdhani|Raleway|Russo+One|Signika|Syncopate|Teko');
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
h1 { font-size: 1.5vw; }
|
||||||
|
h2 { font-size: 1vw; }
|
||||||
|
|
||||||
|
$colorFG: white;
|
||||||
|
$colorBG: black;
|
||||||
|
$colorAccent: orange;
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: $colorFG;
|
||||||
|
font-family: 'Exo 2'
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
display: block;
|
||||||
|
opacity: 0;
|
||||||
|
transition: 1s;
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.morning #bg-morning { opacity: 1; }
|
||||||
|
.afternoon #bg-afternoon { opacity: 1; }
|
||||||
|
.evening #bg-evening { opacity: 1; }
|
||||||
|
.night #bg-night { opacity: 1; }
|
||||||
|
|
||||||
|
#ui-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#power-panel {
|
||||||
|
background: rgba(8, 8, 8, 0.3);
|
||||||
|
box-shadow: 0px 0px 0.5vw 0.5vw rgba(8, 8, 8, 0.3);
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.5;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
bottom: 2vw;
|
||||||
|
right: 2vw;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
#power-options {
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0.5vw;
|
||||||
|
transition: 1s;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 1vw;
|
||||||
|
font-size: 1.5vw;
|
||||||
|
|
||||||
|
i { margin-right: 0.5vw; }
|
||||||
|
|
||||||
|
&:last-child { margin-bottom: 0; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
bottom: 1vw;
|
||||||
|
#power-options { display: block; }
|
||||||
|
#power-button { display: none; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#clock-panel {
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
font-size: 6vw;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 1vw 2vw;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login-panel {
|
||||||
|
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
input[type=password] {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 2px solid $colorFG;
|
||||||
|
color: $colorFG;
|
||||||
|
font-size: 1vw;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
//opacity: 0;
|
||||||
|
transition: 0.5s;
|
||||||
|
width: 20em;
|
||||||
|
|
||||||
|
&.active { opacity: 0.5; }
|
||||||
|
}
|
||||||
|
|
||||||
|
#users {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
i {
|
||||||
|
opacity: 0;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover i { opacity: 1; }
|
||||||
|
|
||||||
|
#users-list {
|
||||||
|
list-style: none;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.select-user {
|
||||||
|
#user-display, i { display: none; }
|
||||||
|
#users-list { display: inline-block; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#fail-msg {
|
||||||
|
color: red;
|
||||||
|
opacity: 0;
|
||||||
|
transition: 0.5s;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
left: -1vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#session-panel {
|
||||||
|
opacity: 0.2;
|
||||||
|
transition: 0.5s;
|
||||||
|
z-index: 2;
|
||||||
|
&:hover { opacity: 1 };
|
||||||
|
|
||||||
|
#sessions-list li { display: inline-block; }
|
||||||
|
}
|
||||||
|
|
||||||
|
#sessions {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
#sessions-list {
|
||||||
|
list-style: none;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.select-session {
|
||||||
|
#session-display { display: none; }
|
||||||
|
#sessions-list { display: inline-block; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.failed-auth {
|
||||||
|
input[type=password] {
|
||||||
|
color: red;
|
||||||
|
border-color: red !important;
|
||||||
|
}
|
||||||
|
#fail-msg { opacity: 1 !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes throb {
|
||||||
|
from { opacity: 1; }
|
||||||
|
to { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.throb { animation: alternate infinite 2s throb; }
|
||||||
|
|
||||||
|
|
||||||
|
.evening {
|
||||||
|
#clock-panel {
|
||||||
|
border-bottom: 2px solid $colorFG;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login-panel {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 2vw;
|
||||||
|
left: 1vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#session-panel {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0.5vw;
|
||||||
|
left: 1vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.morning, .night, .afternoon {
|
||||||
|
#clock-panel {
|
||||||
|
border-top: 2px solid $colorFG;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login-panel {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 2vw;
|
||||||
|
left: 20vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#session-panel {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0.5vw;
|
||||||
|
left: 20vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.morning {
|
||||||
|
#clock-panel { text-shadow: 0 0 0.2vw #446688; }
|
||||||
|
#users:hover #user-display, #sessions:hover #session-display,
|
||||||
|
#users-list li:hover, #sessions-list li.session:hover {
|
||||||
|
color: #0088aa;
|
||||||
|
text-shadow: 0 0 0.5vw black;
|
||||||
|
}
|
||||||
|
#power-panel { opacity: 0.7; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.afternoon {
|
||||||
|
#clock-panel { text-shadow: 0 0 2vw #448844; }
|
||||||
|
#users:hover #user-display, #sessions:hover #session-display,
|
||||||
|
#users-list li:hover, #sessions-list li.session:hover {
|
||||||
|
color: #00aa00;
|
||||||
|
text-shadow: 0 0 0.5vw black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.evening {
|
||||||
|
#clock-panel { text-shadow: 0 0 2vw #faaa3b; }
|
||||||
|
#users:hover #user-display, #sessions:hover #session-display,
|
||||||
|
#users-list li:hover, #sessions-list li.session:hover {
|
||||||
|
color: orange;
|
||||||
|
text-shadow: 0 0 0.5vw black;
|
||||||
|
}
|
||||||
|
#power-panel { opacity: 0.7; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.night {
|
||||||
|
#clock-panel { text-shadow: 0 0 2vw #884488; }
|
||||||
|
#users:hover #user-display, #sessions:hover #session-display,
|
||||||
|
#users-list li:hover, #sessions-list li.session:hover {
|
||||||
|
color: #8822bb;
|
||||||
|
text-shadow: 0 0 0.2vw black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*.night {
|
||||||
|
#clock-panel {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#login-panel {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 2vw;
|
||||||
|
left: 2vw;
|
||||||
|
}
|
||||||
|
}*/
|
||||||
BIN
img/afternoon.jpg
Normal file
BIN
img/afternoon.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
|
Before Width: | Height: | Size: 160 KiB After Width: | Height: | Size: 160 KiB |
BIN
img/morning.jpg
Normal file
BIN
img/morning.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 MiB |
BIN
img/night.gif
Normal file
BIN
img/night.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 498 KiB |
56
index.html
56
index.html
@ -9,19 +9,57 @@
|
|||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<img id=bg src="img/background.jpg">
|
<img id=bg-morning class=bg src="img/morning.jpg">
|
||||||
|
<img id=bg-afternoon class=bg src="img/afternoon.jpg">
|
||||||
|
<img id=bg-evening class=bg src="img/evening.jpg">
|
||||||
|
<img id=bg-night class=bg src="img/night.gif">
|
||||||
|
|
||||||
<div id=power-panel onmouseout='hidePowerOptions(event)'>
|
<div id=ui-container>
|
||||||
<div id=power-button onclick='showPowerOptions()'><i class="fa fa-power-off fa-3x"></i></div>
|
<div id=power-panel>
|
||||||
<div id=power-options class=visible>
|
<div id=power-button><i class="fa fa-power-off fa-3x"></i></div>
|
||||||
<ul>
|
<div id=power-options class=visible>
|
||||||
<li><i class='fa fa-moon-o'></i> Suspend</li>
|
<ul>
|
||||||
<li><i class='fa fa-refresh'></i> Restart</li>
|
<li id=suspend><i class='fa fa-moon-o'></i> Suspend</li>
|
||||||
<li><i class='fa fa-power-off'></i> Shutdown</li>
|
<li id=restart><i class='fa fa-refresh'></i> Restart</li>
|
||||||
</ul>
|
<li id=shutdown><i class='fa fa-power-off'></i> Shutdown</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id=login-panel>
|
||||||
|
<h1>
|
||||||
|
<span id=greeting>Good day</span>,
|
||||||
|
<div id=users>
|
||||||
|
<span id=user-display>User</span>
|
||||||
|
<ul id=users-list></ul>
|
||||||
|
<i class='fa fa-user-circle'></i>
|
||||||
|
</div>
|
||||||
|
</h1>
|
||||||
|
<input type=password name=pwd placeholder='password...'>
|
||||||
|
<i class='fa fa-exclamation-circle' id=fail-msg></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id=session-panel>
|
||||||
|
<h2>
|
||||||
|
session:
|
||||||
|
<div id=sessions>
|
||||||
|
<span id=session-display>default</span>
|
||||||
|
<ul id=sessions-list></ul>
|
||||||
|
</div>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id=clock-panel>
|
||||||
|
<span class=hours></span><!--
|
||||||
|
--><span class=throb>:</span><!--
|
||||||
|
--><span class=minutes></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script type=application/javascript src=js/jquery-3.1.1.slim.min.js ></script>
|
||||||
|
<script type=application/javascript src=js/underscore-min.js ></script>
|
||||||
|
<script type=application/javascript src=js/backbone-min.js ></script>
|
||||||
|
<script type=application/javascript src=js/lightdm-mock.js ></script>
|
||||||
<script type=application/javascript src=js/lightdm-uestibulum.js ></script>
|
<script type=application/javascript src=js/lightdm-uestibulum.js ></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
5
index.theme
Normal file
5
index.theme
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
[theme]
|
||||||
|
name=Uestibulum
|
||||||
|
description=Uestibulum Greeter Theme
|
||||||
|
engine=lightdm-webkit-greeter
|
||||||
|
url=index.html
|
||||||
2
js/backbone-min.js
vendored
Normal file
2
js/backbone-min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
4
js/jquery-3.1.1.slim.min.js
vendored
Normal file
4
js/jquery-3.1.1.slim.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
211
js/lightdm-mock.js
Normal file
211
js/lightdm-mock.js
Normal file
@ -0,0 +1,211 @@
|
|||||||
|
/*
|
||||||
|
Mock data for testing your LightDM theme in the browser
|
||||||
|
*/
|
||||||
|
if (!('lightdm' in window)) {
|
||||||
|
window.lightdm = {};
|
||||||
|
lightdm.hostname ="test-host";
|
||||||
|
lightdm.languages = [
|
||||||
|
{
|
||||||
|
code: "en_US",
|
||||||
|
name: "English(US)",
|
||||||
|
territory: "USA"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: "en_UK",
|
||||||
|
name: "English(UK)",
|
||||||
|
territory: "UK"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
lightdm.default_language = lightdm.languages[0];
|
||||||
|
lightdm.layouts = [
|
||||||
|
{
|
||||||
|
name: "test",
|
||||||
|
short_description: "test description",
|
||||||
|
short_description:"really long epic description"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
lightdm.default_layout = lightdm.layouts[0];
|
||||||
|
lightdm.layout = lightdm.layouts[0];
|
||||||
|
lightdm.sessions = [
|
||||||
|
{
|
||||||
|
key: "key1",
|
||||||
|
name: "session 1",
|
||||||
|
comment: "no comment"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "key2",
|
||||||
|
name: "session 2",
|
||||||
|
comment: "no comment"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
lightdm.default_session = lightdm.sessions[0];
|
||||||
|
lightdm.authentication_user = null;
|
||||||
|
lightdm.is_authenticated = false;
|
||||||
|
lightdm.can_suspend = true;
|
||||||
|
lightdm.can_hibernate = true;
|
||||||
|
lightdm.can_restart = true;
|
||||||
|
lightdm.can_shutdown = true;
|
||||||
|
|
||||||
|
lightdm.users = [
|
||||||
|
{
|
||||||
|
name: "clarkk",
|
||||||
|
real_name: "Superman",
|
||||||
|
display_name: "Clark Kent",
|
||||||
|
image: "http://uk.omg.li/VDXV/1756295270.jpg.x160.jpg",
|
||||||
|
language: "en_US",
|
||||||
|
layout: null,
|
||||||
|
session: null,
|
||||||
|
logged_in: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "brucew",
|
||||||
|
real_name: "Batman",
|
||||||
|
display_name: "Bruce Wayne",
|
||||||
|
image: "http://uk.omg.li/VDHr/OW-blog-Batman.jpg",
|
||||||
|
language: "en_US",
|
||||||
|
layout: null,
|
||||||
|
session: null,
|
||||||
|
logged_in: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "peterp",
|
||||||
|
real_name:"Spiderman",
|
||||||
|
display_name: "Peter Parker",
|
||||||
|
image: "",
|
||||||
|
language: "en_US",
|
||||||
|
layout: null,
|
||||||
|
session: null,
|
||||||
|
logged_in: true
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
lightdm.num_users = lightdm.users.length;
|
||||||
|
lightdm.timed_login_delay = 0; // increase to simulate timed_login_delay
|
||||||
|
lightdm.timed_login_user =
|
||||||
|
lightdm.timed_login_delay > 0 ? lightdm.users[0] : null;
|
||||||
|
|
||||||
|
lightdm.get_string_property = function () {};
|
||||||
|
lightdm.get_integer_property = function () {};
|
||||||
|
lightdm.get_boolean_property = function () {};
|
||||||
|
lightdm.cancel_timed_login = function () {
|
||||||
|
_lightdm_mock_check_argument_length(arguments, 0);
|
||||||
|
|
||||||
|
lightdm._timed_login_cancelled= true;
|
||||||
|
};
|
||||||
|
|
||||||
|
lightdm.respond = lightdm.provide_secret = function (secret) {
|
||||||
|
if (typeof lightdm._username == 'undefined' || !lightdm._username) {
|
||||||
|
throw "must call start_authentication first"
|
||||||
|
}
|
||||||
|
_lightdm_mock_check_argument_length(arguments, 1);
|
||||||
|
|
||||||
|
var user = _lightdm_mock_get_user(lightdm.username);
|
||||||
|
|
||||||
|
// That's right, passwords are the same as the username's!
|
||||||
|
if (!user && secret == lightdm._username) {
|
||||||
|
lightdm.is_authenticated = true;
|
||||||
|
lightdm.authentication_user = user;
|
||||||
|
} else {
|
||||||
|
lightdm.is_authenticated = false;
|
||||||
|
lightdm.authentication_user = null;
|
||||||
|
lightdm._username = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
authentication_complete();
|
||||||
|
};
|
||||||
|
|
||||||
|
lightdm.authenticate = lightdm.start_authentication = function (username) {
|
||||||
|
_lightdm_mock_check_argument_length(arguments, 1);
|
||||||
|
|
||||||
|
if (lightdm._username) {
|
||||||
|
throw "Already authenticating!";
|
||||||
|
}
|
||||||
|
var user = _lightdm_mock_get_user(username);
|
||||||
|
if (!user) {
|
||||||
|
show_error(username + " is an invalid user");
|
||||||
|
}
|
||||||
|
show_prompt("Password: ", "password");
|
||||||
|
lightdm._username = username;
|
||||||
|
};
|
||||||
|
|
||||||
|
lightdm.cancel_authentication = function () {
|
||||||
|
_lightdm_mock_check_argument_length(arguments, 0);
|
||||||
|
|
||||||
|
if (!lightdm._username) {
|
||||||
|
throw "we are not authenticating";
|
||||||
|
}
|
||||||
|
lightdm._username = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
lightdm.suspend = function () {
|
||||||
|
alert("System Suspended. Bye Bye");
|
||||||
|
document.location.reload(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
lightdm.hibernate = function () {
|
||||||
|
alert("System Hibernated. Bye Bye");
|
||||||
|
document.location.reload(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
lightdm.restart = function () {
|
||||||
|
alert("System restart. Bye Bye");
|
||||||
|
document.location.reload(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
lightdm.shutdown = function () {
|
||||||
|
alert("System Shutdown. Bye Bye");
|
||||||
|
document.location.reload(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
lightdm.start_session_sync = function (session) {
|
||||||
|
_lightdm_mock_check_argument_length(arguments, 1);
|
||||||
|
|
||||||
|
if (!lightdm.is_authenticated) {
|
||||||
|
throw "The system is not authenticated";
|
||||||
|
}
|
||||||
|
|
||||||
|
alert("logged in successfully!!");
|
||||||
|
document.location.reload(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
lightdm.login = function (user, session) {
|
||||||
|
_lightdm_mock_check_argument_length(arguments, 2);
|
||||||
|
|
||||||
|
if (!lightdm.is_authenticated) {
|
||||||
|
throw "The system is not authenticated";
|
||||||
|
}
|
||||||
|
if (user !== lightdm.authentication_user) {
|
||||||
|
throw "this user is not authenticated";
|
||||||
|
}
|
||||||
|
|
||||||
|
alert("logged in successfully!!");
|
||||||
|
document.location.reload(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (lightdm.timed_login_delay > 0) {
|
||||||
|
setTimeout(
|
||||||
|
function () {
|
||||||
|
if (!lightdm._timed_login_cancelled()) timed_login();
|
||||||
|
},
|
||||||
|
lightdm.timed_login_delay
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Helper functions
|
||||||
|
var _lightdm_mock_check_argument_length = function (args, length) {
|
||||||
|
if (args.length != length) {
|
||||||
|
throw "incorrect number of arguments in function call";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _lightdm_mock_get_user = function (username) {
|
||||||
|
var user = null;
|
||||||
|
for (var i = 0; i < lightdm.users.length; ++i) {
|
||||||
|
if (lightdm.users[i].name == username) {
|
||||||
|
user= lightdm.users[i];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return user;
|
||||||
|
}
|
||||||
@ -1,12 +1,222 @@
|
|||||||
var powerOptionsEl = document.getElementById("power-options")
|
(function() {
|
||||||
var powerPanelClasses = document.getElementById("power-panel").classList;
|
|
||||||
|
|
||||||
function showPowerOptions() {
|
var U = window.uestibulum = {};
|
||||||
powerPanelClasses.add('active');
|
_.templateSettings = {
|
||||||
}
|
interpolate: /\{\{(.+?)\}\}/g
|
||||||
|
};
|
||||||
|
|
||||||
|
U.ClockView = Backbone.View.extend({
|
||||||
|
el: '#clock-panel',
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
var now = new Date();
|
||||||
|
this.$el.find('.hours').text(now.getHours());
|
||||||
|
this.$el.find('.minutes').text(now.getMinutes() < 10 ? "0" + now.getMinutes(): now.getMinutes());
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function(options) {
|
||||||
|
_.bindAll(this, 'render');
|
||||||
|
setInterval(this.render, 1000);
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
U.PowerView = Backbone.View.extend({
|
||||||
|
el: '#power-panel',
|
||||||
|
events: {
|
||||||
|
'click #power-button': 'showPowerOptions',
|
||||||
|
'mouseout #power-options': 'hidePowerOptions',
|
||||||
|
'click suspend': 'suspend',
|
||||||
|
'click restart': 'restart',
|
||||||
|
'click shutdown': 'shutdown'
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function(options) {
|
||||||
|
_.bindAll(this, 'showPowerOptions', 'hidePowerOptions', 'restart', 'shutdown', 'suspend');
|
||||||
|
this.optionsEl = $('#power-options')[0];
|
||||||
|
},
|
||||||
|
|
||||||
|
showPowerOptions: function() { this.$el.addClass('active'); },
|
||||||
|
hidePowerOptions: function(e) {
|
||||||
|
if (e.target != this.optionsEl) return;
|
||||||
|
this.$el.removeClass('active');
|
||||||
|
},
|
||||||
|
|
||||||
|
restart: function() { lightdm.restart(); },
|
||||||
|
shutdown: function() { lightdm.shutdown(); },
|
||||||
|
suspend: function() { lightdm.suspend(); }
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
U.LoginView = Backbone.View.extend({
|
||||||
|
el: '#login-panel',
|
||||||
|
events: {
|
||||||
|
'click #user-display': 'showUserSelect',
|
||||||
|
'click li.user': 'selectUser',
|
||||||
|
'keypress input[type=password]': 'enterPassword'
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function(options) {
|
||||||
|
_.bindAll(this, 'enterPassword', 'getUserName',
|
||||||
|
'render', 'showPrompt', 'showUserSelect');
|
||||||
|
|
||||||
|
this.uiView = options.uiView;
|
||||||
|
window.show_prompt = this.showPrompt;
|
||||||
|
this.user = lightdm.users[0];
|
||||||
|
|
||||||
|
lightdm.authenticate(this.user.name);
|
||||||
|
//lightdm.start_authentication(this.user.name);
|
||||||
|
},
|
||||||
|
|
||||||
|
getUserName: function(user) {
|
||||||
|
return user.display_name || user.real_name || user.name;
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
this.undelegateEvents();
|
||||||
|
var greeting = 'Good ' + this.uiView.timePeriod;
|
||||||
|
|
||||||
|
var $userListEl = this.$el.find('#users-list');
|
||||||
|
$userListEl.html(
|
||||||
|
_.map(lightdm.users, function(user) {
|
||||||
|
return '<li class=user data-username="' + user.name + '">' +
|
||||||
|
this.getUserName(user) + '</li>';
|
||||||
|
}, this).join('\n'));
|
||||||
|
|
||||||
|
if (this.user) {
|
||||||
|
this.$el.find('#greeting').text(greeting);
|
||||||
|
this.$el.find('#user-display').text(this.getUserName(this.user));
|
||||||
|
}
|
||||||
|
this.delegateEvents();
|
||||||
|
},
|
||||||
|
|
||||||
|
showUserSelect: function() {
|
||||||
|
this.$el.removeClass('failed-auth');
|
||||||
|
this.$el.find('#users').addClass('select-user');
|
||||||
|
lightdm.cancel_authentication();
|
||||||
|
this.$el.find('input[type=password]').removeClass('active');
|
||||||
|
this.user = null;
|
||||||
|
},
|
||||||
|
|
||||||
|
selectUser: function(e) {
|
||||||
|
var username = $(e.target).attr('data-username');
|
||||||
|
this.$el.find('#users').removeClass('select-user');
|
||||||
|
this.user = _.find(lightdm.users, function(user) {
|
||||||
|
return user.name == username; });
|
||||||
|
lightdm.authenticate(this.user.name);
|
||||||
|
this.render();
|
||||||
|
},
|
||||||
|
|
||||||
|
showPrompt: function(text, type) {
|
||||||
|
if (type == 'password') {
|
||||||
|
var $pwdInput = this.$el.find('input[type=password]');
|
||||||
|
$pwdInput.addClass('active');
|
||||||
|
$pwdInput.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
else alert(type + ': ' + text);
|
||||||
|
},
|
||||||
|
|
||||||
|
enterPassword: function(e) {
|
||||||
|
this.$el.removeClass('failed-auth');
|
||||||
|
//if (e.key != 'Enter') return;
|
||||||
|
if (e.keyCode != 13) return;
|
||||||
|
lightdm.respond($(e.target).val());
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
U.SessionView = Backbone.View.extend({
|
||||||
|
el: '#session-panel',
|
||||||
|
events: {
|
||||||
|
'click #session-display': 'showSessionSelect',
|
||||||
|
'click li.session': 'selectSession'
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function(options) {
|
||||||
|
_.bindAll(this, 'render', 'showSessionSelect', 'selectSession');
|
||||||
|
|
||||||
|
this.session = lightdm.sessions[0];
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
this.$el.find('#sessions-list').html(
|
||||||
|
_.map(lightdm.sessions, function(session) {
|
||||||
|
return '<li class=session data-sessionkey="' + session.key + '">' +
|
||||||
|
session.name + '</li>'; }).join('<li> | </li>'));
|
||||||
|
|
||||||
|
if (this.session) {
|
||||||
|
this.$el.find('#session-display').text(this.session.name); }
|
||||||
|
},
|
||||||
|
|
||||||
|
showSessionSelect: function() {
|
||||||
|
this.$el.find('#sessions').addClass('select-session');
|
||||||
|
},
|
||||||
|
|
||||||
|
selectSession: function(e) {
|
||||||
|
this.$el.find('#sessions').removeClass('select-session');
|
||||||
|
var sessionKey = $(e.target).attr('data-sessionkey');
|
||||||
|
this.session = _.find(lightdm.sessions, function(session) {
|
||||||
|
return session.key == sessionKey; });
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
U.UIView = Backbone.View.extend({
|
||||||
|
el: 'body',
|
||||||
|
events: {},
|
||||||
|
|
||||||
|
initialize: function(options) {
|
||||||
|
_.bindAll(this, 'render', 'authComplete', 'checkTimePeriod');
|
||||||
|
|
||||||
|
window.authentication_complete = this.authComplete;
|
||||||
|
|
||||||
|
this.timePeriod = 'day';
|
||||||
|
this.loginView = new U.LoginView({uiView: this});
|
||||||
|
this.sessionView = new U.SessionView();
|
||||||
|
this.clockView = new U.ClockView();
|
||||||
|
this.powerView = new U.PowerView();
|
||||||
|
this.render();
|
||||||
|
},
|
||||||
|
|
||||||
|
authComplete: function() {
|
||||||
|
if (lightdm.is_authenticated) {
|
||||||
|
//lightdm.start_session_sync(this.sessionView.session.key);
|
||||||
|
lightdm.login(this.loginView.user, this.sessionView.session.key);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.$el.find('#login-panel').addClass('failed-auth');
|
||||||
|
lightdm.authenticate(this.loginView.user.name);
|
||||||
|
//lightdm.start_authentication(this.loginView.user.name);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
var prevTimePeriod = this.timePeriod;
|
||||||
|
this.checkTimePeriod();
|
||||||
|
|
||||||
|
if (this.timePeriod != prevTimePeriod) {
|
||||||
|
this.$el.removeClass(prevTimePeriod);
|
||||||
|
this.$el.addClass(this.timePeriod);
|
||||||
|
this.loginView.render();
|
||||||
|
this.sessionView.render();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
checkTimePeriod: function() {
|
||||||
|
var now = new Date();
|
||||||
|
if (now.getHours() >= 21 || now.getHours() < 4) this.timePeriod = 'night';
|
||||||
|
else if (now.getHours() < 12) this.timePeriod = 'morning';
|
||||||
|
else if (now.getHours() < 18) this.timePeriod = 'afternoon';
|
||||||
|
else this.timePeriod = 'evening';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
U.uiView = new U.UIView();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
||||||
function hidePowerOptions(e) {
|
|
||||||
console.log(e.target);
|
|
||||||
if (e.target != powerOptionsEl) return;
|
|
||||||
powerPanelClasses.remove('active');
|
|
||||||
}
|
|
||||||
|
|||||||
6
js/underscore-min.js
vendored
Normal file
6
js/underscore-min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user