window.AgentWidget = {
getStyles: function () {
return `
.agent-widget-block {
font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
.agent-widget-page {
background-color: #f4f4f4;
border: 1px solid #ccc;
border-radius: 3px 3px;
max-height: 700px;
overflow: auto;
}
.agent-widget-search-container {
padding: 10px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.agent-widget-search-button-container {
padding: 5px 10px;
}
.agent-widget-search-field {
display: flex;
max-width: 300px;
width: 100%;
padding-top: 5px;
}
.agent-widget-search-field-icon {
margin-left: 3px;
line-height: 35px;
}
.agent-widget-item {
background-color: #eaeaea;
margin: 10px;
padding: 0px 10px 10px 10px;
border-radius: 3px 3px;
border: 1px solid #e2dfdf;
}
.agent-widget-name {
font-weight: bold;
}
.agent-widget-country {
font-weight: bold;
display: flex;
margin-top: 5px;
}
.agent-widget-country img {
width: 18px;
margin-right: 5px;
}
.agent-widget-item-row {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.agent-widget-item-column {
margin-top: 5px;
}
.agent-widget-logo img {
max-height: 150px;
max-width: 150px;
}
.clean-button {
appearance: none;
background-color: #FAFBFC;
border: 1px solid rgba(27, 31, 35, 0.15);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
box-sizing: border-box;
color: #24292E;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 500;
line-height: 20px;
list-style: none;
padding: 6px 16px;
position: relative;
transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
word-wrap: break-word;
}
.clean-button:hover {
background-color: #F3F4F6;
text-decoration: none;
transition-duration: 0.1s;
}
.clean-button:disabled {
background-color: #FAFBFC;
border-color: rgba(27, 31, 35, 0.15);
color: #959DA5;
cursor: default;
}
.clean-button:active {
background-color: #EDEFF2;
box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
transition: none 0s;
}
.clean-button:focus {
outline: 1px transparent;
}
.clean-button:before {
display: none;
}
.clean-button:-webkit-details-marker {
display: none;
}
.clean-input {
width: 100%;
border-color: #ccc;
border-style: solid;
border-width: 1px;
border-radius: 3px;
padding: 5px 10px;
height: 35px;
box-sizing: border-box;
}
.clean-input:focus-visible {
outline-color: #ccc;
}
.clean-select {
width: 100%;
padding: 5px 7px;
border-color: #ccc;
border-style: solid;
border-width: 1px;
border-radius: 3px;
height: 35px;
}
.clean-select:focus-visible {
outline-color: #ccc;
}
`
},
applyStyles: function () {
css = AgentWidget.getStyles()
head = document.head || document.getElementsByTagName('head')[0]
style = document.createElement('style')
head.appendChild(style)
style.type = 'text/css'
if (style.styleSheet){
// This is required for IE8 and below.
style.styleSheet.cssText = css
} else {
style.appendChild(document.createTextNode(css))
}
},
institutionCodes: '',
init: function (containerElement, institutionCodes = []) {
if (!(containerElement instanceof Element || containerElement instanceof HTMLDocument)) {
console.log('The first argument to init must be a HTML element.')
return
}
AgentWidget.institutionCodes = institutionCodes.join(',')
AgentWidget.applyStyles()
getAgentDataList({}).then((agentDataList) => {
var widgetHTML = getAgentWidgetHTML(agentDataList)
containerElement.innerHTML = widgetHTML
// Hydrate countries into country dropdown
fetch('https://admissions-latrobe.studylink.com/webservices/public/index.cfm/country', {
method: 'GET',
headers: {'Content-Type': 'application/json'},
}).then((response) => {
if (!(response.status >= 200 && response.status < 300)) {
throw new Error('There was an error getting countries')
}
return response.json()
}).then((countries) => {
const countrySelect = containerElement.querySelector('.agent-widget-search-container select#search-country')
let countryOptionsHTML = ''
countries.forEach(({ value, label }) => {
countryOptionsHTML += ''
})
countrySelect.innerHTML = countryOptionsHTML
})
})
},
searchForm: function (event) {
event.preventDefault()
AgentWidget.search()
},
search: function () {
const searchButton = document.querySelector('.agent-widget-search-button-container button')
searchButton.disabled = true
const countryParam = document.querySelector('#search-country').value
const termParam = document.querySelector('#search-term').value
getAgentDataList({
country: countryParam,
term: termParam,
}).then((agentDataList) => {
const itemsContainer = document.querySelector('.agent-widget-items-container')
var widgetItemsHTML = getAgentItemsHTML(agentDataList)
itemsContainer.innerHTML = widgetItemsHTML
searchButton.disabled = false
})
},
}
function buildQuery (data) {
// If the data is already a string, return it as-is
if (typeof (data) === 'string') return data;
// Create a query array to hold the key/value pairs
var query = [];
// Loop through the data object
for (var key in data) {
if (data.hasOwnProperty(key)) {
// Encode each key and value, concatenate them into a string, and push them to the array
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
}
// Join each item in the array with a `&` and return the resulting string
return query.join('&');
}
async function getAgentDataList (queryParams) {
const query = buildQuery({
...queryParams,
institutionCodes: AgentWidget.institutionCodes,
})
return await fetch('https://admissions-latrobe.studylink.com/webservices/public/index.cfm/institution_agencies?' + query, {
method: 'GET',
headers: {'Content-Type': 'application/json'},
}).then((response) => {
if (!(response.status >= 200 && response.status < 300)) {
throw new Error('There was an error getting institution agencies')
}
return response.json()
})
}
function getAgentWidgetHTML (agentDataList) {
return `
${getAgentItemsHTML(agentDataList)}
`
}
function getAgentItemsHTML (agentDataList) {
if (!Array.isArray(agentDataList)) {
console.log('Agent data list is not an array')
return ''
}
let html = ''
for (let i = 0; i < agentDataList.length; i++) {
var htmlDataItem = agentDataList[i]
let agentWebsiteHTML = ''
if (htmlDataItem.Website) {
let agentHref = ''
let agentWebsiteDisplay = htmlDataItem.Website.replace(/https:\/\//g, '').replace(/http:\/\//g, '')
if (htmlDataItem.Website.includes('http://') || htmlDataItem.Website.includes('https://')) {
agentHref = htmlDataItem.Website
} else {
agentHref = `https://${htmlDataItem.Website}`
}
agentWebsiteHTML = `
