diff --git a/dist/bundle.js b/dist/bundle.js index f93e49f..86f5fe4 100644 --- a/dist/bundle.js +++ b/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{var i,a=function(){var n={};return function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(n){t=null}n[e]=t}return n[e]}}(),o=[];function r(n){for(var e=-1,t=0;t{var e=n&&n.__esModule?()=>n.default:()=>n;return t.d(e,{a:e}),e},t.d=(n,e)=>{for(var i in e)t.o(e,i)&&!t.o(n,i)&&Object.defineProperty(n,i,{enumerable:!0,get:e[i]})},t.o=(n,e)=>Object.prototype.hasOwnProperty.call(n,e),(()=>{var n=t(379),e=t.n(n),i=t(756);e()(i.Z,{insert:"head",singleton:!1}),i.Z.locals;const a=(n,e="")=>`
${n}
`,o=n=>`
${n}
`,r=(n={})=>Object.keys(n).map((e=>`${e}: ${n[e]}`)).join(";");class s{constructor(n,e){this.value=n,this.options=e}toHTML(){throw new Error("Для данного блока не найден подходящий метод для генерации HTML кода!")}}class l extends s{constructor(n,e){super(n,e)}toHTML(){const{options:n,value:e}=this;return a(o(`<${n.tag}>${e}`),n.styles)}}class p extends s{constructor(n,e){super(n,e)}toHTML(){const{options:n,value:e}=this;return a(o(`

${e}

`),n.styles)}}const d=[new class extends s{constructor(n,e){super(n,e)}toHTML(){return a(this.value)}}('
\n \n \n \n \n
'),new l("Алексей Плещеев",{styles:r({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"}),new p("Осень наступила, высохли цветы",{styles:r({"text-align":"center","font-family":"Arial, Helvetica, sans-serif","font-size":"20px","font-weight":"700","padding-top":"20px"})}),new class extends s{constructor(n,e){super(n,e)}toHTML(){const{alt:n,styles:e}=this.options;return a(o(`${n}`),e)}}("golden_autumn.jpg",{styles:r({"text-align":"center","padding-top":"20px"}),alt:"Иван Иванович Шишкин – Ранняя осень 1889"}),new class extends s{constructor(n,e){super(n,e)}toHTML(){const{options:n,value:e}=this;return a(e.map((n=>o(n))).join(""),n.styles)}}([" Осень наступила,\n Высохли цветы,\n И глядят уныло\n Голые кусты."," Вянет и желтеет\n Травка на лугах,\n Только зеленеет\n Озимь на полях."," Туча небо кроет,\n Солнце не блестит,\n Ветер в поле воет,\n Дождик моросит.."," Зашумели воды\n Быстрого ручья,\n Птички улетели\n В теплые края."],{styles:r({"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"})})];function c(n){return`\n
\n
${n}
\n
\n \n
\n
\n \n
\n \n
\n
\n `}const f=new class{constructor(n){this.$el=document.querySelector(n)}render(n){this.$el.innerHTML="",n.forEach((n=>{this.$el.insertAdjacentHTML("beforeend",n.toHTML())}))}}("#site");f.render(d),new class{constructor(n,e){this.$el=document.querySelector(n),this.update=e,this.init()}init(){this.$el.addEventListener("submit",this.addBlock.bind(this)),this.$el.innerHTML=this.template}get template(){return[c("text"),c("title")].join("")}addBlock(n){n.preventDefault();const e=n.target.name,t=n.target.value.value,i=n.target.styles.value,a=new("text"===e?p:l)(t,{styles:i});this.update(a),n.target.value.value="",n.target.styles.value=""}}("#panel",(n=>{d.push(n),f.render(d)}))})()})(); \ No newline at end of file +(()=>{"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]?"@media ".concat(t[2]," {").concat(e,"}"):e})).join("")},t.i=function(n,e,i){"string"==typeof n&&(n=[[null,n,""]]);var o={};if(i)for(var a=0;a{var i,o=function(){var n={};return function(t){if(void 0===n[t]){var e=document.querySelector(t);if(window.HTMLIFrameElement&&e instanceof window.HTMLIFrameElement)try{e=e.contentDocument.head}catch(n){e=null}n[t]=e}return n[t]}}(),a=[];function r(n){for(var t=-1,e=0;e{var t=n&&n.__esModule?()=>n.default:()=>n;return e.d(t,{a:t}),t},e.d=(n,t)=>{for(var i in t)e.o(t,i)&&!e.o(n,i)&&Object.defineProperty(n,i,{enumerable:!0,get:t[i]})},e.o=(n,t)=>Object.prototype.hasOwnProperty.call(n,t),(()=>{var n=e(379),t=e.n(n),i=e(756);t()(i.Z,{insert:"head",singleton:!1}),i.Z.locals;const o=(n,t="")=>`
${n}
`,a=n=>`
${n}
`,r=(n={})=>Object.keys(n).map((t=>`${t}: ${n[t]}`)).join(";");class s{constructor(n,t){this.value=n,this.options=t}toHTML(){throw new Error("Для данного блока не найден подходящий метод для генерации HTML кода!")}}class l extends s{constructor(n,t){super(n,t)}toHTML(){const{tag:n,styles:t}=this.options;return o(a(`<${n}>${this.value}`),t)}}class d extends s{constructor(n,t){super(n,t)}toHTML(){const{options:n,value:t}=this;return o(a(`

${t}

`),n.styles)}}class p extends s{constructor(n,t){super(n,t)}toHTML(){const{options:n,value:t}=this;return o(t.map((n=>a(n))).join(""),n.styles)}}class c extends s{constructor(n,t){super(n,t)}toHTML(){const{alt:n,styles:t}=this.options;return o(a(`${n}`),t)}}class h extends s{constructor(n,t){super(n,t)}toHTML(){const{options:n,value:t}=this;return o(a(t),n.styles)}}let u=[new h('
\n \n \n \n \n
',{styles:r({margin:0})}),new l("Алексей Плещеев",{styles:r({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"}),new d("Осень наступила, высохли цветы",{styles:r({"text-align":"center","font-family":"Arial, Helvetica, sans-serif","font-size":"20px","font-weight":"700","padding-top":"20px"})}),new c("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:r({"text-align":"center","padding-top":"20px"}),alt:"Иван Иванович Шишкин – Ранняя осень 1889"}),new p([" Осень наступила,\n Высохли цветы,\n И глядят уныло\n Голые кусты."," Вянет и желтеет\n Травка на лугах,\n Только зеленеет\n Озимь на полях."," Туча небо кроет,\n Солнце не блестит,\n Ветер в поле воет,\n Дождик моросит.."," Зашумели воды\n Быстрого ручья,\n Птички улетели\n В теплые края."],{styles:r({"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"})})];class f{constructor(){}toHTML(n,t,e="",i=""){return`\n
\n
${t}
\n
\n ${"textColumns"!==n?'':''}\n
\n
\n \n
\n ${i}\n \n ${e}\n
\n
\n `}}class m extends f{constructor(){super(),this.tag='\n '}toHTML(){return super.toHTML("title","Заголовок",this.tag)}}class g extends f{constructor(){super()}toHTML(){return super.toHTML("text","Абзац")}}class v extends f{constructor(){super()}toHTML(){return super.toHTML("textColumns","Колонки")}}class y extends f{constructor(){super(),this.alt='\n
\n \n
'}toHTML(){return super.toHTML("image","Изображение","",this.alt)}}class x extends f{constructor(){super()}toHTML(){return super.toHTML("custom","Разметка")}}const b=new class{constructor(n,t){this.$el=document.querySelector(n),this.$el.addEventListener("dblclick",this.removeBlock.bind(this)),this.remove=t}removeBlock(n){n.preventDefault(),this.remove(n.target.innerHTML||n.target.alt)}render(n){this.$el.innerHTML="",n.forEach((n=>{this.$el.insertAdjacentHTML("beforeend",n.toHTML())}))}}("#site",(n=>{u=u.filter((t=>!t.toHTML().includes(n))),b.render(u)}));b.render(u),new class{constructor(n,t,e){this.$el=document.querySelector(n),this.update=t,this.clear=e,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(){return[(new m).toHTML(),(new g).toHTML(),(new v).toHTML(),(new y).toHTML(),(new x).toHTML()].join("")}addButton(n,t,e){var i=document.createElement("button");i.innerHTML=n,i.onclick=t,i.className=e,this.$el.appendChild(i)}addBlock(n){n.preventDefault();const t=n.target.name,e=n.target.value.value,i=n.target.styles?n.target.styles.value:"",o=n.target.tag?n.target.tag.value:"",a=n.target.alt?n.target.alt.value:"";let r;switch(t){case"title":r=new l(e,{styles:i,tag:o}),n.target.tag.value="";break;case"text":r=new d(e,{styles:i});break;case"textColumns":r=new p(e.split("\n\n"),{styles:i});break;case"image":r=new c(e,{styles:i,alt:a}),n.target.alt.value="";break;case"custom":r=new h(e,{styles:i})}this.update(r),n.target.value.value="",n.target.styles.value=""}download(){let n=`\n \n \n \n \n \n \n JavaScript Constructor\n \n \n
\n
${document.querySelector("#site").innerHTML}
\n
\n \n \n `;var t=document.createElement("a");t.setAttribute("href","data:text/plain;charset=utf-8,"+encodeURIComponent(n)),t.setAttribute("download","index.html"),t.style.display="none",document.body.appendChild(t),t.click(),document.body.removeChild(t)}}("#panel",(n=>{u.push(n),b.render(u)}),(()=>{u=[],b.render(u)}))})()})(); \ No newline at end of file diff --git a/src/classes/blocks.js b/src/classes/blocks.js index 19250b2..de7fe8f 100644 --- a/src/classes/blocks.js +++ b/src/classes/blocks.js @@ -54,7 +54,7 @@ export class ImageBlock extends Block { toHTML() { const { alt, styles } = this.options return row( - col(`${alt}`), + col(`${alt}`), 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) } } diff --git a/src/classes/sidebar.js b/src/classes/sidebar.js index 5c871de..a5e3a43 100644 --- a/src/classes/sidebar.js +++ b/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 = ` + + + + + + + JavaScript Constructor + + +
+
${site}
+
+ + + ` + 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) + } } diff --git a/src/classes/site.js b/src/classes/site.js index 3579a6b..eec6bd7 100644 --- a/src/classes/site.js +++ b/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) { diff --git a/src/index.js b/src/index.js index 208d278..53ab83e 100644 --- a/src/index.js +++ b/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) diff --git a/src/model.js b/src/model.js index ef042a6..5e9bffc 100644 --- a/src/model.js +++ b/src/model.js @@ -7,13 +7,16 @@ import { } from './classes/blocks.js' import { css } from './utils' -export const model = [ - new CustomBlock(`
+export let model = [ + new CustomBlock( + `
-
`), +
`, + { 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( [ ` Осень наступила, diff --git a/src/styles/main.css b/src/styles/main.css index ced404a..8798edb 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -28,6 +28,10 @@ margin-left: 30px; } +button { + margin: 2px; +} + input:invalid { border: 0.5px solid skyblue; }