diff --git a/img/autumn.jpg b/src/assets/autumn.jpg similarity index 100% rename from img/autumn.jpg rename to src/assets/autumn.jpg diff --git a/img/golden_autumn.jpg b/src/assets/golden_autumn.jpg similarity index 100% rename from img/golden_autumn.jpg rename to src/assets/golden_autumn.jpg diff --git a/classes/blocks.js b/src/classes/blocks.js similarity index 81% rename from classes/blocks.js rename to src/classes/blocks.js index cc7f34b..5ec7bb9 100644 --- a/classes/blocks.js +++ b/src/classes/blocks.js @@ -1,4 +1,4 @@ -import { col, row } from '../src/utils.js' +import { col, row } from '../utils.js' export class Block { constructor(value, options) { @@ -54,8 +54,18 @@ export class ImageBlock extends Block { toHTML() { const { alt, styles } = this.options return row( - col(`${alt}`), + col(`${alt}`), styles ) } } + +export class CustomBlock extends Block { + constructor(value, options) { + super(value, options) + } + + toHTML() { + return row(this.value) + } +} diff --git a/src/classes/sidebar.js b/src/classes/sidebar.js new file mode 100644 index 0000000..2612265 --- /dev/null +++ b/src/classes/sidebar.js @@ -0,0 +1,57 @@ +import { + TitleBlock, + TextBlock, + TextColumnsBlock, + ImageBlock, + CustomBlock +} from './blocks' + +export class SideBar { + constructor(selector, update) { + this.$el = document.querySelector(selector) + this.update = update + + this.init() + } + + init() { + this.$el.addEventListener('submit', this.addBlock.bind(this)) + this.$el.innerHTML = this.template + } + + get template() { + return [block('text'), block('title')].join('') + } + + addBlock(event) { + event.preventDefault() + + const type = event.target.name + const value = event.target.value.value + const styles = event.target.styles.value + + const Constructor = type === 'text' ? TextBlock : TitleBlock + + const newBlock = new Constructor(value, { styles }) + this.update(newBlock) + + event.target.value.value = '' + event.target.styles.value = '' + } +} + +function block(type) { + return ` +
+
${type}
+
+ +
+
+ +
+ +
+
+ ` +} diff --git a/src/classes/site.js b/src/classes/site.js new file mode 100644 index 0000000..11697bb --- /dev/null +++ b/src/classes/site.js @@ -0,0 +1,12 @@ +export class Site { + constructor(selector) { + this.$el = document.querySelector(selector) + } + + render(model) { + this.$el.innerHTML = '' // при рендере сайта, очистим его содержимое + model.forEach((block) => { + this.$el.insertAdjacentHTML('beforeend', block.toHTML()) + }) + } +} diff --git a/src/index.html b/src/index.html index 01c12d5..8e7c2d8 100644 --- a/src/index.html +++ b/src/index.html @@ -13,43 +13,8 @@
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
+ +
diff --git a/src/index.js b/src/index.js index 9ca440a..1d3f058 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,12 @@ import './styles/main.css' import { model } from './model.js' +import { Site } from './classes/site.js' +import { SideBar } from './classes/sidebar.js' -document.querySelector('#site').insertAdjacentHTML('afterbegin', model.join('')) +const updateCallback = (newBlock) => { + model.push(newBlock) + site.render(model) +} + +new Site('#site').render(model) +new SideBar('#panel', updateCallback) diff --git a/src/model.js b/src/model.js index 6d70953..2199c7b 100644 --- a/src/model.js +++ b/src/model.js @@ -2,24 +2,44 @@ import { TitleBlock, TextBlock, TextColumnsBlock, - ImageBlock -} from '../classes/blocks.js' + ImageBlock, + CustomBlock +} from './classes/blocks.js' +import { css } from './utils' export const model = [ + new CustomBlock(`
+ + + + +
`), 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`, + styles: css({ + 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' - }).toHTML(), + }), new TextBlock('Осень наступила, высохли цветы', { - styles: `text-align: center; font-family: Arial, Helvetica, sans-serif; - font-size: 20px; font-weight: 700; padding-top: 20px` - }).toHTML(), + styles: css({ + 'text-align': 'center', + 'font-family': 'Arial, Helvetica, sans-serif', + 'font-size': '20px', + 'font-weight': '700', + 'padding-top': '20px' + }) + }), new ImageBlock('golden_autumn.jpg', { - styles: `text-align: center; padding-top: 20px`, + styles: css({ 'text-align': 'center', 'padding-top': '20px' }), alt: 'Иван Иванович Шишкин – Ранняя осень 1889' - }).toHTML(), + }), new TextColumnsBlock( [ ` Осень наступила, @@ -43,9 +63,17 @@ export const model = [ В теплые края.` ], { - 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` + styles: css({ + '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/utils.js b/src/utils.js index 8cc410c..60bf60e 100644 --- a/src/utils.js +++ b/src/utils.js @@ -5,3 +5,9 @@ export const row = (content, styles = '') => { export const col = (content) => { return `
${content}
` } + +export const css = (styles = {}) => { + return Object.keys(styles) + .map((key) => `${key}: ${styles[key]}`) + .join(';') +}