Common.js: Difference between revisions
From WhereToday
No edit summary |
No edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* Any JavaScript here will be loaded for all users on every page load. */ | /* Any JavaScript here will be loaded for all users on every page load. */ | ||
window.onload = function() { | |||
sortList("sortrelated","A"); | |||
}; | |||
function sortList(id,tag) { | |||
var list, i, seq, switching, b, shouldSwitch; | |||
list = document.getElementById(id); | |||
switching = true; | |||
/* Make a loop that will continue until | |||
no switching has been done: */ | |||
while (switching) { | |||
// Start by saying: no switching is done: | |||
switching = false; | |||
b = list.getElementsByTagName(tag); | |||
// Loop through all list items: | |||
for (i = 0; i < (b.length - 1); i++) { | |||
// Start by saying there should be no switching: | |||
shouldSwitch = false; | |||
/* Check if the next item should | |||
switch place with the current item: */ | |||
if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) { | |||
/* if (b[i].id.toLowerCase() > b[i + 1].id.toLowerCase()) { */ | |||
/* If next item is alphabetically lower than current item, | |||
mark as a switch and break the loop: */ | |||
shouldSwitch = true; | |||
break; | |||
} | |||
} | |||
if (shouldSwitch) { | |||
/* If a switch has been marked, make the switch | |||
and mark the switch as done: */ | |||
/* hard coded to <a href, not sure how to copy structure */ | |||
t=b[i].innerHTML; | |||
b[i].innerHTML=b[i+1].innerHTML; | |||
b[i+1].innerHTML=t; | |||
t=b[i].href; | |||
b[i].href=b[i+1].href; | |||
b[i+1].href=t; | |||
t=b[i].title; | |||
b[i].title=b[i+1].title; | |||
b[i+1].title=t; | |||
switching = true; | |||
} | |||
} | |||
} | |||
function filterAll () { | function filterAll () { | ||
var input, filter, td, i, description, keywords, txtValue; | var input, filter, td, i, description, keywords, txtValue; | ||
var map = document.getElementsByClassName("leaflet-marker-icon"); | //var map = document.getElementsByClassName("leaflet-marker-icon"); | ||
var | var items = document.getElementsByClassName("ItemLine"); | ||
var timeline = document.getElementsByClassName("TimelineLine"); | var timeline = document.getElementsByClassName("TimelineLine"); | ||
var gallery = document.getElementsByClassName("galleryline"); | var gallery = document.getElementsByClassName("galleryline"); | ||
var documents = document.getElementsByClassName(" | var documents = document.getElementsByClassName("DocumentLine"); | ||
var dplline = document.getElementsByClassName("DPLLine"); | |||
var table = document.getElementById("Table"); | var table = document.getElementById("Table"); | ||
if (table) | |||
if (table) {var tabletr = table.getElementsByTagName("tr")} | |||
if (document.getElementById("filterinput") !== null && document.getElementById("filterinput").value !== null) | if (document.getElementById("filterinput") !== null && document.getElementById("filterinput").value !== null) | ||
{ | { | ||
input = document.getElementById("filterinput"); | input = document.getElementById("filterinput"); | ||
filter = input.value.toUpperCase().replace( | filter = input.value.toUpperCase().replace(/_/g," "); | ||
filter1 = input.value.toUpperCase().replace( | filter1 = input.value.toUpperCase().replace(/ /g,"_"); | ||
if (filter.search("!") == 0) { | if (filter.search("!") == 0) { | ||
if (filter.length > 1) { | if (filter.length > 1) { | ||
for (i = 0; i < map.length; i++) { | //for (i = 0; i < map.length; i++) { | ||
// if (map[i].id.length > 0) { | |||
// if (map[i].id !== "" && map[i].id.toUpperCase().search(filter.substr(1)) == -1) { | |||
// map[i].style.opacity="1.0"; | |||
// } else { | |||
// map[i].style.opacity="0.05"; | |||
// } | |||
// } | |||
//} | |||
for (i = 0; i < items.length; i++) { | |||
if (items[i].id.toUpperCase().search(filter1.substr(1)) == -1) { | |||
items[i].style.display = 'inline-block'; | |||
} else { | } else { | ||
items[i].style.display = 'none'; | |||
} | } | ||
} | } | ||
| Line 54: | Line 105: | ||
for (i = 0; i < documents.length; i++) { | for (i = 0; i < documents.length; i++) { | ||
if (documents[i].id.toUpperCase().search( | if (documents[i].id.toUpperCase().search(filter1.substr(1)) == -1) { | ||
documents[i].style.display = ''; | documents[i].style.display = ''; | ||
} else { | } else { | ||
documents[i].style.display = 'none'; | documents[i].style.display = 'none'; | ||
} | |||
} | |||
for (i = 0; i < dplline.length; i++) { | |||
if (dplline[i].id.toUpperCase().search(filter.substr(1)) == -1) { | |||
dplline[i].style.display = ''; | |||
} else { | |||
dplline[i].style.display = 'none'; | |||
} | } | ||
} | } | ||
| Line 67: | Line 121: | ||
if (table) { | if (table) { | ||
for (i = 0; i < tabletr.length; i++) { | for (i = 0; i < tabletr.length; i++) { | ||
// match text in | // match text in all columns | ||
if (tabletr[i].getElementsByTagName("td")[0]) { | if (tabletr[i].getElementsByTagName("td")[0]) { | ||
txtValue = tabletr[i].getElementsByTagName("td")[0].textContent | txtValue = tabletr[i].getElementsByTagName("td")[0].textContent | ||
+ tabletr[i].getElementsByTagName("td")[1].textContent | + tabletr[i].getElementsByTagName("td")[1].textContent | ||
+ tabletr[i].getElementsByTagName("td")[2].textContent | + tabletr[i].getElementsByTagName("td")[2].textContent | ||
+ tabletr[i].getElementsByTagName("td")[3].textContent; | + tabletr[i].getElementsByTagName("td")[3].textContent | ||
+ tabletr[i].getElementsByTagName("td")[4].textContent | |||
+ tabletr[i].getElementsByTagName("td")[5].textContent; | |||
if (txtValue.toUpperCase().search(filter.substr(1)) == -1) { | if (txtValue.toUpperCase().search(filter.substr(1)) == -1) { | ||
tabletr[i].style.display = ""; | tabletr[i].style.display = ""; | ||
| Line 83: | Line 139: | ||
} | } | ||
} else { | } else { | ||
for (i = 0; i < map.length; i++) { | //for (i = 0; i < map.length; i++) { | ||
// if (map[i].id !== "" && map[i].id.toUpperCase().search(filter) > -1) { | |||
// map[i].style.opacity="1.0"; | |||
// } else { | |||
// map[i].style.opacity="0.05"; | |||
// } | |||
} | //} | ||
for (i = 0; i < | for (i = 0; i < items.length; i++) { | ||
if ( | if (items[i].id.toUpperCase().search(filter1) > -1) { | ||
items[i].style.display = 'inline-block'; | |||
} else { | } else { | ||
items[i].style.display = 'none'; | |||
} | } | ||
} | } | ||
| Line 119: | Line 175: | ||
for (i = 0; i < documents.length; i++) { | for (i = 0; i < documents.length; i++) { | ||
if (documents[i].id.toUpperCase().search( | if (documents[i].id.toUpperCase().search(filter1) > -1) { | ||
documents[i].style.display = ''; | documents[i].style.display = ''; | ||
} else { | } else { | ||
documents[i].style.display = 'none'; | documents[i].style.display = 'none'; | ||
} | |||
} | |||
for (i = 0; i < dplline.length; i++) { | |||
if (dplline[i].id.toUpperCase().search(filter) > -1) { | |||
dplline[i].style.display = ''; | |||
} else { | |||
dplline[i].style.display = 'none'; | |||
} | } | ||
} | } | ||
| Line 132: | Line 192: | ||
if (table) { | if (table) { | ||
for (i = 0; i < tabletr.length; i++) { | for (i = 0; i < tabletr.length; i++) { | ||
// match text in | // match text in all columns | ||
if (tabletr[i].getElementsByTagName("td")[0]) { | if (tabletr[i].getElementsByTagName("td")[0]) { | ||
txtValue = tabletr[i].getElementsByTagName("td")[0].textContent | txtValue = tabletr[i].getElementsByTagName("td")[0].textContent | ||
+ tabletr[i].getElementsByTagName("td")[1].textContent | + tabletr[i].getElementsByTagName("td")[1].textContent | ||
+ tabletr[i].getElementsByTagName("td")[2].textContent | + tabletr[i].getElementsByTagName("td")[2].textContent | ||
+ tabletr[i].getElementsByTagName("td")[3].textContent; | + tabletr[i].getElementsByTagName("td")[3].textContent | ||
+ tabletr[i].getElementsByTagName("td")[4].textContent | |||
+ tabletr[i].getElementsByTagName("td")[5].textContent; | |||
if (txtValue !== "" && txtValue.toUpperCase().search(filter) > -1) { | if (txtValue !== "" && txtValue.toUpperCase().search(filter) > -1) { | ||
tabletr[i].style.display = ""; | tabletr[i].style.display = ""; | ||
| Line 150: | Line 212: | ||
} | } | ||
$('#filterbox').html('<input type="text" id="filterinput" onkeyup="filterAll()" value="" placeholder="Filter" title="Filter">'); | $(function () { | ||
function initDynamicTextFilter() { | |||
$('.maps-map.maps-leaflet').each(function () { | |||
const container = this; | |||
if (container._dynamicTextFilterAttached) return; | |||
container._dynamicTextFilterAttached = true; | |||
const $container = $(container); | |||
const interval = setInterval(() => { | |||
const $markerPane = $container.find('.leaflet-marker-pane'); | |||
const $markers = $markerPane.find('img.leaflet-marker-icon'); | |||
if ($markerPane.length > 0 && $markers.length > 0) { | |||
clearInterval(interval); | |||
console.log(`[Maps] Dynamic text filter ready — ${$markers.length} markers found`); | |||
function filterMarkers() { | |||
const filterText = ($('#filterinput').val() || '').toLowerCase(); | |||
// 1. Check for NOT operator | |||
const isNegativeSearch = filterText.startsWith('!'); | |||
let searchTerms = filterText; | |||
if (isNegativeSearch) { | |||
// Remove '!' and trim the resulting string | |||
searchTerms = searchTerms.substring(1).trim(); | |||
} | |||
// 2. Handle OR operator (|) and clean up terms | |||
const terms = searchTerms.split('|') | |||
.map(term => term.trim()) | |||
.filter(term => term.length > 0); // Remove any empty terms | |||
// Only change opacity of markers that exist in DOM and are not inside clusters | |||
$markerPane.find('img.leaflet-marker-icon').each(function () { | |||
const $m = $(this); | |||
// Skip cluster DOM elements | |||
if ($m.closest('.leaflet-marker-cluster').length > 0) return; | |||
const searchable = ($m.attr('title') || '') + ($m.attr('alt') || '') + ($m.attr('id') || ''); | |||
$m.css('opacity', 0.5); // Assume hide | |||
if (terms.length === 0) { // reveal if no filter | |||
$m.css('opacity', 1); | |||
} else { | |||
matchFound = false; | |||
for (const term of terms) { | |||
if (searchable.toLowerCase().includes(term)) { | |||
matchFound = true; | |||
} | |||
} | |||
if ((!isNegativeSearch && matchFound) || (isNegativeSearch && !matchFound)) { | |||
$m.css('opacity', 1); // reveal | |||
} | |||
} | |||
//if (!filterText || searchable.toLowerCase().includes(filterText)) { | |||
// $m.css('opacity', 1); | |||
//} else { | |||
// $m.css('opacity', 0.5); | |||
//} | |||
}); | |||
} | |||
filterMarkers(); | |||
const observer = new MutationObserver(() => { | |||
filterMarkers(); | |||
}); | |||
observer.observe($markerPane[0], { childList: true, subtree: true }); | |||
$('#filterinput').on('keyup', filterMarkers); | |||
} | |||
}, 200); | |||
}); | |||
setTimeout(initDynamicTextFilter, 2000); | |||
} | |||
initDynamicTextFilter(); | |||
}); | |||
/* | |||
$('#filterbox').html('<input type="text" id="filterinput" onkeyup="filterAll()" value="" placeholder="Filter" title="Filter">'); */ | |||
Latest revision as of 22:24, 24 October 2025
/* Any JavaScript here will be loaded for all users on every page load. */
window.onload = function() {
sortList("sortrelated","A");
};
function sortList(id,tag) {
var list, i, seq, switching, b, shouldSwitch;
list = document.getElementById(id);
switching = true;
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// Start by saying: no switching is done:
switching = false;
b = list.getElementsByTagName(tag);
// Loop through all list items:
for (i = 0; i < (b.length - 1); i++) {
// Start by saying there should be no switching:
shouldSwitch = false;
/* Check if the next item should
switch place with the current item: */
if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
/* if (b[i].id.toLowerCase() > b[i + 1].id.toLowerCase()) { */
/* If next item is alphabetically lower than current item,
mark as a switch and break the loop: */
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark the switch as done: */
/* hard coded to <a href, not sure how to copy structure */
t=b[i].innerHTML;
b[i].innerHTML=b[i+1].innerHTML;
b[i+1].innerHTML=t;
t=b[i].href;
b[i].href=b[i+1].href;
b[i+1].href=t;
t=b[i].title;
b[i].title=b[i+1].title;
b[i+1].title=t;
switching = true;
}
}
}
function filterAll () {
var input, filter, td, i, description, keywords, txtValue;
//var map = document.getElementsByClassName("leaflet-marker-icon");
var items = document.getElementsByClassName("ItemLine");
var timeline = document.getElementsByClassName("TimelineLine");
var gallery = document.getElementsByClassName("galleryline");
var documents = document.getElementsByClassName("DocumentLine");
var dplline = document.getElementsByClassName("DPLLine");
var table = document.getElementById("Table");
if (table) {var tabletr = table.getElementsByTagName("tr")}
if (document.getElementById("filterinput") !== null && document.getElementById("filterinput").value !== null)
{
input = document.getElementById("filterinput");
filter = input.value.toUpperCase().replace(/_/g," ");
filter1 = input.value.toUpperCase().replace(/ /g,"_");
if (filter.search("!") == 0) {
if (filter.length > 1) {
//for (i = 0; i < map.length; i++) {
// if (map[i].id.length > 0) {
// if (map[i].id !== "" && map[i].id.toUpperCase().search(filter.substr(1)) == -1) {
// map[i].style.opacity="1.0";
// } else {
// map[i].style.opacity="0.05";
// }
// }
//}
for (i = 0; i < items.length; i++) {
if (items[i].id.toUpperCase().search(filter1.substr(1)) == -1) {
items[i].style.display = 'inline-block';
} else {
items[i].style.display = 'none';
}
}
for (i = 0; i < timeline.length; i++) {
if (timeline[i].id !== "" && timeline[i].id.toUpperCase().search(filter1.substr(1)) == -1) {
timeline[i].style.opacity="1.0";
} else {
timeline[i].style.opacity="0.1";
}
}
for (i = 0; i < gallery.length; i++) {
if (gallery[i].id.toUpperCase().search(filter.substr(1)) == -1) {
gallery[i].style.display = '';
text=gallery[i].innerHTML;
gallery[i].innerHTML = text.replace(/slideshowGroup:'exclude/,"slideshowGroup:'gallery");
} else {
gallery[i].style.display = 'none';
text=gallery[i].innerHTML;
gallery[i].innerHTML = text.replace(/slideshowGroup:'gallery/,"slideshowGroup:'exclude");
}
}
for (i = 0; i < documents.length; i++) {
if (documents[i].id.toUpperCase().search(filter1.substr(1)) == -1) {
documents[i].style.display = '';
} else {
documents[i].style.display = 'none';
}
}
for (i = 0; i < dplline.length; i++) {
if (dplline[i].id.toUpperCase().search(filter.substr(1)) == -1) {
dplline[i].style.display = '';
} else {
dplline[i].style.display = 'none';
}
}
if (table) {
for (i = 0; i < tabletr.length; i++) {
// match text in all columns
if (tabletr[i].getElementsByTagName("td")[0]) {
txtValue = tabletr[i].getElementsByTagName("td")[0].textContent
+ tabletr[i].getElementsByTagName("td")[1].textContent
+ tabletr[i].getElementsByTagName("td")[2].textContent
+ tabletr[i].getElementsByTagName("td")[3].textContent
+ tabletr[i].getElementsByTagName("td")[4].textContent
+ tabletr[i].getElementsByTagName("td")[5].textContent;
if (txtValue.toUpperCase().search(filter.substr(1)) == -1) {
tabletr[i].style.display = "";
} else {
tabletr[i].style.display = "none";
}
}
}
}
}
} else {
//for (i = 0; i < map.length; i++) {
// if (map[i].id !== "" && map[i].id.toUpperCase().search(filter) > -1) {
// map[i].style.opacity="1.0";
// } else {
// map[i].style.opacity="0.05";
// }
//}
for (i = 0; i < items.length; i++) {
if (items[i].id.toUpperCase().search(filter1) > -1) {
items[i].style.display = 'inline-block';
} else {
items[i].style.display = 'none';
}
}
for (i = 0; i < timeline.length; i++) {
if (timeline[i].id !== "" && timeline[i].id.toUpperCase().search(filter1) > -1) {
timeline[i].style.opacity="1.0";
} else {
timeline[i].style.opacity="0.1";
}
}
for (i = 0; i < gallery.length; i++) {
if (gallery[i].id.toUpperCase().search(filter) > -1) {
gallery[i].style.display = '';
text=gallery[i].innerHTML;
gallery[i].innerHTML = text.replace(/slideshowGroup:'exclude/,"slideshowGroup:'gallery");
} else {
gallery[i].style.display = 'none';
text=gallery[i].innerHTML;
gallery[i].innerHTML = text.replace(/slideshowGroup:'gallery/,"slideshowGroup:'exclude");
}
}
for (i = 0; i < documents.length; i++) {
if (documents[i].id.toUpperCase().search(filter1) > -1) {
documents[i].style.display = '';
} else {
documents[i].style.display = 'none';
}
}
for (i = 0; i < dplline.length; i++) {
if (dplline[i].id.toUpperCase().search(filter) > -1) {
dplline[i].style.display = '';
} else {
dplline[i].style.display = 'none';
}
}
if (table) {
for (i = 0; i < tabletr.length; i++) {
// match text in all columns
if (tabletr[i].getElementsByTagName("td")[0]) {
txtValue = tabletr[i].getElementsByTagName("td")[0].textContent
+ tabletr[i].getElementsByTagName("td")[1].textContent
+ tabletr[i].getElementsByTagName("td")[2].textContent
+ tabletr[i].getElementsByTagName("td")[3].textContent
+ tabletr[i].getElementsByTagName("td")[4].textContent
+ tabletr[i].getElementsByTagName("td")[5].textContent;
if (txtValue !== "" && txtValue.toUpperCase().search(filter) > -1) {
tabletr[i].style.display = "";
} else {
tabletr[i].style.display = "none";
}
}
}
}
}
}
}
$(function () {
function initDynamicTextFilter() {
$('.maps-map.maps-leaflet').each(function () {
const container = this;
if (container._dynamicTextFilterAttached) return;
container._dynamicTextFilterAttached = true;
const $container = $(container);
const interval = setInterval(() => {
const $markerPane = $container.find('.leaflet-marker-pane');
const $markers = $markerPane.find('img.leaflet-marker-icon');
if ($markerPane.length > 0 && $markers.length > 0) {
clearInterval(interval);
console.log(`[Maps] Dynamic text filter ready — ${$markers.length} markers found`);
function filterMarkers() {
const filterText = ($('#filterinput').val() || '').toLowerCase();
// 1. Check for NOT operator
const isNegativeSearch = filterText.startsWith('!');
let searchTerms = filterText;
if (isNegativeSearch) {
// Remove '!' and trim the resulting string
searchTerms = searchTerms.substring(1).trim();
}
// 2. Handle OR operator (|) and clean up terms
const terms = searchTerms.split('|')
.map(term => term.trim())
.filter(term => term.length > 0); // Remove any empty terms
// Only change opacity of markers that exist in DOM and are not inside clusters
$markerPane.find('img.leaflet-marker-icon').each(function () {
const $m = $(this);
// Skip cluster DOM elements
if ($m.closest('.leaflet-marker-cluster').length > 0) return;
const searchable = ($m.attr('title') || '') + ($m.attr('alt') || '') + ($m.attr('id') || '');
$m.css('opacity', 0.5); // Assume hide
if (terms.length === 0) { // reveal if no filter
$m.css('opacity', 1);
} else {
matchFound = false;
for (const term of terms) {
if (searchable.toLowerCase().includes(term)) {
matchFound = true;
}
}
if ((!isNegativeSearch && matchFound) || (isNegativeSearch && !matchFound)) {
$m.css('opacity', 1); // reveal
}
}
//if (!filterText || searchable.toLowerCase().includes(filterText)) {
// $m.css('opacity', 1);
//} else {
// $m.css('opacity', 0.5);
//}
});
}
filterMarkers();
const observer = new MutationObserver(() => {
filterMarkers();
});
observer.observe($markerPane[0], { childList: true, subtree: true });
$('#filterinput').on('keyup', filterMarkers);
}
}, 200);
});
setTimeout(initDynamicTextFilter, 2000);
}
initDynamicTextFilter();
});
/*
$('#filterbox').html('<input type="text" id="filterinput" onkeyup="filterAll()" value="" placeholder="Filter" title="Filter">'); */