JezerM
4 years ago
29 changed files with 1620 additions and 1406 deletions
@ -1,156 +1,171 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
||||
<title>Dracula theme</title> |
||||
|
||||
<link rel="stylesheet" href="css/style.css" class="style"> |
||||
<link rel="stylesheet" href="../../_vendor/material-icons/css/materialdesignicons.min.css" onerror="this.href='../_vendor/material-icons/css/materialdesignicons.min.css'" class="style"> |
||||
|
||||
<!--<script src="..//js/mock.js"></script>--> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<div id="background"> |
||||
<div id="bg-cover"></div> |
||||
</div> |
||||
|
||||
<button id="cover" class="hide"> |
||||
<div id="message"></div> |
||||
</button> |
||||
|
||||
<div id="screen"> |
||||
|
||||
<div id="login-wrapper"> |
||||
|
||||
<div id="top-bar"> |
||||
Welcome! |
||||
</div> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<meta |
||||
name="viewport" |
||||
content="width=device-width, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" |
||||
/> |
||||
<title>Dracula theme</title> |
||||
|
||||
<link rel="stylesheet" href="css/style.css" class="style" /> |
||||
<link |
||||
rel="stylesheet" |
||||
href="../../_vendor/material-icons/css/materialdesignicons.min.css" |
||||
onerror="this.href='../_vendor/material-icons/css/materialdesignicons.min.css'" |
||||
class="style" |
||||
/> |
||||
|
||||
<!--<script src="..//js/mock.js"></script>--> |
||||
</head> |
||||
<body> |
||||
<div id="background"> |
||||
<div id="bg-cover"></div> |
||||
</div> |
||||
|
||||
<div id="login-wrapper-box"> |
||||
<button id="time-date"> |
||||
<h2 id="time-label">20:00</h2> |
||||
<h4 id="date-label">20-05-2021</h2> |
||||
</button> |
||||
<button id="cover" class="hide"> |
||||
<div id="message"></div> |
||||
</button> |
||||
|
||||
<div id="auth-message" class="hide"></div> |
||||
<div id="screen"> |
||||
<div id="login-wrapper"> |
||||
<div id="top-bar">Welcome!</div> |
||||
|
||||
<div id="pass-form" class="hide"> |
||||
<form action="POST" id="login-form"> |
||||
<div id="user-wrapper"> |
||||
<input id="input-username" name="username" type="text" autocomplete="off" autofocus="true" placeholder="Enter your username"> |
||||
<div id="login-wrapper-box"> |
||||
<button id="time-date"> |
||||
<h2 id="time-label">20:00</h2> |
||||
<h2 id="date-label">20-05-2021</h2> |
||||
</button> |
||||
|
||||
<div id="users-button-wrapper"> |
||||
<button id="users-button" class="button hide" type="button"> |
||||
<span class="mdi mdi-chevron-down mdi-24px"></span> |
||||
</button> |
||||
<div id="users-dropdown"> |
||||
<ul class="dropdown hide"> |
||||
<li><button type="button">Vlad Tepes</button></li> |
||||
<li><button type="button">Belmont</button></li> |
||||
</ul> |
||||
<div id="auth-message" class="hide"></div> |
||||
|
||||
<div id="pass-form" class="hide"> |
||||
<form action="POST" id="login-form"> |
||||
<div id="user-wrapper"> |
||||
<input |
||||
id="input-username" |
||||
name="username" |
||||
type="text" |
||||
autocomplete="off" |
||||
autofocus="true" |
||||
placeholder="Enter your username" |
||||
/> |
||||
|
||||
<div id="users-button-wrapper"> |
||||
<button id="users-button" class="button hide" type="button"> |
||||
<span class="mdi mdi-chevron-down mdi-24px"></span> |
||||
</button> |
||||
<div id="users-dropdown"> |
||||
<ul class="dropdown hide"> |
||||
<li><button type="button">Vlad Tepes</button></li> |
||||
<li><button type="button">Belmont</button></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div id="pass-wrapper"> |
||||
<input id="input-password" name="password" type="password" autocomplete="off" autofocus="true" placeholder="Enter your password"> |
||||
<button id="submit-button" class="button" type="submit"> |
||||
<span class="mdi mdi-chevron-right mdi-24px"></span> |
||||
</button> |
||||
</div> |
||||
|
||||
</form> |
||||
<div id="pass-wrapper"> |
||||
<div id="input"> |
||||
<input |
||||
id="input-password" |
||||
name="password" |
||||
type="password" |
||||
autocomplete="off" |
||||
autofocus="true" |
||||
placeholder="Enter your password" |
||||
/> |
||||
<button id="pass-eye" type="button" class="button"> |
||||
<i class="mdi mdi-eye"></i> |
||||
</button> |
||||
</div> |
||||
<button id="submit-button" class="button" type="submit"> |
||||
<span class="mdi mdi-chevron-right mdi-24px"></span> |
||||
</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="bottom-bar"> |
||||
<div id="sessions-button-wrapper"> |
||||
<button id="sessions-button" class="button"> |
||||
<span class="text">Awesome</span> |
||||
<span class="mdi mdi-chevron-down mdi-24px"></span> |
||||
</button> |
||||
<ul id="sessions-dropdown" class="dropdown hide"> |
||||
<li><button>Awesome</button></li> |
||||
<li><button>Ubuntu</button></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<div id="bottom-right" class="button-group"> |
||||
<button id="shutdown-button" class="hide"> |
||||
<span class="mdi mdi-power"></span> |
||||
</button> |
||||
|
||||
<button id="restart-button" class="hide"> |
||||
<span class="mdi mdi-restart"></span> |
||||
</button> |
||||
|
||||
<button id="suspend-button" class="hide"> |
||||
<span class="mdi mdi-power-sleep"></span> |
||||
</button> |
||||
|
||||
<button id="hibernate-button" class="hide"> |
||||
<span class="mdi mdi-power-cycle"></span> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="bottom-bar"> |
||||
<div id="sessions-button-wrapper"> |
||||
<button id="sessions-button" class="button"> |
||||
<span class="text">Awesome</span> <span class="mdi mdi-chevron-down mdi-24px"></span> |
||||
</button> |
||||
<ul id="sessions-dropdown" class="dropdown hide"> |
||||
<li><button>Awesome</button></li> |
||||
<li><button>Ubuntu</button></li> |
||||
<div id="system-bar"> |
||||
<div id="layouts-list"> |
||||
<button id="layouts-button" class="">LATAM</button> |
||||
<ul id="layouts-dropdown" class="dropdown hide"> |
||||
<li><button>Latam</button></li> |
||||
<li><button>English</button></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<div id="bottom-right" class="button-group"> |
||||
<button id="shutdown-button" class="hide"> |
||||
<span class="mdi mdi-power"></span> |
||||
</button> |
||||
<div id="brightness-label"></div> |
||||
<div id="battery-label"></div> |
||||
</div> |
||||
|
||||
<button id="restart-button" class="hide"> |
||||
<span class="mdi mdi-restart"></span> |
||||
</button> |
||||
<button id="panel-button" class="button"> |
||||
<span class="mdi mdi-menu mdi-24px"></span> |
||||
</button> |
||||
|
||||
<button id="suspend-button" class="hide"> |
||||
<span class="mdi mdi-power-sleep"></span> |
||||
</button> |
||||
<div id="sidebar" class="panel hide"> |
||||
<h3>Background selector</h3> |
||||
<button id="close-panel-button" class="button"> |
||||
<span class="mdi mdi-close-thick mdi-24px"></span> |
||||
</button> |
||||
|
||||
<button id="hibernate-button" class="hide"> |
||||
<span class="mdi mdi-power-cycle"></span> |
||||
<div id="background-selector"> |
||||
<button class="image" tabindex="0"> |
||||
<img src="./assets/dracula.png" alt="" /> |
||||
</button> |
||||
<button class="image" tabindex="0"> |
||||
<img src="./assets/dracula.png" alt="" /> |
||||
</button> |
||||
<button class="image" tabindex="0"> |
||||
<img src="./assets/dracula.png" alt="" /> |
||||
</button> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div id="system-bar"> |
||||
<div id="layouts-list"> |
||||
<button id="layouts-button" class=""> |
||||
LATAM |
||||
</button> |
||||
<ul id="layouts-dropdown" class="dropdown hide"> |
||||
<li><button>Latam</button></li> |
||||
<li><button>English</button></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<div id="brightness-label"></div> |
||||
<div id="battery-label"></div> |
||||
</div> |
||||
|
||||
<button id="panel-button" class="button"> |
||||
<span class="mdi mdi-menu mdi-24px"></span> |
||||
</button> |
||||
|
||||
<div id="sidebar" class="panel hide"> |
||||
<h3>Background selector</h3> |
||||
<button id="close-panel-button" class="button"> |
||||
<span class="mdi mdi-close-thick mdi-24px"></span> |
||||
</button> |
||||
|
||||
<div id="background-selector"> |
||||
<button class="image" tabindex="0"> |
||||
<img src="./assets/dracula.png" alt=""> |
||||
</button> |
||||
<button class="image" tabindex="0"> |
||||
<img src="./assets/dracula.png" alt=""> |
||||
</button> |
||||
<button class="image" tabindex="0"> |
||||
<img src="./assets/dracula.png" alt=""> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<script src="js/debug.js"></script> |
||||
<script src="js/accounts.js"></script> |
||||
<script src="js/sessions.js"></script> |
||||
<script src="js/authenticate.js"></script> |
||||
<script src="js/sidebar.js"></script> |
||||
<script src="js/backgrounds.js"></script> |
||||
<script src="js/time-date.js"></script> |
||||
<script src="js/layouts.js"></script> |
||||
<script src="js/power.js"></script> |
||||
<script src="js/battery.js"></script> |
||||
<script src="js/brightness.js"></script> |
||||
<script src="js/index.js"></script> |
||||
</body> |
||||
<script src="js/debug.js"></script> |
||||
<script src="js/accounts.js"></script> |
||||
<script src="js/sessions.js"></script> |
||||
<script src="js/authenticate.js"></script> |
||||
<script src="js/sidebar.js"></script> |
||||
<script src="js/backgrounds.js"></script> |
||||
<script src="js/time-date.js"></script> |
||||
<script src="js/layouts.js"></script> |
||||
<script src="js/power.js"></script> |
||||
<script src="js/battery.js"></script> |
||||
<script src="js/brightness.js"></script> |
||||
<script src="js/index.js"></script> |
||||
</body> |
||||
</html> |
||||
|
||||
@ -1,89 +1,98 @@
|
||||
class Accounts { |
||||
constructor() { |
||||
this._localStorage = window.localStorage |
||||
this._userWrapper = document.querySelector("#user-wrapper") |
||||
this._accountsList = document.querySelector("#users-dropdown") |
||||
this._accountsButton = document.querySelector("#users-button") |
||||
this._defaultUser = null |
||||
this._usersObject = null |
||||
this._init() |
||||
} |
||||
constructor() { |
||||
this._localStorage = window.localStorage; |
||||
this._userWrapper = document.querySelector("#user-wrapper"); |
||||
this._accountsList = document.querySelector("#users-dropdown"); |
||||
this._accountsButton = document.querySelector("#users-button"); |
||||
this._defaultUser = null; |
||||
this._usersObject = null; |
||||
this._init(); |
||||
} |
||||
|
||||
getDefaultUserName() { |
||||
return this._defaultUser.username |
||||
} |
||||
getDefaultUserName() { |
||||
return this._defaultUser.username; |
||||
} |
||||
|
||||
_setAccountDefault() { |
||||
let input = this._userWrapper.querySelector("input") |
||||
if (this._defaultUser.username != "") { |
||||
//input.classList.add("hide")
|
||||
input.value = this._defaultUser.username |
||||
} else { |
||||
input.value = "" |
||||
} |
||||
if (this._usersObject.length > 0) { |
||||
this._accountsButton.classList.remove("hide") |
||||
} |
||||
} |
||||
_setAccountDefault() { |
||||
let input = this._userWrapper.querySelector("input"); |
||||
if (this._defaultUser.username != "") { |
||||
//input.classList.add("hide")
|
||||
input.value = this._defaultUser.username; |
||||
} else { |
||||
input.value = ""; |
||||
} |
||||
if (this._usersObject.length > 0) { |
||||
this._accountsButton.classList.remove("hide"); |
||||
} |
||||
} |
||||
|
||||
_updateOnStartup() { |
||||
var username = "" |
||||
if (this._usersObject.length > 0) { |
||||
username = this._localStorage.getItem("defaultUser") || this._usersObject[0].username |
||||
} |
||||
var user = this._usersObject.find((val) => {return val.username === username}) |
||||
if (user === undefined) { |
||||
this._defaultUser = {username: "", display_name: ""} |
||||
} else { |
||||
this._defaultUser = user |
||||
} |
||||
this._setAccountDefault() |
||||
} |
||||
_updateOnStartup() { |
||||
var username = ""; |
||||
if (this._usersObject.length > 0) { |
||||
username = |
||||
this._localStorage.getItem("defaultUser") || |
||||
this._usersObject[0].username; |
||||
} |
||||
var user = this._usersObject.find((val) => { |
||||
return val.username === username; |
||||
}); |
||||
if (user === undefined) { |
||||
this._defaultUser = { username: "", display_name: "" }; |
||||
} else { |
||||
this._defaultUser = user; |
||||
} |
||||
this._setAccountDefault(); |
||||
} |
||||
|
||||
_setAccountList() { |
||||
var dropdown = this._accountsList.querySelector(".dropdown") |
||||
dropdown.innerHTML = "" |
||||
_setAccountList() { |
||||
var dropdown = this._accountsList.querySelector(".dropdown"); |
||||
dropdown.innerHTML = ""; |
||||
|
||||
for (let i = 0; i < this._usersObject.length; i++) { |
||||
var name = this._usersObject[i].display_name |
||||
var li = document.createElement("li") |
||||
var button = document.createElement("button") |
||||
button.type = "button" |
||||
button.innerText = name |
||||
button.addEventListener("click", () => { |
||||
this._updateDefaults(this._usersObject[i]) |
||||
this._setAccountDefault() |
||||
//authenticate.startAuthentication()
|
||||
}) |
||||
for (let i = 0; i < this._usersObject.length; i++) { |
||||
var name = this._usersObject[i].display_name; |
||||
var li = document.createElement("li"); |
||||
var button = document.createElement("button"); |
||||
button.type = "button"; |
||||
button.innerText = name; |
||||
button.addEventListener("click", () => { |
||||
this._updateDefaults(this._usersObject[i]); |
||||
this._setAccountDefault(); |
||||
//authenticate.startAuthentication()
|
||||
}); |
||||
|
||||
li.appendChild(button) |
||||
dropdown.appendChild(li) |
||||
} |
||||
} |
||||
li.appendChild(button); |
||||
dropdown.appendChild(li); |
||||
} |
||||
} |
||||
|
||||
_setButton() { |
||||
var dropdown = this._accountsList.querySelector(".dropdown") |
||||
document.querySelector("#screen").addEventListener("click", (ev) => { |
||||
if (ev.target == this._accountsButton || ev.target.parentElement == this._accountsButton) { |
||||
dropdown.classList.toggle("hide") |
||||
} else |
||||
if (ev.target != this._accountsList && ev.target.closest(".dropdown") == null) { |
||||
dropdown.classList.add("hide") |
||||
} |
||||
}) |
||||
} |
||||
_setButton() { |
||||
var dropdown = this._accountsList.querySelector(".dropdown"); |
||||
document.querySelector("#screen").addEventListener("click", (ev) => { |
||||
if ( |
||||
ev.target == this._accountsButton || |
||||
ev.target.parentElement == this._accountsButton |
||||
) { |
||||
dropdown.classList.toggle("hide"); |
||||
} else if ( |
||||
ev.target != this._accountsList && |
||||
ev.target.closest(".dropdown") == null |
||||
) { |
||||
dropdown.classList.add("hide"); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
_updateDefaults(userObject) { |
||||
if (!userObject) return |
||||
this._defaultUser = userObject |
||||
_updateDefaults(userObject) { |
||||
if (!userObject) return; |
||||
this._defaultUser = userObject; |
||||
|
||||
this._localStorage.setItem("defaultUser", this._defaultUser.username) |
||||
} |
||||
this._localStorage.setItem("defaultUser", this._defaultUser.username); |
||||
} |
||||
|
||||
_init() { |
||||
this._usersObject = lightdm.users |
||||
this._updateOnStartup() |
||||
this._setAccountList() |
||||
this._setButton() |
||||
} |
||||
_init() { |
||||
this._usersObject = lightdm.users; |
||||
this._updateOnStartup(); |
||||
this._setAccountList(); |
||||
this._setButton(); |
||||
} |
||||
} |
||||
|
||||
@ -1,113 +1,126 @@
|
||||
class Authenticate { |
||||
constructor() { |
||||
this._form = document.querySelector("#login-form") |
||||
this._username = "" |
||||
this._password = "" |
||||
this._init() |
||||
} |
||||
|
||||
_setForm() { |
||||
this._form.addEventListener("submit", (ev) => { |
||||
ev.preventDefault() |
||||
var inputs = this._form.querySelectorAll("input") |
||||
var data = getArrayForm(inputs) |
||||
if (!data) return false |
||||
this._username = data.username |
||||
this._password = data.password |
||||
this._respond() |
||||
}) |
||||
} |
||||
|
||||
async _respond() { |
||||
let inputUser = document.querySelector("#input-username") |
||||
let inputPass = document.querySelector("#input-password") |
||||
inputUser.blur(); inputUser.disabled = true; |
||||
inputPass.blur(); inputPass.disabled = true; |
||||
|
||||
lightdm.cancel_authentication() |
||||
lightdm.authenticate(String(this._username)) |
||||
await wait(1000) |
||||
lightdm.respond(this._password) |
||||
} |
||||
|
||||
_showMessage(msg) { |
||||
let message = document.querySelector("#auth-message") |
||||
message.innerText = msg |
||||
message.classList.remove("hide") |
||||
} |
||||
|
||||
_hideMessage() { |
||||
let message = document.querySelector("#auth-message") |
||||
message.classList.add("hide") |
||||
} |
||||
|
||||
async _authentication_done() { |
||||
let body = document.querySelector("body") |
||||
body.classList.add("success") |
||||
|
||||
this._showMessage("Welcome!") |
||||
|
||||
let form = document.querySelector("#pass-form") |
||||
let topbar = document.querySelector("#top-bar") |
||||
let bottombar = document.querySelector("#bottom-bar") |
||||
form.style.transition = "0ms" |
||||
form.classList.add("hide") |
||||
topbar.classList.add("hide") |
||||
bottombar.classList.add("hide") |
||||
|
||||
await wait(1000) |
||||
let defSession = String(sessions.getDefaultSession()) |
||||
document.querySelector("body").style.opacity = 0 |
||||
|
||||
await wait(1000) |
||||
console.log("Session started with", defSession) |
||||
lightdm.start_session(defSession) |
||||
} |
||||
|
||||
async _authentication_failed() { |
||||
lightdm.cancel_authentication() |
||||
let body = document.querySelector("body") |
||||
body.classList.add("failed") |
||||
|
||||
this._showMessage("Try again") |
||||
|
||||
let form = document.querySelector("#pass-form") |
||||
let topbar = document.querySelector("#top-bar") |
||||
let bottombar = document.querySelector("#bottom-bar") |
||||
form.style.transition = "0ms" |
||||
form.classList.add("hide") |
||||
topbar.classList.add("hide") |
||||
bottombar.classList.add("hide") |
||||
|
||||
await wait(1500) |
||||
|
||||
this._hideMessage() |
||||
form.style.transition = "" |
||||
form.classList.remove("hide") |
||||
topbar.classList.remove("hide") |
||||
bottombar.classList.remove("hide") |
||||
|
||||
let inputUser = document.querySelector("#input-username") |
||||
let inputPass = document.querySelector("#input-password") |
||||
inputUser.blur(); inputUser.disabled = false; |
||||
inputPass.blur(); inputPass.disabled = false; |
||||
inputPass.value = "" |
||||
|
||||
body.classList.remove("failed") |
||||
} |
||||
|
||||
_setAuthentication_done() { |
||||
window.authentication_done = () => { |
||||
if (lightdm.is_authenticated) { |
||||
this._authentication_done() |
||||
} else { |
||||
this._authentication_failed() |
||||
} |
||||
} |
||||
} |
||||
|
||||
_init() { |
||||
this._setForm() |
||||
this._setAuthentication_done() |
||||
} |
||||
constructor() { |
||||
this._form = document.querySelector("#login-form"); |
||||
this._inputUser = document.querySelector("#input-username"); |
||||
this._inputPass = document.querySelector("#input-password"); |
||||
this._input_eye = document.querySelector("#pass-eye"); |
||||
this._username = ""; |
||||
this._password = ""; |
||||
this._init(); |
||||
} |
||||
|
||||
_setForm() { |
||||
this._form.addEventListener("submit", (ev) => { |
||||
ev.preventDefault(); |
||||
var inputs = this._form.querySelectorAll("input"); |
||||
var data = getArrayForm(inputs); |
||||
if (!data) return false; |
||||
this._username = data.username; |
||||
this._password = data.password; |
||||
this._respond(); |
||||
}); |
||||
} |
||||
_setPasswordEye() { |
||||
this._input_eye.addEventListener("click", () => { |
||||
if (this._inputPass.type === "password") { |
||||
this._inputPass.type = "text"; |
||||
} else { |
||||
this._inputPass.type = "password"; |
||||
} |
||||
}); |
||||
} |
||||
|
||||
async _respond() { |
||||
this._inputUser.blur(); |
||||
this._inputUser.disabled = true; |
||||
this._inputPass.blur(); |
||||
this._inputPass.disabled = true; |
||||
|
||||
lightdm.cancel_authentication(); |
||||
lightdm.authenticate(String(this._username)); |
||||
await wait(1000); |
||||
lightdm.respond(this._password); |
||||
} |
||||
|
||||
_showMessage(msg) { |
||||
let message = document.querySelector("#auth-message"); |
||||
message.innerText = msg; |
||||
message.classList.remove("hide"); |
||||
} |
||||
|
||||
_hideMessage() { |
||||
let message = document.querySelector("#auth-message"); |
||||
message.classList.add("hide"); |
||||
} |
||||
|
||||
async _authentication_done() { |
||||
let body = document.querySelector("body"); |
||||
body.classList.add("success"); |
||||
|
||||
this._showMessage("Welcome!"); |
||||
|
||||
let form = document.querySelector("#pass-form"); |
||||
let topbar = document.querySelector("#top-bar"); |
||||
let bottombar = document.querySelector("#bottom-bar"); |
||||
form.style.transition = "0ms"; |
||||
form.classList.add("hide"); |
||||
topbar.classList.add("hide"); |
||||
bottombar.classList.add("hide"); |
||||
|
||||
await wait(1000); |
||||
let defSession = String(sessions.getDefaultSession()); |
||||
document.querySelector("body").style.opacity = 0; |
||||
|
||||
await wait(1000); |
||||
console.log("Session started with", defSession); |
||||
lightdm.start_session(defSession); |
||||
} |
||||
|
||||
async _authentication_failed() { |
||||
lightdm.cancel_authentication(); |
||||
let body = document.querySelector("body"); |
||||
body.classList.add("failed"); |
||||
|
||||
this._showMessage("Try again"); |
||||
|
||||
let form = document.querySelector("#pass-form"); |
||||
let topbar = document.querySelector("#top-bar"); |
||||
let bottombar = document.querySelector("#bottom-bar"); |
||||
form.style.transition = "0ms"; |
||||
form.classList.add("hide"); |
||||
topbar.classList.add("hide"); |
||||
bottombar.classList.add("hide"); |
||||
|
||||
await wait(1500); |
||||
|
||||
this._hideMessage(); |
||||
form.style.transition = ""; |
||||
form.classList.remove("hide"); |
||||
topbar.classList.remove("hide"); |
||||
bottombar.classList.remove("hide"); |
||||
|
||||
this._inputUser.blur(); |
||||
this._inputUser.disabled = false; |
||||
this._inputPass.blur(); |
||||
this._inputPass.disabled = false; |
||||
this._inputPass.value = ""; |
||||
|
||||
body.classList.remove("failed"); |
||||
} |
||||
|
||||
_setAuthentication_done() { |
||||
window.authentication_done = () => { |
||||
if (lightdm.is_authenticated) { |
||||
this._authentication_done(); |
||||
} else { |
||||
this._authentication_failed(); |
||||
} |
||||
}; |
||||
} |
||||
|
||||
_init() { |
||||
this._setForm(); |
||||
this._setAuthentication_done(); |
||||
this._setPasswordEye(); |
||||
} |
||||
} |
||||
|
||||
@ -1,74 +1,87 @@
|
||||
class Backgrounds { |
||||
constructor() { |
||||
this._localStorage = window.localStorage |
||||
this._defaultBackgroundArr = ["assets/dracula.png", "assets/window-blurred.png"] |
||||
this._sidebar = document.querySelector("#sidebar") |
||||
this._backgroundsList = document.querySelector("#background-selector") |
||||
this._background = document.querySelector("#background") |
||||
this._backgroundImages = null |
||||
this._backgroundImagesDir = null |
||||
this._backgroundPath = "" |
||||
} |
||||
constructor() { |
||||
this._localStorage = window.localStorage; |
||||
this._defaultBackgroundArr = [ |
||||
"assets/dracula.png", |
||||
"assets/window-blurred.png", |
||||
]; |
||||
this._sidebar = document.querySelector("#sidebar"); |
||||
this._backgroundsList = document.querySelector("#background-selector"); |
||||
this._background = document.querySelector("#background"); |
||||
this._backgroundImages = null; |
||||
this._backgroundImagesDir = null; |
||||
this._backgroundPath = ""; |
||||
} |
||||
|
||||
_createImage(path) { |
||||
let image = document.createElement("img") |
||||
let button = document.createElement("button") |
||||
let imageName = path.replace(/^.*[\\\/]/, '') |
||||
button.classList.add("image") |
||||
image.src = path |
||||
image.alt = imageName |
||||
button.appendChild(image) |
||||
return button |
||||
} |
||||
_createImage(path) { |
||||
let image = document.createElement("img"); |
||||
let button = document.createElement("button"); |
||||
let imageName = path.replace(/^.*[\\\/]/, ""); |
||||
button.classList.add("image"); |
||||
image.src = path; |
||||
image.alt = imageName; |
||||
button.appendChild(image); |
||||
return button; |
||||
} |
||||
|
||||
async _createBackgroundArray() { |
||||
let images = await this._getImages() |
||||
this._backgroundImages = this._defaultBackgroundArr.concat(images) |
||||
this._setBackgroundImages() |
||||
return new Promise((resolve) => resolve()) |
||||
} |
||||
async _createBackgroundArray() { |
||||
let images = await this._getImages(); |
||||
this._backgroundImages = this._defaultBackgroundArr.concat(images); |
||||
this._setBackgroundImages(); |
||||
return new Promise((resolve) => resolve()); |
||||
} |
||||
|
||||
_updateOnStartup() { |
||||
this._backgroundPath = this._localStorage.getItem("defaultBackgroundImage") || this._backgroundImages[0] |
||||
this._updateBackgroundImages() |
||||
} |
||||
_updateOnStartup() { |
||||
this._backgroundPath = |
||||
this._localStorage.getItem("defaultBackgroundImage") || |
||||
this._backgroundImages[0]; |
||||
this._updateBackgroundImages(); |
||||
} |
||||
|
||||
_updateBackgroundImages() { |
||||
let img = this._background.querySelector("img") |
||||
if (!img) { |
||||
img = document.createElement("img") |
||||
this._background.appendChild(img) |
||||
} |
||||
img.src = this._backgroundPath |
||||
this._localStorage.setItem("defaultBackgroundImage", String(this._backgroundPath)) |
||||
} |
||||
_updateBackgroundImages() { |
||||
let img = this._background.querySelector("img"); |
||||
if (!img) { |
||||
img = document.createElement("img"); |
||||
this._background.appendChild(img); |
||||
} |
||||
img.src = this._backgroundPath; |
||||
this._localStorage.setItem( |
||||
"defaultBackgroundImage", |
||||
String(this._backgroundPath) |
||||
); |
||||
} |
||||
|
||||
_setBackgroundImages() { |
||||
this._backgroundsList.innerHTML = "" |
||||
for (let i = 0; i < this._backgroundImages.length; i++) { |
||||
const path = this._backgroundImages[i] |
||||
let button = this._createImage(path) |
||||
button.addEventListener("click", () => { |
||||
this._backgroundPath = path |
||||
this._updateBackgroundImages() |
||||
}) |
||||
this._backgroundsList.appendChild(button) |
||||
} |
||||
} |
||||
_setBackgroundImages() { |
||||
this._backgroundsList.innerHTML = ""; |
||||
for (let i = 0; i < this._backgroundImages.length; i++) { |
||||
const path = this._backgroundImages[i]; |
||||
let button = this._createImage(path); |
||||
button.addEventListener("click", () => { |
||||
this._backgroundPath = path; |
||||
this._updateBackgroundImages(); |
||||
}); |
||||
this._backgroundsList.appendChild(button); |
||||
} |
||||
} |
||||
|
||||
_getImages(path) { |
||||
this._backgroundImagesDir = greeter_config.branding.background_images_dir || '/usr/share/backgrounds' |
||||
return new Promise( (resolve) => { |
||||
theme_utils.dirlist(path ? path : this._backgroundImagesDir, true, result => { |
||||
resolve(result) |
||||
}) |
||||
}) |
||||
} |
||||
_getImages(path) { |
||||
this._backgroundImagesDir = |
||||
greeter_config.branding.background_images_dir || "/usr/share/backgrounds"; |
||||
return new Promise((resolve) => { |
||||
theme_utils.dirlist( |
||||
path ? path : this._backgroundImagesDir, |
||||
true, |
||||
(result) => { |
||||
resolve(result); |
||||
} |
||||
); |
||||
}); |
||||
} |
||||
|
||||
async _init() {
|
||||
await this._createBackgroundArray() |
||||
this._updateOnStartup() |
||||
async _init() { |
||||
await this._createBackgroundArray(); |
||||
this._updateOnStartup(); |
||||
|
||||
return new Promise( resolve => resolve() ) |
||||
} |
||||
return new Promise((resolve) => resolve()); |
||||
} |
||||
} |
||||
|
||||
@ -1,38 +1,40 @@
|
||||
class Battery { |
||||
constructor() { |
||||
this._battery = document.querySelector("#battery-label") |
||||
this._info = {} |
||||
this._init() |
||||
this._battery = document.querySelector("#battery-label"); |
||||
this._info = {}; |
||||
this._init(); |
||||
} |
||||
|
||||
_updateData() { |
||||
this._info = lightdm.batteryData |
||||
var level = this._info.level |
||||
var state = this._info.state |
||||
var ac = this._info.ac_status |
||||
var icon = 0 |
||||
var charging = "" |
||||
var blevel = Math.floor(level / 10) * 10 |
||||
icon = `-${blevel}` |
||||
charging = ac == 1 ? "-charging" : "" |
||||
this._info = lightdm.batteryData; |
||||
var level = this._info.level; |
||||
var state = this._info.state; |
||||
var ac = this._info.ac_status; |
||||
var icon = 0; |
||||
var charging = ""; |
||||
var blevel = Math.floor(level / 10) * 10; |
||||
icon = `-${blevel}`; |
||||
charging = ac == 1 ? "-charging" : ""; |
||||
|
||||
if (blevel < 10) icon = "-outline" |
||||
if (level == 100 && ac == 0) {icon = ""} |
||||
if (blevel < 10) icon = "-outline"; |
||||
if (level == 100 && ac == 0) { |
||||
icon = ""; |
||||
} |
||||
if (level >= 0) { |
||||
this._battery.style.visibility = "visible" |
||||
this._battery.innerHTML = `<span class="mdi mdi-battery${charging}${icon}"></span> ${level}%` |
||||
this._battery.style.visibility = "visible"; |
||||
this._battery.innerHTML = `<span class="mdi mdi-battery${charging}${icon}"></span> ${level}%`; |
||||
} else { |
||||
this._battery.innerHTML = "" |
||||
this._battery.style.visibility = "hidden" |
||||
this._battery.innerHTML = ""; |
||||
this._battery.style.visibility = "hidden"; |
||||
} |
||||
} |
||||
|
||||
_setTimer() { |
||||
if (!lightdm.can_access_battery) return |
||||
this._updateData() |
||||
if (!lightdm.can_access_battery) return; |
||||
this._updateData(); |
||||
} |
||||
|
||||
_init() { |
||||
this._setTimer() |
||||
this._setTimer(); |
||||
} |
||||
} |
||||
|
||||
@ -1,28 +1,28 @@
|
||||
class Brightness { |
||||
constructor() { |
||||
this._brightness = document.querySelector("#brightness-label") |
||||
this._level = 0 |
||||
this._init() |
||||
this._brightness = document.querySelector("#brightness-label"); |
||||
this._level = 0; |
||||
this._init(); |
||||
} |
||||
|
||||
_updateData() { |
||||
this._level = lightdm.brightness |
||||
this._level = lightdm.brightness; |
||||
if (this._level >= 0) { |
||||
this._brightness.style.visibility = "visible" |
||||
var icon = this._level > 50 ? 7: this._level > 10 ? 6 : 5 |
||||
this._brightness.innerHTML = `<span class="mdi mdi-brightness-${icon}"></span> ${this._level}%` |
||||
this._brightness.style.visibility = "visible"; |
||||
var icon = this._level > 50 ? 7 : this._level > 10 ? 6 : 5; |
||||
this._brightness.innerHTML = `<span class="mdi mdi-brightness-${icon}"></span> ${this._level}%`; |
||||
} else { |
||||
this._brightness.innerHTML = "" |
||||
this._brightness.style.visibility = "hidden" |
||||
this._brightness.innerHTML = ""; |
||||
this._brightness.style.visibility = "hidden"; |
||||
} |
||||
} |
||||
|
||||
_setTimer() { |
||||
if (!lightdm.can_access_brightness) return |
||||
this._updateData() |
||||
if (!lightdm.can_access_brightness) return; |
||||
this._updateData(); |
||||
} |
||||
|
||||
_init() { |
||||
this._setTimer() |
||||
this._setTimer(); |
||||
} |
||||
} |
||||
|
||||
@ -1,60 +1,56 @@
|
||||
|
||||
function getArrayForm(inputs) { |
||||
if (!inputs) return false |
||||
var data = {} |
||||
inputs.forEach((x) => { |
||||
data[x.name] = x.value |
||||
}) |
||||
return data |
||||
if (!inputs) return false; |
||||
var data = {}; |
||||
inputs.forEach((x) => { |
||||
data[x.name] = x.value; |
||||
}); |
||||
return data; |
||||
} |
||||
|
||||
async function wait(ms) { |
||||
return new Promise( resolve => { |
||||
return new Promise((resolve) => { |
||||
setTimeout(() => { |
||||
resolve() |
||||
}, ms) |
||||
}) |
||||
resolve(); |
||||
}, ms); |
||||
}); |
||||
} |
||||
|
||||
|
||||
async function initGreeter() { |
||||
|
||||
if (greeter_config.greeter.debug_mode) { |
||||
//debug = new Debug()
|
||||
} |
||||
|
||||
lightdm.authentication_complete?.connect(() => authentication_done()) |
||||
|
||||
lightdm.brightness_update?.connect(() => brightness._updateData()) |
||||
lightdm.authentication_complete?.connect(() => authentication_done()); |
||||
|
||||
lightdm.battery_update?.connect(() => battery._updateData()) |
||||
lightdm.brightness_update?.connect(() => brightness._updateData()); |
||||
|
||||
accounts = new Accounts() |
||||
lightdm.battery_update?.connect(() => battery._updateData()); |
||||
|
||||
sessions = new Sessions() |
||||
accounts = new Accounts(); |
||||
|
||||
authenticate = new Authenticate() |
||||
sessions = new Sessions(); |
||||
|
||||
sidebar = new Sidebar() |
||||
authenticate = new Authenticate(); |
||||
|
||||
time_date = new TimeDate() |
||||
sidebar = new Sidebar(); |
||||
|
||||
layouts = new Layouts() |
||||
time_date = new TimeDate(); |
||||
|
||||
backgrounds = new Backgrounds() |
||||
backgrounds._init() |
||||
layouts = new Layouts(); |
||||
|
||||
power = new Power() |
||||
backgrounds = new Backgrounds(); |
||||
backgrounds._init(); |
||||
|
||||
battery = new Battery() |
||||
power = new Power(); |
||||
|
||||
brightness = new Brightness() |
||||
battery = new Battery(); |
||||
|
||||
brightness = new Brightness(); |
||||
} |
||||
|
||||
if (window._ready_event === undefined) { |
||||
_ready_event = new Event("GreeterReady") |
||||
window.dispatchEvent(_ready_event) |
||||
_ready_event = new Event("GreeterReady"); |
||||
window.dispatchEvent(_ready_event); |
||||
} |
||||
|
||||
window.addEventListener("GreeterReady", initGreeter) |
||||
window.addEventListener("GreeterReady", initGreeter); |
||||
|
||||
@ -1,77 +1,85 @@
|
||||
class Layouts { |
||||
constructor() { |
||||
this._layoutList = document.querySelector("#layouts-list") |
||||
this._dropdown = document.querySelector("#layouts-dropdown") |
||||
this._button = document.querySelector("#layouts-button") |
||||
this._layouts = [] |
||||
constructor() { |
||||
this._layoutList = document.querySelector("#layouts-list"); |
||||
this._dropdown = document.querySelector("#layouts-dropdown"); |
||||
this._button = document.querySelector("#layouts-button"); |
||||
this._layouts = []; |
||||
|
||||
this.layout = {} |
||||
this.layout = {}; |
||||
|
||||
this._init() |
||||
} |
||||
this._init(); |
||||
} |
||||
|
||||
_setDefault() { |
||||
let name = this.layout.name |
||||
let description = this.layout.description |
||||
let short = this.layout.short_description |
||||
this._button.innerHTML = name.toUpperCase() + (short ? ` (${short})` : "") |
||||
//this._button.name = description
|
||||
} |
||||
_setDefault() { |
||||
let name = this.layout.name; |
||||
let description = this.layout.description; |
||||
let short = this.layout.short_description; |
||||
this._button.innerHTML = name.toUpperCase() + (short ? ` (${short})` : ""); |
||||
//this._button.name = description
|
||||
} |
||||
|
||||
_setLayoutList() { |
||||
let dropdown = this._dropdown |
||||
dropdown.innerHTML = "" |
||||
for (let i = 0; i < this._layouts.length; i++) { |
||||
let name = this._layouts[i].name |
||||
let description = this._layouts[i].description |
||||
let short = this._layouts[i].short_description |
||||
let li = document.createElement("li") |
||||
let button = document.createElement("button") |
||||
button.innerHTML = name + (short ? ` (${short})` : "") |
||||
button.name = description |
||||
button.addEventListener("click", () => { |
||||
this.layout = this._layouts[i] |
||||
this._setDefault() |
||||
lightdm.layout = this.layout |
||||
}) |
||||
li.appendChild(button) |
||||
dropdown.appendChild(li) |
||||
} |
||||
} |
||||
_setLayoutList() { |
||||
let dropdown = this._dropdown; |
||||
dropdown.innerHTML = ""; |
||||
for (let i = 0; i < this._layouts.length; i++) { |
||||
let name = this._layouts[i].name; |
||||
let description = this._layouts[i].description; |
||||
let short = this._layouts[i].short_description; |
||||
let li = document.createElement("li"); |
||||
let button = document.createElement("button"); |
||||
button.innerHTML = name + (short ? ` (${short})` : ""); |
||||
button.name = description; |
||||
button.addEventListener("click", () => { |
||||
this.layout = this._layouts[i]; |
||||
this._setDefault(); |
||||
lightdm.layout = this.layout; |
||||
}); |
||||
li.appendChild(button); |
||||
dropdown.appendChild(li); |
||||
} |
||||
} |
||||
|
||||
_setKeydown() { |
||||
let dropdown = this._dropdown |
||||
dropdown.addEventListener("keydown", (ev) => { |
||||
if (ev.keyCode == 27) { |
||||
dropdown.classList.add("hide") |
||||
this._button.focus() |
||||
} |
||||
}) |
||||
} |
||||
_setKeydown() { |
||||
let dropdown = this._dropdown; |
||||
dropdown.addEventListener("keydown", (ev) => { |
||||
if (ev.keyCode == 27) { |
||||
dropdown.classList.add("hide"); |
||||
this._button.focus(); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
_setButton() { |
||||
let dropdown = this._dropdown |
||||
document.querySelector("#screen").addEventListener("click", (ev) => { |
||||
if (ev.target == this._button || ev.target.parentElement == this._button) { |
||||
dropdown.classList.toggle("hide") |
||||
} else |
||||
if (ev.target != dropdown && ev.target.closest(".dropdown") == null) { |
||||
dropdown.classList.add("hide") |
||||
} |
||||
}) |
||||
document.querySelector("#screen").addEventListener("focusin", (ev) => { |
||||
if (!dropdown.contains(document.activeElement) && document.activeElement != this._button) { |
||||
dropdown.classList.add("hide") |
||||
} |
||||
}) |
||||
} |
||||
_setButton() { |
||||
let dropdown = this._dropdown; |
||||
document.querySelector("#screen").addEventListener("click", (ev) => { |
||||
if ( |
||||
ev.target == this._button || |
||||
ev.target.parentElement == this._button |
||||
) { |
||||
dropdown.classList.toggle("hide"); |
||||
} else if ( |
||||
ev.target != dropdown && |
||||
ev.target.closest(".dropdown") == null |
||||
) { |
||||
dropdown.classList.add("hide"); |
||||
} |
||||
}); |
||||
document.querySelector("#screen").addEventListener("focusin", (ev) => { |
||||
if ( |
||||
!dropdown.contains(document.activeElement) && |
||||
document.activeElement != this._button |
||||
) { |
||||
dropdown.classList.add("hide"); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
_init() { |
||||
this.layout = lightdm.layout |
||||
this._layouts = greeter_config.layouts |
||||
this._setDefault() |
||||
this._setLayoutList() |
||||
this._setButton() |
||||
this._setKeydown() |
||||
} |
||||
_init() { |
||||
this.layout = lightdm.layout; |
||||
this._layouts = greeter_config.layouts; |
||||
this._setDefault(); |
||||
this._setLayoutList(); |
||||
this._setButton(); |
||||
this._setKeydown(); |
||||
} |
||||
} |
||||
|
||||
@ -1,89 +1,89 @@
|
||||
class Power { |
||||
constructor() { |
||||
this._shutdown = document.querySelector("#shutdown-button") |
||||
this._restart = document.querySelector("#restart-button") |
||||
this._hibernate = document.querySelector("#hibernate-button") |
||||
this._suspend = document.querySelector("#suspend-button") |
||||
this._cover = document.querySelector("#cover") |
||||
this._covermsg = document.querySelector("#cover > #message") |
||||
this._init() |
||||
this._shutdown = document.querySelector("#shutdown-button"); |
||||
this._restart = document.querySelector("#restart-button"); |
||||
this._hibernate = document.querySelector("#hibernate-button"); |
||||
this._suspend = document.querySelector("#suspend-button"); |
||||
this._cover = document.querySelector("#cover"); |
||||
this._covermsg = document.querySelector("#cover > #message"); |
||||
this._init(); |
||||
} |
||||
|
||||
_show_message(text) { |
||||
this._covermsg.innerHTML = text |
||||
this._cover.classList.remove("hide") |
||||
this._covermsg.innerHTML = text; |
||||
this._cover.classList.remove("hide"); |
||||
wait(500).then(() => { |
||||
this._cover.focus() |
||||
}) |
||||
this._cover.focus(); |
||||
}); |
||||
} |
||||
|
||||
async _do_shutdown() { |
||||
this._show_message("Shutting down") |
||||
await wait(1000) |
||||
lightdm.shutdown() |
||||
this._show_message("Shutting down"); |
||||
await wait(1000); |
||||
lightdm.shutdown(); |
||||
} |
||||
async _do_restart() { |
||||
this._show_message("Restarting") |
||||
await wait(1000) |
||||
lightdm.restart() |
||||
this._show_message("Restarting"); |
||||
await wait(1000); |
||||
lightdm.restart(); |
||||
} |
||||
async _do_hibernate() { |
||||
this._show_message("Hibernating") |
||||
await wait(1000) |
||||
lightdm.hibernate() |
||||
this._show_message("Hibernating"); |
||||
await wait(1000); |
||||
lightdm.hibernate(); |
||||
} |
||||
async _do_suspend() { |
||||
this._show_message("Suspending") |
||||
await wait(1000) |
||||
lightdm.suspend() |
||||
this._show_message("Suspending"); |
||||
await wait(1000); |
||||
lightdm.suspend(); |
||||
} |
||||
|
||||
_setShutdown() { |
||||
if (!lightdm.can_shutdown) return |
||||
if (!lightdm.can_shutdown) return; |
||||
this._shutdown.addEventListener("click", () => { |
||||
this._do_shutdown() |
||||
}) |
||||
this._shutdown.classList.remove("hide") |
||||
this._do_shutdown(); |
||||
}); |
||||
this._shutdown.classList.remove("hide"); |
||||
} |
||||
_setRestart() { |
||||
if (!lightdm.can_restart) return |
||||
if (!lightdm.can_restart) return; |
||||
this._restart.addEventListener("click", () => { |
||||
this._do_restart() |
||||
}) |
||||
this._restart.classList.remove("hide") |
||||
this._do_restart(); |
||||
}); |
||||
this._restart.classList.remove("hide"); |
||||
} |
||||
_setHibernate() { |
||||
if (!lightdm.can_hibernate) return |
||||
if (!lightdm.can_hibernate) return; |
||||
this._hibernate.addEventListener("click", () => { |
||||
this._do_hibernate() |
||||
}) |
||||
this._hibernate.classList.remove("hide") |
||||
this._do_hibernate(); |
||||
}); |
||||
this._hibernate.classList.remove("hide"); |
||||
} |
||||
_setSuspend() { |
||||
if (!lightdm.can_suspend) return |
||||
if (!lightdm.can_suspend) return; |
||||
this._suspend.addEventListener("click", () => { |
||||
this._do_suspend() |
||||
}) |
||||
this._suspend.classList.remove("hide") |
||||
this._do_suspend(); |
||||
}); |
||||
this._suspend.classList.remove("hide"); |
||||
} |
||||
_setCover() { |
||||
this._cover.addEventListener("click", () => { |
||||
this._cover.classList.add("hide") |
||||
}) |
||||
this._cover.classList.add("hide"); |
||||
}); |
||||
this._cover.addEventListener("keydown", () => { |
||||
this._cover.classList.add("hide") |
||||
}) |
||||
this._cover.classList.add("hide"); |
||||
}); |
||||
} |
||||
|
||||
_setButtons() { |
||||
this._setShutdown() |
||||
this._setRestart() |
||||
this._setHibernate() |
||||
this._setSuspend() |
||||
this._setCover() |
||||
this._setShutdown(); |
||||
this._setRestart(); |
||||
this._setHibernate(); |
||||
this._setSuspend(); |
||||
this._setCover(); |
||||
} |
||||
|
||||
_init() { |
||||
this._setButtons() |
||||
this._setButtons(); |
||||
} |
||||
} |
||||
|
||||
@ -1,91 +1,104 @@
|
||||
class Sessions { |
||||
constructor() { |
||||
this._localStorage = window.localStorage |
||||
this._sessionsButton = document.querySelector("#sessions-button") |
||||
this._sessionList = document.querySelector("#sessions-dropdown") |
||||
this._sessionLabel = document.querySelector("#sessions-button > .text") |
||||
this._defaultSession = null |
||||
this._sessionsObject = null |
||||
this._init() |
||||
} |
||||
constructor() { |
||||
this._localStorage = window.localStorage; |
||||
this._sessionsButton = document.querySelector("#sessions-button"); |
||||
this._sessionList = document.querySelector("#sessions-dropdown"); |
||||
this._sessionLabel = document.querySelector("#sessions-button > .text"); |
||||
this._defaultSession = null; |
||||
this._sessionsObject = null; |
||||
this._init(); |
||||
} |
||||
|
||||
getDefaultSession() { |
||||
return this._defaultSession.key |
||||
return this._defaultSession.key; |
||||
} |
||||
|
||||
_setSessionDefault() { |
||||
this._sessionLabel.innerText = this._defaultSession.name |
||||
} |
||||
_setSessionDefault() { |
||||
this._sessionLabel.innerText = this._defaultSession.name; |
||||
} |
||||
|
||||
_updateOnStartup() { |
||||
var key = this._localStorage.getItem("defaultSession") || this._sessionsObject[0].key || lightdm.default_session |
||||
_updateOnStartup() { |
||||
var key = |
||||
this._localStorage.getItem("defaultSession") || |
||||
this._sessionsObject[0].key || |
||||
lightdm.default_session; |
||||
|
||||
var session = this._sessionsObject.find((val) => {return val.key === key}) |
||||
if (session === undefined) { |
||||
// This should never happen
|
||||
this._defaultSession = {key: "awesome", name: "Awesome WM"} |
||||
} else { |
||||
this._defaultSession = session |
||||
} |
||||
this._setSessionDefault() |
||||
} |
||||
var session = this._sessionsObject.find((val) => { |
||||
return val.key === key; |
||||
}); |
||||
if (session === undefined) { |
||||
// This should never happen
|
||||
this._defaultSession = { key: "awesome", name: "Awesome WM" }; |
||||
} else { |
||||
this._defaultSession = session; |
||||
} |
||||
this._setSessionDefault(); |
||||
} |
||||
|
||||
_updateDefaults(sessionObj) { |
||||
if (!sessionObj) return |
||||
this._defaultSession = sessionObj |
||||
this._localStorage.setItem("defaultSession", this._defaultSession.key) |
||||
} |
||||
_updateDefaults(sessionObj) { |
||||
if (!sessionObj) return; |
||||
this._defaultSession = sessionObj; |
||||
this._localStorage.setItem("defaultSession", this._defaultSession.key); |
||||
} |
||||
|
||||
_setSessionList() { |
||||
var dropdown = this._sessionList |
||||
dropdown.innerHTML = "" |
||||
for (let i = 0; i < this._sessionsObject.length; i++) { |
||||
var name = this._sessionsObject[i].name |
||||
var li = document.createElement("li") |
||||
var button = document.createElement("button") |
||||
button.innerText = name |
||||
button.addEventListener("click", () => { |
||||
this._updateDefaults(this._sessionsObject[i]) |
||||
this._setSessionDefault() |
||||
}) |
||||
_setSessionList() { |
||||
var dropdown = this._sessionList; |
||||
dropdown.innerHTML = ""; |
||||
for (let i = 0; i < this._sessionsObject.length; i++) { |
||||
var name = this._sessionsObject[i].name; |
||||
var li = document.createElement("li"); |
||||
var button = document.createElement("button"); |
||||
button.innerText = name; |
||||
button.addEventListener("click", () => { |
||||
this._updateDefaults(this._sessionsObject[i]); |
||||
this._setSessionDefault(); |
||||
}); |
||||
|
||||
li.appendChild(button) |
||||
dropdown.appendChild(li) |
||||
} |
||||
} |
||||
li.appendChild(button); |
||||
dropdown.appendChild(li); |
||||
} |
||||
} |
||||
|
||||
_setKeydown() { |
||||
var dropdown = this._sessionList |
||||
dropdown.addEventListener("keydown", (ev) => { |
||||
if (ev.keyCode == 27) { |
||||
sessions_dropdown.classList.add("hide") |
||||
this._sessionsButton.focus() |
||||
} |
||||
}) |
||||
} |
||||
_setKeydown() { |
||||
var dropdown = this._sessionList; |
||||
dropdown.addEventListener("keydown", (ev) => { |
||||
if (ev.keyCode == 27) { |
||||
sessions_dropdown.classList.add("hide"); |
||||
this._sessionsButton.focus(); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
_setButton() { |
||||
var dropdown = this._sessionList |
||||
document.querySelector("#screen").addEventListener("click", (ev) => { |
||||
if (ev.target == this._sessionsButton || ev.target.parentElement == this._sessionsButton) { |
||||
dropdown.classList.toggle("hide") |
||||
} else |
||||
if (ev.target != this._sessionList && ev.target.closest(".dropdown") == null) { |
||||
dropdown.classList.add("hide") |
||||
} |
||||
}) |
||||
document.querySelector("#screen").addEventListener("focusin", (ev) => { |
||||
if (!dropdown.contains(document.activeElement) && document.activeElement != this._sessionsButton) { |
||||
dropdown.classList.add("hide") |
||||
} |
||||
}) |
||||
} |
||||
_setButton() { |
||||
var dropdown = this._sessionList; |
||||
document.querySelector("#screen").addEventListener("click", (ev) => { |
||||
if ( |
||||
ev.target == this._sessionsButton || |
||||
ev.target.parentElement == this._sessionsButton |
||||
) { |
||||
dropdown.classList.toggle("hide"); |
||||
} else if ( |
||||
ev.target != this._sessionList && |
||||
ev.target.closest(".dropdown") == null |
||||
) { |
||||
dropdown.classList.add("hide"); |
||||
} |
||||
}); |
||||
document.querySelector("#screen").addEventListener("focusin", (ev) => { |
||||
if ( |
||||
!dropdown.contains(document.activeElement) && |
||||
document.activeElement != this._sessionsButton |
||||
) { |
||||
dropdown.classList.add("hide"); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
_init() { |
||||
this._sessionsObject = lightdm.sessions |
||||
this._updateOnStartup() |
||||
this._setSessionList() |
||||
this._setButton() |
||||
this._setKeydown() |
||||
} |
||||
_init() { |
||||
this._sessionsObject = lightdm.sessions; |
||||
this._updateOnStartup(); |
||||
this._setSessionList(); |
||||
this._setButton(); |
||||
this._setKeydown(); |
||||
} |
||||
} |
||||
|
||||
@ -1,65 +1,75 @@
|
||||
class Sidebar { |
||||
constructor() { |
||||
this._sidebar = document.querySelector("#sidebar") |
||||
this._sidebarButton = document.querySelector("#panel-button") |
||||
this._closeButton = document.querySelector("#close-panel-button") |
||||
this._visible = false |
||||
this._init() |
||||
} |
||||
constructor() { |
||||
this._sidebar = document.querySelector("#sidebar"); |
||||
this._sidebarButton = document.querySelector("#panel-button"); |
||||
this._closeButton = document.querySelector("#close-panel-button"); |
||||
this._visible = false; |
||||
this._init(); |
||||
} |
||||
|
||||
showSidebar() { |
||||
this._sidebar.classList.remove("hide") |
||||
wait(100).then(() => {this._closeButton.focus()}) |
||||
this._visible = true |
||||
} |
||||
showSidebar() { |
||||
this._sidebar.classList.remove("hide"); |
||||
wait(100).then(() => { |
||||
this._closeButton.focus(); |
||||
}); |
||||
this._visible = true; |
||||
} |
||||
|
||||
hideSidebar() { |
||||
this._sidebar.classList.add("hide") |
||||
this._sidebarButton.focus() |
||||
this._visible = false |
||||
} |
||||
hideSidebar() { |
||||
this._sidebar.classList.add("hide"); |
||||
this._sidebarButton.focus(); |
||||
this._visible = false; |
||||
} |
||||
|
||||
toggleSidebar() { |
||||
if (this._visible) { |
||||
this.hideSidebar() |
||||
} else { |
||||
this.showSidebar() |
||||
} |
||||
} |
||||
toggleSidebar() { |
||||
if (this._visible) { |
||||
this.hideSidebar(); |
||||
} else { |
||||
this.showSidebar(); |
||||
} |
||||
} |
||||
|
||||
_setKeydown() { |
||||
this._sidebar.addEventListener("keydown", (ev) => { |
||||
if (ev.keyCode == 27) { |
||||
this.hideSidebar() |
||||
} |
||||
}) |
||||
} |
||||
_setKeydown() { |
||||
this._sidebar.addEventListener("keydown", (ev) => { |
||||
if (ev.keyCode == 27) { |
||||
this.hideSidebar(); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
_setSidebar() { |
||||
document.querySelector("#screen").addEventListener("click", (ev) => { |
||||
if (ev.target == this._sidebarButton || ev.target.parentElement == this._sidebarButton) { |
||||
this.toggleSidebar() |
||||
} else |
||||
if (ev.target != this._sidebar && ev.target.closest(".panel") == null) { |
||||
this._sidebar.classList.add("hide") |
||||
this._visible = false |
||||
} |
||||
_setSidebar() { |
||||
document.querySelector("#screen").addEventListener("click", (ev) => { |
||||
if ( |
||||
ev.target == this._sidebarButton || |
||||
ev.target.parentElement == this._sidebarButton |
||||
) { |
||||
this.toggleSidebar(); |
||||
} else if ( |
||||
ev.target != this._sidebar && |
||||
ev.target.closest(".panel") == null |
||||
) { |
||||
this._sidebar.classList.add("hide"); |
||||
this._visible = false; |
||||
} |
||||
|
||||
if (ev.target == this._closeButton || ev.target.parentElement == this._closeButton) { |
||||
this.hideSidebar() |
||||
} |
||||
}) |
||||
if ( |
||||
ev.target == this._closeButton || |
||||
ev.target.parentElement == this._closeButton |
||||
) { |
||||
this.hideSidebar(); |
||||
} |
||||
}); |
||||
|
||||
document.querySelector("#screen").addEventListener("focusin", (ev) => { |
||||
if (!this._sidebar.contains(document.activeElement)) { |
||||
this._sidebar.classList.add("hide") |
||||
this._visible = false |
||||
} |
||||
}) |
||||
} |
||||
document.querySelector("#screen").addEventListener("focusin", (ev) => { |
||||
if (!this._sidebar.contains(document.activeElement)) { |
||||
this._sidebar.classList.add("hide"); |
||||
this._visible = false; |
||||
} |
||||
}); |
||||
} |
||||
|
||||
_init() { |
||||
this._setSidebar() |
||||
this._setKeydown() |
||||
} |
||||
_init() { |
||||
this._setSidebar(); |
||||
this._setKeydown(); |
||||
} |
||||
} |
||||
|
||||
@ -1,56 +1,56 @@
|
||||
class TimeDate { |
||||
constructor() { |
||||
this._timeDateButton = document.querySelector("#time-date") |
||||
this._timeLabel = document.querySelector("#time-date #time-label") |
||||
this._dateLabel = document.querySelector("#time-date #date-label") |
||||
this._passForm = document.querySelector("#pass-form") |
||||
this._init() |
||||
} |
||||
constructor() { |
||||
this._timeDateButton = document.querySelector("#time-date"); |
||||
this._timeLabel = document.querySelector("#time-date #time-label"); |
||||
this._dateLabel = document.querySelector("#time-date #date-label"); |
||||
this._passForm = document.querySelector("#pass-form"); |
||||
this._init(); |
||||
} |
||||
|
||||
_updateTimeDate() { |
||||
let date = theme_utils.get_current_localized_date() |
||||
let time = theme_utils.get_current_localized_time() |
||||
_updateTimeDate() { |
||||
let date = theme_utils.get_current_localized_date(); |
||||
let time = theme_utils.get_current_localized_time(); |
||||
|
||||
this._dateLabel.innerText = date |
||||
this._timeLabel.innerText = time |
||||
} |
||||
this._dateLabel.innerText = date; |
||||
this._timeLabel.innerText = time; |
||||
} |
||||
|
||||
_setTimer() { |
||||
this._updateTimeDate() |
||||
setInterval(() => { |
||||
this._updateTimeDate() |
||||
}, 1000) |
||||
} |
||||
_setTimer() { |
||||
this._updateTimeDate(); |
||||
setInterval(() => { |
||||
this._updateTimeDate(); |
||||
}, 1000); |
||||
} |
||||
|
||||
_setButtons() { |
||||
this._timeDateButton.addEventListener("click", (ev) => { |
||||
this.toggleTimeDate() |
||||
}) |
||||
this._passForm.addEventListener("keydown", (ev) => { |
||||
if (ev.keyCode == 27) { |
||||
this.toggleTimeDate() |
||||
} |
||||
}) |
||||
} |
||||
_setButtons() { |
||||
this._timeDateButton.addEventListener("click", (ev) => { |
||||
this.toggleTimeDate(); |
||||
}); |
||||
this._passForm.addEventListener("keydown", (ev) => { |
||||
if (ev.keyCode == 27) { |
||||
this.toggleTimeDate(); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
async toggleTimeDate() { |
||||
this._timeDateButton.blur() |
||||
this._passForm.blur() |
||||
if (this._timeDateButton.classList.contains("hide")) { |
||||
this._passForm.classList.add("hide") |
||||
await wait(300) |
||||
this._timeDateButton.classList.remove("hide") |
||||
await wait(100) |
||||
this._timeDateButton.focus() |
||||
} else { |
||||
this._timeDateButton.classList.add("hide") |
||||
await wait(300) |
||||
this._passForm.classList.remove("hide") |
||||
} |
||||
} |
||||
|
||||
_init() { |
||||
this._setTimer() |
||||
this._setButtons() |
||||
} |
||||
async toggleTimeDate() { |
||||
this._timeDateButton.blur(); |
||||
this._passForm.blur(); |
||||
if (this._timeDateButton.classList.contains("hide")) { |
||||
this._passForm.classList.add("hide"); |
||||
await wait(300); |
||||
this._timeDateButton.classList.remove("hide"); |
||||
await wait(100); |
||||
this._timeDateButton.focus(); |
||||
} else { |
||||
this._timeDateButton.classList.add("hide"); |
||||
await wait(300); |
||||
this._passForm.classList.remove("hide"); |
||||
} |
||||
} |
||||
|
||||
_init() { |
||||
this._setTimer(); |
||||
this._setButtons(); |
||||
} |
||||
} |
||||
|
||||
@ -1,116 +1,128 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<meta |
||||
name="viewport" |
||||
content="width=device-width, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" |
||||
/> |
||||
|
||||
<link rel="stylesheet" href="css/style.css" class="style"> |
||||
<link rel="stylesheet" href="../../_vendor/material-icons/css/materialdesignicons.min.css" onerror="this.href='../_vendor/material-icons/css/materialdesignicons.min.css'" class="style"> |
||||
<link rel="stylesheet" href="css/style.css" class="style" /> |
||||
<link |
||||
rel="stylesheet" |
||||
href="../../_vendor/material-icons/css/materialdesignicons.min.css" |
||||
onerror="this.href='../_vendor/material-icons/css/materialdesignicons.min.css'" |
||||
class="style" |
||||
/> |
||||
|
||||
<!--<script src="../_vendor/js/mock.js"></script>--> |
||||
<!--<script src="../_vendor/js/mock.js"></script>--> |
||||
|
||||
<title>Gruvbox theme</title> |
||||
</head> |
||||
<body> |
||||
<div id="background"></div> |
||||
<button id="cover" class="hide"> |
||||
<div id="message"></div> |
||||
</button> |
||||
<div id="screen"> |
||||
<div id="login-form"> |
||||
<div id="login-form-box"> |
||||
<div id="user-image"> |
||||
<div id="background-image"> |
||||
<i class="mdi mdi-account"></i> |
||||
<title>Gruvbox theme</title> |
||||
</head> |
||||
<body> |
||||
<div id="background"></div> |
||||
<button id="cover" class="hide"> |
||||
<div id="message"></div> |
||||
</button> |
||||
<div id="screen"> |
||||
<div id="login-form"> |
||||
<div id="login-form-box"> |
||||
<div id="user-image"> |
||||
<div id="background-image"> |
||||
<i class="mdi mdi-account"></i> |
||||
</div> |
||||
<img src="" alt="" /> |
||||
</div> |
||||
<div id="user-label"> |
||||
<b>User</b> |
||||
</div> |
||||
<img src="" alt=""> |
||||
</div> |
||||
<div id="user-label"> |
||||
<b>User</b> |
||||
</div> |
||||
|
||||
<div id="pass-form"> |
||||
<form action="POST"> |
||||
<div id="input"> |
||||
<input id="input-password" name="password" type="password" autocomplete="off" autofocus="true" placeholder="Enter your password"> |
||||
</div> |
||||
<div> |
||||
<button id="submit-button" type="submit" class="button"> |
||||
<i class="mdi mdi-chevron-right mdi-24px"></i> |
||||
</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<div id="pass-form"> |
||||
<form action="POST"> |
||||
<div id="input"> |
||||
<input |
||||
id="input-password" |
||||
name="password" |
||||
type="password" |
||||
autocomplete="off" |
||||
autofocus="true" |
||||
placeholder="Enter your password" |
||||
/> |
||||
<button id="pass-eye" type="button" class="button"> |
||||
<i class="mdi mdi-eye"></i> |
||||
</button> |
||||
</div> |
||||
<div> |
||||
<button id="submit-button" type="submit" class="button"> |
||||
<i class="mdi mdi-chevron-right mdi-24px"></i> |
||||
</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
|
||||
<div id="sessions-list"> |
||||
<button id="sessions-button" class="button"> |
||||
<span class="mdi mdi-chevron-down mdi-24px"></span> |
||||
</button> |
||||
<ul id="sessions-dropdown" class="dropdown hide"> |
||||
<li><button>Awesome</button></li> |
||||
<li><button>Ubuntu</button></li> |
||||
</ul> |
||||
<div id="sessions-list"> |
||||
<button id="sessions-button" class="button"> |
||||
<span class="mdi mdi-chevron-down mdi-24px"></span> |
||||
</button> |
||||
<ul id="sessions-dropdown" class="dropdown hide"> |
||||
<li><button>Awesome</button></li> |
||||
<li><button>Ubuntu</button></li> |
||||
</ul> |
||||
</div> |
||||
<div id="users-list"> |
||||
<button id="users-button" class="button"> |
||||
<span class="mdi mdi-chevron-down mdi-24px"></span> |
||||
</button> |
||||
<ul id="users-dropdown" class="dropdown hide"> |
||||
<li><button>Normal sheer</button></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div id="users-list"> |
||||
<button id="users-button" class="button"> |
||||
<span class="mdi mdi-chevron-down mdi-24px"></span> |
||||
</button> |
||||
<ul id="users-dropdown" class="dropdown hide"> |
||||
<li><button>Normal sheer</button></li> |
||||
</div> |
||||
<div id="session-label" class="info"></div> |
||||
<div id="lock-label" class="info hide">Lock</div> |
||||
<div id="time-date" class="info"> |
||||
<span id="time-label">20:00</span> |
||||
<span id="date-label">12-07-21</span> |
||||
</div> |
||||
|
||||
<div id="system-status" class="label-bar"> |
||||
<div id="layouts-list"> |
||||
<button id="layouts-button" class="">LATAM</button> |
||||
<ul id="layouts-dropdown" class="dropdown hide"> |
||||
<li><button>Latam</button></li> |
||||
<li><button>English</button></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<div id="brightness-label"></div> |
||||
<div id="battery-label"></div> |
||||
</div> |
||||
</div> |
||||
<div id="session-label" class="info"> |
||||
</div> |
||||
<div id="lock-label" class="info hide"> |
||||
Lock |
||||
</div> |
||||
<div id="time-date" class="info"> |
||||
<span id="time-label">20:00</span> |
||||
<span id="date-label">12-07-21</span> |
||||
</div> |
||||
|
||||
<div id="system-status" class="label-bar"> |
||||
<div id="layouts-list"> |
||||
<button id="layouts-button" class=""> |
||||
LATAM |
||||
<div id="system-power" class="label-bar"> |
||||
<button id="shutdown-btn" class="hide"> |
||||
<span class="mdi mdi-power"></span> |
||||
</button> |
||||
<button id="restart-btn" class="hide"> |
||||
<span class="mdi mdi-restart"></span> |
||||
</button> |
||||
<button id="suspend-btn" class="hide"> |
||||
<span class="mdi mdi-power-sleep"></span> |
||||
</button> |
||||
<button id="hibernate-btn" class="hide"> |
||||
<span class="mdi mdi-power-cycle"></span> |
||||
</button> |
||||
<ul id="layouts-dropdown" class="dropdown hide"> |
||||
<li><button>Latam</button></li> |
||||
<li><button>English</button></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<div id="brightness-label"></div> |
||||
<div id="battery-label"></div> |
||||
</div> |
||||
<div id="system-power" class="label-bar"> |
||||
<button id="shutdown-btn" class="hide"> |
||||
<span class="mdi mdi-power"></span> |
||||
</button> |
||||
<button id="restart-btn" class="hide"> |
||||
<span class="mdi mdi-restart"></span> |
||||
</button> |
||||
<button id="suspend-btn" class="hide"> |
||||
<span class="mdi mdi-power-sleep"></span> |
||||
</button> |
||||
<button id="hibernate-btn" class="hide"> |
||||
<span class="mdi mdi-power-cycle"></span> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
|
||||
<script src="js/debug.js"></script> |
||||
<script src="js/authenticate.js"></script> |
||||
<script src="js/accounts.js"></script> |
||||
<script src="js/sessions.js"></script> |
||||
<script src="js/time-date.js"></script> |
||||
<script src="js/layouts.js"></script> |
||||
<script src="js/power.js"></script> |
||||
<script src="js/battery.js"></script> |
||||
<script src="js/brightness.js"></script> |
||||
<script src="js/index.js"></script> |
||||
</body> |
||||
<script src="js/debug.js"></script> |
||||
<script src="js/authenticate.js"></script> |
||||
<script src="js/accounts.js"></script> |
||||
<script src="js/sessions.js"></script> |
||||
<script src="js/time-date.js"></script> |
||||
<script src="js/layouts.js"></script> |
||||
<script src="js/power.js"></script> |
||||
<script src="js/battery.js"></script> |
||||
<script src="js/brightness.js"></script> |
||||
<script src="js/index.js"></script> |
||||
</body> |
||||
</html> |
||||
|
||||
@ -1,112 +1,131 @@
|
||||
class Accounts { |
||||
constructor() { |
||||
this._localStorage = window.localStorage |
||||
this._userImage = document.querySelector("#user-image") |
||||
this._userLabel = document.querySelector("#user-label") |
||||
this._accountsList = document.querySelector("#users-list") |
||||
this._accountsButton = document.querySelector("#users-button") |
||||
this._defaultUser = null |
||||
this._usersObject = null |
||||
this._init() |
||||
this._localStorage = window.localStorage; |
||||
this._userImage = document.querySelector("#user-image"); |
||||
this._userLabel = document.querySelector("#user-label"); |
||||
this._accountsList = document.querySelector("#users-list"); |
||||
this._accountsButton = document.querySelector("#users-button"); |
||||
this._defaultUser = null; |
||||
this._usersObject = null; |
||||
this._init(); |
||||
} |
||||
|
||||
getDefaultUserName() { |
||||
return this._defaultUser.username |
||||
return this._defaultUser.username; |
||||
} |
||||
|
||||
_setAccountDefault() { |
||||
var img = this._userImage.querySelector("img") |
||||
img.src = this._defaultUser.image |
||||
img.onerror = function() { |
||||
img.src = "" |
||||
} |
||||
this._userLabel.innerHTML = `<b>${this._defaultUser.display_name}</b>` |
||||
var img = this._userImage.querySelector("img"); |
||||
img.src = this._defaultUser.image; |
||||
img.onerror = function () { |
||||
img.src = ""; |
||||
}; |
||||
this._userLabel.innerHTML = `<b>${this._defaultUser.display_name}</b>`; |
||||
} |
||||
|
||||
_updateOnStartup() { |
||||
var username = this._localStorage.getItem('defaultUser') || this._usersObject[0].username |
||||
var display_name = this._localStorage.getItem('defaultUserDisplayName') || this._usersObject[0].display_name |
||||
var image = this._localStorage.getItem("defaultUserProfileImage") || this._usersObject[0].image |
||||
var username = |
||||
this._localStorage.getItem("defaultUser") || |
||||
this._usersObject[0].username; |
||||
var display_name = |
||||
this._localStorage.getItem("defaultUserDisplayName") || |
||||
this._usersObject[0].display_name; |
||||
var image = |
||||
this._localStorage.getItem("defaultUserProfileImage") || |
||||
this._usersObject[0].image; |
||||
this._defaultUser = { |
||||
username, |
||||
display_name, |
||||
image, |
||||
} |
||||
this._setAccountDefault() |
||||
}; |
||||
this._setAccountDefault(); |
||||
} |
||||
|
||||
_setGuestAccount() { |
||||
if (lightdm.has_guest_account) { |
||||
this._guestAccount = `guest-account-${Math.floor(Math.random() * 1000)}` |
||||
this._guestAccount = `guest-account-${Math.floor(Math.random() * 1000)}`; |
||||
this._usersObject.push({ |
||||
username: this._guestAccount, |
||||
display_name: "Guest", |
||||
image: "" |
||||
}) |
||||
image: "", |
||||
}); |
||||
} |
||||
} |
||||
|
||||
_setAccountList() { |
||||
var dropdown = this._accountsList.querySelector(".dropdown") |
||||
dropdown.innerHTML = "" |
||||
var dropdown = this._accountsList.querySelector(".dropdown"); |
||||
dropdown.innerHTML = ""; |
||||
for (let i = 0; i < this._usersObject.length; i++) { |
||||
var name = this._usersObject[i].display_name |
||||
var li = document.createElement("li") |
||||
var button = document.createElement("button") |
||||
button.innerHTML = name |
||||
var name = this._usersObject[i].display_name; |
||||
var li = document.createElement("li"); |
||||
var button = document.createElement("button"); |
||||
button.innerHTML = name; |
||||
button.addEventListener("click", () => { |
||||
this._updateDefaults(this._usersObject[i]) |
||||
this._setAccountDefault() |
||||
authenticate.startAuthentication() |
||||
}) |
||||
this._updateDefaults(this._usersObject[i]); |
||||
this._setAccountDefault(); |
||||
authenticate.startAuthentication(); |
||||
}); |
||||
|
||||
li.appendChild(button) |
||||
dropdown.appendChild(li) |
||||
li.appendChild(button); |
||||
dropdown.appendChild(li); |
||||
} |
||||
} |
||||
|
||||
_setKeydown() { |
||||
var dropdown = this._accountsList.querySelector(".dropdown") |
||||
dropdown.addEventListener("keydown", (ev) => { |
||||
if (ev.keyCode == 27) { |
||||
dropdown.classList.add("hide") |
||||
this._accountsButton.focus() |
||||
} |
||||
}) |
||||
} |
||||
_setKeydown() { |
||||
var dropdown = this._accountsList.querySelector(".dropdown"); |
||||
dropdown.addEventListener("keydown", (ev) => { |
||||
if (ev.keyCode == 27) { |
||||
dropdown.classList.add("hide"); |
||||
this._accountsButton.focus(); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
_setButton() { |
||||
var dropdown = this._accountsList.querySelector(".dropdown") |
||||
document.querySelector("#screen").addEventListener("click", (ev) => { |
||||
if (ev.target == this._accountsButton || ev.target.parentElement == this._accountsButton) { |
||||
dropdown.classList.toggle("hide") |
||||
} else |
||||
if (ev.target != this._accountsList && ev.target.closest(".dropdown") == null) { |
||||
dropdown.classList.add("hide") |
||||
} |
||||
}) |
||||
document.querySelector("#screen").addEventListener("focusin", (ev) => { |
||||
if (!dropdown.contains(document.activeElement) && document.activeElement != this._accountsButton) { |
||||
dropdown.classList.add("hide") |
||||
} |
||||
}) |
||||
var dropdown = this._accountsList.querySelector(".dropdown"); |
||||
document.querySelector("#screen").addEventListener("click", (ev) => { |
||||
if ( |
||||
ev.target == this._accountsButton || |
||||
ev.target.parentElement == this._accountsButton |
||||
) { |
||||
dropdown.classList.toggle("hide"); |
||||
} else if ( |
||||
ev.target != this._accountsList && |
||||
ev.target.closest(".dropdown") == null |
||||
) { |
||||
dropdown.classList.add("hide"); |
||||
} |
||||
}); |
||||
document.querySelector("#screen").addEventListener("focusin", (ev) => { |
||||
if ( |
||||
!dropdown.contains(document.activeElement) && |
||||
document.activeElement != this._accountsButton |
||||
) { |
||||
dropdown.classList.add("hide"); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
_updateDefaults(userObject) { |
||||
if (!userObject) return |
||||
this._defaultUser = userObject |
||||
if (!userObject) return; |
||||
this._defaultUser = userObject; |
||||
|
||||
this._localStorage.setItem("defaultUser", this._defaultUser.username) |
||||
this._localStorage.setItem("defaultUserDisplayName", this._defaultUser.display_name) |
||||
this._localStorage.setItem("defaultUserProfileImage", this._defaultUser.image) |
||||
this._localStorage.setItem("defaultUser", this._defaultUser.username); |
||||
this._localStorage.setItem( |
||||
"defaultUserDisplayName", |
||||
this._defaultUser.display_name |
||||
); |
||||
this._localStorage.setItem( |
||||
"defaultUserProfileImage", |
||||
this._defaultUser.image |
||||
); |
||||
} |
||||
|
||||
_init() { |
||||
this._usersObject = lightdm.users |
||||
this._updateOnStartup() |
||||
this._setAccountList() |
||||
this._setButton() |
||||
this._setKeydown() |
||||
this._usersObject = lightdm.users; |
||||
this._updateOnStartup(); |
||||
this._setAccountList(); |
||||
this._setButton(); |
||||
this._setKeydown(); |
||||
} |
||||
|
||||
} |
||||
|
||||
@ -1,80 +1,91 @@
|
||||
class Authenticate { |
||||
constructor() { |
||||
this._input = document.querySelector("#input-password") |
||||
this._form = document.querySelector("#pass-form > form") |
||||
this._password = "" |
||||
this._init() |
||||
this._input = document.querySelector("#input-password"); |
||||
this._form = document.querySelector("#pass-form > form"); |
||||
this._input_eye = document.querySelector("#pass-eye"); |
||||
this._password = ""; |
||||
this._init(); |
||||
} |
||||
|
||||
_setForm() { |
||||
this._form.addEventListener("submit", (e) => { |
||||
e.preventDefault() |
||||
var inputs = this._form.querySelectorAll('input') |
||||
var data = getArrayForm(inputs) |
||||
if (!data) return false |
||||
this._password = data.password |
||||
this._respond() |
||||
}) |
||||
e.preventDefault(); |
||||
var inputs = this._form.querySelectorAll("input"); |
||||
var data = getArrayForm(inputs); |
||||
if (!data) return false; |
||||
this._password = data.password; |
||||
this._respond(); |
||||
}); |
||||
} |
||||
_setAuthentication_done() { |
||||
window.authentication_done = () => { |
||||
if (lightdm.is_authenticated) { |
||||
this._authentication_done() |
||||
this._authentication_done(); |
||||
} else { |
||||
this._authentication_failed() |
||||
this._authentication_failed(); |
||||
} |
||||
} |
||||
}; |
||||
} |
||||
_setPasswordEye() { |
||||
this._input_eye.addEventListener("click", () => { |
||||
if (this._input.type === "password") { |
||||
this._input.type = "text"; |
||||
} else { |
||||
this._input.type = "password"; |
||||
} |
||||
}); |
||||
} |
||||
|
||||
_respond() { |
||||
var input = document.querySelector("#input-password") |
||||
let username = accounts.getDefaultUserName() |
||||
input.blur() |
||||
input.disabled = true |
||||
var input = document.querySelector("#input-password"); |
||||
let username = accounts.getDefaultUserName(); |
||||
input.blur(); |
||||
input.disabled = true; |
||||
if (username == accounts._guestAccount && lightdm.has_guest_account) { |
||||
lightdm.authenticate_as_guest() |
||||
lightdm.authenticate_as_guest(); |
||||
} else { |
||||
lightdm.respond(this._password) |
||||
lightdm.respond(this._password); |
||||
} |
||||
} |
||||
|
||||
startAuthentication() { |
||||
lightdm.cancel_authentication() |
||||
let username = accounts.getDefaultUserName() |
||||
if (username == accounts._guestAccount && lightdm.has_guest_account) return |
||||
lightdm.authenticate(String(accounts.getDefaultUserName())) |
||||
lightdm.cancel_authentication(); |
||||
let username = accounts.getDefaultUserName(); |
||||
if (username == accounts._guestAccount && lightdm.has_guest_account) return; |
||||
lightdm.authenticate(String(accounts.getDefaultUserName())); |
||||
} |
||||
|
||||
async _authentication_done() { |
||||
var form = document.querySelector("#login-form") |
||||
form.classList.add("success") |
||||
var form = document.querySelector("#login-form"); |
||||
form.classList.add("success"); |
||||
|
||||
await wait(500) |
||||
var defSession = String(sessions.getDefaultSession()) |
||||
var body = document.querySelector("body") |
||||
body.style.opacity = 0 |
||||
await wait(500); |
||||
var defSession = String(sessions.getDefaultSession()); |
||||
var body = document.querySelector("body"); |
||||
body.style.opacity = 0; |
||||
|
||||
await wait(1000) |
||||
console.log("Session started with", defSession) |
||||
lightdm.start_session(defSession) |
||||
await wait(1000); |
||||
console.log("Session started with", defSession); |
||||
lightdm.start_session(defSession); |
||||
} |
||||
|
||||
async _authentication_failed() { |
||||
this.startAuthentication() |
||||
var input = document.querySelector("#input-password") |
||||
document.querySelector("#login-form").classList.add("failed") |
||||
input.blur() |
||||
input.value = "" |
||||
input.disabled = false |
||||
this.startAuthentication(); |
||||
var input = document.querySelector("#input-password"); |
||||
document.querySelector("#login-form").classList.add("failed"); |
||||
input.blur(); |
||||
input.value = ""; |
||||
input.disabled = false; |
||||
|
||||
await wait(2000) |
||||
document.querySelector("#login-form").classList.remove("failed") |
||||
await wait(2000); |
||||
document.querySelector("#login-form").classList.remove("failed"); |
||||
} |
||||
|
||||
_init() { |
||||
this._setForm() |
||||
this._setAuthentication_done() |
||||
console.log("Start authentication") |
||||
this.startAuthentication() |
||||
this._setForm(); |
||||
this._setAuthentication_done(); |
||||
this._setPasswordEye(); |
||||
console.log("Start authentication"); |
||||
this.startAuthentication(); |
||||
} |
||||
} |
||||
|
||||
@ -1,38 +1,40 @@
|
||||
class Battery { |
||||
constructor() { |
||||
this._battery = document.querySelector("#battery-label") |
||||
this._info = {} |
||||
this._init() |
||||
this._battery = document.querySelector("#battery-label"); |
||||
this._info = {}; |
||||
this._init(); |
||||
} |
||||
|
||||
_updateData() { |
||||
this._info = lightdm.batteryData |
||||
var level = this._info.level |
||||
var state = this._info.state |
||||
var ac = this._info.ac_status |
||||
var icon = 0 |
||||
var charging = "" |
||||
var blevel = Math.floor(level / 10) * 10 |
||||
icon = `-${blevel}` |
||||
charging = ac == 1 ? "-charging" : "" |
||||
this._info = lightdm.batteryData; |
||||
var level = this._info.level; |
||||
var state = this._info.state; |
||||
var ac = this._info.ac_status; |
||||
var icon = 0; |
||||
var charging = ""; |
||||
var blevel = Math.floor(level / 10) * 10; |
||||
icon = `-${blevel}`; |
||||
charging = ac == 1 ? "-charging" : ""; |
||||
|
||||
if (blevel < 10) icon = "-outline" |
||||
if (level == 100 && ac == 0) {icon = ""} |
||||
if (blevel < 10) icon = "-outline"; |
||||
if (level == 100 && ac == 0) { |
||||
icon = ""; |
||||
} |
||||
if (level >= 0) { |
||||
this._battery.style.visibility = "visible" |
||||
this._battery.innerHTML = `<span class="mdi mdi-battery${charging}${icon}"></span> ${level}%` |
||||
this._battery.style.visibility = "visible"; |
||||
this._battery.innerHTML = `<span class="mdi mdi-battery${charging}${icon}"></span> ${level}%`; |
||||
} else { |
||||
this._battery.innerHTML = "" |
||||
this._battery.style.visibility = "hidden" |
||||
this._battery.innerHTML = ""; |
||||
this._battery.style.visibility = "hidden"; |
||||
} |
||||
} |
||||
|
||||
_setTimer() { |
||||
if (!lightdm.can_access_battery) return |
||||
this._updateData() |
||||
if (!lightdm.can_access_battery) return; |
||||
this._updateData(); |
||||
} |
||||
|
||||
_init() { |
||||
this._setTimer() |
||||
this._setTimer(); |
||||
} |
||||
} |
||||
|
||||
@ -1,29 +1,28 @@
|
||||
class Brightness { |
||||
constructor() { |
||||
this._brightness = document.querySelector("#brightness-label") |
||||
this._level = 0 |
||||
this._init() |
||||
this._brightness = document.querySelector("#brightness-label"); |
||||
this._level = 0; |
||||
this._init(); |
||||
} |
||||
|
||||
_updateData() { |
||||
this._level = lightdm.brightness |
||||
this._level = lightdm.brightness; |
||||
if (this._level >= 0) { |
||||
this._brightness.style.visibility = "visible" |
||||
var icon = this._level > 50 ? 7: this._level > 10 ? 6 : 5 |
||||
this._brightness.innerHTML = `<span class="mdi mdi-brightness-${icon}"></span> ${this._level}%` |
||||
this._brightness.style.visibility = "visible"; |
||||
var icon = this._level > 50 ? 7 : this._level > 10 ? 6 : 5; |
||||
this._brightness.innerHTML = `<span class="mdi mdi-brightness-${icon}"></span> ${this._level}%`; |
||||
} else { |
||||
this._brightness.innerHTML = "" |
||||
this._brightness.style.visibility = "hidden" |
||||
this._brightness.innerHTML = ""; |
||||
this._brightness.style.visibility = "hidden"; |
||||
} |
||||
} |
||||
|
||||
_setTimer() { |
||||
if (!lightdm.can_access_brightness) return |
||||
this._updateData() |
||||
|
||||
if (!lightdm.can_access_brightness) return; |
||||
this._updateData(); |
||||
} |
||||
|
||||
_init() { |
||||
this._setTimer() |
||||
this._setTimer(); |
||||
} |
||||
} |
||||
|
||||
@ -1,62 +1,60 @@
|
||||
|
||||
form = document.querySelector("#form > form") |
||||
form = document.querySelector("#form > form"); |
||||
|
||||
function getArrayForm(inputs) { |
||||
if (!inputs) return false |
||||
var data = {} |
||||
inputs.forEach((x) => { |
||||
data[x.name] = x.value |
||||
}) |
||||
return data |
||||
if (!inputs) return false; |
||||
var data = {}; |
||||
inputs.forEach((x) => { |
||||
data[x.name] = x.value; |
||||
}); |
||||
return data; |
||||
} |
||||
|
||||
async function wait(ms) { |
||||
return new Promise( resolve => { |
||||
return new Promise((resolve) => { |
||||
setTimeout(() => { |
||||
resolve() |
||||
}, ms) |
||||
}) |
||||
resolve(); |
||||
}, ms); |
||||
}); |
||||
} |
||||
|
||||
async function initGreeter() { |
||||
|
||||
if (greeter_config.greeter.debug_mode) { |
||||
//debug = new Debug()
|
||||
} |
||||
|
||||
lightdm.authentication_complete?.connect(() => authentication_done()) |
||||
lightdm.authentication_complete?.connect(() => authentication_done()); |
||||
|
||||
lightdm.brightness_update?.connect(() => brightness._updateData()); |
||||
|
||||
lightdm.brightness_update?.connect(() => brightness._updateData()) |
||||
lightdm.battery_update?.connect(() => battery._updateData()); |
||||
|
||||
lightdm.battery_update?.connect(() => battery._updateData()) |
||||
accounts = new Accounts(); |
||||
|
||||
accounts = new Accounts() |
||||
sessions = new Sessions(); |
||||
|
||||
sessions = new Sessions() |
||||
authenticate = new Authenticate(); |
||||
|
||||
authenticate = new Authenticate() |
||||
time_date = new TimeDate(); |
||||
|
||||
time_date = new TimeDate() |
||||
layouts = new Layouts(); |
||||
|
||||
layouts = new Layouts() |
||||
power = new Power(); |
||||
|
||||
power = new Power() |
||||
battery = new Battery(); |
||||
|
||||
battery = new Battery() |
||||
|
||||
brightness = new Brightness() |
||||
brightness = new Brightness(); |
||||
|
||||
var lock = lightdm.lock_hint |
||||
var lock = lightdm.lock_hint; |
||||
if (lock) { |
||||
document.querySelector("#lock-label").classList.remove("hide") |
||||
document.querySelector("#lock-label").classList.remove("hide"); |
||||
} |
||||
} |
||||
|
||||
const notGreeter = false |
||||
const notGreeter = false; |
||||
|
||||
if (window._ready_event === undefined) { |
||||
_ready_event = new Event("GreeterReady") |
||||
window.dispatchEvent(_ready_event) |
||||
_ready_event = new Event("GreeterReady"); |
||||
window.dispatchEvent(_ready_event); |
||||
} |
||||
|
||||
window.addEventListener("GreeterReady", initGreeter) |
||||
window.addEventListener("GreeterReady", initGreeter); |
||||
|
||||
@ -1,77 +1,85 @@
|
||||
class Layouts { |
||||
constructor() { |
||||
this._layoutList = document.querySelector("#layouts-list") |
||||
this._dropdown = document.querySelector("#layouts-dropdown") |
||||
this._button = document.querySelector("#layouts-button") |
||||
this._layouts = [] |
||||
constructor() { |
||||
this._layoutList = document.querySelector("#layouts-list"); |
||||
this._dropdown = document.querySelector("#layouts-dropdown"); |
||||
this._button = document.querySelector("#layouts-button"); |
||||
this._layouts = []; |
||||
|
||||
this.layout = {} |
||||
this.layout = {}; |
||||
|
||||
this._init() |
||||
} |
||||
this._init(); |
||||
} |
||||
|
||||
_setDefault() { |
||||
let name = this.layout.name |
||||
let description = this.layout.description |
||||
let short = this.layout.short_description |
||||
this._button.innerHTML = name.toUpperCase() + (short ? ` (${short})` : "") |
||||
//this._button.name = description
|
||||
} |
||||
_setDefault() { |
||||
let name = this.layout.name; |
||||
let description = this.layout.description; |
||||
let short = this.layout.short_description; |
||||
this._button.innerHTML = name.toUpperCase() + (short ? ` (${short})` : ""); |
||||
//this._button.name = description
|
||||
} |
||||
|
||||
_setLayoutList() { |
||||
let dropdown = this._dropdown |
||||
dropdown.innerHTML = "" |
||||
for (let i = 0; i < this._layouts.length; i++) { |
||||
let name = this._layouts[i].name |
||||
let description = this._layouts[i].description |
||||
let short = this._layouts[i].short_description |
||||
let li = document.createElement("li") |
||||
let button = document.createElement("button") |
||||
button.innerHTML = name + (short ? ` (${short})` : "") |
||||
button.name = description |
||||
button.addEventListener("click", () => { |
||||
this.layout = this._layouts[i] |
||||
this._setDefault() |
||||
lightdm.layout = this.layout |
||||
}) |
||||
li.appendChild(button) |
||||
dropdown.appendChild(li) |
||||
} |
||||
} |
||||
_setLayoutList() { |
||||
let dropdown = this._dropdown; |
||||
dropdown.innerHTML = ""; |
||||
for (let i = 0; i < this._layouts.length; i++) { |
||||
let name = this._layouts[i].name; |
||||
let description = this._layouts[i].description; |
||||
let short = this._layouts[i].short_description; |
||||
let li = document.createElement("li"); |
||||
let button = document.createElement("button"); |
||||
button.innerHTML = name + (short ? ` (${short})` : ""); |
||||
button.name = description; |
||||
button.addEventListener("click", () => { |
||||
this.layout = this._layouts[i]; |
||||
this._setDefault(); |
||||
lightdm.layout = this.layout; |
||||
}); |
||||
li.appendChild(button); |
||||
dropdown.appendChild(li); |
||||
} |
||||
} |
||||
|
||||
_setKeydown() { |
||||
let dropdown = this._dropdown |
||||
dropdown.addEventListener("keydown", (ev) => { |
||||
if (ev.keyCode == 27) { |
||||
dropdown.classList.add("hide") |
||||
this._button.focus() |
||||
} |
||||
}) |
||||
} |
||||
_setKeydown() { |
||||
let dropdown = this._dropdown; |
||||
dropdown.addEventListener("keydown", (ev) => { |
||||
if (ev.keyCode == 27) { |
||||
dropdown.classList.add("hide"); |
||||
this._button.focus(); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
_setButton() { |
||||
let dropdown = this._dropdown |
||||
document.querySelector("#screen").addEventListener("click", (ev) => { |
||||
if (ev.target == this._button || ev.target.parentElement == this._button) { |
||||
dropdown.classList.toggle("hide") |
||||
} else |
||||
if (ev.target != dropdown && ev.target.closest(".dropdown") == null) { |
||||
dropdown.classList.add("hide") |
||||
} |
||||
}) |
||||
document.querySelector("#screen").addEventListener("focusin", (ev) => { |
||||
if (!dropdown.contains(document.activeElement) && document.activeElement != this._button) { |
||||
dropdown.classList.add("hide") |
||||
} |
||||
}) |
||||
} |
||||
_setButton() { |
||||
let dropdown = this._dropdown; |
||||
document.querySelector("#screen").addEventListener("click", (ev) => { |
||||
if ( |
||||
ev.target == this._button || |
||||
ev.target.parentElement == this._button |
||||
) { |
||||
dropdown.classList.toggle("hide"); |
||||
} else if ( |
||||
ev.target != dropdown && |
||||
ev.target.closest(".dropdown") == null |
||||
) { |
||||
dropdown.classList.add("hide"); |
||||
} |
||||
}); |
||||
document.querySelector("#screen").addEventListener("focusin", (ev) => { |
||||
if ( |
||||
!dropdown.contains(document.activeElement) && |
||||
document.activeElement != this._button |
||||
) { |
||||
dropdown.classList.add("hide"); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
_init() { |
||||
this.layout = lightdm.layout |
||||
this._layouts = greeter_config.layouts |
||||
this._setDefault() |
||||
this._setLayoutList() |
||||
this._setButton() |
||||
this._setKeydown() |
||||
} |
||||
_init() { |
||||
this.layout = lightdm.layout; |
||||
this._layouts = greeter_config.layouts; |
||||
this._setDefault(); |
||||
this._setLayoutList(); |
||||
this._setButton(); |
||||
this._setKeydown(); |
||||
} |
||||
} |
||||
|
||||
@ -1,89 +1,89 @@
|
||||
class Power { |
||||
constructor() { |
||||
this._shutdown = document.querySelector("#shutdown-btn") |
||||
this._restart = document.querySelector("#restart-btn") |
||||
this._hibernate = document.querySelector("#hibernate-btn") |
||||
this._suspend = document.querySelector("#suspend-btn") |
||||
this._cover = document.querySelector("#cover") |
||||
this._covermsg = document.querySelector("#cover > #message") |
||||
this._init() |
||||
this._shutdown = document.querySelector("#shutdown-btn"); |
||||
this._restart = document.querySelector("#restart-btn"); |
||||
this._hibernate = document.querySelector("#hibernate-btn"); |
||||
this._suspend = document.querySelector("#suspend-btn"); |
||||
this._cover = document.querySelector("#cover"); |
||||
this._covermsg = document.querySelector("#cover > #message"); |
||||
this._init(); |
||||
} |
||||
|
||||
_show_message(text) { |
||||
this._covermsg.innerHTML = text |
||||
this._cover.classList.remove("hide") |
||||
this._covermsg.innerHTML = text; |
||||
this._cover.classList.remove("hide"); |
||||
wait(500).then(() => { |
||||
this._cover.focus() |
||||
}) |
||||
this._cover.focus(); |
||||
}); |
||||
} |
||||
|
||||
async _do_shutdown() { |
||||
this._show_message("Shutting down") |
||||
await wait(1000) |
||||
lightdm.shutdown() |
||||
this._show_message("Shutting down"); |
||||
await wait(1000); |
||||
lightdm.shutdown(); |
||||
} |
||||
async _do_restart() { |
||||
this._show_message("Restarting") |
||||
await wait(1000) |
||||
lightdm.restart() |
||||
this._show_message("Restarting"); |
||||
await wait(1000); |
||||
lightdm.restart(); |
||||
} |
||||
async _do_hibernate() { |
||||
this._show_message("Hibernating") |
||||
await wait(1000) |
||||
lightdm.hibernate() |
||||
this._show_message("Hibernating"); |
||||
await wait(1000); |
||||
lightdm.hibernate(); |
||||
} |
||||
async _do_suspend() { |
||||
this._show_message("Suspending") |
||||
await wait(1000) |
||||
lightdm.suspend() |
||||
this._show_message("Suspending"); |
||||
await wait(1000); |
||||
lightdm.suspend(); |
||||
} |
||||
|
||||
_setShutdown() { |
||||
if (!lightdm.can_shutdown) return |
||||
if (!lightdm.can_shutdown) return; |
||||
this._shutdown.addEventListener("click", () => { |
||||
this._do_shutdown() |
||||
}) |
||||
this._shutdown.classList.remove("hide") |
||||
this._do_shutdown(); |
||||
}); |
||||
this._shutdown.classList.remove("hide"); |
||||
} |
||||
_setRestart() { |
||||
if (!lightdm.can_restart) return |
||||
if (!lightdm.can_restart) return; |
||||
this._restart.addEventListener("click", () => { |
||||
this._do_restart() |
||||
}) |
||||
this._restart.classList.remove("hide") |
||||
this._do_restart(); |
||||
}); |
||||
this._restart.classList.remove("hide"); |
||||
} |
||||
_setHibernate() { |
||||
if (!lightdm.can_hibernate) return |
||||
if (!lightdm.can_hibernate) return; |
||||
this._hibernate.addEventListener("click", () => { |
||||
this._do_hibernate() |
||||
}) |
||||
this._hibernate.classList.remove("hide") |
||||
this._do_hibernate(); |
||||
}); |
||||
this._hibernate.classList.remove("hide"); |
||||
} |
||||
_setSuspend() { |
||||
if (!lightdm.can_suspend) return |
||||
if (!lightdm.can_suspend) return; |
||||
this._suspend.addEventListener("click", () => { |
||||
this._do_suspend() |
||||
}) |
||||
this._suspend.classList.remove("hide") |
||||
this._do_suspend(); |
||||
}); |
||||
this._suspend.classList.remove("hide"); |
||||
} |
||||
_setCover() { |
||||
this._cover.addEventListener("click", () => { |
||||
this._cover.classList.add("hide") |
||||
}) |
||||
this._cover.classList.add("hide"); |
||||
}); |
||||
this._cover.addEventListener("keydown", () => { |
||||
this._cover.classList.add("hide") |
||||
}) |
||||
this._cover.classList.add("hide"); |
||||
}); |
||||
} |
||||
|
||||
_setButtons() { |
||||
this._setShutdown() |
||||
this._setRestart() |
||||
this._setHibernate() |
||||
this._setSuspend() |
||||
this._setCover() |
||||
this._setShutdown(); |
||||
this._setRestart(); |
||||
this._setHibernate(); |
||||
this._setSuspend(); |
||||
this._setCover(); |
||||
} |
||||
|
||||
_init() { |
||||
this._setButtons() |
||||
this._setButtons(); |
||||
} |
||||
} |
||||
|
||||
@ -1,94 +1,106 @@
|
||||
class Sessions { |
||||
constructor() { |
||||
this._localStorage = window.localStorage |
||||
this._sessionLabel = document.querySelector("#session-label") |
||||
this._sessionList = document.querySelector("#sessions-list") |
||||
this._sessionsButton = document.querySelector("#sessions-button") |
||||
this._defaultSession = null |
||||
this._sessionsObject = null |
||||
this._init() |
||||
this._localStorage = window.localStorage; |
||||
this._sessionLabel = document.querySelector("#session-label"); |
||||
this._sessionList = document.querySelector("#sessions-list"); |
||||
this._sessionsButton = document.querySelector("#sessions-button"); |
||||
this._defaultSession = null; |
||||
this._sessionsObject = null; |
||||
this._init(); |
||||
} |
||||
|
||||
getDefaultSession() { |
||||
return this._defaultSession.key |
||||
return this._defaultSession.key; |
||||
} |
||||
|
||||
_setSessionDefault() { |
||||
this._sessionLabel.innerHTML = `<b>${this._defaultSession.name}</b>` |
||||
this._sessionLabel.innerHTML = `<b>${this._defaultSession.name}</b>`; |
||||
} |
||||
|
||||
_updateOnStartup() { |
||||
var session_key = this._localStorage.getItem("defaultSession") || this._sessionsObject[0].key || lightdm.default_session |
||||
var session_key = |
||||
this._localStorage.getItem("defaultSession") || |
||||
this._sessionsObject[0].key || |
||||
lightdm.default_session; |
||||
|
||||
var defaultSession = this._sessionsObject.find(el => el.key == session_key) |
||||
var defaultSession = this._sessionsObject.find( |
||||
(el) => el.key == session_key |
||||
); |
||||
|
||||
var session_name = defaultSession ? defaultSession.name : "awesome wm" |
||||
session_key = defaultSession ? defaultSession.key : "awesome" |
||||
var session_name = defaultSession ? defaultSession.name : "awesome wm"; |
||||
session_key = defaultSession ? defaultSession.key : "awesome"; |
||||
|
||||
this._defaultSession = { |
||||
key: session_key, |
||||
name: session_name |
||||
} |
||||
this._setSessionDefault() |
||||
name: session_name, |
||||
}; |
||||
this._setSessionDefault(); |
||||
} |
||||
|
||||
_setSessionList() { |
||||
var dropdown = this._sessionList.querySelector(".dropdown") |
||||
dropdown.innerHTML = "" |
||||
var dropdown = this._sessionList.querySelector(".dropdown"); |
||||
dropdown.innerHTML = ""; |
||||
for (let i = 0; i < this._sessionsObject.length; i++) { |
||||
var name = this._sessionsObject[i].name |
||||
var li = document.createElement("li") |
||||
var button = document.createElement("button") |
||||
button.innerHTML = name |
||||
var name = this._sessionsObject[i].name; |
||||
var li = document.createElement("li"); |
||||
var button = document.createElement("button"); |
||||
button.innerHTML = name; |
||||
button.addEventListener("click", () => { |
||||
this._updateDefaults(this._sessionsObject[i]) |
||||
this._setSessionDefault() |
||||
}) |
||||
this._updateDefaults(this._sessionsObject[i]); |
||||
this._setSessionDefault(); |
||||
}); |
||||
|
||||
li.appendChild(button) |
||||
dropdown.appendChild(li) |
||||
li.appendChild(button); |
||||
dropdown.appendChild(li); |
||||
} |
||||
} |
||||
|
||||
_setKeydown() { |
||||
var dropdown = this._sessionList.querySelector(".dropdown") |
||||
dropdown.addEventListener("keydown", (ev) => { |
||||
if (ev.keyCode == 27) { |
||||
dropdown.classList.add("hide") |
||||
this._sessionsButton.focus() |
||||
} |
||||
}) |
||||
} |
||||
_setKeydown() { |
||||
var dropdown = this._sessionList.querySelector(".dropdown"); |
||||
dropdown.addEventListener("keydown", (ev) => { |
||||
if (ev.keyCode == 27) { |
||||
dropdown.classList.add("hide"); |
||||
this._sessionsButton.focus(); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
_setButton() { |
||||
var dropdown = this._sessionList.querySelector(".dropdown") |
||||
document.querySelector("#screen").addEventListener("click", (ev) => { |
||||
if (ev.target == this._sessionsButton || ev.target.parentElement == this._sessionsButton) { |
||||
dropdown.classList.toggle("hide") |
||||
} else |
||||
if (ev.target != dropdown && ev.target.closest(".dropdown") == null) { |
||||
dropdown.classList.add("hide") |
||||
} |
||||
}) |
||||
document.querySelector("#screen").addEventListener("focusin", (ev) => { |
||||
if (!dropdown.contains(document.activeElement) && document.activeElement != this._sessionsButton) { |
||||
dropdown.classList.add("hide") |
||||
} |
||||
}) |
||||
|
||||
var dropdown = this._sessionList.querySelector(".dropdown"); |
||||
document.querySelector("#screen").addEventListener("click", (ev) => { |
||||
if ( |
||||
ev.target == this._sessionsButton || |
||||
ev.target.parentElement == this._sessionsButton |
||||
) { |
||||
dropdown.classList.toggle("hide"); |
||||
} else if ( |
||||
ev.target != dropdown && |
||||
ev.target.closest(".dropdown") == null |
||||
) { |
||||
dropdown.classList.add("hide"); |
||||
} |
||||
}); |
||||
document.querySelector("#screen").addEventListener("focusin", (ev) => { |
||||
if ( |
||||
!dropdown.contains(document.activeElement) && |
||||
document.activeElement != this._sessionsButton |
||||
) { |
||||
dropdown.classList.add("hide"); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
_updateDefaults(sessionObj) { |
||||
if (!sessionObj) return |
||||
this._defaultSession = sessionObj |
||||
this._localStorage.setItem("defaultSession", this._defaultSession.key) |
||||
if (!sessionObj) return; |
||||
this._defaultSession = sessionObj; |
||||
this._localStorage.setItem("defaultSession", this._defaultSession.key); |
||||
} |
||||
|
||||
_init() { |
||||
this._sessionsObject = lightdm.sessions |
||||
this._updateOnStartup() |
||||
this._setSessionList() |
||||
this._setButton() |
||||
this._setKeydown() |
||||
this._sessionsObject = lightdm.sessions; |
||||
this._updateOnStartup(); |
||||
this._setSessionList(); |
||||
this._setButton(); |
||||
this._setKeydown(); |
||||
} |
||||
} |
||||
|
||||
@ -1,26 +1,26 @@
|
||||
class TimeDate { |
||||
constructor() { |
||||
this._timeLabel = document.querySelector("#time-date #time-label") |
||||
this._dateLabel = document.querySelector("#time-date #date-label") |
||||
this._init() |
||||
} |
||||
constructor() { |
||||
this._timeLabel = document.querySelector("#time-date #time-label"); |
||||
this._dateLabel = document.querySelector("#time-date #date-label"); |
||||
this._init(); |
||||
} |
||||
|
||||
_updateTimeDate() { |
||||
let date = theme_utils.get_current_localized_date() |
||||
let time = theme_utils.get_current_localized_time() |
||||
_updateTimeDate() { |
||||
let date = theme_utils.get_current_localized_date(); |
||||
let time = theme_utils.get_current_localized_time(); |
||||
|
||||
this._dateLabel.innerText = date |
||||
this._timeLabel.innerText = time |
||||
} |
||||
this._dateLabel.innerText = date; |
||||
this._timeLabel.innerText = time; |
||||
} |
||||
|
||||
_setTimer() { |
||||
this._updateTimeDate() |
||||
setInterval(() => { |
||||
this._updateTimeDate() |
||||
}, 1000) |
||||
} |
||||
|
||||
_init() { |
||||
this._setTimer() |
||||
} |
||||
_setTimer() { |
||||
this._updateTimeDate(); |
||||
setInterval(() => { |
||||
this._updateTimeDate(); |
||||
}, 1000); |
||||
} |
||||
|
||||
_init() { |
||||
this._setTimer(); |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue