From 7e469f8538b38849bef08e4945c6247e201cfe4c Mon Sep 17 00:00:00 2001 From: Henrik jJaven Date: Thu, 15 Apr 2021 21:05:35 -0700 Subject: [PATCH] v0.30.5 --- dist/doo.html.min.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/doo.html.min.js b/dist/doo.html.min.js index bb36d97..01efceb 100644 --- a/dist/doo.html.min.js +++ b/dist/doo.html.min.js @@ -6,6 +6,6 @@ * * http://github.com/hman61/doo-html * MIT License, © Henrik Javen 2019-2021 - * ver. 0.30.4 + * ver. 0.30.5 */ -window.isReady={};var $Doo={instance:{},counter:{},getNextID:function(t){return void 0===$Doo.counter[t]&&($Doo.counter[t]=-1),t+"_"+ ++$Doo.counter[t]}};class Doo extends HTMLElement{static get version(){return"v0.30.4"}constructor(t=50){super(),Doo.debug=location.href.includes("#debug")||!1,Doo.DAO=_doo_dao_js__WEBPACK_IMPORTED_MODULE_0__.default,Doo.util=_doo_util_js__WEBPACK_IMPORTED_MODULE_1__.default,this.debug=Doo.debug,this.initialTime=(new Date).getTime(),this.PAGE_SIZE=t,!this.template&&this.getAttribute("template")&&(this.template=this.template||this.getAttribute("template")),this.filteredData={},this.visibleColumns=[],this.place=[],this.scrollPos=0,this.debug&&console.log(Doo.$Config.NAME+" "+Doo.version)}find(t){let e=t.target.value.trim().length?t.target.value.trim():"",i=this.data[this.defaultDataSet]&&this.data[this.defaultDataSet].length>1e3?700:e.length>3?1:500;"deleteContentBackward"===t.inputType&&(i=700),this.filterTimeoutID&&clearTimeout(this.filterTimeoutID),this.filterTimeoutID=setTimeout(()=>{this.filterKey=e,this.setDataFilter(this.defaultDataSet),this.clearChildren(),this.render(),this.container&&(this.container.scrollTop=0)},i)}getDooParent(){if(this.shadow.host){let t=this.shadow.host;for(;t.parentNode;){if(t.parentNode.host)return t.parentNode.host;t=t.parentNode}}return null}static getDataBind(t){for(;t.parentNode;){if(t.hasAttribute(Doo.$Config.DATA_BIND))return t.getAttribute(Doo.$Config.DATA_BIND);t=t.parentNode}}static get $Config(){return Object.freeze({DATA_BIND:"bind",TEMPLATE_EXT:".html",COMPONENT_DIR:"/components",NAME:"Doo.HTML",TYPE:{DEFAULT:0,ENUM:1,DEEP:2,COMPUTED:3},MATCH:{ANY:-1,STARTS_WITH:0,EXACT:1},DELIMITER:{BEG:"{{",END:"}}"},DOCUMENT:"document",SHADOW:"shadow",FLEX_BODY:".fbody"})}static get $Computed(){return{randomImg:()=>"https://source.unsplash.com/random/720x400",childDoodad:t=>t.instance.injectChild(t.name,t.props),currentItem:t=>t.item.address,$0:t=>t.item[t.props[0]],$1:t=>t.item[t.props[1]],$2:t=>t.item[t.props[2]],greyShade:t=>["light-grey","grey","dark-grey","black"][t.i%4],randomTailwindShade:t=>100*Math.random(t.i%8+1),fraction:t=>["","whole","half","third","quarter","fifth"][t.arr.length],toUpperCase:t=>t.getValue().toUpperCase(),toLowerCase:t=>t.getValue().toLowerCase(),substring:t=>t.getValue().substring(t.$1,t.$2),length:t=>t.arr.length,found:t=>t.instance.getCurrentData(t.$1).length,count:t=>t.instance.data[t.$1].length,recCountByDataSetKey:t=>t.klass[t.dataSetKey].length,i:t=>t.i,row:t=>t.i+1,$id:t=>"_$"+t.i,n:t=>t.i+1,ts:()=>(new Date).getTime(),pluralize:t=>t.arr.length>1?"s":"",nbsp:()=>" ",zeroOne:t=>t.i%2,lorem:t=>{let e="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";if(!isNaN(t.$1)){let i=Math.min(t.$1,6);for(let t=1;tt.$1,html:t=>t.$1,dooReflect:t=>{let e=$Doo.instance[t.instance.getAttribute("id")].dataMap[t.i].split(":");return e.length>1?e[1]:e[0]},dooFlex:t=>{let e=$Doo.instance[t.instance.getAttribute("id")].flex;e=e[t.i];let i="";return e.includes(":")&&(i=e.split(":").length>2?"doo-center":"doo-end",e=e.replace(/:/g,"")),"doo-flex doo-"+e+" "+i},dooSort:t=>{let e=$Doo.instance[t.instance.getAttribute("id")].dataMap[t.i].split(":"),i=e[0].includes("(")?t.instance.getAttribute("id")+"."+e[0]:"'"+e[0]+"'",a=t.instance.getAttribute("id").split("_");return`${a[0]}[${a[1]}].sortBy(this,${i})`},dynamic:t=>Doo.$Config.DELIMITER.BEG+t.item+Doo.$Config.DELIMITER.END}}highlight(t){let e=this.filterKey&&this.filterKey.toLowerCase();if(!e||!t)return t;let i=new RegExp(e,"ig");return t.toString().replace(/&/gi,"&").replace(i,t=>`${t}`)}static get observedAttributes(){return["doo-refresh","key","doo-foreach","orientation","doo-dao","doo-db-update","doo-db","page-size","debug"]}static xAttr(){return["src","selected","checked","disabled","readonly"]}dynamicField(t){return Doo.$Config.DELIMITER.BEG+t+Doo.$Config.DELIMITER.END}async attributeChangedCallback(t,e,i){i.length>0&&e!==i&&("doo-db-update"===t||"doo-refresh"===t?await this.render():"page-size"===t?this.PAGE_SIZE=i:"debug"===t&&(Doo.debug=!0))}static async insertRow(t,e){document.createElement("div").innerHTML=``}static async insertComponent(t,e,i="."){let a=(t=t.trim()).toLowerCase(),r=document.createElement("div");r.innerHTML=``,document.querySelector(""+e).innerHTML=r.innerHTML}async initDooBind(){let t=document.querySelector("doo-bind"),e=t.querySelectorAll("data"),i=t.getAttribute("data-sheet-key"),a=[...e];for(let t in a){let e=a[t].getAttribute("name");if(!window.isReady[e]){let r=await this.getDataObj(a[t].getAttribute("data-fetch"),i);Doo.DAO.setData(e,r,this.constructor.name),window.isReady[e]=e}}t.innerHTML="",t.setAttribute("is-ready",!0)}async connectedCallback(){let t=this.getAttribute("context")||Doo.$Config.SHADOW;if(this.shadow=t===Doo.$Config.SHADOW?this.attachShadow({mode:"open"}):document,this.id||this.getDooParent()||(this.id=$Doo.getNextID(this.constructor.name)),!this.defaultDataSet&&this.getAttribute("bind")&&(this.defaultDataSet=this.getAttribute("bind"),this.scrollTarget||(this.scrollTarget="main")),$Doo.instance[this.id]||($Doo.instance[this.id]=this),"function"==typeof this.init&&await this.init(),this.debug){let t=this.constructor.name.toLowerCase();console.log(`Custom tag added: `)}await this.render(),this.scrollTarget&&(this.scrollElem=this.shadow.querySelector(this.scrollTarget)),this.ready=!0,"function"==typeof this.dooAfterRender&&await this.dooAfterRender()}static define(t,e=null){let i=e||t.name.toLowerCase();customElements.define("doo-"+i,t)}getFilteredData(t){return this.filteredData[t]}async setTemplate(t,e){let i=0===t.indexOf("0?this.firstElementChild.getElementsByTagName("template")[0].outerHTML:await this.getTemplateURI(t,e),i}async getTemplateURI(t){let e;return e=0===t.indexOf("#")?await document.querySelector(t).outerHTML:await Doo.fetchURL(t),e}dooParse(t){let e=t.cloneNode(!0);e.removeAttribute(Doo.$Config.DATA_BIND);let i=e.outerHTML.replace(/\t/g,"").replace(/\n/g,""),a=i;Doo.xAttr().forEach(t=>{i=i.replace(new RegExp(" "+t+'="{{(.+)}}"',"g")," doo-"+t+'="{{$1}}"')});let r=a===i;void 0===window[this.constructor.name]&&(window[this.constructor.name]=[]);let o=window[this.constructor.name].length;i=i.split('="doo.self.').join('="'+this.constructor.name+"["+o+"]."),i=i.split('="self.').join('="'+this.constructor.name+"["+o+"].");let s,n=i.split(Doo.$Config.DELIMITER.END),l=[],h=n.length;for(let t=0;te[r][i.trim()];let n=[];for(r=0;r-1?e=Doo.$Config.TYPE.COMPUTED:t.indexOf(".")>0?e=Doo.$Config.TYPE.DEEP:isNaN(t)||(e=Doo.$Config.TYPE.ENUM);let i=new Doo.FieldType(t,e,this.constructor,this);return this.visibleColumns.push(t),i.parentElem=this.parentElement,i}setItemValue(t,e,i){let a=e.split(".");for(var r=0;ri=i[t])}catch(t){console.log("Property not found",e,JSON.stringify(i))}return this.highlight(i)}renderNode(t,e,i=0,a=this.PAGE_SIZE){let r=t.templateArray,o=t.xHtml,s=(e=Array.isArray(e)?e:[e]).length,n=i+a;n>s&&(n=s);let l=[];for(let t=i;t{"checked"!==e&&"disabled"!==e||(t=t.replace(new RegExp(" doo-"+e+'="false"',"g")," ").replace(new RegExp(" doo-"+e+'="0"',"g")," ")),t=t.replace(new RegExp(" doo-"+e+"=","g")," "+e+"=").replace(new RegExp(" "+e+'=""',"g")," ")}),t}}getLevel(t){let e=0;for(;t.parentElement;)t=t.parentElement,e++;return e}clearDataFilter(t){this.filteredData[t]=void 0}setDataFilter(t,e){let i=this.filterKey&&this.filterKey.toLowerCase(),a=this.data[t].slice(),r=this;e?a=a.filter(e):i&&(i=String(i),a=a.filter(t=>r.visibleColumns.some(e=>String(r.getItemValue(t,e)).toLowerCase().indexOf(i)>-1))),this.setScrollContainerHeight(a.length),this.filteredData[t]=a.slice(0,this.page_size)}async getDataObj(dataSrc,dataSheetKey=null){let data,key;if(dataSrc=dataSrc.trim(),dataSrc.indexOf(".csv")>-1)return data=await Doo.fetchURL(dataSrc),Doo.DAO.csvToJson(data);if(dataSheetKey&&dataSrc.indexOf("worksheet")>-1){let t=dataSrc.split("|");return data=await this.tableTop(dataSheetKey,t[1]),data}if(dataSrc.indexOf("worksheet")>-1&&dataSrc.indexOf("key")>-1){let t=dataSrc.split("|"),e=t[1],i=t[3];return data=await this.tableTop(e,i),data}if(0===dataSrc.indexOf("http")||dataSrc.indexOf(".json")>0)return data=await Doo.fetchURL(dataSrc),JSON.parse(data);if(dataSrc.indexOf(".js")>0)return data=await __webpack_require__(5)(""+dataSrc),data.default;if(0===dataSrc.indexOf("{"))return JSON.parse(dataSrc);if(0===dataSrc.indexOf("..")||"this.parent.data"===dataSrc){let t=this.getDooParent();return t.data}if(dataSrc.indexOf("..")>0){let t=dataSrc.replace("[","").replace("]",""),e=t.split(".."),i=[],a=isNaN(e[0]),r=parseInt(a?e[0].charCodeAt(0):e[0]),o=parseInt(a?e[1].charCodeAt(0):e[1]);for(let t=r;t<=o;t++)i.push(a?String.fromCharCode(t):t);return i.splice(0)}if(dataSrc.includes("|")||0===dataSrc.indexOf("[")){let t=dataSrc.includes("|")?"|":",",e=dataSrc.replace("[","").replace("]","").split(t);return e.forEach(t=>t.trim()),e}return 0===dataSrc.indexOf("window.")||0===dataSrc.indexOf("const.")||0===dataSrc.indexOf("var.")?(key=dataSrc.split(".")[1].trim(),window[key]):dataSrc.includes(" ")||void 0===typeof eval(dataSrc)?(console.log("WARNING: "+dataSrc+" datasource not scooped properly"),dataSrc):eval(dataSrc)}async initDataNodes(t){this.dataMap=null,this.flex=null,this.hasAttribute("data-map")&&(0===this.getAttribute("data-map").indexOf("Doo.reflect")?this.dataMap=Reflect.ownKeys(Doo.DAO.getData(this.getAttribute(Doo.$Config.DATA_BIND))[0]):this.dataMap=this.getAttribute("data-map").split("|")),this.hasAttribute("flex")&&(this.flex=this.getAttribute("flex").replace("[","").replace("]","").split("|"));let e=t.content.querySelectorAll('[data-src="${data-map}"]');e.length>0&&[...e].forEach(t=>{let e=[];this.dataMap.forEach((t,i)=>{let a=void 0===this.flex[i]?1:this.flex[i],r=t.split(":"),o=r.length>1?r[1]:r[0],s="";a.includes(":")&&(s=a.split(":").length>2?"doo-center":"doo-end",a=a.replace(/:/g,"")),e.push({label:o,fieldName:this.dynamicField(r[0]),flex:a,flexJustify:s})});let i=this.htmlParse(t,e),a=t.parentElement;a.removeChild(t),a.innerHTML=i+a.innerHTML}),t.innerHTML=t.innerHTML.replace(/\$\{(.+?)\}/gm,(e,i)=>isNaN(i)?this.hasAttribute(i)?this.getAttribute(i):t.hasAttribute(i)?t.getAttribute(i):"":this.dataMap.length>0?Doo.$Config.DELIMITER.BEG+this.dataMap[i-1]+Doo.$Config.DELIMITER.END:void 0),[...t.content.querySelectorAll("["+Doo.$Config.DATA_BIND+"]")].forEach(t=>{if(!t.hasAttribute("data-src")){let e=this.hasAttribute("doo-dispatch")?"Doo.DAO":"this.data";t.setAttribute("data-src",e)}});let i,a,r=t.content.querySelectorAll("[data-src]"),o=r.length,s=0,n=[];for(s=0;st.level===e.level?0:t.level>e.level?1:-1).reverse(),s=0;s-1?n[s]:n[s].parentElement&&("void"===r[s].getAttribute(Doo.$Config.DATA_BIND)||"|UL|TBODY|THEAD|TFOOT|TR|SELECT|SECTION|".indexOf(`|${n[s].parentElement.tagName}|`)>-1)?n[s].parentElement:document.createElement("data"),i.dataKey=n[s].getAttribute(Doo.$Config.DATA_BIND);let t=this.dooParse(n[s],this.dataMap);i.templateArray=t.templateArray,i.xHtml=t.xHtml,i.name=s,i.level=this.getLevel(n[s]),i.useParent=n[s].useParent,i.noRepeat=n[s].hasAttribute("data-norepeat"),"DATA"!==i.tagName&&"STYLE"!==i.tagName&&"LINK"!==i.tagName||(n[s].parentElement?n[s].parentElement.replaceChild(i,n[s]):(console.log("Warning: Templates should only have one childnode"),n[s].appendChild(i))),this.place.push(i)}return this.place}async prepareTemplate(){this.debug&&console.log("Template:",this.template);let t=await this.setTemplate(this.template),e=document.createElement("div");e.innerHTML=t,e.querySelector("template")&&(e.innerHTML=e.querySelector("template")?t:``);let i=e.querySelector("template").cloneNode(!0);i.removeAttribute("id"),this.templateNode=document.createElement("template");let a=this.getAttribute("data-dispatch")||"undefined";this.templateNode.innerHTML=i.innerHTML.replace(/\${dataDispatch\}/g,a),this.templateElem=this.templateNode.content;let r=this.templateElem.querySelectorAll("style");r&&r.length>0&&this.templateElem.appendChild(r[0]),0===this.place.length&&(await this.initDataNodes(this.templateNode),this.getAttribute("style")&&this.templateNode.setAttribute("style",this.getAttribute("style")))}async setContext(){window[this.constructor.name]||(window[this.constructor.name]=[]),window[this.constructor.name].push(this),this.childNodes.length>0&&this.getElementsByTagName("template")&&this.getElementsByTagName("template").length>0&&this.removeChild(this.getElementsByTagName("template").item(0));let t=this.getAttribute("context")||Doo.$Config.SHADOW;if(t===Doo.$Config.SHADOW){this.shadow.host.style.visibility="hidden";let t=this.templateElem.firstElementChild.hasAttribute("class")?" "+this.templateElem.firstElementChild.getAttribute("class"):"",e=this.hasAttribute("class")?this.getAttribute("class")+" ":"";e+t!==""&&this.templateElem.firstElementChild.setAttribute("class",`${e}${t}`),this.shadow.appendChild(this.templateElem),this.componentContainer=this.shadow.host}else if(t===Doo.$Config.DOCUMENT){this.style.visibility="hidden";let t=this.parentElement.replaceChild(this.templateElem,this);this.componentContainer=t}const e=new Promise((t,e)=>{let i=0,a=this.shadow.styleSheets;for(const e of a)if(e.href)try{e.insertRule(".doo-ready { visibility: visible !important; }",1),i+=e.rules.length}catch(e){t(0)}t(i)});await e?this.componentContainer.classList.add("doo-ready"):this.componentContainer.style.visibility="visible",this.ready=!0}async setScrollHeight(){this.scrollTarget&&(this.scrollElem=this.shadow.querySelector(this.scrollTarget),this.data[this.defaultDataSet]&&this.data[this.defaultDataSet].length>this.PAGE_SIZE&&this.addScrollWatcher())}getCurrentData(t){return this.getFilteredData(t)?this.getFilteredData(t):this.data[t]}appendData(t=this.data[this.defaultDataSet],e,i){let a=this.place[0].parentElement,r=[],o=[];for(let t=0;t0&&t===this.defaultDataSet){let t=this.scrollElem.querySelector('data[page="'+e+'"]');if(t)0===t.innerHTML.length&&(t.innerHTML=this.renderNode(this.place[a],r,e*this.PAGE_SIZE,o)),this.lastInsertedElem=t;else{let t="TABLE"===this.scrollElem.tagName?"tbody":"data",i=document.createElement(t);i.setAttribute("page",e),i.innerHTML=this.renderNode(this.place[a],r,e*this.PAGE_SIZE,o),!this.lastInsertedElem||e>this.lastPage?this.place[a].parentElement.appendChild(i):this.lastInsertedElem.insertAdjacentElement("beforebegin",i),this.lastInsertedElem=i}}else this.place[a].useParent?this.place[a].innerHTML=this.renderNode(this.place[a],r,parseInt(this.getAttribute("key")),1):this.place[a].innerHTML=this.renderNode(this.place[a],r,e*this.PAGE_SIZE,o);else this.place[a].append(this.renderNode(this.place[a],r,i,1));t===this.defaultDataSet&&(this.lastPage=e)}if(this.ready||this.setContext(),this.debug){this.getAttribute("title")||this.setAttribute("title",this.id+":init() "+((new Date).getTime()-this.initialTime)+"ms");let t=(new Date).getTime()-a+"ms";this.setAttribute("doo-render-time",t),this.setAttribute("title",this.getAttribute("title")+"|"+t)}return e}static async fetchURL(t){return new Promise((e,i)=>{const a=new XMLHttpRequest;a.open("GET",t),a.onload=()=>e(a.responseText),a.onerror=()=>i(a.statusText),a.send()})}setHttpRequest(t,e){let i=this,a=new XMLHttpRequest;a.onload=()=>{e(this.responseText,i)},a.open("GET",t,!0),a.send()}hasScroll(t){return"auto"===this.getStyle(t,"overflow-y")||"scroll"===this.getStyle(t,"overflow-y")}getStyle(t,e,i=null){if(t)return t&&t.currentStyle?t.currentStyle[e]:window.getComputedStyle(t,i).getPropertyValue(e)}async sortBy(t,e){let i=this.defaultDataSet||this.getAttribute(Doo.$Config.DATA_BIND);this.lastPage=null;let a,r=t.getAttribute("sort-dir")||1;if(Doo.util.sortBy(this.getCurrentData(i),e,r),[...t.parentElement.querySelectorAll(".doo-sort")].forEach(t=>{t.classList.remove("dir_1","dir_-1")}),t.classList.add(-1*parseInt(r)==1?"dir_-1":"dir_1"),t.setAttribute("sort-dir",-1*r),this.scrollElem&&(a=this.scrollElem.querySelectorAll("[page]"),a&&(a[0].innerHTML="")),this.lastInsertedElem=null,this.rendering=!0,await this.render(i,0),this.rendering=!1,this.container&&(this.container.scrollTop=0),a&&a.length>0)for(let t=a.length-1;t>0;t--)a[t].remove()}clearChildren(t,e="[page]"){let i=this.scrollElem.querySelectorAll("[page]");for(let e=i.length-1;e>0;e--)t&&t.find(t=>t===parseInt(i[e].getAttribute("page")))||i[e].remove()}async setScrollContainerHeight(t){let e=t||this.data[this.defaultDataSet].length;this.scrollElem.style.height=this.rowHeight*e+"px"}async windowWatcher(){document.body.setAttribute("doo-height",window.offsetHeight)}async addScrollWatcher(){if(this.scrollTarget&&"0"===this.componentContainer.getAttribute("data-container-height")&&(this.scrollElem=this.shadow.firstElementChild.querySelector(this.scrollTarget),this.scrollElem&&this.data[this.defaultDataSet].length>this.PAGE_SIZE)){this.scrollElem.style.position="relative",this.container=this.scrollElem.parentElement,this.rowHeight=this.scrollElem.offsetHeight/this.PAGE_SIZE,this.headerHeight=this.scrollElem.firstElementChild.offsetHeight,this.setScrollContainerHeight(),this.blockHeight=this.PAGE_SIZE*this.rowHeight;let t=!1;for(;this.blockHeightthis.lastScrollPos?1:0,a=this.scrollElem.querySelector('data[page="'+t+'"]'),r=this.scrollElem.querySelector('data[page="'+e+'"]');!a||e>t?(r||this.render(this.defaultDataSet,e),this.currentPage=this.render(this.defaultDataSet,t)):t!=this.currentPage&&(this.currentPage=this.render(this.defaultDataSet,t));let o=1===i?[t-1,t,e]:[t,t+1];this.clearChildren(o),this.lastScrollPos=this.container.scrollTop,this.rendering=!1}}}Doo.FieldType=class{constructor(t,e,i,a){this._fld=t,this.type=e,this.klass=i,this.instance=a,this._func=void 0,this._parentElem=void 0,this.$1=void 0,this.$2=void 0,this.$3=void 0,this.$4=void 0,this.$5=void 0,this.type===Doo.$Config.TYPE.COMPUTED&&this.createComputed()}set fld(t){this._fld=t}set parentElem(t){this._parentElem=t}set func(t){this._func=t}get fld(){return this._fld}get func(){return this._func}createComputed(){let t=this.fld.split("("),e=t[0].split(".").reverse(),i=e[0];Reflect.ownKeys(this.klass).filter(t=>t===i).length>0?(this.func=this.klass[i],Doo.$Computed[i]&&console.log("WARNING: ","Overwriting a Doo base Doo.$Computed method is not recommended")):Doo.$Computed[i]&&(this.func=Doo.$Computed[i]),this.fld=e.length>1?e[1]:void 0,"function"!=typeof this.func&&console.log("static "+i+"() is not defined in Doo nor has it been defined as a static function in this component");let a=t[1].replace(")","");if(a&&a.length>0){a=a.split(",");for(let t=0,e=a.length;t1e3?700:e.length>3?1:500;"deleteContentBackward"===t.inputType&&(i=700),this.filterTimeoutID&&clearTimeout(this.filterTimeoutID),this.filterTimeoutID=setTimeout(()=>{this.filterKey=e,this.setDataFilter(this.defaultDataSet),this.clearChildren(),this.render(),this.container&&(this.container.scrollTop=0)},i)}getDooParent(){if(this.shadow.host){let t=this.shadow.host;for(;t.parentNode;){if(t.parentNode.host)return t.parentNode.host;t=t.parentNode}}return null}static getDataBind(t){for(;t.parentNode;){if(t.hasAttribute(Doo.$Config.DATA_BIND))return t.getAttribute(Doo.$Config.DATA_BIND);t=t.parentNode}}static get $Config(){return Object.freeze({DATA_BIND:"bind",TEMPLATE_EXT:".html",COMPONENT_DIR:"/components",NAME:"Doo.HTML",TYPE:{DEFAULT:0,ENUM:1,DEEP:2,COMPUTED:3},MATCH:{ANY:-1,STARTS_WITH:0,EXACT:1},DELIMITER:{BEG:"{{",END:"}}"},DOCUMENT:"document",SHADOW:"shadow",FLEX_BODY:".fbody"})}static get $Computed(){return{randomImg:()=>"https://source.unsplash.com/random/720x400",childDoodad:t=>t.instance.injectChild(t.name,t.props),currentItem:t=>t.item.address,$0:t=>t.item[t.props[0]],$1:t=>t.item[t.props[1]],$2:t=>t.item[t.props[2]],greyShade:t=>["light-grey","grey","dark-grey","black"][t.i%4],randomTailwindShade:t=>100*Math.random(t.i%8+1),fraction:t=>["","whole","half","third","quarter","fifth"][t.arr.length],toUpperCase:t=>t.getValue().toUpperCase(),toLowerCase:t=>t.getValue().toLowerCase(),substring:t=>t.getValue().substring(t.$1,t.$2),length:t=>t.arr.length,found:t=>t.instance.getCurrentData(t.$1).length,count:t=>t.instance.data[t.$1].length,recCountByDataSetKey:t=>t.klass[t.dataSetKey].length,i:t=>t.i,row:t=>t.i+1,$id:t=>"_$"+t.i,n:t=>t.i+1,ts:()=>(new Date).getTime(),pluralize:t=>t.arr.length>1?"s":"",nbsp:()=>" ",zeroOne:t=>t.i%2,lorem:t=>{let e="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";if(!isNaN(t.$1)){let i=Math.min(t.$1,6);for(let t=1;tt.$1,html:t=>t.$1,dooReflect:t=>{let e=$Doo.instance[t.instance.getAttribute("id")].dataMap[t.i].split(":");return e.length>1?e[1]:e[0]},dooFlex:t=>{let e=$Doo.instance[t.instance.getAttribute("id")].flex;e=e[t.i];let i="";return e.includes(":")&&(i=e.split(":").length>2?"doo-center":"doo-end",e=e.replace(/:/g,"")),"doo-flex doo-"+e+" "+i},dooSort:t=>{let e=$Doo.instance[t.instance.getAttribute("id")].dataMap[t.i].split(":"),i=e[0].includes("(")?t.instance.getAttribute("id")+"."+e[0]:"'"+e[0]+"'",a=t.instance.getAttribute("id").split("_");return`${a[0]}[${a[1]}].sortBy(this,${i})`},dynamic:t=>Doo.$Config.DELIMITER.BEG+t.item+Doo.$Config.DELIMITER.END}}highlight(t){let e=this.filterKey&&this.filterKey.toLowerCase();if(!e||!t)return t;let i=new RegExp(e,"ig");return t.toString().replace(/&/gi,"&").replace(i,t=>`${t}`)}static get observedAttributes(){return["doo-refresh","key","doo-foreach","orientation","doo-dao","doo-db-update","doo-db","page-size","debug"]}static xAttr(){return["src","selected","checked","disabled","readonly"]}dynamicField(t){return Doo.$Config.DELIMITER.BEG+t+Doo.$Config.DELIMITER.END}async attributeChangedCallback(t,e,i){i.length>0&&e!==i&&("doo-db-update"===t||"doo-refresh"===t?await this.render():"page-size"===t?this.PAGE_SIZE=i:"debug"===t&&(Doo.debug=!0))}static async insertRow(t,e){document.createElement("div").innerHTML=``}static async insertComponent(t,e,i="."){let a=(t=t.trim()).toLowerCase(),r=document.createElement("div");r.innerHTML=``,document.querySelector(""+e).innerHTML=r.innerHTML}async initDooBind(){let t=document.querySelector("doo-bind"),e=t.querySelectorAll("data"),i=t.getAttribute("data-sheet-key"),a=[...e];for(let t in a){let e=a[t].getAttribute("name");if(!window.isReady[e]){let r=await this.getDataObj(a[t].getAttribute("data-fetch"),i);Doo.DAO.setData(e,r,this.constructor.name),window.isReady[e]=e}}t.innerHTML="",t.setAttribute("is-ready",!0)}async connectedCallback(){let t=this.getAttribute("context")||Doo.$Config.SHADOW;if(this.shadow=t===Doo.$Config.SHADOW?this.attachShadow({mode:"open"}):document,this.id||this.getDooParent()||(this.id=$Doo.getNextID(this.constructor.name)),!this.defaultDataSet&&this.getAttribute("bind")&&(this.defaultDataSet=this.getAttribute("bind")),$Doo.instance[this.id]||($Doo.instance[this.id]=this),"function"==typeof this.init&&await this.init(),this.debug){let t=this.constructor.name.toLowerCase();console.log(`Custom tag added: `)}await this.render(),this.scrollTarget&&(this.scrollElem=this.shadow.querySelector(this.scrollTarget)),this.ready=!0,"function"==typeof this.dooAfterRender&&await this.dooAfterRender()}static define(t,e=null){let i=e||t.name.toLowerCase();customElements.define("doo-"+i,t)}getFilteredData(t){return this.filteredData[t]}async setTemplate(t,e){let i=0===t.indexOf("0?this.firstElementChild.getElementsByTagName("template")[0].outerHTML:await this.getTemplateURI(t,e),i}async getTemplateURI(t){let e;return e=0===t.indexOf("#")?await document.querySelector(t).outerHTML:await Doo.fetchURL(t),e}dooParse(t){let e=t.cloneNode(!0);e.removeAttribute(Doo.$Config.DATA_BIND);let i=e.outerHTML.replace(/\t/g,"").replace(/\n/g,""),a=i;Doo.xAttr().forEach(t=>{i=i.replace(new RegExp(" "+t+'="{{(.+)}}"',"g")," doo-"+t+'="{{$1}}"')});let r=a===i;void 0===window[this.constructor.name]&&(window[this.constructor.name]=[]);let o=window[this.constructor.name].length;i=i.split('="doo.self.').join('="'+this.constructor.name+"["+o+"]."),i=i.split('="self.').join('="'+this.constructor.name+"["+o+"].");let s,n=i.split(Doo.$Config.DELIMITER.END),l=[],h=n.length;for(let t=0;te[r][i.trim()];let n=[];for(r=0;r-1?e=Doo.$Config.TYPE.COMPUTED:t.indexOf(".")>0?e=Doo.$Config.TYPE.DEEP:isNaN(t)||(e=Doo.$Config.TYPE.ENUM);let i=new Doo.FieldType(t,e,this.constructor,this);return this.visibleColumns.push(t),i.parentElem=this.parentElement,i}setItemValue(t,e,i){let a=e.split(".");for(var r=0;ri=i[t])}catch(t){console.log("Property not found",e,JSON.stringify(i))}return this.highlight(i)}renderNode(t,e,i=0,a=this.PAGE_SIZE){let r=t.templateArray,o=t.xHtml,s=(e=Array.isArray(e)?e:[e]).length,n=i+a;n>s&&(n=s);let l=[];for(let t=i;t{"checked"!==e&&"disabled"!==e||(t=t.replace(new RegExp(" doo-"+e+'="false"',"g")," ").replace(new RegExp(" doo-"+e+'="0"',"g")," ")),t=t.replace(new RegExp(" doo-"+e+"=","g")," "+e+"=").replace(new RegExp(" "+e+'=""',"g")," ")}),t}}getLevel(t){let e=0;for(;t.parentElement;)t=t.parentElement,e++;return e}clearDataFilter(t){this.filteredData[t]=void 0}setDataFilter(t,e){let i=this.filterKey&&this.filterKey.toLowerCase(),a=this.data[t].slice(),r=this;e?a=a.filter(e):i&&(i=String(i),a=a.filter(t=>r.visibleColumns.some(e=>String(r.getItemValue(t,e)).toLowerCase().indexOf(i)>-1))),this.setScrollContainerHeight(a.length),this.filteredData[t]=a.slice(0,this.page_size)}async getDataObj(dataSrc,dataSheetKey=null){let data,key;if(dataSrc=dataSrc.trim(),dataSrc.indexOf(".csv")>-1)return data=await Doo.fetchURL(dataSrc),Doo.DAO.csvToJson(data);if(dataSheetKey&&dataSrc.indexOf("worksheet")>-1){let t=dataSrc.split("|");return data=await this.tableTop(dataSheetKey,t[1]),data}if(dataSrc.indexOf("worksheet")>-1&&dataSrc.indexOf("key")>-1){let t=dataSrc.split("|"),e=t[1],i=t[3];return data=await this.tableTop(e,i),data}if(0===dataSrc.indexOf("http")||dataSrc.indexOf(".json")>0)return data=await Doo.fetchURL(dataSrc),JSON.parse(data);if(dataSrc.indexOf(".js")>0)return data=await __webpack_require__(5)(""+dataSrc),data.default;if(0===dataSrc.indexOf("{"))return JSON.parse(dataSrc);if(0===dataSrc.indexOf("..")||"this.parent.data"===dataSrc){let t=this.getDooParent();return t.data}if(dataSrc.indexOf("..")>0){let t=dataSrc.replace("[","").replace("]",""),e=t.split(".."),i=[],a=isNaN(e[0]),r=parseInt(a?e[0].charCodeAt(0):e[0]),o=parseInt(a?e[1].charCodeAt(0):e[1]);for(let t=r;t<=o;t++)i.push(a?String.fromCharCode(t):t);return i.splice(0)}if(dataSrc.includes("|")||0===dataSrc.indexOf("[")){let t=dataSrc.includes("|")?"|":",",e=dataSrc.replace("[","").replace("]","").split(t);return e.forEach(t=>t.trim()),e}return 0===dataSrc.indexOf("window.")||0===dataSrc.indexOf("const.")||0===dataSrc.indexOf("var.")?(key=dataSrc.split(".")[1].trim(),window[key]):dataSrc.includes(" ")||void 0===typeof eval(dataSrc)?(console.log("WARNING: "+dataSrc+" datasource not scooped properly"),dataSrc):eval(dataSrc)}async initDataNodes(t){this.dataMap=null,this.flex=null,this.hasAttribute("data-map")&&(0===this.getAttribute("data-map").indexOf("Doo.reflect")?this.dataMap=Reflect.ownKeys(Doo.DAO.getData(this.getAttribute(Doo.$Config.DATA_BIND))[0]):this.dataMap=this.getAttribute("data-map").split("|")),this.hasAttribute("flex")&&(this.flex=this.getAttribute("flex").replace("[","").replace("]","").split("|"));let e=t.content.querySelectorAll('[data-src="${data-map}"]');e.length>0&&[...e].forEach(t=>{let e=[];this.dataMap.forEach((t,i)=>{let a=void 0===this.flex[i]?1:this.flex[i],r=t.split(":"),o=r.length>1?r[1]:r[0],s="";a.includes(":")&&(s=a.split(":").length>2?"doo-center":"doo-end",a=a.replace(/:/g,"")),e.push({label:o,fieldName:this.dynamicField(r[0]),flex:a,flexJustify:s})});let i=this.htmlParse(t,e),a=t.parentElement;a.removeChild(t),a.innerHTML=i+a.innerHTML}),t.innerHTML=t.innerHTML.replace(/\$\{(.+?)\}/gm,(e,i)=>isNaN(i)?this.hasAttribute(i)?this.getAttribute(i):t.hasAttribute(i)?t.getAttribute(i):"":this.dataMap.length>0?Doo.$Config.DELIMITER.BEG+this.dataMap[i-1]+Doo.$Config.DELIMITER.END:void 0),[...t.content.querySelectorAll("["+Doo.$Config.DATA_BIND+"]")].forEach(t=>{if(!t.hasAttribute("data-src")){let e=this.hasAttribute("doo-dispatch")?"Doo.DAO":"this.data";t.setAttribute("data-src",e)}});let i,a,r=t.content.querySelectorAll("[data-src]"),o=r.length,s=0,n=[];for(s=0;st.level===e.level?0:t.level>e.level?1:-1).reverse(),s=0;s-1?n[s]:n[s].parentElement&&("void"===r[s].getAttribute(Doo.$Config.DATA_BIND)||"|UL|TBODY|THEAD|TFOOT|TR|SELECT|SECTION|".indexOf(`|${n[s].parentElement.tagName}|`)>-1)?n[s].parentElement:document.createElement("data"),i.dataKey=n[s].getAttribute(Doo.$Config.DATA_BIND);let t=this.dooParse(n[s],this.dataMap);i.templateArray=t.templateArray,i.xHtml=t.xHtml,i.name=s,i.level=this.getLevel(n[s]),i.useParent=n[s].useParent,i.noRepeat=n[s].hasAttribute("data-norepeat"),"DATA"!==i.tagName&&"STYLE"!==i.tagName&&"LINK"!==i.tagName||(n[s].parentElement?n[s].parentElement.replaceChild(i,n[s]):(console.log("Warning: Templates should only have one childnode"),n[s].appendChild(i))),this.place.push(i)}return this.place}async prepareTemplate(){this.debug&&console.log("Template:",this.template);let t=await this.setTemplate(this.template),e=document.createElement("div");e.innerHTML=t,e.querySelector("template")&&(e.innerHTML=e.querySelector("template")?t:``);let i=e.querySelector("template").cloneNode(!0);i.removeAttribute("id"),this.templateNode=document.createElement("template");let a=this.getAttribute("data-dispatch")||"undefined";this.templateNode.innerHTML=i.innerHTML.replace(/\${dataDispatch\}/g,a),this.templateElem=this.templateNode.content;let r=this.templateElem.querySelectorAll("style");r&&r.length>0&&this.templateElem.appendChild(r[0]),0===this.place.length&&(await this.initDataNodes(this.templateNode),this.getAttribute("style")&&this.templateNode.setAttribute("style",this.getAttribute("style")))}async setContext(){window[this.constructor.name]||(window[this.constructor.name]=[]),window[this.constructor.name].push(this),this.childNodes.length>0&&this.getElementsByTagName("template")&&this.getElementsByTagName("template").length>0&&this.removeChild(this.getElementsByTagName("template").item(0));let t=this.getAttribute("context")||Doo.$Config.SHADOW;if(t===Doo.$Config.SHADOW){this.shadow.host.style.visibility="hidden";let t=this.templateElem.firstElementChild.hasAttribute("class")?" "+this.templateElem.firstElementChild.getAttribute("class"):"",e=this.hasAttribute("class")?this.getAttribute("class")+" ":"";e+t!==""&&this.templateElem.firstElementChild.setAttribute("class",`${e}${t}`),this.shadow.appendChild(this.templateElem),this.componentContainer=this.shadow.host}else if(t===Doo.$Config.DOCUMENT){this.style.visibility="hidden";let t=this.parentElement.replaceChild(this.templateElem,this);this.componentContainer=t}this.initialHeight=this.shadow.firstElementChild.offsetHeight,this.shadow.firstElementChild.setAttribute("data-offset",this.initialHeight);const e=new Promise(t=>{let e=(navigator.userAgent.toUpperCase().includes("FIREFOX"),25),i=0,a=setInterval(()=>{i++,this.shadow.firstElementChild.setAttribute("data-offset",this.shadow.firstElementChild.offsetHeight);let e=parseInt(this.shadow.firstElementChild.getAttribute("data-offset"));(i>20||e!==this.initialHeight)&&(this.setScrollHeight(),clearInterval(a),t())},e)});await e,this.componentContainer.style.visibility="visible",this.ready=!0}async setScrollHeight(){this.scrollTarget&&(this.scrollElem=this.shadow.querySelector(this.scrollTarget),this.data[this.defaultDataSet]&&this.data[this.defaultDataSet].length>this.PAGE_SIZE&&this.addScrollWatcher())}getCurrentData(t){return this.getFilteredData(t)?this.getFilteredData(t):this.data[t]}renderSlice(t=this.data[this.defaultDataSet],e=0,i=null){i=i||t.length,e?this.setTimeout(()=>this.appendData(t,e),10):this.place[0].innerHTML=this.renderNode(this.place[0],t,e,i)}appendData(t,e){if(e){let e=t.length,i=document.createDocumentFragment();for(let t=0;t0&&t===this.defaultDataSet){let t=this.scrollElem.querySelector('data[page="'+e+'"]');if(t)0===t.innerHTML.length&&(t.innerHTML=this.renderNode(this.place[a],r,e*this.PAGE_SIZE,o)),this.lastInsertedElem=t;else{let t="TABLE"===this.scrollElem.tagName?"tbody":"data",i=document.createElement(t);i.setAttribute("page",e),i.innerHTML=this.renderNode(this.place[a],r,e*this.PAGE_SIZE,o),!this.lastInsertedElem||e>this.lastPage?this.place[a].parentElement.appendChild(i):this.lastInsertedElem.insertAdjacentElement("beforebegin",i),this.lastInsertedElem=i}this.lastInsertedElem.style.top=e*this.blockHeight+"px",this.lastInsertedElem.style.position="absolute"}else this.place[a].useParent?this.place[a].innerHTML=this.renderNode(this.place[a],r,parseInt(this.getAttribute("key")),1):this.place[a].innerHTML=this.renderNode(this.place[a],r,e*this.PAGE_SIZE,o);else this.place[a].append(this.renderNode(this.place[a],r,i,1));t===this.defaultDataSet&&(this.lastPage=e)}if(this.ready||this.setContext(),this.debug){this.getAttribute("title")||this.setAttribute("title",this.id+":init() "+((new Date).getTime()-this.initialTime)+"ms");let t=(new Date).getTime()-a+"ms";this.setAttribute("doo-render-time",t),this.setAttribute("title",this.getAttribute("title")+"|"+t)}return e}static async fetchURL(t){return new Promise((e,i)=>{const a=new XMLHttpRequest;a.open("GET",t),a.onload=()=>e(a.responseText),a.onerror=()=>i(a.statusText),a.send()})}setHttpRequest(t,e){let i=this,a=new XMLHttpRequest;a.onload=()=>{e(this.responseText,i)},a.open("GET",t,!0),a.send()}hasScroll(t){return"auto"===this.getStyle(t,"overflow-y")||"scroll"===this.getStyle(t,"overflow-y")}getStyle(t,e,i=null){if(t)return t&&t.currentStyle?t.currentStyle[e]:window.getComputedStyle(t,i).getPropertyValue(e)}async sortBy(t,e){let i=this.defaultDataSet||this.getAttribute(Doo.$Config.DATA_BIND);this.lastPage=null;let a,r=t.getAttribute("sort-dir")||1;if(Doo.util.sortBy(this.getCurrentData(i),e,r),[...t.parentElement.querySelectorAll(".doo-sort")].forEach(t=>{t.classList.remove("dir_1","dir_-1")}),t.classList.add(-1*parseInt(r)==1?"dir_-1":"dir_1"),t.setAttribute("sort-dir",-1*r),this.scrollElem&&(a=this.scrollElem.querySelectorAll("[page]"),a&&(a[0].innerHTML="")),this.lastInsertedElem=null,this.rendering=!0,await this.render(i,0),this.rendering=!1,this.container&&(this.container.scrollTop=0),a&&a.length>0)for(let t=a.length-1;t>0;t--)a[t].remove()}clearChildren(t,e="[page]"){let i=this.scrollElem.querySelectorAll("[page]");for(let e=i.length-1;e>0;e--)t&&t.find(t=>t===parseInt(i[e].getAttribute("page")))||i[e].remove()}async setScrollContainerHeight(t){let e=t||this.data[this.defaultDataSet].length;this.scrollElem.style.height=this.rowHeight*e+"px"}async windowWatcher(){document.body.setAttribute("doo-height",window.offsetHeight)}async addScrollWatcher(){if(this.scrollTarget&&(this.scrollElem=this.shadow.firstElementChild.querySelector(this.scrollTarget),this.scrollElem&&this.data[this.defaultDataSet].length>this.PAGE_SIZE)){this.scrollElem.style.position="relative",this.container=this.scrollElem.parentElement,this.rowHeight=this.scrollElem.offsetHeight/this.PAGE_SIZE,this.headerHeight=this.scrollElem.firstElementChild.offsetHeight,this.setScrollContainerHeight(),this.blockHeight=this.PAGE_SIZE*this.rowHeight;let t=!1;for(;this.blockHeightthis.lastScrollPos?1:0,a=this.scrollElem.querySelector('data[page="'+t+'"]'),r=this.scrollElem.querySelector('data[page="'+e+'"]');!a||e>t?(r||this.render(this.defaultDataSet,e),this.currentPage=this.render(this.defaultDataSet,t)):t!=this.currentPage&&(this.currentPage=this.render(this.defaultDataSet,t));let o=1===i?[t-1,t,e]:[t,t+1];this.clearChildren(o),this.lastScrollPos=this.container.scrollTop,this.rendering=!1}}}Doo.FieldType=class{constructor(t,e,i,a){this._fld=t,this.type=e,this.klass=i,this.instance=a,this._func=void 0,this._parentElem=void 0,this.$1=void 0,this.$2=void 0,this.$3=void 0,this.$4=void 0,this.$5=void 0,this.type===Doo.$Config.TYPE.COMPUTED&&this.createComputed()}set fld(t){this._fld=t}set parentElem(t){this._parentElem=t}set func(t){this._func=t}get fld(){return this._fld}get func(){return this._func}createComputed(){let t=this.fld.split("("),e=t[0].split(".").reverse(),i=e[0];Reflect.ownKeys(this.klass).filter(t=>t===i).length>0?(this.func=this.klass[i],Doo.$Computed[i]&&console.log("WARNING: ","Overwriting a Doo base Doo.$Computed method is not recommended")):Doo.$Computed[i]&&(this.func=Doo.$Computed[i]),this.fld=e.length>1?e[1]:void 0,"function"!=typeof this.func&&console.log("static "+i+"() is not defined in Doo nor has it been defined as a static function in this component");let a=t[1].replace(")","");if(a&&a.length>0){a=a.split(",");for(let t=0,e=a.length;t