scripts-listeners.html

<script>
// vim: ts=3:nowrap

let MAP = {};
MAP.results = {};            // elements for displaying search results by sheet name
MAP.menus = {};              // elements for displaying search menus by sheet name
MAP.activeResults = null;
MAP.lookup = {};

let map; // Global reference to the map
let markers = []; // Global array to hold map markers

MAP.index = {};						// header name mapping by sheet
MAP.index.Archival_Docs = {};		// header names for archival documents sheet
MAP.index.Bibliography = {};		// header names for bibliography sheet
MAP.index.Bio_Composers = {};		// header names for biography sheet for composers
MAP.index.Bio_Musicians = {};		// header names for biography sheet for musicians
MAP.index.Bio_Nonmusicians = {};	// header names for biography sheet for non-musicians
MAP.index.Doc_Entries = {};			// header names for document entries sheet
MAP.index.Events = {};				// header names for events sheet
MAP.index.Headers = {};				// header names for headers sheet
MAP.index.Institutions = {};		// header names for institutions sheet
MAP.index.Locations = {};			// header names for locations sheet
MAP.index.Occasions = {};			// header names for occasions sheet

MAP.METADATA = {};
MAP.METADATA.Archival_Docs = {% include metadata/Archival_Docs.json %};
MAP.METADATA.Bibliography = {% include metadata/Bibliography.json %};
MAP.METADATA.Bio_Composers = {% include metadata/Bio_Composers.json %};
MAP.METADATA.Bio_Musicians = {% include metadata/Bio_Musicians.json %};
MAP.METADATA.Bio_Nonmusicians = {% include metadata/Bio_Nonmusicians.json %};
MAP.METADATA.Doc_Entries = {% include metadata/Doc_Entries.json %};
MAP.METADATA.Events = {% include metadata/Events.json %};
MAP.METADATA.Headers = {% include metadata/Headers.json %};
MAP.METADATA.Institutions = {% include metadata/Institutions.json %};
MAP.METADATA.Locations = {% include metadata/Locations.json %};
MAP.METADATA.Occasions = {% include metadata/Occasions.json %};

// Global variables for certainty
let locationCertainty = "";
let earliestDateCertainty = "";
let latestDateCertainty = "";
let rangeCertainty = "";

// Global variables for chronological slider
let minDate = new Date("1400-01-01");
let maxDate = new Date("1600-01-01");
let currentDateRange = [minDate, maxDate];

//////////////////////////////
//
// MAP.cindex -- uses the Spreadsheet ID and JavaScript ID to call the full name of a given header
// 

MAP.cindex = function (sheetid, javaid) {
	return this.index.Headers[`${sheetid}:${javaid}`];
}


//////////////////////////////
//
// DOMContentLoaded event -- fill in the Headers index mappings.
// 

document.addEventListener("DOMContentLoaded", function () {
	let md = MAP.METADATA.Headers;
	let output = MAP.index.Headers;
	for (let i=0; i<md.length; i++) {
		let sheetid = md[i]["Spreadsheet ID"];
		let javaid = md[i]["JavaScript Name"];
		if (!sheetid) {
			continue;
		}
		if (!javaid) {
			continue;
		}
		let id = `${sheetid}:${javaid}`;
		let value = md[i]["Column Name"];
		if (!value) {
			continue;
		}
		if (output[id]) {
			console.warn("Non-unique ID", id, "changing", output[id], "to", value);
		}
		output[id] = value;
	}
});

//////////////////////////////
//
// DOMContentLoaded event -- run after webpage has finished loading.
//

document.addEventListener("DOMContentLoaded", function () {
	buildLookupTables();

	let Opts = {
		name: "map",
		view: [47, 9],
		zoom: 5,
		zoomMin: 4,
		zoomMax: 19
	};

	doMapSetup(Opts);

});

//////////////////////////////
//
// checkbox-item input[type="checkbox"] – show markers if box is clicked
//

document.addEventListener('DOMContentLoaded', () => {
    document.querySelector("#composer-select").checked = true;
    document.querySelector("#musician-select").checked = true;
    document.querySelector("#non-musician-select").checked = false;
    document.querySelector("#certainty-select").checked = true;

    document.querySelectorAll('.checkbox-item input[type="checkbox"]').forEach(checkbox => {
        checkbox.addEventListener('change', handleCheckboxChange);
    });

    handleCheckboxChange();

    // Add keydown listener for the Escape key
    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape') {
            hideAllDropdowns();
        }
    });

    // Add listener for clicks in the dropdown menus to run filterMarkers
    document.querySelectorAll('.dropdown').forEach(dropdown => {
        dropdown.addEventListener('click', (event) => {
            filterMarkers();
        });
    });

    map.on('moveend zoomend', () => {
	    const input = document.querySelector("#input");
	    if (input && input.value.trim() !== "") {
	        // Run UserSearch instead of filterMarkers if searching
	        UserSearch(true);
	    } else {
	        updateSidebar();  
	        filterMarkers();
	    }
	});
});

function handleCheckboxChange() {
    const input = document.querySelector("#input");
    
    if (input) {
        UserSearch(); // If there is a search input, perform the search
    } else {
        filterMarkers(); // Apply filters to markers
    }

    // Trigger sidebar update after filtering
    updateSidebar();
}

// Hide all dropdown menus
function hideAllDropdowns() {
    document.querySelectorAll('.dropdown').forEach(dropdown => {
        dropdown.style.display = 'none';
    });

    // Remove focus from any focused dropdown button
    const activeButton = document.activeElement;
    if (activeButton && activeButton.classList.contains('dropdown-btn')) {
        activeButton.blur();
    }
}

// Initial call to position the active label correctly on page load
window.onload = function() {
    updateDateRange();
    updateSliderBackground();
    populateDropdowns();

    // Call this function on page load to summon the marker if an eventid is in the URL
	loadMarkerFromURL();
};

</script>