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