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 - ) -}