Skip to content
This repository has been archived by the owner on Oct 21, 2022. It is now read-only.

Commit

Permalink
Refactor for swipe toggle to work better with columns that use colspa…
Browse files Browse the repository at this point in the history 
…n. Showing a column with colspan=2 will hide two columns. Hiding a column with colspan=2 will show two columns, for example.
  • Loading branch information
@zachleat
zachleat committed Mar 15, 2019
1 parent 8e285ac commit 4045129
Showing 1 changed file with 101 additions and 33 deletions.
134 changes: 101 additions & 33 deletions src/tables.swipetoggle.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/*
* tablesaw: A set of plugins for responsive tables
* Swipe Toggle: swipe gesture (or buttons) to navigate which columns are shown.
* Copyright (c) 2013 Filament Group, Inc.
* MIT License
*/
* tablesaw: A set of plugins for responsive tables
* Swipe Toggle: swipe gesture (or buttons) to navigate which columns are shown.
* Copyright (c) 2013 Filament Group, Inc.
* MIT License
*/

(function() {
var classes = {
Expand Down Expand Up @@ -39,6 +39,7 @@
var $headerCells = tbl._getPrimaryHeaderCells();
var $headerCellsNoPersist = $headerCells.not('[data-tablesaw-priority="persist"]');
var headerWidths = [];
var headerWidthsNoPersist = [];
var $head = $(document.head || "head");
var tableId = $table.attr("id");

Expand All @@ -57,9 +58,14 @@
$table.find("." + classes.hiddenCol).removeClass(classes.hiddenCol);

headerWidths = [];
headerWidthsNoPersist = [];
// Calculate initial widths
$headerCells.each(function() {
headerWidths.push(this.offsetWidth);
var width = this.offsetWidth;
headerWidths.push(width);
if (!isPersistent(this)) {
headerWidthsNoPersist.push(width);
}
});

// reset props
Expand Down Expand Up @@ -145,12 +151,12 @@
}

function getNext() {
var next = [],
checkFound;

var next = [];
var checkFound;
$headerCellsNoPersist.each(function(i) {
var $t = $(this),
isHidden = $t.css("display") === "none" || $t.is("." + classes.hiddenCol);
var $t = $(this);
var isHidden = $t.css("display") === "none" || $t.is("." + classes.hiddenCol);
var colspan = parseInt($t.attr("colspan") || 1, 10);

if (!isHidden && !checkFound) {
checkFound = true;
Expand All @@ -170,11 +176,7 @@
return [next[1] - 1, next[0] - 1];
}

function nextpair(fwd) {
return fwd ? getNext() : getPrev();
}

function canAdvance(pair) {
function canNavigate(pair) {
return pair[1] > -1 && pair[1] < $headerCellsNoPersist.length;
}

Expand Down Expand Up @@ -217,10 +219,16 @@
}
});

var firstPersist = true;
$headerCells.each(function(index) {
if (persist[index]) {
// for visual box-shadow
persistColumn(this);

if (firstPersist) {
tblsaw._$getCells(this).css("width", sums[index] + "px");
firstPersist = false;
}
return;
}

Expand All @@ -236,32 +244,92 @@
$table.trigger("tablesawcolumns");
}

function advance(fwd) {
var pair = nextpair(fwd);
if (canAdvance(pair)) {
function goForward() {
navigate(true);
}
function goBackward() {
navigate(false);
}

function navigate(isNavigateForward) {
var pair;
if (isNavigateForward) {
pair = getNext();
} else {
pair = getPrev();
}

if (canNavigate(pair)) {
if (isNaN(pair[0])) {
if (fwd) {
if (isNavigateForward) {
pair[0] = 0;
} else {
pair[0] = $headerCellsNoPersist.length - 1;
}
}

// TODO just blindly hiding the previous column and showing the next column can result in
// column content overflow
maintainWidths();
hideColumn($headerCellsNoPersist.get(pair[0]));
tblsaw.updateColspanCells(classes.hiddenCol, $headerCellsNoPersist.get(pair[0]), false);

showColumn($headerCellsNoPersist.get(pair[1]));
tblsaw.updateColspanCells(classes.hiddenCol, $headerCellsNoPersist.get(pair[1]), true);
var showColumnIndex = pair[1];
var hideColumnIndex = pair[0];
var colspanCounter = parseInt(
$headerCellsNoPersist.eq(showColumnIndex).attr("colspan") || 1,
10
);
var columnToHide;

while (
colspanCounter > 0 &&
hideColumnIndex >= 0 &&
hideColumnIndex <= headerWidthsNoPersist.length &&
((isNavigateForward && hideColumnIndex < showColumnIndex) ||
(!isNavigateForward && hideColumnIndex > showColumnIndex))
) {
columnToHide = $headerCellsNoPersist.get(hideColumnIndex);

if (columnToHide) {
hideColumn(columnToHide);
tblsaw.updateColspanCells(classes.hiddenCol, columnToHide, false);
colspanCounter -= parseInt(
$headerCellsNoPersist.eq(hideColumnIndex).attr("colspan") || 1,
10
);
}

if (isNavigateForward) {
hideColumnIndex++;
} else {
hideColumnIndex--;
}
}

while (colspanCounter <= 0) {
var columnToShow = $headerCellsNoPersist.get(showColumnIndex);
showColumn(columnToShow);
tblsaw.updateColspanCells(classes.hiddenCol, columnToShow, true);

if (isNavigateForward) {
showColumnIndex++;
} else {
showColumnIndex--;
}

colspanCounter += parseInt(
$headerCellsNoPersist.eq(showColumnIndex).attr("colspan") || 1,
10
);
}

$table.trigger("tablesawcolumns");
}
}

$prevBtn.add($nextBtn).on("click", function(e) {
advance(!!$(e.target).closest($nextBtn).length);
if (!!$(e.target).closest($nextBtn).length) {
goForward();
} else {
goBackward();
}
e.preventDefault();
});

Expand Down Expand Up @@ -306,10 +374,10 @@

if (!isVerticalSwipe && !isPageScrolled) {
if (x - originX < -1 * horizontalThreshold) {
advance(true);
goForward();
}
if (x - originX > horizontalThreshold) {
advance(false);
goBackward();
}
}

Expand All @@ -324,8 +392,8 @@

$table
.on("tablesawcolumns.swipetoggle", function() {
var canGoPrev = canAdvance(getPrev());
var canGoNext = canAdvance(getNext());
var canGoPrev = canNavigate(getPrev());
var canGoNext = canNavigate(getNext());
$prevBtn[canGoPrev ? "removeClass" : "addClass"](classes.hideBtn);
$nextBtn[canGoNext ? "removeClass" : "addClass"](classes.hideBtn);

Expand All @@ -334,10 +402,10 @@
);
})
.on("tablesawnext.swipetoggle", function() {
advance(true);
goForward();
})
.on("tablesawprev.swipetoggle", function() {
advance(false);
goBackward();
})
.on(Tablesaw.events.destroy + ".swipetoggle", function() {
var $t = $(this);
Expand Down

0 comments on commit 4045129

Please sign in to comment.