добавил скрипт генерации кода
This commit is contained in:
parent
aa9e4d1af8
commit
974ac99bd9
2
dist/bundle.js
vendored
2
dist/bundle.js
vendored
@ -1 +1 @@
|
||||
(()=>{"use strict";var e,n,t,r={756:(e,n,t)=>{t.d(n,{Z:()=>i});var r=t(645),o=t.n(r)()((function(e){return e[1]}));o.push([e.id,"#app {\n position: relative;\n}\n\n.content {\n position: absolute;\n top: 0;\n right: 0;\n left: 200px;\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",""]);const i=o},645:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t=e(n);return n[2]?"@media ".concat(n[2]," {").concat(t,"}"):t})).join("")},n.i=function(e,t,r){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(r)for(var i=0;i<this.length;i++){var a=this[i][0];null!=a&&(o[a]=!0)}for(var c=0;c<e.length;c++){var s=[].concat(e[c]);r&&o[s[0]]||(t&&(s[2]?s[2]="".concat(t," and ").concat(s[2]):s[2]=t),n.push(s))}},n}},379:(e,n,t)=>{var r,o=function(){var e={};return function(n){if(void 0===e[n]){var t=document.querySelector(n);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}e[n]=t}return e[n]}}(),i=[];function a(e){for(var n=-1,t=0;t<i.length;t++)if(i[t].identifier===e){n=t;break}return n}function c(e,n){for(var t={},r=[],o=0;o<e.length;o++){var c=e[o],s=n.base?c[0]+n.base:c[0],u=t[s]||0,l="".concat(s," ").concat(u);t[s]=u+1;var d=a(l),f={css:c[1],media:c[2],sourceMap:c[3]};-1!==d?(i[d].references++,i[d].updater(f)):i.push({identifier:l,updater:h(f,n),references:1}),r.push(l)}return r}function s(e){var n=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var i=t.nc;i&&(r.nonce=i)}if(Object.keys(r).forEach((function(e){n.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(n);else{var a=o(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(n)}return n}var u,l=(u=[],function(e,n){return u[e]=n,u.filter(Boolean).join("\n")});function d(e,n,t,r){var o=t?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=l(n,o);else{var i=document.createTextNode(o),a=e.childNodes;a[n]&&e.removeChild(a[n]),a.length?e.insertBefore(i,a[n]):e.appendChild(i)}}function f(e,n,t){var r=t.css,o=t.media,i=t.sourceMap;if(o?e.setAttribute("media",o):e.removeAttribute("media"),i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var p=null,v=0;function h(e,n){var t,r,o;if(n.singleton){var i=v++;t=p||(p=s(n)),r=d.bind(null,t,i,!1),o=d.bind(null,t,i,!0)}else t=s(n),r=f.bind(null,t,n),o=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)};return r(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;r(e=n)}else o()}}e.exports=function(e,n){(n=n||{}).singleton||"boolean"==typeof n.singleton||(n.singleton=(void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r));var t=c(e=e||[],n);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<t.length;r++){var o=a(t[r]);i[o].references--}for(var s=c(e,n),u=0;u<t.length;u++){var l=a(t[u]);0===i[l].references&&(i[l].updater(),i.splice(l,1))}t=s}}}}},o={};function i(e){if(o[e])return o[e].exports;var n=o[e]={id:e,exports:{}};return r[e](n,n.exports,i),n.exports}i.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return i.d(n,{a:n}),n},i.d=(e,n)=>{for(var t in n)i.o(n,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},i.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),e=i(379),n=i.n(e),t=i(756),n()(t.Z,{insert:"head",singleton:!1}),t.Z.locals})();
|
||||
(()=>{"use strict";var e,t,n,r={756:(e,t,n)=>{n.d(t,{Z:()=>i});var r=n(645),o=n.n(r)()((function(e){return e[1]}));o.push([e.id,"#app {\n position: relative;\n}\n\n.content {\n position: absolute;\n top: 0;\n right: 0;\n left: 200px;\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",""]);const i=o},645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=e(t);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,r){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(r)for(var i=0;i<this.length;i++){var a=this[i][0];null!=a&&(o[a]=!0)}for(var s=0;s<e.length;s++){var c=[].concat(e[s]);r&&o[c[0]]||(n&&(c[2]?c[2]="".concat(n," and ").concat(c[2]):c[2]=n),t.push(c))}},t}},379:(e,t,n)=>{var r,o=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),i=[];function a(e){for(var t=-1,n=0;n<i.length;n++)if(i[n].identifier===e){t=n;break}return t}function s(e,t){for(var n={},r=[],o=0;o<e.length;o++){var s=e[o],c=t.base?s[0]+t.base:s[0],l=n[c]||0,u="".concat(c," ").concat(l);n[c]=l+1;var d=a(u),f={css:s[1],media:s[2],sourceMap:s[3]};-1!==d?(i[d].references++,i[d].updater(f)):i.push({identifier:u,updater:h(f,t),references:1}),r.push(u)}return r}function c(e){var t=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var i=n.nc;i&&(r.nonce=i)}if(Object.keys(r).forEach((function(e){t.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(t);else{var a=o(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(t)}return t}var l,u=(l=[],function(e,t){return l[e]=t,l.filter(Boolean).join("\n")});function d(e,t,n,r){var o=n?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=u(t,o);else{var i=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function f(e,t,n){var r=n.css,o=n.media,i=n.sourceMap;if(o?e.setAttribute("media",o):e.removeAttribute("media"),i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var p=null,v=0;function h(e,t){var n,r,o;if(t.singleton){var i=v++;n=p||(p=c(t)),r=d.bind(null,n,i,!1),o=d.bind(null,n,i,!0)}else n=c(t),r=f.bind(null,n,t),o=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=(void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r));var n=s(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<n.length;r++){var o=a(n[r]);i[o].references--}for(var c=s(e,t),l=0;l<n.length;l++){var u=a(n[l]);0===i[u].references&&(i[u].updater(),i.splice(u,1))}n=c}}}}},o={};function i(e){if(o[e])return o[e].exports;var t=o[e]={id:e,exports:{}};return r[e](t,t.exports,i),t.exports}i.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},i.d=(e,t)=>{for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e=i(379),t=i.n(e),n=i(756),t()(n.Z,{insert:"head",singleton:!1}),n.Z.locals,console.log([{type:"title",value:"Test title",options:{}},{type:"text",value:"Lorem ipsum dolor sit, amet consectetur adipisicing elit.",options:{}},{type:"textColumns",value:["text 1","text 2","text 3"],options:{}}])})();
|
||||
@ -16,54 +16,7 @@
|
||||
<div id="panel" class="bg-light sidebar">
|
||||
<p>Sidebar text</p>
|
||||
</div>
|
||||
<div id="site" class="content">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<h1>Title</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<p>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt
|
||||
consectetur reprehenderit ex blanditiis assumenda quaerat ea atque
|
||||
fugit eaque asperiores eligendi accusantium ratione exercitationem
|
||||
delectus eveniet unde rerum, possimus voluptate!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<p>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
|
||||
Incidunt consectetur reprehenderit ex blanditiis assumenda
|
||||
quaerat ea atque fugit eaque asperiores eligendi accusantium
|
||||
ratione exercitationem delectus eveniet unde rerum, possimus
|
||||
voluptate!
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<p>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
|
||||
Incidunt consectetur reprehenderit ex blanditiis assumenda
|
||||
quaerat ea atque fugit eaque asperiores eligendi accusantium
|
||||
ratione exercitationem delectus eveniet unde rerum, possimus
|
||||
voluptate!
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<p>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
|
||||
Incidunt consectetur reprehenderit ex blanditiis assumenda
|
||||
quaerat ea atque fugit eaque asperiores eligendi accusantium
|
||||
ratione exercitationem delectus eveniet unde rerum, possimus
|
||||
voluptate!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="site" class="content"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
67
src/index.js
67
src/index.js
@ -1 +1,68 @@
|
||||
import './styles/main.css'
|
||||
import { model } from './model.js'
|
||||
|
||||
console.log(model)
|
||||
|
||||
let generateHTML = (model) => {
|
||||
let htmlBlock
|
||||
return model
|
||||
.map((block) => {
|
||||
switch (block.type) {
|
||||
case 'title':
|
||||
htmlBlock = convertModelToTitle(block.value)
|
||||
break
|
||||
case 'text':
|
||||
htmlBlock = convertModelToText(block.value)
|
||||
break
|
||||
case 'textColumns':
|
||||
htmlBlock = convertModelToColumns(block.value)
|
||||
break
|
||||
default:
|
||||
htmlBlock = `<br>`
|
||||
break
|
||||
}
|
||||
return htmlBlock
|
||||
})
|
||||
.join('')
|
||||
}
|
||||
|
||||
let convertModelToTitle = (value) => {
|
||||
return `
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<h1>${value}</h1>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
|
||||
let convertModelToText = (value) => {
|
||||
return `
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<p>
|
||||
${value}
|
||||
</p>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
|
||||
let convertModelToColumns = (value) => {
|
||||
let columns = value
|
||||
.map((item) => {
|
||||
return `
|
||||
<div class="col-sm">
|
||||
<p>
|
||||
${item}
|
||||
</p>
|
||||
</div>`
|
||||
})
|
||||
.join('')
|
||||
return `
|
||||
<div class="row">
|
||||
${columns}
|
||||
</div>`
|
||||
}
|
||||
|
||||
document
|
||||
.querySelector('#site')
|
||||
.insertAdjacentHTML('beforeend', generateHTML(model))
|
||||
|
||||
30
src/model.js
Normal file
30
src/model.js
Normal file
@ -0,0 +1,30 @@
|
||||
export const model = [
|
||||
{
|
||||
type: 'title',
|
||||
value: 'Test title',
|
||||
options: {}
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
value: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit.',
|
||||
options: {}
|
||||
},
|
||||
{
|
||||
type: 'textColumns',
|
||||
value: [
|
||||
`Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt
|
||||
consectetur reprehenderit ex blanditiis assumenda quaerat ea atque
|
||||
fugit eaque asperiores eligendi accusantium ratione exercitationem
|
||||
delectus eveniet unde rerum, possimus voluptate!`,
|
||||
`Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt
|
||||
consectetur reprehenderit ex blanditiis assumenda quaerat ea atque
|
||||
fugit eaque asperiores eligendi accusantium ratione exercitationem
|
||||
delectus eveniet unde rerum, possimus voluptate!`,
|
||||
`Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt
|
||||
consectetur reprehenderit ex blanditiis assumenda quaerat ea atque
|
||||
fugit eaque asperiores eligendi accusantium ratione exercitationem
|
||||
delectus eveniet unde rerum, possimus voluptate!`
|
||||
],
|
||||
options: {}
|
||||
}
|
||||
]
|
||||
@ -20,3 +20,7 @@
|
||||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
div {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user