basictable 2.0.3 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/js/basictable.js +1 -177
  2. package/dist/js/basictable.min.js +1 -1
  3. package/package.json +1 -1
  4. package/src/js/basictable.js +10 -2
package/dist/js/basictable.js CHANGED
@@ -1,180 +1,4 @@
1
1
  /*
2
2
  * @license Basictable - Vanilla JS | MIT | Jerry Low | https://www.github.com/jerrylow/basictable
3
3
  */
4
- "use strict";
5
-
6
- class basictable {
7
- constructor(tableSel, options = {}) {
8
- const _defaultOptions = {
9
- breakpoint: null,
10
- containerBreakpoint: null,
11
- contentWrap: true,
12
- forceResponsive: true,
13
- noResize: false,
14
- tableWrap: false,
15
- showEmptyCells: false,
16
- header: true
17
- };
18
- this.tableSel = tableSel;
19
- this.options = {
20
- ..._defaultOptions,
21
- ...options
22
- };
23
- if (this.options.breakpoint === null && this.options.containerBreakpoint === null) {
24
- this.options.breakpoint = 568;
25
- }
26
- this._getTables();
27
- this._setup();
28
- }
29
- _getTables() {
30
- this.tables = document.querySelectorAll(this.tableSel);
31
- }
32
- _setup() {
33
- this.tables.forEach((table => {
34
- table.setAttribute("data-bt-active", true);
35
- const headings = [];
36
- if (this.options.tableWrap) {
37
- const tableWrapper = document.createElement("div");
38
- tableWrapper.classList.add("bt-wrapper");
39
- table.parentNode.insertBefore(tableWrapper, table);
40
- tableWrapper.appendChild(table);
41
- }
42
- if (this.options.header) {
43
- let format = "";
44
- if (table.querySelectorAll("thead tr th").length) {
45
- format = "thead th";
46
- } else if (table.querySelectorAll("tbody tr th").length) {
47
- format = "tbody tr th";
48
- } else if (table.querySelectorAll("th").length) {
49
- format = "tr:first-of-type th";
50
- } else {
51
- format = "tr:first-of-type td";
52
- }
53
- table.querySelectorAll(format).forEach((heading => {
54
- const colspan = parseInt(heading.getAttribute("colspan"), 10) || 1;
55
- const parentRow = heading.closest("tr");
56
- const row = [].indexOf.call(parentRow.parentElement.children, parentRow);
57
- if (!headings[row]) {
58
- headings[row] = [];
59
- }
60
- for (let i = 0; i < colspan; i++) {
61
- headings[row].push(heading);
62
- }
63
- }));
64
- table.querySelectorAll("tbody tr").forEach((row => this._setupRow(row, headings)));
65
- table.querySelectorAll("tfoot tr").forEach((row => this._setupRow(row, headings)));
66
- }
67
- if (!this.options.noResize) {
68
- this._check(table);
69
- }
70
- }));
71
- if (!this.options.noResize) {
72
- this._tableResizeEvent = () => this._resize();
73
- window.addEventListener("resize", this._tableResizeEvent);
74
- }
75
- }
76
- _setupRow(row, headings) {
77
- row.querySelectorAll(":scope > *").forEach((cell => {
78
- if ((cell.innerHTML.trim() === "" || cell.innerHTML === "&nbsp;") && this.options.showEmptyCells) {
79
- cell.classList("bt-hide");
80
- } else {
81
- const cellIndex = [].indexOf.call(cell.parentElement.children, cell);
82
- let headingText = "";
83
- for (let j = 0; j < headings.length; j++) {
84
- if (j !== 0) {
85
- headingText += ": ";
86
- }
87
- const heading = headings[j][cellIndex];
88
- headingText += heading.textContent;
89
- }
90
- cell.setAttribute("data-th", headingText);
91
- const cellInnerWrapper = document.createElement("span");
92
- cellInnerWrapper.classList.add("bt-content");
93
- if (this.options.contentWrap && cell.firstChild !== cellInnerWrapper) {
94
- cell.appendChild(cellInnerWrapper);
95
- while (cell.firstChild !== cellInnerWrapper) {
96
- cellInnerWrapper.appendChild(cell.firstChild);
97
- }
98
- }
99
- }
100
- }));
101
- }
102
- _check(table) {
103
- if (!this.options.forceResponsive) {
104
- table.classList.remove("bt");
105
- const tableSize = table.getBoundingClientRect().left + table.offsetWidth;
106
- if (tableSize > table.parentElement.offsetWidth) {
107
- this._start(table);
108
- } else {
109
- this._end(table);
110
- }
111
- } else {
112
- if (this.options.breakpoint !== null && window.innerWidth <= this.options.breakpoint || this.options.containerBreakpoint !== null && table.parentElement.offsetWidth <= this.options.containerBreakpoint) {
113
- this._start(table);
114
- } else {
115
- this._end(table);
116
- }
117
- }
118
- }
119
- _start(table) {
120
- table.classList.add("bt");
121
- if (!this.options.header) {
122
- table.classList.add("bt--no-header");
123
- }
124
- if (this.options.tableWrap) {
125
- table.closest(".bt-wrapper").classList.add("active");
126
- }
127
- }
128
- _end(table) {
129
- table.classList.remove("bt", "bt--no-header");
130
- if (this.options.tableWrap) {
131
- table.closest(".bt-wrapper").classList.remove("active");
132
- }
133
- }
134
- _resize(table) {
135
- this.tables.forEach((table => {
136
- if (table.getAttribute("data-bt-active")) {
137
- this._check(table);
138
- }
139
- }));
140
- }
141
- start() {
142
- this.tables.forEach((table => {
143
- this._start(table);
144
- }));
145
- }
146
- stop() {
147
- this.tables.forEach((table => {
148
- this._end(table);
149
- }));
150
- }
151
- restart() {
152
- this.destroy();
153
- this._getTables();
154
- this._setup();
155
- }
156
- destroy() {
157
- this.tables.forEach((table => {
158
- if (table.getAttribute("data-bt-active")) {
159
- table.classList.remove("bt", "bt--no-header");
160
- table.removeAttribute("data-bt-active");
161
- const cells = table.querySelectorAll("td");
162
- cells.forEach((td => td.removeAttribute("data-th")));
163
- if (this.options.contentWrap) {
164
- cells.forEach((td => {
165
- const content = td.querySelector(".bt-content");
166
- if (content) {
167
- td.innerHTML = content.innerHTML;
168
- }
169
- }));
170
- }
171
- if (this.options.tableWrap) {
172
- table.parentNode.outerHTML = table.parentNode.innerHTML;
173
- }
174
- }
175
- }));
176
- if (!this.options.noResize) {
177
- window.removeEventListener("resize", this._tableResizeEvent);
178
- }
179
- }
180
- }
4
+ "use strict";class basictable{constructor(tableSel,options={}){const _defaultOptions={breakpoint:null,containerBreakpoint:null,contentWrap:true,forceResponsive:true,noResize:false,tableWrap:false,showEmptyCells:false,header:true};this.tableSel=tableSel;this.options={..._defaultOptions,...options};if(this.options.breakpoint===null&&this.options.containerBreakpoint===null){this.options.breakpoint=568}this._getTables();this._setup()}_getTables(){this.tables=document.querySelectorAll(this.tableSel)}_setup(){this.tables.forEach((table=>{table.setAttribute("data-bt-active",true);const headings=[];if(this.options.tableWrap){const tableWrapper=document.createElement("div");tableWrapper.classList.add("bt-wrapper");table.parentNode.insertBefore(tableWrapper,table);tableWrapper.appendChild(table)}if(this.options.header){let format="";if(table.querySelectorAll("thead tr th").length){format="thead th"}else if(table.querySelectorAll("tbody tr th").length){format="tbody tr th"}else if(table.querySelectorAll("th").length){format="tr:first-of-type th"}else{format="tr:first-of-type td"}table.querySelectorAll(format).forEach((heading=>{const colspan=parseInt(heading.getAttribute("colspan"),10)||1;const parentRow=heading.closest("tr");const row=[].indexOf.call(parentRow.parentElement.children,parentRow);if(!headings[row]){headings[row]=[]}for(let i=0;i<colspan;i++){headings[row].push(heading)}}));table.querySelectorAll("tbody tr").forEach((row=>this._setupRow(row,headings)));table.querySelectorAll("tfoot tr").forEach((row=>this._setupRow(row,headings)))}if(!this.options.noResize){this._check(table)}}));if(!this.options.noResize){this._tableResizeEvent=()=>this._resize();window.addEventListener("resize",this._tableResizeEvent)}}_setupRow(row,headings){row.querySelectorAll(":scope > *").forEach((cell=>{if((cell.innerHTML.trim()===""||cell.innerHTML==="&nbsp;")&&this.options.showEmptyCells){cell.classList("bt-hide")}else{const cellIndex=[].indexOf.call(cell.parentElement.children,cell);let headingText="";for(let j=0;j<headings.length;j++){if(j!==0){headingText+=": "}const heading=headings[j][cellIndex];headingText+=heading.textContent}cell.setAttribute("data-th",headingText);const cellInnerWrapper=document.createElement("span");cellInnerWrapper.classList.add("bt-content");if(this.options.contentWrap&&cell.firstChild!==cellInnerWrapper){cell.appendChild(cellInnerWrapper);while(cell.firstChild!==cellInnerWrapper){cellInnerWrapper.appendChild(cell.firstChild)}}}}))}_getInnerWidth(el){const computedStyle=window.getComputedStyle(el);const border=parseFloat(computedStyle.borderLeft)+parseFloat(computedStyle.borderRight);const padding=parseFloat(computedStyle.paddingLeft)+parseFloat(computedStyle.paddingRight);return parseFloat(computedStyle.width)-(border+padding)}_check(table){if(!this.options.forceResponsive){table.classList.remove("bt");const tableSize=table.offsetWidth;if(tableSize>this._getInnerWidth(table.parentElement)){this._start(table)}else{this._end(table)}}else{if(this.options.breakpoint!==null&&window.innerWidth<=this.options.breakpoint||this.options.containerBreakpoint!==null&&table.parentElement.offsetWidth<=this.options.containerBreakpoint){this._start(table)}else{this._end(table)}}}_start(table){table.classList.add("bt");if(!this.options.header){table.classList.add("bt--no-header")}if(this.options.tableWrap){table.closest(".bt-wrapper").classList.add("active")}}_end(table){table.classList.remove("bt","bt--no-header");if(this.options.tableWrap){table.closest(".bt-wrapper").classList.remove("active")}}_resize(table){this.tables.forEach((table=>{if(table.getAttribute("data-bt-active")){this._check(table)}}))}start(){this.tables.forEach((table=>{this._start(table)}))}stop(){this.tables.forEach((table=>{this._end(table)}))}restart(){this.destroy();this._getTables();this._setup()}destroy(){this.tables.forEach((table=>{if(table.getAttribute("data-bt-active")){table.classList.remove("bt","bt--no-header");table.removeAttribute("data-bt-active");const cells=table.querySelectorAll("td");cells.forEach((td=>td.removeAttribute("data-th")));if(this.options.contentWrap){cells.forEach((td=>{const content=td.querySelector(".bt-content");if(content){td.innerHTML=content.innerHTML}}))}if(this.options.tableWrap){table.parentNode.outerHTML=table.parentNode.innerHTML}}}));if(!this.options.noResize){window.removeEventListener("resize",this._tableResizeEvent)}}}
package/dist/js/basictable.min.js CHANGED
@@ -1,4 +1,4 @@
1
1
  /*
2
2
  * @license Basictable - Vanilla JS | MIT | Jerry Low | https://www.github.com/jerrylow/basictable
3
3
  */
4
- "use strict";class basictable{constructor(t,e={}){this.tableSel=t,this.options={breakpoint:null,containerBreakpoint:null,contentWrap:!0,forceResponsive:!0,noResize:!1,tableWrap:!1,showEmptyCells:!1,header:!0,...e},null===this.options.breakpoint&&null===this.options.containerBreakpoint&&(this.options.breakpoint=568),this._getTables(),this._setup()}_getTables(){this.tables=document.querySelectorAll(this.tableSel)}_setup(){this.tables.forEach((t=>{t.setAttribute("data-bt-active",!0);const e=[];if(this.options.tableWrap){const e=document.createElement("div");e.classList.add("bt-wrapper"),t.parentNode.insertBefore(e,t),e.appendChild(t)}if(this.options.header){let s="";s=t.querySelectorAll("thead tr th").length?"thead th":t.querySelectorAll("tbody tr th").length?"tbody tr th":t.querySelectorAll("th").length?"tr:first-of-type th":"tr:first-of-type td",t.querySelectorAll(s).forEach((t=>{const s=parseInt(t.getAttribute("colspan"),10)||1,i=t.closest("tr"),o=[].indexOf.call(i.parentElement.children,i);e[o]||(e[o]=[]);for(let i=0;i<s;i++)e[o].push(t)})),t.querySelectorAll("tbody tr").forEach((t=>this._setupRow(t,e))),t.querySelectorAll("tfoot tr").forEach((t=>this._setupRow(t,e)))}this.options.noResize||this._check(t)})),this.options.noResize||(this._tableResizeEvent=()=>this._resize(),window.addEventListener("resize",this._tableResizeEvent))}_setupRow(t,e){t.querySelectorAll(":scope > *").forEach((t=>{if(""!==t.innerHTML.trim()&&"&nbsp;"!==t.innerHTML||!this.options.showEmptyCells){const s=[].indexOf.call(t.parentElement.children,t);let i="";for(let t=0;t<e.length;t++){0!==t&&(i+=": ");i+=e[t][s].textContent}t.setAttribute("data-th",i);const o=document.createElement("span");if(o.classList.add("bt-content"),this.options.contentWrap&&t.firstChild!==o)for(t.appendChild(o);t.firstChild!==o;)o.appendChild(t.firstChild)}else t.classList("bt-hide")}))}_check(t){if(this.options.forceResponsive)null!==this.options.breakpoint&&window.innerWidth<=this.options.breakpoint||null!==this.options.containerBreakpoint&&t.parentElement.offsetWidth<=this.options.containerBreakpoint?this._start(t):this._end(t);else{t.classList.remove("bt");t.getBoundingClientRect().left+t.offsetWidth>t.parentElement.offsetWidth?this._start(t):this._end(t)}}_start(t){t.classList.add("bt"),this.options.header||t.classList.add("bt--no-header"),this.options.tableWrap&&t.closest(".bt-wrapper").classList.add("active")}_end(t){t.classList.remove("bt","bt--no-header"),this.options.tableWrap&&t.closest(".bt-wrapper").classList.remove("active")}_resize(t){this.tables.forEach((t=>{t.getAttribute("data-bt-active")&&this._check(t)}))}start(){this.tables.forEach((t=>{this._start(t)}))}stop(){this.tables.forEach((t=>{this._end(t)}))}restart(){this.destroy(),this._getTables(),this._setup()}destroy(){this.tables.forEach((t=>{if(t.getAttribute("data-bt-active")){t.classList.remove("bt","bt--no-header"),t.removeAttribute("data-bt-active");const e=t.querySelectorAll("td");e.forEach((t=>t.removeAttribute("data-th"))),this.options.contentWrap&&e.forEach((t=>{const e=t.querySelector(".bt-content");e&&(t.innerHTML=e.innerHTML)})),this.options.tableWrap&&(t.parentNode.outerHTML=t.parentNode.innerHTML)}})),this.options.noResize||window.removeEventListener("resize",this._tableResizeEvent)}}
4
+ "use strict";class basictable{constructor(t,e={}){this.tableSel=t,this.options={breakpoint:null,containerBreakpoint:null,contentWrap:!0,forceResponsive:!0,noResize:!1,tableWrap:!1,showEmptyCells:!1,header:!0,...e},null===this.options.breakpoint&&null===this.options.containerBreakpoint&&(this.options.breakpoint=568),this._getTables(),this._setup()}_getTables(){this.tables=document.querySelectorAll(this.tableSel)}_setup(){this.tables.forEach((t=>{t.setAttribute("data-bt-active",!0);const e=[];if(this.options.tableWrap){const e=document.createElement("div");e.classList.add("bt-wrapper"),t.parentNode.insertBefore(e,t),e.appendChild(t)}if(this.options.header){let s="";s=t.querySelectorAll("thead tr th").length?"thead th":t.querySelectorAll("tbody tr th").length?"tbody tr th":t.querySelectorAll("th").length?"tr:first-of-type th":"tr:first-of-type td",t.querySelectorAll(s).forEach((t=>{const s=parseInt(t.getAttribute("colspan"),10)||1,i=t.closest("tr"),o=[].indexOf.call(i.parentElement.children,i);e[o]||(e[o]=[]);for(let i=0;i<s;i++)e[o].push(t)})),t.querySelectorAll("tbody tr").forEach((t=>this._setupRow(t,e))),t.querySelectorAll("tfoot tr").forEach((t=>this._setupRow(t,e)))}this.options.noResize||this._check(t)})),this.options.noResize||(this._tableResizeEvent=()=>this._resize(),window.addEventListener("resize",this._tableResizeEvent))}_setupRow(t,e){t.querySelectorAll(":scope > *").forEach((t=>{if(""!==t.innerHTML.trim()&&"&nbsp;"!==t.innerHTML||!this.options.showEmptyCells){const s=[].indexOf.call(t.parentElement.children,t);let i="";for(let t=0;t<e.length;t++){0!==t&&(i+=": ");i+=e[t][s].textContent}t.setAttribute("data-th",i);const o=document.createElement("span");if(o.classList.add("bt-content"),this.options.contentWrap&&t.firstChild!==o)for(t.appendChild(o);t.firstChild!==o;)o.appendChild(t.firstChild)}else t.classList("bt-hide")}))}_getInnerWidth(t){const e=window.getComputedStyle(t),s=parseFloat(e.borderLeft)+parseFloat(e.borderRight),i=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return parseFloat(e.width)-(s+i)}_check(t){if(this.options.forceResponsive)null!==this.options.breakpoint&&window.innerWidth<=this.options.breakpoint||null!==this.options.containerBreakpoint&&t.parentElement.offsetWidth<=this.options.containerBreakpoint?this._start(t):this._end(t);else{t.classList.remove("bt");t.offsetWidth>this._getInnerWidth(t.parentElement)?this._start(t):this._end(t)}}_start(t){t.classList.add("bt"),this.options.header||t.classList.add("bt--no-header"),this.options.tableWrap&&t.closest(".bt-wrapper").classList.add("active")}_end(t){t.classList.remove("bt","bt--no-header"),this.options.tableWrap&&t.closest(".bt-wrapper").classList.remove("active")}_resize(t){this.tables.forEach((t=>{t.getAttribute("data-bt-active")&&this._check(t)}))}start(){this.tables.forEach((t=>{this._start(t)}))}stop(){this.tables.forEach((t=>{this._end(t)}))}restart(){this.destroy(),this._getTables(),this._setup()}destroy(){this.tables.forEach((t=>{if(t.getAttribute("data-bt-active")){t.classList.remove("bt","bt--no-header"),t.removeAttribute("data-bt-active");const e=t.querySelectorAll("td");e.forEach((t=>t.removeAttribute("data-th"))),this.options.contentWrap&&e.forEach((t=>{const e=t.querySelector(".bt-content");e&&(t.innerHTML=e.innerHTML)})),this.options.tableWrap&&(t.parentNode.outerHTML=t.parentNode.innerHTML)}})),this.options.noResize||window.removeEventListener("resize",this._tableResizeEvent)}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "basictable",
3
- "version": "2.0.3",
3
+ "version": "2.0.4",
4
4
  "description": "Basic Table jQuery and Vanilla JS plugin for simple responsive tables.",
5
5
  "main": "jquery.basictable.js",
6
6
  "scripts": {
package/src/js/basictable.js CHANGED
@@ -125,14 +125,22 @@ class basictable { // eslint-disable-line no-unused-vars
125
125
  })
126
126
  }
127
127
 
128
+ _getInnerWidth (el) {
129
+ const computedStyle = window.getComputedStyle(el);
130
+ const border = parseFloat(computedStyle.borderLeft) + parseFloat(computedStyle.borderRight);
131
+ const padding = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
132
+
133
+ return parseFloat(computedStyle.width) - (border + padding);
134
+ }
135
+
128
136
  _check (table) {
129
137
  // Only change when table is larger than parent if force
130
138
  // responsive is turned off.
131
139
  if (!this.options.forceResponsive) {
132
140
  table.classList.remove('bt')
133
- const tableSize = table.getBoundingClientRect().left + table.offsetWidth
141
+ const tableSize = table.offsetWidth;
134
142
 
135
- if (tableSize > table.parentElement.offsetWidth) {
143
+ if (tableSize > this._getInnerWidth(table.parentElement)) {
136
144
  this._start(table)
137
145
  } else {
138
146
  this._end(table)