Update pages.html

pages.html

@@ -1191,215 +1191,127 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
 
 
 
-<style>
-  /* Ваши стили */
-  #grabbed-info {
-    position: fixed;
-    background-color: #fff;
-    border: 1px solid #ccc;
-    padding: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    z-index: 1000;
-  }
-</style>
-
-  
-<div id="grabbed-info"></div>
-
-
-<script src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/per.js"></script>
-
-
-
-  <script type="text/javascript">
-    var editor = grapesjs.init({
-      container: '#gjs',
-      fromElement: true,
-      height: "100vh",
-      storageManager: {
-        type: 'local',
-        autosave: true,
-        autoload: true,
-        stepsBeforeSave: 1,
+<script type="text/javascript">
+  var editor = grapesjs.init({
+    container: '#gjs',
+    fromElement: true,
+    height: "100vh",
+    storageManager: {
+      type: 'local',
+      autosave: true,
+      autoload: true,
+      stepsBeforeSave: 1,
+    },
+    plugins: [
+      "gjs-blocks-basic",
+      "grapesjs-component-countdown",
+      "grapesjs-component-code-editor",
+      "grapesjs-templates",
+      "grapesjs-rte-extensions",
+      "grapesjs-user-blocks",
+      "grapesjs-tabs", // Плагин вкладок
+      "grapesjs-tooltip", // Плагин подсказок
+      "grapesjs-script-editor", // Плагин редактора скриптов
+      "grapesjs-rulers", // Добавляем плагин линеек
+      "grapesjs-tui-image-editor" // Добавляем плагин редактора изображений
+    ],
+    pluginsOpts: {
+      "gjs-blocks-basic": {
+        blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'quote', 'social', 'image', 'video'],
+        blocksBasicOpts: {
+          flexGrid: true,
+          stylePrefix: 'gjs-',
+          columns: 12,
+          rowHeight: 75,
+          addBasicStyle: true
+        }
       },
-      plugins: [
-        "gjs-blocks-basic",
-        "grapesjs-component-countdown",
-        "grapesjs-component-code-editor",
-        "grapesjs-templates",
-        "grapesjs-rte-extensions",
-        "grapesjs-user-blocks",
-        "grapesjs-tabs", // Плагин вкладок
-        "grapesjs-tooltip", // Плагин подсказок
-        "grapesjs-script-editor", // Плагин редактора скриптов
-        "grapesjs-rulers", // Добавляем плагин линеек
-        "grapesjs-tui-image-editor" // Добавляем плагин редактора изображений
-      ],
-      pluginsOpts: {
-        "gjs-blocks-basic": {
-          blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'quote', 'social', 'image', 'video'],
-          blocksBasicOpts: {
-            flexGrid: true,
-            stylePrefix: 'gjs-',
-            columns: 12,
-            rowHeight: 75,
-            addBasicStyle: true
-          }
+      "grapesjs-component-code-editor": {
+        panelId: 'views-container',
+        appendTo: '.gjs-pn-views-container',
+        openState: { pn: '35%', cv: '65%' },
+        closedState: { pn: '15%', cv: '85%' },
+        codeViewOptions: {},
+        preserveWidth: false,
+        clearData: false,
+        editJs: true,
+        cleanCssBtn: true,
+        htmlBtnText: 'Применить',
+        cssBtnText: 'Применить',
+        cleanCssBtnText: 'Удалить'
+      },
+      "grapesjs-templates": {
+        // Настройки для grapesjs-templates
+      },
+      "grapesjs-rte-extensions": {
+        base: {
+          bold: true,
+          italic: true,
+          underline: true,
+          strikethrough: true,
+          link: true,
         },
-        "grapesjs-component-code-editor": {
-          panelId: 'views-container',
-          appendTo: '.gjs-pn-views-container',
-          openState: { pn: '35%', cv: '65%' },
-          closedState: { pn: '15%', cv: '85%' },
-          codeViewOptions: {},
-          preserveWidth: false,
-          clearData: false,
-          editJs: true,
-          cleanCssBtn: true,
-          htmlBtnText: 'Применить',
-          cssBtnText: 'Применить',
-          cleanCssBtnText: 'Удалить'
+        fonts: {
+          fontColor: true,
+          hilite: true,
         },
-        "grapesjs-templates": {
-          // Настройки для grapesjs-templates
+        format: {
+          heading1: true,
+          heading2: true,
+          heading3: true,
+          paragraph: true,
+          clearFormatting: true,
         },
-        "grapesjs-rte-extensions": {
-          base: {
-            bold: true,
-            italic: true,
-            underline: true,
-            strikethrough: true,
-            link: true,
-          },
-          fonts: {
-            fontColor: true,
-            hilite: true,
-          },
-          format: {
-            heading1: true,
-            heading2: true,
-            heading3: true,
-            paragraph: true,
-            clearFormatting: true,
+        align: true,
+        darkColorPicker: true,
+        maxWidth: '600px'
+      },
+      "grapesjs-user-blocks": {
+        // Настройки для grapesjs-user-blocks
+      },
+      "grapesjs-tabs": {
+        // Настройки для grapesjs-tabs
+      },
+      "grapesjs-tooltip": {
+        // Настройки для grapesjs-tooltip
+      },
+      "grapesjs-script-editor": {
+        // Настройки для grapesjs-script-editor
+        starter: 'let el = this',
+        toolbarIcon: '<i class="fa fa-puzzle-piece"></i>',
+        scriptTypesSupport: ['default', 'wrapper', 'text', 'textnode', 'image', 'video', 'svg'],
+        toolbarBtnCustomScript: {},
+        onRun: () => console.log('valid syntax'),
+        onError: err => console.log('error:', err),
+        modalTitle: 'Script',
+        codeViewOptions: {},
+        buttonLabel: 'save',
+        commandAttachScript: {}
+      },
+      "grapesjs-rulers": {
+        // Настройки для grapesjs-rulers
+        dragMode: 'translate',
+        rulerHeight: 15,
+        canvasZoom: 94,
+        rulerOpts: {}
+      },
+      "grapesjs-tui-image-editor": {
+        config: {
+          includeUI: {
+            initMenu: 'filter',
           },
-          align: true,
-          darkColorPicker: true,
-          maxWidth: '600px'
-        },
-        "grapesjs-user-blocks": {
-          // Настройки для grapesjs-user-blocks
-        },
-        "grapesjs-tabs": {
-          // Настройки для grapesjs-tabs
-        },
-        "grapesjs-tooltip": {
-          // Настройки для grapesjs-tooltip
-        },
-        "grapesjs-script-editor": {
-          // Настройки для grapesjs-script-editor
-          starter: 'let el = this',
-          toolbarIcon: '<i class="fa fa-puzzle-piece"></i>',
-          scriptTypesSupport: ['default', 'wrapper', 'text', 'textnode', 'image', 'video', 'svg'],
-          toolbarBtnCustomScript: {},
-          onRun: () => console.log('valid syntax'),
-          onError: err => console.log('error:', err),
-          modalTitle: 'Script',
-          codeViewOptions: {},
-          buttonLabel: 'save',
-          commandAttachScript: {}
         },
-        "grapesjs-rulers": {
-          // Настройки для grapesjs-rulers
-          dragMode: 'translate',
-          rulerHeight: 15,
-          canvasZoom: 94,
-          rulerOpts: {}
-        },
-        "grapesjs-tui-image-editor": {
-          config: {
-            includeUI: {
-              initMenu: 'filter',
-            },
-          },
-          labelImageEditor: 'Image Editor',
-          labelApply: 'Apply',
-          height: '650px',
-          width: '100%',
-          hideHeader: true,
-          addToAssets: true,
-          upload: false
-        }
+        labelImageEditor: 'Image Editor',
+        labelApply: 'Apply',
+        height: '650px',
+        width: '100%',
+        hideHeader: true,
+        addToAssets: true,
+        upload: false
       }
-    });
-
-    // Функция для обновления информации о положении элемента
-    function updatePositionInfo(component) {
-      const positionInfo = document.getElementById('position-info');
-      if (component) {
-        const { x, y, width, height } = component.getBoundingRect();
-        const { width: canvasWidth, height: canvasHeight } = editor.Canvas.getCanvasElement().getBoundingClientRect();
-        const xPercent = (x / canvasWidth * 100).toFixed(2);
-        const yPercent = (y / canvasHeight * 100).toFixed(2);
-        positionInfo.textContent = `Position: X: ${x}px (${xPercent}%), Y: ${y}px (${yPercent}%), Width: ${width}px, Height: ${height}px`;
-      } else {
-        positionInfo.textContent = 'Position: ';
-      }
-    }
-
-    // Подписываемся на события перетаскивания и выбора элемента
-    editor.on('component:drag:start', (component) => {
-      updatePositionInfo(component);
-    });
-
-    editor.on('component:drag', (component) => {
-      updatePositionInfo(component);
-    });
-
-    editor.on('component:drag:stop', (component) => {
-      updatePositionInfo(component);
-    });
-
-    editor.on('component:selected', (component) => {
-      updatePositionInfo(component);
-    });
-
-    // Добавляем обработчики событий для перемещения элементов
-    let isDragging = false;
-    let offsetX = 0;
-    let offsetY = 0;
-    let selectedComponent = null;
-
-    function startDrag(e, component) {
-      isDragging = true;
-      selectedComponent = component;
-      const rect = component.getEl().getBoundingClientRect();
-      offsetX = e.clientX - rect.left;
-      offsetY = e.clientY - rect.top;
-      document.addEventListener('mousemove', drag);
-      document.addEventListener('mouseup', stopDrag);
-    }
-
-    function drag(e) {
-      if (!isDragging || !selectedComponent) return;
-      const newX = e.clientX - offsetX;
-      const newY = e.clientY - offsetY;
-      selectedComponent.set('position', { x: newX, y: newY });
     }
-
-    function stopDrag() {
-      isDragging = false;
-      selectedComponent = null;
-      document.removeEventListener('mousemove', drag);
-      document.removeEventListener('mouseup', stopDrag);
-    }
-
-    editor.on('component:selected', (component) => {
-      component.getEl().addEventListener('mousedown', (e) => startDrag(e, component));
-    });
-  </script>
-
-
-
+  });
+</script>
 <script>
 
   // Добавляем кнопку линейки в верхнюю панель инструментов с использованием SVG-иконки