добавлены новые элементы в конструктор

src/classes/blocks.js

@@ -1,6 +1,6 @@
 import { col, row } from '../utils.js'
 
-export class Block {
+class Block {
   constructor(value, options) {
     this.value = value
     this.options = options
@@ -19,8 +19,8 @@ export class TitleBlock extends Block {
   }
 
   toHTML() {
-    const { options, value } = this
+    const { tag, styles } = this.options
-    return row(col(`<${options.tag}>${value}</${options.tag}>`), options.styles)
+    return row(col(`<${tag}>${this.value}</${tag}>`), styles)
   }
 }
 

src/classes/forms.js

@@ -0,0 +1,90 @@
+class Form {
+  constructor() {}
+
+  toHTML(name, type, tag = '', alt = '') {
+    return `
+      <form name="${name}">
+        <h5>${type}</h5>
+        <div class="form-group">
+          ${
+            name !== 'textColumns'
+              ? `<input required class="form-control form-control-sm" name="value" 
+                  placeholder="Введите значение...">`
+              : `<textarea required class="form-control form-control-sm" name="value" 
+                  rows="10" placeholder="Введите значение..."></textarea>`
+          }
+        </div>
+        <div class="form-group">
+          <input class="form-control form-control-sm" name="styles" placeholder="Укажите стили...">
+        </div>
+        ${alt}
+        <button type="submit" class="btn btn-primary btn-sm">Добавить</button>
+        ${tag}
+      </form>
+      <hr />
+    `
+  }
+}
+
+export class TitleForm extends Form {
+  constructor() {
+    super()
+    this.tag = `
+      <select required id="select-header" name="tag">
+        <option value="h1">h1</option>
+        <option value="h2">h2</option>
+        <option value="h3">h3</option>
+        <option value="h4">h4</option>
+        <option value="h5">h5</option>
+        <option value="h6">h6</option>
+      </select>`
+  }
+
+  toHTML() {
+    return super.toHTML('title', 'Заголовок', this.tag)
+  }
+}
+
+export class TextForm extends Form {
+  constructor() {
+    super()
+  }
+
+  toHTML() {
+    return super.toHTML('text', 'Абзац')
+  }
+}
+
+export class TextColumnsForm extends Form {
+  constructor() {
+    super()
+  }
+
+  toHTML() {
+    return super.toHTML('textColumns', 'Колонки')
+  }
+}
+
+export class ImageForm extends Form {
+  constructor() {
+    super()
+    this.alt = `
+      <div class="form-group">
+        <input class="form-control form-control-sm" name="alt" placeholder="Введите описание...">
+      </div>`
+  }
+
+  toHTML() {
+    return super.toHTML('image', 'Изображение', '', this.alt)
+  }
+}
+
+export class CustomForm extends Form {
+  constructor() {
+    super()
+  }
+
+  toHTML() {
+    return super.toHTML('custom', 'Разметка')
+  }
+}

src/classes/sidebar.js

@@ -6,6 +6,14 @@ import {
   CustomBlock
 } from './blocks'
 
+import {
+  TitleForm,
+  TextForm,
+  TextColumnsForm,
+  ImageForm,
+  CustomForm
+} from './forms.js'
+
 export class SideBar {
   constructor(selector, update) {
     this.$el = document.querySelector(selector)
@@ -20,38 +28,48 @@ export class SideBar {
   }
 
   get template() {
-    return [block('text'), block('title')].join('')
+    return [
+      new TitleForm().toHTML(),
+      new TextForm().toHTML(),
+      new TextColumnsForm().toHTML(),
+      new ImageForm().toHTML(),
+      new CustomForm().toHTML()
+    ].join('')
   }
 
   addBlock(event) {
     event.preventDefault()
 
-    const type = event.target.name
+    const name = event.target.name
     const value = event.target.value.value
-    const styles = event.target.styles.value
+    const styles = event.target.styles ? event.target.styles.value : ''
+    const tag = event.target.tag ? event.target.tag.value : ''
+    const alt = event.target.alt ? event.target.alt.value : ''
 
-    const Constructor = type === 'text' ? TextBlock : TitleBlock
+    let newBlock
+
+    switch (name) {
+      case 'title':
+        newBlock = new TitleBlock(value, { styles, tag })
+        event.target.tag.value = ''
+        break
+      case 'text':
+        newBlock = new TextBlock(value, { styles })
+        break
+      case 'textColumns':
+        newBlock = new TextColumnsBlock(value.split(','), { styles })
+        break
+      case 'image':
+        newBlock = new ImageBlock(value, { styles, alt })
+        event.target.alt.value = ''
+        break
+      case 'custom':
+        newBlock = new CustomBlock(value, { styles })
+    }
 
-    const newBlock = new Constructor(value, { styles })
     this.update(newBlock)
 
     event.target.value.value = ''
     event.target.styles.value = ''
   }
 }
-
-function block(type) {
-  return `
-    <form name="${type}">
-      <h5>${type}</h5>
-      <div class="form-group">
-        <input class="form-control form-control-sm" name="value" placeholder="value">
-      </div>
-      <div class="form-group">
-        <input class="form-control form-control-sm" name="styles" placeholder="styles">
-      </div>
-      <button type="submit" class="btn btn-primary btn-sm">Добавить</button>
-    </form>
-    <hr />
-  `
-}

src/classes/site.js

@@ -1,6 +1,13 @@
 export class Site {
   constructor(selector) {
     this.$el = document.querySelector(selector)
+    this.$el.addEventListener('click', this.removeBlock.bind(this))
+  }
+
+  removeBlock(event) {
+    event.preventDefault()
+
+    console.log(event.target)
   }
 
   render(model) {

src/model.js

@@ -46,17 +46,14 @@ export const model = [
       Высохли цветы,
       И глядят уныло
       Голые кусты.`,
-
       `      Вянет и желтеет
       Травка на лугах,
       Только зеленеет
       Озимь на полях.`,
-
       `      Туча небо кроет,
       Солнце не блестит,
       Ветер в поле воет,
       Дождик моросит..`,
-
       `      Зашумели воды
       Быстрого ручья,
       Птички улетели

src/styles/main.css

@@ -24,6 +24,18 @@
   overflow-y: auto;
 }
 
+#select-header {
+  margin-left: 30px;
+}
+
+input:invalid {
+  border: 0.5px solid skyblue;
+}
+
+input:valid {
+  border: 0.5px solid lightgray;
+}
+
 #leaves {
   position: absolute;
   top: -50px;