Добавлена возможность создания блока settings и menu (теперь надо выбирать)

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') {