taboo-table/taboo-table.min.js

html tables for taboo

var tabooTable=function(e,t,n){function o(e){N(),c.taboo.getColumnHeaders().forEach(function(e){p(e)}),c.taboo.getRows({objects:!1}).forEach(function(e){u({data:e})})}function r(){t.clear({silent:!0});for(var e=l.querySelector("thead tr").children,n=0;n<e.length;n++)t.addColumns([e[n].querySelector("span").textContent],{silent:!0});var o=l.querySelectorAll("tbody tr");for(n=0;n<o.length;n++){for(var r=o[n],a=[],d=0;d<r.children.length;d++)a.push(r.children[d].querySelector("span").textContent);t.addRow(a,{silent:!0})}t.triggerCallbacks("update")}function a(e,t){var n=window.getComputedStyle(t);s.forEach(function(t){e.style[t]=n[t]})}var d={addRowsButtons:!0,addRowHeaderButtons:!0,editableRows:!0,editableRowHeader:!0,autocomplete:!0,autocompleteLists:{}},i={};_.isObject(n)?_.extend(i,d,n):i=d;var l=document.querySelector(e),c=this,s=["padding","padding-top","padding-bottom","padding-left","padding-right","text-align","font","font-size","font-family","font-weight","border","border-top","border-bottom","border-left","border-right","height","width"];if(this.taboo=t,null===l)return void console.warn("Taboo-Table Selector "+e+" does not exist");this.updateTaboo=function(e){this.taboo=e,o()};var u=this.addRow=function(e){var t,n;"undefined"==typeof e&&(e={}),e.hasOwnProperty("index")&&(t=e.index),e.hasOwnProperty("data")&&(n=e.data);var o,r=l.querySelector("tbody tr"),d=l.querySelector("tbody td"),c=l.querySelector("tbody");if(t+=1){var s=c.querySelector("tr:nth-of-type("+t+")");o=null===typeof s?c.appendChild(document.createElement("tr")):c.insertBefore(document.createElement("tr"),s)}else o=c.appendChild(document.createElement("tr")),r&&a(o,r);for(var u,p,h=l.querySelector("thead tr").children,v=0;v<h.length;v++)u=document.createElement("td"),p=document.createElement("span"),u.appendChild(p),d&&a(u,d),n?p.textContent=n[v]:p.textContent="",i.editableRows&&(u.tabIndex="1"),o.appendChild(u);return i.addRowsButtons&&g(o),o},p=this.addColumn=function(e,t,n){"undefined"==typeof e&&(e="empty"),"undefined"==typeof t&&(t=[]);var o;if("number"==typeof n){n+=1;var r=l.querySelector("thead tr :nth-of-type("+n+")");o=null===r?l.querySelector("thead tr").appendChild(document.createElement("th")):l.querySelector("thead tr").insertBefore(document.createElement("th"),r)}else o=l.querySelector("thead tr").appendChild(document.createElement("th"));var a=o.appendChild(document.createElement("span")),d=l.querySelectorAll("tbody tr");a.textContent=e;for(var c=0;c<d.length;c++){var s,u=d[c];s="undefined"==t[c]?"":t[c];var p=document.createElement("td"),h=document.createElement("span");if(p.appendChild(h),"number"==typeof n){var v=u.querySelector(":nth-of-type("+n+")");u.insertBefore(p,v)}else u.appendChild(p);i.editable&&(p.tabIndex="1"),h.textContent=s}i.addRowHeaderButtons&&C(o)},h=this.deleteColumn=function(e){var t=l.querySelector("thead tr th:nth-of-type("+(e+1)+")"),n=l.querySelector("thead tr");n.removeChild(t);for(var o=l.querySelectorAll("tbody tr"),r=0;r<o.length;r++){var a=o[r],d=a.querySelector(":nth-of-type("+(e+1)+")");a.removeChild(d)}},v=(this.deleteRow=function(e){var t=l.querySelector("tbody tr:nth-of-type("+e+")"),n=l.querySelector("tbody");n.removeChild(t)},document.createEvent("Event"));v.initEvent("kill",!0,!0);var f=document.createEvent("Event");f.initEvent("stopKill",!0,!0);var y=function(e){var t;if("SPAN"===e.target.tagName)t=e.target.parentNode;else{if("TD"!==e.target.tagName)return void 0;t=e.target}var n=t.parentNode,o=(n.parentNode,n.lastChild),a=o.querySelector(".buttonWrapper");if(a)return a.dispatchEvent(f),a;var d=n.getBoundingClientRect(),i=document.createElement("div"),l=document.createElement("div"),c=document.createElement("p"),s=document.createElement("p"),p=20;i.className="buttonWrapper",i.appendChild(l),l.className="buttonsDiv",l.appendChild(c),l.appendChild(s),l.style.top=d.top+document.body.scrollTop+5+"px",l.style.left=d.right+document.body.scrollLeft-p-40+"px",c.textContent="+",s.textContent="—",c.className="plus",s.className="minus";var h=function(e){e.stopPropagation();var t=e.target,n=t.parentNode,o=n.parentNode,a=o.parentNode,d=a.parentNode,i=d.parentNode,l=Array.prototype.indexOf.call(i.childNodes,d);u({index:l}),r()},y=function(e){e.stopPropagation();var t=e.target,n=t.parentNode,o=n.parentNode,a=o.parentNode,d=a.parentNode,i=d.parentNode;Array.prototype.indexOf.call(i.childNodes,d);i.removeChild(d),r()};c.addEventListener("click",h),c.addEventListener("dblclick",h),s.addEventListener("click",y),s.addEventListener("dblclick",y);var m,g=!1;return i.addEventListener("kill",function(){g||(g=!0,m=window.setTimeout(function(){o.removeChild(i)},50))}),i.addEventListener("stopKill",function(){g=!1,window.clearTimeout(m)}),i.addEventListener("mouseover",function(){i.dispatchEvent(f)}),i.addEventListener("mouseout",function(){i.dispatchEvent(v)}),o.appendChild(i),i},m=function(e){var t=e.target,n=t.parentNode,o=n.lastChild,r=o.querySelector(".buttonWrapper");r&&r.dispatchEvent(v)},g=function(e){e.addEventListener("mouseover",y),e.addEventListener("mouseout",m),e.addEventListener("click",m)},E=function(e){var t;if("TH"===e.target.tagName)t=e.target;else{if("SPAN"!==e.target.tagName)return void 0;t=e.target.parentNode}var n=t.parentNode;n.parentNode;if("TH"!==t.nodeName)return void 0;var o=t.querySelector(".buttonsDiv");if(o)return o.dispatchEvent(f),o;var a=t.getBoundingClientRect(),d=document.createElement("div"),i=document.createElement("p"),l=document.createElement("p"),c=20;d.className="buttonsDiv",d.appendChild(i),d.appendChild(l),d.style.top=a.top+document.body.scrollTop+5+"px",d.style.left=a.right+document.body.scrollLeft-c-40+"px",i.textContent="+",l.textContent="—",i.className="plus",l.className="minus";var s=function(e){e.stopPropagation();var t=e.target,n=t.parentNode,o=n.parentNode,a=o.parentNode,d=Array.prototype.indexOf.call(a.childNodes,o);p("New Column",void 0,d),r()},u=function(e){e.stopPropagation();var t=e.target,n=t.parentNode,o=n.parentNode,a=o.parentNode,d=Array.prototype.indexOf.call(a.childNodes,o);h(d),r()};i.addEventListener("click",s),i.addEventListener("dblclick",s),l.addEventListener("click",u),l.addEventListener("dblclick",u);var y,m=!1;return d.addEventListener("kill",function(){m||(m=!0,y=window.setTimeout(function(){t.removeChild(d)},50))}),d.addEventListener("stopKill",function(){m=!1,window.clearTimeout(y)}),d.addEventListener("mouseover",function(){d.dispatchEvent(f)}),d.addEventListener("mouseout",function(){d.dispatchEvent(v)}),t.appendChild(d),d},b=function(e){var t=e.target,n=(t.parentNode,t.querySelector(".buttonsDiv"));n&&n.dispatchEvent(v)},C=function(e){e.addEventListener("mouseover",E),e.addEventListener("mouseout",b),e.addEventListener("click",b)},N=function(){l.innerHTML="<thead><tr></tr></thead><tbody></tbody>"};this.updateAutocompleteLists=function(e,t){i.autocompleteLists[e]=t};var w=function(e){var t,n={cloneProperties:["padding","padding-top","padding-bottom","padding-left","padding-right","text-align","font","font-size","font-family","font-weight","border","border-top","border-bottom","border-left","border-right","height","width"]},o=l,a=document.querySelector("body").appendChild(document.createElement("input")),d=_.extend({},n,e),c=37,s=38,p=39,h=40,v=13,f=27,y=9,m=8;a.style.position="absolute",a.style.display="none",o.style.cursor="pointer";var g=function(e){if(t=e.target,t!==o&&t){if("SPAN"===t.tagName&&(t=t.parentNode),"TBODY"===t.parentNode.parentNode.tagName&&!i.editableRows||"THEAD"===t.parentNode.parentNode.tagName&&!i.editableRowHeader)return;a.value=t.querySelector("span").textContent;var n=window.getComputedStyle(t);d.cloneProperties.forEach(function(e){a.style[e]=n[e]}),a.classList.remove("error"),a.style.display="";var r=t.getBoundingClientRect();a.style.top=r.top+document.body.scrollTop+"px",a.style.left=r.left+document.body.scrollLeft+"px",a.focus()}},E=function(){var e=a.value;return t.querySelector("span").textContent===e||a.classList.contains("error")?!0:(t.querySelector("span").textContent=a.value,void r())},b=function(e,t){var n;if(t===p)return e.nextElementSibling;if(t===c)return e.previousElementSibling;if(t===s){n=Array.prototype.indexOf.call(e.parentNode.children,e);var o=e.parentNode.previousElementSibling;return o?o.children[n]:!1}if(t===h||t===v){n=Array.prototype.indexOf.call(e.parentNode.children,e);var r=e.parentNode.nextElementSibling;return r?r.children[n]:(r=u(),r.children[n])}return!1},C=function(e){E(),a.style.display="none"},N=function(e){var n,r,d=a.selectionEnd===a.value.length,i=0===a.selectionEnd,l=Array.prototype.indexOf.call(t.parentNode.children,t),u=Array.prototype.indexOf.call(t.parentNode.parentNode.children,t.parentNode);if(e.which===v){a.dispatchEvent(new Event("blur")),e.preventDefault(),e.stopPropagation(),n=o.querySelector("tr:nth-child("+(u+1)+") td:nth-child("+(l+1)+")");var m=b(n,v);m.focus()}else e.which===f?(a.value=t.querySelector("span").textContent,e.preventDefault(),e.stopPropagation(),a.style.display="none",t.focus()):e.which===y?(E(),a.style.display="none",n=o.querySelector("tr:nth-child("+(u+1)+") td:nth-child("+(l+1)+")"),r=b(n,p),r?r.focus():n.focus(),e.preventDefault(),e.stopPropagation()):d&&(e.which===h||e.which===p)||i&&(e.which===s||e.which===c)?(r=b(t,e.which),r&&(r.focus(),e.preventDefault(),e.stopPropagation())):S(e,l,u)},w=function(e,t){var n=o.querySelector("tr th:nth-child("+(e+1)+") span").textContent,r=i.autocompleteLists[n];console.log(n);var d=o.querySelectorAll("tr td:nth-child("+(e+1)+") span"),l=[];return Array.prototype.forEach.call(d,function(e,n){n!==t&&e.textContent.startsWith(a.value)&&l.push(e.textContent)}),_.isArray(r)&&r.forEach(function(e,t){e.startsWith(a.value)&&l.push(e)}),l.sort(),l},S=function(e,t,n){if(i.autocomplete){var o=a.selectionStart,r=e.shiftKey?String.fromCharCode(e.which):String.fromCharCode(e.which).toLowerCase(),d=window.getSelection().toString(),l=/[a-zA-Z0-9]/;if(l.exec(r)){var c;if(e.preventDefault(),0===d.length)a.value=a.value+r,c=w(t,n),c.length>0&&(a.value=a.value+c[0].slice(o+1,c[0].length),a.setSelectionRange(o+1,c[0].length));else{window.getSelection();a.value=a.value.slice(0,a.selectionStart)+a.value.slice(a.selectionEnd),a.value=a.value+r,c=w(t,n),c.length>0&&(a.value=a.value+c[0].slice(o+1,c[0].length),a.setSelectionRange(o+1,c[0].length))}}}},x=function(e){var t=b(e.target,e.which);t?t.focus():e.which===m&&(e.preventDefault(),g(e))},L=function(e){},q=function(e){if("none"!==a.style.display){var n=t.getBoundingClientRect();a.style.top=n.top+document.body.scrollTop+"px",a.style.left=n.left+document.body.scrollLeft+"px",a.style.width=t.offsetWidth+"px",a.style.height=t.offsetHeight+"px"}};a.addEventListener("paste",L),a.addEventListener("input",L),a.addEventListener("blur",C),a.addEventListener("keydown",N),o.addEventListener("click",g),o.addEventListener("keypress",g),o.addEventListener("dblclick",g),o.addEventListener("keydown",x),window.addEventListener("resize",q)};new w;o(t),t.numberOfColumns()>0&&0===t.numberOfRows()&&u(),t.registerCallback("update",o)};