transit from nadrez, added panel
This commit is contained in:
87
firefox/settings/css/settings.css
Normal file
87
firefox/settings/css/settings.css
Normal file
@@ -0,0 +1,87 @@
|
||||
::selection {
|
||||
background: #808080;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: #808080;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 40px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #1c1c1c;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: -10px;
|
||||
margin-bottom: 10px;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.setting:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.setting {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.setting>label {
|
||||
margin-bottom: 4px;
|
||||
display: block;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
|
||||
.setting>input:is([type="text"], [type="number"]) {
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #d0d0d0;
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.setting>input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.setting>input[type="checkbox"]+div.checkbox[type="button"] {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #282828;
|
||||
}
|
||||
|
||||
.setting>input[type="checkbox"]+div.checkbox[type="button"]:before {
|
||||
content: 'Отключено';
|
||||
color: #d0d0d0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.setting>input[type="checkbox"]+div.checkbox[type="button"]:hover {
|
||||
background-color: #2b2b2b;
|
||||
}
|
||||
|
||||
.setting>input[type="checkbox"]+div.checkbox[type="button"]:active {
|
||||
background-color: #252525;
|
||||
}
|
||||
|
||||
.setting>input[type="checkbox"]:checked+div.checkbox[type="button"] {
|
||||
background-color: #3c3c3c;
|
||||
}
|
||||
|
||||
.setting>input[type="checkbox"]:checked+div.checkbox[type="button"]:before {
|
||||
content: 'Включено'
|
||||
}
|
||||
|
||||
.setting>input[type="checkbox"]:checked+div.checkbox[type="button"]:hover {
|
||||
background-color: #3f3f3f;
|
||||
}
|
||||
|
||||
.setting>input[type="checkbox"]:checked+div.checkbox[type="button"]:active {
|
||||
background-color: #3a3a3a;
|
||||
}
|
16
firefox/settings/index.html
Normal file
16
firefox/settings/index.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="css/settings.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Настройки</h1>
|
||||
<script src="../settings.js" defer></script>
|
||||
<script src="js/generator.js" defer></script>
|
||||
</body>
|
||||
|
||||
</html>
|
161
firefox/settings/js/generator.js
Normal file
161
firefox/settings/js/generator.js
Normal file
@@ -0,0 +1,161 @@
|
||||
'use strict'
|
||||
|
||||
/**
|
||||
* Генерация HTML-элемента настройки с текстовым полем
|
||||
*
|
||||
* @param {string} id Настройка
|
||||
* @param {string|null} name Ярлык настройки (понятный пользователю)
|
||||
*
|
||||
* @return {bool} Статус выполнения
|
||||
*/
|
||||
function text(id, name) {
|
||||
if (typeof id === 'string') {
|
||||
settings.read(id).then(result => {
|
||||
// Инициализация оболочки поля ввода
|
||||
let wrap = document.createElement('div');
|
||||
wrap.classList.add('setting');
|
||||
|
||||
// Инициализация ярлыка поля ввода
|
||||
let label = document.createElement('label');
|
||||
label.innerText = name !== undefined && typeof name === 'string' ? name : id;
|
||||
|
||||
// Инициализация поля ввода
|
||||
let text = document.createElement('input');
|
||||
text.setAttribute('id', id);
|
||||
text.setAttribute('type', 'text');
|
||||
text.value = result[id] ?? '';
|
||||
|
||||
// Инициализация архитектуры
|
||||
wrap.appendChild(label);
|
||||
wrap.appendChild(text);
|
||||
|
||||
// Запись в документ
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
// Инициализация созданного элемента поля ввода
|
||||
text = document.getElementById(id);
|
||||
|
||||
// Инициализация события
|
||||
text.addEventListener("change", fn => { settings.write(id, text.value); });
|
||||
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Генерация HTML-элемента настройки с циферным полем
|
||||
*
|
||||
* @param {string} id Настройка
|
||||
* @param {string|null} name Ярлык настройки (понятный пользователю)
|
||||
*
|
||||
* @return {bool} Статус выполнения
|
||||
*/
|
||||
function number(id, name, min = 0, max = 100) {
|
||||
if (typeof id === 'string') {
|
||||
settings.read(id).then(result => {
|
||||
// Инициализация оболочки циферного поля ввода
|
||||
let wrap = document.createElement('div');
|
||||
wrap.classList.add('setting');
|
||||
|
||||
// Инициализация ярлыка циферного поля ввода
|
||||
let label = document.createElement('label');
|
||||
label.innerText = name !== undefined && typeof name === 'string' ? name : id;
|
||||
|
||||
// Инициализация поля циферного ввода
|
||||
let number = document.createElement('input');
|
||||
number.setAttribute('id', id);
|
||||
number.setAttribute('type', 'number');
|
||||
number.min = min;
|
||||
number.max = max;
|
||||
number.value = result[id] ?? '';
|
||||
|
||||
// Инициализация архитектуры
|
||||
wrap.appendChild(label);
|
||||
wrap.appendChild(number);
|
||||
|
||||
// Запись в документ
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
// Инициализация созданного элемента циферного поля ввода
|
||||
number = document.getElementById(id);
|
||||
|
||||
// Инициализация события
|
||||
number.addEventListener("change", fn => { settings.write(id, number.value); });
|
||||
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Генерация HTML-элемента настройки с кнопкой активации
|
||||
*
|
||||
* @param {string} id Настройка
|
||||
* @param {string|null} name Ярлык настройки (понятный пользователю)
|
||||
*
|
||||
* @return {bool} Статус выполнения
|
||||
*/
|
||||
function checkbox(id, name) {
|
||||
if (typeof id === 'string') {
|
||||
settings.read(id).then(result => {
|
||||
// Инициализация оболочки кнопки активации
|
||||
let wrap = document.createElement('div');
|
||||
wrap.classList.add('setting');
|
||||
|
||||
// Инициализация ярлыка кнопки активации
|
||||
let label = document.createElement('label');
|
||||
label.innerText = name !== undefined && typeof name === 'string' ? name : id;
|
||||
|
||||
// Инициализация кнопки активации (настоящая)
|
||||
let checkbox = document.createElement('input');
|
||||
checkbox.setAttribute('id', id);
|
||||
checkbox.setAttribute('type', 'checkbox');
|
||||
checkbox.checked = result[id] === true || result[id] === 1 || result[id] === '1' ? true : false;
|
||||
|
||||
// Инициализация кнопки активации (видимая)
|
||||
let div = document.createElement('div');
|
||||
div.setAttribute('id', id + '_button');
|
||||
div.classList.add('checkbox');
|
||||
div.setAttribute('type', 'button');
|
||||
|
||||
// Инициализация архитектуры
|
||||
wrap.appendChild(label);
|
||||
wrap.appendChild(checkbox);
|
||||
wrap.appendChild(div);
|
||||
|
||||
// Запись в документ
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
// Инициализация созданного элемента кнопки активации
|
||||
checkbox = document.getElementById(id);
|
||||
|
||||
// Инициализация событий
|
||||
checkbox.addEventListener("change", fn => { settings.write(id, checkbox.checked); });
|
||||
document.getElementById(id + '_button').addEventListener("click", fn => { checkbox.checked = checkbox.checked ? false : true; });
|
||||
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Инициализация
|
||||
*/
|
||||
function init() {
|
||||
checkbox('debug', 'Режим отладки');
|
||||
checkbox('autonom', 'Режим автономный');
|
||||
number('server_connect_repeats', 'Количество попыток соединения');
|
||||
checkbox('instructions', 'Инструкции');
|
||||
checkbox('instruction_settings', 'Инструкция по доступу к настройкам');
|
||||
checkbox('instruction_killer', 'Инструкция по доступу к удалению сообщений');
|
||||
checkbox('instruction_visor', 'Инструкция по доступу к просмотру удалённых сообщений');
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", init);
|
Reference in New Issue
Block a user