diff --git a/README.md b/README.md index a47f15c..4054e28 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ![](http://img.badgesize.io/Mobius1/Vanilla-DataTables/2.0/dist/vanilla-dataTables.min.js) ![](http://img.badgesize.io/Mobius1/Vanilla-DataTables/2.0/dist/vanilla-dataTables.min.js?compression=gzip&label=gzipped) -This is version 2.0 of Vanilla-DataTables. Current version is `2.0.0-alpha.18`. Not production ready. +This is version 2.0 of Vanilla-DataTables. Current version is `2.0.0-alpha.19`. Not production ready. --- diff --git a/dist/vanilla-dataTables.min.css b/dist/vanilla-dataTables.min.css index 75e2b38..d9b89c7 100644 --- a/dist/vanilla-dataTables.min.css +++ b/dist/vanilla-dataTables.min.css @@ -4,6 +4,6 @@ * Copyright (c) 2015-2017 Karl Saunders (http://mobius.ovh) * Licensed under MIT (http://www.opensource.org/licenses/mit-license.php) * - * Version: 2.0.0-alpha.18 + * Version: 2.0.0-alpha.19 * - */.dataTable-wrapper.no-header .dataTable-container{border-top:1px solid #d9d9d9}.dataTable-wrapper.no-footer .dataTable-container{border-bottom:1px solid #d9d9d9}.dataTable-bottom,.dataTable-top{padding:8px 10px}.dataTable-bottom>div:first-child,.dataTable-top>div:first-child{float:left}.dataTable-bottom>div:last-child,.dataTable-top>div:last-child{float:right}.dataTable-selector{padding:6px}.dataTable-input{padding:6px 12px}.dataTable-info{margin:7px 0}.dataTable-pagination ul{margin:0;padding-left:0}.dataTable-pagination li{list-style:none;float:left}.dataTable-ellipsis span,.dataTable-pagination a{border:1px solid transparent;float:left;margin-left:2px;padding:6px 12px;position:relative;text-decoration:none;color:inherit}.dataTable-pagination a:hover{background-color:#d9d9d9}.dataTable-pagination .active a,.dataTable-pagination .active a:focus,.dataTable-pagination .active a:hover{background-color:#d9d9d9;cursor:default}.dataTable-pagination .dataTable-ellipsis span,.dataTable-pagination .disabled a,.dataTable-pagination .disabled a:focus,.dataTable-pagination .disabled a:hover{cursor:not-allowed}.dataTable-pagination .disabled a,.dataTable-pagination .disabled a:focus,.dataTable-pagination .disabled a:hover{cursor:not-allowed;opacity:.4}.dataTable-pagination .pager a{font-weight:700}.dataTable-table{max-width:100%;width:100%;border-spacing:0}.dataTable-table>tbody>tr>td,.dataTable-table>tbody>tr>th,.dataTable-table>tfoot>tr>td,.dataTable-table>tfoot>tr>th,.dataTable-table>thead>tr>td,.dataTable-table>thead>tr>th{vertical-align:top;padding:8px 10px}.dataTable-table th,.dataTable-table>tfoot>tr>th{vertical-align:bottom;text-align:left}.dataTable-table>thead>tr>td,.dataTable-table>thead>tr>th{vertical-align:bottom;text-align:left;border-bottom:1px solid #d9d9d9}.dataTable-table>tfoot>tr>th{border-top:1px solid #d9d9d9}.dataTable-sorter{position:relative;cursor:pointer}.dataTable-sorter::after,.dataTable-sorter::before{content:"";height:0;width:0;position:absolute;right:12px;border-left:4px solid transparent;border-right:4px solid transparent;opacity:.2}.dataTable-sorter::before{border-top:4px solid #000;top:18px}.dataTable-sorter::after{border-bottom:4px solid #000;border-top:4px solid transparent;bottom:22px}.dataTable-sorter.asc::after,.dataTable-sorter.desc::before{opacity:.6}.dataTable-sorter.loading::before{opacity:0}.dataTable-sorter.loading::after{width:15px;height:15px;border-width:3px;border-style:solid;border-color:#ccc #ccc #ccc #999;border-radius:50%;bottom:12px;right:10px;opacity:1;-webkit-animation:.4s linear 0s forwards infinite spin;animation:.4s linear 0s forwards infinite spin}.dataTables-empty{text-align:center}.dataTable-bottom::after,.dataTable-top::after{clear:both;content:" ";display:table}@keyframes spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} \ No newline at end of file + */.dt-wrapper.no-header .dt-container{border-top:1px solid #d9d9d9}.dt-wrapper.no-footer .dt-container{border-bottom:1px solid #d9d9d9}.dt-top,.dt-bottom{padding:8px 10px}.dt-top>div:first-child,.dt-bottom>div:first-child{float:left}.dt-top>div:last-child,.dt-bottom>div:last-child{float:right}.dt-selector{padding:6px}.dt-input{padding:6px 12px}.dt-info{margin:7px 0}.dt-pagination ul{margin:0;padding-left:0}.dt-pagination li{list-style:none;float:left}.dt-pagination a,.dt-ellipsis span{border:1px solid transparent;float:left;margin-left:2px;padding:6px 12px;position:relative;text-decoration:none;color:inherit}.dt-pagination a:hover{background-color:#d9d9d9}.dt-pagination .active a,.dt-pagination .active a:focus,.dt-pagination .active a:hover{background-color:#d9d9d9;cursor:default}.dt-pagination .dt-ellipsis span,.dt-pagination .disabled a,.dt-pagination .disabled a:focus,.dt-pagination .disabled a:hover{cursor:not-allowed}.dt-pagination .disabled a,.dt-pagination .disabled a:focus,.dt-pagination .disabled a:hover{cursor:not-allowed;opacity:.4}.dt-pagination .pager a{font-weight:bold}.dt-table{max-width:100%;width:100%;border-spacing:0}.dt-table>tbody>tr>td,.dt-table>tbody>tr>th,.dt-table>tfoot>tr>td,.dt-table>tfoot>tr>th,.dt-table>thead>tr>td,.dt-table>thead>tr>th{vertical-align:top;padding:8px 10px}.dt-table>thead>tr>th,.dt-table>thead>tr>td{vertical-align:bottom;text-align:left;border-bottom:1px solid #d9d9d9}.dt-table>tfoot>tr>th{vertical-align:bottom;text-align:left;border-top:1px solid #d9d9d9}.dt-table th{vertical-align:bottom;text-align:left}.dt-sorter{position:relative;cursor:pointer;&::before,&::after{content:"";height:0;width:0;position:absolute;right:12px;border-left:4px solid transparent;border-right:4px solid transparent;opacity:.2}&::before{border-top:4px solid #000;top:18px}&::after{border-bottom:4px solid #000;border-top:4px solid transparent;bottom:22px}&.asc::after,&.desc::before{opacity:.6}&.loading{&::before{opacity:0}&::after{width:15px;height:15px;border-width:3px;border-style:solid;border-color:#ccc #ccc #ccc #999;border-radius:50%;bottom:12px;right:10px;opacity:1;animation:400ms linear 0ms forwards infinite spin}}}.dataTables-empty{text-align:center}.dt-top::after,.dt-bottom::after{clear:both;content:" ";display:table}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.dt-editor-modal{position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.6);animation:250ms ease 0ms fadeIn}.dt-editor-modal.closed{animation:250ms ease 0ms fadeIn}.dt-editor-modal.closed .dt-editor-inner{animation:250ms ease 0ms slideIn}.dt-editor-inner{width:30%;margin:10% auto;background-color:#fff;border-radius:5px;animation:250ms ease 0ms slideIn}.dt-editor-header{position:relative;border-bottom:1px solid #ccc}.dt-editor-header h4{font-size:20px;margin:0}.dt-editor-header button{position:absolute;right:10px;top:10px;background-color:transparent;border:0;cursor:pointer;font-size:24px;padding:5px;line-height:1;opacity:.6}.dt-editor-header button:hover{opacity:1}.dt-editor-header{padding:15px 30px}.dt-editor-block{padding:15px 60px}.dt-editor-row{margin:0 0 15px}.dt-editor-row:last-child{margin:0 0 5px}.dt-editor-row:last-child{text-align:right}.dt-editor-label{width:25%;text-align:right;padding:0 15px}.dt-editor-label,.dt-editor-input{display:inline-block}.dt-editor-input{padding:4px 6px;border:1px solid #ccc;width:100%;box-sizing:border-box;margin:-5px 0;font-size:inherit;font-family:inherit;font-weight:inherit;color:inherit}.dt-editor-row .dt-editor-input{margin:0;width:75%}.dt-editor-save{background-color:#27ae60;border:1px solid #27ae60;padding:6px 12px;font-size:inherit;font-family:inherit;font-weight:inherit;color:#fff;cursor:pointer;border-radius:3px}.dt-editor-save:hover{background-color:#2cc36b;border-color:#2cc36b}.dt-editor-wrapper{position:absolute}.dt-editor-menu{background:#fff none repeat scroll 0 0;border-radius:3px;margin:0;min-width:220px;padding:5px 0;box-shadow:0 0 10px 2px #aaa}.dt-editor-menu li{list-style:none}.dt-editor-menu a{box-sizing:border-box;color:inherit;display:block;padding:5px 15px;text-decoration:none;width:100%}.dt-editor-menu a:hover{background-color:#ddd}.dt-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/dist/vanilla-dataTables.min.js b/dist/vanilla-dataTables.min.js index 3552d1c..617d448 100644 --- a/dist/vanilla-dataTables.min.js +++ b/dist/vanilla-dataTables.min.js @@ -4,7 +4,7 @@ * Copyright (c) 2015-2017 Karl Saunders (http://mobius.ovh) * Licensed under MIT (http://www.opensource.org/licenses/mit-license.php) * - * Version: 2.0.0-alpha.18 + * Version: 2.0.0-alpha.19 * */ -!function(e,t){var n="DataTable";"object"==typeof exports?module.exports=t(n):"function"==typeof define&&define.amd?define([],t(n)):e[n]=t(n)}("undefined"!=typeof global?global:this.window||this.global,function(e){"use strict";var t=window,n=document,a=(n.body,{perPage:10,perPageSelect:[5,10,15,20,25],sortable:!0,searchable:!0,nextPrev:!0,firstLast:!1,prevText:"‹",nextText:"›",firstText:"«",lastText:"»",ellipsisText:"…",ascText:"▴",descText:"▾",truncatePager:!0,pagerDelta:2,fixedColumns:!0,fixedHeight:!1,header:!0,footer:!1,search:{includeHiddenColumns:!1},classes:{table:"dataTable-table",wrapper:"dataTable-wrapper",container:"dataTable-container",top:"dataTable-top",bottom:"dataTable-bottom",info:"dataTable-info",dropdown:"dataTable-dropdown",selector:"dataTable-selector",pagination:"dataTable-pagination",input:"dataTable-input",search:"dataTable-search",ellipsis:"dataTable-ellipsis",sorter:"dataTable-sorter"},labels:{placeholder:"Search...",perPage:"{select} entries per page",noRows:"No entries found",info:"Showing {start} to {end} of {rows} entries"},layout:{top:"{select}{search}",bottom:"{info}{pager}"}}),s=function(e){return"[object Object]"===Object.prototype.toString.call(e)},i=function(e){return Array.isArray(e)},r=function(e){var t=!1;try{t=JSON.parse(e)}catch(e){return!1}return!(null===t||!i(t)&&!s(t))&&t},o=function(e,t){return e.hasOwnProperty(t)},l=function(e,t){for(var n in t)if(t.hasOwnProperty(n)){var a=t[n];a&&s(a)?(e[n]=e[n]||{},l(e[n],a)):e[n]=a}return e},c=function(e,t,n){var a;if(s(e))for(a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.call(n,e[a],a);else if(i(e))for(a=0;a1){var s="pager",i=d("ul"),r=n.onFirstPage?1:n.currentPage-1,o=n.onlastPage?e:n.currentPage+1;a.firstLast&&i.appendChild(t.button(s,1,a.firstText)),a.nextPrev&&i.appendChild(t.button(s,r,a.prevText));var l=t.truncate();c(l,function(e){i.appendChild(e)}),a.nextPrev&&i.appendChild(t.button(s,o,a.nextText)),a.firstLast&&i.appendChild(t.button(s,e,a.lastText)),t.parent.appendChild(i)}},truncate:function(){var e,t=this,n=t.instance.config,a=2*n.pagerDelta,s=t.instance.currentPage,i=s-n.pagerDelta,r=s+n.pagerDelta,o=t.instance.totalPages,l=[],d=[];if(n.truncatePager){s<4-n.pagerDelta+a?r=3+a:s>o-(3-n.pagerDelta+a)&&(i=o-(2+a));for(var h=1;h<=o;h++)(1==h||h==o||h>=i&&h<=r)&&l.push(h);c(l,function(a){e&&(a-e==2?d.push(t.button("",e+1,e+1)):a-e!=1&&d.push(t.button(n.classes.ellipsis,0,n.ellipsisText,!0))),d.push(t.button(a==s?"active":"",a,a)),e=a})}else c(o,function(e){d.push(t.button(e==s?"active":"",e,e))});return d},button:function(e,t,n,a){return d("li",{class:e,html:a?""+n+"":''+n+""})}};var w=function(e){this.instance=e};w.prototype={render:function(e){var t=this.instance;if(e=e||t.currentPage,u(t.table.body),!(e<1||e>t.totalPages)){var n=t.table.header,a=document.createDocumentFragment();t.table.hasHeader&&(u(n.node),c(n.cells,function(e){e.hidden||n.node.appendChild(e.node)})),t.pages.length&&c(t.pages[e-1],function(e){u(e.node),c(e.cells,function(t){t.hidden||e.node.appendChild(t.node)}),a.append(e.node)}),t.table.body.appendChild(a),c(t.pagers,function(e){e.render()}),t.getInfo(),t.emit("rows.render")}},paginate:function(){var e=this.instance.config,t=this.instance.table.rows,n=this.instance;n.searching&&n.searchData&&(t=n.searchData),n.pages=t.map(function(n,a){return a%e.perPage==0?t.slice(a,a+e.perPage):null}).filter(function(e){return e}),n.totalPages=n.pages.length,n.currentPage>n.totalPages&&(n.currentPage=n.totalPages)},add:function(e,t){if(i(e))return t=t||0,i(e[0])?(c(e,function(e){e=this.instance.table.addRow(new b(e,this.instance.table.rows.length+1),t)},this),this.instance.table.update()):e=this.instance.table.addRow(new b(e,this.instance.table.rows.length+1),t,!0),this.instance.update(),e},remove:function(e){var t=!1,n=this.instance;if(i(e)){for(var a=e.length-1;a>=0;a--)n.table.removeRow(this.get(e[a]));n.table.update(),n.update()}else if(t=this.get(e))return n.table.removeRow(t,!0),n.update(),t},get:function(e){var t=this.instance.table.rows;if(e instanceof b||e instanceof Element){for(var n=0;nn.table.header.cells.length-1)return!1;var a=n.table.header.cells[e].node,s=n.table.rows;n.searching&&n.searchData&&(s=n.searchData),n.lastHeading&&p.remove(n.lastHeading,n.lastDirection),n.lastDirection&&p.remove(a,n.lastDirection),p.add(a,t);var i,r;a.hasAttribute("data-type")&&"date"===a.getAttribute("data-type")&&(i=!1,(r=a.hasAttribute("data-format"))&&(i=a.getAttribute("data-format"))),s.sort(function(n,a){return n=n.cells[e].content,a=a.cells[e].content,r?(n=f(n,i),a=f(a,i)):(n=n.replace(/(\$|\,|\s|%)/g,""),a=a.replace(/(\$|\,|\s|%)/g,"")),n=isNaN(n)?n:parseInt(n,10),a=isNaN(a)?a:parseInt(a,10),"asc"===t?n>a:n-1&&c(e.columnRenderers,function(a){a.columns.indexOf(n.index)>-1&&n.setContent(a.renderer.call(e,n.content,n,t))})})})),e.rows().render(),e.bindEvents(),e.initialised=!0,setTimeout(function(){e.emit("init")},10)}},bindEvents:function(){var e=this,t=e.config;h(e.wrapper,"mousedown",function(e){1===e.which&&t.sortable&&"TH"===e.target.nodeName&&p.add(e.target,"loading")}),h(e.wrapper,"click",function(n){var a=n.target;if(a.hasAttribute("data-page")&&(n.preventDefault(),e.page(parseInt(a.getAttribute("data-page"),10))),t.sortable&&"TH"===a.nodeName){if(a.hasAttribute("data-sortable")&&"false"===a.getAttribute("data-sortable"))return!1;n.preventDefault(),e.columns().sort(a.dataIndex,p.contains(a,"asc")?"desc":"asc")}}),t.perPageSelect&&h(e.wrapper,"change",function(n){var a=n.target;"SELECT"===a.nodeName&&p.contains(a,t.classes.selector)&&(n.preventDefault(),e.config.perPage=parseInt(a.value,10),e.selectors.length>1&&c([].slice.call(e.selectors),function(e){e.selectedIndex=a.selectedIndex}),e.update())}),t.searchable&&h(e.wrapper,"keyup",function(n){"INPUT"===n.target.nodeName&&p.contains(n.target,t.classes.input)&&(n.preventDefault(),e.search(n.target.value))}),t.sortable&&h(e.wrapper,"mousedown",function(e){"TH"===e.target.nodeName&&e.preventDefault()})},render:function(){if(!this.rendered){var e=this,t=e.config;this.table.hasHeader&&t.fixedColumns&&(this.columnWidths=this.table.header.cells.map(function(e){return e.node.offsetWidth})),e.wrapper=d("div",{class:t.classes.wrapper});var n=["
",t.layout.top,"
","
","
",t.layout.bottom,"
"].join("");if(n=n.replace("{info}","
"),t.perPageSelect){var a=["
","","
"].join(""),s=d("select",{class:t.classes.selector});c(t.perPageSelect,function(e){var n=e===t.perPage,a=new Option(e,e,n,n);s.add(a)}),a=a.replace("{select}",s.outerHTML),n=n.replace(/\{select\}/g,a)}else n=n.replace(/\{select\}/g,"");if(t.searchable){var i=["
","","
"].join("");n=n.replace(/\{search\}/g,i)}else n=n.replace(/\{search\}/g,"");e.table.node.classList.add(t.classes.table),c(n.match(/\{pager\}/g),function(e,a){n=n.replace("{pager}",d("div",{class:t.classes.pagination}).outerHTML)}),e.wrapper.innerHTML=n,e.pagers=[].slice.call(e.wrapper.querySelectorAll("."+t.classes.pagination)),c(e.pagers,function(t,n){e.pagers[n]=new m(e,t)}),e.container=e.wrapper.querySelector("."+t.classes.container),e.labels=e.wrapper.querySelectorAll("."+t.classes.info),e.selectors=e.wrapper.querySelectorAll("."+t.classes.selector),e.table.node.parentNode.replaceChild(e.wrapper,e.table.node),e.container.appendChild(e.table.node),e.rect=e.table.node.getBoundingClientRect(),e.rendered=!0}},update:function(){this.rows().paginate(),this.rows().render(),this.emit("update")},getInfo:function(){var e,t=0,n=0,a=0;if(this.totalPages&&(a=(n=(t=this.currentPage-1)*this.config.perPage)+this.pages[t].length,n+=1,e=this.searching?this.searchData.length:this.table.rows.length),this.labels.length&&this.config.labels.info.length){var s=this.config.labels.info.replace("{start}",n).replace("{end}",a).replace("{page}",this.currentPage).replace("{pages}",this.totalPages).replace("{rows}",e);c([].slice.call(this.labels),function(t){t.innerHTML=e?s:""})}},search:function(e,t){var n=this;if(e=e.toLowerCase(),n.currentPage=1,n.searching=!0,n.searchData=[],!e.length)return n.searching=!1,p.remove(n.wrapper,"search-results"),n.update(),!1;c(n.table.rows,function(a){var s=n.searchData.indexOf(a)>-1;void 0!==t?c(a.cells,function(i){void 0===t||i.index!=t||s||i.content.toLowerCase().indexOf(e)>=0&&n.searchData.push(a)}):e.split(" ").reduce(function(e,t){for(var s=!1,i=0;i-1){(!a.cells[i].hidden||a.cells[i].hidden&&n.config.search.includeHiddenColumns)&&(s=!0);break}return e&&s},!0)&&!s&&n.searchData.push(a)}),p.add(n.wrapper,"search-results"),n.searchData.length?n.update():(p.remove(n.wrapper,"search-results"),n.setMessage(n.config.labels.noRows)),this.emit("search",e,this.searchData)},page:function(e){return e!=this.currentPage&&(isNaN(e)||(this.currentPage=parseInt(e,10)),this.onFirstPage=1===this.currentPage,this.onLastPage=this.currentPage===this.totalPages,!(e>this.totalPages||e<0)&&(this.rows().render(e),void this.emit("page",e)))},import:function(e){var t=this,n=!1,a={lineDelimiter:"\n",columnDelimiter:","};if(!s(e))return!1;if((e=l(a,e)).data.length||s(e.data)){if("csv"===e.type){n={data:[]};var i=e.data.split(e.lineDelimiter);i.length&&(e.headings&&(n.headings=i[0].split(e.columnDelimiter),i.shift()),c(i,function(t,a){n.data[a]=[];var s=t.split(e.columnDelimiter);s.length&&c(s,function(e){n.data[a].push(e)})}))}else if("json"===e.type){var o=r(e.data);o?(n={headings:[],data:[]},c(o,function(e,t){n.data[t]=[],c(e,function(e,a){n.headings.indexOf(a)<0&&n.headings.push(a),n.data[t].push(e)})})):console.warn("That's not valid JSON!")}s(e.data)&&(n=e.data),n&&(c(n.headings,function(e,n){t.table.header.cells[n].setContent(e)}),this.rows().add(n.data))}return!1},setMessage:function(e){var t=1;this.table.rows.length&&(t=this.table.rows[0].cells.length);var n=d("tr",{html:''+e+""});u(this.table.body),this.table.body.appendChild(n)},columns:function(){return new x(this)},rows:function(){return new w(this)},on:function(e,t){this.events=this.events||{},this.events[e]=this.events[e]||[],this.events[e].push(t)},off:function(e,t){this.events=this.events||{},e in this.events!=!1&&this.events[e].splice(this.events[e].indexOf(t),1)},emit:function(e){if(this.events=this.events||{},e in this.events!=!1)for(var t=0;t1){var s="pager",i=d("ul"),r=n.onFirstPage?1:n.currentPage-1,o=n.onlastPage?e:n.currentPage+1;a.firstLast&&i.appendChild(t.button(s,1,a.firstText)),a.nextPrev&&i.appendChild(t.button(s,r,a.prevText));var l=t.truncate();c(l,function(e){i.appendChild(e)}),a.nextPrev&&i.appendChild(t.button(s,o,a.nextText)),a.firstLast&&i.appendChild(t.button(s,e,a.lastText)),t.parent.appendChild(i)}},truncate:function(){var e,t=this,n=t.instance.config,a=2*n.pagerDelta,s=t.instance.currentPage,i=s-n.pagerDelta,r=s+n.pagerDelta,o=t.instance.totalPages,l=[],d=[];if(n.truncatePager){s<4-n.pagerDelta+a?r=3+a:s>o-(3-n.pagerDelta+a)&&(i=o-(2+a));for(var h=1;h<=o;h++)(1==h||h==o||h>=i&&h<=r)&&l.push(h);c(l,function(a){e&&(a-e==2?d.push(t.button("",e+1,e+1)):a-e!=1&&d.push(t.button(n.classes.ellipsis,0,n.ellipsisText,!0))),d.push(t.button(a==s?"active":"",a,a)),e=a})}else c(o,function(e){d.push(t.button(e==s?"active":"",e,e))});return d},button:function(e,t,n,a){return d("li",{class:e,html:a?""+n+"":''+n+""})}};var w=function(e){this.instance=e};w.prototype={render:function(e){var t=this.instance;if(e=e||t.currentPage,u(t.table.body),!(e<1||e>t.totalPages)){var n=t.table.header,a=document.createDocumentFragment();t.table.hasHeader&&(u(n.node),c(n.cells,function(e){e.hidden||n.node.appendChild(e.node)})),t.pages.length&&c(t.pages[e-1],function(e){u(e.node),c(e.cells,function(t){t.hidden||e.node.appendChild(t.node)}),a.append(e.node)}),t.table.body.appendChild(a),c(t.pagers,function(e){e.render()}),t.getInfo(),t.emit("rows.render")}},paginate:function(){var e=this.instance.config,t=this.instance.table.rows,n=this.instance;n.searching&&n.searchData&&(t=n.searchData),n.pages=t.map(function(n,a){return a%e.perPage==0?t.slice(a,a+e.perPage):null}).filter(function(e){return e}),n.totalPages=n.pages.length,n.currentPage>n.totalPages&&(n.currentPage=n.totalPages)},add:function(e,t){if(i(e))return t=t||0,i(e[0])?(c(e,function(e){e=this.instance.table.addRow(new v(e,this.instance.table.rows.length+1),t)},this),this.instance.table.update()):e=this.instance.table.addRow(new v(e,this.instance.table.rows.length+1),t,!0),this.instance.update(),e},remove:function(e){var t=!1,n=this.instance;if(i(e)){for(var a=e.length-1;a>=0;a--)n.table.removeRow(this.get(e[a]));n.table.update(),n.update()}else if(t=this.get(e))return n.table.removeRow(t,!0),n.update(),t},get:function(e){var t=this.instance.table.rows;if(e instanceof v||e instanceof Element){for(var n=0;nn.table.header.cells.length-1)return!1;var a=n.table.header.cells[e].node,s=n.table.rows;n.searching&&n.searchData&&(s=n.searchData),n.lastHeading&&p.remove(n.lastHeading,n.lastDirection),n.lastDirection&&p.remove(a,n.lastDirection),p.add(a,t);var i,r;a.hasAttribute("data-type")&&"date"===a.getAttribute("data-type")&&(i=!1,(r=a.hasAttribute("data-format"))&&(i=a.getAttribute("data-format"))),s.sort(function(n,a){return n=n.cells[e].content,a=a.cells[e].content,r?(n=f(n,i),a=f(a,i)):(n=n.replace(/(\$|\,|\s|%)/g,""),a=a.replace(/(\$|\,|\s|%)/g,"")),n=isNaN(n)?n:parseInt(n,10),a=isNaN(a)?a:parseInt(a,10),"asc"===t?n>a:n-1&&c(e.columnRenderers,function(a){a.columns.indexOf(n.index)>-1&&n.setContent(a.renderer.call(e,n.content,n,t))})})})),e.rows().render(),e.bindEvents(),e.initialised=!0,setTimeout(function(){e.emit("init")},10)}},initExtensions:function(){var e=this;c(["editable","exportable","filterable"],function(t){void 0!==e[t]&&"function"==typeof e[t]&&(e[t]=e[t](e,e.config[t],{each:c,extend:l,isObject:s,classList:p,createElement:d}),e[t].init&&"function"==typeof e[t].init&&e[t].init())})},bindEvents:function(){var e=this,t=e.config;h(e.wrapper,"mousedown",function(e){1===e.which&&t.sortable&&"TH"===e.target.nodeName&&p.add(e.target,"loading")}),h(e.wrapper,"click",function(n){var a=n.target;if(a.hasAttribute("data-page")&&(n.preventDefault(),e.page(parseInt(a.getAttribute("data-page"),10))),t.sortable&&"TH"===a.nodeName){if(a.hasAttribute("data-sortable")&&"false"===a.getAttribute("data-sortable"))return!1;n.preventDefault(),e.columns().sort(a.dataIndex,p.contains(a,"asc")?"desc":"asc")}}),t.perPageSelect&&h(e.wrapper,"change",function(n){var a=n.target;"SELECT"===a.nodeName&&p.contains(a,t.classes.selector)&&(n.preventDefault(),e.config.perPage=parseInt(a.value,10),e.selectors.length>1&&c([].slice.call(e.selectors),function(e){e.selectedIndex=a.selectedIndex}),e.update())}),t.searchable&&h(e.wrapper,"keyup",function(n){"INPUT"===n.target.nodeName&&p.contains(n.target,t.classes.input)&&(n.preventDefault(),e.search(n.target.value))}),t.sortable&&h(e.wrapper,"mousedown",function(e){"TH"===e.target.nodeName&&e.preventDefault()})},render:function(){if(!this.rendered){var e=this,t=e.config;this.table.hasHeader&&t.fixedColumns&&(this.columnWidths=this.table.header.cells.map(function(e){return e.node.offsetWidth})),e.wrapper=d("div",{class:t.classes.wrapper});var n=["
",t.layout.top,"
","
","
",t.layout.bottom,"
"].join("");if(n=n.replace("{info}","
"),t.perPageSelect){var a=["
","","
"].join(""),s=d("select",{class:t.classes.selector});c(t.perPageSelect,function(e){var n=e===t.perPage,a=new Option(e,e,n,n);s.add(a)}),a=a.replace("{select}",s.outerHTML),n=n.replace(/\{select\}/g,a)}else n=n.replace(/\{select\}/g,"");if(t.searchable){var i=["
","","
"].join("");n=n.replace(/\{search\}/g,i)}else n=n.replace(/\{search\}/g,"");e.table.node.classList.add(t.classes.table),c(n.match(/\{pager\}/g),function(e,a){n=n.replace("{pager}",d("div",{class:t.classes.pagination}).outerHTML)}),e.wrapper.innerHTML=n,e.pagers=[].slice.call(e.wrapper.querySelectorAll("."+t.classes.pagination)),c(e.pagers,function(t,n){e.pagers[n]=new b(e,t)}),e.container=e.wrapper.querySelector("."+t.classes.container),e.labels=e.wrapper.querySelectorAll("."+t.classes.info),e.selectors=e.wrapper.querySelectorAll("."+t.classes.selector),e.table.node.parentNode.replaceChild(e.wrapper,e.table.node),e.container.appendChild(e.table.node),e.rect=e.table.node.getBoundingClientRect(),e.rendered=!0}},update:function(){this.rows().paginate(),this.rows().render(),this.emit("update")},getInfo:function(){var e,t=0,n=0,a=0;if(this.totalPages&&(a=(n=(t=this.currentPage-1)*this.config.perPage)+this.pages[t].length,n+=1,e=this.searching?this.searchData.length:this.table.rows.length),this.labels.length&&this.config.labels.info.length){var s=this.config.labels.info.replace("{start}",n).replace("{end}",a).replace("{page}",this.currentPage).replace("{pages}",this.totalPages).replace("{rows}",e);c([].slice.call(this.labels),function(t){t.innerHTML=e?s:""})}},search:function(e,t){var n=this;if(e=e.toLowerCase(),n.currentPage=1,n.searching=!0,n.searchData=[],!e.length)return n.searching=!1,p.remove(n.wrapper,"search-results"),n.update(),!1;c(n.table.rows,function(a){var s=n.searchData.indexOf(a)>-1;void 0!==t?c(a.cells,function(i){void 0===t||i.index!=t||s||i.content.toLowerCase().indexOf(e)>=0&&n.searchData.push(a)}):e.split(" ").reduce(function(e,t){for(var s=!1,i=0;i-1){(!a.cells[i].hidden||a.cells[i].hidden&&n.config.search.includeHiddenColumns)&&(s=!0);break}return e&&s},!0)&&!s&&n.searchData.push(a)}),p.add(n.wrapper,"search-results"),n.searchData.length?n.update():(p.remove(n.wrapper,"search-results"),n.setMessage(n.config.labels.noRows)),this.emit("search",e,this.searchData)},page:function(e){return e!=this.currentPage&&(isNaN(e)||(this.currentPage=parseInt(e,10)),this.onFirstPage=1===this.currentPage,this.onLastPage=this.currentPage===this.totalPages,!(e>this.totalPages||e<0)&&(this.rows().render(e),void this.emit("page",e)))},import:function(e){var t=this,n=!1,a={lineDelimiter:"\n",columnDelimiter:","};if(!s(e))return!1;if((e=l(a,e)).data.length||s(e.data)){if("csv"===e.type){n={data:[]};var i=e.data.split(e.lineDelimiter);i.length&&(e.headings&&(n.headings=i[0].split(e.columnDelimiter),i.shift()),c(i,function(t,a){n.data[a]=[];var s=t.split(e.columnDelimiter);s.length&&c(s,function(e){n.data[a].push(e)})}))}else if("json"===e.type){var o=r(e.data);o?(n={headings:[],data:[]},c(o,function(e,t){n.data[t]=[],c(e,function(e,a){n.headings.indexOf(a)<0&&n.headings.push(a),n.data[t].push(e)})})):console.warn("That's not valid JSON!")}s(e.data)&&(n=e.data),n&&(c(n.headings,function(e,n){t.table.header.cells[n].setContent(e)}),this.rows().add(n.data))}return!1},setMessage:function(e){var t=1;this.table.rows.length&&(t=this.table.rows[0].cells.length);var n=d("tr",{html:''+e+""});u(this.table.body),this.table.body.appendChild(n)},columns:function(){return new x(this)},rows:function(){return new w(this)},on:function(e,t){this.events=this.events||{},this.events[e]=this.events[e]||[],this.events[e].push(t)},off:function(e,t){this.events=this.events||{},e in this.events!=!1&&this.events[e].splice(this.events[e].indexOf(t),1)},emit:function(e){if(this.events=this.events||{},e in this.events!=!1)for(var t=0;t div:first-child, -.dataTable-bottom > div:first-child { +.dt-top > div:first-child, +.dt-bottom > div:first-child { float: left; } -.dataTable-top > div:last-child, -.dataTable-bottom > div:last-child { +.dt-top > div:last-child, +.dt-bottom > div:last-child { float: right; } -.dataTable-selector { +.dt-selector { padding: 6px; } -.dataTable-input { +.dt-input { padding: 6px 12px; } -.dataTable-info { +.dt-info { margin: 7px 0; } /* PAGER */ -.dataTable-pagination ul { +.dt-pagination ul { margin: 0; padding-left: 0; } -.dataTable-pagination li { +.dt-pagination li { list-style: none; float: left; } -.dataTable-pagination a, -.dataTable-ellipsis span { +.dt-pagination a, +.dt-ellipsis span { border: 1px solid transparent; float: left; margin-left: 2px; @@ -64,130 +64,301 @@ color: inherit; } -.dataTable-pagination a:hover { +.dt-pagination a:hover { background-color: #d9d9d9; } -.dataTable-pagination .active a, -.dataTable-pagination .active a:focus, -.dataTable-pagination .active a:hover { +.dt-pagination .active a, +.dt-pagination .active a:focus, +.dt-pagination .active a:hover { background-color: #d9d9d9; cursor: default; } -.dataTable-pagination .dataTable-ellipsis span, -.dataTable-pagination .disabled a, -.dataTable-pagination .disabled a:focus, -.dataTable-pagination .disabled a:hover { +.dt-pagination .dt-ellipsis span, +.dt-pagination .disabled a, +.dt-pagination .disabled a:focus, +.dt-pagination .disabled a:hover { cursor: not-allowed; } -.dataTable-pagination .disabled a, -.dataTable-pagination .disabled a:focus, -.dataTable-pagination .disabled a:hover { +.dt-pagination .disabled a, +.dt-pagination .disabled a:focus, +.dt-pagination .disabled a:hover { cursor: not-allowed; opacity: 0.4; } -.dataTable-pagination .pager a { +.dt-pagination .pager a { font-weight: bold; } /* TABLE */ -.dataTable-table { +.dt-table { max-width: 100%; width: 100%; border-spacing: 0; } -.dataTable-table > tbody > tr > td, -.dataTable-table > tbody > tr > th, -.dataTable-table > tfoot > tr > td, -.dataTable-table > tfoot > tr > th, -.dataTable-table > thead > tr > td, -.dataTable-table > thead > tr > th { +.dt-table > tbody > tr > td, +.dt-table > tbody > tr > th, +.dt-table > tfoot > tr > td, +.dt-table > tfoot > tr > th, +.dt-table > thead > tr > td, +.dt-table > thead > tr > th { vertical-align: top; padding: 8px 10px; } -.dataTable-table > thead > tr > th, -.dataTable-table > thead > tr > td { +.dt-table > thead > tr > th, +.dt-table > thead > tr > td { vertical-align: bottom; text-align: left; border-bottom: 1px solid #d9d9d9; } -.dataTable-table > tfoot > tr > th { +.dt-table > tfoot > tr > th { vertical-align: bottom; text-align: left; border-top: 1px solid #d9d9d9; } -.dataTable-table th { +.dt-table th { vertical-align: bottom; text-align: left; } -.dataTable-sorter { +.dt-sorter { position: relative; cursor: pointer; + + &::before, + &::after { + content: ""; + height: 0; + width: 0; + position: absolute; + right: 12px; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + opacity: 0.2; + } + + &::before { + border-top: 4px solid #000; + top: 18px; + } + + &::after { + border-bottom: 4px solid #000; + border-top: 4px solid transparent; + bottom: 22px; + } + + &.asc::after, + &.desc::before { + opacity: 0.6; + } + + &.loading { + &::before { + opacity: 0; + } + &::after { + width: 15px; + height: 15px; + border-width: 3px; + border-style: solid; + border-color: #ccc #ccc #ccc #999; + border-radius: 50%; + bottom: 12px; + right: 10px; + opacity: 1; + + animation: 400ms linear 0ms forwards infinite spin; + } + } +} + +.dataTables-empty { + text-align: center; +} + +.dt-top::after, .dt-bottom::after { + clear: both; + content: " "; + display: table; +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } } -.dataTable-sorter::before, .dataTable-sorter::after { - content: ""; - height: 0; - width: 0; + +/* Extension: Editable */ +.dt-editor-modal { position: absolute; - right: 12px; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - opacity: 0.2; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + animation: 250ms ease 0ms fadeIn; } -.dataTable-sorter::before { - border-top: 4px solid #000; - top: 18px; +.dt-editor-modal.closed { + animation: 250ms ease 0ms fadeIn; } -.dataTable-sorter::after { - border-bottom: 4px solid #000; - border-top: 4px solid transparent; - bottom: 22px; +.dt-editor-modal.closed .dt-editor-inner { + animation: 250ms ease 0ms slideIn; } -.dataTable-sorter.asc::after, .dataTable-sorter.desc::before { - opacity: 0.6; + +.dt-editor-inner { + width: 30%; + margin: 10% auto; + background-color: #fff; + border-radius: 5px; + animation: 250ms ease 0ms slideIn; +} + +.dt-editor-header { + position: relative; + border-bottom: 1px solid #ccc; +} +.dt-editor-header h4 { + font-size: 20px; + margin: 0; } -.dataTable-sorter.loading::before { - opacity: 0; -} -.dataTable-sorter.loading::after { - width: 15px; - height: 15px; - border-width: 3px; - border-style: solid; - border-color: #ccc #ccc #ccc #999; - border-radius: 50%; - bottom: 12px; +.dt-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: 0.6; +} +.dt-editor-header button:hover { opacity: 1; - -webkit-animation: 400ms linear 0ms forwards infinite spin; - animation: 400ms linear 0ms forwards infinite spin; } -.dataTables-empty { - text-align: center; +.dt-editor-header { + padding: 15px 30px; } -.dataTable-top::after, .dataTable-bottom::after { - clear: both; - content: " "; - display: table; +.dt-editor-block { + padding: 15px 60px; } -@keyframes spin { +.dt-editor-row { + margin: 0 0 15px; +} + +.dt-editor-row:last-child { + margin: 0 0 5px; +} + +.dt-editor-row:last-child { + text-align: right; +} + +.dt-editor-label { + width: 25%; + text-align: right; + padding: 0 15px; +} + +.dt-editor-label, .dt-editor-input { + display: inline-block; +} + +.dt-editor-input { + padding: 4px 6px; + border: 1px solid #ccc; + width: 100%; + box-sizing: border-box; + margin: -5px 0; + font-size: inherit; + font-family: inherit; + font-weight: inherit; + color: inherit; +} + +.dt-editor-row .dt-editor-input { + margin: 0; + width: 75%; +} + +.dt-editor-save { + background-color: #27ae60; + border: 1px solid #27ae60; + padding: 6px 12px; + font-size: inherit; + font-family: inherit; + font-weight: inherit; + color: #fff; + cursor: pointer; + border-radius: 3px; +} +.dt-editor-save:hover { + background-color: #2cc36b; + border-color: #2cc36b; +} + +/* ContextMenu */ +.dt-editor-wrapper { + position: absolute; +} + +.dt-editor-menu { + background: #fff none repeat scroll 0 0; + border-radius: 3px; + margin: 0; + min-width: 220px; + padding: 5px 0; + box-shadow: 0px 0px 10px 2px #aaa; +} +.dt-editor-menu li { + list-style: none; +} +.dt-editor-menu a { + box-sizing: border-box; + color: inherit; + display: block; + padding: 5px 15px; + text-decoration: none; + width: 100%; +} +.dt-editor-menu a:hover { + background-color: #ddd; +} + +.dt-editor-separator { + border-bottom: 1px solid #aaa; + margin: 5px 0; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes slideIn { from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); + opacity: 0; + transform: translate3d(0, -10%, 0); } to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); + opacity: 1; + transform: translate3d(0, 0%, 0); } } \ No newline at end of file diff --git a/src/vanilla-dataTables.js b/src/vanilla-dataTables.js index 76fa11f..201deb7 100644 --- a/src/vanilla-dataTables.js +++ b/src/vanilla-dataTables.js @@ -4,7 +4,7 @@ * Copyright (c) 2015-2017 Karl Saunders (http://mobius.ovh) * Licensed under MIT (http://www.opensource.org/licenses/mit-license.php) * - * Version: 2.0.0-alpha.18 + * Version: 2.0.0-alpha.19 * */ (function(root, factory) { @@ -58,19 +58,19 @@ }, classes: { - table: "dataTable-table", - wrapper: "dataTable-wrapper", - container: "dataTable-container", - top: "dataTable-top", - bottom: "dataTable-bottom", - info: "dataTable-info", - dropdown: "dataTable-dropdown", - selector: "dataTable-selector", - pagination: "dataTable-pagination", - input: "dataTable-input", - search: "dataTable-search", - ellipsis: "dataTable-ellipsis", - sorter: "dataTable-sorter", + top: "dt-top", + info: "dt-info", + input: "dt-input", + table: "dt-table", + bottom: "dt-bottom", + search: "dt-search", + sorter: "dt-sorter", + wrapper: "dt-wrapper", + dropdown: "dt-dropdown", + ellipsis: "dt-ellipsis", + selector: "dt-selector", + container: "dt-container", + pagination: "dt-pagination" }, // Customise the display text @@ -1105,6 +1105,8 @@ that.columns().fix(); } + that.initExtensions(); + if (o.plugins) { each(o.plugins, function(options, plugin) { if (that[plugin] !== undefined && typeof that[plugin] === "function") { @@ -1202,6 +1204,32 @@ }, 10); }, + initExtensions: function() { + var that = this; + var extensions = [ + "editable", + "exportable", + "filterable" + ]; + + each(extensions, function(extension) { + if (that[extension] !== undefined && typeof that[extension] === "function") { + that[extension] = that[extension](that, that.config[extension], { + each: each, + extend: extend, + isObject: isObject, + classList: classList, + createElement: createElement + }); + + // Init extension + if (that[extension].init && typeof that[extension].init === "function") { + that[extension].init(); + } + } + }); + }, + bindEvents: function() { var that = this, o = that.config;