1 line
15 KiB
JavaScript
1 line
15 KiB
JavaScript
(()=>{"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<this.length;a++){var r=this[a][0];null!=r&&(o[r]=!0)}for(var s=0;s<n.length;s++){var l=[].concat(n[s]);i&&o[l[0]]||(e&&(l[2]?l[2]="".concat(e," and ").concat(l[2]):l[2]=e),t.push(l))}},t}},379:(n,t,e)=>{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<a.length;e++)if(a[e].identifier===n){t=e;break}return t}function s(n,t){for(var e={},i=[],o=0;o<n.length;o++){var s=n[o],l=t.base?s[0]+t.base:s[0],d=e[l]||0,p="".concat(l," ").concat(d);e[l]=d+1;var c=r(p),h={css:s[1],media:s[2],sourceMap:s[3]};-1!==c?(a[c].references++,a[c].updater(h)):a.push({identifier:p,updater:m(h,t),references:1}),i.push(p)}return i}function l(n){var t=document.createElement("style"),i=n.attributes||{};if(void 0===i.nonce){var a=e.nc;a&&(i.nonce=a)}if(Object.keys(i).forEach((function(n){t.setAttribute(n,i[n])})),"function"==typeof n.insert)n.insert(t);else{var r=o(n.insert||"head");if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(t)}return t}var d,p=(d=[],function(n,t){return d[n]=t,d.filter(Boolean).join("\n")});function c(n,t,e,i){var o=e?"":i.media?"@media ".concat(i.media," {").concat(i.css,"}"):i.css;if(n.styleSheet)n.styleSheet.cssText=p(t,o);else{var a=document.createTextNode(o),r=n.childNodes;r[t]&&n.removeChild(r[t]),r.length?n.insertBefore(a,r[t]):n.appendChild(a)}}function h(n,t,e){var i=e.css,o=e.media,a=e.sourceMap;if(o?n.setAttribute("media",o):n.removeAttribute("media"),a&&"undefined"!=typeof btoa&&(i+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),n.styleSheet)n.styleSheet.cssText=i;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(i))}}var u=null,f=0;function m(n,t){var e,i,o;if(t.singleton){var a=f++;e=u||(u=l(t)),i=c.bind(null,e,a,!1),o=c.bind(null,e,a,!0)}else e=l(t),i=h.bind(null,e,t),o=function(){!function(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n)}(e)};return i(n),function(t){if(t){if(t.css===n.css&&t.media===n.media&&t.sourceMap===n.sourceMap)return;i(n=t)}else o()}}n.exports=function(n,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=(void 0===i&&(i=Boolean(window&&document&&document.all&&!window.atob)),i));var e=s(n=n||[],t);return function(n){if(n=n||[],"[object Array]"===Object.prototype.toString.call(n)){for(var i=0;i<e.length;i++){var o=r(e[i]);a[o].references--}for(var l=s(n,t),d=0;d<e.length;d++){var p=r(e[d]);0===a[p].references&&(a[p].updater(),a.splice(p,1))}e=l}}}}},t={};function e(i){if(t[i])return t[i].exports;var o=t[i]={id:i,exports:{}};return n[i](o,o.exports,e),o.exports}e.n=n=>{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="")=>`<div class="row" style="margin: 0; ${t}">${n}</div>`,a=n=>`<div class="col-sm">${n}</div>`,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}</${n}>`),t)}}class d extends s{constructor(n,t){super(n,t)}toHTML(){const{options:n,value:t}=this;return o(a(`<p style="margin-bottom: 0;">${t}</p>`),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(`<img src="${this.value}" alt="${n}" height="250">`),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('<div id="leaves">\n <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>\n <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>\n <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>\n <i></i><i></i><i></i><i></i><i></i><i></i>\n </div>',{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 <form name="${n}">\n <h5>${t}</h5>\n <div class="form-group">\n ${"textColumns"!==n?'<input required class="form-control form-control-sm" name="value" \n placeholder="Введите значение...">':'<textarea required class="form-control form-control-sm" name="value" \n rows="10" placeholder="Введите значение..."></textarea>'}\n </div>\n <div class="form-group">\n <input class="form-control form-control-sm" name="styles" placeholder="Укажите стили...">\n </div>\n ${i}\n <button type="submit" class="btn btn-primary btn-sm">Добавить</button>\n ${e}\n </form>\n <hr />\n `}}class m extends f{constructor(){super(),this.tag='\n <select required id="select-header" name="tag">\n <option value="h1">h1</option>\n <option value="h2">h2</option>\n <option value="h3">h3</option>\n <option value="h4">h4</option>\n <option value="h5">h5</option>\n <option value="h6">h6</option>\n </select>'}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 <div class="form-group">\n <input class="form-control form-control-sm" name="alt" placeholder="Введите описание...">\n </div>'}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 <!DOCTYPE html>\n <html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <link\n rel="stylesheet"\n href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"\n integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"\n crossorigin="anonymous"\n />\n <title>JavaScript Constructor</title>\n </head>\n <body>\n <div id="app" class="container-fluid">\n <div id="site" class="content">${document.querySelector("#site").innerHTML}</div>\n </div>\n </body>\n </html>\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)}))})()})(); |