Update pages.html

pages.html

@@ -463,93 +463,200 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
 </script>
 
 <script>
-// Создаем новый тип компонента для формы
-editor.Components.addType('custom-form', {
+// Создаем блок формы
+editor.Blocks.add('custom-form', {
+  label: 'Custom Form',
+  content: `
+    <div class="form-container container">
+      <form id="contactForm">
+        <h4>КЛУБ-ПРАКТИК. 255 техник для психолога - 2024</h4>
+        <div class="form-group name-field"></div>
+        <div class="form-group email-field"></div>
+        <div class="form-group phone-field"></div>
+        <div class="form-group options-field"></div>
+        <div class="form-check newsletter-field"></div>
+        <div class="form-group privacy-policy-link"></div>
+        <div class="form-group submit-button"></div>
+      </form>
+    </div>
+  `,
+});
+
+// Добавляем возможность настройки каждого элемента формы
+editor.DomComponents.addType('form-input', {
+  model: {
+    defaults: {
+      script: function() {
+        console.log('Form input initialized with placeholder: ', this.getAttribute('placeholder'));
+      },
+      traits: [
+        {
+          type: 'text',
+          name: 'id',
+          label: 'Id',
+          changeProp: true,
+        },
+        {
+          type: 'text',
+          name: 'placeholder',
+          label: 'Placeholder',
+          changeProp: true,
+        },
+        {
+          type: 'checkbox',
+          name: 'required',
+          label: 'Required',
+          changeProp: true,
+        },
+      ],
+    },
+    'script-props': ['id', 'placeholder', 'required'],
+  },
+});
+
+editor.DomComponents.addType('form-select', {
+  model: {
+    defaults: {
+      script: function() {
+        console.log('Form select initialized with options: ', this.options);
+      },
+      traits: [
+        {
+          type: 'text',
+          name: 'id',
+          label: 'Id',
+          changeProp: true,
+        },
+        {
+          type: 'text',
+          name: 'options',
+          label: 'Options',
+          changeProp: true,
+        },
+        {
+          type: 'checkbox',
+          name: 'required',
+          label: 'Required',
+          changeProp: true,
+        },
+      ],
+    },
+    'script-props': ['id', 'options', 'required'],
+  },
+});
+
+editor.DomComponents.addType('form-checkbox', {
+  model: {
+    defaults: {
+      script: function() {
+        console.log('Form checkbox initialized. Required: ', this.getAttribute('required'));
+      },
+      traits: [
+        {
+          type: 'text',
+          name: 'id',
+          label: 'Id',
+          changeProp: true,
+        },
+        {
+          type: 'checkbox',
+          name: 'required',
+          label: 'Required',
+          changeProp: true,
+        },
+      ],
+    },
+    'script-props': ['id', 'required'],
+  },
+});
+
+editor.DomComponents.addType('form-button', {
   model: {
     defaults: {
-      // HTML-код формы
-      content: `
-        <div class="container">
-          <form id="contactForm">
-            <h4>КЛУБ-ПРАКТИК. 255 техник для психолога - 2024</h4>
-            <div class="form-group">
-              <label for="name">Имя</label>
-              <input type="text" id="name" required>
-            </div>
-            <div class="form-group">
-              <label for="email">Почта</label>
-              <input type="email" id="email" required>
-            </div>
-            <div class="form-group">
-              <label for="phone">Телефон</label>
-              <input type="tel" id="phone" required>
-            </div>
-            <div class="form-group">
-              <label for="options">Выберите тариф</label>
-              <select id="options" required>
-                <option value="" disabled selected>Тариф</option>
-                <option>БИЗНЕС - 69 970р.</option>
-                <option>PREMIUM - 89 970р.</option>
-                <option>VIP - 149 990р.</option>
-              </select>
-            </div>
-            <div class="form-check">
-              <input type="checkbox" id="newsletter" required>
-              <label for="newsletter">Согласие на email рассылку</label>
-            </div>
-            <div class="form-group">
-              <a href="#" id="privacyPolicyLink">Политика конфиденциальности</a>
-            </div>
-            <button type="submit" class="btn-primary">ПЕРЕЙТИ К ОПЛАТЕ</button>
-          </form>
-        </div>
-      `,
-      // Скрипт для обработки отправки формы
       script: function(props) {
-        const form = this.querySelector('#contactForm');
-        const avpInput = form.querySelector('input[name="avp_v"]');
-        const grupInput = form.querySelector('input[name="grup_v"]');
-        const red_urlInput = form.querySelector('input[name="red_url_v"]');        
-        if (avpInput) {
-          avpInput.value = props.avp;
-        }
-        if (grupInput) {
-          grupInput.value = props.grup;
-        }
-        if (red_urlInput) {
-          grupInput.value = props.red_url;
-        }
+        console.log('Form button initialized with text: ', props.text);
+        console.log('AVP: ', props.avp);
+        console.log('GRUPS: ', props.grups);
+        console.log('REDIRECT: ', props.redirect);
+        
+        // Пример использования переменной redirect для перенаправления пользователя при отправке формы
+        this.addEventListener('click', function(event) {
+          event.preventDefault();
+          if (props.redirect) {
+            window.location.href = props.redirect;
+          }
+        });
       },
-      // Свойства, которые будут передаваться в скрипт
-      'script-props': ['avp', 'grup', 'red_url'],
-      // Настройки для изменения URL отправки
       traits: [
+        {
+          type: 'text',
+          name: 'id',
+          label: 'Id',
+          changeProp: true,
+        },
+        {
+          type: 'text',
+          name: 'text',
+          label: 'Button Text',
+          changeProp: true,
+        },
         {
           type: 'text',
           name: 'avp',
           label: 'AVP',
-          changeProp: true
+          changeProp: true,
         },
         {
           type: 'text',
-          name: 'grup',
-          label: 'GRUP',
-          changeProp: true
+          name: 'grups',
+          label: 'GRUPS',
+          changeProp: true,
         },
         {
           type: 'text',
-          name: 'red_url',
-          label: 'RED_URL',
-          changeProp: true
-        }
-      ]
-    }
-  }
+          name: 'redirect',
+          label: 'Redirect',
+          changeProp: true,
+        },
+      ],
+    },
+    'script-props': ['id', 'text', 'avp', 'grups', 'redirect'],
+  },
 });
-// Создаем блок для компонента формы
-editor.Blocks.add('custom-form-block', {
-  label: 'Custom Form',
-  content: { type: 'custom-form' },
+
+// Добавляем возможность настройки ссылки "Политика конфиденциальности"
+editor.DomComponents.addType('privacy-policy-link', {
+  model: {
+    defaults: {
+      script: function(props) {
+        const link = this;
+        link.href = props.href || '#';
+        link.target = props.newWindow ? '_blank' : '_self';
+        console.log('Privacy policy link initialized with href: ', props.href);
+      },
+      traits: [
+        {
+          type: 'text',
+          name: 'id',
+          label: 'Id',
+          changeProp: true,
+        },
+        {
+          type: 'text',
+          name: 'href',
+          label: 'Link URL',
+          changeProp: true,
+        },
+        {
+          type: 'checkbox',
+          name: 'newWindow',
+          label: 'Open in new window',
+          changeProp: true,
+        },
+      ],
+    },
+    'script-props': ['id', 'href', 'newWindow'],
+  },
 });