Skip to content

Commit

Permalink
Pagination and other small stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@cheeezburga
cheeezburga committed Oct 15, 2024
1 parent c2c0d80 commit c3fe25a
Show file tree
Hide file tree
Showing 3 changed files with 196 additions and 43 deletions.
69 changes: 67 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
padding: 20px;
position: relative;
}
h1 {
h1, h2 {
text-align: center;
}
#pattern {
Expand Down Expand Up @@ -154,11 +154,56 @@
border-radius: 4px;
padding: 10px;
opacity: 0;
transition: opacity 0.3s ease;
transition: opacity 0.2s ease;
}
.copy-notification.show {
opacity: 1;
}

.controls-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.options, .pagination {
display: flex;
align-items: center;
margin-bottom: 0;
}
.options label {
margin-right: 5px;
}
.options select {
padding: 5px;
}
.pagination button {
margin: 0 5px;
padding: 5px 10px;
background-color: var(--box-background-color);
color: var(--text-color);
border: 1px solid var(--box-border-color);
border-radius: 4px;
cursor: pointer;
}
.pagination button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.pagination input {
width: 50px;
text-align: center;
padding: 5px;
margin: 0 5px;
background-color: var(--box-background-color);
color: var(--text-color);
border: 1px solid var(--box-border-color);
border-radius: 4px;
}
.pagination span {
font-size: 14px;
}
</style>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
Expand All @@ -177,6 +222,26 @@ <h2>Statistics</h2>

<div id="patterns" class="box">
<h2>Possible Patterns</h2>

<div class="controls-container">
<div class="options">
<label for="display-count">Display:</label>
<select id="display-count">
<option value="10">10</option>
<option value="100">100</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="all">All</option>
</select>
</div>
<div class="pagination">
<button id="prev-page">Previous</button>
<input type="number" id="current-page" min="1" value="1">
<span id="total-pages">/ 1</span>
<button id="next-page">Next</button>
</div>
</div>

<div id="patternsContent">
</div>
</div>
Expand Down
7 changes: 1 addition & 6 deletions js/resultProcessor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,7 @@ export default class ResultProcessor {
let shortestPattern = Infinity;
let totalLength = 0;
const parseTagsSet = new Set();

const MAX_RESULTS = 100; // should this be a configurable option?
if (results.length > MAX_RESULTS) {
results = results.slice(0, MAX_RESULTS);
}


for (const result of results) {
const length = result.text.length;
totalLength += length;
Expand Down
163 changes: 128 additions & 35 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,56 @@ import ResultProcessor from './js/resultProcessor.js';

let tooltip;
let copyNotification;
let allData = null;
let allResults = [];
let currentPage = 1;
let totalPages = 1;
let resultsPerPage = 100;
let patternsContent;
let prevPageButton;
let nextPageButton;
let currentPageInput;
let totalPagesSpan;
let displayCount;

document.addEventListener('DOMContentLoaded', () => {
const patternInput = document.getElementById('pattern');
const themeToggleButton = document.getElementById('theme-toggle');
patternsContent = document.getElementById('patternsContent');
prevPageButton = document.getElementById('prev-page');
nextPageButton = document.getElementById('next-page');
currentPageInput = document.getElementById('current-page');
totalPagesSpan = document.getElementById('total-pages');
displayCount = document.getElementById('display-count');

displayCount.value = '100';

// pattern input listener
patternInput.addEventListener('input', debounce(parsePattern, 5));

// possible pattern related stuff
tooltip = document.getElementById('tooltip');

copyNotification = document.getElementById('copy-notification');

// theme stuff
initializeTheme();
const themeToggleButton = document.getElementById('theme-toggle');
themeToggleButton.addEventListener('click', toggleTheme);

// pagination listeners
prevPageButton.addEventListener('click', () => changePage(currentPage - 1));
nextPageButton.addEventListener('click', () => changePage(currentPage + 1));
currentPageInput.addEventListener('change', (e) => {
let page = parseInt(e.target.value);
if (isNaN(page) || page < 1) page = 1;
if (page > totalPages) page = totalPages;
changePage(page);
});
displayCount.addEventListener('change', () => {
updateResultsPerPage();
currentPage = 1;
updatePagination();
showPage(currentPage);
});
});

// this is basically a limit on how often parsePattern should be called
Expand All @@ -31,12 +69,12 @@ function debounce(func, delay) {
function parsePattern() {
const pattern = document.getElementById('pattern').value;
const statsContent = document.getElementById('statsContent');
const patternsContent = document.getElementById('patternsContent');

// no pattern :(
if (!pattern.trim()) {
patternsContent.innerText = 'Enter a pattern to get started.';
statsContent.innerHTML = '';
resetPagination();
return;
}

Expand All @@ -54,6 +92,7 @@ function parsePattern() {

if (estimatedCombinations > MAX_COMBINATIONS) {
displayError('Too many combinations!');
resetPagination();
return;
}

Expand All @@ -62,30 +101,72 @@ function parsePattern() {
const processor = new ResultProcessor();
const data = processor.process(variants);

displayResults(data);
// sort by length, looks nicer imo
data.results.sort((a, b) => a.text.length - b.text.length);

allData = data;
allResults = data.results;
currentPage = 1;

updateResultsPerPage();
updatePagination();
displayStatistics();
showPage(currentPage);
} catch (error) {
displayError('Invalid syntax pattern!');
resetPagination();
}
}

function displayResults(data) {
function updateResultsPerPage() {
const displayValue = displayCount.value;
if (displayValue === 'all') {
resultsPerPage = allResults.length;
} else {
const parsedValue = parseInt(displayValue);
if (!isNaN(parsedValue) && parsedValue > 0) {
resultsPerPage = parsedValue;
} else {
resultsPerPage = 10; // fallback - should never get here tho
}
}
}

function updatePagination() {
totalPages = Math.ceil(allResults.length / resultsPerPage);
if (totalPages === 0)
totalPages = 1;
currentPage = Math.min(currentPage, totalPages);
updatePaginationControls();
}

function updatePaginationControls() {
totalPagesSpan.textContent = `/ ${totalPages}`;
currentPageInput.value = currentPage;

prevPageButton.disabled = currentPage <= 1;
nextPageButton.disabled = currentPage >= totalPages;

const paginationDiv = document.querySelector('.pagination');
if (allResults && allResults.length > 0) {
paginationDiv.style.display = 'flex';
} else {
paginationDiv.style.display = 'none';
}
}

function displayStatistics() {
const {
results,
totalPatterns,
longestPattern,
shortestPattern,
averagePattern,
uniqueParseTags,
} = data;
} = allData;

const statsContent = document.getElementById('statsContent');
const patternsContent = document.getElementById('patternsContent');

patternsContent.innerHTML = '';
statsContent.innerHTML = '';

// update the stats part

const stats = [
{ label: 'Total Patterns', value: totalPatterns },
{ label: 'Longest Pattern Length', value: `${longestPattern} characters` },
Expand All @@ -96,28 +177,29 @@ function displayResults(data) {
if (uniqueParseTags.length > 0)
stats.push({ label: 'Unique Parse Tags', value: uniqueParseTags.join(', ') });

if (totalPatterns > results.length) {
stats.push({
label: 'Note',
value: `Displaying first ${results.length} of ${totalPatterns} patterns.`,
});
}

stats.forEach((stat) => {
const statItem = document.createElement('div');
statItem.className = 'stat-item';
statItem.innerHTML = `<strong>${stat.label}:</strong><br>${stat.value}`;
statsContent.appendChild(statItem);
});
}

// sort by length ascending, looks nicer imo
results.sort((a, b) => a.text.length - b.text.length);
function showPage(page) {
patternsContent.innerHTML = '';
currentPage = page;
updatePaginationControls();

const startIndex = (currentPage - 1) * resultsPerPage;
const endIndex = startIndex + resultsPerPage;
if (endIndex > allResults.length)
endIndex = allResults.length;
const pageResults = allResults.slice(startIndex, endIndex);

const ul = document.createElement('ul');
patternsContent.appendChild(ul);

for (let i = 0; i < results.length; i++) {
const result = results[i];
pageResults.forEach((result) => {
const li = document.createElement('li');
li.className = 'result';

Expand All @@ -133,21 +215,30 @@ function displayResults(data) {
positionTooltip(e);
}
});
li.addEventListener('mousemove', (e) => { positionTooltip(e); });
li.addEventListener('mouseleave', () => { tooltip.style.display = 'none'; });
li.addEventListener('click', () => { copyToClipboard(patternText); });

li.addEventListener('mousemove', (e) => {
positionTooltip(e);
});

li.addEventListener('mouseleave', () => {
tooltip.style.display = 'none';
});
ul.appendChild(li);
});
}

li.addEventListener('click', () => {
copyToClipboard(patternText);
});
function changePage(page) {
if (page < 1)
page = 1;
if (page > totalPages)
page = totalPages;
currentPage = page;
showPage(currentPage);
}

ul.appendChild(li);
}
function resetPagination() {
allData = null;
allResults = [];
currentPage = 1;
totalPages = 1;
patternsContent.innerHTML = '';
updatePaginationControls();
}

function positionTooltip(e) {
Expand Down Expand Up @@ -175,6 +266,8 @@ function displayError(message) {

patternsContent.innerHTML = `<p class="error">${message}</p>`;
statsContent.innerHTML = '';

resetPagination();
}

function initializeTheme() {
Expand Down

0 comments on commit c3fe25a

Please sign in to comment.