Last active
February 26, 2020 12:46
-
-
Save PatD/54ebcf6da89c0be299cf785ee078b259 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<body> | |
<style> | |
#bikePedDropDowns select{width:99%} | |
/* #bikePedDropDowns .col20{width:18%} */ | |
@media only screen and (min-width: 960px){ | |
#bikePedDropDowns .col20 { | |
width: 18%; | |
} | |
} | |
#resetButton{ | |
display: block; | |
float: right; | |
padding: 0; | |
margin-top: 7px; | |
margin-right: 15px; | |
text-decoration: underline; | |
font-size: 90%; | |
color:#666;} | |
</style> | |
<div id="bikePedDropDowns"> | |
<p><em>Use these dropdowns to filter the project listing below.</em></p> | |
<div class="panel col20"> | |
<select id="selectorDivision"> | |
<option value="">All Divisions</option> | |
<option value="01">1</option> | |
<option value="02">2</option> | |
<option value="03">3</option> | |
<option value="04">4</option> | |
<option value="05">5</option> | |
<option value="06">6</option> | |
<option value="07">7</option> | |
<option value="08">8</option> | |
<option value="09">9</option> | |
<option value="10">10</option> | |
<option value="11">11</option> | |
<option value="12">12</option> | |
<option value="13">13</option> | |
<option value="14">14</option> | |
</select> | |
</div> | |
<div class="panel col20"> | |
<select id="selectorCounty"> | |
<option value="">All Counties</option> | |
<option value="Alamance">Alamance</option> | |
<option value="Alexander">Alexander</option> | |
<option value="Alleghany">Alleghany</option> | |
<option value="Anson">Anson</option> | |
<option value="Ashe">Ashe</option> | |
<option value="Avery">Avery</option> | |
<option value="Beaufort">Beaufort</option> | |
<option value="Bertie">Bertie</option> | |
<option value="Bladen">Bladen</option> | |
<option value="Brunswick">Brunswick</option> | |
<option value="Buncombe">Buncombe</option> | |
<option value="Burke">Burke</option> | |
<option value="Cabarrus">Cabarrus</option> | |
<option value="Caldwell">Caldwell</option> | |
<option value="Camden">Camden</option> | |
<option value="Carteret">Carteret</option> | |
<option value="Caswell">Caswell</option> | |
<option value="Catawba">Catawba</option> | |
<option value="Chatham">Chatham</option> | |
<option value="Cherokee">Cherokee</option> | |
<option value="Chowan">Chowan</option> | |
<option value="Clay">Clay</option> | |
<option value="Cleveland">Cleveland</option> | |
<option value="Columbus">Columbus</option> | |
<option value="Craven">Craven</option> | |
<option value="Cumberland">Cumberland</option> | |
<option value="Currituck">Currituck</option> | |
<option value="Dare">Dare</option> | |
<option value="Davidson">Davidson</option> | |
<option value="Davie">Davie</option> | |
<option value="Duplin">Duplin</option> | |
<option value="Durham">Durham</option> | |
<option value="Edgecombe">Edgecombe</option> | |
<option value="Forsyth">Forsyth</option> | |
<option value="Franklin">Franklin</option> | |
<option value="Gaston">Gaston</option> | |
<option value="Gates">Gates</option> | |
<option value="Graham">Graham</option> | |
<option value="Granville">Granville</option> | |
<option value="Greene">Greene</option> | |
<option value="Guilford">Guilford</option> | |
<option value="Halifax">Halifax</option> | |
<option value="Harnett">Harnett</option> | |
<option value="Haywood">Haywood</option> | |
<option value="Henderson">Henderson</option> | |
<option value="Hertford">Hertford</option> | |
<option value="Hoke">Hoke</option> | |
<option value="Hyde">Hyde</option> | |
<option value="Iredell">Iredell</option> | |
<option value="Jackson">Jackson</option> | |
<option value="Johnston">Johnston</option> | |
<option value="Jones">Jones</option> | |
<option value="Lee">Lee</option> | |
<option value="Lenoir">Lenoir</option> | |
<option value="Lincoln">Lincoln</option> | |
<option value="Macon">Macon</option> | |
<option value="Madison">Madison</option> | |
<option value="Martin">Martin</option> | |
<option value="McDowell">McDowell</option> | |
<option value="Mecklenburg">Mecklenburg</option> | |
<option value="Mitchell">Mitchell</option> | |
<option value="Montgomery">Montgomery</option> | |
<option value="Moore">Moore</option> | |
<option value="Nash">Nash</option> | |
<option value="New Hanover">New Hanover</option> | |
<option value="Northampton">Northampton</option> | |
<option value="Onslow">Onslow</option> | |
<option value="Orange">Orange</option> | |
<option value="Pamlico">Pamlico</option> | |
<option value="Pasquotank">Pasquotank</option> | |
<option value="Pender">Pender</option> | |
<option value="Perquimans">Perquimans</option> | |
<option value="Person">Person</option> | |
<option value="Pitt">Pitt</option> | |
<option value="Polk">Polk</option> | |
<option value="Randolph">Randolph</option> | |
<option value="Richmond">Richmond</option> | |
<option value="Robeson">Robeson</option> | |
<option value="Rockingham">Rockingham</option> | |
<option value="Rowan">Rowan</option> | |
<option value="Rutherford">Rutherford</option> | |
<option value="Sampson">Sampson</option> | |
<option value="Scotland">Scotland</option> | |
<option value="Stanly">Stanly</option> | |
<option value="Stokes">Stokes</option> | |
<option value="Surry">Surry</option> | |
<option value="Swain">Swain</option> | |
<option value="Transylvania">Transylvania</option> | |
<option value="Tyrrell">Tyrrell</option> | |
<option value="Union">Union</option> | |
<option value="Vance">Vance</option> | |
<option value="Wake">Wake</option> | |
<option value="Warren">Warren</option> | |
<option value="Washington">Washington</option> | |
<option value="Watauga">Watauga</option> | |
<option value="Wayne">Wayne</option> | |
<option value="Wilkes">Wilkes</option> | |
<option value="Wilson">Wilson</option> | |
<option value="Yadkin">Yadkin</option> | |
<option value="Yancey">Yancey</option> | |
</select> | |
</div> | |
<div class="panel col20"> | |
<select id="selectorJurisdiction" disabled="true"> | |
<option value="">All Jurisdictions</option> | |
</select> | |
</div> | |
<div class="panel col20"> | |
<select id="selectorYear"> | |
<option value="">All Years</option> | |
<option value="2014">2014</option> | |
<option value="2015">2015</option> | |
<option value="2016">2016</option> | |
<option value="2017">2017</option> | |
<option value="2018">2018</option> | |
<option value="2019">2019</option> | |
<option value="2019">2020</option> | |
</select> | |
</div> | |
<div class="panel col20 last"> | |
<select id="selectorProjectType"> | |
<option value="">All Types</option> | |
<option value="Sidewalk">Sidewalk</option> | |
<option value="Bike Lanes">Bike Lanes</option> | |
<option value="Multi-Use Path">Multi-Use Path</option> | |
<option value="Crosswalk">Crosswalk</option> | |
<option value="Other">Other</option> | |
</select> | |
</div> | |
<div class=""> | |
<button id="applyFilter" class="important">Filter Data</button> | |
</div> | |
<a href="#" id="resetButton">Reset Filters</a> | |
</div> | |
<script src="https://connect.ncdot.gov/Style%20Library/js/sharepointplus.js"></script> | |
<script> | |
// gets URL Values. Expects a parameter to be passed to it. | |
function getUrlParameter(name) { | |
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); | |
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); | |
var results = regex.exec(location.search); | |
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); | |
}; | |
// Function to change dropdown selector value. | |
// Expects the ID of the select element and the value to selected. | |
function selectElement(id, valueToSelect) { | |
id.value = valueToSelect; | |
} | |
// selectors for dropdowns | |
var selectorDivision = document.getElementById('selectorDivision'), | |
selectorCounty = document.getElementById('selectorCounty'), | |
selectorJurisdiction = document.getElementById('selectorJurisdiction'), | |
selectorYear = document.getElementById('selectorYear'), | |
selectorProjectType = document.getElementById('selectorProjectType'); | |
// selectors for buttons | |
var applyFilter = document.getElementById('applyFilter'), | |
resetButton = document.getElementById('resetButton'); | |
// value of query strings on page load | |
var _loadedDivision = getUrlParameter('division'), | |
_loadedCounty = getUrlParameter('county'), | |
_loadedJurisdiction = getUrlParameter('jurisdiction'), | |
_loadedYear = getUrlParameter('year'), | |
_loadedProjectType = getUrlParameter('projecttype'); | |
// Build dropdown for Jurisdictions. | |
// Expects an array of locations to be passed to it | |
function buildJurisdictionDropdown(jurs){ | |
jurs.forEach(function(jurisdiction){ | |
var opt = document.createElement('option'); | |
opt.value = jurisdiction; | |
opt.innerHTML = jurisdiction; | |
selectorJurisdiction.appendChild(opt); | |
}); | |
// Enable dropdown now that it's populated | |
selectorJurisdiction.disabled = false; | |
// Now read the query string and add that value | |
if (_loadedJurisdiction !== "") { | |
selectElement(selectorJurisdiction, _loadedJurisdiction) | |
} | |
}; | |
// Query for list of Jurisdictions | |
$SP().list('Bicycle Pedestrian').get({fields:"Jurisdiction"}).then(function(data) { | |
var _jurisdictions = []; | |
data.forEach(function(d) { | |
var _jurisdiction = d.getAttribute("Jurisdiction"); | |
// Adds a jurisdiction to the array | |
// but checks and only adds it if it isn't already in the array | |
if(_jurisdictions.indexOf(_jurisdiction) === -1) { | |
_jurisdictions.push(_jurisdiction); | |
} | |
}) | |
return buildJurisdictionDropdown(_jurisdictions.sort()); | |
}); | |
// On load, get values of query string parameters (if any) | |
// ... and set dropdowns to match! | |
if (_loadedDivision !== "") { | |
selectElement(selectorDivision, _loadedDivision) | |
} | |
if (_loadedCounty !== "") { | |
selectElement(selectorCounty, _loadedCounty) | |
} | |
// if (_loadedJurisdiction !== "") { | |
// selectElement(selectorJurisdiction, _loadedJurisdiction) | |
// } | |
if (_loadedYear !== "") { | |
selectElement(selectorYear, _loadedYear) | |
} | |
if (_loadedProjectType !== "") { | |
selectElement(selectorProjectType, _loadedProjectType) | |
} | |
// When the Apply button is clicked, grab values currently selected option tags, merge into a query string, and reload! | |
function buildQueryString(){ | |
/* False query strings for unselected dropdowns */ | |
var _currentDivision = "&alldivisions", | |
_currentCounty= "&allcountys", | |
_currentJurisdiction= "&alljurisdictions", | |
_currentYear = "&allyears", | |
_currentProjectType = "&allprojects"; | |
/* real query string values if user has made selection */ | |
if(selectorDivision.value != ""){ | |
var _currentDivision = "&division=" + selectorDivision.value; | |
} | |
if(selectorCounty.value != ""){ | |
var _currentCounty = "&county=" + selectorCounty.value; | |
} | |
if(selectorJurisdiction.value != ""){ | |
var _currentJurisdiction = "&jurisdiction=" + selectorJurisdiction.value; | |
} | |
if(selectorYear.value != ""){ | |
var _currentYear = "&year=" + selectorYear.value; | |
} | |
if(selectorProjectType.value !=""){ | |
var _currentProjectType = "&projecttype=" + selectorProjectType.value; | |
} | |
// Build a query string string (from strings) | |
_newQueryText = "?=bp" + _currentCounty + _currentDivision + _currentJurisdiction + _currentProjectType + _currentYear; | |
// Reload the page with query string values! | |
window.location.href = window.location.pathname + _newQueryText | |
}; | |
// Green Filter button | |
applyFilter.addEventListener("click", function(event) { | |
buildQueryString(); | |
event.preventDefault(); | |
}, false); | |
// Reset button | |
resetButton.addEventListener("click", function(event) { | |
window.location = window.location.pathname | |
event.preventDefault(); | |
}, false); | |
// Fix county columns, where SharePoint doesn't add spaces after commas | |
SP.SOD.executeOrDelayUntilEventNotified(function () { | |
var _countyColumnsSplit = document.querySelectorAll("tr td.ms-cellstyle:nth-child(4)"); | |
for (var i = 0; i < _countyColumnsSplit.length; i++) { | |
var _countySplit = _countyColumnsSplit[i].innerHTML; | |
var _countySplitReplace = _countySplit.replace(/,/g, ', ') | |
_countyColumnsSplit[i].innerHTML = _countySplitReplace | |
} | |
}, "sp.bodyloaded"); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment