`;\r\n } else {\r\n link = \"\";\r\n }\r\n if (model.hoursets) {\r\n model.hoursets.each(function () {\r\n var title = $(this).find('.hourset-title').text();\r\n var hours = $('.hour', this);\r\n\r\n if (hours) {\r\n hours.each(function () {\r\n var startDay = $(this).find('.start-day').text();\r\n var endDay = $(this).find('.end-day').text();\r\n var openTime = $(this).find('.open-time').text();\r\n var closeTime = $(this).find('.close-time').text();\r\n });\r\n }\r\n });\r\n }\r\n let infowindow = new google.maps.InfoWindow({ \r\n content: `\r\n
\r\n
\r\n `\r\n });\r\n\r\n // need to save instance of each infoWindow so they can be closed\r\n allInfoWindows.push(infowindow);\r\n\r\n marker.addListener('click', () => {\r\n // close all infoWindows before opening new one\r\n for (let i = 0; i < allInfoWindows.length; i++) {\r\n allInfoWindows[i].close();\r\n }\r\n \r\n infowindow.open(map, marker);\r\n onMarkerClick(model.id, marker);\r\n });\r\n\r\n this.id = model.id;\r\n\r\n this.closeWindow = function () {\r\n $('#' + this.id).removeClass('active');\r\n infowindow.close();\r\n };\r\n\r\n this.openWindow = function () {\r\n infowindow.open(map, marker);\r\n };\r\n}\n\n/*\r\n :: Custom Google Map\r\n*/\r\n\r\nclass GoogleMap {\r\n\r\n constructor(options) {\r\n this.locations = options.locations || [/* {address: string || [lat,lon], name: string, link: string, icon: string(img src)}*/];\r\n this.container = options.container || '#not_available';\r\n this.map = null;\r\n this.mapBounds = null;\r\n this.markers = [];\r\n this.styling = options.styling || false;\r\n this.onMarkerClick = options.onMarkerClick || function () { };\r\n this.allInfoWindows = [];\r\n this.searchedLocation = options.searchedLocation;\r\n this.searchedMarker = null;\r\n this.icon = options.icon;\r\n }\r\n\r\n main() {\r\n this.container = document.querySelector(this.container);\r\n\r\n if (!this.container) {\r\n return;\r\n }\r\n\r\n this.mapBounds = new google.maps.LatLngBounds();\r\n\r\n // add pin for searched location to bounds\r\n if (this.searchedLocation.position) {\r\n this.mapBounds.extend(this.searchedLocation.position);\r\n }\r\n\r\n this.map = new google.maps.Map(this.container, {\r\n disableDefaultUI: true,\r\n zoomControl: true,\r\n gestureHandling: 'cooperative',\r\n styles: this.styling\r\n });\r\n\r\n this.map.fitBounds(this.mapBounds);\r\n\r\n // Initialize google maps bounding box.\r\n if (this.locations.length == 0 && this.searchedLocation.position) {\r\n var zoomListener = google.maps.event.addListener(this.map, \"idle\", () => { \r\n this.map.setZoom(13); \r\n google.maps.event.removeListener(zoomListener); \r\n });\r\n }\r\n else {\r\n let listener = google.maps.event.addListener(this.map, \"idle\", () => {\r\n this.map.fitBounds(this.mapBounds);\r\n google.maps.event.removeListener(listener);\r\n });\r\n }\r\n\r\n for (let location of this.locations) {\r\n this.setupMarker(location, this.allInfoWindows, location.id);\r\n this.linkMarker(location.id, this.markers);\r\n }\r\n\r\n // drop pin at searched location (if it exists)\r\n if (this.searchedLocation.position) {\r\n this.searchedMarker = new google.maps.Marker({\r\n position: this.searchedLocation.position,\r\n map: this.map,\r\n animation: google.maps.Animation.DROP\r\n });\r\n }\r\n }\r\n\r\n linkMarker(id, markers) {\r\n $('.location-item.enable-on-map').off('click');\r\n\r\n $('.location-item.enable-on-map').on('click', function () {\r\n let index = $('article.enable-on-map').index($(this));\r\n\r\n if ($(this).hasClass('active')) {\r\n $(this).removeClass('active');\r\n }\r\n\r\n else {\r\n $('.location-item.active').removeClass('active');\r\n $(this).addClass('active');\r\n }\r\n\r\n // close all open infowindows\r\n for (let marker of markers) {\r\n marker.closeWindow();\r\n }\r\n\r\n // open infowindow for this location\r\n $(this).addClass('active');\r\n markers[index].openWindow();\r\n });\r\n }\r\n\r\n // Convert address string to lat long object\r\n setupMarker(location, allInfoWindows, locationId) {\r\n // Lat and Long was provided for the location address\r\n if (Array.isArray(location.address)) {\r\n this.makeMarker(location, location.address[0], location.address[1], allInfoWindows, locationId);\r\n return;\r\n }\r\n\r\n // Address string was provided\r\n if (typeof location.address == \"string\") {\r\n const geocoder = new google.maps.Geocoder();\r\n const geoModel = {\r\n 'address': location.address\r\n };\r\n\r\n geocoder.geocode(geoModel, (results, status) => {\r\n if (status != google.maps.GeocoderStatus.OK) {\r\n console.warn(`Google maps Geocode: Can't convert ${location.address} to lat/lon: ${status}`);\r\n return;\r\n }\r\n\r\n this.makeMarker(location, results[0].geometry.location.lat(), results[0].geometry.location.lng(), allInfoWindows, locationId);\r\n });\r\n\r\n return;\r\n }\r\n\r\n // Error, or nothing was provided\r\n console.warn(`Map Marker address for ${location.name} is invalid or not set`);\r\n }\r\n\r\n makeMarker(location, lat, long, allInfoWindows, locationId, icon) {\r\n let marker = null;\r\n // let image = {\r\n // url: originURL + '/library/img/locationsIcons/mapIcons/blank.png'\r\n // };\r\n\r\n marker = new MapMarker({\r\n name: location.name,\r\n address: location.address,\r\n street: location.street,\r\n cityStateZip: location.cityStateZip,\r\n link: location.link,\r\n hoursets: location.hoursets,\r\n icon: location.icon,\r\n lat: lat,\r\n long: long,\r\n id: locationId\r\n }, this.map, this.mapBounds, this.onMarkerClick, allInfoWindows);\r\n\r\n this.markers.push(marker);\r\n }\r\n\r\n}\n\nclass Locations {\r\n\r\n static displayLocations() {\r\n const locations = $('.enable-on-map');\r\n const map = $('#map');\r\n //var autocomplete = new google.maps.places.Autocomplete(document.getElementById('locationInput'));\r\n\r\n let pinOptions = {},\r\n lat,\r\n lng;\r\n\r\n if (!map.length || !locations.length) {\r\n return;\r\n }\r\n\r\n let data = [],\r\n address,\r\n street,\r\n cityStateZip,\r\n icon;\r\n\r\n\t\tvar branchImage = new google.maps.MarkerImage(\r\n\t\t\t'/ResourcePackages/ST/library/img/icons/mapIcons/branches.png',\r\n\t\t\tnew google.maps.Size(37, 52),\r\n\t\t\tnew google.maps.Point(0, 0),\r\n\t\t\tnew google.maps.Point(17, 46)\r\n\t\t);\r\n\r\n var atmImage = new google.maps.MarkerImage(\r\n '/ResourcePackages/ST/library/img/icons/mapIcons/georgiaUnitedAtms.png',\r\n new google.maps.Size(38, 51),\r\n new google.maps.Point(0, 0),\r\n new google.maps.Point(17, 46)\r\n ); \r\n \r\n var liveTellerImage = new google.maps.MarkerImage(\r\n '/ResourcePackages/ST/library/img/icons/mapIcons/atmLiveTeller.png',\r\n new google.maps.Size(37, 53),\r\n new google.maps.Point(0, 0),\r\n new google.maps.Point(17, 46)\r\n\t\t);\r\n\t\t\r\n\t\tvar blankImage = new google.maps.MarkerImage(\r\n '/ResourcePackages/ST/library/img/icons/mapIcons/blank.png',\r\n new google.maps.Size(34, 46),\r\n new google.maps.Point(0, 0),\r\n new google.maps.Point(17, 46)\r\n );\r\n \r\n locations.each(function () {\r\n // set the initial order\r\n let index = this.id.split('-')[1];\r\n index = index - 1;\r\n $(this).css('order', index);\r\n\r\n \r\n var arrTitles = $(this)\r\n .find('.hours .label')\r\n .map(function() {\r\n return $(this).text();\r\n })\r\n .get();\r\n\r\n if(arrTitles[0] == \"Drive-Up Hours:\" && arrTitles.length > 1){\r\n $(this).find('.hours').addClass('reverse');\r\n }\r\n\r\n\r\n // If a lat and long was provided, use that.\r\n // If not, then use the address string\r\n if ($(this).attr('data-lat') && $(this).attr('data-lng')) {\r\n address = [$(this).attr('data-lat'), $(this).attr('data-lng')];\r\n } else {\r\n address = $(this).attr('data-address');\r\n } \r\n\r\n let locOptions = $(this).find('.options').text().toLowerCase().trim();\r\n if (locOptions.indexOf('branch') >= 0) {\r\n icon = branchImage;\r\n } else if (locOptions.includes('teller') >= 0 || locOptions.toUpperCase().includes(\"ATM+\") || locOptions.toUpperCase().includes(\"ATM PLUS\") || locOptions.toUpperCase().includes('UNITED') >= 0 ) {\r\n icon = liveTellerImage;\r\n } else {\r\n icon = blankImage;\r\n }\r\n\r\n street = $(this).attr('data-street');\r\n cityStateZip = $(this).attr('data-citystatezip');\r\n\r\n data.push({\r\n address: address,\r\n street: street,\r\n cityStateZip: cityStateZip,\r\n name: $(this).find('.location-title').text(),\r\n link: $(this).find('.location-title a').attr('href'),\r\n hoursets: $('.hourset', this),\r\n id: $(this).data('id'),\r\n icon: icon\r\n });\r\n });\r\n\r\n var locationsMap = new GoogleMap({\r\n locations: data,\r\n container: '#map',\r\n onMarkerClick: (id, marker) => {\r\n $('.location-item.active').removeClass('active');\r\n $('#location-' + id).addClass('active');\r\n\r\n if ( !$('.locations').hasClass('show-locations')) {\r\n $('.locations').addClass('show-locations');\r\n calculateItemPositions();\r\n }\r\n\r\n // animate locations to item selected\r\n let itemTop = $('#location-' + id).attr('data-top');\r\n $('.locations-pane').animate({\r\n scrollTop: itemTop - 30\r\n }, 400);\r\n },\r\n searchedLocation: pinOptions\r\n });\r\n\r\n locationsMap.main();\r\n filterLocations();\r\n\r\n $('#locationInput').on('change', event => {\r\n if (event.target.value === \"\") {\r\n //autocomplete.set('place', {});\r\n resetMap();\r\n }\r\n });\r\n \r\n $('#locationInput').keypress( (event) => {\r\n const keycode = (event.keyCode ? event.keyCode : event.which);\r\n \r\n if( keycode == '13') {\r\n event.preventDefault();\r\n if (event.target.value === \"\") {\r\n //autocomplete.set('place', {});\r\n resetMap();\r\n }\r\n } \r\n });\r\n \r\n // on filter type change, update locations\r\n $('.filter-by-types .js-filter-type-item input').on('change', function (e) {\r\n $(this).closest('.js-filter-type-item').toggleClass('checked');\r\n filterLocations($(this));\r\n updateFilterSelectboxText();\r\n });\r\n\r\n // clear filters clicked\r\n $('.js-clear-filters-btn').on('click', (e) => {\r\n clearFilters();\r\n $(e.currentTarget).hide();\r\n\r\n });\r\n\r\n // custom filter type selectbox\r\n $('.filter-by-types .js-custom-select-box').on('click', (e) => {\r\n toggleFilterSelectbox(e);\r\n });\r\n $('.filter-by-types .js-custom-select-box').on('keypress', (e) => {\r\n e.preventDefault();\r\n let keycode = e.code || e.which;\r\n \r\n if (keycode === 13 || keycode === \"Enter\" || keycode === 32 || keycode === \"Space\") {\r\n toggleFilterSelectbox(e);\r\n }\r\n });\r\n\r\n // close filter when clicked outside of dropdown\r\n $(document).on('click', function(e) {\r\n const selectbox = $('.filter-by-types .js-custom-select-box');\r\n const arrow = selectbox.find('.arrow .fas');\r\n const dropdown = selectbox.siblings('.dropdown');\r\n \r\n if (!$(e.target).closest('.filter-by-types').length) {\r\n selectbox.removeClass('open');\r\n arrow.removeClass('fa-chevron-up').addClass('fa-chevron-down');\r\n dropdown.slideUp(300);\r\n }\r\n });\r\n $('.locations-template a').on('focus', function(e) {\r\n const selectbox = $('.filter-by-types .js-custom-select-box');\r\n const arrow = selectbox.find('.arrow .fas');\r\n const dropdown = selectbox.siblings('.dropdown');\r\n \r\n if (!$(e.target).closest('.filter-by-types').length) {\r\n selectbox.removeClass('open');\r\n arrow.removeClass('fa-chevron-up').addClass('fa-chevron-down');\r\n dropdown.slideUp(300);\r\n } \r\n });\r\n \r\n // utilize Google Places API to filter locations within a radius\r\n if ($('#map').length != 0) {\r\n\r\n $('.apply-filters-btn').on('click', function (e) {\r\n e.preventDefault();\r\n filterLocations($(this));\r\n });\r\n\r\n placesAutocomplete();\r\n }\r\n\r\n // open/close custom filter selectbox\r\n function toggleFilterSelectbox(e) {\r\n const selectbox = $(e.currentTarget);\r\n const arrow = selectbox.find('.arrow .fas');\r\n const dropdown = selectbox.siblings('.dropdown');\r\n\r\n if (!selectbox.hasClass('open')) {\r\n selectbox.addClass('open');\r\n arrow.removeClass('fa-chevron-down').addClass('fa-chevron-up');\r\n dropdown.slideDown(300);\r\n }\r\n else {\r\n selectbox.removeClass('open');\r\n arrow.removeClass('fa-chevron-up').addClass('fa-chevron-down');\r\n dropdown.slideUp(300);\r\n } \r\n }\r\n\r\n // update custom filter selectbox text based off selections made\r\n function updateFilterSelectboxText() {\r\n const filterTypes = $('.filter-by-types .js-filter-type-item input:checked');\r\n const selectboxText = $('.filter-by-types .js-custom-select-box .filter-text');\r\n const clearFiltersBtn = $('.js-clear-filters-btn');\r\n \r\n if (!filterTypes.length) {\r\n selectboxText.html(\"Select Filter(s)\");\r\n clearFiltersBtn.hide();\r\n }\r\n else if (filterTypes.length == 1) {\r\n selectboxText.html(filterTypes.siblings('.custom-control-label').html());\r\n clearFiltersBtn.css('display', 'block');\r\n }\r\n else if (filterTypes.length > 1) {\r\n selectboxText.html('('+filterTypes.length+') Filters Selected');\r\n clearFiltersBtn.css('display', 'block');\r\n }\r\n }\r\n\r\n function resetMap() {\r\n // reset location data, show all locations\r\n pinOptions = {};\r\n lat = '';\r\n lat = '';\r\n document.querySelectorAll('.location-item').forEach(location => {\r\n // look at the call parameters before using the\r\n // showLocation() method\r\n showLocation($(location),'',true);\r\n });\r\n\r\n reloadMap();\r\n filterLocations();\r\n }\r\n\r\n function reloadMap() {\r\n if (!map.length || !locations.length) {\r\n return;\r\n }\r\n\r\n // reset shown locations based on filter\r\n data = [];\r\n let address,\r\n street,\r\n cityStateZip,\r\n icon;\r\n\r\n $('.enable-on-map').each(function () {\r\n // If a lat and long was provided, use that.\r\n // If not, then use the address string\r\n if ($(this).attr('data-lat') && $(this).attr('data-lng')) {\r\n address = [$(this).attr('data-lat'), $(this).attr('data-lng')];\r\n } else {\r\n address = $(this).attr('data-address');\r\n }\r\n\r\n let locOptions = $(this).find('.options').text().toLowerCase().trim();\r\n if (locOptions.indexOf('branch') >= 0) {\r\n\t\t\t\t\ticon = branchImage;\r\n\t\t\t\t}\r\n else if (locOptions.includes('teller') >= 0 || locOptions.toUpperCase().includes(\"ATM+\") || locOptions.toUpperCase().includes(\"ATM PLUS\") || locOptions.toUpperCase().includes('UNITED') >= 0 ) {\r\n\t\t\t\t\ticon = liveTellerImage;\r\n\t\t\t\t} \r\n else {\r\n\t\t\t\t\ticon = blankImage;\r\n\t\t\t\t}\r\n\r\n street = $(this).attr('data-street');\r\n cityStateZip = $(this).attr('data-citystatezip');\r\n\r\n data.push({\r\n address: address,\r\n street: street,\r\n cityStateZip: cityStateZip,\r\n name: $(this).find('.location-title').text(),\r\n link: $(this).find('.location-title a').attr('href'),\r\n hoursets: $('.hourset', this),\r\n id: $(this).data('id'),\r\n icon: icon\r\n });\r\n });\r\n\r\n locationsMap = new GoogleMap({\r\n locations: data,\r\n container: '#map',\r\n onMarkerClick: (id, marker) => {\r\n $('.location-item.active').removeClass('active');\r\n $('#location-' + id).addClass('active');\r\n \r\n if ( !$('.locations').hasClass('show-locations')) {\r\n $('.locations').addClass('show-locations');\r\n calculateItemPositions();\r\n } \r\n\r\n // animate locations to item selected\r\n let itemTop = $('#location-' + id).attr('data-top');\r\n $('.locations-pane').animate({\r\n scrollTop: itemTop - 30\r\n }, 400);\r\n },\r\n searchedLocation: pinOptions\r\n });\r\n\r\n locationsMap.main();\r\n }\r\n\r\n function hideLocation(item) {\r\n item.css('display', 'none');\r\n item.removeClass('enable-on-map');\r\n }\r\n\r\n /**\r\n * showLocation(item, distance, reset)\r\n * @param {Element} item \r\n * @param {~String} distance \r\n * @param {~Boolean} reset \r\n */\r\n function showLocation(item, distance, reset) {\r\n item.css('display', 'flex');\r\n item.addClass('enable-on-map');\r\n\r\n // if you're resetting the map, reset the distance\r\n // or it will mess with this filter implementation\r\n if (reset) {\r\n distance = null;\r\n item.find('.distance').html('');\r\n item.data(\"distance\", distance);\r\n }\r\n\r\n if (distance) {\r\n distance = distance.toFixed(2);\r\n item.find('.distance').show().html(distance + ' miles');\r\n item.data(\"distance\", distance);\r\n }\r\n }\r\n\r\n function filterLocations() {\r\n const filterTypes = $('.filter-by-types input:checked');\r\n const showRadius = $('#show-radius').length ? $('#show-radius').val() : 20;\r\n \r\n $(\".location-item\").each(function () {\r\n var options = $(this).find(\".bankInfo .options\").text().toLowerCase().trim(),\r\n lat2 = $(this).attr(\"data-lat\"),\r\n lng2 = $(this).attr(\"data-lng\"),\r\n show = false,\r\n distance = null;\r\n\r\n // check if location matches any filter type selected\r\n filterTypes.each(function() {\r\n let filterVal = $(this).val().toLowerCase();\r\n \r\n // console.log(`options: ${options}, filterVal: ${filterVal}`);\r\n if ( options.indexOf(filterVal) >= 0 ) {\r\n show = true;\r\n }\r\n });\r\n \r\n if (!filterTypes.length) {\r\n show = true;\r\n }\r\n\r\n if (lat && lng) {\r\n distance = calcDistance(lat, lng, lat2, lng2);\r\n\r\n // only show location if it is in the selected radius IF SEARCH TERM PRESENT\r\n if ($('#locationInput').val() !== '') {\r\n if (distance > showRadius) {\r\n show = false;\r\n }\r\n } else {\r\n show = true;\r\n }\r\n }\r\n\r\n if (show && distance) {\r\n showLocation($(this), distance);\r\n }\r\n else if (show && !distance) {\r\n showLocation($(this));\r\n }\r\n else {\r\n hideLocation($(this));\r\n }\r\n });\r\n\r\n if (locationsMap.searchedLocation) {\r\n // sort shown locations by distance\r\n sortLocations();\r\n }\r\n\r\n reloadMap();\r\n\r\n // don't show location items on page load\r\n // if (initialPageLoad != true) {\r\n // }\r\n // Check if any locations were found. If so, show items\r\n if ($('.locations-listings .location-item.enable-on-map').length > 0) {\r\n $('.locations').addClass('show-locations'); \r\n $('.locations .message-box').removeClass('show-no-locations');\r\n $('.clear-filters-btn').css('display', 'block');\r\n }\r\n else {\r\n $('.locations').removeClass('show-locations'); \r\n $('.locations .message-box').addClass('show-no-locations');\r\n $('.clear-filters-btn').hide();\r\n }\r\n\r\n\r\n calculateItemPositions();\r\n }\r\n\r\n function toRad(value) {\r\n return value * Math.PI / 180;\r\n }\r\n\r\n function calcDistance(lat1, lng1, lat2, lng2) {\r\n var earth = 6371, //km\r\n dLat = toRad(lat2 - lat1),\r\n dLng = toRad(lng2 - lng1);\r\n\r\n lat1 = toRad(lat1);\r\n lat2 = toRad(lat2);\r\n\r\n var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLng / 2) * Math.sin(dLng / 2) * Math.cos(lat1) * Math.cos(lat2);\r\n var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\r\n var distance = (earth * c) / 1.609; //convert from km to miles\r\n\r\n return distance;\r\n }\r\n\r\n function sortLocations() {\r\n var locations = [];\r\n\r\n // create array of shown articles so we can sort it\r\n $('article.enable-on-map').each(function () {\r\n locations.push($(this));\r\n });\r\n\r\n // sort locations by distance in ascending order\r\n locations.sort(function (a, b) {\r\n return a.data(\"distance\") - b.data(\"distance\");\r\n });\r\n\r\n // iterate through sorted locations and order them on the page\r\n for (let i = 0; i < locations.length; i++) {\r\n locations[i].css('order', i);\r\n }\r\n }\r\n\r\n function calculateItemPositions() {\r\n locations.each(function () {\r\n // save items position in list as an attribute to use for marker clicks\r\n $(this).attr('data-top', $(this).position().top);\r\n });\r\n }\r\n\r\n\r\n \r\n /* Select 1st google Autocomplete on Enter */ \r\n function selectFirstOnEnter(input) { // store the original event binding function\r\n\t\t\tvar _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent;\r\n\t\t\tfunction addEventListenerWrapper(type, listener) { // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected, and then trigger the original listener.\r\n\t\t\t\tif (type == \"keydown\") { \r\n\t\t\t\t\tvar orig_listener = listener;\r\n\t\t\t\t\tlistener = function(event) {\r\n\t\t\t\t\t\tvar suggestion_selected = $(\".pac-item-selected\").length > 0;\r\n\t\t\t\t\t\tif (event.which == 13 && !suggestion_selected) { \r\n\t\t\t\t\t\t\tvar simulated_downarrow = $.Event(\"keydown\", {keyCode: 40, which: 40}); \r\n\t\t\t\t\t\t\torig_listener.apply(input, [simulated_downarrow]); \r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\torig_listener.apply(input, [event]);\r\n\t\t\t\t\t};\r\n\t\t\t\t}\r\n\t\t\t\t_addEventListener.apply(input, [type, listener]); // add the modified listener\r\n\t\t\t}\r\n\t\t\tif (input.addEventListener) { \r\n\t\t\t\tinput.addEventListener = addEventListenerWrapper; \r\n\t\t\t} else if (input.attachEvent) { \r\n\t\t\t\tinput.attachEvent = addEventListenerWrapper; \r\n\t\t\t}\r\n\t\t}\r\n \r\n \r\n\r\n function placesAutocomplete() {\r\n var furthestWest = 0,\r\n\t\t\t furthestEast = 0,\r\n\t\t\t furthestSouth = 0,\r\n\t\t\t furthestNorth = 0,\r\n pinBuffer = 48280.3, \r\n earth = 6378.137, //radius of the earth in kilometer\r\n pi = Math.PI,\r\n m = (1 / ((2 * pi / 360) * earth)) / 1000; //1 meter in degree\r\n\r\n // lat = north/south, lon =\r\n\r\n\t\t\t// Get bounding box values for autcomplete restriction\r\n\t\t\t$('.location-item').each(function() {\r\n\t\t\t\tif ($(this).attr('data-lat') && $(this).attr('data-lat')) {\r\n\t\t\t\t\tconst lat = parseFloat($(this).attr('data-lat'));\r\n\t\t\t\t\tconst lon = parseFloat($(this).attr('data-lng'));\r\n\t\r\n\t\t\t\t\tif (!furthestNorth || lat > furthestNorth) {\r\n\t\t\t\t\t\tfurthestNorth = lat + (pinBuffer * m); // add 30mile (48280.3m) buffer from point\r\n\t\t\t\t\t}\r\n \r\n\t\t\t\t\tif (!furthestSouth || lat < furthestSouth) {\r\n furthestSouth = lat - (pinBuffer * m); // add 30mile (48280.3m) buffer from point\r\n\t\t\t\t\t}\r\n \r\n\t\t\t\t\tif (!furthestWest || lon < furthestWest) {\r\n furthestWest = lon - (pinBuffer * m) / Math.cos(lat * (pi / 180));\r\n\t\t\t\t\t}\r\n\t\t\t\t\tif (!furthestEast || lon > furthestEast) {\r\n furthestEast = lon + (pinBuffer * m) / Math.cos(lat * (pi / 180));\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t});\r\n \r\n\t\t\tvar b1 = new google.maps.LatLng(furthestSouth, furthestWest );\r\n\t\t\tvar b2 = new google.maps.LatLng(furthestNorth, furthestEast );\r\n\t\t\tvar lookupBounds = new google.maps.LatLngBounds( b1, b2 );\r\n \r\n\t\t\tvar options = {\r\n\t\t\t\tbounds: lookupBounds,\r\n\t\t\t\tstrictBounds: true,\r\n types: [\"(regions)\"],\r\n componentRestrictions: {country: \"us\"}\r\n\t\t\t};\r\n \r\n var autocomplete = new google.maps.places.Autocomplete(document.getElementById('locationInput'), options);\r\n \r\n google.maps.event.addListener(autocomplete, 'place_changed', function () {\r\n let place = autocomplete.getPlace();\r\n\r\n if (place.geometry !== undefined) {\r\n lat = place.geometry.location.lat();\r\n lng = place.geometry.location.lng();\r\n\r\n pinOptions = {};\r\n pinOptions.position = new google.maps.LatLng(lat, lng);\r\n\r\n // filter through locations to only show those in selected filter\r\n filterLocations();\r\n\r\n $('.locations').addClass('show-locations');\r\n }\r\n $('.js-clear-filters-btn').css('display', 'block');\r\n\r\n });\r\n\r\n selectFirstOnEnter(document.getElementById('locationInput'));\r\n }\r\n\r\n function clearFilters() { \r\n $('.js-filter-type-item input').prop('checked', false);\r\n $('.filter-by-types .js-custom-select-box .filter-text').html('Select Filter(s)');\r\n $('.filter-by-types .js-custom-select-box').removeClass('open').find('.dropdown').slideUp(300);\r\n $('#show-radius:second').prop('selected',true);\r\n \r\n // clear autocomplete\r\n $('#locationInput').blur().val('');\r\n\r\n $('.clear-filters-btn').hide();\r\n placesAutocomplete();\r\n filterLocations();\r\n reloadMap();\r\n }\r\n }\r\n}\n\nclass PolyfillHelpers {\r\n\r\n static main() {\r\n \r\n // support for .forEach() in IE11\r\n if (window.NodeList && !NodeList.prototype.forEach) {\r\n NodeList.prototype.forEach = Array.prototype.forEach;\r\n } \r\n\r\n // support for .closest in IE11\r\n if (!Element.prototype.matches) {\r\n Element.prototype.matches =\r\n Element.prototype.msMatchesSelector ||\r\n Element.prototype.webkitMatchesSelector;\r\n }\r\n if (!Element.prototype.closest) {\r\n Element.prototype.closest = function(s) {\r\n var el = this;\r\n do {\r\n if (Element.prototype.matches.call(el, s)) return el;\r\n el = el.parentElement || el.parentNode;\r\n } while (el !== null && el.nodeType === 1);\r\n return null;\r\n };\r\n }\r\n }\r\n}\n\nclass ResponsiveDatatables {\r\n\tconstructor() {\r\n this.responsiveTable = $('.responsive-table:visible');\r\n this.tableWrapper = $('.table-wrapper');\r\n this.tableHeadline = $('.table-wrapper .table-headline');\r\n this.editMode = $('.sfPageEditor');\r\n\r\n\t\tif (this.responsiveTable.length && !this.editMode.length) {\r\n this.init();\r\n }\r\n \r\n if (this.tableWrapper.length && !this.editMode.length) {\r\n this.toggleTable();\r\n }\r\n\t}\r\n \r\n\tinit() {\r\n \r\n this.initializeDatatables(this.responsiveTable); \r\n \r\n if (this.tableHeadline.length) {\r\n this.toggleTable();\r\n }\r\n\r\n $(window).resize(() => {\r\n if (this.tableHeadline.length) {\r\n this.toggleTable();\r\n }\r\n });\r\n }\r\n\r\n initializeDatatables(table) {\r\n // Initialize tables with dataTables plugin https://datatables.net/\r\n\t\ttable.DataTable( {\r\n responsive: true,\r\n\t\t paging: false,\r\n\t\t searching: false,\r\n\t ordering: false,\r\n\t info: false,\r\n\t autoWidth: false\r\n }); \r\n }\r\n \r\n // if on mobile, loop thru each table header and bind clicking to toggle tables\r\n toggleTable() {\r\n self = this;\r\n let browserWidth = $(window).outerWidth();\r\n\r\n if (browserWidth < 991.98) {\r\n this.tableHeadline.each(function() {\r\n let toggleTableIcon = $(this).children('.mobile-icon');\r\n $(this).closest('.table-wrapper').find('.table-container').hide(); // if a table header exists, close all tables on mobile\r\n\r\n $(this).off('click').on('click', function() {\r\n let closestTable = $(this).siblings('.table-container');\r\n\r\n closestTable.slideToggle(300, function() {\r\n self.initializeDatatables(closestTable.children('.responsive-table'));\r\n toggleTableIcon.toggleClass('fa-chevron-right fa-chevron-down');\r\n });\r\n });\r\n\r\n });\r\n }\r\n }\r\n\r\n}\n\nclass ScrollToTop {\r\n\r\n static main() {\r\n \r\n \t// Scroll To Top\r\n \t$('.scrollToTop').on('click', function(){\r\n \t $('html, body').stop().animate({scrollTop: 0}, 500, 'linear');\r\n \t return false;\r\n \t});\r\n\r\n scrollToTopButton();\r\n\r\n \t// Fade in/out Scroll To Top button after 500px\r\n \tfunction scrollToTopButton() {\r\n \t var button = $('.scrollToTop'), \r\n \t view = $(window),\r\n \t timeoutKey = -1;\r\n\r\n \t // page load\r\n \t if (view.scrollTop() > 500) {\r\n \t button.fadeIn();\r\n \t }\r\n \t else {\r\n \t button.fadeOut();\r\n \t }\r\n\r\n \t $(document).on('scroll', function() {\r\n \t if(timeoutKey) {\r\n \t window.clearTimeout(timeoutKey);\r\n \t }\r\n\r\n \t timeoutKey = window.setTimeout(function(){\r\n \t if (view.scrollTop() > 500) {\r\n \t button.fadeIn();\r\n \t }\r\n \t else {\r\n \t button.fadeOut();\r\n \t }\r\n \t }, 100);\r\n \t });\r\n \t}\r\n\t \r\n }\r\n\r\n}\n\nclass SliderCallout {\r\n\r\n constructor() {\r\n this.sliderWrapper = $('.slider-callout');\r\n this.editMode = $('.sfPageEditor');\r\n\r\n if (this.sliderWrapper.length && !this.editMode.length) {\r\n this.init();\r\n }\r\n }\r\n \r\n init() {\r\n let self = this;\r\n \r\n this.sliderWrapper.each(function() {\r\n let slider = $(this).find('.slider-callout-items');\r\n let totalItems = slider.find('.slider-callout-item').length;\r\n let pausePlayBtn = $(this).find('.pause-play');\r\n let dotsWrapper = $(this).find('.dots-wrapper');\r\n \r\n if (totalItems > 1) {\r\n // initialize slick slider\r\n slider.slick({\r\n dots: true,\r\n appendDots: dotsWrapper,\r\n arrows: false,\r\n lazyLoad: 'ondemand',\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n fade: true,\r\n autoplay: true,\r\n autoplaySpeed: 7000,\r\n pauseOnHover: false\r\n });\r\n \r\n // Handle if pause/play icon was clicked\r\n pausePlayBtn.on('click', (event) => {\r\n event.preventDefault();\r\n self.pausePlay(slider);\r\n });\r\n }\r\n else {\r\n $(this).find('.slider-controls').hide();\r\n $(this).find('.slider-callout-item').addClass('only-one-slide'); // helps get pulse animation to still load\r\n }\r\n }); \r\n\r\n }\r\n\r\n pausePlay(slider) {\r\n let pausePlayBtn = slider.siblings('.slider-controls').find('.pause-play');\r\n\r\n if (pausePlayBtn.hasClass('paused')) {\r\n slider.slick('slickPlay');\r\n }\r\n else {\r\n slider.slick('slickPause');\r\n }\r\n pausePlayBtn.toggleClass('paused').blur().find('.fas').toggleClass('fa-pause fa-play');\r\n }\r\n}\n\nclass SimpleForm {\r\n\r\n constructor() {\r\n this.selectFields = $('select[data-sf-role=\"dropdown-list-field-select\"]');\r\n this.submitBtn = $('.simple-form-callout .sf-SubmitButton');\r\n\r\n if (this.selectFields.length || this.submitBtn.length) {\r\n this.init();\r\n }\r\n }\r\n\r\n init() {\r\n \r\n // add disabled attribute to first item of any select\r\n if (this.selectFields.length) {\r\n this.addDisabledToSelects();\r\n }\r\n \r\n // Handle when submit is clicked\r\n this.submitBtn.on('click', (event) => {\r\n this.thankYouMessage(event);\r\n });\r\n }\r\n \r\n addDisabledToSelects() {\r\n this.selectFields.each(function() {\r\n $(this).find('option:eq(0)').prop('disabled', true);\r\n });\r\n \r\n }\r\n\r\n // after form is submitted, thank you message replaces form so scroll up so it's visible\r\n thankYouMessage(event) {\r\n const form = $(event.currentTarget).closest('.simple-form-callout');\r\n\r\n setInterval(function() {\r\n \r\n if (!form.hasClass('thank-you')) {\r\n $('html, body').animate({ scrollTop: form.offset().top}, 1000);\r\n form.addClass('thank-you');\r\n }\r\n }, 500);\r\n }\r\n}\n\nclass SocialShare {\r\n\r\n constructor() {\r\n this.shareIcons = $('.social-share');\r\n\r\n if (this.shareIcons.length) {\r\n this.init();\r\n }\r\n }\r\n\r\n init() {\r\n const fb = $('.share-facebook');\r\n const lk = $('.share-linkedin');\r\n const tw = $('.share-twitter');\r\n \r\n const url = encodeURIComponent(window.location.href);\r\n \r\n fb.attr('href', `https://www.facebook.com/sharer/sharer.php?u=${url}`);\r\n lk.attr('href', `https://www.linkedin.com/shareArticle?mini=true&url=${url}`);\r\n tw.attr('href', `https://twitter.com/intent/tweet?url=${url}`);\r\n\r\n // need to find instagram\r\n\r\n }\r\n\r\n}\n\nclass SolutionsLinks {\r\n\r\n constructor() {\r\n this.solutionsSelect = $('.solutions-select');\r\n this.selectTitle = $('.solutions-links .select-title');\r\n this.selectDropdown = $('.solutions-links .select-dropdown');\r\n this.selectOptions = $('.solutions-links .select-option');\r\n this.goBtn = $('.solutions-links .go-btn');\r\n\r\n if (this.solutionsSelect.length) {\r\n this.init();\r\n }\r\n }\r\n\r\n init() {\r\n\r\n // Handler to Toggle opening select box\r\n this.selectTitle.on('click', (event) => {\r\n event.preventDefault();\r\n this.toggleSolutionsDropdown();\r\n });\r\n\r\n // handle if user clicks outside of select box close it\r\n $(document).on('click', (event) => { \r\n if (!$(event.target).closest('.solutions-links').length) {\r\n this.closeDropdown();\r\n }\r\n }); \r\n\r\n // Handler when select option was chosen\r\n this.selectOptions.on('click', (event) => {\r\n event.preventDefault();\r\n this.optionSelected(event);\r\n });\r\n \r\n }\r\n\r\n toggleSolutionsDropdown() {\r\n if (!this.solutionsSelect.hasClass('open')) {\r\n this.openDropdown();\r\n }\r\n else {\r\n this.closeDropdown();\r\n }\r\n }\r\n\r\n openDropdown() {\r\n this.solutionsSelect.addClass('open');\r\n this.selectDropdown.slideDown(300);\r\n this.selectTitle.find('.arrow').removeClass('fa-chevron-down').addClass('fa-chevron-up');\r\n }\r\n \r\n closeDropdown() {\r\n this.solutionsSelect.removeClass('open');\r\n this.selectDropdown.slideUp(300);\r\n this.selectTitle.find('.arrow').removeClass('fa-chevron-up').addClass('fa-chevron-down');\r\n }\r\n\r\n optionSelected(event) {\r\n const url = $(event.currentTarget).attr('href');\r\n const text = $(event.currentTarget).html();\r\n const aria = $(event.currentTarget).attr('aria-label');\r\n\r\n this.solutionsSelect.addClass('selected');\r\n this.selectTitle.attr('aria-label', aria).find('.select-title-text').html(text);\r\n this.goBtn.attr('href', url);\r\n this.closeDropdown();\r\n }\r\n\r\n \r\n}\n\nclass SpeedBump {\r\n\r\n constructor() {\r\n\r\n // dom elements\r\n this.speedbumpLink = $('.speedbump-link');\r\n this.acceptBtn = '';\r\n this.denyBtn = '';\r\n this.speedbumpModal = '';\r\n this.message = '';\r\n this.url = '';\r\n\r\n if (this.speedbumpLink.length) {\r\n this.init(); \r\n }\r\n\r\n }\r\n\r\n init() {\r\n\t \r\n // if \".speedbump-link\" is clicked, pull message from data attribute and display in a modal\r\n this.speedbumpLink.on('click', (event) => {\r\n event.preventDefault();\r\n \r\n this.message = $(event.currentTarget).attr('data-redirect-message'); \r\n this.url = $(event.currentTarget).attr('href');\r\n\t\t\t\r\n\t\t\t//Get default text if one is not provided\r\n\t\t\tif(!this.message) {\r\n\t\t\t\tthis.message = $('meta[name=speedbump-message]').attr('content');\r\n\t\t\t}\r\n\t\t\t\r\n // create modal with message\r\n this.createSpeedBumpModal();\r\n this.bindButtons();\r\n\r\n // Handle when Close is clicked\r\n this.denyBtn.on('click', (event) => {\r\n this.returnToSite(event);\r\n });\r\n\r\n // Handle when Accept is clicked\r\n this.acceptBtn.on('click', (event) => {\r\n this.allowLink(event);\r\n });\r\n \r\n });\r\n\r\n }\r\n\r\n bindButtons() {\r\n this.acceptBtn = $('.speedBumpModal .acceptBtn');\r\n this.denyBtn = $('.speedBumpModal .denyBtn');\r\n this.speedbumpModal = $('.speedBumpModal');\r\n }\r\n\r\n createSpeedBumpModal() {\r\n $('body').prepend('${model.name}
\r\n\r\n
\r\n ${model.street}
\r\n${model.cityStateZip}
\r\n \r\n Learn More \r\n Directions \r\n
\r\n '); \r\n }\r\n\r\n\r\n returnToSite(event) { \r\n event.preventDefault();\r\n this.speedbumpModal.remove();\r\n }\r\n\r\n allowLink() {\r\n this.speedbumpModal.remove();\r\n }\r\n\r\n}\n\nclass Testimonials {\r\n\r\n constructor() {\r\n this.slider = $('.testimonials-slider .testimonials');\r\n this.editMode = $('.sfPageEditor');\r\n\r\n if (this.slider.length && !this.editMode.length) {\r\n this.init();\r\n }\r\n }\r\n\r\n init() {\r\n\r\n // initialize slick slider\r\n this.slider.slick({\r\n dots: false,\r\n arrows: true,\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n autoplay: false,\r\n prevArrow: '',\r\n nextArrow: ''\r\n }); \r\n }\r\n}\n\n/* Site Specific Javascript Component Imports */\r\n\r\n\r\n\r\nconst MainScripts = (() => {\r\n\r\n\t// Shared\r\n\tif (typeof svg4everybody == 'function') { svg4everybody(); }\r\n\tPolyfillHelpers.main();\r\n\r\n\t/* Site Specific javascript modules */\r\n\tScrollToTop.main();\t\r\n\tconst imageLoader = new ImageLoader();\r\n\timageLoader.initialize(); // lazy load\r\n\r\n\tnew Accordions();\r\n\tnew Alerts();\r\n\tnew ComparisonCards();\r\n\tnew FeaturedResources();\r\n\tnew FeaturedRates();\r\n\tnew FeaturedStats();\r\n\tnew FloatingFormLabel();\r\n\tnew HeaderSearch();\r\n\tIsElementInView.main();\r\n\tnew Login();\r\n\tnew Menu();\r\n\tnew ResponsiveDatatables();\r\n\tnew SliderCallout();\r\n\tnew SimpleForm();\r\n\tnew SocialShare();\r\n\tnew SolutionsLinks();\r\n\tnew SpeedBump();\r\n\tnew Testimonials();\r\n\r\n\tif ( $('.location-search').length ) {\r\n\t\tLocations.displayLocations();\r\n\t}\r\n\r\n\t// check for thank you message\r\n\tif ( $('.form-submit-result').length ) {\r\n\t\t// scroll to message\r\n\t\t$('html, body').scrollTop($('.form-submit-result').offset().top);\r\n\t}\r\n\r\n\t// Update iframe attributes and reload iframe to fix blocked content\r\n\tdocument.addEventListener('DOMContentLoaded', (function FixYoutubeWatchLinks() {\r\n\t\tvar iframes = document.getElementsByTagName('iframe'); \r\n\t\tfor (var i = 0; i < iframes.length; i++) { \r\n\t\t\tif (iframes[i].hasAttribute('src') && iframes[i].src.includes('https://www.youtube.com')) {\r\n\t\t\t\tiframes[i].setAttribute('referrerpolicy', 'no-referrer');\r\n\t\t\t\tvar sandboxval = iframes[i].hasAttribute('sandbox') ? iframes[i].getAttribute('sandbox') : \"\" ; \r\n\t\t\t\tsandboxval += \" allow-scripts allow-same-origin allow-popups-to-escape-sandbox\"; \r\n\t\t\t\tiframes[i].setAttribute('sandbox', sandboxval);\r\n\t\t\t\tiframes[i].setAttribute('src', iframes[i].src);\r\n\t\t\t}\r\n\t\t}\r\n\t}));\r\n})();\n"]}
![\"Georgia](\"/ResourcePackages/ST/library/img/logo.svg\"){kind=logo}