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

сохранение и удаление элемента

Browse Source
This commit is contained in:
Виктор Батищев 2020-11-08 22:27:00 +03:00
parent 4a7b3f14fc
commit 40cfa3e74c
7 changed files with 89 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

5
src/classes/blocks.js
View File

@ -54,7 +54,7 @@ export class ImageBlock extends Block {
toHTML() { toHTML() {
const { alt, styles } = this.options const { alt, styles } = this.options
return row( return row(
col(`<img src="./src/assets/${this.value}" alt="${alt}" height="250">`), col(`<img src="${this.value}" alt="${alt}" height="250">`),
styles styles
) )
} }
@ -66,6 +66,7 @@ export class CustomBlock extends Block {
} }
toHTML() { toHTML() {
return row(this.value) const { options, value } = this
return row(col(value), options.styles)
} }
} }

54
src/classes/sidebar.js
View File

@ -15,16 +15,18 @@ import {
} from './forms.js' } from './forms.js'
export class SideBar { export class SideBar {
constructor(selector, update) { constructor(selector, update, clear) {
this.$el = document.querySelector(selector) this.$el = document.querySelector(selector)
this.update = update this.update = update
this.clear = clear
this.init() this.init()
} }
init() { init() {
this.$el.addEventListener('submit', this.addBlock.bind(this)) this.$el.addEventListener('submit', this.addBlock.bind(this))
this.$el.innerHTML = this.template this.$el.innerHTML = this.template
this.addButton('Очистить', this.clear, 'btn btn-primary btn-sm')
this.addButton('Скачать', this.download, 'btn btn-primary btn-sm')
} }
get template() { get template() {
@ -37,6 +39,14 @@ export class SideBar {
].join('') ].join('')
} }
addButton(title, onClick, className) {
var button = document.createElement('button')
button.innerHTML = title
button.onclick = onClick
button.className = className
this.$el.appendChild(button)
}
addBlock(event) { addBlock(event) {
event.preventDefault() event.preventDefault()
@ -57,7 +67,7 @@ export class SideBar {
newBlock = new TextBlock(value, { styles }) newBlock = new TextBlock(value, { styles })
break break
case 'textColumns': case 'textColumns':
newBlock = new TextColumnsBlock(value.split(','), { styles }) newBlock = new TextColumnsBlock(value.split('\n\n'), { styles })
break break
case 'image': case 'image':
newBlock = new ImageBlock(value, { styles, alt }) newBlock = new ImageBlock(value, { styles, alt })
@ -72,4 +82,42 @@ export class SideBar {
event.target.value.value = '' event.target.value.value = ''
event.target.styles.value = '' event.target.styles.value = ''
} }
download() {
let site = document.querySelector('#site').innerHTML
let template = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<title>JavaScript Constructor</title>
</head>
<body>
<div id="app" class="container-fluid">
<div id="site" class="content">${site}</div>
</div>
</body>
</html>
`
var element = document.createElement('a')
element.setAttribute(
'href',
'data:text/plain;charset=utf-8,' + encodeURIComponent(template)
)
element.setAttribute('download', 'index.html')
element.style.display = 'none'
document.body.appendChild(element)
element.click()
document.body.removeChild(element)
}
} }

8
src/classes/site.js
View File

@ -1,13 +1,13 @@
export class Site { export class Site {
constructor(selector) { constructor(selector, remove) {
this.$el = document.querySelector(selector) this.$el = document.querySelector(selector)
this.$el.addEventListener('click', this.removeBlock.bind(this)) this.$el.addEventListener('dblclick', this.removeBlock.bind(this))
this.remove = remove
} }
removeBlock(event) { removeBlock(event) {
event.preventDefault() event.preventDefault()
this.remove(event.target.innerHTML || event.target.alt)
console.log(event.target)
} }
render(model) { render(model) {

16
src/index.js
View File

@ -3,12 +3,22 @@ import { model } from './model.js'
import { Site } from './classes/site.js' import { Site } from './classes/site.js'
import { SideBar } from './classes/sidebar.js' import { SideBar } from './classes/sidebar.js'
const site = new Site('#site')
const updateCallback = (newBlock) => { const updateCallback = (newBlock) => {
model.push(newBlock) model.push(newBlock)
site.render(model) site.render(model)
} }
const clearCallback = () => {
model = []
site.render(model)
}
const removeCallback = (value) => {
model = model.filter((item) => !item.toHTML().includes(value))
site.render(model)
}
const site = new Site('#site', removeCallback)
site.render(model) site.render(model)
new SideBar('#panel', updateCallback) new SideBar('#panel', updateCallback, clearCallback)

20
src/model.js
View File

@ -7,13 +7,16 @@ import {
} from './classes/blocks.js' } from './classes/blocks.js'
import { css } from './utils' import { css } from './utils'
export const model = [ export let model = [
new CustomBlock(`<div id="leaves"> 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><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>`,
{ styles: css({ margin: 0 }) }
),
new TitleBlock('Алексей Плещеев', { new TitleBlock('Алексей Плещеев', {
styles: css({ styles: css({
color: '#fff', color: '#fff',
@ -36,10 +39,13 @@ export const model = [
'padding-top': '20px' 'padding-top': '20px'
}) })
}), }),
new ImageBlock('golden_autumn.jpg', { new ImageBlock(
styles: css({ 'text-align': 'center', 'padding-top': '20px' }), 'https://upload.wikimedia.org/wikipedia/commons/f/fb/%D0%97%D0%BE%D0%BB%D0%BE%D1%82%D0%B0%D1%8F_%D0%BE%D1%81%D0%B5%D0%BD%D1%8C_%28%D0%A8%D0%B8%D1%88%D0%BA%D0%B8%D0%BD%29.jpg',
alt: 'Иван Иванович Шишкин – Ранняя осень 1889' {
}), styles: css({ 'text-align': 'center', 'padding-top': '20px' }),
alt: 'Иван Иванович Шишкин – Ранняя осень 1889'
}
),
new TextColumnsBlock( new TextColumnsBlock(
[ [
` Осень наступила, ` Осень наступила,

4
src/styles/main.css
View File

@ -28,6 +28,10 @@
margin-left: 30px; margin-left: 30px;
} }
button {
margin: 2px;
}
input:invalid { input:invalid {
border: 0.5px solid skyblue; border: 0.5px solid skyblue;
} }