\");\r\n this.announcement.addClass(\"autocomplete-announcement\");\r\n this.announcement.attr('aria-live', \"assertive\");\r\n\r\n this.container.append(this.announcement);\r\n\r\n this.resultList = $('');\r\n this.container.append(this.resultList);\r\n //this.el.attr('type', 'hidden');\r\n this.el.addClass('autocomplete-hide');\r\n this.el.attr('tabindex', -1);\r\n\r\n //Bind actions\r\n //Bind Focus\r\n this.searchBox.on('focus', $.proxy(this.onFocus, this));\r\n // close drop down when clicking away\r\n this.searchBox.on('blur', $.proxy(this.onBlur, this));\r\n // this is mostly navigation support\r\n this.searchBox.on('keyup', $.proxy(this.onKeyPress, this));\r\n // bind search\r\n this.searchBox.on('input propertychange paste', $.proxy(this.onInput, this));\r\n\r\n // stop all default behavior when the user hits enter, up arrow and down arrow\r\n this.searchBox.on('keydown keypress',\r\n function (event) {\r\n //up and down are IE/Edge specific values\r\n var keysToCancel = [\"Enter\", \"Up\", \"ArrowUp\",\"Down\",\"ArrowDown\"];\r\n //up arrow moves active up\r\n if (keysToCancel.includes(event.key)) {\r\n event.preventDefault();\r\n }\r\n });\r\n\r\n\r\n // Bind click event to list elements in results\r\n this.resultList.on(\"mousedown\", \"div.autocomplete-item\", $.proxy(this.selectItem, this));\r\n this.resultList.on({\r\n mouseenter: function() {\r\n $(this).siblings().removeClass(\"active\");\r\n $(this).addClass(\"active\");\r\n },\r\n mouseleave: function() {\r\n $(this).removeClass(\"active\");\r\n }\r\n },\r\n \"div.autocomplete-item\");\r\n\r\n //init selected value\r\n if (this.options.initialSelected !== null) {\r\n var template = this.populateTemplate(this.initialSelected);\r\n this.searchBox.val(template.find('.display-text').text().trim());\r\n this.el.val(template.find('.output-text').text().trim());\r\n this.selected = this.initialSelected;\r\n } else if (this.options.initialText !== '') {\r\n this.searchBox.val(this.options.initialText);\r\n this.selected = { text: this.options.initialText };\r\n }\r\n };\r\n\r\n myAutocomplete.prototype.onBlur = function () {\r\n this.emptyResultList();\r\n if (this.selected === null) {\r\n this.searchBox.val('');\r\n //trigger the change on the text box in case anyone is listening\r\n this.el.trigger('change');\r\n }\r\n };\r\n myAutocomplete.prototype.onFocus = function() {\r\n if (this.searchText.length === 0 && this.options.searchMinLength === 0) {\r\n this.search();\r\n }\r\n };\r\n myAutocomplete.prototype.onKeyPress = function (event) {\r\n //reset selected\r\n var keyID = event.key;\r\n app.util.console.log(\"grid keypress:\" + keyID);\r\n // handle keyboard controls\r\n switch (event.key) {\r\n case \"Escape\":\r\n // ESC closes list\r\n this.hideResultList();\r\n case \"Enter\":\r\n // Enter selects active item\r\n if (this.activeItem.length)\r\n this.selectItem();\r\n\r\n case \"ArrowUp\":\r\n case \"Up\":\r\n // up arrow moves active up\r\n this.navigateUp();\r\n case \"ArrowDown\":\r\n case \"Down\":\r\n // up arrow moves active down\r\n this.navigateDown();\r\n }\r\n };\r\n myAutocomplete.prototype.onInput = function (event) {\r\n //reset selected\r\n this.selected = {};\r\n var keyID = event.key;\r\n app.util.console.log(\"change:\" + keyID);\r\n // Check if search should happen\r\n if (this.searchText.length >= this.options.searchMinLength) {\r\n this.search();\r\n }\r\n //Handle backspace/delete so results don't remain with less than specified characters\r\n else if (this.resultList.length > 0) {\r\n this.resetSearchList();\r\n }\r\n };\r\n myAutocomplete.prototype.search = function () {\r\n this.resetSearchList();\r\n\r\n // show loading image and notify users\r\n this.announcement.text(\"Loading results.\");\r\n this.searchBox.addClass('autocomplete-ajax-loading');\r\n\r\n //Check if we've searched for this term before\r\n if (this.options.cacheResults && this.searchText in this.cache) {\r\n this.populateList(this.cache[this.searchText]);\r\n } else {\r\n clearTimeout(this.delayTimer);\r\n this.delayTimer = setTimeout($.proxy(function () {\r\n this.getResults();\r\n },\r\n this),\r\n 500);\r\n }\r\n };\r\n myAutocomplete.prototype.getResults = function () {\r\n\r\n var searchData = \"searchText=\" +this.searchText;\r\n if (this.options.additionaldataselector !== undefined && $(this.options.additionaldataselector).length)\r\n searchData += \"&\" + $(this.options.additionaldataselector).serialize();\r\n //searchData['searchText'] = this.searchText;\r\n //data.push({ name: \"searchText\", value: this.searchText });\r\n if (this.request != null) {\r\n this.request.abort();\r\n this.request = null;\r\n }\r\n this.request = $.ajax({ url: window.applicationPath + this.options.endPoint, data: searchData, dataType: \"json\", context: this, error: app.page.handleAjaxError }).done(function (data) {\r\n\r\n //Add results to cache\r\n this.cache[this.searchText] = data;\r\n\r\n //add results to shown list\r\n this.populateList(data);\r\n });\r\n };\r\n myAutocomplete.prototype.populateList = function (results) {\r\n this.emptyResultList();\r\n //update accessibility announcement\r\n if (results.length > 0) {\r\n this.announcement.text(results.length + \" records found, use up and down arrows to review\");\r\n } else {\r\n this.announcement.text(results.length + \" records found.\");\r\n }\r\n\r\n //Add results to the list\r\n for (var i = 0; i < results.length; i++) {\r\n //populate template\r\n var populatedTemplate = this.populateTemplate(results[i]);\r\n this.resultList.append(\"
\" +\r\n populatedTemplate +\r\n \"
\");\r\n }\r\n if (results.length === 1) {\r\n this.resultList.append(\"
Showing top record.
\");\r\n }else if (results.length > 0) {\r\n this.resultList.append(\"
Showing top \" + results.length + \" records.
\");\r\n } else {\r\n this.resultList.append(\"
No records found.
\");\r\n }\r\n this.showResultList();\r\n\r\n this.searchBox.removeClass('autocomplete-ajax-loading');\r\n };\r\n\r\n //Populate the template with the data provided\r\n myAutocomplete.prototype.populateTemplate = function(result) {\r\n var personOption = this.options.template;\r\n //Loop through each key in the list, and replace with the identifier\r\n for (var key in result) {\r\n const re = new RegExp('#=[ ]*' + key + '[ ]*#', 'gi');\r\n personOption = personOption.replace(re, result[key]);\r\n }\r\n\r\n //Remove all missing identifiers\r\n const cleanupRe = new RegExp('#=.*?#','g');\r\n personOption = personOption.replace(cleanupRe, '');\r\n\r\n //Add the output field\r\n if (this.options.outputField !== '' && typeof result[this.options.outputField] !== 'undefined') {\r\n personOption += '';\r\n }\r\n return personOption;\r\n };\r\n\r\n myAutocomplete.prototype.selectItem = function () {\r\n var displayText = this.activeItem.find('.display-text').text().trim();\r\n\r\n //output selected value\r\n var outputText = this.activeItem.find('.output-text').val();\r\n\r\n var itemData = this.activeItem.data(\"item-data\");\r\n //Call the base set value\r\n this.setValue(displayText, outputText, itemData);\r\n };\r\n myAutocomplete.prototype.setValue = function (displayText,outputText,itemData) {\r\n this.searchBox.val(displayText);\r\n if (outputText) {\r\n //output selected value\r\n this.el.val(outputText);\r\n } else {\r\n //output display value\r\n this.el.val(displayText);\r\n }\r\n if (itemData) {\r\n this.selected = itemData;\r\n } else {\r\n this.selected = { displayText: displayText };\r\n }\r\n this.emptyResultList();\r\n this.options.onSelect.call(this.selected);\r\n\r\n $(document).trigger('component-autocomplete-selected', this);\r\n $(document).trigger('component-autocomplete-selected-' + this.id, this);\r\n\r\n //trigger the change on the text box in case anyone is listening\r\n this.el.trigger('change');\r\n };\r\n\r\n myAutocomplete.prototype.clearSelectItem = function () {\r\n this.el.val('');\r\n this.selected = null;\r\n this.emptyResultList();\r\n this.options.onSelect.call(this.selected);\r\n\r\n $(document).trigger('component-autocomplete-selectcleared', this);\r\n $(document).trigger('component-autocomplete-selectcleared-' + this.id, this);\r\n\r\n $(document).trigger('component-autocomplete-selected', this);\r\n $(document).trigger('component-autocomplete-selected-' + this.id, this);\r\n };\r\n\r\n myAutocomplete.prototype.resetSearchList = function () {\r\n this.emptyResultList();\r\n this.clearSelectItem();\r\n };\r\n\r\n myAutocomplete.prototype.showResultList = function () {\r\n this.resultList.addClass('active');\r\n //Using the result list to display the record count/ no record message\r\n //if (this.resultList.find('div.autocomplete-item').length > 0) {\r\n // this.resultList.addClass('active');\r\n //} else {\r\n // this.hideResultList();\r\n //}\r\n };\r\n myAutocomplete.prototype.hideResultList = function () {\r\n this.resultList.removeClass('active');\r\n };\r\n myAutocomplete.prototype.emptyResultList = function () {\r\n this.hideResultList();\r\n this.resultList.empty();\r\n };\r\n\r\n myAutocomplete.prototype.navigateUp = function () {\r\n if (this.activeItem.length) {\r\n var index = this.resultItems.index(this.activeItem);\r\n this.activeItem.removeClass('active');\r\n this.activeItem.removeAttr('aria-selected');\r\n var newActiveIndex = index - 1;\r\n if (index > -1) {\r\n this.resultItems.eq(newActiveIndex).addClass('active');\r\n this.resultItems.eq(newActiveIndex).attr('aria-selected', 'true');\r\n this.searchBox.attr('aria-activedescendant', this.resultItems.eq(newActiveIndex).attr('id'));\r\n this.resultList.scrollTop(this.resultItems.eq(newActiveIndex)[0].offsetTop);\r\n }\r\n } else {\r\n // set the first element active\r\n this.resultItems.first().addClass('active');\r\n this.resultItems.first().attr('aria-selected', 'true');\r\n this.searchBox.attr('aria-activedescendant', this.resultItems.first().attr('id'));\r\n this.resultList.scrollTop(0);\r\n }\r\n };\r\n myAutocomplete.prototype.navigateDown = function () {\r\n if (this.activeItem.length && this.resultItems.index(this.activeItem) < this.resultItems.length - 1) {\r\n var index = this.resultItems.index(this.activeItem);\r\n this.activeItem.removeClass('active');\r\n this.activeItem.removeAttr('aria-selected');\r\n var newActiveIndex = index + 1;\r\n if (index < this.resultItems.length) {\r\n this.resultItems.eq(newActiveIndex).addClass('active');\r\n this.resultItems.eq(newActiveIndex).attr('aria-selected', 'true');\r\n this.searchBox.attr('aria-activedescendant', this.resultItems.eq(newActiveIndex).attr('id'));\r\n this.resultList.scrollTop(this.resultItems.eq(newActiveIndex)[0].offsetTop +\r\n this.resultItems.eq(newActiveIndex)[0].offsetHeight -\r\n this.resultList[0].offsetHeight);\r\n }\r\n } else {\r\n //set the first element active\r\n this.resultItems.first().addClass('active');\r\n this.resultItems.first().siblings().removeClass('active');\r\n this.resultItems.first().attr('aria-selected', 'true');\r\n this.searchBox.attr('aria-activedescendant', this.resultItems.first().attr('id'));\r\n this.resultList.scrollTop(0);\r\n }\r\n };\r\n\r\n myAutocomplete.prototype.generateId = function () {\r\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,\r\n function (c) {\r\n var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);\r\n return v.toString(16);\r\n });\r\n };\r\n return myAutocomplete;\r\n}());\r\n\r\napp.Autocomplete.BindSetButtons = function(el) {\r\n $('[data-autocomplete-action=\"set\"]', el).on('click',\r\n function () {\r\n var action = $(this);\r\n $('#' + action.data('autocomplete-target')).AutoComplete().setValue(action.data('autocomplete-set-text'), action.data('autocomplete-set-value'));\r\n });\r\n};\r\n","//*************************************************************************************\r\n//* WaMS Custom Validators\r\n//* Version 1.0\r\n//* Author: Damian Koch\r\n//* JavaScript component of custom ComponentModel.DataAnnotations.ValidationAttribute\r\n//* Adds client-side support of RequiredIf, and ValidYearDuration\r\n//* Requires jQuery, jQuery.validate, jQuery.validate.unobtrusive\r\n//*************************************************************************************\r\njQuery(function () {\r\n jQuery.validator.addMethod('validyearduration', function (value, element, params) {\r\n if (value < 0) {\r\n return false;\r\n }\r\n return true;\r\n }, '');\r\n\r\n jQuery.validator.unobtrusive.adapters.add('validyearduration', function (options) {\r\n options.rules['validyearduration'] = {};\r\n options.messages['validyearduration'] = options.message;\r\n });\r\n\r\n jQuery.validator.addMethod('requiredif', function (value, element, parameters) {\r\n var name = '[name=\"' + parameters['dependentproperty'] + '\"]';\r\n // get the target value (as a string, as that's what actual value will be)\r\n var targetvalue = parameters['targetvalue'];\r\n targetvalue = (targetvalue == null ? '' : targetvalue).toString();\r\n\r\n // get the actual value of the target control note - this probably needs to cater for more control types, e.g. radios\r\n var control = $(name, element.closest('form'));\r\n var controltype = control.attr('type');\r\n var actualvalue = controltype === 'checkbox' ? control.attr('checked').toString() : control.val();\r\n\r\n // if the condition is true, reuse the existing required field validator functionality\r\n if (targetvalue === actualvalue) return $.validator.methods.required.call(this, value, element, parameters);\r\n\r\n return true;\r\n });\r\n\r\n jQuery.validator.unobtrusive.adapters.add('requiredif', ['dependentproperty', 'targetvalue'], function (options) {\r\n options.rules['requiredif'] = { dependentproperty: options.params['dependentproperty'], targetvalue: options.params['targetvalue'] };\r\n options.messages['requiredif'] = options.message;\r\n });\r\n\r\n}(jQuery));\r\n\r\n"]}