la.min.js

function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}!function(e,t){"function"==typeof define&&define.amd?define([],t):"object"===("undefined"==typeof module?"undefined":_typeof(module))&&module.exports?module.exports=t():e.LayoutArchitect=t()}("undefined"!=typeof self?self:this,function(){return function(e,n,r){if(!e)throw new Error("Please provide a HTML element as first argument!");if(!n)throw new Error("Please provide a list of strings as a second argument!");var a,i=function(e){return document.createElement(e)},o=function(e,t,n){return e.setAttribute(t,n)},f=function(){var e=n.slice();if(!r)return e;var t=function t(n,e){return 0===e.elements.length?n.push(e.name):e.elements.forEach(function(e){return t(n,e)}),n}([],r);return e.filter(function(e){return-1===t.indexOf(e)})}(),t=i("DIV"),l=[],c=r||null;function u(e){return{name:e,elements:[]}}function s(t,e,n,r){return e.map(function(e){var t=i("A");return o(t,"data-op",e[0]),o(t,"href","javascript:void(0);"),o(t,"class",e[2]),t.innerHTML=e[1],t.item=n,t.parent=r,t}).forEach(function(e){return t.appendChild(e)})}function m(){var n;return d((n=i("DIV"),f.forEach(function(e){var t=i("A");o(t,"href","javascript:void(0);"),o(t,"data-op","select"),t.item=e,t.innerHTML='<svg width="10" height="10" viewBox="0 0 1792 1792"><path d="M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"/></svg> '+e,n.appendChild(t)}),o(n,"class","la-selector"),n)),new Promise(function(n){a=function(e){var t=f.indexOf(e);-1<t&&f.splice(t,1),n(e)}})}function d(e){for(e=e||function t(n,e){var r=i("DIV");return o(r,"class","la-block"),0===n.elements.length?(r.innerHTML='<div class="la-name">'+n.name+"</div>",s(r,[["remove",'<svg width="14" height="14" viewBox="0 0 1792 1792"><path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/></svg>',"la-remove"]],n,e)):(r.innerHTML='<div class="la-children" style="grid-template-'+("vertical"===n.direction?"rows":"columns")+": repeat("+n.elements.length+', 1fr);"></div>',n.elements.forEach(function(e){return r.querySelector(".la-children").appendChild(t(e,n))})),s(r,[["horizontal:left","","la-left"],["vertical:top","","la-top"],["vertical:bottom","","la-bottom"],["horizontal:right","","la-right"]],n,e),r}(c);t.firstChild;)t.removeChild(t.firstChild);t.appendChild(e)}function h(){l.forEach(function(e){return e(c)})}function p(){m().then(function(e){c=u(e),d(),h()})}return o(t,"class","la"),t.addEventListener("click",function(e){var n,r,i,t=e.target.getAttribute("data-op"),o=e.target.item,l=e.target.parent;if(t&&o)if("remove"===t)!function(e,t){if(!e)return c=null,-1===f.indexOf(t.name)&&f.push(t.name);var n=e.elements.findIndex(function(e){return e===t});-1<n&&(e.elements.splice(n,1),1===e.elements.length&&(0<e.elements[0].elements.length?(e.direction=e.elements[0].direction,e.elements=e.elements[0].elements):(e.name=e.elements[0].name,e.elements=[],delete e.direction)),f.push(t.name))}(l,o),c?d():p(),h();else if("select"===t)a(o);else{if(0===f.length)return;t=t.split(":"),(n=o,r=t[0],i="right"===t[1]||"bottom"===t[1]?"after":"before",m().then(function(e){return u(e)}).then(function(e){if(0===n.elements.length)n.direction=r,n.elements="after"===i?[u(n.name),e]:[e,u(n.name)],delete n.name;else{if(n.direction!==r){var t={direction:n.direction,elements:n.elements};n.elements="after"===i?[t,e]:[e,t]}else"after"===i?n.elements.push(e):n.elements=[e].concat(n.elements);n.direction=r}})).then(function(){d(),h()})}}),c?d():p(),e.appendChild(t),{onChange:function(e){l.push(e)},change:function(e){c=e,d()},get:function(){return c}}}});