Update pages.html

pages.html

@@ -359,7 +359,7 @@ const editor = grapesjs.init({
 editor.Components.addType('menu-list-set', {
   model: {
     defaults: {
-      content: '<div id="dropdown-settings"></div>',
+      content: '<div id="dropdown-settings"><ul id="menu-list"></ul></div>',
       script: function(props) {
         const loadScriptToBody = (src, callback) => {
           const script = document.createElement('script');
@@ -368,20 +368,73 @@ editor.Components.addType('menu-list-set', {
           document.body.appendChild(script);
         };
 
+        // Проверка на наличие переданных данных
+        if (!props.menu_list || !props.library) {
+          console.error('menu_list or library is not provided');
+          return;
+        }
+
+        // Загрузка библиотеки в зависимости от выбранной опции
         const library = props.library;
         let dropdownjsSrc;
+
         if (library === '1') {
           dropdownjsSrc = 'https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/menu_gen.js';
           loadScriptToBody(dropdownjsSrc, () => {
             console.log('DropdownJS script loaded!');
 
-            // Убедиться, что меню инициализируется только после загрузки данных
+            // Проверяем, доступен ли объект меню и вызываем инициализацию
             if (window.menu_list && window.menu_list.menu) {
               initializeMenu(window.menu_list);
             } else {
-              console.error('menu_list is not available');
+              console.error('menu_list is not available or not in the correct format');
+            }
+          });
+        } else {
+          console.error('No valid library selected');
+        }
+
+        // Функция инициализации меню
+        function initializeMenu(menu_list) {
+          const menuElement = document.getElementById('menu-list');
+          if (!menuElement) {
+            console.error('Menu element not found');
+            return;
+          }
+
+          menuElement.innerHTML = ''; // Очищаем текущий список
+
+          menu_list.menu.forEach(item => {
+            const li = document.createElement('li');
+            li.innerHTML = `<button data-link="${item.link}">${item.title}</button>`;
+            if (item.submenu) {
+              li.classList.add('dropdown');
+              const submenu = createSubmenu(item.submenu);
+              li.appendChild(submenu);
             }
+            menuElement.appendChild(li);
+          });
+
+          // Обработка кликов на кнопках
+          document.querySelectorAll('button').forEach(button => {
+            button.addEventListener('click', function() {
+              const link = this.getAttribute('data-link');
+              if (link) {
+                window.location.href = link;
+              }
+            });
           });
+
+          function createSubmenu(submenuItems) {
+            const ul = document.createElement('ul');
+            ul.classList.add('dropdown-content');
+            submenuItems.forEach(subItem => {
+              const li = document.createElement('li');
+              li.innerHTML = `<button data-link="${subItem.link}">${subItem.title}</button>`;
+              ul.appendChild(li);
+            });
+            return ul;
+          }
         }
       },
       'script-props': ['menu_list', 'library'],
@@ -408,6 +461,10 @@ editor.Components.addType('menu-list-set', {
   }
 });
 
+editor.Blocks.add('dropdown-settings-block', {
+  label: 'Настройка выпадающего списка',
+  content: { type: 'menu-list-set' },
+});
 </script>
 
 
@@ -426,6 +483,7 @@ editor.Components.addType('menu-list-set', {
 
 
 
+