реализация sidebar
This commit is contained in:
parent
e0302794cf
commit
c50cbd2a27
|
Before Width: | Height: | Size: 150 KiB After Width: | Height: | Size: 150 KiB |
|
Before Width: | Height: | Size: 228 KiB After Width: | Height: | Size: 228 KiB |
@ -1,4 +1,4 @@
|
|||||||
import { col, row } from '../src/utils.js'
|
import { col, row } from '../utils.js'
|
||||||
|
|
||||||
export class Block {
|
export class Block {
|
||||||
constructor(value, options) {
|
constructor(value, options) {
|
||||||
@ -54,8 +54,18 @@ export class ImageBlock extends Block {
|
|||||||
toHTML() {
|
toHTML() {
|
||||||
const { alt, styles } = this.options
|
const { alt, styles } = this.options
|
||||||
return row(
|
return row(
|
||||||
col(`<img src="./img/${this.value}" alt="${alt}" height="250">`),
|
col(`<img src="./src/assets/${this.value}" alt="${alt}" height="250">`),
|
||||||
styles
|
styles
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export class CustomBlock extends Block {
|
||||||
|
constructor(value, options) {
|
||||||
|
super(value, options)
|
||||||
|
}
|
||||||
|
|
||||||
|
toHTML() {
|
||||||
|
return row(this.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
57
src/classes/sidebar.js
Normal file
57
src/classes/sidebar.js
Normal file
@ -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 `
|
||||||
|
<form name="${type}">
|
||||||
|
<h5>${type}</h5>
|
||||||
|
<div class="form-group">
|
||||||
|
<input class="form-control form-control-sm" name="value" placeholder="value">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<input class="form-control form-control-sm" name="styles" placeholder="styles">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary btn-sm">Добавить</button>
|
||||||
|
</form>
|
||||||
|
<hr />
|
||||||
|
`
|
||||||
|
}
|
||||||
12
src/classes/site.js
Normal file
12
src/classes/site.js
Normal file
@ -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())
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -13,43 +13,8 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app" class="container-fluid">
|
<div id="app" class="container-fluid">
|
||||||
<div id="panel" class="bg-light sidebar">
|
<div id="panel" class="bg-light sidebar"></div>
|
||||||
<p>Sidebar text</p>
|
<div id="site" class="content"></div>
|
||||||
</div>
|
|
||||||
<div id="site" class="content">
|
|
||||||
<div id="leaves">
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
<i></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
10
src/index.js
10
src/index.js
@ -1,4 +1,12 @@
|
|||||||
import './styles/main.css'
|
import './styles/main.css'
|
||||||
import { model } from './model.js'
|
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)
|
||||||
|
|||||||
58
src/model.js
58
src/model.js
@ -2,24 +2,44 @@ import {
|
|||||||
TitleBlock,
|
TitleBlock,
|
||||||
TextBlock,
|
TextBlock,
|
||||||
TextColumnsBlock,
|
TextColumnsBlock,
|
||||||
ImageBlock
|
ImageBlock,
|
||||||
} from '../classes/blocks.js'
|
CustomBlock
|
||||||
|
} from './classes/blocks.js'
|
||||||
|
import { css } from './utils'
|
||||||
|
|
||||||
export const model = [
|
export const model = [
|
||||||
|
new CustomBlock(`<div id="leaves">
|
||||||
|
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||||
|
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||||
|
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||||
|
<i></i><i></i><i></i><i></i><i></i><i></i>
|
||||||
|
</div>`),
|
||||||
new TitleBlock('Алексей Плещеев', {
|
new TitleBlock('Алексей Плещеев', {
|
||||||
styles: `color: #fff; text-align: center; font-family: Georgia, serif;
|
styles: css({
|
||||||
font-size: 25px; letter-spacing: 2px; word-spacing: 2px;
|
color: '#fff',
|
||||||
font-variant: small-caps; padding-top: 50px`,
|
'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'
|
tag: 'h2'
|
||||||
}).toHTML(),
|
}),
|
||||||
new TextBlock('Осень наступила, высохли цветы', {
|
new TextBlock('Осень наступила, высохли цветы', {
|
||||||
styles: `text-align: center; font-family: Arial, Helvetica, sans-serif;
|
styles: css({
|
||||||
font-size: 20px; font-weight: 700; padding-top: 20px`
|
'text-align': 'center',
|
||||||
}).toHTML(),
|
'font-family': 'Arial, Helvetica, sans-serif',
|
||||||
|
'font-size': '20px',
|
||||||
|
'font-weight': '700',
|
||||||
|
'padding-top': '20px'
|
||||||
|
})
|
||||||
|
}),
|
||||||
new ImageBlock('golden_autumn.jpg', {
|
new ImageBlock('golden_autumn.jpg', {
|
||||||
styles: `text-align: center; padding-top: 20px`,
|
styles: css({ 'text-align': 'center', 'padding-top': '20px' }),
|
||||||
alt: 'Иван Иванович Шишкин – Ранняя осень 1889'
|
alt: 'Иван Иванович Шишкин – Ранняя осень 1889'
|
||||||
}).toHTML(),
|
}),
|
||||||
new TextColumnsBlock(
|
new TextColumnsBlock(
|
||||||
[
|
[
|
||||||
` Осень наступила,
|
` Осень наступила,
|
||||||
@ -43,9 +63,17 @@ export const model = [
|
|||||||
В теплые края.`
|
В теплые края.`
|
||||||
],
|
],
|
||||||
{
|
{
|
||||||
styles: `white-space: pre-wrap; text-align: justify; padding-top: 50px;
|
styles: css({
|
||||||
font-family: Verdana; font-size: 16px; font-weight: 700;
|
'white-space': 'pre-wrap',
|
||||||
padding-bottom: 200px; padding-left: 150px; padding-right: 100px`
|
'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()
|
)
|
||||||
]
|
]
|
||||||
|
|||||||
@ -5,3 +5,9 @@ export const row = (content, styles = '') => {
|
|||||||
export const col = (content) => {
|
export const col = (content) => {
|
||||||
return `<div class="col-sm">${content}</div>`
|
return `<div class="col-sm">${content}</div>`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const css = (styles = {}) => {
|
||||||
|
return Object.keys(styles)
|
||||||
|
.map((key) => `${key}: ${styles[key]}`)
|
||||||
|
.join(';')
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user