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