diff --git a/README.md b/README.md index d1a0dbf..f53626a 100644 --- a/README.md +++ b/README.md @@ -214,7 +214,7 @@ datatable.editable.saveCell("Foobar"); ### `saveRow(data, row)` -Set the new content of a row. Just pass a reference to the row as the first argument and the new content of the cells as the second. +Set the new content of a row. Just pass the new row data as the first argument and a reference to the row as the second This can be used to either close and save a row that is currently in edit mode (as above) or for quickly setting the content of the row. @@ -243,6 +243,17 @@ datatable.editable.saveRow(["foo", "bar", "baz", "qux"]); ## Changelog +`v0.0.9` + +* Change event name: + * `datatable.editable.init` -> `editable.init` + +* Add events: + * `editable.save.cell` + * `editable.save.row` + * `editable.context.open` + * `editable.context.close` + `v0.0.8` * Allow `saveCell()` and `saveRow()` methods to save the current cell/row diff --git a/bower.json b/bower.json index 601583b..b87d13b 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "vanilla-datatables-editable", - "version": "0.0.8", + "version": "0.0.9", "main": "datatable.editable.min.js", "ignore": [ ".gitattributes", diff --git a/datatable.editable.css b/datatable.editable.css index ae744aa..2396956 100644 --- a/datatable.editable.css +++ b/datatable.editable.css @@ -1,10 +1,10 @@ -/*! Editable 0.0.7 +/*! Editable 0.0.9 * © 2016-2017 Karl Saunders */ /** * @summary Editable * @description Allow editing of cells and rows - * @version 0.0.7 + * @version 0.0.9 * @file datatable.editable.js * @author Karl Saunders * @contact mobius1@gmx.com diff --git a/datatable.editable.js b/datatable.editable.js index f816158..7f87c5b 100644 --- a/datatable.editable.js +++ b/datatable.editable.js @@ -1,10 +1,10 @@ -/*! Editable 0.0.8 +/*! Editable 0.0.9 * © 2016-2017 Karl Saunders */ /** * @summary Editable * @description Allow editing of cells and rows - * @version 0.0.8 + * @version 0.0.9 * @file datatable.editable.js * @author Karl Saunders * @contact mobius1@gmx.com @@ -50,6 +50,9 @@ if (window.DataTable && typeof window.DataTable === "function") { separator: "datatable-editor-separator" }, + // include hidden columns in the editor + hiddenColumns: false, + // enable th context menu contextMenu: true, @@ -207,7 +210,7 @@ if (window.DataTable && typeof window.DataTable === "function") { that.bindEvents(); setTimeout(function() { - instance.emit("datatable.editable.init"); + instance.emit("editable.init"); }, 10); }; @@ -367,6 +370,8 @@ if (window.DataTable && typeof window.DataTable === "function") { this.data = {}; this.editing = this.editingCell = false; + + instance.emit("editable.save.cell"); }; /** @@ -471,6 +476,8 @@ if (window.DataTable && typeof window.DataTable === "function") { instance.columns().rebuild(); this.closeModal(); + + instance.emit("editable.save.row"); }; /** @@ -568,6 +575,8 @@ if (window.DataTable && typeof window.DataTable === "function") { if (this.config.contextMenu) { document.body.appendChild(this.container); this.closed = false; + + instance.emit("editable.context.open"); } }; @@ -579,6 +588,8 @@ if (window.DataTable && typeof window.DataTable === "function") { if (this.config.contextMenu && !this.closed) { this.closed = true; document.body.removeChild(this.container); + + instance.emit("editable.context.close"); } }; diff --git a/datatable.editable.min.css b/datatable.editable.min.css index 893cf3c..3767c94 100644 --- a/datatable.editable.min.css +++ b/datatable.editable.min.css @@ -1,3 +1,3 @@ -/*! Editable 0.0.8 +/*! Editable 0.0.9 * © 2016-2017 Karl Saunders */.datatable-editor-modal,.datatable-editor-modal.closed{animation:250ms ease 0s fadeIn}.datatable-editor-modal{position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.6)}.datatable-editor-inner,.datatable-editor-modal.closed .datatable-editor-inner{animation:250ms ease 0s slideIn}.datatable-editor-inner{width:30%;margin:10% auto;background-color:#fff;border-radius:5px}.datatable-editor-header{position:relative;border-bottom:1px solid #ccc}.datatable-editor-header h4{font-size:20px;margin:0}.datatable-editor-header button{position:absolute;right:10px;top:10px;background-color:transparent;border:none;cursor:pointer;font-size:24px;padding:5px;line-height:1;opacity:.6}.datatable-editor-input,.datatable-editor-save{font-size:inherit;font-family:inherit;font-weight:inherit}.datatable-editor-header button:hover{opacity:1}.datatable-editor-header{padding:15px 30px}.datatable-editor-block{padding:15px 60px}.datatable-editor-row{margin:0 0 15px}.datatable-editor-row:last-child{margin:0 0 5px;text-align:right}.datatable-editor-label{width:25%;text-align:right;padding:0 15px}.datatable-editor-input,.datatable-editor-label{display:inline-block}.datatable-editor-input{padding:4px 6px;border:1px solid #ccc;width:100%;box-sizing:border-box;margin:-5px 0;color:inherit}.datatable-editor-row .datatable-editor-input{margin:0;width:75%}.datatable-editor-save{background-color:#27ae60;border:1px solid #27ae60;padding:6px 12px;color:#fff;cursor:pointer;border-radius:3px}.datatable-editor-save:hover{background-color:#2cc36b;border-color:#2cc36b}.datatable-editor-wrapper{position:absolute}.datatable-editor-menu{background:#fff;border-radius:3px;margin:0;min-width:220px;padding:5px 0;box-shadow:0 0 10px 2px #aaa}.datatable-editor-menu li{list-style:none}.datatable-editor-menu a{box-sizing:border-box;color:inherit;display:block;padding:5px 15px;text-decoration:none;width:100%}.datatable-editor-menu a:hover{background-color:#ddd}.datatable-editor-separator{border-bottom:1px solid #aaa;margin:5px 0}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideIn{from{opacity:0;transform:translate3d(0,-10%,0)}to{opacity:1;transform:translate3d(0,0,0)}} \ No newline at end of file diff --git a/datatable.editable.min.js b/datatable.editable.min.js index ff6d400..eb8e694 100644 --- a/datatable.editable.min.js +++ b/datatable.editable.min.js @@ -1,10 +1,10 @@ -/*! Editable 0.0.8 +/*! Editable 0.0.9 * © 2016-2017 Karl Saunders */ /** * @summary Editable * @description Allow editing of cells and rows - * @version 0.0.7 + * @version 0.0.9 * @file datatable.editable.js * @author Karl Saunders * @contact mobius1@gmx.com @@ -22,4 +22,4 @@ * * For details please refer to: https://github.com/Mobius1/Vanilla-DataTables */ -window.DataTable&&"function"==typeof window.DataTable&&DataTable.extend("editable",function(t,e){var i=this,n={classes:{row:"datatable-editor-row",form:"datatable-editor-form",item:"datatable-editor-item",menu:"datatable-editor-menu",save:"datatable-editor-save",block:"datatable-editor-block",close:"datatable-editor-close",inner:"datatable-editor-inner",input:"datatable-editor-input",label:"datatable-editor-label",modal:"datatable-editor-modal",action:"datatable-editor-action",header:"datatable-editor-header",wrapper:"datatable-editor-wrapper",container:"datatable-editor-container",separator:"datatable-editor-separator"},contextMenu:!0,menuItems:[{text:" Edit Cell",action:function(t){this.editCell()}},{text:" Edit Row",action:function(t){this.editRow()}},{separator:!0},{text:" Remove Row",action:function(t){confirm("Are you sure?")&&this.removeRow()}}]},a=function(t,e,i){t.addEventListener(e,i,!1)},s=function(t,e,i){t.removeEventListener(e,i)},o=function(t,e){return t&&t!==document.body&&(e(t)?t:o(t.parentNode,e))},d=function(t,e,i){var n;return function(){var a=this,s=arguments,o=i&&!n;clearTimeout(n),n=setTimeout(function(){n=null,i||t.apply(a,s)},e),o&&t.apply(a,s)}},l=function(t,i){this.target=t,this.config=e.extend(n,i)};return l.prototype.init=function(){var t=this,n=t.config;e.classList.add(i.wrapper,"datatable-editable"),n.contextMenu&&(t.container=e.createElement("div",{id:n.classes.container}),t.wrapper=e.createElement("div",{class:n.classes.wrapper}),t.menu=e.createElement("ul",{class:n.classes.menu}),n.menuItems&&n.menuItems.length&&n.menuItems.forEach(function(i){var s=e.createElement("li",{class:i.separator?n.classes.separator:n.classes.item});if(!i.separator){var o=e.createElement("a",{class:n.classes.action,href:i.url||"#",html:i.text});s.appendChild(o),i.action&&"function"==typeof i.action&&a(o,"click",function(e){e.preventDefault(),i.action.call(t,e)})}t.menu.appendChild(s)}),t.wrapper.appendChild(t.menu),t.container.appendChild(t.wrapper),t.update()),t.data={},t.closed=!0,t.editing=!1,t.editingRow=!1,t.editingCell=!1,t.bindEvents(),setTimeout(function(){i.emit("datatable.editable.init")},10)},l.prototype.bindEvents=function(){this.events={context:this.context.bind(this),update:this.update.bind(this),dismiss:this.dismiss.bind(this),keydown:this.keydown.bind(this),double:this.double.bind(this)},a(this.target,"dblclick",this.events.double),a(document,"click",this.events.dismiss),a(document,"keydown",this.events.keydown),this.config.contextMenu&&(a(this.target,"contextmenu",this.events.context),this.events.reset=d(this.events.update,50),a(window,"resize",this.events.reset),a(window,"scroll",this.events.reset))},l.prototype.context=function(t){this.event=t;var e=this.target.contains(t.target);if(!this.disabled&&e){t.preventDefault();var i=t.pageX,n=t.pageY;i>this.limits.x&&(i-=this.rect.width),n>this.limits.y&&(n-=this.rect.height),this.wrapper.style.top=n+"px",this.wrapper.style.left=i+"px",this.openMenu(),this.update()}},l.prototype.double=function(t){if(!this.editing){var e=o(t.target,function(t){return"TD"===t.nodeName});e&&(this.editCell(e),t.preventDefault())}},l.prototype.keydown=function(t){this.editing&&this.data&&(13===t.keyCode?this.saveCell():27===t.keyCode&&this.saveCell(this.data.content))},l.prototype.editCell=function(t){if("TD"===(t=t||o(this.event.target,function(t){return"TD"===t.nodeName})).nodeName&&!this.editing){var i=this;i.data={cell:t,content:t.innerHTML,input:e.createElement("input",{type:"text",class:i.config.classes.input,value:t.innerHTML})},t.innerHTML="",t.appendChild(i.data.input),setTimeout(function(){i.data.input.focus(),i.data.input.selectionStart=i.data.input.selectionEnd=i.data.input.value.length,i.editing=!0,i.editingCell=!0,i.closeMenu()},10)}},l.prototype.saveCell=function(t,e){e=e||this.data.cell,t=t||this.data.input.value,e.innerHTML=t.trim(),this.data={},this.editing=this.editingCell=!1},l.prototype.editRow=function(t){if("TR"===(t=t||o(this.event.target,function(t){return"TR"===t.nodeName})).nodeName&&!this.editing){var n=this,a=n.config;t=a.hiddenColumns?i.data[t.dataIndex]:i.activeRows[t.dataIndex];var s=["
","
","

Editing row

","","
","
","
","
","","
","
","
","
"].join(""),d=e.createElement("div",{class:a.classes.modal,html:s}),l=d.firstElementChild.lastElementChild.firstElementChild;[].slice.call(t.cells).forEach(function(t,n){l.insertBefore(e.createElement("div",{class:a.classes.row,html:["
","","","
"].join("")}),l.lastElementChild)}),this.modal=d,this.openModal(),n.data={row:t},this.editing=!0,this.editingRow=!0,d.addEventListener("click",function(t){var e=t.target;if(e.hasAttribute("data-editor-close"))n.closeModal();else if(e.hasAttribute("data-editor-save")){var i=[].slice.call(l.elements).map(function(t){return t.value.trim()});n.saveRow(i)}}),n.closeMenu()}},l.prototype.saveRow=function(t,e){var n=this,a=n.config;e=e||n.data.row,[].slice.call(e.cells).forEach(function(n,s){(n=i.data[e.dataIndex].cells[a.hiddenColumns?s:i.activeHeadings[s].originalCellIndex]).innerHTML=n.data=t[s]}),i.columns().rebuild(),this.closeModal()},l.prototype.openModal=function(){!this.editing&&this.modal&&document.body.appendChild(this.modal)},l.prototype.closeModal=function(){this.editing&&this.modal&&(document.body.removeChild(this.modal),this.modal=this.editing=this.editingRow=!1)},l.prototype.removeRow=function(t){t?(t instanceof Element&&"TR"===t.nodeName&&void 0!==t.dataIndex&&(t=t.dataIndex),i.rows().remove(t),this.closeMenu()):(t=o(this.event.target,function(t){return"TR"===t.nodeName}))&&void 0!==t.dataIndex&&(i.rows().remove(t.dataIndex),this.closeMenu())},l.prototype.update=function(){var t=window.scrollX||window.pageXOffset,e=window.scrollY||window.pageYOffset;this.rect=this.wrapper.getBoundingClientRect(),this.limits={x:window.innerWidth+t-this.rect.width,y:window.innerHeight+e-this.rect.height}},l.prototype.dismiss=function(t){var e=!0,i=this.editing&&this.editingCell;this.config.contextMenu&&(e=!this.wrapper.contains(t.target)&&i&&t.target!==this.data.input),e&&(i&&this.saveCell(this.data.content),this.closeMenu())},l.prototype.openMenu=function(){this.config.contextMenu&&(document.body.appendChild(this.container),this.closed=!1)},l.prototype.closeMenu=function(){this.config.contextMenu&&!this.closed&&(this.closed=!0,document.body.removeChild(this.container))},l.prototype.destroy=function(){s(this.target,"dblclick",this.events.double),s(this.target,"contextmenu",this.events.context),s(document,"click",this.events.dismiss),s(document,"keydown",this.events.keydown),s(window,"resize",this.events.reset),s(window,"scroll",this.events.reset),document.body.removeChild(this.container)},new l(this.body,t)}); \ No newline at end of file +window.DataTable&&"function"==typeof window.DataTable&&DataTable.extend("editable",function(t,e){var i=this,n={classes:{row:"datatable-editor-row",form:"datatable-editor-form",item:"datatable-editor-item",menu:"datatable-editor-menu",save:"datatable-editor-save",block:"datatable-editor-block",close:"datatable-editor-close",inner:"datatable-editor-inner",input:"datatable-editor-input",label:"datatable-editor-label",modal:"datatable-editor-modal",action:"datatable-editor-action",header:"datatable-editor-header",wrapper:"datatable-editor-wrapper",container:"datatable-editor-container",separator:"datatable-editor-separator"},hiddenColumns:!1,contextMenu:!0,menuItems:[{text:" Edit Cell",action:function(t){this.editCell()}},{text:" Edit Row",action:function(t){this.editRow()}},{separator:!0},{text:" Remove Row",action:function(t){confirm("Are you sure?")&&this.removeRow()}}]},a=function(t,e,i){t.addEventListener(e,i,!1)},s=function(t,e,i){t.removeEventListener(e,i)},o=function(t,e){return t&&t!==document.body&&(e(t)?t:o(t.parentNode,e))},d=function(t,e,i){var n;return function(){var a=this,s=arguments,o=i&&!n;clearTimeout(n),n=setTimeout(function(){n=null,i||t.apply(a,s)},e),o&&t.apply(a,s)}},l=function(t,i){this.target=t,this.config=e.extend(n,i)};return l.prototype.init=function(){var t=this,n=t.config;e.classList.add(i.wrapper,"datatable-editable"),n.contextMenu&&(t.container=e.createElement("div",{id:n.classes.container}),t.wrapper=e.createElement("div",{class:n.classes.wrapper}),t.menu=e.createElement("ul",{class:n.classes.menu}),n.menuItems&&n.menuItems.length&&n.menuItems.forEach(function(i){var s=e.createElement("li",{class:i.separator?n.classes.separator:n.classes.item});if(!i.separator){var o=e.createElement("a",{class:n.classes.action,href:i.url||"#",html:i.text});s.appendChild(o),i.action&&"function"==typeof i.action&&a(o,"click",function(e){e.preventDefault(),i.action.call(t,e)})}t.menu.appendChild(s)}),t.wrapper.appendChild(t.menu),t.container.appendChild(t.wrapper),t.update()),t.data={},t.closed=!0,t.editing=!1,t.editingRow=!1,t.editingCell=!1,t.bindEvents(),setTimeout(function(){i.emit("editable.init")},10)},l.prototype.bindEvents=function(){this.events={context:this.context.bind(this),update:this.update.bind(this),dismiss:this.dismiss.bind(this),keydown:this.keydown.bind(this),double:this.double.bind(this)},a(this.target,"dblclick",this.events.double),a(document,"click",this.events.dismiss),a(document,"keydown",this.events.keydown),this.config.contextMenu&&(a(this.target,"contextmenu",this.events.context),this.events.reset=d(this.events.update,50),a(window,"resize",this.events.reset),a(window,"scroll",this.events.reset))},l.prototype.context=function(t){this.event=t;var e=this.target.contains(t.target);if(!this.disabled&&e){t.preventDefault();var i=t.pageX,n=t.pageY;i>this.limits.x&&(i-=this.rect.width),n>this.limits.y&&(n-=this.rect.height),this.wrapper.style.top=n+"px",this.wrapper.style.left=i+"px",this.openMenu(),this.update()}},l.prototype.double=function(t){if(!this.editing){var e=o(t.target,function(t){return"TD"===t.nodeName});e&&(this.editCell(e),t.preventDefault())}},l.prototype.keydown=function(t){this.editing&&this.data&&(13===t.keyCode?this.saveCell():27===t.keyCode&&this.saveCell(this.data.content))},l.prototype.editCell=function(t){if("TD"===(t=t||o(this.event.target,function(t){return"TD"===t.nodeName})).nodeName&&!this.editing){var i=this;i.data={cell:t,content:t.innerHTML,input:e.createElement("input",{type:"text",class:i.config.classes.input,value:t.innerHTML})},t.innerHTML="",t.appendChild(i.data.input),setTimeout(function(){i.data.input.focus(),i.data.input.selectionStart=i.data.input.selectionEnd=i.data.input.value.length,i.editing=!0,i.editingCell=!0,i.closeMenu()},10)}},l.prototype.saveCell=function(t,e){e=e||this.data.cell,t=t||this.data.input.value,e.innerHTML=t.trim(),this.data={},this.editing=this.editingCell=!1,i.emit("editable.save.cell")},l.prototype.editRow=function(t){if("TR"===(t=t||o(this.event.target,function(t){return"TR"===t.nodeName})).nodeName&&!this.editing){var n=this,a=n.config;t=a.hiddenColumns?i.data[t.dataIndex]:i.activeRows[t.dataIndex];var s=["
","
","

Editing row

","","
","
","
","
","","
","
","
","
"].join(""),d=e.createElement("div",{class:a.classes.modal,html:s}),l=d.firstElementChild.lastElementChild.firstElementChild;[].slice.call(t.cells).forEach(function(t,n){l.insertBefore(e.createElement("div",{class:a.classes.row,html:["
","","","
"].join("")}),l.lastElementChild)}),this.modal=d,this.openModal(),n.data={row:t},this.editing=!0,this.editingRow=!0,d.addEventListener("click",function(t){var e=t.target;if(e.hasAttribute("data-editor-close"))n.closeModal();else if(e.hasAttribute("data-editor-save")){var i=[].slice.call(l.elements).map(function(t){return t.value.trim()});n.saveRow(i)}}),n.closeMenu()}},l.prototype.saveRow=function(t,e){var n=this,a=n.config;e=e||n.data.row,[].slice.call(e.cells).forEach(function(n,s){(n=i.data[e.dataIndex].cells[a.hiddenColumns?s:i.activeHeadings[s].originalCellIndex]).innerHTML=n.data=t[s]}),i.columns().rebuild(),this.closeModal(),i.emit("editable.save.row")},l.prototype.openModal=function(){!this.editing&&this.modal&&document.body.appendChild(this.modal)},l.prototype.closeModal=function(){this.editing&&this.modal&&(document.body.removeChild(this.modal),this.modal=this.editing=this.editingRow=!1)},l.prototype.removeRow=function(t){t?(t instanceof Element&&"TR"===t.nodeName&&void 0!==t.dataIndex&&(t=t.dataIndex),i.rows().remove(t),this.closeMenu()):(t=o(this.event.target,function(t){return"TR"===t.nodeName}))&&void 0!==t.dataIndex&&(i.rows().remove(t.dataIndex),this.closeMenu())},l.prototype.update=function(){var t=window.scrollX||window.pageXOffset,e=window.scrollY||window.pageYOffset;this.rect=this.wrapper.getBoundingClientRect(),this.limits={x:window.innerWidth+t-this.rect.width,y:window.innerHeight+e-this.rect.height}},l.prototype.dismiss=function(t){var e=!0,i=this.editing&&this.editingCell;this.config.contextMenu&&(e=!this.wrapper.contains(t.target)&&i&&t.target!==this.data.input),e&&(i&&this.saveCell(this.data.content),this.closeMenu())},l.prototype.openMenu=function(){this.config.contextMenu&&(document.body.appendChild(this.container),this.closed=!1,i.emit("editable.context.open"))},l.prototype.closeMenu=function(){this.config.contextMenu&&!this.closed&&(this.closed=!0,document.body.removeChild(this.container),i.emit("editable.context.close"))},l.prototype.destroy=function(){s(this.target,"dblclick",this.events.double),s(this.target,"contextmenu",this.events.context),s(document,"click",this.events.dismiss),s(document,"keydown",this.events.keydown),s(window,"resize",this.events.reset),s(window,"scroll",this.events.reset),document.body.removeChild(this.container)},new l(this.body,t)}); \ No newline at end of file diff --git a/package.json b/package.json index e1bbe4a..4041623 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vanilla-datatables-editable", - "version": "0.0.8", + "version": "0.0.9", "description": "A table editor extension for Vanilla-DataTables.", "main": "datatable.editable.min.js", "scripts": {