tyk/quectel-rgmii-toolkit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed critical bug on bands table when viewing on mobile

Browse Source
This commit is contained in:
Russel Yasol
2024-10-03 13:30:14 +08:00
parent badfb5e182
commit a9f8ae753b
11 changed files with 617 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
www/about.html
View File

@@ -58,7 +58,7 @@
<div id="navMenu" class="navbar-menu">
<div class="navbar-start ml-6">
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
<a class="navbar-item" href="/"> Home </a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"> Cellular </a>
<div class="navbar-dropdown is-boxed">
@@ -79,7 +79,7 @@
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
</div>
</div>
<a class="navbar-item" href="/about.html"> About </a>
<a class="navbar-item has-text-weight-bold" href="/about.html"> About </a>
</div>
<div class="navbar-end">

4
www/advance-settings.html
View File

@@ -59,7 +59,7 @@
<div id="navMenu" class="navbar-menu">
<div class="navbar-start ml-6">
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
<a class="navbar-item" href="/"> Home </a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"> Cellular </a>
<div class="navbar-dropdown is-boxed">
@@ -75,7 +75,7 @@
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"> Advance </a>
<div class="navbar-dropdown is-boxed">
<a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
<a class="navbar-item has-text-weight-bold" href="/advance-settings.html"> Advance Settings </a>
<a class="navbar-item" href="#">Experimental Features</a>
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
</div>

297
www/bandlock.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -14,10 +15,7 @@
<link rel="stylesheet" href="css/custom.css" />
<!-- Font awesome icons -->
<script
src="https://kit.fontawesome.com/b0caedfab3.js"
crossorigin="anonymous"
></script>
<script src="https://kit.fontawesome.com/b0caedfab3.js" crossorigin="anonymous"></script>
<script src="js/styles/toggle-theme.js"></script>
<script src="/js/styles/nav-burger.js"></script>
@@ -41,13 +39,7 @@
<img src="/assets/logo.png" alt="Logo" />
<span class="title">QuecManager</span>
</a>
<a
role="button"
class="navbar-burger"
aria-label="menu"
aria-expanded="false"
data-target="navMenu"
>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
@@ -57,16 +49,14 @@
<div id="navMenu" class="navbar-menu">
<div class="navbar-start ml-6">
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
<a class="navbar-item" href="/"> Home </a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"> Cellular </a>
<a class="navbar-link has-text-weight-bold"> Cellular </a>
<div class="navbar-dropdown is-boxed">
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
<a class="navbar-item" href="/cell-scanner.html">Cell Scanner</a>
<a class="navbar-item" href="/cell-settings.html"
>Cell Settings</a
>
<a class="navbar-item" href="/cell-settings.html">Cell Settings</a>
<a class="navbar-item" href="/cell-sms.html"> Cell SMS </a>
</div>
</div>
@@ -85,10 +75,7 @@
<div class="navbar-item">
<div class="buttons is-flex-direction-column-mobile">
<p class="control is-expanded-mobile">
<a
href="#"
class="button is-link is-outlined is-fullwidth-mobile"
>
<a href="#" class="button is-link is-outlined is-fullwidth-mobile">
<span class="icon">
<i class="fas fa-arrows-rotate"></i>
</span>
@@ -104,21 +91,14 @@
</div>
</p>
<p class="control ml-2 is-mobile">
<a
href="#"
class="button is-warning is-outlined js-theme-toggle"
>
<a href="#" class="button is-warning is-outlined js-theme-toggle">
<span class="icon">
<i class="fas fa-sun"></i>
</span>
</a>
</p>
<p class="control ml-2 is-mobile">
<a
href="#"
class="button is-warning is-outlined js-theme-toggle"
id="logoutButton"
>
<a href="#" class="button is-warning is-outlined js-theme-toggle" id="logoutButton">
<span class="icon">
<i class="fas fa-right-from-bracket"></i>
</span>
@@ -142,31 +122,21 @@
<div class="card-content">
<div class="fixed-grid has-5-cols has-3-cols-mobile">
<div class="grid" id="lte_bands">
<!-- write each lte band cell here -->
<!-- LTE bands will be populated here -->
</div>
</div>
</div>
<div class="card-footer">
<a
href="#"
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
>
<div id="lockLte" class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
Lock LTE Bands
</a>
<a
href="#"
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
>
</div>
<div id="uncheckLte"
class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
Uncheck All
</a>
<a
href="#"
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
>
</div>
<div class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
Reset
</a>
</div>
</div>
</div>
</div>
@@ -179,31 +149,21 @@
<div class="card-content">
<div class="fixed-grid has-5-cols has-3-cols-mobile">
<div class="grid" id="nsa_bands">
<!-- write each nsa band cell here -->
<!-- NSA bands will be populated here -->
</div>
</div>
</div>
<div class="card-footer">
<a
href="#"
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
>
<div id="lockNsa" class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
Lock NSA Bands
</a>
<a
href="#"
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
>
</div>
<div id="uncheckNsa"
class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
Uncheck All
</a>
<a
href="#"
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
>
</div>
<div class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
Reset
</a>
</div>
</div>
</div>
</div>
@@ -216,31 +176,20 @@
<div class="card-content">
<div class="fixed-grid has-5-cols has-3-cols-mobile">
<div class="grid" id="sa_bands">
<!-- write each SA band cell here -->
<!-- SA bands will be populated here -->
</div>
</div>
</div>
<div class="card-footer">
<a
href="#"
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
>
<div id="lockSa" class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
Lock SA Bands
</a>
<a
href="#"
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
>
</div>
<div id="uncheckSa" class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
Uncheck All
</a>
<a
href="#"
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
>
</div>
<div class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
Reset
</a>
</div>
</div>
</div>
</div>
@@ -302,32 +251,176 @@
</section>
</div>
</div>
</body>
<script>
var lte_bands =
"1:2:3:4:5:7:8:12:13:14:18:19:20:25:26:28:29:30:32:34:38:39:40:41:42:43:46:48:66:71";
var nsa_bands = "1:2:3:5:7:8:12:20:25:28:38:40:41:48:66:71:77:78:79";
var sa_bands = "1:2:3:5:7:8:12:20:25:28:38:40:41:48:66:71:77:78:79";
// Function to fetch supported bands via AT command and populate the checkboxes
async function fetchSupportedBands() {
try {
const response = await fetch('/cgi-bin/atinout_handler.sh', {
method: 'POST',
body: 'command=' + encodeURIComponent('AT+QNWPREFCFG="policy_band"')
});
const data = await response.json();
function populateBands(bandsString, targetId) {
var bandsArray = bandsString.split(":");
var html = "";
const lteBandsMatch = data.output.match(/"lte_band",([0-9:]+)/);
const nsaBandsMatch = data.output.match(/"nsa_nr5g_band",([0-9:]+)/);
const saBandsMatch = data.output.match(/"nrdc_nr5g_band",([0-9:]+)/);;
for (var i = 0; i < bandsArray.length; i++) {
html +=
'<div class="cell"><label class="checkbox"><input type="checkbox" /> B' +
bandsArray[i] +
"</label></div>";
if (lteBandsMatch) populateBands(lteBandsMatch[1], "#lte_bands");
if (nsaBandsMatch) populateBands(nsaBandsMatch[1], "#nsa_bands");
if (saBandsMatch) populateBands(saBandsMatch[1], "#sa_bands");
fetchActiveBands();
} catch (error) {
console.error('Error fetching supported bands:', error);
}
}
// Function to fetch currently active bands and mark the checkboxes accordingly
async function fetchActiveBands() {
try {
const response = await fetch('/cgi-bin/atinout_handler.sh', {
method: 'POST',
body: 'command=' + encodeURIComponent('AT+QNWPREFCFG="lte_band";+QNWPREFCFG="nsa_nr5g_band";+QNWPREFCFG="nrdc_nr5g_band"')
});
const data = await response.json();
// Remove the first line of the output
data.output = data.output.split('\n').slice(1).join('\n');
// Extract active bands
const activeLteBands = data.output.match(/"lte_band",([0-9:]+)/)[1].split(':');
const activeNsaBands = data.output.match(/"nsa_nr5g_band",([0-9:]+)/)[1].split(':');
const activeSaBands = data.output.match(/"nr5g_band",([0-9:]+)/)[1].split(':');
// // Mark checkboxes as checked for active bands
markActiveBands(activeLteBands, '#lte_bands');
markActiveBands(activeNsaBands, '#nsa_bands');
markActiveBands(activeSaBands, '#sa_bands');
} catch (error) {
console.error('Error fetching active bands:', error);
}
}
// Function to populate bands in the target element
function populateBands(bandsString, targetId) {
var bandsArray = bandsString.split(':');
var html = '';
for (var i = 0; i < bandsArray.length; i++) {
html += `<div class="cell">
<label class="checkbox">
<input type="checkbox" value="${bandsArray[i]}" /> B${bandsArray[i]}
</label>
</div>`;
}
// Inject the generated HTML into the target element
document.querySelector(targetId).innerHTML = html;
}
// Populate the bands in their respective grids
populateBands(lte_bands, "#lte_bands");
populateBands(nsa_bands, "#nsa_bands");
populateBands(sa_bands, "#sa_bands");
// Function to mark checkboxes as checked based on active bands
function markActiveBands(activeBands, targetId) {
const checkboxes = document.querySelectorAll(`${targetId} input[type="checkbox"]`);
checkboxes.forEach((checkbox) => {
if (activeBands.includes(checkbox.value)) {
checkbox.setAttribute('checked', 'checked');
}
});
}
// Function to uncheck all checkboxes in the target element
function uncheckAll(targetId) {
const checkboxes = document.querySelectorAll(`${targetId} input[type="checkbox"]`);
checkboxes.forEach((checkbox) => {
checkbox.removeAttribute('checked');
checkbox.checked = false; // Also update the state programmatically
});
}
// Event listeners for "Uncheck All" buttons
document.getElementById('uncheckLte').addEventListener('click', function (event) {
event.preventDefault();
uncheckAll('#lte_bands');
});
document.getElementById('uncheckNsa').addEventListener('click', function (event) {
event.preventDefault();
uncheckAll('#nsa_bands');
});
document.getElementById('uncheckSa').addEventListener('click', function (event) {
event.preventDefault();
uncheckAll('#sa_bands');
});
// Locking the Bands
// Function to get checked bands and generate AT command
function getCheckedBandsCommand(targetId, commandType) {
const checkboxes = document.querySelectorAll(`${targetId} input[type="checkbox"]:checked`);
const checkedBands = Array.from(checkboxes).map(cb => cb.value).sort((a, b) => a - b);
if (checkedBands.length === 0) {
return null; // Return null if no bands are selected
}
const bandString = checkedBands.join(':');
return `AT+QNWPREFCFG="${commandType}",${bandString}`;
}
// Function to send AT command via atinout
async function sendATCommand(command) {
try {
const response = await fetch('/cgi-bin/atinout_handler.sh', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `command=${encodeURIComponent(command)}`
});
const data = await response.json();
return data;
// refetch active bands after successful command
fetchActiveBands();
} catch (error) {
console.error('Error sending AT command:', error);
throw error;
}
}
// Function to handle band locking for a specific type
async function lockBands(targetId, commandType) {
const command = getCheckedBandsCommand(targetId, commandType);
if (!command) {
alert('Please select at least one band to lock.');
return;
}
try {
await sendATCommand(command);
alert(`Successfully locked ${commandType.split('_')[0].toUpperCase()} bands`);
} catch (error) {
alert(`Failed to lock bands: ${error.message}`);
}
}
// Event listeners for Lock buttons
document.getElementById('lockLte').addEventListener('click', () =>
lockBands('#lte_bands', 'lte_band')
);
document.getElementById('lockNsa').addEventListener('click', () =>
lockBands('#nsa_bands', 'nsa_nr5g_band')
);
document.getElementById('lockSa').addEventListener('click', () =>
lockBands('#sa_bands', 'nr5g_band')
);
// Initial call to fetch supported bands on page load
window.onload = fetchSupportedBands;
</script>
</body>
</html>

4
www/cell-locking.html
View File

@@ -58,9 +58,9 @@
<div id="navMenu" class="navbar-menu">
<div class="navbar-start ml-6">
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
<a class="navbar-item" href="/"> Home </a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"> Cellular </a>
<a class="navbar-link has-text-weight-bold"> Cellular </a>
<div class="navbar-dropdown is-boxed">
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>

4
www/cell-scanner.html
View File

@@ -59,8 +59,8 @@
<div id="navMenu" class="navbar-menu">
<div class="navbar-start ml-6">
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"> Cellular </a>
<div class="navbar-item">
<a class="navbar-link has-text-weight-bold"> Cellular </a>
<div class="navbar-dropdown is-boxed">
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>

4
www/cell-settings.html
View File

@@ -59,8 +59,8 @@
<div id="navMenu" class="navbar-menu">
<div class="navbar-start ml-6">
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"> Cellular </a>
<div class="navbar-item">
<a class="navbar-link has-text-weight-bold"> Cellular </a>
<div class="navbar-dropdown is-boxed">
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>

4
www/cell-sms.html
View File

@@ -59,8 +59,8 @@
<div id="navMenu" class="navbar-menu">
<div class="navbar-start ml-6">
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"> Cellular </a>
<div class="navbar-item">
<a class="navbar-link has-text-weight-bold"> Cellular </a>
<div class="navbar-dropdown is-boxed">
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>

28
www/css/custom.css
View File

@@ -261,3 +261,31 @@ html.theme-light {
background: #3273dc;
}
}
/* Change checkbox checked color to this: #3273dc */
/* Hide the default checkbox */
/* input[type="checkbox"] {
appearance: none;
width: 16px;
height: 16px;
border: 2px solid #ccc;
border-radius: 4px;
background-color: white;
cursor: pointer;
} */
/* Style when checkbox is checked */
/* input[type="checkbox"]:checked {
background-color: blue;
border-color: blue;
} */
/* Style the checkmark */
/* input[type="checkbox"]:checked::before {
content: "✔";
display: block;
color: white;
font-size: 12px;
text-align: center;
line-height: 14px;
} */

10
www/index.html
View File

@@ -26,7 +26,9 @@
</head>
<body>
<div class="box container mt-6">
<div class="container mt-6">
<div class="card">
<div class="card-content">
<div class="fixed-grid has-1-cols">
<div class="grid is-gap-5">
<div class="cell">
@@ -72,7 +74,9 @@
</div>
</div>
<button class="button is-primary" type="submit">Sign in</button>
<button class="button is-primary" type="submit">
Sign in
</button>
<p
id="error"
class="has-text-danger has-text-weight-semibold mt-2"
@@ -82,5 +86,7 @@
</div>
</div>
</div>
</div>
</div>
</body>
</html>

0
www/js/band-locking.js/fetch-bands.js Normal file
View File

140
www/js/home/main.js
View File

@@ -1,12 +1,12 @@
// Constants
const ACCESS_TECH_MAP = {
2: "UTRAN",
4: "UTRAN W/ HSDPA",
5: "UTRAN W/ HSUPA",
6: "UTRAN W/ HSDPA & HSUPA",
4: "UTRAN / HSDPA",
5: "UTRAN / HSUPA",
6: "UTRAN / HSDPA & HSUPA",
7: "E-UTRAN",
10: "E-UTRAN connected to a 5GCN",
11: "NR connected to a 5GCN",
10: "E-UTRAN - 5GCN",
11: "NR - 5GCN",
12: "NG-RAN",
13: "E-UTRAN-NR dual",
};
@@ -384,8 +384,12 @@ function processBandwidth(response, networkType) {
if (networkType === "NR5G-NSA") {
processNR5GBandwidth(sccLines, pccBWParsed);
} else {
} else if (networkType === "NR5G-SA") {
processNR5GBandwidth(sccLines, pccBWParsed);
} else if (networkType === "LTE") {
processLTEBandwidth(sccLines, pccBWParsed);
} else {
setText("allBW", "Unknown");
}
}
@@ -397,7 +401,25 @@ function extractSCCData(response) {
}
function processNR5GBandwidth(sccLines, pccBWParsed) {
const nrBW = sccLines[sccLines.length - 1].split(":")[1].split(",")[2].trim();
const networkType = determineNetworkType(jsonData[10].response);
if (networkType === "NR5G-SA") {
const nrBW = sccLines.slice(0, sccLines.length - 1).map((line) => {
const bw = line.split(":")[1].split(",")[2].trim();
return NR_BANDWIDTH_MAP[bw] || "Unknown";
});
if (nrBW.length === 0) {
setText("allBW", `${pccBWParsed}`);
return;
}
setText("allBW", `${pccBWParsed} + ${nrBW.join(" / ")}`);
} else {
const nrBW = sccLines[sccLines.length - 1]
.split(":")[1]
.split(",")[2]
.trim();
const nrBWParsed = NR_BANDWIDTH_MAP[nrBW] || "Unknown";
const lteBW = sccLines.slice(0, sccLines.length - 1).map((line) => {
@@ -409,7 +431,8 @@ function processNR5GBandwidth(sccLines, pccBWParsed) {
setText("allBW", `${pccBWParsed} + NR${nrBWParsed}`);
return;
}
setText("allBW", `${pccBWParsed} + ${lteBW.join(" + ")} + NR${nrBWParsed}`);
setText("allBW", `${pccBWParsed} + ${lteBW.join(" / ")} + NR${nrBWParsed}`);
}
}
function processLTEBandwidth(sccLines, pccBWParsed) {
@@ -773,6 +796,8 @@ function processBandsTable(jsonData) {
const sccRow = createBandTableRow(sccBand, networkType, servingCellJSON);
tableBody.appendChild(sccRow);
});
initMobileCarousel();
}
function processCellInfo(jsonData) {
@@ -1086,9 +1111,8 @@ document.addEventListener("DOMContentLoaded", () => {
setupEventListeners();
});
// Mobile carousel functions
let touchStartX = 0;
let touchEndX = 0;
let carouselInitialized = false;
let currentSlide = 0;
function initMobileCarousel() {
const table = document.getElementById("bandTable");
@@ -1096,14 +1120,57 @@ function initMobileCarousel() {
const rows = tbody.querySelectorAll("tr");
if (window.innerWidth <= 768) {
// Create carousel structure
const carouselWrapper = document.createElement("div");
let carouselWrapper = document.querySelector(".cell-carousel");
if (!carouselInitialized) {
// Create carousel structure only if it doesn't exist
carouselWrapper = document.createElement("div");
carouselWrapper.className = "cell-carousel";
const carouselContainer = document.createElement("div");
carouselContainer.className = "cell-carousel__container";
// Move content to carousel
carouselWrapper.appendChild(carouselContainer);
// Add touch event listeners only once
carouselContainer.addEventListener("touchstart", handleTouchStart, false);
carouselContainer.addEventListener("touchmove", handleTouchMove, false);
carouselContainer.addEventListener("touchend", handleTouchEnd, false);
// Insert carousel into DOM
table.style.display = "none";
table.parentNode.insertBefore(carouselWrapper, table);
carouselInitialized = true;
}
// Update carousel content
updateCarouselContent(rows);
} else {
// Restore desktop view
const carousel = document.querySelector(".cell-carousel");
if (carousel) {
carousel.style.display = "none";
table.style.display = "";
}
rows.forEach((row) => {
row.innerHTML = row.getAttribute("data-desktop");
});
}
}
function updateCarouselContent(rows) {
const carouselContainer = document.querySelector(".cell-carousel__container");
const indicators = document.querySelector(".cell-carousel__indicators");
if (!carouselContainer) return;
// Clear existing content
carouselContainer.innerHTML = "";
if (indicators) indicators.remove();
// Add new slides
rows.forEach((row) => {
carouselContainer.insertAdjacentHTML(
"beforeend",
@@ -1111,50 +1178,37 @@ function initMobileCarousel() {
);
});
carouselWrapper.appendChild(carouselContainer);
// Add only indicators
// Update indicators
const indicatorsHTML = `
<div class="cell-carousel__indicators">
${Array.from(
{ length: rows.length },
(_, i) =>
`<span class="cell-carousel__dot ${
i === 0 ? "cell-carousel__dot--active" : ""
i === currentSlide ? "cell-carousel__dot--active" : ""
}"
onclick="goToSlide(${i})"></span>`
).join("")}
</div>
`;
// Replace table with carousel
table.style.display = "none";
table.parentNode.insertBefore(carouselWrapper, table);
carouselWrapper.insertAdjacentHTML("beforeend", indicatorsHTML);
carouselContainer.parentNode.insertAdjacentHTML("beforeend", indicatorsHTML);
// Add touch event listeners
carouselContainer.addEventListener("touchstart", handleTouchStart, false);
carouselContainer.addEventListener("touchmove", handleTouchMove, false);
carouselContainer.addEventListener("touchend", handleTouchEnd, false);
} else {
// Restore desktop view if necessary
const carousel = document.querySelector(".cell-carousel");
if (carousel) {
carousel.remove();
table.style.display = "";
}
rows.forEach((row) => {
row.innerHTML = row.getAttribute("data-desktop");
});
}
// Reset to first slide and update display
currentSlide = 0;
updateCarousel();
}
// Your existing touch handling functions remain the same
let touchStartX = 0;
let touchEndX = 0;
function handleTouchStart(event) {
touchStartX = event.touches[0].clientX;
}
function handleTouchMove(event) {
event.preventDefault(); // Prevent scrolling while swiping
event.preventDefault();
}
function handleTouchEnd(event) {
@@ -1163,18 +1217,15 @@ function handleTouchEnd(event) {
}
function handleSwipe() {
const swipeThreshold = 50; // Minimum distance for a swipe
const swipeThreshold = 50;
const container = document.querySelector(".cell-carousel__container");
const slides = container.querySelectorAll(".cell-carousel__slide");
const diffX = touchStartX - touchEndX;
if (Math.abs(diffX) > swipeThreshold) {
if (diffX > 0 && currentSlide < slides.length - 1) {
// Swipe left, go to next slide
currentSlide++;
} else if (diffX < 0 && currentSlide > 0) {
// Swipe right, go to previous slide
currentSlide--;
}
updateCarousel();
@@ -1188,15 +1239,16 @@ function goToSlide(index) {
function updateCarousel() {
const container = document.querySelector(".cell-carousel__container");
if (!container) return;
container.style.transform = `translateX(-${currentSlide * 100}%)`;
// Update indicators
const dots = document.querySelectorAll(".cell-carousel__dot");
dots.forEach((dot, index) => {
dot.classList.toggle("cell-carousel__dot--active", index === currentSlide);
});
}
// Initialize carousel on load and resize
// Update your event listeners
window.addEventListener("load", initMobileCarousel);
window.addEventListener("resize", initMobileCarousel);