cphipps/lubelog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added sorting functionality to touch screen devices.

Browse Source
This commit is contained in:
DESKTOP-GENO133\IvanPlex
2024-02-02 07:01:42 -07:00
parent 7bc08c9950
commit 812e768f93
2 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Views/Home/Index.cshtml
View File

@@ -14,7 +14,7 @@
<div class="lubelogger-mobile-nav" onclick="hideMobileNav()"> <div class="lubelogger-mobile-nav" onclick="hideMobileNav()">
<ul class="navbar-nav" id="homeTab" role="tablist"> <ul class="navbar-nav" id="homeTab" role="tablist">
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link @(Model == "garage" ? "active" : "")" id="garage-tab" data-bs-toggle="tab" data-bs-target="#garage-tab-pane" type="button" role="tab"><span class="ms-2 display-3"><i class="bi bi-car-front me-2"></i>Garage</span></button> <button class="nav-link user-select-none @(Model == "garage" ? "active" : "")" ontouchstart="detectLongTouch(this)" ontouchend="detectTouchEndPremature(this)" id="garage-tab" data-bs-toggle="tab" data-bs-target="#garage-tab-pane" type="button" role="tab"><span class="ms-2 display-3"><i class="bi bi-car-front me-2"></i>Garage</span></button>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link @(Model == "settings" ? "active" : "")" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-tab-pane" type="button" role="tab"><span class="ms-2 display-3"><i class="bi bi-gear me-2"></i>Settings</span></button> <button class="nav-link @(Model == "settings" ? "active" : "")" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-tab-pane" type="button" role="tab"><span class="ms-2 display-3"><i class="bi bi-gear me-2"></i>Settings</span></button>

26
wwwroot/js/garage.js
View File

@@ -105,8 +105,26 @@ function sortVehicles(desc) {
sortedRow.push($('.garage-item-add')) sortedRow.push($('.garage-item-add'))
$('.vehiclesContainer').html(sortedRow); $('.vehiclesContainer').html(sortedRow);
} }
function sortGarage(sender) {
var touchtimer;
var touchduration = 800;
function detectLongTouch(sender) {
event.preventDefault(); event.preventDefault();
if (!touchtimer) {
touchtimer = setTimeout(function () { sortGarage(sender, true); detectTouchEndPremature(sender); }, touchduration);
}
}
function detectTouchEndPremature(sender) {
if (touchtimer) {
clearTimeout(touchtimer);
touchtimer = null;
}
}
function sortGarage(sender, isMobile) {
if (event != undefined) {
event.preventDefault();
}
sender = $(sender); sender = $(sender);
if (sender.hasClass("active")) { if (sender.hasClass("active")) {
//do sorting only if garage is the active tab. //do sorting only if garage is the active tab.
@@ -117,12 +135,12 @@ function sortGarage(sender) {
if (sender.hasClass('sort-asc')) { if (sender.hasClass('sort-asc')) {
sender.removeClass('sort-asc'); sender.removeClass('sort-asc');
sender.addClass('sort-desc'); sender.addClass('sort-desc');
sender.html(`${garageIcon}${sortColumn}${sortDescIcon}`); sender.html(isMobile ? `<span class="ms-2 display-3">${garageIcon}${sortColumn}${sortDescIcon}</span>` : `${garageIcon}${sortColumn}${sortDescIcon}`);
sortVehicles(true); sortVehicles(true);
} else if (sender.hasClass('sort-desc')) { } else if (sender.hasClass('sort-desc')) {
//restore table //restore table
sender.removeClass('sort-desc'); sender.removeClass('sort-desc');
sender.html(`${garageIcon}${sortColumn}`); sender.html(isMobile ? `<span class="ms-2 display-3">${garageIcon}${sortColumn}</span>` : `${garageIcon}${sortColumn}`);
$('.vehiclesContainer').html(storedTableRowState); $('.vehiclesContainer').html(storedTableRowState);
filterGarage($(".tagfilter.bg-primary").get(0), true); filterGarage($(".tagfilter.bg-primary").get(0), true);
} else { } else {
@@ -142,7 +160,7 @@ function sortGarage(sender) {
} }
} }
sender.addClass('sort-asc'); sender.addClass('sort-asc');
sender.html(`${garageIcon}${sortColumn}${sortAscIcon}`); sender.html(isMobile ? `<span class="ms-2 display-3">${garageIcon}${sortColumn}${sortAscIcon}</span>` : `${garageIcon}${sortColumn}${sortAscIcon}`);
storedTableRowState = null; storedTableRowState = null;
storedTableRowState = $('.vehiclesContainer').html(); storedTableRowState = $('.vehiclesContainer').html();
sortVehicles(false); sortVehicles(false);