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

dist/bundle.js

@@ -1 +1 @@
-(()=>{"use strict";var n={756:(n,e,t)=>{t.d(e,{Z:()=>o});var i=t(645),a=t.n(i)()((function(n){return n[1]}));a.push([n.id,"#app {\n  position: relative;\n}\n\n.content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 200px;\n  background: linear-gradient(17deg, #d3d3d3, #696969),\n    linear-gradient(127deg, #d3d3d3, #bdbdbd),\n    linear-gradient(336deg, #9e9e9e, #7d7d7d);\n}\n\n.sidebar {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 200px;\n  z-index: 100;\n  padding: 10px;\n  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);\n  overflow-y: auto;\n}\n\n#leaves {\n  position: absolute;\n  top: -50px;\n  width: 100%;\n  text-align: right;\n  z-index: 4000;\n}\n\n#leaves i {\n  display: inline-block;\n  width: 200px;\n  height: 150px;\n  background: linear-gradient(to bottom right, #309900, #005600);\n  transform: skew(20deg);\n  border-radius: 5% 40% 70%;\n  box-shadow: inset 0px 0px 1px #222;\n  border: 1px solid #333;\n  z-index: 1;\n  animation: falling 5s 0s infinite;\n}\n\n#leaves i:nth-of-type(2n) {\n  animation: falling2 5s 0s infinite;\n}\n#leaves i:nth-of-type(3n) {\n  animation: falling3 5s 0s infinite;\n}\n\n#leaves i:before {\n  position: absolute;\n  content: '';\n  top: 117px;\n  right: 9px;\n  height: 27px;\n  width: 32px;\n  transform: rotate(49deg);\n  border-radius: 0% 15% 15% 0%;\n  border-top: 1px solid #222;\n  border-bottom: 1px solid #222;\n  border-left: 0px solid #222;\n  border-right: 1px solid #222;\n  background: linear-gradient(to right, rgba(0, 100, 0, 1), #005600);\n  z-index: 1;\n}\n\n#leaves i:after {\n  content: '';\n  height: 125px;\n  width: 10px;\n  background: linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));\n  display: block;\n  transform: rotate(125deg);\n  position: absolute;\n  left: 85px;\n  border-radius: 50%;\n}\n\n#leaves i:nth-of-type(n) {\n  height: 23px;\n  width: 30px;\n}\n#leaves i:nth-of-type(n):before {\n  width: 7px;\n  height: 5px;\n  top: 17px;\n  right: 1px;\n}\n#leaves i:nth-of-type(n):after {\n  width: 2px;\n  height: 17px;\n  left: 12px;\n  top: 0px;\n}\n\n#leaves i:nth-of-type(2n + 1) {\n  height: 11px;\n  width: 16px;\n}\n#leaves i:nth-of-type(2n + 1):before {\n  width: 4px;\n  height: 3px;\n  top: 7px;\n  right: 0px;\n}\n#leaves i:nth-of-type(2n + 1):after {\n  width: 2px;\n  height: 6px;\n  left: 5px;\n  top: 1px;\n}\n\n#leaves i:nth-of-type(3n + 2) {\n  height: 17px;\n  width: 23px;\n}\n#leaves i:nth-of-type(3n + 2):before {\n  height: 4px;\n  width: 4px;\n  top: 12px;\n  right: 1px;\n}\n#leaves i:nth-of-type(3n + 2):after {\n  height: 10px;\n  width: 2px;\n  top: 1px;\n  left: 8px;\n}\n\n#leaves i:nth-of-type(n) {\n  animation-delay: 1.9s;\n}\n#leaves i:nth-of-type(2n) {\n  animation-delay: 3.9s;\n}\n#leaves i:nth-of-type(3n) {\n  animation-delay: 2.3s;\n}\n#leaves i:nth-of-type(4n) {\n  animation-delay: 4.4s;\n}\n#leaves i:nth-of-type(5n) {\n  animation-delay: 5s;\n}\n#leaves i:nth-of-type(6n) {\n  animation-delay: 3.5s;\n}\n#leaves i:nth-of-type(7n) {\n  animation-delay: 2.8s;\n}\n#leaves i:nth-of-type(8n) {\n  animation-delay: 1.5s;\n}\n#leaves i:nth-of-type(9n) {\n  animation-delay: 3.3s;\n}\n#leaves i:nth-of-type(10n) {\n  animation-delay: 2.5s;\n}\n#leaves i:nth-of-type(11n) {\n  animation-delay: 1.2s;\n}\n#leaves i:nth-of-type(12n) {\n  animation-delay: 4.1s;\n}\n#leaves i:nth-of-type(13n) {\n  animation-delay: 1s;\n}\n#leaves i:nth-of-type(14n) {\n  animation-delay: 4.7s;\n}\n#leaves i:nth-of-type(15n) {\n  animation-delay: 3s;\n}\n\n#leaves i:nth-of-type(n) {\n  background: linear-gradient(to bottom right, #309900, #005600);\n}\n#leaves i:nth-of-type(2n + 2) {\n  background: linear-gradient(to bottom right, #5e9900, #2b5600);\n}\n#leaves i:nth-of-type(4n + 1) {\n  background: linear-gradient(to bottom right, #990, #564500);\n}\n\n#leaves i:nth-of-type(n) {\n  opacity: 0.7;\n}\n#leaves i:nth-of-type(3n + 1) {\n  opacity: 0.5;\n}\n#leaves i:nth-of-type(3n + 2) {\n  opacity: 0.3;\n}\n\n#leaves i:nth-of-type(n) {\n  transform: rotate(180deg);\n}\n\n#leaves i:nth-of-type(n) {\n  animation-timing-function: ease-in-out;\n}\n\n@keyframes falling {\n  0% {\n    transform: translate3d(300, 0, 0) rotate(0deg);\n  }\n\n  100% {\n    transform: translate3d(-350px, 700px, 0) rotate(90deg);\n    opacity: 0;\n  }\n}\n\n@keyframes falling3 {\n  0% {\n    transform: translate3d(0, 0, 0) rotate(-20deg);\n  }\n\n  100% {\n    transform: translate3d(-230px, 640px, 0) rotate(-70deg);\n    opacity: 0;\n  }\n}\n\n@keyframes falling2 {\n  0% {\n    transform: translate3d(0, 0, 0) rotate(90deg);\n  }\n\n  100% {\n    transform: translate3d(-400px, 680px, 0) rotate(0deg);\n    opacity: 0;\n  }\n}\n",""]);const o=a},645:n=>{n.exports=function(n){var e=[];return e.toString=function(){return this.map((function(e){var t=n(e);return e[2]?"@media ".concat(e[2]," {").concat(t,"}"):t})).join("")},e.i=function(n,t,i){"string"==typeof n&&(n=[[null,n,""]]);var a={};if(i)for(var o=0;o<this.length;o++){var r=this[o][0];null!=r&Line truncated
+(()=>{"use strict";var n={756:(n,t,e)=>{e.d(t,{Z:()=>a});var i=e(645),o=e.n(i)()((function(n){return n[1]}));o.push([n.id,"#app {\n  position: relative;\n}\n\n.content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 200px;\n  background: linear-gradient(17deg, #d3d3d3, #696969),\n    linear-gradient(127deg, #d3d3d3, #bdbdbd),\n    linear-gradient(336deg, #9e9e9e, #7d7d7d);\n}\n\n.sidebar {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 200px;\n  z-index: 100;\n  padding: 10px;\n  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);\n  overflow-y: auto;\n}\n\n#select-header {\n  margin-left: 30px;\n}\n\nbutton {\n  margin: 2px;\n}\n\ninput:invalid {\n  border: 0.5px solid skyblue;\n}\n\ninput:valid {\n  border: 0.5px solid lightgray;\n}\n\n#leaves {\n  position: absolute;\n  top: -50px;\n  width: 100%;\n  text-align: right;\n  z-index: 4000;\n}\n\n#leaves i {\n  display: inline-block;\n  width: 200px;\n  height: 150px;\n  background: linear-gradient(to bottom right, #309900, #005600);\n  transform: skew(20deg);\n  border-radius: 5% 40% 70%;\n  box-shadow: inset 0px 0px 1px #222;\n  border: 1px solid #333;\n  z-index: 1;\n  animation: falling 5s 0s infinite;\n}\n\n#leaves i:nth-of-type(2n) {\n  animation: falling2 5s 0s infinite;\n}\n#leaves i:nth-of-type(3n) {\n  animation: falling3 5s 0s infinite;\n}\n\n#leaves i:before {\n  position: absolute;\n  content: '';\n  top: 117px;\n  right: 9px;\n  height: 27px;\n  width: 32px;\n  transform: rotate(49deg);\n  border-radius: 0% 15% 15% 0%;\n  border-top: 1px solid #222;\n  border-bottom: 1px solid #222;\n  border-left: 0px solid #222;\n  border-right: 1px solid #222;\n  background: linear-gradient(to right, rgba(0, 100, 0, 1), #005600);\n  z-index: 1;\n}\n\n#leaves i:after {\n  content: '';\n  height: 125px;\n  width: 10px;\n  background: linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));\n  display: block;\n  transform: rotate(125deg);\n  position: absolute;\n  left: 85px;\n  border-radius: 50%;\n}\n\n#leaves i:nth-of-type(n) {\n  height: 23px;\n  width: 30px;\n}\n#leaves i:nth-of-type(n):before {\n  width: 7px;\n  height: 5px;\n  top: 17px;\n  right: 1px;\n}\n#leaves i:nth-of-type(n):after {\n  width: 2px;\n  height: 17px;\n  left: 12px;\n  top: 0px;\n}\n\n#leaves i:nth-of-type(2n + 1) {\n  height: 11px;\n  width: 16px;\n}\n#leaves i:nth-of-type(2n + 1):before {\n  width: 4px;\n  height: 3px;\n  top: 7px;\n  right: 0px;\n}\n#leaves i:nth-of-type(2n + 1):after {\n  width: 2px;\n  height: 6px;\n  left: 5px;\n  top: 1px;\n}\n\n#leaves i:nth-of-type(3n + 2) {\n  height: 17px;\n  width: 23px;\n}\n#leaves i:nth-of-type(3n + 2):before {\n  height: 4px;\n  width: 4px;\n  top: 12px;\n  right: 1px;\n}\n#leaves i:nth-of-type(3n + 2):after {\n  height: 10px;\n  width: 2px;\n  top: 1px;\n  left: 8px;\n}\n\n#leaves i:nth-of-type(n) {\n  animation-delay: 1.9s;\n}\n#leaves i:nth-of-type(2n) {\n  animation-delay: 3.9s;\n}\n#leaves i:nth-of-type(3n) {\n  animation-delay: 2.3s;\n}\n#leaves i:nth-of-type(4n) {\n  animation-delay: 4.4s;\n}\n#leaves i:nth-of-type(5n) {\n  animation-delay: 5s;\n}\n#leaves i:nth-of-type(6n) {\n  animation-delay: 3.5s;\n}\n#leaves i:nth-of-type(7n) {\n  animation-delay: 2.8s;\n}\n#leaves i:nth-of-type(8n) {\n  animation-delay: 1.5s;\n}\n#leaves i:nth-of-type(9n) {\n  animation-delay: 3.3s;\n}\n#leaves i:nth-of-type(10n) {\n  animation-delay: 2.5s;\n}\n#leaves i:nth-of-type(11n) {\n  animation-delay: 1.2s;\n}\n#leaves i:nth-of-type(12n) {\n  animation-delay: 4.1s;\n}\n#leaves i:nth-of-type(13n) {\n  animation-delay: 1s;\n}\n#leaves i:nth-of-type(14n) {\n  animation-delay: 4.7s;\n}\n#leaves i:nth-of-type(15n) {\n  animation-delay: 3s;\n}\n\n#leaves i:nth-of-type(n) {\n  background: linear-gradient(to bottom right, #309900, #005600);\n}\n#leaves i:nth-of-type(2n + 2) {\n  background: linear-gradient(to bottom right, #5e9900, #2b5600);\n}\n#leaves i:nth-of-type(4n + 1) {\n  background: linear-gradient(to bottom right, #990, #564500);\n}\n\n#leaves i:nth-of-type(n) {\n  opacity: 0.7;\n}\n#leaves i:nth-of-type(3n + 1) {\n  opacity: 0.5;\n}\n#leaves i:nth-of-type(3n + 2) {\n  opacity: 0.3;\n}\n\n#leaves i:nth-of-type(n) {\n  transform: rotate(180deg);\n}\n\n#leaves i:nth-of-type(n) {\n  animation-timing-function: ease-in-out;\n}\n\n@keyframes falling {\n  0% {\n    transform: translate3d(300, 0, 0) rotate(0deg);\n  }\n\n  100% {\n    transform: translate3d(-350px, 700px, 0) rotate(90deg);\n    opacity: 0;\n  }\n}\n\n@keyframes falling3 {\n  0% {\n    transform: translate3d(0, 0, 0) rotate(-20deg);\n  }\n\n  100% {\n    transform: translate3d(-230px, 640px, 0) rotate(-70deg);\n    opacity: 0;\n  }\n}\n\n@keyframes falling2 {\n  0% {\n    transform: translate3d(0, 0, 0) rotate(90deg);\n  }\n\n  100% {\n    transform: translate3d(-400px, 680px, 0) rotate(0deg);\n    opacity: 0;\n  }\n}\n",""]);const a=o},645:n=>{n.exports=function(n){var t=[];return t.toString=function(){return this.map((function(t){var e=n(t);return t[2]?"Line truncated

src/classes/blocks.js

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

src/classes/sidebar.js

@@ -15,16 +15,18 @@ import {
 } from './forms.js'
 
 export class SideBar {
-  constructor(selector, update) {
+  constructor(selector, update, clear) {
     this.$el = document.querySelector(selector)
     this.update = update
-
+    this.clear = clear
     this.init()
   }
 
   init() {
     this.$el.addEventListener('submit', this.addBlock.bind(this))
     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() {
@@ -37,6 +39,14 @@ export class SideBar {
     ].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) {
     event.preventDefault()
 
@@ -57,7 +67,7 @@ export class SideBar {
         newBlock = new TextBlock(value, { styles })
         break
       case 'textColumns':
-        newBlock = new TextColumnsBlock(value.split(','), { styles })
+        newBlock = new TextColumnsBlock(value.split('\n\n'), { styles })
         break
       case 'image':
         newBlock = new ImageBlock(value, { styles, alt })
@@ -72,4 +82,42 @@ export class SideBar {
     event.target.value.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)
+  }
 }

src/classes/site.js

@@ -1,13 +1,13 @@
 export class Site {
-  constructor(selector) {
+  constructor(selector, remove) {
     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) {
     event.preventDefault()
-
-    console.log(event.target)
+    this.remove(event.target.innerHTML || event.target.alt)
   }
 
   render(model) {

src/index.js

@@ -3,12 +3,22 @@ import { model } from './model.js'
 import { Site } from './classes/site.js'
 import { SideBar } from './classes/sidebar.js'
 
-const site = new Site('#site')
-
 const updateCallback = (newBlock) => {
   model.push(newBlock)
   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)
-new SideBar('#panel', updateCallback)
+new SideBar('#panel', updateCallback, clearCallback)

src/model.js

@@ -7,13 +7,16 @@ import {
 } from './classes/blocks.js'
 import { css } from './utils'
 
-export const model = [
-  new CustomBlock(`<div id="leaves">
+export let 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>`),
+    </div>`,
+    { styles: css({ margin: 0 }) }
+  ),
   new TitleBlock('Алексей Плещеев', {
     styles: css({
       color: '#fff',
@@ -36,10 +39,13 @@ export const model = [
       'padding-top': '20px'
     })
   }),
-  new ImageBlock('golden_autumn.jpg', {
-    styles: css({ 'text-align': 'center', 'padding-top': '20px' }),
-    alt: 'Иван Иванович Шишкин – Ранняя осень 1889'
-  }),
+  new ImageBlock(
+    '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',
+    {
+      styles: css({ 'text-align': 'center', 'padding-top': '20px' }),
+      alt: 'Иван Иванович Шишкин – Ранняя осень 1889'
+    }
+  ),
   new TextColumnsBlock(
     [
       `      Осень наступила,

src/styles/main.css

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