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.tag}>`), options.styles)
+ const { tag, styles } = this.options
+ return row(col(`<${tag}>${this.value}${tag}>`), 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 `
+
+
+ `
+ }
+}
+
+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 `
-
-
- `
-}
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;