From 473833b857406c2d9a7330b2c2fc71e00c58a1e8 Mon Sep 17 00:00:00 2001 From: Thomas Portelange Date: Mon, 25 Jul 2022 13:28:36 +0200 Subject: [PATCH 1/4] dispatch row responsive toggled --- .../modules/Format/defaults/formatters/responsiveCollapse.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/js/modules/Format/defaults/formatters/responsiveCollapse.js b/src/js/modules/Format/defaults/formatters/responsiveCollapse.js index e2ee9f5e4..838c7a7cb 100644 --- a/src/js/modules/Format/defaults/formatters/responsiveCollapse.js +++ b/src/js/modules/Format/defaults/formatters/responsiveCollapse.js @@ -27,10 +27,11 @@ export default function(cell, formatterParams, onRendered){ el.addEventListener("click", function(e){ e.stopImmediatePropagation(); toggleList(!config.open); + cell.getRow()._row.dispatch("row-responsive-toggled", cell.getRow(), config.open); cell.getTable().rowManager.adjustTableSize(); }); toggleList(config.open); return el; -} \ No newline at end of file +} From 466e5187d19909271ea364e654f814759e355a7a Mon Sep 17 00:00:00 2001 From: Thomas Portelange Date: Mon, 25 Jul 2022 13:34:16 +0200 Subject: [PATCH 2/4] add flex responsive mode --- .../ResponsiveLayout/ResponsiveLayout.js | 64 ++++++++++++++++--- 1 file changed, 56 insertions(+), 8 deletions(-) diff --git a/src/js/modules/ResponsiveLayout/ResponsiveLayout.js b/src/js/modules/ResponsiveLayout/ResponsiveLayout.js index 4ddb849f9..c6ea57b05 100644 --- a/src/js/modules/ResponsiveLayout/ResponsiveLayout.js +++ b/src/js/modules/ResponsiveLayout/ResponsiveLayout.js @@ -33,12 +33,16 @@ class ResponsiveLayout extends Module{ this.subscribe("column-delete", this.initializeResponsivity.bind(this)); this.subscribe("table-redrawing", this.tableRedraw.bind(this)); - + if(this.table.options.responsiveLayout === "collapse"){ this.subscribe("row-data-changed", this.generateCollapsedRowContent.bind(this)); this.subscribe("row-init", this.initializeRow.bind(this)); this.subscribe("row-layout", this.layoutRow.bind(this)); } + if(this.table.options.responsiveLayout === "flexCollapse"){ + this.subscribe("row-init", this.initializeRow.bind(this)); + this.subscribe("row-responsive-toggled", this.toggleFlexRow.bind(this)); + } } } @@ -65,7 +69,7 @@ class ResponsiveLayout extends Module{ column.modules.responsive.index = i; columns.push(column); - if(!column.visible && this.mode === "collapse"){ + if(!column.visible && (this.mode === "collapse" || this.mode === "flexCollapse")){ this.hiddenColumns.push(column); } } @@ -109,12 +113,43 @@ class ResponsiveLayout extends Module{ column.modules.responsive = {order: typeof def.responsive === "undefined" ? 1 : def.responsive, visible:def.visible === false ? false : true}; } + toggleFlexRow(row, isOpen){ + if(isOpen){ + row.getElement().classList.add("tabulator-responsive-flex-open"); + row.getCells().forEach(function(cell) { + var el = cell.getElement(); + var title = cell.getColumn().getDefinition().title; + if(el.style.display === "none") { + el.style.display = 'block'; + el.style.width = "100%"; + if(title && typeof title !== "undefined"){ + el.dataset.label = title; + } + el.classList.add("tabulator-responsive-flex-cell"); + } + }); + } + else { + row.getElement().classList.remove("tabulator-responsive-flex-open"); + row.getCells().forEach(function(cell) { + var el = cell.getElement(); + if(!el.classList.contains("tabulator-responsive-flex-cell")){ + return; + } + el.style.display = 'none'; + el.classList.remove("tabulator-responsive-flex-cell"); + }); + } + } + initializeRow(row){ var el; if(row.type !== "calc"){ - el = document.createElement("div"); - el.classList.add("tabulator-responsive-collapse"); + if(this.table.options.responsiveLayout === "collapse"){ + el = document.createElement("div"); + el.classList.add("tabulator-responsive-collapse"); + } row.modules.responsiveLayout = { element:el, @@ -149,9 +184,11 @@ class ResponsiveLayout extends Module{ column.hide(false, true); - if(this.mode === "collapse"){ + if(this.mode === "collapse" || this.mode === "flexCollapse"){ this.hiddenColumns.unshift(column); - this.generateCollapsedContent(); + if(this.mode === "collapse"){ + this.generateCollapsedContent(); + } if(this.collapseHandleColumn && !colCount){ this.collapseHandleColumn.show(); @@ -166,14 +203,22 @@ class ResponsiveLayout extends Module{ //set column width to prevent calculation loops on uninitialized columns column.setWidth(column.getWidth()); - if(this.mode === "collapse"){ + if(this.mode === "collapse" || this.mode === "flexCollapse"){ index = this.hiddenColumns.indexOf(column); if(index > -1){ this.hiddenColumns.splice(index, 1); } - this.generateCollapsedContent(); + if(this.mode === "collapse"){ + this.generateCollapsedContent(); + } + if(this.mode === "flexCollapse"){ + column.getCells().forEach(function(cell) { + var el = cell.getElement(); + el.classList.remove("tabulator-responsive-flex-cell"); + }); + } if(this.collapseHandleColumn && !this.hiddenColumns.length){ this.collapseHandleColumn.hide(); @@ -244,6 +289,9 @@ class ResponsiveLayout extends Module{ if(row.modules.responsiveLayout){ el = row.modules.responsiveLayout.element; + if(!el){ + return; + } while(el.firstChild) el.removeChild(el.firstChild); From f97adc78843d0327d44005151825214b1847033e Mon Sep 17 00:00:00 2001 From: Thomas Portelange Date: Mon, 25 Jul 2022 13:34:30 +0200 Subject: [PATCH 3/4] add flex responsive mode From 7c08368a67fe3f010ab388c9761fc00bced5db3a Mon Sep 17 00:00:00 2001 From: Thomas Portelange Date: Mon, 25 Jul 2022 13:41:35 +0200 Subject: [PATCH 4/4] convert indent --- .../ResponsiveLayout/ResponsiveLayout.js | 76 +++++++++---------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/src/js/modules/ResponsiveLayout/ResponsiveLayout.js b/src/js/modules/ResponsiveLayout/ResponsiveLayout.js index c6ea57b05..260ae8640 100644 --- a/src/js/modules/ResponsiveLayout/ResponsiveLayout.js +++ b/src/js/modules/ResponsiveLayout/ResponsiveLayout.js @@ -113,42 +113,42 @@ class ResponsiveLayout extends Module{ column.modules.responsive = {order: typeof def.responsive === "undefined" ? 1 : def.responsive, visible:def.visible === false ? false : true}; } - toggleFlexRow(row, isOpen){ - if(isOpen){ - row.getElement().classList.add("tabulator-responsive-flex-open"); - row.getCells().forEach(function(cell) { - var el = cell.getElement(); - var title = cell.getColumn().getDefinition().title; - if(el.style.display === "none") { - el.style.display = 'block'; - el.style.width = "100%"; - if(title && typeof title !== "undefined"){ - el.dataset.label = title; - } - el.classList.add("tabulator-responsive-flex-cell"); - } - }); - } - else { - row.getElement().classList.remove("tabulator-responsive-flex-open"); - row.getCells().forEach(function(cell) { - var el = cell.getElement(); - if(!el.classList.contains("tabulator-responsive-flex-cell")){ - return; - } - el.style.display = 'none'; - el.classList.remove("tabulator-responsive-flex-cell"); - }); - } - } + toggleFlexRow(row, isOpen){ + if(isOpen){ + row.getElement().classList.add("tabulator-responsive-flex-open"); + row.getCells().forEach(function(cell) { + var el = cell.getElement(); + var title = cell.getColumn().getDefinition().title; + if(el.style.display === "none") { + el.style.display = 'block'; + el.style.width = "100%"; + if(title && typeof title !== "undefined"){ + el.dataset.label = title; + } + el.classList.add("tabulator-responsive-flex-cell"); + } + }); + } + else { + row.getElement().classList.remove("tabulator-responsive-flex-open"); + row.getCells().forEach(function(cell) { + var el = cell.getElement(); + if(!el.classList.contains("tabulator-responsive-flex-cell")){ + return; + } + el.style.display = 'none'; + el.classList.remove("tabulator-responsive-flex-cell"); + }); + } + } initializeRow(row){ var el; if(row.type !== "calc"){ if(this.table.options.responsiveLayout === "collapse"){ - el = document.createElement("div"); - el.classList.add("tabulator-responsive-collapse"); + el = document.createElement("div"); + el.classList.add("tabulator-responsive-collapse"); } row.modules.responsiveLayout = { @@ -156,7 +156,7 @@ class ResponsiveLayout extends Module{ open:this.collapseStartOpen, }; - if(!this.collapseStartOpen){ + if(this.collapseStartOpen){ el.style.display = 'none'; } } @@ -187,7 +187,7 @@ class ResponsiveLayout extends Module{ if(this.mode === "collapse" || this.mode === "flexCollapse"){ this.hiddenColumns.unshift(column); if(this.mode === "collapse"){ - this.generateCollapsedContent(); + this.generateCollapsedContent(); } if(this.collapseHandleColumn && !colCount){ @@ -211,13 +211,13 @@ class ResponsiveLayout extends Module{ } if(this.mode === "collapse"){ - this.generateCollapsedContent(); + this.generateCollapsedContent(); } if(this.mode === "flexCollapse"){ - column.getCells().forEach(function(cell) { - var el = cell.getElement(); - el.classList.remove("tabulator-responsive-flex-cell"); - }); + column.getCells().forEach(function(cell) { + var el = cell.getElement(); + el.classList.remove("tabulator-responsive-flex-cell"); + }); } if(this.collapseHandleColumn && !this.hiddenColumns.length){ @@ -290,7 +290,7 @@ class ResponsiveLayout extends Module{ if(row.modules.responsiveLayout){ el = row.modules.responsiveLayout.element; if(!el){ - return; + return; } while(el.firstChild) el.removeChild(el.firstChild);