Kobe/docupulse
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

contact list JS separation

Browse Source
This commit is contained in:
Kobe
2025-05-28 09:55:16 +02:00
parent e20af39e83
commit 56d9b5e95b
2 changed files with 51 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
static/js/contacts-filter.js Normal file
View File

@@ -0,0 +1,50 @@
// Debounce function
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
// Initialize filter functionality
document.addEventListener('DOMContentLoaded', function() {
// Auto-submit the form on select change
document.querySelectorAll('#filterForm select').forEach(function(el) {
el.addEventListener('change', function() {
document.getElementById('filterForm').submit();
});
});
// Debounced submit for search input, keep cursor after reload
const searchInput = document.querySelector('#filterForm input[name="search"]');
if (searchInput) {
searchInput.addEventListener('input', debounce(function() {
// Save value and cursor position
sessionStorage.setItem('searchFocus', '1');
sessionStorage.setItem('searchValue', searchInput.value);
sessionStorage.setItem('searchPos', searchInput.selectionStart);
document.getElementById('filterForm').submit();
}, 300));
// On page load, restore focus and cursor position if needed
if (sessionStorage.getItem('searchFocus') === '1') {
searchInput.focus();
const val = sessionStorage.getItem('searchValue') || '';
const pos = parseInt(sessionStorage.getItem('searchPos')) || val.length;
searchInput.value = val;
searchInput.setSelectionRange(pos, pos);
// Clean up
sessionStorage.removeItem('searchFocus');
sessionStorage.removeItem('searchValue');
sessionStorage.removeItem('searchPos');
}
}
// Clear button resets all filters and submits the form
document.getElementById('clearFilters').addEventListener('click', function() {
document.querySelector('#filterForm input[name="search"]').value = '';
document.querySelector('#filterForm select[name="role"]').selectedIndex = 0;
document.getElementById('filterForm').submit();
});
});

48
templates/contacts/list.html
View File

@@ -43,53 +43,7 @@
</button>
</div>
</form>
<script>
// Debounce function
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
// Auto-submit the form on select change
document.querySelectorAll('#filterForm select').forEach(function(el) {
el.addEventListener('change', function() {
document.getElementById('filterForm').submit();
});
});
// Debounced submit for search input, keep cursor after reload
const searchInput = document.querySelector('#filterForm input[name="search"]');
if (searchInput) {
searchInput.addEventListener('input', debounce(function() {
// Save value and cursor position
sessionStorage.setItem('searchFocus', '1');
sessionStorage.setItem('searchValue', searchInput.value);
sessionStorage.setItem('searchPos', searchInput.selectionStart);
document.getElementById('filterForm').submit();
}, 300));
// On page load, restore focus and cursor position if needed
window.addEventListener('DOMContentLoaded', function() {
if (sessionStorage.getItem('searchFocus') === '1') {
searchInput.focus();
const val = sessionStorage.getItem('searchValue') || '';
const pos = parseInt(sessionStorage.getItem('searchPos')) || val.length;
searchInput.value = val;
searchInput.setSelectionRange(pos, pos);
// Clean up
sessionStorage.removeItem('searchFocus');
sessionStorage.removeItem('searchValue');
sessionStorage.removeItem('searchPos');
}
});
}
// Clear button resets all filters and submits the form
document.getElementById('clearFilters').addEventListener('click', function() {
document.querySelector('#filterForm input[name="search"]').value = '';
document.querySelector('#filterForm select[name="role"]').selectedIndex = 0;
document.getElementById('filterForm').submit();
});
</script>
<script src="{{ url_for('static', filename='js/contacts-filter.js') }}"></script>
</div>
<!-- Contacts List -->