diff --git a/src/classes/blocks.js b/src/classes/blocks.js index 5ec7bb9..19250b2 100644 --- a/src/classes/blocks.js +++ b/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 - return row(col(`<${options.tag}>${value}`), options.styles) + const { tag, styles } = this.options + return row(col(`<${tag}>${this.value}`), styles) } } diff --git a/src/classes/forms.js b/src/classes/forms.js new file mode 100644 index 0000000..0710400 --- /dev/null +++ b/src/classes/forms.js @@ -0,0 +1,90 @@ +class Form { + constructor() {} + + toHTML(name, type, tag = '', alt = '') { + return ` +
+
${type}
+
+ ${ + name !== 'textColumns' + ? `` + : `` + } +
+
+ +
+ ${alt} + + ${tag} +
+
+ ` + } +} + +export class TitleForm extends Form { + constructor() { + super() + this.tag = ` + ` + } + + 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 = ` +
+ +
` + } + + toHTML() { + return super.toHTML('image', 'Изображение', '', this.alt) + } +} + +export class CustomForm extends Form { + constructor() { + super() + } + + toHTML() { + return super.toHTML('custom', 'Разметка') + } +} diff --git a/src/classes/sidebar.js b/src/classes/sidebar.js index 2612265..5c871de 100644 --- a/src/classes/sidebar.js +++ b/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 ` -
-
${type}
-
- -
-
- -
- -
-
- ` -} diff --git a/src/classes/site.js b/src/classes/site.js index 11697bb..3579a6b 100644 --- a/src/classes/site.js +++ b/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) { diff --git a/src/model.js b/src/model.js index 2199c7b..ef042a6 100644 --- a/src/model.js +++ b/src/model.js @@ -46,17 +46,14 @@ export const model = [ Высохли цветы, И глядят уныло Голые кусты.`, - ` Вянет и желтеет Травка на лугах, Только зеленеет Озимь на полях.`, - ` Туча небо кроет, Солнце не блестит, Ветер в поле воет, Дождик моросит..`, - ` Зашумели воды Быстрого ручья, Птички улетели diff --git a/src/styles/main.css b/src/styles/main.css index fb1a2bc..ced404a 100644 --- a/src/styles/main.css +++ b/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;