\";\n retval += \"
\";\n if (eventMoment.format(\"DDD\") == eventEndMoment.format(\"DDD\")) {\n retval += buildSingleDateBox( eventMoment);\n }\n if (eventMoment.format(\"DDD\") != eventEndMoment.format(\"DDD\")) {\n retval += \"
\";\n retval += \"
\";\n retval += eventMoment.format('MMM').toUpperCase() + \" \";\n retval += eventMoment.format(\"DD\");\n retval += \"
-
\";\n retval += eventEndMoment.format('MMM').toUpperCase() + \" \" + eventEndMoment.format(\"DD\");\n retval += \"
\";\n retval += \"
\";\n }\n retval += \"
\";\n\n // add event title\n retval += \"
\";\n retval += \"
\";\n\n\n // add event description\n retval += \"
\" + descriptionString + \"
\";\n\n\n // append more info link if available\n if (event['MoreInformationURL'] != \"\" && event['More Information Link Text'] != \"\") {\n retval += \"
\";\n }\n\n // append timestring\n retval += \"
\" + timeString + \"
\";\n\n // append location string\n retval += \"
\" + locationString + \"
\";\n\n // append flashperks string\n if (perksString != \"\") {\n retval += \"
\" + perksString + \"
\";\n }\n retval += \"
\";\n\n return retval;\n\n }\n\n\n }\n\n\n this.addEventsToDivTable = function( dataset ) {\n\n // this is super important. It does two things.\n // it loads all the events, formatted nicely, into the divtable.\n\n // as it does that, it adds in the tags needed to filter the events,\n // such as, is it a flashperks event?\n\n\n\n // here we get into some really fun stuff...\n\n var subs = new Array();\n // maintain a list of my subscribed events.\n for( var y in this.myTagSubscriptions) {\n if ( this.myTagSubscriptions[ y ] == 1 )\n subs.push(y);\n } \n\n\n for( var x = 0; x < this.events.length; x++) {\n\n var tags = new Object;\n tags.category = this.events[x].Category;\n\n if( this.savedEvents.indexOf( this.events[x].Id) != -1 ) {\n tags.savedEvent = true; \n }\n\n if( this.events[x].EventKeywords != undefined )\n {\n\n var keywords = this.events[x].EventKeywords.split(\";\");\n\n // this is imporant. Campuses are separate from keywords.\n // but, we treat them as keywords. So, we're going to add\n // them to the list of keywords.\n\n if( this.events[x].KSUCampus != undefined )\n keywords.push( this.events[x].KSUCampus );\n\n // clean each keyword (replace splaces with _, for example)\n for( var y = 0; y < keywords.length; y++)\n keywords[y] = this.clean(keywords[y]);\n\n // as long as one or more category is in our sub list\n if( _.intersection( keywords, subs).length ) {\n tags.subscribed = true;\n }\n\n }\n // these are needed as tags because we can filter them with\n // a custom calendar.\n tags.department = this.events[x].KSUDepartment;\n tags.division = this.events[x].Division;\n tags.campus = this.events[x].KSUCampus; \n\n tags.title = this.events[x]['Event Name']; // not required but useful\n\n // also store some date information for filtering purposes.\n var m = new moment(new Date( this.events[x]['Event Start Date']));\n var year = m.format('YY');\n var dayofyear = m.format('DDD');\n tags.year = year;\n tags.dayofyear = dayofyear;\n\n // add tags if it is stu org or has flashperks.\n if( this.events[x].KSUStudentOrganization != undefined && this.events[x].KSUStudentOrganization != \"\" ) {\n tags.studentOrgEvent = true;\n tags.studentOrg = this.events[x].KSUStudentOrganization;\n }\n\n\n // might be issue if there are no points...\n if( this.events[x].KSUFlashPerksEvent == \"True\") {\n tags.flashperksEvent = true;\n tags.flashperksPoints = this.events[x].KSUFlashPerksEventsPoints;\n }\n else\n tags.flashperksEvent = false;\n\n\n // ok build out the save button\n var savebutton = document.createElement(\"a\");\n\n //adding tabindex 0 does not allow keyboard users to click using the enter key. Setting the href to #0 solves this problem and avoids unwanted navigation since #0 is non-relevant.\n savebutton.setAttribute('href', '#0');\n savebutton.setAttribute('role', 'button');\n\n var saved = false;\n for( var y = 0; y < this.savedEvents.length; y++)\n {\n if( this.savedEvents[y] == this.events[x].Id ) {\n saved = true; break;\n } \n }\n \n if( saved ) { // && this.events[x].savedEvent == true )\n savebutton.className = \"button events-saved-button has-icon-left active\";\n savebutton.innerHTML = \"
SAVED\";\n }\n else {\n savebutton.className = \"button events-save-button has-icon-left\";\n savebutton.innerHTML = \"
SAVE\";\n }\n\n savebutton.dataset.eventid = this.events[x].Id;\n savebutton.setAttribute('id', 'event_' + this.events[x].Id );\n\n savebutton.addEventListener('click', function() { this.className += \" active-save\"; } );\n savebutton.addEventListener('click', function() { \n var id =( $(\".active-save\").first().data(\"eventid\") );\n $('.active-save').removeClass('active-save');\n this.saveEventToggle( id );\n \n if(document.documentElement.getAttribute('data-whatinput') === 'keyboard') {\n var clickedButton = document.getElementById('event_' + id);\n clickedButton.focus();\n }\n\n }.bind(this) );\n \n this.events[x].tags = tags;\n this.dt.addRow( [ this.formatEventDescription( this.events[x]), savebutton ], 'events-table-row', tags );\n \n } \n\n }\n\n\n this.saveEventToggle = function(id) {\n\n var found = false;\n\n for( var x = 0; x < this.savedEvents.length; x++) {\n if( this.savedEvents[x] == id ) {\n this.savedEvents[x] = 'deleted';\n\n for( var y = 0; y < this.events.length; y++ ) {\n if( this.events[y].Id == id )\n this.events[y].savedEvent = null;\n }\n found = true;\n }\n }\n\n if( found == false )\n this.savedEvents.push( id );\n\n this.dt._dataset = new Array();\n this.addEventsToDivTable();\n \n // called when a 'save' button is clicked\n\n // save it to the user's profile.\n\n $.get('/asyncloader/event/' + id + '/toggle');\n\n this.dt.draw();\n return; \n\n }\n\n this.buildCountOfCheckedCategories = function() {\n // ok, this is all for updating the number of categories that a\n // user has selected\n\n // if at least one category is checked, we shouldn't show\n // the message urging users to select categories\n\n var at_least_one_category_checked = false;\n\n // listOfCategories is an object with each category name\n\n for (var x in this.listOfCategories) {\n\n if (this.listOfCategories.hasOwnProperty(x)) { // ignore internal methods\n var category_count = $('input[data-category=\"' + x + '\"]:checked').length;\n\n if (category_count == 0)\n $('[data-category-counter=\"' + x + '\"]').hide(500);\n else\n $('[data-category-counter=\"' + x + '\"]').show();\n\n $('[data-category-counter=\"' + x + '\"]').html(category_count);\n\n if (category_count > 0)\n at_least_one_category_checked = true;\n }\n }\n\n if (at_least_one_category_checked) {\n // if at least one category is checked, allow users to\n // escape from this menu back to the calendar, instead\n // of the main calendar, and remove the message urging\n // users to select categories.\n $('.events-back-to-calendar').show();\n $('.events-back-to-calendar-all').hide();\n }\n else {\n // if no categories are checked, then when a user\n // escapes from the menu, take them back to the main\n // calendar and show the message urging users to select\n // categories.\n\n $('.events-back-to-calendar-all').show();\n $('.events-back-to-calendar').hide();\n }\n }\n\n\n this.toggle_my_categories = function(category, val) {\n category = category.substring(4);\n\n if (val == true)\n onoff = 1;\n else\n onoff = 0;\n\n $('#cat_' + category).attr('aria-checked', val);\n\n $.getJSON(\"/asyncloader/eventtags/\" + category + \"/\" + onoff);\n\n if (category == 'none')\n this.myTagSubscriptions = new Array();\n else\n this.myTagSubscriptions[category] = onoff;\n\n this.buildCountOfCheckedCategories();\n\n }\n\n\n this.buildEventsForYouOptions = function() {\n\n if( document.getElementById('event-preferences').children.length > 0 )\n return;\n\n data = this.categoryList;\n\n\n // create the accordion-proper\n var category_accordion = document.createElement(\"ul\");\n category_accordion.setAttribute('id', 'preferences-accordion');\n category_accordion.setAttribute('data-accordion', '');\n category_accordion.setAttribute('data-allow-all-closed', 'true');\n category_accordion.className = \"accordion\";\n category_accordion.style['width'] = \"100%\";\n\n // for each category\n for (var x = 0; x < data.length; x++) {\n var category_li = document.createElement(\"li\");\n\n category_li.className = \"accordion-item\";\n\n // set first accordion element as active / open\n if (x == 0) {\n category_li.className = \"accordion-item is-active\";\n category_li.setAttribute('aria-expanded', \"true\");\n }\n category_li.setAttribute('data-accordion-item', \"\");\n\n // in error -- causes duplicate id category_li.setAttribute('id','preferences-item-' + x );\n\n var category_title = document.createElement(\"a\");\n\n category_title.appendChild(document.createTextNode(data[x].title));\n\n // var linkText = document.createTextNode( data[x].title );// + \"
\" + sub_category_count + \"\" );\n //category_title.appendChild(linkText);\n\n var cat_count_span = document.createElement(\"span\");\n cat_count_span.setAttribute('data-category-counter', this.clean(data[x].title));\n\n cat_count_span.className = \"badge events-preferences-badge\";\n // cat_count_span.innerHTML = sub_category_count;\n\n this.listOfCategories[this.clean(data[x].title)] = 1;\n category_title.appendChild(cat_count_span);\n\n category_title.href = \"#\";\n category_title.href = \"#event-accordion-content-\" + x;\n category_title.className = \"accordion-title\";\n\n var category_content = document.createElement(\"div\");\n category_content.className = \"accordion-content\";\n category_content.setAttribute(\"data-tab-content\", \"\");\n category_content.setAttribute(\"id\", \"event-accordion-content-\" + x);\n\n var subcategory_container = document.createElement(\"div\");\n subcategory_container.className = \"grid-x\";\n\n for (var y = 0; y < data[x].subcategories.length; y++) {\n\n var subcategory_checkbox_container = document.createElement(\"div\");\n subcategory_checkbox_container.className = \"cell small-12 large-4\";\n subcategory_checkbox_container.style = \"padding: .5em;\";\n\n var subcategory_checkbox = document.createElement(\"input\");\n subcategory_checkbox.type = 'checkbox';\n\t\tsubcategory_checkbox.className = \"fl-check\";\n subcategory_checkbox.id = \"cat_\" + this.clean(data[x].subcategories[y].title);\n subcategory_checkbox.setAttribute(\"data-category\", this.clean(data[x].title));\n\n subcategory_checkbox.addEventListener('change', function() {\n this.className += \" active-checkbox\";\n });\n \n subcategory_checkbox.addEventListener( 'change', function () {\n\n var box = document.getElementsByClassName('active-checkbox');\n var id = box[0].getAttribute('id');\n var checked = box[0].checked;\n \n $('.active-checkbox').removeClass('active-checkbox');\n \n\n for( var xx = 0; xx < this.events.length; xx++ )\n {\n if( this.events[xx].EventKeywords == null )\n continue;\n var cats = this.events[xx].EventKeywords.split(\";\");\n\n cats.push( this.events[xx].KSUCampus ); \n \n for( yy = 0; yy < cats.length; yy++)\n {\n if( \"cat_\" + this.clean(cats[yy]) == id ) \n this.events[xx].tags.subscribed = checked ;\n \n } \n \n }\n this.toggle_my_categories(id, checked);\n }.bind(this));\n\n\n\n if (this.myTagSubscriptions[this.clean(data[x].subcategories[y].title)] == \"1\") {\n subcategory_checkbox.setAttribute(\"aria-checked\", true);\n subcategory_checkbox.checked = true;\n }\n else {\n subcategory_checkbox.setAttribute(\"aria-checked\", false);\n }\n\n subcategory_checkbox.setAttribute(\"aria-describedBy\", \"cat_\" + this.clean(data[x].subcategories[y].title) + \"_desc\");\n subcategory_checkbox_container.appendChild(subcategory_checkbox);\n\n var subcategory_label_container = document.createElement(\"label\");\n subcategory_label_container.setAttribute(\"id\", \"cat_\" + this.clean(data[x].subcategories[y].title) + \"_desc\");\n subcategory_label_container.className = \"cell small-12 large-5\";\n //subcategory_label_container.style = \"padding: .5em;\";\n\t\tsubcategory_label_container.setAttribute('for', \"cat_\" + this.clean(data[x].subcategories[y].title) );\n subcategory_label_container.innerHTML = data[x].subcategories[y].title;\n\n\t\tsubcategory_checkbox_container.appendChild( subcategory_label_container);\n subcategory_container.appendChild(subcategory_checkbox_container);\n //subcategory_container.appendChild(subcategory_label_container);\n\n } /* */\n\n category_content.appendChild(subcategory_container);\n\n category_li.appendChild(category_title);\n\n category_li.appendChild(category_content);\n category_accordion.appendChild(category_li);\n }\n $('#event-preferences').append(category_accordion);\n\n $('.accordion').foundation();\n\n }\n\n }\n\n"," function lrCalendar(trigger) {\n this.returnFocus = trigger;\n this.periodEl = parentOfClass(this.returnFocus, 'accordion-item');\n var todaysDate = new Date();\n this.daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; \n this.monthLongList = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\",\n \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];\n this.monthShortList = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\",\n \"Jul\", \"Aug\", \"Sept\", \"Oct\", \"Nov\", \"Dec\"];\n this.dayLabels = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\n this.dayWords = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n\n\t //this.description = this.periodEl.getAttribute('data-description');\n //this.user = this.periodEl.getAttribute('data-user');\n //this.payPeriod = this.periodEl.getAttribute('data-pay-period');\n\n this.positionNumber = this.periodEl.getAttribute('data-position-number');\n this.payNumber = Number(this.periodEl.getAttribute('data-pay-number'));\n this.suffix = this.periodEl.getAttribute('data-suffix') ? this.periodEl.getAttribute('data-suffix') : 'NULL';\n this.seqNo = this.periodEl.getAttribute('data-seq-no') ? this.periodEl.getAttribute('data-seq-no') : 'NULL';\n //In the future, if we allow submit from the popup, we need to set data-seq-no on the submit button inside the popup based on this value;\n \n this.allowedSick = (this.periodEl.getAttribute('data-sick').toLowerCase() === 'true') ? true : false;\n this.allowedVacation = (this.periodEl.getAttribute('data-vacation').toLowerCase() === 'true') ? true : false;\n this.allowedPersonal = (this.periodEl.getAttribute('data-personal').toLowerCase() === 'true') ? true : false;\n this.allowedAlternate = (this.periodEl.getAttribute('data-alternate').toLowerCase() === 'true') ? true : false;\n //this.eligibleToReport = (this.allowedSick || this.allowedVacation || this.allowedPersonal) ? true : false;\n\n var startYear =(this.periodEl.getAttribute('data-start-year') != null) ? Number(this.periodEl.getAttribute('data-start-year')): '';\n var startMonth = (this.periodEl.getAttribute('data-start-month') != null) ? Number(this.periodEl.getAttribute('data-start-month')) : '';\n var startDay = (this.periodEl.getAttribute('data-start-day') != null) ? Number(this.periodEl.getAttribute('data-start-day')) : '';\n var endYear =(this.periodEl.getAttribute('data-end-year') != null) ? Number(this.periodEl.getAttribute('data-end-year')): '';\n var endMonth = (this.periodEl.getAttribute('data-end-month') != null) ? Number(this.periodEl.getAttribute('data-end-month')) : '';\n var endDay = (this.periodEl.getAttribute('data-end-day') != null) ? Number(this.periodEl.getAttribute('data-end-day')) : '';\n\n this.start = this.lrDateInfo(startYear, startMonth, startDay);\n this.end = this.lrDateInfo(endYear, endMonth, endDay);\n }\n\n lrCalendar.prototype.lrDateInfo = function(year, month, day){\n var dateInfo = {};\n dateInfo.year = year;\n dateInfo.month = month;\n dateInfo.monthShort = this.monthShortList[dateInfo.month];\n dateInfo.monthLong = this.monthLongList[dateInfo.month];\n dateInfo.day = day;\n dateInfo.jsDate = new Date(dateInfo.year, dateInfo.month, dateInfo.day);\n dateInfo.dayOfWeek = dateInfo.jsDate.getDay();\n\n dateInfo.monthFirstDay = new Date(dateInfo.year, dateInfo.month, 1);\n dateInfo.monthFirstDayOfWeek = dateInfo.monthFirstDay.getDay();\n dateInfo.monthLength = this.daysInMonth[dateInfo.month];\n dateInfo.prevMonthLength = ((dateInfo.month - 1) >= 0 ) ? this.daysInMonth[(dateInfo.month - 1)] : 31;\n\n //Make sure amount of days is correct for leap years.\n if ((dateInfo.year % 4 == 0 && dateInfo.year % 100 != 0) || dateInfo.year % 400 == 0){\n if (dateInfo.month == 1) {\n dateInfo.monthLength = 29;\n } else if (dateInfo.month == 2){\n dateInfo.prevMonthLength = 29;\n }\n }\n return dateInfo;\n }\n\n lrCalendar.prototype.calBtnReset = function(){\n //loop through cal btns and remove special classes\n //check against parameter to see if this btn has data\n //console.log(this.datesWithData);\n for(var i = 0; i < this.calBtns.length; i++){\n var thisBtn = this.calBtns[i];\n thisBtn.classList.remove('changed');\n thisBtn.classList.remove('error');\n thisBtn.removeAttribute('data-saved');\n for(var j = 0; j < this.datesWithData.length; j++){\n if(thisBtn.getAttribute('data-full-date') === this.datesWithData[j]){\n thisBtn.setAttribute('data-saved', '');\n }\n }\n }\n return;\n }\n\n lrCalendar.prototype.generateLrData = function(data){\n this.data = {};\n this.newData = {};\n this.timeEntryArray = [];\n this.datesWithData = [];\n //this.data['User'] = this.user;\n // this.newData['User'] = this.user;\n this.data['PositionNumber'] = this.positionNumber;\n this.newData['PositionNumber'] = this.positionNumber;\n //this.data['Description'] = this.description;\n //this.newData['Description'] = this.description;\n //this.data['PayPeriod'] = this.payPeriod;\n //this.newData['PayPeriod'] = this.payPeriod;\n\n //need to evaluate when to reset counter to 1\n var splitView = (this.start.month !== this.end.month) ? true : false;\n var lastDay = splitView ? this.start.monthLength : this.end.day;\n\n var counter = this.start.day;\n var month = this.start.month;\n var year = this.start.year;\n\n var totalSick = 0;\n var totalVacation = 0;\n var totalPersonal = 0;\n var totalAlternate = 0;\n\n while(counter <= lastDay){\n //console.log(counter);\n var date = this.fullDateString(year, month, counter);\n\n var thisSick = 0;\n var thisVacation = 0;\n var thisPersonal = 0;\n var thisAlternate = 0;\n \n\n for(var i = 0; i < data.length; i++){\n\n if(data[i]['PositionNumber'] === this.positionNumber){\n //only interested in current job\n for(var j = 0; j < data[i]['Leave_by_Job'].length; j++){\n if(data[i]['Leave_by_Job'][j]['Pay_Number'] === this.payNumber && data[i]['Leave_by_Job'][j]['Time_Entry']){\n //Matching leave by job object\n for(var k = 0; k < data[i]['Leave_by_Job'][j]['Time_Entry'].length; k++){\n if(data[i]['Leave_by_Job'][j]['Time_Entry'][k]['TIME_ENTRY_DATE'] === date){\n\n var timeEntry = data[i]['Leave_by_Job'][j]['Time_Entry'][k];\n var timeEntryType = timeEntry['EARN_LONG_DESC'].toLowerCase();\n var timeEntryNum = Number(timeEntry['EARN_CODE_HOURS']);\n\n //make sure this is truthy and not NaN, Undefined, or ''...\n if(timeEntryNum){\n this.datesWithData.push(timeEntry['TIME_ENTRY_DATE']);\n if(timeEntryType.indexOf('sick') !== -1){\n totalSick += timeEntryNum;\n thisSick = timeEntryNum;\n } else if(timeEntryType.indexOf('vacation') !== -1){\n totalVacation += timeEntryNum;\n thisVacation = timeEntryNum; \n } else if(timeEntryType.indexOf('personal') !== -1){\n totalPersonal += timeEntryNum;\n thisPersonal = timeEntryNum; \n } else if(timeEntryType.indexOf('alternate') !== -1){\n totalAlternate += timeEntryNum;\n thisAlternate = timeEntryNum; \n } else {}\n }\n\n }\n }\n }else{ \n //no match\n continue;\n }\n }//End of loop through all leave by job objects\n }//End of if jobs match\n \n this.data[date] = {};\n this.newData[date] = {};\n if(this.allowedSick){\n this.data[date]['sick'] = thisSick;\n this.newData[date]['sick'] = thisSick;\n }\n if(this.allowedVacation){\n this.data[date]['vacation'] = thisVacation;\n this.newData[date]['vacation'] = thisVacation;\n }\n if(this.allowedPersonal){\n this.data[date]['personal'] = thisPersonal;\n this.newData[date]['personal'] = thisPersonal;\n }\n if(this.allowedAlternate){\n this.data[date]['alternate'] = thisAlternate;\n this.newData[date]['alternate'] = thisAlternate;\n }\n\n }//For Loop End\n\n counter++;\n\n //Only executed once when pay period overlaps into next month.\n if(splitView && (counter > Number(this.start.monthLength))){\n counter = 1;\n month = this.end.month;\n year = this.end.year;\n lastDay = this.end.day;\n }\n \n }//While Loop End\n\n\n\n //Use these totals to display in original piece upon closing popup\n /*\n this.total = {};\n if(this.allowedSick){\n this.total.sick = totalSick;\n }\n if(this.allowedVacation){\n this.total.vacation = totalVacation;\n }\n if(this.allowedPersonal){\n this.total.personal = totalPersonal;\n }\n if(this.allowedAlternate){\n this.total.alternate = totalAlternate;\n }\n */\n this.calBtnReset();\n\n\n //Stringify our object to use for comparisons when the user makes a new input\n //If there is a difference between lrDataString and lrNewDataString,\n //we can tell the user they have unsaved changes.\n this.dataString = JSON.stringify(this.data);\n this.newDataString = JSON.stringify(this.newData);\n }\n\n\n lrCalendar.prototype.generateDayInRange = function(year, month, day, dayOfWeek){\n var dayInRange = document.createElement('button');\n dayInRange.setAttribute('class', 'day in-month in-range');\n dayInRange.setAttribute('data-day-of-week', this.dayWords[dayOfWeek]);\n dayInRange.setAttribute('data-day', day);\n dayInRange.setAttribute('data-month',month);\n dayInRange.setAttribute('data-year', year);\n dayInRange.setAttribute('data-full-date', this.fullDateString(year, month, day));\n dayInRange.addEventListener('click', this.dateClick.bind(this));\n return dayInRange; \n }\n\n\n lrCalendar.prototype.generateLrCalSplit = function(){\n //This generates a split month view showing a pay period which spans over two months.\n //BUFFER - date numbering starts at a week before the pay period starts PLUS any days preceeding it in the given week.\n\n var sameWeekBefore = this.start.dayOfWeek;\n var splitStart = this.start.day - (7 + sameWeekBefore);\n //set prevStart to true if numbering needs to begin in the month preceeding the start month\n //this is a safety just in case a pay period is long enough to span two months but its starting date\n //doesn't have enough leading dates to allow the buffer specified above.\n var prevStart;\n\n if(splitStart === 0){\n splitStart = this.start.prevMonthLength;\n prevStart = true;\n } else if(splitStart < 0){\n var x = Math.abs(Num(splitStart));\n splitStart = this.start.prevMonthLength - x;\n prevStart = true;\n }\n\n //set limit to true when end of start month is reached\n //set complete to true when final pay period date is rendered\n var limit;\n var complete;\n\n var lrCal = document.createElement('div');\n var dayLabelRow = document.createElement('div');\n lrCal.appendChild(dayLabelRow);\n dayLabelRow.setAttribute('class', 'grid-x');\n\n for (var i = 0; i < this.dayLabels.length; i++){\n var cell = document.createElement('div');\n cell.setAttribute('class', 'cell auto');\n var dayLabel = document.createElement('div');\n dayLabel.setAttribute('class', 'day day-label');\n dayLabel.textContent = this.dayLabels[i];\n cell.appendChild(dayLabel);\n dayLabelRow.appendChild(cell);\n }\n \n var counter = 0;\n var days = splitStart;\n var overflow = 1;\n\n for(var i = 0; i < 9; i++){\n\n var week = document.createElement('div');\n lrCal.appendChild(week);\n week.setAttribute('class', 'grid-x');\n\n for(var j = 0; j <= 6; j++){\n var cell = document.createElement('div');\n cell.setAttribute('class', 'cell auto');\n var day;\n\n if(i === 0){\n day = document.createElement('div');\n day.setAttribute('class', 'day in-month out-range');\n day.textContent = days++;\n if(prevStart && days >= this.start.prevMonthLength){\n days = 1;\n prevStart = false;\n }\n } else if(i === 1){\n if(counter < this.start.dayOfWeek){\n day = document.createElement('div');\n day.setAttribute('class', 'day in-month out-range');\n day.textContent = days++;\n if(prevStart && days >= this.start.prevMonthLength){\n days = 1;\n prevStart = false;\n } else if(!limit && days > this.start.monthLength){\n days = 1;\n limit = true;\n }\n } else {\n day = this.generateDayInRange(this.start.year, this.start.month, days, j);\n day.textContent = days++;\n if(!limit && days > this.start.monthLength){\n days = 1;\n limit = true;\n }\n }\n counter++;\n } else {\n if(!limit && this.start.day <= days){\n day = this.generateDayInRange(this.start.year, this.start.month, days, j);\n day.textContent = days++;\n if(prevStart && days >= this.start.prevMonthLength){\n days = 1;\n prevStart = false;\n } else if(!limit && days > this.start.monthLength){\n days = 1;\n limit = true;\n }\n }else if(limit && days <= this.end.day){\n day = this.generateDayInRange(this.end.year, this.end.month, days, j);\n day.textContent = days++;\n } else if(limit && days <= this.end.monthLength) {\n day = document.createElement('div');\n day.setAttribute('class', 'day in-month out-range');\n day.textContent = days++;\n } else {\n day = document.createElement('div');\n day.setAttribute('class', 'day out-month out-range');\n day.textContent = overflow++;\n }\n }\n\n cell.appendChild(day);\n week.appendChild(cell);\n }\n\n //print out an empty week following pay period end\n if(complete) break;\n if(limit && days > this.end.day){\n complete = true;\n }\n \n }\n return lrCal;\n\n }\n\n\n lrCalendar.prototype.generateLrCalSingle = function(){\n\n var lrCal = document.createElement('div');\n var dayLabelRow = document.createElement('div');\n lrCal.appendChild(dayLabelRow);\n dayLabelRow.setAttribute('class', 'grid-x');\n\n for (var i = 0; i < this.dayLabels.length; i++){\n var cell = document.createElement('div');\n cell.setAttribute('class', 'cell auto');\n var dayLabel = document.createElement('div');\n dayLabel.setAttribute('class', 'day day-label');\n dayLabel.textContent = this.dayLabels[i];\n cell.appendChild(dayLabel);\n dayLabelRow.appendChild(cell);\n }\n\n var counter = 0;\n var days = 1;\n var overflow = 1;\n\n for(var i = 0; i < 9; i++){\n\n var week = document.createElement('div');\n lrCal.appendChild(week);\n week.setAttribute('class', 'grid-x');\n\n for(var j = 0; j <= 6; j++){\n var cell = document.createElement('div');\n cell.setAttribute('class', 'cell auto');\n var day;\n\n if(i === 0){\n if(this.start.monthFirstDayOfWeek > counter){\n day = document.createElement('div');\n day.setAttribute('class', 'day out-month out-range');\n day.textContent = (this.start.prevMonthLength - this.start.monthFirstDayOfWeek) + counter + 1;\n } else if(this.start.day <= days && days <= this.end.day) {\n day = this.generateDayInRange(this.start.year, this.start.month, days, j);\n day.textContent = days++;\n } else {\n day = document.createElement('div');\n day.setAttribute('class', 'day in-month out-range');\n day.textContent = days++;\n }\n } else {\n if(days > this.start.monthLength){\n day = document.createElement('div');\n day.setAttribute('class', 'day out-month out-range');\n day.textContent = overflow++;\n } else if(this.start.day <= days && days <= this.end.day){\n day = this.generateDayInRange(this.end.year, this.end.month, days, j);\n day.textContent = days++;\n } else {\n day = document.createElement('div');\n day.setAttribute('class', 'day in-month out-range');\n day.textContent = days++;\n }\n }\n\n cell.appendChild(day);\n week.appendChild(cell);\n counter++;\n }\n if (days > this.end.monthLength) break;\n }\n return lrCal;\n } \n\n lrCalendar.prototype.generateLrSave = function(){\n this.saveBtn = document.createElement('button');\n this.saveBtn.setAttribute('class', 'button disabled');\n this.saveBtn.id = 'lr-btn-save';\n this.saveBtn.setAttribute('disabled', '');\n this.saveBtn.textContent = 'Save';\n this.saveBtn.addEventListener('click', this.updateEntryHoursClick.bind(this));\n return this.saveBtn;\n }\n\n lrCalendar.prototype.generateLrCal = function(){\n this.calWrap = document.createElement('div');\n var monthHeading = document.createElement('h4');\n monthHeading.textContent = this.start.monthShort + ' ' + this.start.day + ' \\u2013 ' + this.end.monthShort + ' ' + this.end.day;\n this.calWrap.appendChild(monthHeading);\n\n var monthNum = 1;\n var lrCal;\n\n if(this.end.month !== this.start.month){\n monthNum = 2;\n }\n\n if(monthNum > 1){\n lrCal = this.generateLrCalSplit(); \n } else {\n lrCal = this.generateLrCalSingle();\n }\n\n //Now that we have the calendar returned to lrCal, establish the button array to use for navigation\n this.calBtns = lrCal.querySelectorAll('button');\n\n this.calWrap.appendChild(lrCal);\n\n return this.calWrap;\n }\n\n lrCalendar.prototype.generateLrStartMessage = function(){\n this.startMessage = document.createElement('div');\n this.startMessage.id = 'lr-start-message';\n this.startMessage.textContent = 'Select a date to begin.';\n return this.startMessage;\n }\n\n lrCalendar.prototype.makeNavBtn = function(id, icon){\n var btn = document.createElement('button');\n btn.id = id;\n btn.classList.add('lr-nav');\n var btnSpan = document.createElement('span');\n btnSpan.classList.add(icon);\n btn.appendChild(btnSpan);\n btn.addEventListener('click', this.dateClick.bind(this));\n return btn;\n }\n\n lrCalendar.prototype.makeInput = function(labelText){\n var inputLine = document.createElement('div');\n inputLine.classList.add('lr-input-line');\n var label = document.createElement('label');\n label.setAttribute('for', 'lr-input-' + labelText);\n var labelTxt = labelText + \" time:\";\n labelTxt = labelTxt.charAt(0).toUpperCase() + labelTxt.slice(1);\n label.textContent = labelTxt;\n var input = document.createElement('input');\n input.id = \"lr-input-\" + labelText;\n input.setAttribute('type', 'text');\n input.addEventListener('paste', this.inputPaste.bind(this));\n input.addEventListener('keydown', this.inputKeyDown.bind(this));\n input.addEventListener('input', this.inputChange.bind(this));\n inputLine.appendChild(label);\n inputLine.appendChild(input);\n if(labelText === 'vacation'){\n input.setAttribute('data-time-type', 'vacation');\n this.inputs.vacation = input;\n }\n if(labelText === 'sick'){\n input.setAttribute('data-time-type', 'sick');\n this.inputs.sick = input;\n }\n if(labelText === 'personal'){\n input.setAttribute('data-time-type', 'personal');\n this.inputs.personal = input;\n }\n if(labelText === 'alternate'){\n input.setAttribute('data-time-type', 'alternate');\n this.inputs.alternate = input;\n }\n return inputLine;\n }\n\n lrCalendar.prototype.generateLrInputs = function(){\n this.inputWrap = document.createElement('div');\n this.inputWrap.id = 'lr-input-wrap';\n\n this.prevBtn = this.makeNavBtn('lr-prev', 'dripicons-chevron-left');\n this.inputWrap.appendChild(this.prevBtn);\n this.nextBtn = this.makeNavBtn('lr-next', 'dripicons-chevron-right');\n this.inputWrap.appendChild(this.nextBtn);\n\n this.inputUpdate = document.createElement('div');\n this.inputUpdate.id = \"lr-input-update\";\n\n this.inputHeading = {};\n this.inputHeading.el = document.createElement('div');\n this.inputHeading.el.id = \"lr-input-heading\";\n var hTag = document.createElement('h4');\n this.inputHeading.dayOfWeek = document.createElement('span');\n this.inputHeading.dayOfWeek.setAttribute('data-day-of-week', '');\n var tNode1 = document.createTextNode(', ');\n this.inputHeading.month = document.createElement('span');\n this.inputHeading.month.setAttribute('data-month', '');\n var tNode2 = document.createTextNode(' ');\n this.inputHeading.day = document.createElement('span');\n this.inputHeading.day.setAttribute('data-day', '');\n var tNode3 = document.createTextNode(', ');\n this.inputHeading.year = document.createElement('span');\n this.inputHeading.year.setAttribute('data-year', '');\n hTag.appendChild(this.inputHeading.dayOfWeek);\n hTag.appendChild(tNode1);\n hTag.appendChild(this.inputHeading.month);\n hTag.appendChild(tNode2);\n hTag.appendChild(this.inputHeading.day);\n hTag.appendChild(tNode3);\n hTag.appendChild(this.inputHeading.year);\n this.inputHeading.el.appendChild(hTag);\n this.inputUpdate.appendChild(this.inputHeading.el);\n\n this.inputs = {};\n this.inputs.el = document.createElement('div');\n this.inputs.el.id = \"lr-inputs\";\n\n\n if(this.allowedSick)\n this.inputs.el.appendChild(this.makeInput('sick'));\n if(this.allowedVacation)\n this.inputs.el.appendChild(this.makeInput('vacation'));\n if(this.allowedPersonal)\n this.inputs.el.appendChild(this.makeInput('personal'));\n if(this.allowedAlternate)\n this.inputs.el.appendChild(this.makeInput('alternate'));\n\n\n this.inputUpdate.appendChild(this.inputs.el);\n this.inputWrap.appendChild(this.inputUpdate);\n\n var statusWrap = document.createElement('div');\n statusWrap.id = 'lr-change-status-wrap';\n this.changeStatus = {};\n this.changeStatus.el = document.createElement('div');\n this.changeStatus.el.id = 'lr-change-status';\n this.changeStatus.icon = document.createElement('span');\n this.changeStatus.icon.id = 'lr-change-status-icon'\n this.changeStatus.icon.setAttribute('class', 'fl-warning dripicons-warning');\n this.changeStatus.text = document.createElement('span');\n this.changeStatus.text.id = 'lr-change-status-text';\n this.changeStatus.text.textContent = 'You have unsaved changes.';\n this.changeStatus.el.appendChild(this.changeStatus.icon);\n this.changeStatus.el.appendChild(this.changeStatus.text);\n statusWrap.appendChild(this.changeStatus.el);\n this.inputWrap.appendChild(statusWrap);\n\n //if(!this.allowedVacation && !this.allowedSick && !this.allowedPersonal && !this.allowedAlternate)\n //looks like you aren't allowed to log any time off!\n //don't need to add this though since users not eligible for time off will never be able to activate this popup area.\n\n //hide inputs initially so start message can display alone\n $(this.inputWrap).hide();\n return this.inputWrap;\n }\n\n\nfunction lrReportTimeClick(e){\n\n e.preventDefault();\n var lrLoader = new ajaxLoader($('#node-5746'));\n var trigger = e.currentTarget ? e.currentTarget : document.body;\n\n lrCurrentCalObject = new lrCalendar(trigger);\n\n $.ajax({\n method: \"GET\",\n url: \"/asyncloader/GetEntity/686/TRUE\",\n dataType: \"json\"\n }).done(function (data) {\n\n //console.log(data);\n lrReportTimeCalendar.appendChild(lrCurrentCalObject.generateLrCal());\n lrInputArea.appendChild(lrCurrentCalObject.generateLrInputs());\n lrInputArea.appendChild(lrCurrentCalObject.generateLrStartMessage());\n lrBtnSet.appendChild(lrCurrentCalObject.generateLrSave());\n lrCurrentCalObject.generateLrData(data);\n\n lrLoader.remove();\n $(lrReportTimePopup).foundation('open');\n\n\n }).fail(function () {\n //WS CALL FAILED\n\n lrLoader.remove();\n swal2(\"Currently Unavailable\", \"Please try again later.\", \"error\");\n\n });\n\n}\n\n\n//month argument is always the zero based index!\nlrCalendar.prototype.fullDateString = function(year, month, day){\n year = year.toString();\n month = Number(month) + 1;\n month = month.toString();\n if (month.length === 1) month = '0' + month;\n day = day.toString();\n if (day.length === 1) day = '0' + day;\n var date = year + '-' + month + '-' + day;\n return date;\n}\n\n\nlrCalendar.prototype.updateInputArea = function(btn){\n var trigger = btn;\n this.current = {};\n this.current.month = Number(trigger.getAttribute('data-month'));\n this.current.monthLong = this.monthLongList[(this.current.month)];\n this.current.day = Number(trigger.getAttribute('data-day'));\n this.current.year = Number(trigger.getAttribute('data-year'));\n this.current.dayOfWeek = trigger.getAttribute('data-day-of-week');\n this.current.fullDate = this.fullDateString(this.current.year, this.current.month, this.current.day);\n\n this.previous = {}\n this.next = {}\n\n //Determine Current, Previous, and Next\n for(var i = 0; i < this.calBtns.length; i++){\n if(this.calBtns[i].getAttribute('data-full-date') === this.current.fullDate){\n //CURRENT\n this.current.el = this.calBtns[i];\n if(!this.calBtns[i].classList.contains('active'))\n this.calBtns[i].classList.add('active');\n //PREVIOUS\n if(i - 1 < 0){\n //current is the base, So PREVIOUS needs to be the last index instead\n this.previous.el = this.calBtns[this.calBtns.length - 1];\n }else{\n this.previous.el = this.calBtns[i - 1];\n }\n //NEXT\n if(i + 1 === this.calBtns.length){\n //current is the last index, So NEXT needs to be the first index instead\n this.next.el = this.calBtns[0];\n }else{\n this.next.el = this.calBtns[i + 1];\n }\n continue;\n }\n this.calBtns[i].classList.remove('active');\n }\n /*\n console.log(this.previous.el);\n console.log(this.current.el);\n console.log(this.next.el);\n */\n\n this.prevBtn.setAttribute('data-year', this.previous.el.getAttribute('data-year'));\n this.prevBtn.setAttribute('data-month', this.previous.el.getAttribute('data-month'));\n this.prevBtn.setAttribute('data-day', this.previous.el.getAttribute('data-day'));\n this.prevBtn.setAttribute('data-day-of-week', this.previous.el.getAttribute('data-day-of-week'));\n this.prevBtn.setAttribute('data-full-date', this.previous.el.getAttribute('data-full-date'));\n\n this.nextBtn.setAttribute('data-year', this.next.el.getAttribute('data-year'));\n this.nextBtn.setAttribute('data-month', this.next.el.getAttribute('data-month'));\n this.nextBtn.setAttribute('data-day', this.next.el.getAttribute('data-day'));\n this.nextBtn.setAttribute('data-day-of-week', this.next.el.getAttribute('data-day-of-week'));\n this.nextBtn.setAttribute('data-full-date', this.next.el.getAttribute('data-full-date'));\n\n this.inputHeading.dayOfWeek.textContent = this.current.dayOfWeek;\n this.inputHeading.month.textContent = this.current.monthLong;\n this.inputHeading.day.textContent = this.current.day;\n this.inputHeading.year.textContent = this.current.year;\n\n //Look through this.newData array and look for the key matching the current fulldate\n //populate the inputs with the stored values based on what is allowed\n if(this.allowedVacation){\n if(this.newData[this.current.fullDate].vacation !== this.data[this.current.fullDate].vacation){\n this.inputs.vacation.classList.add('changed');\n }else{\n this.inputs.vacation.classList.remove('changed');\n }\n this.inputs.vacation.value = (this.newData[this.current.fullDate].vacation === 0) ? '' : this.newData[this.current.fullDate].vacation;\n }\n if(this.allowedSick){\n if(this.newData[this.current.fullDate].sick !== this.data[this.current.fullDate].sick){\n this.inputs.sick.classList.add('changed');\n }else{\n this.inputs.sick.classList.remove('changed');\n }\n this.inputs.sick.value = (this.newData[this.current.fullDate].sick === 0) ? '' : this.newData[this.current.fullDate].sick;\n }\n if(this.allowedPersonal){\n if(this.newData[this.current.fullDate].personal !== this.data[this.current.fullDate].personal){\n this.inputs.personal.classList.add('changed');\n }else{\n this.inputs.personal.classList.remove('changed');\n }\n this.inputs.personal.value = (this.newData[this.current.fullDate].personal) === 0 ? '' : this.newData[this.current.fullDate].personal;\n }\n if(this.allowedAlternate){\n if(this.newData[this.current.fullDate].alternate !== this.data[this.current.fullDate].alternate){\n this.inputs.alternate.classList.add('changed');\n }else{\n this.inputs.alternate.classList.remove('changed');\n }\n this.inputs.alternate.value = (this.newData[this.current.fullDate].alternate) === 0 ? '' : this.newData[this.current.fullDate].alternate;\n }\n}\n\n\n\nlrCalendar.prototype.dateClick = function(e){\n var btn = e.currentTarget;\n var firstInput = this.inputs.first ? this.inputs.first : document.querySelector('#lr-inputs input');\n var lastChanged = this.inputs.lastChanged ? this.inputs.lastChanged : undefined;\n var firstOfValue;\n var preSave;\n \n var keyboard = (document.documentElement.getAttribute('data-whatinput') === 'keyboard') ? true : false;\n var mouse = (document.documentElement.getAttribute('data-whatinput') === 'mouse') ? true : false;\n var inCal = btn.classList.contains('day');\n var inNav = btn.classList.contains('lr-nav');\n\n //is start message currently in DOM?\n // If so, remove it and then introduce the inputs and navigation\n var startMessage = document.querySelector(\"#lr-start-message\");\n if(startMessage){\n $(startMessage).fadeOut(300, function(){\n this.updateInputArea(btn);\n if(firstInput){\n var inputArray = document.querySelectorAll('#lr-inputs input');\n for(var i = 0; i < inputArray.length; i++){\n if(!firstOfValue && Number(inputArray[i].value) > 0)\n firstOfValue = inputArray[i];\n if(!preSave && inputArray[i].classList.contains('changed'))\n preSave = inputArray[i];\n }\n } \n this.startMessage.parentNode.removeChild(this.startMessage);\n $(this.inputWrap).fadeIn(300, function(){\n\n if(mouse && firstOfValue){\n firstOfValue.focus();\n }else if(keyboard && firstOfValue){\n firstOfValue.focus();\n }else if(keyboard && firstInput){\n firstInput.focus();\n }else{}\n\n });\n }.bind(this));\n } else {\n //no start message, so we can just update the internals\n $(this.inputUpdate).fadeOut(0, function(){\n this.updateInputArea(btn);\n if(firstInput){\n var inputArray = document.querySelectorAll('#lr-inputs input');\n for(var i = 0; i < inputArray.length; i++){\n if(!firstOfValue && Number(inputArray[i].value) > 0)\n firstOfValue = inputArray[i];\n if(!preSave && inputArray[i].classList.contains('changed'))\n preSave = inputArray[i];\n }\n } \n $(this.inputUpdate).fadeIn(0, function(){\n\n if(mouse && preSave){\n preSave.focus();\n }else if(mouse && lastChanged){\n lastChanged.focus();\n }else if(mouse && firstOfValue){\n firstOfValue.focus();\n }else if(keyboard && preSave && inCal){\n preSave.focus();\n }else if(keyboard && firstOfValue && inCal){\n firstOfValue.focus();\n }else if(keyboard && lastChanged && inCal){\n lastChanged.focus();\n }else if(keyboard && firstInput && inCal){\n firstInput.focus();\n } else{}\n\n });\n }.bind(this)); \n }\n //update date and all inputs\n \n}\n\n\nlrCalendar.prototype.inputKeyDown = function(e){\n var allowedKeys = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 110, 190, 38, 40];\n var allowedFunction = [8, 9, 37, 39, 8, 45, 46]\n var charCode = (e.which) ? e.which : e.keyCode;\n if(allowedFunction.indexOf(charCode) !== -1){\n return\n }\n\n if(allowedKeys.indexOf(charCode) !== -1){\n //console.log(charCode);\n //console.log(allowedKeys.indexOf(charCode));\n\n //User entered 0-9 or a decimal point\n var input = e.currentTarget;\n var value = input.value;\n var hasDecimal = (value.indexOf('.') !== -1) ? true : null;\n var decimalAt = (value.indexOf('.') !== -1) ? value.indexOf('.') : null;\n\n if(charCode == 38){\n e.preventDefault();\n var tempVal = Number(input.value);\n if(!tempVal){\n tempVal = 0;\n }\n tempVal = tempVal + 1;\n tempVal = tempVal.toFixed(2);\n if(tempVal.charAt(tempVal.length - 1) === '0'){\n tempVal = tempVal.slice(0, -1); \n }\n\n if(Number(tempVal) % 1 === 0){\n tempVal = Number(tempVal) / 1;\n }\n input.value = tempVal;\n this.inputChange(e);\n return;\n }\n if(charCode == 40){\n e.preventDefault();\n var tempVal = Number(input.value) - 1;\n if(tempVal >= 0){\n tempVal = tempVal.toFixed(2);\n if(tempVal.charAt(tempVal.length - 1) === '0'){\n tempVal = tempVal.slice(0, -1); \n }\n\n if(Number(tempVal) % 1 === 0){\n tempVal = Number(tempVal) / 1;\n }\n input.value = tempVal;\n this.inputChange(e);\n }\n return;\n }\n\n if(value.length === 1 && (value.indexOf('0') !== -1) && (charCode == 48 || charCode == 96)){\n e.preventDefault();\n }\n if (charCode == 110 || charCode == 190){\n if(hasDecimal) e.preventDefault();\n } else {\n\n if(hasDecimal && (decimalAt + 2) === (value.length - 1) && input.selectionStart >= (value.length - 2)){\n e.preventDefault();\n }\n }\n\n } else{\n e.preventDefault();\n }\n\n}\n\n\nlrCalendar.prototype.createTimeEntry = function(date){\n var timeEntry = {};\n timeEntry.VacationHours = this.data[date].vacation ? this.data[date].vacation : 0;\n timeEntry.SickHours = this.data[date].sick ? this.data[date].sick : 0;\n timeEntry.PersonalHours = this.data[date].personal ? this.data[date].personal : 0;\n timeEntry.AlternateHours = this.data[date].alternate ? this.data[date].alternate : 0;\n\n timeEntry.SeqNo = this.seqNo;\n timeEntry.EntryDate = moment(date, \"YYYY-MM-DD\").format(\"MM/DD/YYYY\").toString();\n timeEntry.PositionID = this.positionNumber;\n timeEntry.Suffix = this.suffix;\n\n this.timeEntryArray.push(timeEntry);\n\n return timeEntry;\n}\n\n\nlrCalendar.prototype.getTimeEntry = function(date){\n var timeEntry;\n\n for(var i = 0; i < this.timeEntryArray.length; i++){\n if(this.timeEntryArray[i].EntryDate === (moment(date, \"YYYY-MM-DD\").format(\"MM/DD/YYYY\").toString())){\n timeEntry = this.timeEntryArray[i];\n break;\n }\n }\n\n return timeEntry;\n}\n\n\nlrCalendar.prototype.getTimeEntryIndex = function(date){\n var entryIndex;\n var entryFound;\n\n for(var i = 0; i < this.timeEntryArray.length; i++){\n if(this.timeEntryArray[i].EntryDate === (moment(date, \"YYYY-MM-DD\").format(\"MM/DD/YYYY\").toString())){\n entryIndex = i;\n entryFound = true;\n break;\n }\n }\n if(!entryFound){\n entryIndex = -1;\n }\n\n return entryIndex;\n}\n\n\nlrCalendar.prototype.inputPaste = function(e){\n e.preventDefault();\n}\n\n\nlrCalendar.prototype.inputChange = function(e){\n //Store Data in NEW data object\n //Stringify this object and compare to starting object\n //if different, display message active and enable save button\n //if same and message exists, remove show message and disable save button\n //if active, hide and then remove active\n\n //separately, if input value is different than stored original input value\n //add changed class to day in calendar\n //if the same, make sure day doesnt have changed class\n\n var input = e.currentTarget;\n var newValue = Number(input.value);\n if(isNaN(newValue)) newValue = 0;\n var oldValue;\n var date = this.current.fullDate;\n\n //need to declare. These will be initialized later if user is eligible for that type of time.\n var oldVacation;\n var oldSick;\n var oldPersonal;\n var oldAlternate;\n var newVacation;\n var newSick;\n var newPersonal;\n var newAlternate;\n\n if(this.allowedVacation) oldVacation = this.data[date].vacation;\n if(this.allowedSick) oldSick = this.data[date].sick;\n if(this.allowedPersonal) oldPersonal = this.data[date].personal;\n if(this.allowedAlternate) oldAlternate = this.data[date].alternate;\n\n var timeType = input.getAttribute('data-time-type');\n\n switch (timeType) {\n case 'vacation':\n oldValue = this.data[date].vacation;\n this.newData[date].vacation = newValue;\n break;\n case 'sick':\n oldValue = this.data[date].sick;\n this.newData[date].sick = newValue;\n break;\n case 'personal':\n oldValue = this.data[date].personal;\n this.newData[date].personal = newValue;\n break;\n case 'alternate':\n oldValue = this.data[date].alternate;\n this.newData[date].alternate = newValue;\n break;\n default:\n //Not found\n }\n\n if(this.allowedVacation) newVacation = this.newData[date].vacation;\n if(this.allowedSick) newSick = this.newData[date].sick;\n if(this.allowedPersonal) newPersonal = this.newData[date].personal;\n if(this.allowedAlternate) newAlternate = this.newData[date].alternate;\n\n this.newDataString = JSON.stringify(this.newData);\n\n var statusActive = (this.changeStatus.el.classList.contains('active')) ? true : false;\n\n if(this.dataString !== this.newDataString){\n //There has been a change\n //console.log(this.newData);\n if(this.changeStatus.type !== 'unsaved'){\n this.changeStatus.type = 'unsaved';\n this.changeStatus.text.textContent = 'You have unsaved changes.';\n this.changeStatus.icon.setAttribute('class', 'fl-warning dripicons-warning');\n }\n if(!statusActive){\n this.changeStatus.el.classList.add('active');\n }\n this.saveBtn.classList.remove('disabled');\n this.saveBtn.removeAttribute('disabled');\n\n }else{\n //No change, or returned back to normal\n if(statusActive){\n this.changeStatus.el.classList.remove('active');\n this.saveBtn.classList.add('disabled');\n this.saveBtn.setAttribute('disabled', '');\n }else{\n }\n }\n\n this.inputs.lastChanged = input;\n\n //establish time entry. if not there yet, create it.\n var timeEntry = this.getTimeEntry(this.current.fullDate) ? this.getTimeEntry(this.current.fullDate) : this.createTimeEntry(this.current.fullDate);\n\n //console.log('New Value: ' + newValue);\n //console.log('Old Value: ' + oldValue);\n if(newValue !== oldValue){\n\n //update timeEntry to newValue\n switch (timeType) {\n case 'vacation':\n timeEntry.VacationHours = newValue;\n break;\n case 'sick':\n timeEntry.SickHours = newValue;\n break;\n case 'personal':\n timeEntry.PersonalHours = newValue;\n break;\n case 'alternate':\n timeEntry.AlternateHours = newValue;\n break;\n default:\n }\n \n //only focus on the current input type (sick/vacation/personal/alternate) and update that value to the new value.\n this.current.el.classList.add('changed');\n input.classList.add('changed');\n }else{\n\n //change timeEntry back to oldValue\n switch (timeType) {\n case 'vacation':\n timeEntry.VacationHours = oldValue;\n break;\n case 'sick':\n timeEntry.SickHours = oldValue;\n break;\n case 'personal':\n timeEntry.PersonalHours = oldValue;\n break;\n case 'alternate':\n timeEntry.AlternateHours = oldValue;\n break;\n default:\n }\n\n if(oldVacation === newVacation && oldSick === newSick && oldPersonal === newPersonal && oldAlternate === newAlternate){\n this.current.el.classList.remove('changed');\n if(this.dataString === this.newDataString) this.inputs.lastChanged = null;\n //timeEntry has been completely reverted to what is currently posted in Banner\n //Delete timeEntry from array\n this.timeEntryArray.splice(this.getTimeEntryIndex(this.current.fullDate), 1);\n } \n input.classList.remove('changed');\n }\n //console.log(this.timeEntryArray);\n}\n\n\nlrCalendar.prototype.removeFromDom = function(){\n this.calWrap.parentNode.removeChild(this.calWrap);\n this.inputWrap.parentNode.removeChild(this.inputWrap);\n var startMessage = document.querySelector(\"#lr-start-message\");\n if(startMessage) this.startMessage.parentNode.removeChild(this.startMessage);\n this.saveBtn.parentNode.removeChild(this.saveBtn);\n}\n\n\n//Refresh Node for a specific position & pay period\nfunction lrUpdateNode(periodElement, callBack){\n if(lrCurrentCalObject){ \n \t//var popupLoader = new ajaxLoader($('#report-time-popup'));\n }\n\n var nodeLoader = new ajaxLoader($('#node-5746'));\n var positionNumber = periodElement.getAttribute('data-position-number');\n var payNumber = Number(periodElement.getAttribute('data-pay-number'));\n\n var seqNo;\n var payPeriod;\n var newReturnFocus;\n var status = 'Error';\n var statusInd = 'E';\n \n var statusText = periodElement.querySelector('[data-status-text]');\n var sickEl = periodElement.querySelector('[data-total-sick]');\n var vacationEl = periodElement.querySelector('[data-total-vacation]');\n var personalEl = periodElement.querySelector('[data-total-personal]');\n var alternateEl = periodElement.querySelector('[data-total-alternate]');\n var submitBtn = periodElement.querySelector('[data-submit-btn]');\n\n var totalSick = 0;\n var totalVacation = 0;\n var totalPersonal = 0;\n var totalAlternate = 0;\n \n //Verify everything worked with AJAX to Banner\n $.ajax({\n method: \"GET\",\n url: \"/asyncloader/GetEntity/686/TRUE\",\n dataType: \"json\"\n }).done(function (data) {\n\n //console.log(data);\n\n //JOB\n for(var i = 0; i < data.length; i++){\n \tvar thisJob = data[i];\n\n if(thisJob.PositionNumber === positionNumber){\n\n //PAY PERIOD\n for(var j = 0; j < thisJob['Leave_by_Job'].length; j++){\n \tvar thisPayPeriod = thisJob['Leave_by_Job'][j];\n\n if(thisPayPeriod.Pay_Number === payNumber){\n\n\t\t\t payPeriod = thisPayPeriod.PayPeriod;\n\t\t\t seqNo = thisPayPeriod['Time_Entry'][0].JOB_SEQNO ? thisPayPeriod['Time_Entry'][0].JOB_SEQNO.toString() : 'NULL';\n\n\t\t\t //TIME ENTRY\n for(var k = 0; k < thisPayPeriod['Time_Entry'].length; k++){\n\n var thisTimeEntry = thisPayPeriod['Time_Entry'][k];\n var timeEntryType = thisTimeEntry['EARN_LONG_DESC'].toLowerCase();\n var timeEntryNum = Number(thisTimeEntry['EARN_CODE_HOURS']);\n\n //make sure this is truthy and not NaN, Undefined, or ''...\n if(timeEntryNum){\n \n if(timeEntryType.indexOf('sick') !== -1){\n totalSick += timeEntryNum;\n } else if(timeEntryType.indexOf('vacation') !== -1){\n totalVacation += timeEntryNum; \n } else if(timeEntryType.indexOf('personal') !== -1){\n totalPersonal += timeEntryNum; \n } else if(timeEntryType.indexOf('alternate') !== -1){\n totalAlternate += timeEntryNum; \n } else {}\n }\n \n }//End Loop through all time entries\n\n status = thisPayPeriod.Status;\n statusInd = thisPayPeriod.Status_Ind;\n break;//End Loop through all pay periods. We found the right one.\n }\n }\n\n break;//End Loop through all jobs. We found the right one.\n }\n }\n\n //update the hours that are displayed in this area\n if(sickEl) sickEl.textContent = totalSick;\n if(vacationEl) vacationEl.textContent = totalVacation;\n if(personalEl) personalEl.textContent = totalPersonal;\n if(alternateEl) alternateEl.textContent = totalAlternate;\n\n //update the status text and icon\n statusText.textContent = status;\n periodElement.setAttribute('data-status', status);\n periodElement.setAttribute('data-status-ind', statusInd);\n periodElement.setAttribute('data-seq-no', seqNo);\n //periodElement.setAttribute('data-pay-period', payPeriod);\n //maybe assign new url to review report buttons based off of new pay period\n submitBtn.setAttribute('data-seq-no', seqNo);\n\n \n\n\n if(lrCurrentCalObject){\n\t //If updating after final submission, reassign return focus from the popup\n\t if(statusInd === 'P' || statusInd === 'C'){\n\t\t lrCurrentCalObject.returnFocus = periodElement.querySelector('.accordion-title');\n\t }\n\t var popupSubmit = lrReportTimePopup.querySelector('[data-submit-btn]');\n\t if(popupSubmit){ \n\t \tpopupSubmit.setAttribute('data-seq-no', seqNo); \n\t }\n\t //lrCurrentCalObject.payPeriod = payPeriod;\n\t lrCurrentCalObject.seqNo = seqNo;\n\n lrCurrentCalObject.generateLrData(data);\n\t\t lrCurrentCalObject.updateInputArea(lrCurrentCalObject.current.el);\n //go ahead and update status message to success reset date classes. This must come after generateLrData and updateInputArea which are directly above.\n \n \n \n lrCurrentCalObject.saveBtn.setAttribute('disabled', '');\n\t\tlrCurrentCalObject.saveBtn.classList.add('disabled');\n\t\tlrCurrentCalObject.changeStatus.el.classList.add('active');\n\t\tlrCurrentCalObject.changeStatus.type = 'saved';\n\t\tlrCurrentCalObject.changeStatus.icon.setAttribute('class', 'fl-success dripicons-checkmark');\n\t\tlrCurrentCalObject.changeStatus.text.textContent = 'Your changes have been saved.';\n\t\t//popupLoader.remove();\n\t\t//Might need to focus on something here\n }\n\n nodeLoader.remove();\n if(callBack) callBack();\n\n\n }).fail(function () {\n //updating node failed, display error message for user.\n\n statusText.textContent = 'Error';\n periodElement.setAttribute('data-status', 'Error');\n periodElement.setAttribute('data-status-ind', 'E');\n //If the user is updating from the popup area and hit this error, the current stored returnFocus Element will not be accessible to them anymore. Reassign here.\n if(lrCurrentCalObject){\n lrCurrentCalObject.returnFocus = periodElement.querySelector('.accordion-title');\n //popupLoader.remove();\n }\n\n nodeLoader.remove();\n if(callBack) callBack();\n });\n\n}\n\n\n\n\n\nlrCalendar.prototype.updateEntryHoursClick = function(e){\n e.preventDefault();\n var clickedBtn = e.currentTarget;\n var loader = new ajaxLoader($('#report-time-popup'));\n freezeUser();\n\n \t //AJAX SUBMIT TIME ENTRY ARRAY\n $.ajax({\n method: \"POST\",\n url: \"/asyncloader/DoEntity/566\",\n dataType: \"json\",\n beforeSend: function(xhr){xhr.setRequestHeader('X-Token-Key', 'data');},\n data: {'data': this.timeEntryArray}\n }).done(function (data) {\n \t//console.log(data);\n \n //AJAX done, check for post success...\n if(data.Result === 'Success'){\n\n lrUpdateNode(this.periodEl, function(){\n loader.remove();\n thawUser();\n }.bind(loader));\n\n } else{\n loader.remove();\n thawUser();\n swal2(\"Error\", \"Unable to save your changes. Please try again.\", \"error\");\n }\n \n\n\n }.bind(this)).fail(function () {\n thawUser();\n swal2(\"Error\", \"Unable to save your changes. Please try again. Ajax Fail.\", \"error\");\n loader.remove();\n });\n \n\n}//END lrUpdateEntryHoursClick\n\n\n\nfunction lrSubmitReportClick(e){\n e.preventDefault();\n var clickedBtn = e.currentTarget;\n var returnFocus = clickedBtn;\n var seqNo = clickedBtn.getAttribute('data-seq-no');\n if(!seqNo){\n\tswal2(\"Error\", \"Your leave report can not be submitted at this time.\", \"error\");\n \treturn;\n }\n\n var loader;\n var passwordInput;\n\n swal2Btns({\n customClass: 'lrSubmitAlert',\n title: 'Leave Report Confirmation',\n text: 'Enter your FlashLine password to submit your leave report.',\n type: 'info',\n confirmButtonText: \"Submit\",\n input: 'password',\n inputPlaceholder: 'Enter your password',\n inputAttributes: {\n autocapitalize: 'off',\n autocorrect: 'off'\n },\n onBeforeOpen: function onBeforeOpen() {\n sweetAlertCustom();\n passwordInput = document.querySelector('.lrSubmitAlert input[type=\"password\"]');\n passwordInput.removeAttribute('disabled');\n },\n showLoaderOnConfirm: true,\n preConfirm: function () {\n return new Promise(function (resolve) {\n sweetAlertUseBallFall();\n passwordInput.setAttribute('disabled', '');\n var passwordEncoded = window.btoa(passwordInput.value);\n freezeUser();\n\n // AJAX CHECK PASSWORD\n $.ajax({\n method: \"POST\",\n url: \"/asyncloader/password-check\",\n dataType: \"json\",\n beforeSend: function(xhr){xhr.setRequestHeader('X-Token-Key', 'data');},\n data: {\n \"data\": passwordEncoded\n }\n }).done(function (data) {\n\n \t//console.log(data);\n\n //AJAX done, check for post success...\n if(data.Result === 'Success'){\n\n //Password verified\n\n //now AJAX SUBMIT LEAVE REPORT\n $.ajax({\n method: \"POST\",\n url: \"/asyncloader/DoEntity/571\",\n dataType: \"json\",\n beforeSend: function(xhr){xhr.setRequestHeader('X-Token-Key', 'data');},\n data: {'data': seqNo}\n }).done(function (data) {\n thawUser();\n //AJAX done, check for post success...\n if(data.Result === 'Success'){\n swal2(\"Success\", \"Your leave report has been submitted.\", \"success\").then(function() { \n var periodElement = parentOfClass(clickedBtn, 'accordion-item');\n returnFocus = periodElement.querySelector('a.accordion-title');\n lrUpdateNode(periodElement);\n resolve(); \n });\n\n } else{\n swal2(\"Error\", \"Your leave report submission was not successful. Please try again later.\", \"error\").then(function() { resolve(); });\n }\n\n }).fail(function () {\n thawUser();\n swal2(\"Error\", \"Your leave report submission was not successful. Please try again later. Ajax Fail.\", \"error\").then(function() { resolve(); });\n });\n\n /*\n END of AJAX SUBMIT LEAVE REPORT\n */\n\n\n } else{\n //Password Auth 200 but did NOT return success message\n thawUser();\n swal2(\"Invalid Password\", \"Please try again.\", \"error\").then(function() { resolve(); });\n }\n\n }).fail(function () {\n //Password Auth AJAX Failed\n thawUser();\n swal2(\"Error\", \"Unable to validate password. Please try again. Ajax Fail.\", \"error\").then(function() { resolve(); });\n });\n\n /*\n END\n AJAX CHECK PASSWORD\n */\n\n });//Preconfirm Promise\n }//Closing Preconfirm function\n\n }).then(function() {\n\n //this finally executes once a resolve is hit.\n\n //Return Focus is only assigned if the submission was successful.\n //In that situation, the submit button that launched the module has been removed from the DOM. \n //So we need to send focus somewhere else...\n if(returnFocus){\n returnFocus.focus();\n }\n\n });\n\n}//END lrSubmitReportClick\n","class SwipeOutHunger {\n\n constructor(options){\n this.dropdownStart = 'max';//'min', 'max', or 'zero'\n //this.blockRequest = true;\n //options.data.BankEmpty = true;\n this.current = {};\n this.donate = {};\n this.request = {};\n this.error = {};\n this.env = KSU_EnvironmentHelper ? KSU_EnvironmentHelper.environment : null;\n this.refreshData(options.data);\n this.getElements();\n this.setListeners();\n this.start();\n }\n\n\n\n updateMealPlanTile(data) {\n if(!this.mealPlan.node) {\n //console.log('not here');\n return;\n }\n\n if(data.DonatePending) {\n let plural = data.DonatePending > 1;\n let message = \"*\" + data.DonatePending + \" pending donation\" + (plural ? \"s\" : \"\") + \" not reflected in total\";\n\n this.mealPlan.pendingMsg.textContent = message;\n \n this.mealPlan.node.classList.add('soh-pending');\n\n } else {\n this.mealPlan.node.classList.remove('soh-pending');\n }\n\n setTimeout(() => { \n let mealPlanFlipper = this.mealPlan.node.querySelector('.flipper');\n flipperForceResize(0, mealPlanFlipper);\n EventDispatcher.PackeryResize(this.mealPlan.node);\n\n }, 100);\n\n }\n\n //this is called in constructor and also when a successful POST is made to outsystems. The response will include new rawData. On success, freeze user, refresh data, and evaluatePlusUpdate\n refreshData(rawData){\n //console.log(rawData);\n\n if(rawData) {\n this.bankEmpty = rawData.BankEmpty;\n this.donateData = {};\n this.requestData = {};\n\n this.donateData.donated = 'Donated' in rawData ? rawData[\"Donated\"] : null;\n this.donateData.donatePending = 'DonatePending' in rawData ? rawData[\"DonatePending\"] : null;\n this.donateData.donateMax = 'DonateMax' in rawData ? rawData[\"DonateMax\"] : null;\n this.donateData.canDonate = 'CanDonate' in rawData ? rawData[\"CanDonate\"] : null;\n\n this.requestData.requestReceived = 'RequestReceived' in rawData ? rawData[\"RequestReceived\"] : null;\n this.requestData.requestPending = 'RequestPending' in rawData ? rawData[\"RequestPending\"] : null;\n this.requestData.requestMax = 'RequestMax' in rawData ? rawData[\"RequestMax\"] : null;\n this.requestData.canRequest = 'CanRequest' in rawData ? rawData[\"CanRequest\"] : null;\n\n\n this.data = Object.assign({}, this.donateData, this.requestData);\n } else {\n this.data = null;\n this.donateData = null;\n this.requestData = null;\n }\n\n }\n\n\n getElements(){\n this.node = document.getElementById('node-6061');\n this.flipper = this.node.querySelector('.flipper');\n this.superSelect = document.getElementById('soh-superselect');\n this.content = document.getElementById('soh-content');\n this.donate.extraInfo = {};\n this.donate.extraInfo.el = document.getElementById('soh-flipper-back-1');\n this.request.extraInfo = {};\n this.request.extraInfo.el = document.getElementById('soh-flipper-back-2');\n\n //There was uncertainty about the footer URL which is reused throughout piece\n this.footerLink = this.node.querySelector('.panel-footer a');\n\n if(this.footerLink) {\n this.footerLinkURL = this.footerLink.getAttribute('href');\n let sohFooterLinks = document.querySelectorAll('[data-url=\"soh-footer\"]');\n for(var i = 0; i < sohFooterLinks.length; i++){\n sohFooterLinks[i].setAttribute('href', this.footerLinkURL);\n }\n }\n\n this.donate.extraInfo.maxItems = this.donate.extraInfo.el.querySelectorAll('.soh-faq-max');\n this.donate.extraInfo.maxDt = this.donate.extraInfo.el.querySelector('.max-dt');\n this.donate.extraInfo.maxDd = this.donate.extraInfo.el.querySelector('.max-dd');\n this.request.extraInfo.maxItems = this.request.extraInfo.el.querySelectorAll('.soh-faq-max');\n this.request.extraInfo.maxDt = this.request.extraInfo.el.querySelector('.max-dt');\n this.request.extraInfo.maxDd = this.request.extraInfo.el.querySelector('.max-dd');\n this.mealPlan = {};\n this.mealPlan.node = document.getElementById('node-5556');\n this.mealPlan.pendingMsg = document.querySelector('#node-5556 .soh-pending-message');\n\n }\n\n setListeners(){\n this.superSelect.addEventListener('change', this.superSelectChange.bind(this));\n }\n\n disableAction(e) {\n e.preventDefault();\n e.stopPropagation();\n return false;\n }\n\n disableKeys(e) {\n let blockAction = false;\n let blockKeys;\n let pressedKey;\n\n if (e.key !== undefined) {\n //console.log(1);\n blockKeys = ['enter', ' '];\n pressedKey = e.key.toLowerCase();\n\n } else if (e.code !== undefined) {\n //console.log(2);\n blockKeys = ['enter', 'space'];\n pressedKey = e.code.toLowerCase();\n\n } else if (e.keyCode !== undefined) {\n //console.log(3);\n blockKeys = [13, 32];\n pressedKey = e.keyCode;\n }\n\n if(blockKeys.indexOf(pressedKey) !== -1){\n blockAction = true;\n //console.log('blocked key: ' + pressedKey);\n }\n\n if(blockAction){\n e.preventDefault();\n e.stopPropagation();\n return false;\n }\n return;\n }\n\n freezeNode() {\n this.node.addEventListener('keydown', this.disableKeys, true);\n this.node.addEventListener('keyup', this.disableKeys, true);\n this.node.addEventListener('mousedown', this.disableAction, true);\n this.node.addEventListener('click', this.disableAction, true);\n this.loader = new ajaxLoader(this.content);\n this.frozen = true;\n }\n\n thawNode() {\n this.loader.remove();\n this.frozen = false;\n this.node.removeEventListener('keydown', this.disableKeys, true);\n this.node.removeEventListener('keyup', this.disableKeys, true);\n this.node.removeEventListener('mousedown', this.disableAction, true);\n this.node.removeEventListener('click', this.disableAction, true);\n }\n\n\n\n\ndonationSuccessAlert(e) {\n this.donate.success = true;\n //console.log('Success Alert');\n //console.log(e);\n\n swal2Btns({\n confirmButtonText: \"Share\",\n focusConfirm: true,\n showConfirmButton: false,//Delete when ready for twitter\n focusCancel: true,//Delete when ready for twitter\n cancelButtonClass: 'button show-focus',//Delete when ready for twitter\n imageUrl: '/themes/custom/ksu_foundation/images/dining/swipe-out-hunger/squirrel-crown-nut.svg',\n imageAlt: 'Squirrel wearing a crown and holding an acorn.',\n customClass: 'soh-alert soh-donation-success',\n title: 'Thank you!',\n html: '
' + this.donate.postNum + ' guest meal' + (this.donate.postNumPlural ? 's have ' : ' has ') + 'been donated to help feed a fellow Flash. Your meal plan total will reflect your donation by tomorrow.
',\n onBeforeOpen: () => {\n sweetAlertCustom();\n\n //This is a hack to keep the swal showing after confirm button click\n let swalActions = document.querySelector('.soh-donation-success .swal2-actions');\n swalActions.addEventListener('click', function(e){\n if(e.target.classList.contains('swal2-confirm')){\n e.preventDefault();\n e.stopPropagation();\n window.open('https://twitter.com/', '_blank');\n return false;\n }\n }, true);\n\n }\n }).then((result) => {\n if(result.value) {\n //TWITTER\n //Fallback in case hack above fails\n window.open('https://twitter.com/', '_blank');\n }\n this.donate.resolve();\n });\n\n}\n\n\n\n\nareYouSureAlert(e) {\n\n this.donate.postNum = Number(this.donate.dropdown.value);\n this.donate.postNumPlural = this.donate.postNum !== 1;\n\n swal2Btns({\n confirmButtonText: \"Yes, donate \" + this.donate.postNum + \" guest meal\" + (this.donate.postNumPlural ? \"s\" : \"\"),\n focusConfirm: true,\n cancelButtonText: \"No\",\n imageUrl: '/themes/custom/ksu_foundation/images/dining/swipe-out-hunger/squirrel-crown-nut.svg',\n imageAlt: 'Squirrel wearing a crown and holding an acorn.',\n customClass: 'soh-alert soh-are-you-sure',\n title: 'You are about to donate ' + this.donate.postNum + \" guest meal\" + (this.donate.postNumPlural ? \"s\" : \"\"),\n html: '
' + (this.donate.postNumPlural ? \"These swipes \" : \"This swipe \") + 'will be removed from your guest meals total and will not affect your general meal swipes balance.
',\n showLoaderOnConfirm: true,\n preConfirm: () => {\n return new Promise((resolve) => {\n //use ball fall animation instead of spinner\n this.donate.resolve = resolve;\n sweetAlertUseBallFall();\n\n\n //Settimeout for testing only, use AJAX below instead\n //setTimeout( () => {\n //this.donationSuccessAlert(e);\n /*\n swal2(\"Error\", \"Your donation was not successful. Please try again later.\", \"error\").then(() => { \n console.info(\"Post response message not 'success'\");\n this.donate.resolve();\n });\n */\n\n /*\n swal2(\"Error\", \"Your donation was not successful. Please try again later.\", \"error\").then(() => { \n console.info(\"Post failed\");\n this.donate.resolve();\n });\n */\n //}, 3000);\n\n\n\n //console.log(this.donate.postNum);\n this.freezeNode();\n $.ajax({\n method: \"POST\",\n cache: false,\n url: \"/wse/do/812\",\n dataType: \"json\",\n headers: {\n 'X-Token-Quantity': this.donate.postNum\n },\n data: {}\n }).done((data) => {\n console.log(data);\n if(data.Result.WasSucessful){\n //This updates the piece without needing a browser refresh.\n this.updateMealPlanTile(data.Result);\n this.refreshData(data.Result);\n this.evaluatePlusUpdate();\n this.donationSuccessAlert(e);\n } else{\n swal2(\"Error\", \"Your donation was not successful. Please try again later.\", \"error\").then(() => { \n console.info(\"Post response message not 'success'\");\n this.donate.resolve();\n });\n }\n\n }).fail(() => {\n swal2(\"Error\", \"Your donation was not successful. Please try again later.\", \"error\").then(() => { \n console.info(\"Post failed\");\n this.donate.resolve();\n });\n });\n\n\n\n\n\n\n\n\n });//End of promise\n },\n onBeforeOpen: () => {\n sweetAlertCustom();\n if(document.activeElement) {\n this.returnFocus = document.activeElement ? document.activeElement : this.donate.submitBtn;\n document.activeElement.blur();\n }\n this.donate.success = null;\n }\n }).then((result) => {\n //THIS RUNS LAST ONCE A RESOLVE IS HIT\n if(this.frozen) this.thawNode();\n //console.log(result);\n if(this.donate.success) {\n this.returnFocus = this.superSelect.classList.contains('active') ? this.superSelect : document.querySelector('.superselect-item[data-val=\"donate\"]');\n }\n setTimeout(() => { \n this.returnFocus.focus();\n }, 100);\n\n\n });\n\n}\n\nbankEmptyAlert() {\n\n swal2Btns({\n confirmButtonText: \"More Information\",\n focusConfirm: true,\n imageUrl: '/themes/custom/ksu_foundation/images/dining/swipe-out-hunger/squirrel-crown-nut.svg',\n imageAlt: 'Squirrel wearing a crown and holding an acorn.',\n customClass: 'soh-alert soh-bank-empty',\n title: 'Check Back Soon!',\n html: '
We are building a bank of meal swipes that will be available to request.
',\n onBeforeOpen: () => {\n sweetAlertCustom();\n if(document.activeElement) {\n document.activeElement.blur();\n }\n this.superSelect.selectedIndex = 0;\n\n EventDispatcher.Custom({\n \"el\" : this.superSelect,\n \"event\" : \"change\"\n });\n\n //This is a hack to keep the swal showing after confirm button click\n let swalActions = document.querySelector('.soh-bank-empty .swal2-actions');\n swalActions.addEventListener('click', (e) => {\n if(e.target.classList.contains('swal2-confirm')){\n e.preventDefault();\n e.stopPropagation();\n window.open(this.footerLinkURL, '_blank');\n return false;\n }\n }, true);\n\n },\n onAfterClose: () => {\n //Accessibility, send back visible focus\n this.returnFocus = this.superSelect.classList.contains('active') ? this.superSelect : document.querySelector('.superselect-item[data-val=\"donate\"]');\n\n setTimeout(() => { \n this.returnFocus.focus();\n }, 100);\n }\n }).then((result) => {\n if(result.value) {\n //Fallback in case hack above fails\n window.open(this.footerLinkURL, '_blank');\n }\n\n });\n\n}\n\n//use bankEmptyAlert for now. If we need a custom message, we can define it here or in Drupal JS without needing a code promo.\nblockRequestAlert() {\n this.bankEmptyAlert();\n}\n\n\n start(){\n this.freezeNode();//thawed once initialized\n this.evaluatePlusUpdate();\n }\n\n //runs everytime Jared's SuperSelect is clicked, even if there is not a change\n superSelectChange(e){\n\n let selected = e.currentTarget.value.toLowerCase();\n\n\n //This blocks the REQUEST tab if blockRequest is true or if the meal bank is empty\n \n if (selected === 'request') {\n if (this.blockRequest) {\n this.blockRequestAlert();\n return;\n } else if (this.bankEmpty) {\n this.bankEmptyAlert();\n return;\n }\n }\n\n\n this.evaluatePlusUpdate();\n\n }\n\n\n donateDropdownChange(e){\n let selected = Number(e.currentTarget.value);\n\n this.donate.split2.textContent = (selected === 1) ? 'guest meal.' : 'guest meals.';\n \n if(selected){\n this.donate.dropdown.setCustomValidity(\"\");\n this.donate.submitBtn.classList.remove('disabled');\n this.donate.dropdown.classList.remove('fl-show-user');\n }else {\n this.donate.submitBtn.classList.add('disabled');\n }\n\n\n\n }\n\n\n\ndonateDropdownInvalidMsg(e) {\n //console.log(e);\n let selected = Number(e.currentTarget.value);\n if(!selected){\n e.currentTarget.setCustomValidity(\"Please select number of meals.\");\n e.currentTarget.classList.add('fl-show-user');\n }\n}\n\n\n donateFormSubmit(e){\n //console.log('donateFormSubmit');\n //console.log(e);\n e.preventDefault();\n e.stopPropagation();\n let selected = Number(this.donate.dropdown.value);\n\n if(selected){\n //TRIGGER CONFIRMATION SWEET ALERT\n this.areYouSureAlert(e);\n }\n\n return false;\n\n }\n\n\n extraInfoLink(backID){\n\n let link = document.createElement('a');\n link.href = \"#\";\n link.className = \"flip-to-back more-info-link dripicons-information\";\n link.setAttribute('data-swapcontent', backID);\n link.addEventListener('click', btnFlipToBack);\n return link;\n\n }\n\n\n\n\n buildDonate(data) {\n //Update back of flipper\n let maxPlural = data.donateMax > 1;\n this.donate.extraInfo.maxDt.textContent = data.donateMax + ' meal' + (maxPlural ? 's' : '');\n this.donate.extraInfo.maxDd.textContent = data.donateMax + ' guest meal' + (maxPlural ? 's' : '');\n\n if(data.donateMax) {\n for(var i = 0; i < this.donate.extraInfo.maxItems.length; i++) {\n this.donate.extraInfo.maxItems[i].style.display = '';\n }\n } else {\n for(var i = 0; i < this.donate.extraInfo.maxItems.length; i++) {\n this.donate.extraInfo.maxItems[i].style.display = 'none';\n }\n }\n\n\n let given = data.donated + data.donatePending;\n let hitMax = data.donateMax && data.donated >= data.donateMax;\n\n //Update Squirrel\n let squirrelSrc = \"/themes/custom/ksu_foundation/images/dining/swipe-out-hunger/\";\n if(given && data.canDonate) {\n squirrelSrc += \"squirrel-crown-nut.svg\";\n } else if(given && !data.canDonate) {\n squirrelSrc += \"squirrel-crown.svg\";\n }else if(data.canDonate) {\n squirrelSrc += \"squirrel-nut.svg\";\n } else {\n squirrelSrc += \"squirrel.svg\";\n }\n \n let el = document.createElement('div');\n el.setAttribute('data-donate', '');\n let row = document.createElement('div');\n row.className = \"grid-x grid-margin-x\";\n let left = document.createElement('div');\n left.className = \"cell left\";\n let squirrel = document.createElement('img');\n squirrel.className = \"squirrel\";\n squirrel.src = squirrelSrc;\n squirrel.alt = \"\";\n let right = document.createElement('div');\n right.className = \"cell right\";\n\n //given message\n let donatePlural = data.donated > 1;\n let pendingPlural = data.donatePending > 1;\n\n\n let givenEl;\n if(given){\n givenEl = document.createElement('div');\n givenEl.className = 'donate-history';\n if(hitMax) {\n givenEl.innerHTML = \"
\" + data.donated + \" meal\" + (donatePlural ? \"s have\" : \" has\") + \" been provided because of your donation!\";\n givenEl.appendChild(this.extraInfoLink('soh-flipper-back-1'));\n } else if (data.donated && data.donatePending) {\n givenEl.innerHTML = \"You have donated \" + data.donated + \" meal\" + (donatePlural ? \"s\" : \"\") + \" this semester. \" + data.donatePending + \" additional donation\" + (pendingPlural ? \"s are\" : \" is\") + \" still pending.\";\n } else if (data.donated) {\n givenEl.innerHTML = \"You have donated \" + data.donated + \" meal\" + (donatePlural ? \"s\" : \"\") + \" this semester.\";\n } else if (data.donatePending) {\n givenEl.innerHTML = \"You have \" + data.donatePending + \" pending meal donation\" + (pendingPlural ? \"s.\" : \".\");\n }\n\n }\n\n //can't donate message\n let cantEl;\n\n if( !data.canDonate && !hitMax) {\n let cantMsg;\n cantMsg = \"You cannot donate \" + (given ? \"any more \" : \"\") + \"meals at this time.\";\n\n cantEl = document.createElement('p');\n cantEl.innerHTML = cantMsg;\n cantEl.appendChild(this.extraInfoLink('soh-flipper-back-1'));\n\n }\n\n //Build donate form\n this.donate.form = null;\n if(data.canDonate){\n this.donate.form = document.createElement('form');\n this.donate.form.setAttribute('method', 'get');\n this.donate.form.setAttribute('action', '');\n let donateFieldSet = document.createElement('fieldset');\n this.donate.form.appendChild(donateFieldSet);\n let donateLegend = document.createElement('legend');\n donateLegend.className = 'aria-only';\n donateLegend.textContent = 'I want to donate guest meals';\n donateFieldSet.appendChild(donateLegend);\n let dropdownArea = document.createElement('div');\n dropdownArea.className = 'donate-drop-area';\n donateFieldSet.appendChild(dropdownArea);\n let span1 = document.createElement('span');\n span1.setAttribute('aria-hidden', 'true');\n span1.textContent = 'I want to donate';\n span1.className = 'highlight split-1';\n dropdownArea.appendChild(span1);\n let label = document.createElement('label');\n label.className = 'aria-only';\n label.setAttribute('for', 'soh-dropdown');\n label.textContent = 'How many guest meals you would like to donate?';\n dropdownArea.appendChild(label);\n this.donate.dropdown = document.createElement('select');\n this.donate.dropdown.id = 'soh-dropdown';\n\n let startPlural = true;\n\n for (let i = 0; i <= data.canDonate; i++) {\n let option = document.createElement(\"option\");\n\n\n\n switch (this.dropdownStart) {\n case 'zero':\n if(i === 0){\n option.setAttribute('selected', '');\n option.value = '';\n }else {\n option.value = i;\n }\n break;\n\n case 'min':\n if(i === 0) continue;\n if(i === 1) option.setAttribute('selected', '');\n option.value = i;\n startPlural = false;\n break;\n\n case 'max':\n default:\n if(i === 0) continue;\n if(i === data.canDonate) option.setAttribute('selected', '');\n option.value = i;\n\n }\n\n\n\n option.text = i;\n this.donate.dropdown.appendChild(option);\n }\n\n\n this.donate.dropdown.setAttribute('required', '');\n this.donate.dropdown.addEventListener('invalid', this.donateDropdownInvalidMsg);\n\n dropdownArea.appendChild(this.donate.dropdown);\n this.donate.dropdown.addEventListener('change', this.donateDropdownChange.bind(this));\n this.donate.split2 = document.createElement('span');\n this.donate.split2.setAttribute('aria-hidden', 'true');\n\n let split2Text = startPlural ? 'guest meals.' : 'guest meal.';\n this.donate.split2.textContent = split2Text;\n\n this.donate.split2.className = 'highlight split-2';\n dropdownArea.appendChild(this.donate.split2);\n dropdownArea.appendChild(this.extraInfoLink('soh-flipper-back-1'));\n\n let donateSubmitArea = document.createElement('div');\n donateFieldSet.appendChild(donateSubmitArea);\n donateSubmitArea.className = 'donate-button-area';\n this.donate.submitBtn = document.createElement('input');\n this.donate.submitBtn.setAttribute('type', 'submit');\n this.donate.submitBtn.value = 'Donate';\n this.donate.submitBtn.className = \"button\";\n if(this.dropdownStart === 'zero') this.donate.submitBtn.classList.add('disabled');\n\n this.donate.form.addEventListener('submit', this.donateFormSubmit.bind(this));\n donateSubmitArea.appendChild(this.donate.submitBtn);\n \n\n\n\n }\n \n el.appendChild(row);\n row.appendChild(right);\n row.appendChild(left);\n row.appendChild(right);\n left.appendChild(squirrel);\n if(givenEl) right.appendChild(givenEl);\n if(cantEl) right.appendChild(cantEl);\n if(this.donate.form) right.appendChild(this.donate.form);\n\n return el;\n }\n\n\n buildRequest(data) {\n //Update back of flipper\n let maxPlural = data.requestMax > 1;\n this.request.extraInfo.maxDt.textContent = data.requestMax + ' meal' + (maxPlural ? 's' : '');\n this.request.extraInfo.maxDd.textContent = data.requestMax + ' meal' + (maxPlural ? 's' : '');\n\n if(data.requestMax) {\n for(var i = 0; i < this.request.extraInfo.maxItems.length; i++) {\n this.request.extraInfo.maxItems[i].style.display = '';\n }\n } else {\n for(var i = 0; i < this.request.extraInfo.maxItems.length; i++) {\n this.request.extraInfo.maxItems[i].style.display = 'none';\n }\n }\n\n let el = document.createElement('div');\n el.setAttribute('data-request', '');\n\n let requestedPlural = Number(data.requestReceived) > 1;\n let pendingPlural = Number(data.requestPending) > 1;\n\n if(data.requestReceived || data.requestPending){\n let historyEl = document.createElement('p');\n historyEl.className = 'soh-history';\n if (data.requestReceived && data.requestPending) {\n historyEl.innerHTML = \"You have received \" + data.requestReceived + \" meal\" + (requestedPlural ? \"s\" : \"\") + \" this semester. \" + data.requestPending + \" additional request\" + (pendingPlural ? \"s are\" : \" is\") + \" still pending.\";\n } else if (data.requestReceived) {\n historyEl.innerHTML = \"You have received \" + data.requestReceived + \" meal\" + (requestedPlural ? \"s\" : \"\") + \" this semester.\";\n } else if (data.requestedPending) {\n historyEl.innerHTML = \"You have \" + data.requestPending + \" pending meal request\" + (pendingPlural ? \"s.\" : \".\");\n }\n\n el.appendChild(historyEl);\n }\n\n \n\n\n\n\n let overView = document.createElement('p');\n let link = this.extraInfoLink('soh-flipper-back-2');\n let hitMax = data.requestMax && data.requestReceived >= data.requestMax;\n\n if(data.requestPending || !data.canRequest){\n if(hitMax){\n overView.textContent = \"You have been awarded the maximum number of meals allowed per semester.\";\n \n } else if(data.requestPending){\n overView.textContent = \"We are processing your current request. Please check back later.\";\n \n }else {\n overView.textContent = \"You cannot request \" + (data.requestReceived || data.requestPending ? 'any more ' : '') + \"meals at this time.\";\n }\n overView.appendChild(link);\n el.appendChild(overView);\n \n } else {\n let canRequestPlural = Number(data.canRequested) > 1;\n overView.textContent = \"You are eligible to request meals! Complete the following questionnaire to submit your request.\";\n\n\n let buttonArea = document.createElement('div');\n buttonArea.className = 'button-area';\n this.request.surveyBtn = document.createElement('a');\n this.request.surveyBtn.textContent = 'Questionnaire';\n this.request.surveyBtn.setAttribute('role', 'button');\n this.request.surveyBtn.setAttribute('target', '_blank');\n\n let surveyURL;\n switch (this.env) {\n case 'prod':\n case 'preprod':\n surveyURL = 'https://apps.kent.edu/MealPlanSignUp/Questionaire.aspx';\n break;\n case 'test':\n surveyURL = 'https://appsqa.kent.edu/MealPlanSignUp/Questionaire.aspx';\n break;\n case 'dev':\n surveyURL = 'https://appsdev.kent.edu/MealPlanSignUp/Questionaire.aspx';\n break;\n default:\n console.log('Survey URL not established');\n }\n\n if(surveyURL) this.request.surveyBtn.setAttribute('href', surveyURL);\n \n this.request.surveyBtn.className = \"button\";\n\n\n overView.appendChild(link);\n el.appendChild(overView);\n buttonArea.appendChild(this.request.surveyBtn);\n el.appendChild(buttonArea);\n\n \n }\n\n \n\n\n return el;\n }\n\n buildError(data) {\n let el = document.createElement('div');\n el.setAttribute('data-error', '');\n let heading = document.createElement('h3');\n heading.textContent = 'Data Unavailable!';\n el.appendChild(heading);\n let overView = document.createElement('p');\n overView.textContent = \"Please check back later.\";\n el.appendChild(overView);\n return el;\n }\n\n //puts the appropriate content into the DOM. If element already in storage, use that. Otherwise, build a new component.\n drawContent(updateName, data) {\n this.content.innerHTML = '';\n\n this.current.name = updateName;\n this.current.data = data;\n\n let content;\n\n switch(this.current.name) {\n case ('error'):\n if(this.error.el && JSON.stringify(this.current.data) === JSON.stringify(this.error.data)) {\n content = this.error.el;\n } else {\n content = this.buildError(data);\n this.error.el = content;\n this.error.data = data;\n }\n break;\n\n case ('donate'):\n if(this.donate.el && JSON.stringify(this.current.data) === JSON.stringify(this.donate.data)) {\n content = this.donate.el;\n } else {\n content = this.buildDonate(data);\n this.donate.el = content;\n this.donate.data = data;\n }\n break;\n\n case ('request'):\n if(this.request.el && JSON.stringify(this.current.data) === JSON.stringify(this.request.data)) {\n content = this.request.el;\n } else {\n content = this.buildRequest(data);\n this.request.el = content;\n this.request.data = data;\n }\n \n break;\n default:\n }\n\n\n this.current.el = content;\n this.content.appendChild(content);\n }\n\n\n //Determines if view needs to be updated based on the current superselect value and available data.\n //returns boolean telling if update will occur\n evaluatePlusUpdate() {\n\n let currentName = this.current.name;\n let currentDataString = JSON.stringify(this.current.data);\n\n let newName = this.superSelect.value;\n let newData = (newName === 'donate') ? this.donateData : this.requestData;\n\n if(this.dataError(newName)) {\n newName = 'error';\n newData = null;\n }\n\n let newDataString = JSON.stringify(newData);\n \n if (currentName !== newName || currentDataString !== newDataString) {\n this.updateContent(newName, newData);\n //console.log('going to update');\n return true;\n } else {\n //console.log('nothing to update');\n if(this.frozen) this.thawNode();\n return false;\n }\n\n }\n\n\n //Fade out, replace content, fade back in\n updateContent(updateName, data){\n\n let firstFade = this.initialized ? 300 : 0;\n\n $(this.content).fadeOut(firstFade, function(){\n this.drawContent(updateName, data);\n this.content.style.visibility = 'hidden';\n this.content.style.display = 'block';\n\n setTimeout(function(){\n //https://css-tricks.com/does-flexbox-have-a-performance-problem/\n //this seems to let flexbox finish before resizing flipper\n\n flipperForceResize(300, this.flipper);\n this.content.style.display = 'none';\n this.content.style.visibility = 'visible';\n $(this.content).fadeIn(300, function(){\n //packery resize\n flipperForceResize(0, this.flipper);//double check\n EventDispatcher.PackeryResize(this.node);\n\n if(this.frozen) {\n this.thawNode();\n }\n\n \n if(!this.initialized) {\n //safety ensures there is no overlapping on initial pageload\n EventDispatcher.Custom({\n \"el\" : window,\n \"event\" : \"resize\"\n });\n //INSURANCE if this initializes before the needed images are loaded.\n window.addEventListener('load', function(){\n EventDispatcher.Custom({\n \"el\" : window,\n \"event\" : \"resize\"\n }); \n });\n\n EventDispatcher.NodeLoadedForTheFirstTime(this.node);\n this.initialized = true;\n }\n\n }.bind(this));\n\n }.bind(this), 200);\n \n \n }.bind(this));\n\n }\n\n\n hasNull(myObject){\n let hasNull = false;\n Object.keys(myObject).forEach(function (myValue) {\n //console.log(myValue); // key\n //console.log(myObject[myValue]); // value\n if (myObject[myValue] === null) hasNull = true;\n });\n return hasNull;\n }\n\n //Returns TRUE if there is not enough data to display the desired superselect value\n dataError(view){\n if(!this.data) return true;\n\n switch(view) {\n case 'donate':\n if (!this.donateData || this.hasNull(this.donateData)){\n return true;\n }\n break;\n case 'request':\n if (!this.requestData || this.hasNull(this.requestData)){\n return true;\n }\n break;\n default:\n }\n\n return false;\n\n }\n\n\n\n}//End of class\n","class Sspr {\n\n constructor(options){\n this.setData(options.data);\n this.swellHandler = this.swell.bind(this);\n\n //START\n this.mfaPrompt();\n }\n\n\n setData(data){\n\n \tthis.data = {};\n\n // \n this.data.mfa = (data && data.Mfa) ? data.Mfa : {};\n this.data.sspr = (data && data.Sspr) ? data.Sspr : {};\n\n console.log(\"in setdata\");\n console.log( this.data );\n }\n\n\n elementSwell(el){\n if(!el.classList.contains('swell-element')){\n el.classList.add('swell-element');\n }\n\n if(!el.hasAttribute('data-swell')){\n el.setAttribute('data-swell', '');\n el.addEventListener('transitionend', this.swellHandler);\n el.classList.add('swell');\n }\n }\n\n swell(e){\n e.currentTarget.removeEventListener('transitionend', this.swellHandler);\n e.currentTarget.classList.remove('swell');\n\n var outterEl = e.currentTarget;\n (function(innerEl){\n setTimeout(function(){\n innerEl.removeAttribute('data-swell');\n }.bind(this), 200);\n })(outterEl); \n \n }\n\n\n mfaPrompt(){\n //alert(\"here...\");\n\n // don't prompt for sspr until mfa is done.\n if(!this.data.mfa.showPrompt){\n console.info('Show MFA Prompt: ' + this.data.mfa.showPrompt);\n this.ssprPrompt();\n return;\n } else {\n\n console.log(\"Do not show mfa prompt.\" + this.data.mfa.showPrompt);\n }\n\n //Country Codes Required to build MFA prompt\n $.getJSON( '/asyncloader/getEntity/813', (data) => {\n this.countryCodes = data.Result;\n if(this.countryCodes) {\n console.log(\"All good, build mfa prompts\");\n this.mfa = {};\n this.mfaBuildStep1();\n this.mfaStep1();\n\n } else {\n console.info('No Country Code data!');\n console.info('MFA Prompt Canceled');\n this.ssprPrompt();\n }\n\n }).fail(() => {\n console.info('Country Code WS failed');\n console.info('MFA Prompt Canceled');\n this.ssprPrompt();\n }); \n\n }//END mfaPrompt\n\n\n assignPhonePlaceholder(e) {\n\n if(this.mfa.step1.els.countryCodeInput.options[this.mfa.step1.els.countryCodeInput.selectedIndex].getAttribute('data-abbr') === 'US') {\n this.mfa.step1.els.phoneInput.setAttribute('placeholder', 'ex. 330-672-3000');\n this.mfa.step1.els.phoneLabelAriaSpan.textContent = ' (including area code)';\n } else {\n this.mfa.step1.els.phoneInput.setAttribute('placeholder', '');\n this.mfa.step1.els.phoneLabelAriaSpan.textContent = '';\n }\n\n }\n\n\n mfaBuildStep1(){\n this.mfa.moreInfoString = 'For more information, see the
Multi-Factor Knowledge Base.';\n \tthis.mfa.step1 = {};\n this.mfa.step1.els = {};\n this.mfa.step1.els.form = document.createElement('form');\n this.mfa.step1.els.form.addEventListener('submit', this.mfaStep1Submit.bind(this), true);\n\n this.mfa.step1.els.heading = 'Guarantee Your FlashLine Access!';\n\n this.mfa.step1.els.instructionWrap = document.createElement('div');\n this.mfa.step1.els.instructionWrap.classList = 'swal-instruction';\n this.mfa.step1.els.form.appendChild(this.mfa.step1.els.instructionWrap);\n this.mfa.step1.els.instruction = document.createElement('p');\n if(this.data.mfa.revalidate){\n this.mfa.step1.els.instruction.textContent = 'Please confirm we have your correct cell phone number for Multi-Factor Authentication (MFA). Using your phone number as an MFA option is the most effective way to avoid calling the helpdesk if you need to change your password or experience an issue with your account.';\n } else{\n this.mfa.step1.els.instruction.textContent = 'Kent State University is excited to offer the ability to add your phone number as a Multi-Factor Authentication (MFA) option. Adding your phone number is the most effective way to avoid calling the helpdesk if you need to change your password or experience an issue with your account.';\n }\n\n this.mfa.step1.els.instructionWrap.appendChild(this.mfa.step1.els.instruction);\n\n this.mfa.step1.els.phoneInputArea = document.createElement('div');\n this.mfa.step1.els.phoneInputArea.classList.add('phone-area');\n this.mfa.step1.els.countryCodeBlock = document.createElement('div');\n this.mfa.step1.els.countryCodeBlock.className = 'country-code-block swell-element';\n this.mfa.step1.els.phoneInputArea.appendChild(this.mfa.step1.els.countryCodeBlock);\n this.mfa.step1.els.phoneBlock = document.createElement('div');\n this.mfa.step1.els.phoneBlock.className = 'phone-block swell-element';\n this.mfa.step1.els.phoneInputArea.appendChild(this.mfa.step1.els.phoneBlock); \n\n this.mfa.step1.els.countryCodeLabel = document.createElement('label');\n this.mfa.step1.els.countryCodeLabel.setAttribute('for', 'mfa-country-code');\n this.mfa.step1.els.countryCodeLabel.textContent = 'Country Code';\n this.mfa.step1.els.countryCodeInput = document.createElement('select');\n this.mfa.step1.els.countryCodeInput.id = 'mfa-country-code';\n this.mfa.step1.els.countryCodeInput.addEventListener('change', this.assignPhonePlaceholder.bind(this));\n\n let option1 = document.createElement('option');\n option1.textContent = 'Select Country Code';\n option1.setAttribute('disabled', '');\n option1.setAttribute('value', '');\n this.mfa.step1.els.countryCodeInput.appendChild(option1);\n\n var key = \"\";\n for( key in this.countryCodes) {\n console.log(\"Appending key \" + key);\n if(this.countryCodes.hasOwnProperty(key)) {\n console.log(\"true\");\n let optionEl = document.createElement('option');\n optionEl.setAttribute('data-abbr', this.countryCodes[key].abbr);\n optionEl.setAttribute('value', this.countryCodes[key].code);\n let countryText = key;\n if(key === 'United States'){\n countryText += ' / Canada';\n } else if(key === 'Canada'){\n countryText += ' / United States';\n }\n optionEl.setAttribute('data-country', countryText);\n optionEl.textContent = countryText + ' (+' + this.countryCodes[key].code + ')';\n this.mfa.step1.els.countryCodeInput.appendChild(optionEl);\n }\n }\n console.log(\"And here.\");\n //Assign selected option\n if (this.data.mfa.countryCode) {\n console.log(\"has country code\");\n //console.log('A');\n let optionMatch = this.mfa.step1.els.countryCodeInput.querySelector('[value=\"' + this.data.mfa.countryCode + '\"]');\n if(optionMatch){\n if(this.data.mfa.countryCode === '1') {\n //Default to USA instead of Canada which shares code\n this.mfa.step1.els.countryCodeInput.querySelector('[data-abbr=\"US\"]').setAttribute('selected', '');\n } else {\n this.mfa.step1.els.countryCodeInput.querySelector('[value=\"' + this.data.mfa.countryCode + '\"]').setAttribute('selected', '');\n }\n } else{\n //No option match\n console.info('Stored country not in our list. User must select supported country.');\n this.mfa.step1.els.countryCodeInput.querySelector('option').setAttribute('selected', '');\n }\n \n } else if(!this.data.mfa.phoneNumber) {\n console.log(\"no country code / phone\");\n //No country code and no phone number\n //console.log('B');\n this.mfa.step1.els.countryCodeInput.querySelector('[data-abbr=\"US\"]').setAttribute('selected', '');\n } else {\n //console.log('C');\n //Phone number but no country code\n console.log(\"country code but no phone\");\n this.mfa.step1.els.countryCodeInput.querySelector('option').setAttribute('selected', '');\n }\n\n\n this.mfa.step1.els.countryCodeBlock.appendChild(this.mfa.step1.els.countryCodeLabel);\n this.mfa.step1.els.countryCodeBlock.appendChild(this.mfa.step1.els.countryCodeInput);\n\n\n this.mfa.step1.els.phoneLabel = document.createElement('label');\n this.mfa.step1.els.phoneLabel.setAttribute('for', 'mfa-phone');\n this.mfa.step1.els.phoneLabel.textContent = 'Phone Number';\n this.mfa.step1.els.phoneLabelAriaSpan = document.createElement('span');\n this.mfa.step1.els.phoneLabelAriaSpan.classList.add('aria-only');\n this.mfa.step1.els.phoneLabel.appendChild(this.mfa.step1.els.phoneLabelAriaSpan);\n\n this.mfa.step1.els.phoneInput = document.createElement('input');\n this.mfa.step1.els.phoneInput.setAttribute('type', 'tel');\n this.assignPhonePlaceholder();\n this.mfa.step1.els.phoneInput.id = 'mfa-phone';\n\n if(this.data.mfa.phoneNumber) {\n this.mfa.step1.els.phoneInput.value = this.data.mfa.phoneNumber;\n }\n\n this.mfa.step1.els.phoneErrorWrap = document.createElement('div');\n this.mfa.step1.els.phoneErrorWrap.className = 'fl-error';\n this.mfa.step1.els.phoneErrorWrap.setAttribute('aria-live', 'assertive');\n this.mfa.step1.els.phoneError = document.createElement('div');\n this.mfa.step1.els.phoneError.className = 'fl-form-error';\n this.mfa.step1.els.phoneError.id = 'mfa-phone-error';\n this.mfa.step1.els.phoneErrorWrap.appendChild(this.mfa.step1.els.phoneError);\n\n this.mfa.step1.els.phoneBlock.appendChild(this.mfa.step1.els.phoneLabel);\n this.mfa.step1.els.phoneBlock.appendChild(this.mfa.step1.els.phoneInput);\n this.mfa.step1.els.phoneBlock.appendChild(this.mfa.step1.els.phoneErrorWrap);\n\n\n this.mfa.step1.els.form.appendChild(this.mfa.step1.els.phoneInputArea);\n\n if(!this.data.mfa.forceDefault){\n this.mfa.step1.els.radioWrap = document.createElement('div');\n this.mfa.step1.els.radioWrap.className = 'mfa-radio-wrap';\n this.mfa.step1.els.form.appendChild(this.mfa.step1.els.radioWrap);\n\n\n\n this.mfa.step1.els.radioBlock = document.createElement('fieldset');\n this.mfa.step1.els.radioLegend = document.createElement('legend');\n this.mfa.step1.els.radioLegend.textContent = 'Send all future verifications via:';\n this.mfa.step1.els.radioBlock.className = 'mfa-radio-block';\n this.mfa.step1.els.radio1 = document.createElement('input');\n this.mfa.step1.els.radio1.setAttribute('type', 'radio');\n this.mfa.step1.els.radio1.setAttribute('name', 'mfa-default-radio');\n this.mfa.step1.els.radio1.setAttribute('value', 'phone');\n this.mfa.step1.els.radio1.id = 'mfa-default-radio-1';\n this.mfa.step1.els.radio1.classList.add('fl-radio');\n this.mfa.step1.els.radio1.setAttribute('checked', 'checked');\n this.mfa.step1.els.radio1Label = document.createElement('label');\n this.mfa.step1.els.radio1Label.setAttribute('for', 'mfa-default-radio-1');\n this.mfa.step1.els.radio1Label.innerHTML = 'Text Message
(recommended)';\n\n this.mfa.step1.els.radioBlock.appendChild(this.mfa.step1.els.radioLegend);\n this.mfa.step1.els.radioBlock.appendChild(this.mfa.step1.els.radio1);\n this.mfa.step1.els.radioBlock.appendChild(this.mfa.step1.els.radio1Label);\n this.mfa.step1.els.radioBlock.appendChild(document.createElement('br'));\n\n this.mfa.step1.els.radio2 = document.createElement('input');\n this.mfa.step1.els.radio2.setAttribute('type', 'radio');\n this.mfa.step1.els.radio2.setAttribute('name', 'mfa-default-radio');\n this.mfa.step1.els.radio2.setAttribute('value', 'app');\n this.mfa.step1.els.radio2.id = 'mfa-default-radio-2';\n this.mfa.step1.els.radio2.classList.add('fl-radio');\n this.mfa.step1.els.radio2Label = document.createElement('label');\n this.mfa.step1.els.radio2Label.setAttribute('for', 'mfa-default-radio-2');\n this.mfa.step1.els.radio2Label.textContent = 'Microsoft Authenticator App';\n\n this.mfa.step1.els.radioBlock.appendChild(this.mfa.step1.els.radio2);\n this.mfa.step1.els.radioBlock.appendChild(this.mfa.step1.els.radio2Label);\n\n\n this.mfa.step1.els.radioWrap.appendChild(this.mfa.step1.els.radioBlock);\n }\n //END of RADIO BUTTON\n\n \n\n this.mfa.step1.els.moreInfo = document.createElement('p');\n this.mfa.step1.els.moreInfo.className = 'more-info';\n\n if(this.data.mfa.forceDefault){\n this.mfa.step1.els.moreInfo.innerHTML = 'The MFA App will still be available for advanced users. ' + this.mfa.moreInfoString + '
Messaging and data rates may apply.';\n } else {\n this.mfa.step1.els.moreInfo.innerHTML = this.mfa.moreInfoString + '
Messaging and data rates may apply.';\n }\n\n this.mfa.step1.els.form.appendChild(this.mfa.step1.els.moreInfo);\n\n\n this.mfa.step1.els.controlArea = document.createElement('div');\n this.mfa.step1.els.controlArea.classList = 'control-area';\n this.mfa.step1.els.nextButton = document.createElement('input');\n this.mfa.step1.els.nextButton.setAttribute('type', 'submit');\n this.mfa.step1.els.nextButton.setAttribute('value', 'Next');\n this.mfa.step1.els.nextButton.classList = 'button';\n this.mfa.step1.els.controlArea.appendChild(this.mfa.step1.els.nextButton);\n this.mfa.step1.els.form.appendChild(this.mfa.step1.els.controlArea);\n\n\n this.mfa.step1.els.noPhoneLinkWrap = document.createElement('div');\n this.mfa.step1.els.noPhoneLinkWrap.className = 'footer-link-wrap';\n this.mfa.step1.els.noPhoneLink = document.createElement('a');\n this.mfa.step1.els.noPhoneLink.setAttribute('role', 'button');\n this.mfa.step1.els.noPhoneLink.textContent = 'Don\\'t own a cell phone?';\n this.mfa.step1.els.noPhoneLink.href = '';\n this.mfa.step1.els.noPhoneLink.addEventListener('click', (e)=>{\n e.preventDefault();\n if(this.submitting) return;\n if(!this.mfa.noPhone) {\n this.mfaBuildNoPhone();\n }\n this.mfaNoPhone();\n });\n\n\n this.mfa.step1.els.noPhoneLinkWrap.appendChild(this.mfa.step1.els.noPhoneLink);\n this.mfa.step1.els.form.appendChild(this.mfa.step1.els.noPhoneLinkWrap);\n\n }//END mfaBuildStep1\n\n\n mfaBuildStep2(){\n \tthis.mfa.step2 = {};\n this.mfa.step2.els = {};\n this.mfa.step2.els.form = document.createElement('form');\n this.mfa.step2.els.form.addEventListener('submit', this.mfaStep2Submit.bind(this), true);\n\n this.mfa.step2.els.heading = 'Please Enter the Code';\n\n\t this.mfa.step2.els.instructionWrap = document.createElement('div');\n this.mfa.step2.els.instructionWrap.classList = 'swal-instruction';\n this.mfa.step2.els.instructionWrap.setAttribute('aria-live', 'assertive');\n this.mfa.step2.els.form.appendChild(this.mfa.step2.els.instructionWrap);\n\n this.mfa.step2.els.instruction = document.createElement('div');\n this.mfa.step2.els.instruction.innerHTML = '
We just sent a 6 digit code to +' + this.mfa.step1.post.countryCode + ' ' + this.mfa.step1.post.phoneNumber + '.
';\n this.mfa.step2.els.instructionWrap.appendChild(this.mfa.step2.els.instruction);\n\n //link stored. add later for text fail scenario\n this.mfa.step2.els.textFailBlock = document.createElement('p');\n this.mfa.step2.els.textFailBlock.className = 'text-fail-block';\n this.mfa.step2.els.textFailIcon = document.createElement('span');\n this.mfa.step2.els.textFailIcon.className = 'fl-error icon-exclaimcircle';\n this.mfa.step2.els.textFailIcon.setAttribute('aria-hidden', 'true');\n this.mfa.step2.els.textFailBlock.appendChild(this.mfa.step2.els.textFailIcon);\n\tthis.mfa.step2.els.textFailLink = document.createElement('a');\n this.mfa.step2.els.textFailLink.setAttribute('role', 'button');\n this.mfa.step2.els.textFailLink.textContent = 'Didn\\'t get it? Let us know.';\n this.mfa.step2.els.textFailLink.href = '';\n this.mfa.step2.els.textFailLink.addEventListener('click', (e)=>{\n e.preventDefault();\n if(this.submitting) return; //already working on it\n this.submitting = true;\n this.mfaTextFail();\n });\n this.mfa.step2.els.textFailBlock.appendChild(this.mfa.step2.els.textFailLink);\n\n this.mfa.step2.els.codeInputArea = document.createElement('div');\n this.mfa.step2.els.codeInputArea.classList.add('code-area');\n this.mfa.step2.els.form.appendChild(this.mfa.step2.els.codeInputArea);\n\n this.mfa.step2.els.codeBlock = document.createElement('div');\n this.mfa.step2.els.codeBlock.className = 'mfa-code-block swell-element';\n this.mfa.step2.els.codeInputArea.appendChild(this.mfa.step2.els.codeBlock);\n\n this.mfa.step2.els.codeLabel = document.createElement('label');\n this.mfa.step2.els.codeLabel.setAttribute('for', 'mfa-code');\n this.mfa.step2.els.codeLabel.textContent = 'Code';\n\t this.mfa.step2.els.codeBlock.appendChild(this.mfa.step2.els.codeLabel);\n\n this.mfa.step2.els.codeInput = document.createElement('input');\n this.mfa.step2.els.codeInput.setAttribute('type', 'text');\n //use same function as we used on the phone number input before submitting\n this.mfa.step2.els.codeInput.id = 'mfa-code';\n this.mfa.step2.els.codeBlock.appendChild(this.mfa.step2.els.codeInput);\n\n this.mfa.step2.els.codeErrorWrap = document.createElement('div');\n this.mfa.step2.els.codeErrorWrap.className = 'fl-error';\n this.mfa.step2.els.codeErrorWrap.setAttribute('aria-live', 'assertive');\n this.mfa.step2.els.codeBlock.appendChild(this.mfa.step2.els.codeErrorWrap);\n\n this.mfa.step2.els.codeError = document.createElement('div');\n this.mfa.step2.els.codeError.className = 'fl-form-error';\n this.mfa.step2.els.codeError.id = 'mfa-code-error';\n this.mfa.step2.els.codeErrorWrap.appendChild(this.mfa.step2.els.codeError);\n\n this.mfa.step2.els.controlArea = document.createElement('div');\n this.mfa.step2.els.controlArea.classList = 'control-area';\n this.mfa.step2.els.form.appendChild(this.mfa.step2.els.controlArea);\n\n this.mfa.step2.els.backButton = document.createElement('button');\n this.mfa.step2.els.backButton.setAttribute('type', 'button');\n this.mfa.step2.els.backButton.textContent = 'Back';\n this.mfa.step2.els.backButton.classList = 'button';\n this.mfa.step2.els.backButton.addEventListener('click', (e) => {\n \t//mfaStep1 takes an optional callback function as an argument.\n \te.preventDefault();\n\t\t this.mfaStep1();\n });\n this.mfa.step2.els.controlArea.appendChild(this.mfa.step2.els.backButton);\n\n this.mfa.step2.els.nextButton = document.createElement('input');\n this.mfa.step2.els.nextButton.setAttribute('type', 'submit');\n this.mfa.step2.els.nextButton.setAttribute('value', 'Next');\n this.mfa.step2.els.nextButton.classList = 'button';\n this.mfa.step2.els.controlArea.appendChild(this.mfa.step2.els.nextButton);\n\n\n this.mfa.step2.els.resendCodeWrap = document.createElement('div');\n this.mfa.step2.els.resendCodeWrap.className = 'footer-link-wrap';\n this.mfa.step2.els.resendCodeLink = document.createElement('a');\n this.mfa.step2.els.resendCodeLink.setAttribute('role', 'button');\n this.mfa.step2.els.resendCodeLink.textContent = 'Resend Code';\n this.mfa.step2.els.resendCodeLink.href = '';\n this.mfa.step2.els.resendCodeLink.addEventListener('click', (e)=>{\n e.preventDefault();\n if(this.submitting) return; //already working on it\n this.submitting = true;\n if(!this.mfa.step2.resendCount) this.mfa.step2.resendCount = 0;\n this.mfa.step2.resendCount++;\n\n this.mfaSendCode();\n });\n\n\n this.mfa.step2.els.resendCodeWrap.appendChild(this.mfa.step2.els.resendCodeLink);\n this.mfa.step2.els.form.appendChild(this.mfa.step2.els.resendCodeWrap);\n\n\n\n\n\n }//END mfaBuildStep2\n\n \n mfaBuildNoPhone(){\n this.mfa.noPhone = {};\n this.mfa.noPhone.els = {};\n this.mfa.noPhone.els.form = document.createElement('form');\n this.mfa.noPhone.els.form.addEventListener('submit', this.mfaNoPhoneSubmit.bind(this), true);\n\n this.mfa.noPhone.els.heading = 'Are You Sure?';\n\n this.mfa.noPhone.els.instructionWrap = document.createElement('div');\n this.mfa.noPhone.els.instructionWrap.classList = 'swal-instruction';\n this.mfa.noPhone.els.form.appendChild(this.mfa.noPhone.els.instructionWrap);\n\n this.mfa.noPhone.els.instruction2 = document.createElement('p');\n this.mfa.noPhone.els.instruction2.textContent = 'We will only use your phone number for account-related activity, such as a password reset or a security issue with your account.';\n this.mfa.noPhone.els.instructionWrap.appendChild(this.mfa.noPhone.els.instruction2);\n\n //RADIOS\n this.mfa.noPhone.els.radioWrap = document.createElement('div');\n this.mfa.noPhone.els.radioWrap.className = 'mfa-radio-wrap';\n this.mfa.noPhone.els.form.appendChild(this.mfa.noPhone.els.radioWrap);\n this.mfa.noPhone.els.radioBlock = document.createElement('div');\n this.mfa.noPhone.els.radioBlock.className = 'mfa-radio-block';\n\n this.mfa.noPhone.els.radio1 = document.createElement('input');\n this.mfa.noPhone.els.radio1.setAttribute('type', 'radio');\n this.mfa.noPhone.els.radio1.setAttribute('name', 'mfa-no-phone-radio');\n this.mfa.noPhone.els.radio1.setAttribute('value', 'no-phone');\n this.mfa.noPhone.els.radio1.id = 'mfa-no-phone-radio-1';\n this.mfa.noPhone.els.radio1.classList.add('fl-radio');\n this.mfa.noPhone.els.radio1.setAttribute('checked', 'checked');\n this.mfa.noPhone.els.radio1Label = document.createElement('label');\n this.mfa.noPhone.els.radio1Label.setAttribute('for', 'mfa-no-phone-radio-1');\n this.mfa.noPhone.els.radio1Label.textContent = 'I don\\'t own a cell phone';\n\n this.mfa.noPhone.els.radioBlock.appendChild(this.mfa.noPhone.els.radio1);\n this.mfa.noPhone.els.radioBlock.appendChild(this.mfa.noPhone.els.radio1Label);\n this.mfa.noPhone.els.radioBlock.appendChild(document.createElement('br'));\n\n this.mfa.noPhone.els.radio2 = document.createElement('input');\n this.mfa.noPhone.els.radio2.setAttribute('type', 'radio');\n this.mfa.noPhone.els.radio2.setAttribute('name', 'mfa-no-phone-radio');\n this.mfa.noPhone.els.radio2.setAttribute('value', 'no-provide');\n this.mfa.noPhone.els.radio2.id = 'mfa-no-phone-radio-2';\n this.mfa.noPhone.els.radio2.classList.add('fl-radio');\n this.mfa.noPhone.els.radio2Label = document.createElement('label');\n this.mfa.noPhone.els.radio2Label.setAttribute('for', 'mfa-no-phone-radio-2');\n this.mfa.noPhone.els.radio2Label.textContent = 'I don\\'t want to provide my phone number';\n\n this.mfa.noPhone.els.radioBlock.appendChild(this.mfa.noPhone.els.radio2);\n this.mfa.noPhone.els.radioBlock.appendChild(this.mfa.noPhone.els.radio2Label);\n\n\n this.mfa.noPhone.els.radioWrap.appendChild(this.mfa.noPhone.els.radioBlock);\n\n //END of RADIO BUTTON\n\n //more info\n this.mfa.noPhone.els.moreInfo = document.createElement('p');\n this.mfa.noPhone.els.moreInfo.className = 'more-info';\n this.mfa.noPhone.els.moreInfo.innerHTML = this.mfa.moreInfoString;\n this.mfa.noPhone.els.form.appendChild(this.mfa.noPhone.els.moreInfo);\n \n //controls\n this.mfa.noPhone.els.controlArea = document.createElement('div');\n this.mfa.noPhone.els.controlArea.classList = 'control-area';\n this.mfa.noPhone.els.form.appendChild(this.mfa.noPhone.els.controlArea);\n this.mfa.noPhone.els.backButton = document.createElement('button');\n this.mfa.noPhone.els.backButton.setAttribute('type', 'button');\n this.mfa.noPhone.els.backButton.textContent = 'Back';\n this.mfa.noPhone.els.backButton.classList = 'button';\n this.mfa.noPhone.els.backButton.addEventListener('click', (e) => {\n //mfaStep1 takes an optional callback function as an argument.\n e.preventDefault();\n this.mfaStep1();\n });\n this.mfa.noPhone.els.controlArea.appendChild(this.mfa.noPhone.els.backButton);\n this.mfa.noPhone.els.nextButton = document.createElement('input');\n this.mfa.noPhone.els.nextButton.setAttribute('type', 'submit');\n this.mfa.noPhone.els.nextButton.setAttribute('value', 'Next');\n this.mfa.noPhone.els.nextButton.classList = 'button';\n this.mfa.noPhone.els.controlArea.appendChild(this.mfa.noPhone.els.nextButton);\n\n\n }//END Build No Phone\n\n\n ssprBuildStep1(){\n this.sspr.moreInfoString = 'For more information, see the
Password Reset Knowledge Base.';\n this.sspr.step1 = {};\n this.sspr.step1.els = {};\n this.sspr.step1.els.form = document.createElement('form');\n this.sspr.step1.els.form.addEventListener('submit', this.ssprStep1Submit.bind(this), true);\n\n this.sspr.step1.els.heading = 'Make Password Resets Easy';\n\n this.sspr.step1.els.instructionWrap = document.createElement('div');\n this.sspr.step1.els.instructionWrap.classList = 'swal-instruction';\n this.sspr.step1.els.form.appendChild(this.sspr.step1.els.instructionWrap);\n this.sspr.step1.els.instruction = document.createElement('p');\n if(this.data.sspr.revalidate){\n this.sspr.step1.els.instruction.textContent = 'You are seeing this prompt because we would like to confirm the alternate email address you have previously supplied us with is correct. Confirming your alternate email address will allow you to avoid calling the helpdesk in the event that you forget your password.';\n } else{\n this.sspr.step1.els.instruction.textContent = 'You are seeing this prompt because we do not have an alternate email address associated with your account. Adding your alternate email address will allow you to avoid calling the helpdesk in the event that you forget your password.';\n }\n this.sspr.step1.els.instructionWrap.appendChild(this.sspr.step1.els.instruction);\n\n this.sspr.step1.els.instruction2 = document.createElement('p');\n this.sspr.step1.els.instruction2.textContent = 'We will only use your alternate email address for account-related activity, such as a password reset or a security issue with your account.';\n this.sspr.step1.els.instructionWrap.appendChild(this.sspr.step1.els.instruction2);\n\n this.sspr.step1.els.emailInputArea = document.createElement('div');\n this.sspr.step1.els.emailInputArea.classList.add('email-area');\n this.sspr.step1.els.form.appendChild(this.sspr.step1.els.emailInputArea);\n\n this.sspr.step1.els.emailBlock = document.createElement('div');\n this.sspr.step1.els.emailBlock.className = 'email-block swell-element';\n this.sspr.step1.els.emailInputArea.appendChild(this.sspr.step1.els.emailBlock);\n\n this.sspr.step1.els.emailLabel = document.createElement('label');\n this.sspr.step1.els.emailLabel.setAttribute('for', 'sspr-email');\n this.sspr.step1.els.emailLabel.textContent = 'Alternate Email Address';\n this.sspr.step1.els.emailBlock.appendChild(this.sspr.step1.els.emailLabel);\n\n this.sspr.step1.els.emailInput = document.createElement('input');\n this.sspr.step1.els.emailInput.setAttribute('type', 'text');\n this.sspr.step1.els.emailInput.id = 'sspr-email';\n if(this.data.sspr.revalidate && this.data.sspr.email) this.sspr.step1.els.emailInput.value = this.data.sspr.email;\n this.sspr.step1.els.emailBlock.appendChild(this.sspr.step1.els.emailInput);\n\n this.sspr.step1.els.emailErrorWrap = document.createElement('div');\n this.sspr.step1.els.emailErrorWrap.className = 'fl-error';\n this.sspr.step1.els.emailErrorWrap.setAttribute('aria-live', 'assertive');\n this.sspr.step1.els.emailBlock.appendChild(this.sspr.step1.els.emailErrorWrap);\n\n this.sspr.step1.els.emailError = document.createElement('div');\n this.sspr.step1.els.emailError.className = 'fl-form-error';\n this.sspr.step1.els.emailError.id = 'sspr-email-error';\n this.sspr.step1.els.emailErrorWrap.appendChild(this.sspr.step1.els.emailError);\n\n //more info\n this.sspr.step1.els.moreInfo = document.createElement('p');\n this.sspr.step1.els.moreInfo.className = 'more-info';\n this.sspr.step1.els.moreInfo.innerHTML = this.sspr.moreInfoString;\n this.sspr.step1.els.form.appendChild(this.sspr.step1.els.moreInfo); \n\n this.sspr.step1.els.controlArea = document.createElement('div');\n this.sspr.step1.els.controlArea.classList = 'control-area';\n this.sspr.step1.els.form.appendChild(this.sspr.step1.els.controlArea);\n\n this.sspr.step1.els.nextButton = document.createElement('input');\n this.sspr.step1.els.nextButton.setAttribute('type', 'submit');\n this.sspr.step1.els.nextButton.setAttribute('value', 'Next');\n this.sspr.step1.els.nextButton.classList = 'button';\n this.sspr.step1.els.controlArea.appendChild(this.sspr.step1.els.nextButton);\n\n }//END ssprBuildStep1\n\n\n mfaStep1Submit(e) {\n \t//console.log('SUBMITTING FORM 1');\n e.preventDefault();//Prevent Natural Submission\n\n //Prevent double click submissions\n if(!this.submitting) {\n this.submitting = true;\n } else {\n //console.log('In process, cannot submit twice');\n return;\n }\n\n\n //Assign Post Values\n this.mfa.step1.post = {};\n this.mfa.step1.phoneString = this.mfa.step1.els.phoneInput.value;\n this.mfa.step1.post.phoneNumber = this.mfa.step1.phoneString.replace(/\\D/g,'');\n this.mfa.step1.post.countryCode = this.mfa.step1.els.countryCodeInput.value;\n this.mfa.step1.post.setDefault = this.data.mfa.forceDefault ? true : this.mfa.step1.els.radio1.checked;\n\n //console.log(this.mfa.step1.post);\n\n let activeEl = document.activeElement;\n let returnFocus;\n \n if(!this.mfa.step1.post.countryCode){\n this.mfa.step1.els.countryCodeInput.classList.add('fl-show-user');\n this.elementSwell(this.mfa.step1.els.countryCodeBlock);\n returnFocus = (this.mfa.step1.els.countryCodeInput === activeEl) ? activeEl : returnFocus;\n\n }else{\n this.mfa.step1.els.countryCodeInput.classList.remove('fl-show-user');\n }\n\n if(!this.mfa.step1.post.phoneNumber){\n this.mfa.step1.els.phoneError.textContent = '';\n this.mfa.step1.els.phoneError.textContent = 'Error: Please enter a phone number.';\n this.mfa.step1.els.phoneInput.classList.add('fl-show-user');\n this.elementSwell(this.mfa.step1.els.phoneBlock);\n returnFocus = (this.mfa.step1.els.phoneInput === activeEl) ? activeEl : returnFocus;\n\n }else if(this.mfa.step1.post.phoneNumber && !this.mfa.step1.els.phoneInput.hasAttribute('data-invalid')){\n this.mfa.step1.els.phoneError.textContent = '';\n this.mfa.step1.els.phoneInput.classList.remove('fl-show-user');\n }\n\n if(returnFocus){\n returnFocus.focus();\n } else if(!this.mfa.step1.post.countryCode){\n this.mfa.step1.els.countryCodeInput.focus();\n } else if(!this.mfa.step1.post.phoneNumber) {\n this.mfa.step1.els.phoneInput.focus();\n }\n\n if(!this.mfa.step1.post.countryCode || !this.mfa.step1.post.phoneNumber){\n this.submitting = false;\n return;\n }\n\n\n let exactRepost = this.mfa.step1.postString && JSON.stringify(this.mfa.step1.post) === this.mfa.step1.postString;\n let postSuccessful = this.mfa.step1.response && this.mfa.step1.response.codeSent;\n\n if(exactRepost && (this.mfa.step1.response && this.mfa.step1.response.countryUnsupported)){\n \t//country still unsupported\n \tthis.mfaUnsupportedCountrySwal();\n \treturn;\n } else if(exactRepost && postSuccessful){\n this.submitting = false;\n this.mfaStep2();\n return;\n } else if(exactRepost && !postSuccessful){\n this.mfa.step1.els.phoneError.textContent = '';\n this.mfa.step1.els.phoneError.textContent = this.mfa.step1.response.errorMessage ? ('Error: ' + this.mfa.step1.response.errorMessage) : 'Error: Number is not valid!';\n this.mfa.step1.els.phoneInput.classList.add('fl-show-user');\n this.mfa.step1.els.phoneInput.focus();\n this.elementSwell(this.mfa.step1.els.phoneBlock);\n this.submitting = false;\n return;\n }\n\n //Ready for AJAX post\n\t this.mfaSendCode();\n\n\n } //END OF mfaStep1Submit\n \n\n mfaStep2Submit(e) {\n //console.log('SUBMITTING FORM 2');\n e.preventDefault();//Prevent Natural Submission\n\n //Prevent double click submissions\n if(!this.submitting) {\n this.submitting = true;\n } else {\n //console.log('In process, cannot submit twice');\n return;\n }\n\n //Assign Post Values\n this.mfa.step2.post = {};\n this.mfa.step2.codeString = this.mfa.step2.els.codeInput.value;\n this.mfa.step2.post.code = this.mfa.step2.codeString.replace(/\\D/g,'');\n //console.log(this.mfa.step2.post);\n\n if(this.mfa.step2.post.code.length !== 6){\n this.loader.remove();\n this.submitting = false;\n this.mfa.step2.els.codeError.textContent = '';\n this.mfa.step2.els.codeError.textContent = 'Error: Code must be 6 digits.';\n this.elementSwell(this.mfa.step2.els.codeBlock);\n this.mfa.step2.els.codeInput.classList.add('fl-show-user');\n this.mfa.step2.els.codeInput.focus();\n return;\n }\n\n //stop multiple submission of same wrong code. This would eat up the users attempts.\n let exactRepost = this.mfa.step2.postString && JSON.stringify(this.mfa.step2.post) === this.mfa.step2.postString;\n let postSuccessful = this.mfa.step2.response && this.mfa.step2.response.success;\n\n if(exactRepost && !postSuccessful){\n this.submitting = false;\n this.mfa.step2.els.codeError.textContent = '';\n this.mfa.step2.els.codeError.textContent = this.mfa.step2.response.errorMessage ? ('Error: ' + this.mfa.step2.response.errorMessage) : 'Error: Code is not valid!';\n this.mfa.step2.els.codeInput.classList.add('fl-show-user');\n this.elementSwell(this.mfa.step2.els.codeBlock);\n this.mfa.step2.els.codeInput.focus();\n return;\n }\n \n this.loader = new ajaxLoader(document.querySelector('.sspr-swal .swal2-content'));\n //AJAX POST\n $.ajax({\n method: \"POST\",\n url: \"/wse/do/817\",\n dataType: \"json\",\n data: this.mfa.step2.post\n }).done((data) => {\n //console.log(data);\n\n if(!data){\n this.abortMFA({ console: 'DoEntity/817 returned no data' });\n return;\n }else if(data.error === 'error') {\n this.abortMFA({ console: 'DoEntity/817 returned an error' });\n return;\n } \n\n this.mfa.step2.postString = JSON.stringify(this.mfa.step2.post);\n this.mfa.step2.response = data.Result.mfa ? data.Result.mfa : {};\n\n if(!this.mfa.step2.response.success){\n this.loader.remove();\n this.submitting = false;\n this.mfa.step2.els.codeError.textContent = '';\n this.mfa.step2.els.codeError.textContent = this.mfa.step2.response.errorMessage ? ('Error: ' + this.mfa.step2.response.errorMessage) : 'Error: Code is not valid!';\n this.mfa.step2.els.codeInput.classList.add('fl-show-user');\n this.elementSwell(this.mfa.step2.els.codeBlock);\n this.mfa.step2.els.codeInput.focus();\n } else {\n this.mfaSuccess({\n heading: 'Cell Phone Verified',\n body: 'Your phone was registered successfully!'\n });\n }\n\n \n }).fail( () => {\n this.abortMFA({\n console: 'DoEntity/817 failed'\n });\n });\n\n\n }//END OF MFA STEP 2 SUBMIT\n\n\n mfaTextFail() {\n\t\n this.loader = new ajaxLoader(document.querySelector('.sspr-swal .swal2-content'));\n //Assign Post Values\n if(!this.mfa.textFail) this.mfa.textFail = {};\n this.mfa.textFail.post = {};\n this.mfa.textFail.post.countryCode = this.mfa.step1.post.countryCode;\n this.mfa.textFail.post.phoneNumber = this.mfa.step1.post.phoneNumber;\n\n //AJAX POST\n $.ajax({\n method: \"POST\",\n url: \"/wse/do/821\",\n dataType: \"json\",\n data: this.mfa.textFail.post\n }).done((data) => {\n //console.log(data);\n \n if(!data) {\n this.abortMFA({ console: 'DoEntity/821 returned no data' });\n return;\n }else if(data.error === 'error') {\n this.abortMFA({ console: 'DoEntity/821 returned an error' });\n return;\n }\n\n this.mfa.textFail.response = data.Result.mfa ? data.Result.mfa : {};\n\n if(!this.mfa.textFail.response.success){\n this.abortMFA({\n error: this.mfa.textFail.response.errorMessage,\n console: 'DoEntity/821 finished but submit not successful'\n });\n } else {\n this.mfaSuccess({\n width: '37rem',\n heading: 'Thank You',\n body: '
We are sorry you didn\\'t receive a code. As we work to correct this, no further action is needed.
' + this.mfa.moreInfoString + '
'\n });\n\n }\n\n \n }).fail( () => {\n this.abortMFA({\n console: 'DoEntity/821 failed'\n });\n });\n\n }//END OF MFA TEXT FAIL\n\n\n mfaUnsupportedCountrySwal() {\n \tconsole.log('country unsupported');\n\n\t let btnText = this.data.sspr.showPrompt ? 'Continue' : 'Close';\n\t\tlet bodyHtml = '
We are currently unable to authenticate users in ' + this.mfa.step1.els.countryCodeInput.options[this.mfa.step1.els.countryCodeInput.selectedIndex].getAttribute('data-country') + ' via text message. As an alternative, please use the Microsoft Authenticator App.
' + this.mfa.moreInfoString + '
';\n\n\t swal2Btns({\n\t width: '35rem',\n\t customClass: 'sspr-swal mfa-country-unsupported',\n\t allowOutsideClick: !this.data.sspr.showPrompt,\n\t title: 'Country Not Supported',\n\t html: bodyHtml,\n\t type: 'info',\n\t focusConfirm: true,\n\t confirmButtonText: btnText,\n\t cancelButtonText: 'Back'\n\n\t }).then((result) => {\n\t if(result.value && this.data.sspr.showPrompt) {\n\t this.ssprPrompt();\n\t }else if(result.dismiss === 'cancel'){\n \t\t//Back Button\n \t\tconsole.log('I hit the back button');\n\t\t \tthis.mfaStep1();\n \t\t }\n\t });\n\n\t\tthis.loader.remove();\n this.submitting = false;\n }\n\n mfaSendCode() {\n this.loader = new ajaxLoader(document.querySelector('.sspr-swal .swal2-content'));\n this.submitting = true;\n\n //AJAX POST\n $.ajax({\n method: \"POST\",\n url: \"/wse/do/816\",\n dataType: \"json\",\n data: this.mfa.step1.post\n }).done((data) => {\n //console.log(data);\n\n if(!data) {\n this.abortMFA({ console: 'DoEntity/816 returned no data' });\n return;\n }else if(data.error === 'error') {\n \t\t this.abortMFA({ console: 'DoEntity/816 returned an error' });\n \treturn;\n }\n\n //Successful post on step 2 - store the postString allowing user to go back and forth between steps 1 and 2 without another webservice call\n this.mfa.step1.postString = JSON.stringify(this.mfa.step1.post);\n\n this.mfa.step1.response = data.Result.mfa ? data.Result.mfa : {};\n\n //Invalid Country\n if(this.mfa.step1.response.countryUnsupported){\n \tthis.mfaUnsupportedCountrySwal();\n return;\n }\n\n \t//Invalid Phone Number\n \tif(!this.mfa.step1.response.codeSent && !this.mfa.step1.response.maxAttempts){\n \t\tthis.loader.remove();\n this.submitting = false;\n this.mfa.step1.els.phoneInput.setAttribute('data-invalid', '');\n this.mfa.step1.els.phoneError.textContent = '';\n\n this.mfa.step1.els.phoneError.textContent = this.mfa.step1.response.errorMessage ? ('Error: ' + this.mfa.step1.response.errorMessage) : 'Error: Number is not valid!';\n\n \t\tvar phoneInvalidFocus = () => {\n \t\t\tthis.mfa.step1.els.phoneInput.classList.add('fl-show-user');\n \t this.mfa.step1.els.phoneInput.focus();\n \t this.elementSwell(this.mfa.step1.els.phoneBlock);\n \t\t};\n\n \t\tif(document.querySelector('.mfa-step-1')){\n phoneInvalidFocus();\n } else {\n //just in case this was triggered by the resend code link in mfaStep2\n \t\t\tthis.mfaStep1(phoneInvalidFocus);\n }\n return;\n \t}\n\n //abort if needed\n if(!this.mfa.step1.response.codeSent || this.mfa.step1.response.maxAttempts){\n let errorText = this.mfa.step1.response.errorMessage ? this.mfa.step1.response.errorMessage : 'Too many attempts made. Try again later.';\n this.abortMFA({\n error: errorText,\n console: 'Max Attempts'\n });\n return;\n }\n\n \tthis.mfa.step1.els.phoneInput.removeAttribute('data-invalid');\n \tif(!this.mfa.step2){\n \t\tthis.mfaBuildStep2();\n \t}\n //Prevent multiple submissions of the same wrong code in step 2\n this.mfa.step2.postString = null;\n //Successful post coming from step 1 - reset resendCount\n if(document.querySelector('.mfa-step-1')) this.mfa.step2.resendCount = 0;\n\n \t//Screen readers. If a user resends code, we want the instruction to be announced AGAIN even if the textcontent is unchanged..\n \tthis.mfa.step2.els.instruction.textContent = '';\n \t//must all be added as one block to trigger aria correctly\n \tlet textBlock = document.createElement('div');\n \ttextBlock.innerHTML = '
We just sent a 6 digit code to +' + this.mfa.step1.post.countryCode + ' ' + this.mfa.step1.post.phoneNumber + '.
';\n\n \t//Only insert the 'Didn't get it?' link if resendCount is 2 or greater\n \tif(this.mfa.step2.resendCount >= 2){\n\t\t\ttextBlock.appendChild(this.mfa.step2.els.textFailBlock);\n\t\t\ttextBlock.classList.add('text-failed');\n \t} else {\n\t\t\ttextBlock.classList.remove('text-failed');\n \t}\n \tthis.mfa.step2.els.instruction.appendChild(textBlock);\n \t\n \t//remove any errors that may be in effect\n \tthis.mfa.step2.els.codeInput.classList.remove('fl-show-user');\n \tthis.mfa.step2.els.codeError.textContent = '';\n\n\n \tif(!document.querySelector('.mfa-step-2')){\n \tthis.mfa.step2.els.codeInput.value = '';\n \t\tthis.mfaStep2();\n \t}else{\n \t\t//RESEND CODE link was clicked\n \t\tthis.mfa.step2.els.codeInput.value = '';\n \t\tthis.mfa.step2.els.codeInput.focus();\n \t}\n\n \tthis.loader.remove();\n \tthis.submitting = false;\n\n \n }).fail( () => {\n \tthis.abortMFA({ console: 'DoEntity/816 failed' });\n });\n\n }//END of SEND CODE\n\n\n mfaNoPhoneSubmit(e) {\n //console.log('SUBMITTING NO PHONE');\n e.preventDefault();//Prevent Natural Submission\n\n //Prevent double click submissions\n if(!this.submitting) {\n this.submitting = true;\n } else {\n //console.log('In process, cannot submit twice');\n return;\n }\n\n //Assign Post Values\n this.mfa.noPhone.post = {};\n this.mfa.noPhone.post.noPhone = this.mfa.noPhone.els.radio1.checked;\n //console.log(this.mfa.noPhone.post);\n\n this.loader = new ajaxLoader(document.querySelector('.sspr-swal .swal2-content'));\n\n //AJAX POST\n $.ajax({\n method: \"POST\",\n url: \"/asyncloader/DoEntity/815\",\n dataType: \"json\",\n data: this.mfa.noPhone.post\n }).done((data) => {\n //console.log(data);\n \n if(!data) {\n this.abortMFA({ console: 'DoEntity/815 returned no data' });\n return;\n }else if(data.error === 'error') {\n this.abortMFA({ console: 'DoEntity/815 returned an error' });\n return;\n }\n\n this.mfa.noPhone.response = data.mfa ? data.mfa : {};\n\n if(!this.mfa.noPhone.response.success){\n this.abortMFA({\n error: this.mfa.noPhone.response.errorMessage,\n console: 'DoEntity/815 finished but submit not successful'\n });\n } else {\n this.mfaSuccess({\n body: 'You have been placed in a no cell phone group. Please be aware you will need to contact the Helpdesk if you experience account access issues.'\n });\n\n }\n\n \n }).fail( () => {\n this.abortMFA({\n console: 'DoEntity/815 failed'\n });\n });\n\n\n }//END OF NO PHONE SUBMIT\n\n\n ssprStep1Submit(e) {\n //console.log('SUBMITTING NO PHONE');\n e.preventDefault();//Prevent Natural Submission\n\n //Prevent double click submissions\n if(!this.submitting) {\n this.submitting = true;\n } else {\n //console.log('In process, cannot submit twice');\n return;\n }\n\n //Assign Post Values\n this.sspr.step1.post = {};\n this.sspr.step1.emailString = this.sspr.step1.els.emailInput.value;\n this.sspr.step1.post.email = this.sspr.step1.emailString.trim();\n\n //console.log(this.sspr.step1.post);\n\n if(!this.sspr.step1.post.email.length){\n this.loader.remove();\n this.submitting = false;\n this.sspr.step1.els.emailError.textContent = '';\n this.sspr.step1.els.emailError.textContent = 'Error: Please enter an alternate email address.';\n this.elementSwell(this.sspr.step1.els.emailBlock);\n this.sspr.step1.els.emailInput.classList.add('fl-show-user');\n this.sspr.step1.els.emailInput.focus();\n return;\n }\n\n //stop multiple submission of an invalid email address\n let exactRepost = this.sspr.step1.postString && JSON.stringify(this.sspr.step1.post) === this.sspr.step1.postString;\n let postSuccessful = this.sspr.step1.response && this.sspr.step1.response.codeSent;\n\n var emailBlockError = () => {\n if(this.loader) this.loader.remove();\n this.submitting = false;\n this.sspr.step1.els.emailError.textContent = '';\n this.sspr.step1.els.emailError.textContent = this.sspr.step1.response.errorMessage ? ('Error: ' + this.sspr.step1.response.errorMessage) : 'Error: Email is not valid!';\n this.sspr.step1.els.emailInput.classList.add('fl-show-user');\n this.elementSwell(this.sspr.step1.els.emailBlock);\n this.sspr.step1.els.emailInput.focus();\n\n }\n\n if(exactRepost && !postSuccessful){\n emailBlockError();\n return;\n }\n\n this.loader = new ajaxLoader(document.querySelector('.sspr-swal .swal2-content'));\n $.ajax({\n method: \"POST\",\n url: \"/wse/do/818\",\n dataType: \"json\",\n data: this.sspr.step1.post\n }).done((data) => {\n //console.log(data);\n\n if(!data){\n this.abortSSPR({ console: 'DoEntity/818 returned no data' });\n return;\n } else if(data.error === 'error') {\n this.abortSSPR({ console: 'DoEntity/818 returned an error' });\n return;\n }\n\n this.sspr.step1.postString = JSON.stringify(this.sspr.step1.post);\n console.log(\"Post data:\");\n console.log( data );\n this.sspr.step1.response = data.Result.sspr ? data.Result.sspr : {};\n \n if(this.sspr.step1.response.codeSent){\n //Successful\n this.loader.remove();\n this.submitting = false;\n\n let bodyHtml = '
Alternate email verification sent to ' + this.sspr.step1.post.email + '. Please check your alternate email for a verification link to complete the registration process.
The verification link will expire in 24 hours.
';\n\n swal2({\n width: '35rem',\n customClass: 'sspr-swal',\n allowOutsideClick: true,\n title: 'Please Confirm Your Email',\n html: bodyHtml,\n type: 'info',\n focusConfirm: true,\n confirmButtonText: 'Close',\n });\n \n } else{\n //Unsuccessful\n emailBlockError();\n }\n\n }).fail( () => {\n this.abortSSPR({\n console: 'DoEntity/818 failed'\n });\n });\n\n }//END OF ssprStep1Submit\n\n\n mfaSuccess(options){\n if(!options) options = {};\n this.loader.remove();\n this.submitting = false;\n\n let headingText = options.heading ? options.heading : 'Success!';\n let bodyHtml = options.body ? options.body : 'The form was submitted successfully.';\n let btnText = this.data.sspr.showPrompt ? 'Continue' : 'Close';\n let swalWidth = options.width ? options.width : '';\n\n swal2({\n width: swalWidth,\n customClass: 'sspr-swal',\n allowOutsideClick: !this.data.sspr.showPrompt,\n title: headingText,\n html: bodyHtml,\n type: 'success',\n focusConfirm: true,\n confirmButtonText: btnText,\n\n }).then((result) => {\n if(result.value && this.data.sspr.showPrompt) {\n this.ssprPrompt();\n }\n });\n\n }\n\n\n mfaStep1(cb) {\n //Launch Popup\n swal2({\n width: '48rem',\n allowOutsideClick: false,\n customClass: 'sspr-swal mfa-step-1 has-footer-link',\n showConfirmButton: false,\n focusConfirm: false,\n title: this.mfa.step1.els.heading,\n html: this.mfa.step1.els.form,\n onBeforeOpen: () => {\n sweetAlertCustom();\n //Prevent focus from going to the close button.\n let closeBtn = document.querySelector('.swal2-popup button.swal2-close');\n if(closeBtn) closeBtn.setAttribute('tabindex', '-1');\n },\n onOpen: () => {\n let closeBtn = document.querySelector('.swal2-popup button.swal2-close');\n if(closeBtn) closeBtn.removeAttribute('tabindex');\n if(cb && typeof cb === 'function') cb();\n }\n });\n\n }\n\n\n mfaStep2(cb) {\n\n //Launch Popup\n this.submitting = false;\n swal2({\n width: '40rem',\n allowOutsideClick: false,\n customClass: 'sspr-swal mfa-step-2 has-footer-link',\n showConfirmButton: false,\n focusConfirm: false,\n title: this.mfa.step2.els.heading,\n html: this.mfa.step2.els.form,\n onBeforeOpen: () => {\n sweetAlertCustom();\n //Prevent focus from going to the close button.\n let closeBtn = document.querySelector('.swal2-popup button.swal2-close');\n if(closeBtn) closeBtn.setAttribute('tabindex', '-1');\n },\n onOpen: () => {\n let closeBtn = document.querySelector('.swal2-popup button.swal2-close');\n if(closeBtn) closeBtn.removeAttribute('tabindex');\n if(cb && typeof cb === 'function') cb();\n }\n });\n\n }\n\n\n mfaNoPhone(cb){\n //console.log('Launch No Phone');\n this.submitting = false;\n\n //Launch Popup\n swal2({\n width: '45rem',\n allowOutsideClick: false,\n customClass: 'sspr-swal mfa-no-phone-swal',\n showConfirmButton: false,\n focusConfirm: false,\n title: this.mfa.noPhone.els.heading,\n html: this.mfa.noPhone.els.form,\n onBeforeOpen: () => {\n sweetAlertCustom();\n //Prevent focus from going to the close button.\n let closeBtn = document.querySelector('.swal2-popup button.swal2-close');\n if(closeBtn) closeBtn.setAttribute('tabindex', '-1');\n },\n onOpen: () => {\n let closeBtn = document.querySelector('.swal2-popup button.swal2-close');\n if(closeBtn) closeBtn.removeAttribute('tabindex');\n if(cb && typeof cb === 'function') cb();\n }\n });\n\n }\n\n\n\n ssprStep1(cb) {\n //console.log('sspr step 1 launch');\n //Launch Popup\n swal2({\n width: '48rem',\n allowOutsideClick: false,\n customClass: 'sspr-swal sspr-step-1',\n showConfirmButton: false,\n focusConfirm: false,\n title: this.sspr.step1.els.heading,\n html: this.sspr.step1.els.form,\n onBeforeOpen: () => {\n sweetAlertCustom();\n //Prevent focus from going to the close button.\n let closeBtn = document.querySelector('.swal2-popup button.swal2-close');\n if(closeBtn) closeBtn.setAttribute('tabindex', '-1');\n },\n onOpen: () => {\n let closeBtn = document.querySelector('.swal2-popup button.swal2-close');\n if(closeBtn) closeBtn.removeAttribute('tabindex');\n if(cb && typeof cb === 'function') cb();\n }\n });\n\n }\n\n\n //multipurpose abort that can be used after mfa data is posted.\n abortMFA(options){\n if(!options){\n let options = {};\n }\n\n\tthis.loader.remove();\n\tthis.submitting = false;\n\n if(options.console){\n console.info(options.console);\n }\n\n let bodyHtml = options.error ? options.error : 'Something went wrong. We could not complete the request.';\n\tlet btnText = this.data.sspr.showPrompt ? 'Continue' : 'Close';\n\n\tswal2({\n allowOutsideClick: !this.data.sspr.showPrompt,\n\t customClass: 'sspr-swal',\n\t title: 'Error',\n\t html: bodyHtml,\n\t type: 'error',\n\t focusConfirm: true,\n\t confirmButtonText: btnText\n }).then((result) => {\n //console.log(result);\n if(result.value && this.data.sspr.showPrompt) {\n\t this.ssprPrompt();\n }\n });\n }\n\n abortSSPR(options){\n if(!options){\n let options = {};\n }\n\n if(this.loader) this.loader.remove();\n this.submitting = false;\n\n if(options.console){\n console.info(options.console);\n }\n\n let bodyHtml = options.error ? options.error : 'Something went wrong. We could not complete the request.';\n\n swal2({\n allowOutsideClick: true,\n customClass: 'sspr-swal',\n title: 'Error',\n html: bodyHtml,\n type: 'error',\n focusConfirm: true,\n confirmButtonText: 'Close'\n });\n }\n\n\n\n\n\n\n ssprPrompt(){\n\n console.log(\"In ssprPrompt();\");\n if(!this.data.sspr.showPrompt) return;\n //alert('SSPR Prompt would run now...');\n\n console.log(\"Building\");\n this.sspr = {};\n this.ssprBuildStep1();\n this.ssprStep1();\n\n }\n\n\n}//End of class\n\n\n\n\n\n//SSPR is turned on in theme setting and called from ksu_foundation_es6.js\nfunction ssprInit() {\n\n var sspr;\n console.log(\"In ssprInit\");\n\n $.getJSON( '/asyncloader/getEntity/814', (data) => {\n let ssprData = data.Result;\n console.log(\"---\");\n console.log( ssprData );\n console.log(\"---\");\n sspr = new Sspr({\n data : ssprData\n });\n console.log(\"In ssprInit:\");\n console.log( data );\n }).fail(() => {\n console.info('SSPR webservice failed');\n }); \n\n}\n","//Error Codes\n//421: User hit confirm address button. AJAX post finished, but the response did not have the WasSuccessful element.\n//521: User hit confirm address button. AJAX post failed.\n\nclass AddressValidate {\n\n constructor(options){\n console.log(options.data.AddressValidate);\n if (options.data.AddressValidate) {\n this.data = Object.values (options.data.AddressValidate.data);\n console.log(this.data);\n } else {\n return [];\n };\n this.knowledgeBaseURL = 'https://kent.teamdynamix.com/TDClient/2005/Portal/KB/?CategoryID=14452';\n // this.ssprData = \"22\";\n //console.log(this.data);\n //START\n this.disclaimer();\n }\n\n failAlert(errorCode){\n\n swal2(\"Confirmation Not Received\", \"Something went wrong and we were unable to receive your confirmation. You may be asked to confirm your information again next time you log into FlashLine. Error Code: \" + errorCode, \"error\").then(() => { \n console.info(\"Error Code: \" + errorCode);\n this.confirmResolve();\n });\n\n }\n\n successAlert(){\n\n swal2({\n width: '32rem',\n customClass: '',\n allowOutsideClick: false,\n title: 'Thank You!',\n html: '
You have successfully confirmed your information.
To learn more about how Kent State can use your data, visit the KSU Knowledge Base.
',\n type: 'success',\n focusConfirm: true,\n confirmButtonText: 'Close'\n\n }).then((result) => {\n //console.info(\"POST successful\");\n this.confirmResolve();\n\n if(result.value) {\n //console.info(\"Confirm Button\");\n }\n else if(result.dismiss === 'cancel'){\n //console.log('Cancel Button');\n }\n else if(result.dismiss === 'close' || result.dismiss === 'esc'){\n //console.log('User hit X or ESC');\n }\n\n });\n\n \n\n } \n\n disclaimer(){\n\n swal2Btns({\n width: '35rem',\n customClass: '',\n allowOutsideClick: false,\n title: 'Do we have your latest information?',\n html: '
You are seeing this prompt because the University needs to confirm your information is up-to-date. Please continue to review your personal information.
',\n type: 'warning',\n focusConfirm: true,\n confirmButtonText: 'Continue',\n cancelButtonText: 'Later'\n\n }).then((result) => {\n if(result.value) {\n this.step1();\n }\n else if(result.dismiss === 'cancel'){\n //console.log('User wants to do this later');\n }\n else if(result.dismiss === 'close' || result.dismiss === 'esc'){\n //console.log('User hit X or ESC');\n }\n\n });\n\n\n }\n\n\n getAddressBlock(iVal){\n let myData = this.data[iVal];\n\n let addressBlock = document.createElement('div');\n addressBlock.classList.add('address-block');\n console.log(myData);\n if(typeof myData.type === 'undefined') return addressBlock;\n\n function getLineEl(lineText, classString){\n let lineEl = document.createElement('div');\n lineEl.textContent = lineText;\n if(typeof classString !== 'undefined')lineEl.className = classString;\n return lineEl;\n }\n\n let options = {\n plainText : (typeof myData.purpose === 'string' && myData.purpose.trim()) ? myData.purpose.trim() : null,\n ariaOpen : 'Expand ' + myData.type + ' address definition',\n ariaClose : 'Close ' + myData.type + ' address definition'\n };\n\n // if(myData.type.toLowerCase() === 'permanent'){\n // options.customHTML = '
Permanent address is defined as a person’s primary residence. For domestic students, it is usually where their parents live or where they go after the semester and during breaks. For International students, it is their country of origin and must be a physical address.
';\n // }\n\n if(myData.type.toLowerCase() === 'local'){\n options.customHTML = '
Local address is an address that is off-campus and geographically near Kent or the campus a student attends. This is considered a temporary type of address.
';\n } else {\n options.customHTML = '
Permanent address is defined as a person’s primary residence. For domestic students, it is usually where their parents live or where they go after the semester and during breaks. For International students, it is their country of origin and must be a physical address.
';\n }\n\n let headingEl = getLineEl(myData.type, 'type');\n if(options.plainText || (typeof options.customHTML === 'string' && options.customHTML))headingEl.appendChild(infoBox.getToggle(options));\n addressBlock.appendChild(headingEl);\n\n let addressWrap = document.createElement('div');\n addressWrap.classList.add('address-wrap');\n\n //Start Date\n // if(typeof myData.startDate !== 'undefined'){\n // let dateString = myData.startDate + ' - ';\n // dateString += myData.endDate ? myData.endDate : '(No end date)';\n // addressWrap.appendChild(getLineEl(dateString, 'date'));\n // }\n\n let addressEl = document.createElement('div');\n addressEl.classList.add('address');\n if(typeof myData.line1 !== 'undefined'){\n if(myData.line1)addressEl.appendChild(getLineEl(myData.line1));\n if(myData.line2)addressEl.appendChild(getLineEl(myData.line2));\n if(myData.line3)addressEl.appendChild(getLineEl(myData.line3));\n // if(myData.line4)addressEl.appendChild(getLineEl(myData.line4));\n }else{\n addressEl.textContent = 'No address on file';\n addressEl.classList.add('fl-error');\n }\n addressWrap.appendChild(addressEl);\n\n var city = \"\";\n\n if(typeof myData.city !== 'undefined') \n city = myData.city;\n\n var state = \"\";\n if(typeof myData.state !== 'undefined')\n state = myData.state;\n\n var zip = \"\";\n if(typeof myData.zip !== 'undefined')\n zip = myData.zip;\n\n var zipFull = zip.toString().slice(0,5);\n\n var country = \"\";\n if(typeof myData.country !== 'undefined')\n country = myData.country;\n\n var cityStateZipCountry = city + \", \" + state + \" \" + zipFull + \" \" + country; \n\n addressWrap.appendChild(getLineEl(cityStateZipCountry, 'cityStateZipCountry'));\n\n\n\n // if(typeof myData.city !== 'undefined')addressWrap.appendChild(getLineEl(myData.city, 'city'));\n\n // if(typeof myData.state !== 'undefined')addressWrap.appendChild(getLineEl(myData.state, 'state'));\n\n // if(typeof myData.zip !== 'undefined')addressWrap.appendChild(getLineEl(myData.zip, 'zip'));\n\n addressBlock.appendChild(addressWrap);\n addressBlock.appendChild(document.createElement('hr'));\n return addressBlock;\n\n }\n\n\n step1() {\n\n swal2Btns({\n width: '35rem',\n customClass: 'address-validate address-review',\n allowOutsideClick: false,\n title: 'Do we have your latest information?',\n html: '
Please confirm the following addresses are correct:
',\n focusConfirm: true,\n confirmButtonText: 'Confirm All',\n cancelButtonText: 'Update',\n confirmButtonClass: 'button has-icon-left show-focus',\n cancelButtonClass: 'button has-icon-left',\n onBeforeOpen: () => {\n sweetAlertCustom();\n\n //Add Heading Icon\n let myIconDiv = document.createElement('div');\n myIconDiv.setAttribute('class', 'swal2-custom-icon');\n let myIcon = document.createElement('span');\n myIcon.setAttribute('aria-hidden', 'true');\n myIcon.setAttribute('class', 'fl-icon icon-verify-address');\n myIconDiv.appendChild(myIcon);\n let swalHeader = document.querySelector('.swal2-popup .swal2-header');\n let swalTitle = document.querySelector('.swal2-popup .swal2-title');\n swalHeader.insertBefore(myIconDiv, swalTitle);\n\n //Add Button Icons\n let cancelBtn = document.querySelector('.swal2-popup button.swal2-cancel');\n cancelBtn.innerHTML = '
Update';\n let confirmBtn = document.querySelector('.swal2-popup button.swal2-confirm');\n confirmBtn.innerHTML = '
Confirm All';\n console.log(this.data);\n // if(1 || this.data.length){\n\n let addressList = document.createElement('div');\n addressList.classList.add('address-list');\n \n // for(let i = 0; i < Object.keys(this.data).length; ++i){\n for(let i = 0; i < this.data.length; ++i){\n console.log(i);\n addressList.appendChild(this.getAddressBlock(i));\n }\n\n document.getElementById('swal2-content').appendChild(addressList);\n //}\n\n },\n onOpen: () => {\n },\n preConfirm: () => {\n\n return new Promise((resolve) => {\n //use ball fall animation instead of spinner\n this.confirmResolve = resolve;\n sweetAlertUseBallFall();\n\n //console.log(document.activeElement);\n\n //Settimeout for testing only, use AJAX below instead\n // setTimeout( () => {\n // this.successAlert();\n // //this.failAlert(421);\n // //this.failAlert(521);\n // }, 30000);\n\n \n $.ajax({\n method: \"POST\",\n cache: false,\n url: \"/asyncloader/doEntity/826\",\n dataType: \"json\",\n headers: {\n 'X-Function-Name': 'VerifyAddressInformation',\n },\n data: {},\n data: {'UserName': KSU_UserHelper.getUsername() },\n }).done((data) => {\n console.log(data);\n if(data == 'Success'){\n this.successAlert();\n } else{\n this.failAlert(421);\n }\n\n }).fail(() => {\n this.failAlert(521);\n });\n \n\n });//End of promise\n }\n }).then((result) => {\n if(result.value) {\n //THIS STAYS EMPTY!\n }\n else if(result.dismiss === 'cancel'){\n //console.log('Update Clicked');\n window.open('/sso/pickup/banweb?framed=true&dest=https://keys.kent.edu/ePROD/bwgkogad.P_SelectAtypView&framed=true', '_blank');\n }\n else if(result.dismiss === 'close' || result.dismiss === 'esc'){\n //console.log('User hit X or ESC');\n }\n\n });\n\n }\n\n\n}//End of class\n\n\n\n\nvar addressValidate;\n\n//SSPR popup is a theme setting. addressValidateInit() called from ksu_foundation_es6.js\nfunction addressValidateInit() {\n \n\n // var addressValidateData = {\n // \"addressValidate\" : [\n // {\n // \"type\" : \"Permanent\",\n // \"startDate\" : \"Jul 05, 2017\",\n // \"endDate\" : \"\",\n // \"line1\" : \"1234 Summit Drive\",\n // \"line2\" : \"Kent, OH 44240\",\n // \"line3\" : null,\n // \"line4\" : null,\n // \"county\" : \"Portage Co.\",\n // \"countryCode\" : \"USA\",\n // \"purpose\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor lectus justo. Aenean consequat metus nulla.\"\n // },\n // {\n // \"type\" : \"Local\",\n // \"startDate\" : \"Jul 05, 2017\",\n // \"endDate\" : \"\",\n // \"line1\" : \"1234 Summit Drive\",\n // \"line2\" : \"Kent, OH 44240\",\n // \"line3\" : null,\n // \"line4\" : null,\n // \"county\" : \"Portage Co.\",\n // \"countryCode\" : \"USA\",\n // \"purpose\": \"I am overridden by customHTML if provided.\"\n // }\n // ] \n // }\n\n\n\n// let ssprData = addressValidateData;//DUMMY DATA\n// addressValidate = new AddressValidate({\n// data : ssprData\n// });\n // console.log(\"line 306\");\n $.getJSON( '/asyncloader/getEntity/814', (data) => {\n let ssprData = data;\n \n //let ssprData = addressValidateData;//DUMMY DATA\n addressValidate = new AddressValidate({\n data : ssprData\n });\n }).fail(() => {\n console.info('SSPR webservice failed. Address Validation popup aborted.');\n }); \n\n}\n"]}