Compare commits

..

1 Commits

View File

@ -190,6 +190,8 @@ class panel {
function check(iterator = 0) { function check(iterator = 0) {
// Инициализация оболочки страницы "Игры"\r // Инициализация оболочки страницы "Игры"\r
console.log(window.location.pathname === '/settings', !(document.getElementById(id) instanceof HTMLElement));
if (window.location.pathname === '/settings' && !(document.getElementById(id) instanceof HTMLElement)) { if (window.location.pathname === '/settings' && !(document.getElementById(id) instanceof HTMLElement)) {
// Загружена страница "Игры" (или перезагружена)\r // Загружена страница "Игры" (или перезагружена)\r
@ -229,17 +231,14 @@ class panel {
panel.clean(); panel.clean();
panel.blocks.generate( panel.blocks.generate(
'test2', 'test',
'settings', panel.blocks.menu(),
panel.blocks.tab('Тест', function () { alert('хихи') }),
panel.blocks.fields.text('asdasdasd', 'lightning', 'Активировать', 'asdasdasdasd', 'Тестирование всплывающей подсказки', 'text', 0, 8, 'фффф', 'сюда писать') panel.blocks.fields.text('asdasdasd', 'lightning', 'Активировать', 'asdasdasdasd', 'Тестирование всплывающей подсказки', 'text', 0, 8, 'фффф', 'сюда писать')
// panel.blocks.fields.button('account_key', 'friend', 'Аккаунт', 'Анонимный режим ограничивает возможности', 'Аутентификация через аккаунт ВКонтакте', 'dropdown', 'Будет сгенерирован ключ доступа ВКонтакте', 'Подключить', function () {
// alert('ура!');
// })
); );
panel.blocks.generate( panel.blocks.generate(
'test', 'test2',
'menu',
panel.blocks.menu(), panel.blocks.menu(),
panel.blocks.tab('Тест', function () { alert('хихи') }), panel.blocks.tab('Тест', function () { alert('хихи') }),
panel.blocks.fields.text('asdasdasd', 'lightning', 'Активировать', 'asdasdasdasd', 'Тестирование всплывающей подсказки', 'text', 0, 8, 'фффф', 'сюда писать') panel.blocks.fields.text('asdasdasd', 'lightning', 'Активировать', 'asdasdasdasd', 'Тестирование всплывающей подсказки', 'text', 0, 8, 'фффф', 'сюда писать')
@ -267,52 +266,15 @@ class panel {
* *
* @return {integer} Количество ошибок * @return {integer} Количество ошибок
*/ */
generate(id, type = 'settings', ...functions) { generate(id, ...functions) {
if (typeof id === 'string' && typeof type === 'string' && typeof functions === 'object') { if (typeof id === 'string' && typeof functions === 'object') {
// Пройдена проверка входных параметров // Пройдена проверка входных параметров
// Инициализация названия идентификатора элемента // Инициализация названия идентификатора элемента
const name = 'block_' + id; const name = 'block_' + id;
// Проверка на существование (защита от дубликатов) // Поиск блока с данным идентификатором
if (document.getElementById(name) instanceof HTMLElement) return ++errors; if (document.getElementById(name) instanceof HTMLElement) return errors;
if (type === 'settings') {
// Блок: "настройки"
// Инициализация оболочки
let block = document.createElement('div');
block.id = name;
block.classList.add('page_block', 'clear_fix');
// Инициализация верхнего колонтинула
let header = document.createElement('h2');
header.classList.add('page_block_h2');
// Инициализация заголовка
let title = document.createElement('div');
title.classList.add('page_block_header');
title.innerText = id;
// Инициализация статуса
let status = document.createElement('div');
status.classList.add('page_block_saved');
status.innerText = 'Изменения сохранены';
// Инициализация оболочки содержимого
let main = document.createElement('div');
main.classList.add('settings_panel', 'clear_fix', 'settings_' + panel.id, 'settings_section_' + panel.id);
// Инициализация архитектуры
title.appendChild(status);
header.appendChild(title);
block.appendChild(header);
block.appendChild(main);
// Запись в документ
panel.body().appendChild(block);
} else if (type === 'menu') {
// Блок: "меню"
// Инициализация оболочки // Инициализация оболочки
const block = document.createElement('div'); const block = document.createElement('div');
@ -321,7 +283,6 @@ class panel {
// Запись в документ // Запись в документ
panel.body().appendChild(block); panel.body().appendChild(block);
} else return ++errors;
// Инициализация счётчика ошибок // Инициализация счётчика ошибок
let errors = 0; let errors = 0;
@ -330,7 +291,7 @@ class panel {
// Перебор переданных функций // Перебор переданных функций
// Вызов функции // Вызов функции
if (typeof entry === 'function' && !entry(id, type)) ++errors; if (typeof entry === 'function' && !entry(id)) ++errors;
}); });
return errors; return errors;
@ -347,12 +308,11 @@ class panel {
* Запись в группу (подразумевается выполнение в функции генерирующей группу) * Запись в группу (подразумевается выполнение в функции генерирующей группу)
* *
* @param {string} group Группа * @param {string} group Группа
* @param {string} type Тип группы
* *
* @return {bool} Статус выполнения * @return {bool} Статус выполнения
*/ */
return function (group, type = 'menu') { return function (group) {
if (typeof group === 'string' && type === 'menu') { if (typeof group === 'string') {
// Пройдена проверка входных параметров // Пройдена проверка входных параметров
// Инициализация блока куда надо записать заголовок // Инициализация блока куда надо записать заголовок
@ -402,12 +362,11 @@ class panel {
* Запись в группу (подразумевается выполнение в функции генерирующей группу) * Запись в группу (подразумевается выполнение в функции генерирующей группу)
* *
* @param {string} group Группа * @param {string} group Группа
* @param {string} type Тип группы
* *
* @return {bool} Статус выполнения * @return {bool} Статус выполнения
*/ */
return function (group, type = 'menu') { return function (group) {
if (typeof group === 'string' && type === 'menu' && typeof text === 'string' && typeof onclick === 'function') { if (typeof group === 'string' && typeof text === 'string' && typeof onclick === 'function') {
// Пройдена проверка входных параметров // Пройдена проверка входных параметров
// Инициализация блока куда надо записать заголовок // Инициализация блока куда надо записать заголовок
@ -451,54 +410,35 @@ class panel {
fields: { fields: {
macroses: { macroses: {
/** /**
* Шаблон для инициализации элемента-строки * Шаблон для инициализации элементов строки с полем
* *
* @param {string} group Группа * @param {string} group Группа
* @param {string} type Тип группы
* @param {string|null} icon Иконка * @param {string|null} icon Иконка
* @param {function} content Функция которая будет обрабатывать содержимое макроса * @param {function} content Функция которая будет обрабатывать содержимое макроса
*
* @return {mixed} Результат работы content()
*/ */
row(group, type = 'settings', icon, content) { row(group, icon, content) {
// Инициализация блока // Инициализация блока
const block = document.getElementById('block_' + group); const block = document.getElementById('block_' + group);
// Инициализация головного элемента оболочки для содержимого, и элемента со статусом // Инициализация оболочки для содержимого блока
let header, main, status; let body = block.getElementsByClassName('settings_panel')[0];
if (type === 'settings') { if (typeof body === 'undefined') {
// Блок: "настройки"
// Запись головного элемента блока
header = block.getElementsByClassName('page_block_header')[0];
// Запись оболочки для содержимого блока
main = block.getElementsByClassName('settings_panel clear_fix settings_' + panel.id + ' settings_section_' + panel.id)[0];
// Запись элемента со статусом
status = header.getElementsByClassName('page_block_saved')[0];
} else if (type === 'menu') {
// Блок: "меню"
// Запись головного элемента блока
header = block.getElementsByClassName('page_block_h2')[0];
// Запись оболочки для содержимого блока
main = block.getElementsByClassName('settings_panel')[0];
if (typeof main === 'undefined' && header instanceof HTMLElement) {
// Не найдена оболочка для содержимого блока // Не найдена оболочка для содержимого блока
// Инициализация верхнего колонтинула блока (подразумевается)
const head = block.getElementsByClassName('page_block_h2')[0];
if (head instanceof HTMLElement) {
// Инициализация элемента-оболочки для содержимого блока // Инициализация элемента-оболочки для содержимого блока
const element = document.createElement('div'); const element = document.createElement('div');
element.classList.add('settings_panel'); element.classList.add('settings_panel');
// Запись в документ // Запись в документ
header.insertAdjacentElement('afterend', element); head.insertAdjacentElement('afterend', element);
// Запись тела содержимого блока // Запись тела содержимого блока
main = element; body = element;
} }
} }
@ -511,7 +451,7 @@ class panel {
separator.classList.add('settings_separated_row_extra'); separator.classList.add('settings_separated_row_extra');
// Генерация содержимого строки // Генерация содержимого строки
return content(status, main, wrap, separator); return content(body, wrap, separator);
}, },
dropdown(active, rows) { dropdown(active, rows) {
@ -575,11 +515,10 @@ class panel {
* Запись в группу (подразумевается выполнение в функции генерирующей группу) * Запись в группу (подразумевается выполнение в функции генерирующей группу)
* *
* @param {string} group Группа * @param {string} group Группа
* @param {string} type Тип группы
* *
* @return {bool} Статус выполнения * @return {bool} Статус выполнения
*/ */
return function (group, type = 'settings') { return function (group) {
if (typeof id === 'string' && typeof group === 'string') { if (typeof id === 'string' && typeof group === 'string') {
// Пройдена проверка входных параметров // Пройдена проверка входных параметров
@ -719,7 +658,7 @@ class panel {
* @param {string|null} name Название * @param {string|null} name Название
* @param {string|null} description Описание * @param {string|null} description Описание
* @param {string|null} hint Всплывающая подсказка (иконка с вопросительным знаком возле верхнего колонтинула) * @param {string|null} hint Всплывающая подсказка (иконка с вопросительным знаком возле верхнего колонтинула)
* @param {string|null} field Тип поля для ввода (HTML-категории: text, password, email, number) * @param {string|null} type Тип поля для ввода (HTML-категории: text, password, email, number)
* @param {number|null} min Ограничение по минимальному количеству символов * @param {number|null} min Ограничение по минимальному количеству символов
* @param {number|null} max Ограничение по максимальному количеству символов * @param {number|null} max Ограничение по максимальному количеству символов
* @param {string|null} title Текст выводимый во всплывающем окне при наведении курсора * @param {string|null} title Текст выводимый во всплывающем окне при наведении курсора
@ -735,22 +674,21 @@ class panel {
* *
* @todo 1. Добавить проверку на существование нижнего колонтинула и записывать перед ним, вместо конца блока * @todo 1. Добавить проверку на существование нижнего колонтинула и записывать перед ним, вместо конца блока
*/ */
text(id, icon, name, description, hint, field = 'text', min = 0, max = 100, title, placeholder, pattern, readonly, spellcheck, options, onchange, oninput) { text(id, icon, name, description, hint, type = 'text', min = 0, max = 100, title, placeholder, pattern, readonly, spellcheck, options, onchange, oninput) {
/** /**
* Запись в группу (подразумевается выполнение в функции генерирующей группу) * Запись в группу (подразумевается выполнение в функции генерирующей группу)
* *
* @param {string} group Группа * @param {string} group Группа
* @param {string} type Тип группы
* *
* @return {bool} Статус выполнения * @return {bool} Статус выполнения
*/ */
return function (group, type = 'settings') { return function (group) {
if (typeof id === 'string' && typeof icon === 'string' && typeof group === 'string') { if (typeof id === 'string' && typeof icon === 'string' && typeof group === 'string') {
// Пройдена проверка входных параметров // Пройдена проверка входных параметров
return panel.blocks.fields.macroses.row(group, type, icon, return panel.blocks.fields.macroses.row(group, icon,
function (status, body, wrap, separator) { function (body, wrap, separator) {
if (type === 'settings') wrap.addEventListener("input", fn => { wrap.addEventListener("input", fn => {
// Инициализация поля ввода // Инициализация поля ввода
const input = wrap.getElementsByTagName('input')[0]; const input = wrap.getElementsByTagName('input')[0];
@ -777,9 +715,9 @@ class panel {
// Инициализация элемента для ввода текста // Инициализация элемента для ввода текста
const input = document.createElement('input'); const input = document.createElement('input');
input.classList.add('dark'); input.classList.add('dark');
input.setAttribute('type', field); input.setAttribute('type', type);
input.setAttribute(field === 'number' ? 'min' : 'minlength', min); input.setAttribute(type === 'number' ? 'min' : 'minlength', min);
input.setAttribute(field === 'number' ? 'max' : 'maxlength', max); input.setAttribute(type === 'number' ? 'max' : 'maxlength', max);
if (typeof title === 'string') input.setAttribute('title', title); if (typeof title === 'string') input.setAttribute('title', title);
if (typeof placeholder === 'string') input.setAttribute('placeholder', placeholder); if (typeof placeholder === 'string') input.setAttribute('placeholder', placeholder);
if (typeof pattern === 'string') input.setAttribute('pattern', pattern); if (typeof pattern === 'string') input.setAttribute('pattern', pattern);
@ -890,7 +828,7 @@ class panel {
* *
* @todo 1. Добавить проверку на существование нижнего колонтинула и записывать перед ним, вместо конца блока * @todo 1. Добавить проверку на существование нижнего колонтинула и записывать перед ним, вместо конца блока
*/ */
button(id, icon, name, description, hint, type = 'dropdown', title, value = 'Выбрать', onclick, onchange, oninput) { button(id, icon, name, description, hint, type = 'dropdown', value = 'Выбрать', onclick, onchange, oninput) {
/** /**
* Запись в группу (подразумевается выполнение в функции генерирующей группу) * Запись в группу (подразумевается выполнение в функции генерирующей группу)
* *
@ -943,6 +881,8 @@ class panel {
// Инициализация элемента-списка // Инициализация элемента-списка
const dropdown = panel.blocks.fields.macroses.dropdown(); const dropdown = panel.blocks.fields.macroses.dropdown();
// Инициализация архитектуры // Инициализация архитектуры
separator.appendChild(button); separator.appendChild(button);
} else if (type === 'popup') { } else if (type === 'popup') {