json-table-editor.min.js

!function(t,e){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=t.document?e(t,!0):function(t){if(!t.document)throw new Error("JSONTableEditor requires a window with a document");return e(t)}:e(t)}("undefined"!=typeof window?window:this,function(s,t){"use strict";var o={formatOptions:[{type:"button",name:"bold",innerHTML:"Bold"},{type:"button",name:"italic",innerHTML:"Italic"},{type:"radio",name:"align",options:["left","center","right"]}],defaultRows:3,defaultColumns:3,maxColumns:1e3,maxRows:1e3,selectorWrongMsg:"Can't find html element with given selector.",formatOptionsId:"jt-format-options",colBtnId:"jt-col-btn",rowBtnId:"jt-row-btn",expandOptionsId:"jt-expand-options",toggleOptionsId:"jt-options-toggle",tableMainClass:"js-main-table"};function n(t){return this.init(t)}function e(t,e){return this.init(t,e)}function i(t,e){return this.init(t,e)}function a(t,e,n){return this.init(t,e,n)}function r(t,e){return this.init(t,e)}function h(t,e,n){return this.init(t,n,e)}return n.prototype={init:function(t){this.formatOptions=t},getTableData:function(t){try{var e=document.createElement("div");e.innerHTML=t;var n=h.qs("table",e);if(!n)return null;for(var o=[],i=h.qsa("tr",n),a=0;a<i.length;a++){var s=h.qsa("th,td",i[a]);if(s.length){for(var r=[],l=0;l<s.length;l++)r.push(this.getCellData(s[l]));o.push(r)}}return o.length?o:null}catch(t){return null}},getCellData:function(t){var e={};return e.content=t.textContent,e.format={},this.hasOption("bold")&&("bold"===t.style.fontWeight||"bolder"===t.style.fontWeight||599<Number(t.style.fontWeight))&&(e.format.bold=!0),this.hasOption("italic")&&"italic"===t.style.fontStyle&&(e.format.italic=!0),this.hasOption("underline")&&"underline"===t.style.textDecorationLine&&(e.format.underline=!0),this.hasOption("align")&&""!==t.style.textAlign&&(e.format.align=t.style.textAlign),e},hasOption:function(e){return this.formatOptions.filter(function(t){return t.name===e}).length}},e.prototype={init:function(t,e){this.view=t,this.model=e,this.bindArrowKeys()},bindArrowKeys:function(){var e=this;this.view.container.addEventListener("keydown",function(t){e.model.currentCell&&"TD"===t.target.tagName&&(37===t.keyCode&&h.cursorAtEndOrStart(t.target).atStart?e.moveArrowLeftRight(-1):38===t.keyCode&&h.cursorAtEndOrStart(t.target).atStart?e.moveArrowUpDown(-1):39===t.keyCode&&h.cursorAtEndOrStart(t.target).atEnd?e.moveArrowLeftRight(1):40===t.keyCode&&h.cursorAtEndOrStart(t.target).atEnd&&e.moveArrowUpDown(1))})},moveArrowUpDown:function(t){var e=Object.assign({},this.model.currentCell);e.row=(Number(e.row)+t+this.model.meta.rows)%this.model.meta.rows,(0===e.row&&1===t||e.row===this.model.meta.rows-1&&-1===t)&&(e.col=(Number(e.col)+t+this.model.meta.columns)%this.model.meta.columns),this.view.focusCurrentCell(e)},moveArrowLeftRight:function(t){var e=Object.assign({},this.model.currentCell);e.col=(Number(e.col)+t+this.model.meta.columns)%this.model.meta.columns,(0===e.col&&1===t||e.col===this.model.meta.columns-1&&-1===t)&&(e.row=(Number(e.row)+t+this.model.meta.rows)%this.model.meta.rows),this.view.focusCurrentCell(e)}},i.prototype={init:function(t,e){this.table=document.createElement("table"),this.table.setAttribute("class",o.tableMainClass),this.cellTag="td",this.container=t,this.formatOptions=e,this.formatOptionsId=o.formatOptionsId,this.colBtnId=o.colBtnId,this.rowBtnId=o.rowBtnId,this.expandOptionsId=o.expandOptionsId,this.toggleOptionsId=o.toggleOptionsId},insert:function(t){var e=this.container;e.innerHTML="",e.append(this.table),e.insertAdjacentHTML("afterbegin",this.formatOptionsContainer()),this.updateFormatOptions(),e.insertAdjacentHTML("beforeend",this.utilButtonsContainer()),this.updateUtilButtons(t.meta.rows,t.meta.columns,t.maxRows,t.maxColumns)},update:function(t){return this.table.innerHTML=this.html(t.meta.rows,t.meta.columns,t.data),t.currentCell&&this.focusCurrentCell(t.currentCell),this.updateUtilButtons(t.meta.rows,t.meta.columns,t.maxRows,t.maxColumns),!0},getById:function(t){return h.qs("#"+t,this.container)},updateFormatOptions:function(t){this.getById(this.formatOptionsId).innerHTML=this.formatButtons(t)+this.formatRadioButtons(t)},updateExpandIcons:function(t){this.hideExpandOptions();var e=h.getStyle(this.table),n=this.getTD(t),o=parseFloat(e.marginBottom),i=this.table.offsetHeight,a=n.offsetTop,s=n.offsetHeight,r=this.getById(this.rowBtnId);r.style.top=String(-i-o+a)+"px",r.style.height=String(s)+"px",r.style.display="inline";var l=n.offsetLeft,d=n.offsetWidth,u=this.getById(this.colBtnId);u.style.left=String(l+1)+"px",u.style.width=String(d)+"px",u.style.display="inline"},toggleExpandOptions:function(t){if("row"===t)var e=this.rowBtnId,n=this.colBtnId;else e=this.colBtnId,n=this.rowBtnId;var o=this.getById(n);this.getById(e).classList.toggle("expand-options"),o.classList.remove("expand-options")},hideExpandOptions:function(){for(var t=[this.rowBtnId,this.colBtnId],e=0;e<t.length;e++){this.getById(t[e]).classList.remove("expand-options")}},getTD:function(t){if(t){var e=Number(t.row),n=Number(t.col),o=h.rcs(e,n);return h.qs(o,this.container)}},formatRadioButtons:function(t){for(var e="",n=this.formatOptions.filter(function(t){return"radio"===t.type}),o=0;o<n.length;o++){e+="<span>";for(var i=0;i<n[o].options.length;i++){var a=n[o].options[i];e+='<button data-code="6" data-formatkey="'+n[o].name+'" data-radioval="'+a+'" title="'+a+" "+n[o].name+'" class="'+(t&&t[n[o].name]===a?" active":"")+'"'+(t?" ":" disabled")+">"+a+"</button>"}e+="</span>"}return e},formatButtons:function(t){for(var e="",n=this.formatOptions.filter(function(t){return"button"===t.type}),o=0;o<n.length;o++)e+='<button data-code="6" data-formatkey="'+n[o].name+'" class="'+(t&&t[n[o].name]?" active":"")+'"'+(t?" ":" disabled")+">"+n[o].innerHTML+"</button>";return e},focusCurrentCell:function(t){var e=this.getTD(t);e&&(e.focus(),setTimeout(function(){h.setEndOfContenteditable(e)},0))},formatOptionsContainer:function(){var t='<div class="jt-format-options" id="'+this.formatOptionsId+'">';return t+="</div>"},utilButtonsContainer:function(){return'<div class="jt-row-btn" id="'+this.rowBtnId+'"></div><div class="jt-col-btn" id="'+this.colBtnId+'"></div>'},updateUtilButtons:function(t,e,n,o){this.getById(this.rowBtnId).innerHTML='<span id="'+this.toggleOptionsId+'"><i class="jt-left-arrow"></i></span><div class="jt-expand-options" id="'+this.expandOptionsId+'">'+(t<n?'<button data-code="3">Insert above</button>':"")+(t<n?'<button data-code="4">Insert below</button>':"")+(1<t?'<button data-code="5" style="color:red;">Delete row</button>':"")+"</div>",this.getById(this.colBtnId).innerHTML='<span id="'+this.toggleOptionsId+'"><i class="jt-up-arrow"></i></span><div class="jt-expand-options" id="'+this.expandOptionsId+'">'+(e<o?'<button data-code="0">Insert before</button>':"")+(e<o?'<button data-code="1">Insert after</button>':"")+(1<e?'<button data-code="2" style="color:red;">Delete column</button>':"")+"</div>"},html:function(t,e,n){for(var o="",i=0;i<t;i++){o+="<tr>";for(var a=0;a<e;a++)o+=this.cell(i,a,n[i][a]);o+="</tr>"}return o},cell:function(t,e,n){var o="";return o+="<"+this.cellTag+" contenteditable",o+=" data-row='"+t+"'",o+=" data-col='"+e+"'",o+=" class='"+this.cellClassList(n.format)+"'",o+=">"+n.content+"</"+this.cellTag+">"},cellClassList:function(t){var e="";if(t&&"object"==typeof t)for(var n in t)t.hasOwnProperty(n)&&t[n]&&("true"!==t[n]&&!0!==t[n]?e+="jt-cell-"+t[n].replace(/ /g,"-")+" ":e+="jt-cell-"+n.replace(/ /g,"-")+" ");return e}},a.prototype={init:function(t,e,n){this.tableData=t||{meta:{},data:[]},this.meta=this.tableData.meta,this.data=this.tableData.data,this.meta.rows=null,this.meta.columns=null,this.currentCell=null,this.maxRows=e,this.maxColumns=n,this.data_changed_event=new s.Event("dataChanged")},isValidData:function(){var t=this.data;return t&&"object"==typeof t&&t.constructor===Array&&t.length&&t[0].length&&t[0][0].hasOwnProperty("content")},setRowColUtil:function(t,e){this.meta.rows=Number(t),this.meta.columns=Number(e)},setRowCol:function(){var t=this.data.length,e=this.data[0].length;this.setRowColUtil(t,e)},setDefaultData:function(t,e){this.setRowColUtil(t,e),this.addRemoveExtraRowColumn()},setCurrentCell:function(t){this.currentCell=t.dataset},getFormat:function(t){var e=Number(t.dataset.row),n=Number(t.dataset.col);return this.data[e][n].format},saveContent:function(t){if(t){var e=Number(t.dataset.row),n=Number(t.dataset.col);this.data.length>e&&this.data[0].length>n&&(this.data[e][n].content=t.innerHTML)}},saveFormat:function(t){if(this.currentCell){var e=this.currentCell.row,n=this.currentCell.col;if(this.data.length>e&&this.data[0].length>n){var o=this.data[e][n].format,i=t.dataset.formatkey,a=t.dataset.radioval;a||(a=!o[i]),o[i]=a}}},handlePaste:function(t,e){var n=Number(e.dataset.row),o=t.length,i=Math.min(Math.max(n+o,this.meta.rows),this.maxRows),a=Number(e.dataset.col),s=t[Math.floor(o/2)].length,r=Math.min(Math.max(a+s,this.meta.columns),this.maxColumns);for(this.setDefaultData(i,r);t[0].length<s;)t[0].unshift(this.defaultCellData());for(var l=0;l<Math.min(o,this.meta.rows-n);l++)for(var d=0;d<Math.min(t[l].length,this.meta.columns-a);d++)this.data[n+l][a+d]=t[l][d]},defaultCellData:function(){var t={content:"",format:{}};return t},addRemoveExtraRowColumn:function(){for(var t=s.Number(this.meta.rows),e=s.Number(this.meta.columns);this.data.length!==t;)if(this.data.length>t)this.data.pop();else{if(!(this.data.length<t))break;this.data.push([])}for(var n=0;n<t;n++)for(;this.data[n].length!==e;)if(this.data[n].length>e)this.data[n].pop();else{if(!(this.data[n].length<e))break;this.data[n].push(this.defaultCellData())}},insertaRow:function(t){var e=Number(this.currentCell.row);this.meta.rows<this.maxRows&&(this.meta.rows+=1,this.data.splice(e+t,0,new Array),0===t&&(this.currentCell.row=e+1),this.addRemoveExtraRowColumn())},removeRow:function(){var t=Number(this.currentCell.row);1<this.meta.rows&&(this.meta.rows-=1,this.data.splice(t,1),this.addRemoveExtraRowColumn())},insertColumn:function(t){var e=Number(this.meta.rows),n=Number(this.currentCell.col);if(this.meta.columns<this.maxColumns){this.meta.columns+=1;for(var o=0;o<e;o++)this.data[o].splice(n+t,0,this.defaultCellData());0===t&&(this.currentCell.col=n+1),this.addRemoveExtraRowColumn()}},removeColumn:function(){var t=Number(this.meta.rows),e=Number(this.currentCell.col);if(1<this.meta.columns){this.meta.columns-=1;for(var n=0;n<t;n++)this.data[n].splice(e,1);this.addRemoveExtraRowColumn()}}},r.prototype={init:function(t,e){this.view=t,this.model=e,this.paste=new n(t.formatOptions)},dispatchDataEvent:function(){this.view.container.dispatchEvent(this.model.data_changed_event)},handleCellFocus:function(t){var e=this;this.model.setCurrentCell(t.target),this.view.updateExpandIcons(this.model.currentCell),setTimeout(function(){e.view.updateFormatOptions(e.model.getFormat(t.target))},0)},handleCellBlur:function(t){var e=this;this.model.saveContent(t.target),this.dispatchDataEvent(),setTimeout(function(){e.view.updateFormatOptions()},0)},afterEventActions:function(){this.dispatchDataEvent(),this.view.update(this.model)},handleBtnClick:function(t){var e=t.target.dataset,n=s.Number(e.code);if(0===n)this.model.insertColumn(0);else if(1===n)this.model.insertColumn(1);else if(2===n)this.model.removeColumn();else if(3===n)this.model.insertaRow(0);else if(4===n)this.model.insertaRow(1);else if(5===n)this.model.removeRow();else if(6===n){this.model.saveFormat(t.target);var o=this.view.getTD(this.model.currentCell);this.model.saveContent(o)}this.afterEventActions()},handlePaste:function(t){var e=(t.clipboardData||s.clipboardData).getData("text/html"),n=this.paste.getTableData(e);n&&(t.stopPropagation(),t.preventDefault(),t.target.blur(),this.model.handlePaste(n,t.target),this.afterEventActions())},bindEventOnExpandIcons:function(){var e=this,n=this.view.getById(this.view.rowBtnId),o=this.view.getById(this.view.colBtnId),t="#"+this.view.toggleOptionsId;h.delegate(n,t+","+t+" i","click",function(){e.view.toggleExpandOptions("row")}),h.delegate(o,t+","+t+" i","click",function(){e.view.toggleExpandOptions("col")}),h.on(h.qs("body"),"mousedown",function(t){n.contains(t.target)||o.contains(t.target)||e.view.hideExpandOptions()})},bindPasteEvent:function(){this.view.container.addEventListener("paste",this.handlePaste.bind(this))},bindEventOnCell:function(t,e){h.delegate(this.view.table,this.view.cellTag,t,e)},bindEventOnButtons:function(){for(var e=this,t=[this.view.formatOptionsId,this.view.rowBtnId,this.view.colBtnId],n=0;n<t.length;n++)h.delegate(h.qs("#"+t[n],this.view.container),"button","click",function(t){e.handleBtnClick(t)}),h.delegate(h.qs("#"+t[n],this.view.container),"button","mousedown",function(t){t.preventDefault()})},bindEvents:function(){var e=this;this.bindEventOnCell("focus",function(t){e.handleCellFocus(t)}),this.bindEventOnCell("blur",function(t){e.handleCellBlur(t)}),this.bindEventOnExpandIcons(),this.bindEventOnButtons(),this.bindPasteEvent()}},h.prototype={init:function(t,e,n){if(n&&"object"==typeof n||(n={}),this.formatOptions=n.formatOptions||o.formatOptions,this.maxRows=n.maxRows||o.maxRows,this.maxColumns=n.maxColumns||o.maxColumns,this.defaultRows=n.defaultRows||o.defaultRows,this.defaultColumns=n.defaultColumns||o.defaultColumns,this.allowPaste=n.allowPaste,this.container=h.qs(t),!this.container)throw o.selectorWrongMsg;this.model=new a(e,this.maxRows,this.maxColumns),this.view=new i(this.container,this.formatOptions),this.controller=new r(this.view,this.model),this.setupTable()},setupTable:function(){this.model.isValidData()?(this.model.setRowCol(),this.initTable()):(this.model.setDefaultData(this.defaultRows,this.defaultColumns),this.initTable("focus"))},initTable:function(t){this.view.insert(this.model),this.view.update(this.model),this.controller.bindEvents(),this.controller.dispatchDataEvent(),"focus"===t&&this.view.focusCurrentCell({row:0,col:0}),this.keyboardHandler=new e(this.view,this.model)}},h.qs=function(t,e){return(e||document).querySelector(t)},h.qsa=function(t,e){return(e||document).querySelectorAll(t)},h.on=function(t,e,n,o){t.addEventListener(e,n,!!o)},h.rcs=function(t,e){return"[data-row='"+String(t)+"'][data-col='"+String(e)+"']"},h.getStyle=function(t){return t.currentStyle||s.getComputedStyle(t)},h.delegate=function(o,i,t,a){h.on(o,t,function(t){var e=t.target,n=h.qsa(i,o);0<=Array.prototype.indexOf.call(n,e)&&a.call(e,t)},"blur"===t||"focus"===t)},h.setEndOfContenteditable=function(t){var e,n;document.createRange?((e=document.createRange()).selectNodeContents(t),e.collapse(!1),(n=s.getSelection()).removeAllRanges(),n.addRange(e)):document.selection&&((e=document.body.createTextRange()).moveToElementText(t),e.collapse(!1),e.select())},h.orEmpty=function(t){return t||""},h.cursorAtEndOrStart=function(t){var e,n,o=!1,i=!1;if(s.getSelection){var a=s.getSelection();a.rangeCount&&((n=(e=a.getRangeAt(0)).cloneRange()).selectNodeContents(t),n.setEnd(e.startContainer,e.startOffset),o=""===n.toString(),n.selectNodeContents(t),n.setStart(e.endContainer,e.endOffset),i=""===n.toString())}return{atStart:o,atEnd:i}},"function"!=typeof Object.assign&&Object.defineProperty(Object,"assign",{value:function(t,e){if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var n=Object(t),o=1;o<arguments.length;o++){var i=arguments[o];if(null!=i)for(var a in i)Object.prototype.hasOwnProperty.call(i,a)&&(n[a]=i[a])}return n},writable:!0,configurable:!0}),s.JSONTableEditor=h});