diff --git a/classes/blocks.js b/classes/blocks.js
index e69de29..cc7f34b 100644
--- a/classes/blocks.js
+++ b/classes/blocks.js
@@ -0,0 +1,61 @@
+import { col, row } from '../src/utils.js'
+
+export class Block {
+ constructor(value, options) {
+ this.value = value
+ this.options = options
+ }
+
+ toHTML() {
+ throw new Error(
+ 'Для данного блока не найден подходящий метод для генерации HTML кода!'
+ )
+ }
+}
+
+export class TitleBlock extends Block {
+ constructor(value, options) {
+ super(value, options)
+ }
+
+ toHTML() {
+ const { options, value } = this
+ return row(col(`<${options.tag}>${value}${options.tag}>`), options.styles)
+ }
+}
+
+export class TextBlock extends Block {
+ constructor(value, options) {
+ super(value, options)
+ }
+
+ toHTML() {
+ const { options, value } = this
+ return row(col(`
${value}
`), options.styles)
+ }
+}
+
+export class TextColumnsBlock extends Block {
+ constructor(value, options) {
+ super(value, options)
+ }
+
+ toHTML() {
+ const { options, value } = this
+ return row(value.map((item) => col(item)).join(''), options.styles)
+ }
+}
+
+export class ImageBlock extends Block {
+ constructor(value, options) {
+ super(value, options)
+ }
+
+ toHTML() {
+ const { alt, styles } = this.options
+ return row(
+ col(`
`),
+ styles
+ )
+ }
+}
diff --git a/src/index.js b/src/index.js
index 6b2abe3..9ca440a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,4 @@
import './styles/main.css'
import { model } from './model.js'
-import * as Templates from './templates.js'
-let generateHTML = (model) => {
- return model.map((block) => {
- if (Templates[block.type]) return Templates[block.type](block)
- })
-}
-
-document
- .querySelector('#site')
- .insertAdjacentHTML('afterbegin', generateHTML(model).join(''))
+document.querySelector('#site').insertAdjacentHTML('afterbegin', model.join(''))
diff --git a/src/model.js b/src/model.js
index 04c4a8b..6d70953 100644
--- a/src/model.js
+++ b/src/model.js
@@ -1,33 +1,27 @@
+import {
+ TitleBlock,
+ TextBlock,
+ TextColumnsBlock,
+ ImageBlock
+} from '../classes/blocks.js'
+
export const model = [
- {
- type: 'title',
- value: 'Алексей Плещеев',
- options: {
- styles: `color: #fff; text-align: center; font-family: Georgia, serif;
+ new TitleBlock('Алексей Плещеев', {
+ styles: `color: #fff; text-align: center; font-family: Georgia, serif;
font-size: 25px; letter-spacing: 2px; word-spacing: 2px;
font-variant: small-caps; padding-top: 50px`,
- tag: 'h2'
- }
- },
- {
- type: 'text',
- value: 'Осень наступила, высохли цветы',
- options: {
- styles: `text-align: center; font-family: Arial, Helvetica, sans-serif;
+ tag: 'h2'
+ }).toHTML(),
+ new TextBlock('Осень наступила, высохли цветы', {
+ styles: `text-align: center; font-family: Arial, Helvetica, sans-serif;
font-size: 20px; font-weight: 700; padding-top: 20px`
- }
- },
- {
- type: 'image',
- value: 'golden_autumn.jpg',
- options: {
- styles: `text-align: center; padding-top: 20px`,
- description: 'Иван Иванович Шишкин – Ранняя осень 1889'
- }
- },
- {
- type: 'textColumns',
- value: [
+ }).toHTML(),
+ new ImageBlock('golden_autumn.jpg', {
+ styles: `text-align: center; padding-top: 20px`,
+ alt: 'Иван Иванович Шишкин – Ранняя осень 1889'
+ }).toHTML(),
+ new TextColumnsBlock(
+ [
` Осень наступила,
Высохли цветы,
И глядят уныло
@@ -48,10 +42,10 @@ export const model = [
Птички улетели
В теплые края.`
],
- options: {
+ {
styles: `white-space: pre-wrap; text-align: justify; padding-top: 50px;
font-family: Verdana; font-size: 16px; font-weight: 700;
padding-bottom: 200px; padding-left: 150px; padding-right: 100px`
}
- }
+ ).toHTML()
]
diff --git a/src/templates.js b/src/templates.js
deleted file mode 100644
index b24fdd5..0000000
--- a/src/templates.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { col, row } from './utils.js'
-
-export const title = (block) => {
- const { options, value } = block
- return row(col(`<${options.tag}>${value}${options.tag}>`), options.styles)
-}
-
-export const text = (block) => {
- const { options, value } = block
- return row(col(`${value}
`), options.styles)
-}
-
-export const textColumns = (block) => {
- const { options, value } = block
- return row(value.map((item) => col(item)).join(''), options.styles)
-}
-
-export const image = (block) => {
- const { description, styles } = block.options
- return row(
- col(`
`),
- styles
- )
-}