victorbatischev/js-constructor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

реализация sidebar

Browse Source
This commit is contained in:
Виктор Батищев 2020-11-02 12:29:45 +03:00
parent e0302794cf
commit c50cbd2a27
9 changed files with 141 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
img/autumn.jpg → src/assets/autumn.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 150 KiB

After

Width:  |  Height:  |  Size: 150 KiB

0
img/golden_autumn.jpg → src/assets/golden_autumn.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 228 KiB

After

Width:  |  Height:  |  Size: 228 KiB

14
classes/blocks.js → src/classes/blocks.js
View File

@ -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(`<img src="./img/${this.value}" alt="${alt}" height="250">`),
col(`<img src="./src/assets/${this.value}" alt="${alt}" height="250">`),
styles
)
}
}
export class CustomBlock extends Block {
constructor(value, options) {
super(value, options)
}
toHTML() {
return row(this.value)
}
}

57
src/classes/sidebar.js Normal file
View 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
View 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())
})
}
}

39
src/index.html
View File

@ -13,43 +13,8 @@
</head>
<body>
<div id="app" class="container-fluid">
<div id="panel" class="bg-light sidebar">
<p>Sidebar text</p>
</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 id="panel" class="bg-light sidebar"></div>
<div id="site" class="content"></div>
</div>
</body>
</html>

10
src/index.js
View File

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

58
src/model.js
View File

@ -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(`<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('Алексей Плещеев', {
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()
)
]

6
src/utils.js
View File

@ -5,3 +5,9 @@ export const row = (content, styles = '') => {
export const col = (content) => {
return `<div class="col-sm">${content}</div>`
}
export const css = (styles = {}) => {
return Object.keys(styles)
.map((key) => `${key}: ${styles[key]}`)
.join(';')
}