|
|
@@ -0,0 +1,144 @@
|
|
|
+// shortcut suggest functionality
|
|
|
+// auto attaches to all [with-shortcuts] elements
|
|
|
+(function() {
|
|
|
+
|
|
|
+ let suggestionsOuter = null;
|
|
|
+
|
|
|
+ const debounce = (func, wait) => {
|
|
|
+ let timeout;
|
|
|
+ return function executedFunction(...args) {
|
|
|
+ const later = () => {
|
|
|
+ clearTimeout(timeout);
|
|
|
+ func(...args);
|
|
|
+ };
|
|
|
+ clearTimeout(timeout);
|
|
|
+ timeout = setTimeout(later, wait);
|
|
|
+ };
|
|
|
+ };
|
|
|
+
|
|
|
+ var lastTerm = '';
|
|
|
+ var returnedFunction = debounce(function (elem) {
|
|
|
+ var term = elem.val();
|
|
|
+ if (!!term && lastTerm !== term) {
|
|
|
+ $.get('/pro-suggest?term=' + $.trim(term), function (_data) {
|
|
|
+ $('.suggestions-outer.pro-suggestions').html(_data).removeClass('d-none');
|
|
|
+ });
|
|
|
+ lastTerm = term;
|
|
|
+ } else {
|
|
|
+ $('.suggestions-outer.pro-suggestions').addClass('d-none');
|
|
|
+ }
|
|
|
+ }, 250);
|
|
|
+
|
|
|
+ function handleKeydown(elem, e) {
|
|
|
+ let term = $.trim(elem.val());
|
|
|
+ let activeItem = suggestionsOuter.find('.suggest-item.active');
|
|
|
+ switch (e.which) {
|
|
|
+ case 27:
|
|
|
+ suggestionsOuter.addClass('d-none');
|
|
|
+ return false;
|
|
|
+ case 38:
|
|
|
+ if (activeItem.prev().length) {
|
|
|
+ activeItem.prev()
|
|
|
+ .addClass('active')
|
|
|
+ .siblings().removeClass('active');
|
|
|
+ activeItem = suggestionsOuter.find('.suggest-item.active');
|
|
|
+ if (activeItem.length) {
|
|
|
+ activeItem[0].scrollIntoView();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ case 40:
|
|
|
+ if (activeItem.next().length) {
|
|
|
+ activeItem.next()
|
|
|
+ .addClass('active')
|
|
|
+ .siblings().removeClass('active');
|
|
|
+ activeItem = suggestionsOuter.find('.suggest-item.active');
|
|
|
+ if (activeItem.length) {
|
|
|
+ activeItem[0].scrollIntoView();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ case 13:
|
|
|
+ if (activeItem.length) {
|
|
|
+ activeItem.first().click();
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ default:
|
|
|
+ if (!!term) {
|
|
|
+ suggestionsOuter
|
|
|
+ .html('<span class="d-block no-suggest-items">Searching...</span>')
|
|
|
+ .removeClass('d-none');
|
|
|
+ returnedFunction(elem);
|
|
|
+ } else {
|
|
|
+ suggestionsOuter.addClass('d-none');
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleKeypress(elem, e) {
|
|
|
+ var term = $.trim(elem.val());
|
|
|
+ if (!!term) {
|
|
|
+ suggestionsOuter
|
|
|
+ .html('<span class="d-block no-suggest-items">Searching...</span>')
|
|
|
+ .removeClass('d-none');
|
|
|
+ returnedFunction(elem);
|
|
|
+ } else {
|
|
|
+ suggestionsOuter.addClass('d-none');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function init() {
|
|
|
+
|
|
|
+ // make select[provider-search] hidden & insert a textbox with pro-suggest
|
|
|
+ $('select[provider-search]').each(function() {
|
|
|
+ let elem = $(this);
|
|
|
+ let input = $('<input type="text" placeholder="Pro">').addClass('pro-suggest-input form-control form-control-sm').insertAfter(elem);
|
|
|
+ if(elem.find('option:selected').length) {
|
|
|
+ input.val($.trim(elem.find('option:selected').first().text()));
|
|
|
+ }
|
|
|
+ $('<div class="position-relative"><div class="suggestions-outer pro-suggestions position-absolute d-none"></div></div>').insertAfter(input);
|
|
|
+ elem.hide();
|
|
|
+
|
|
|
+ input
|
|
|
+ .off('keydown.pro-suggest')
|
|
|
+ .on('keydown.pro-suggest', function (e) {
|
|
|
+ suggestionsOuter = $(this).next('.suggestions-outer');
|
|
|
+ return handleKeydown($(this), e);
|
|
|
+ })
|
|
|
+ .off('keypress.pro-suggest')
|
|
|
+ .on('keypress.pro-suggest', function (e) {
|
|
|
+ suggestionsOuter = $(this).next('.suggestions-outer');
|
|
|
+ return handleKeypress($(this), e);
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ $(document).on('click', '.suggest-item.pro-suggest[data-target-uid]', function () {
|
|
|
+
|
|
|
+ let uid = $(this).attr('data-target-uid'),
|
|
|
+ label = $.trim($(this).text());
|
|
|
+
|
|
|
+ // set select value
|
|
|
+ let select = $(this).closest('.position-relative')
|
|
|
+ .prev('.pro-suggest-input')
|
|
|
+ .prev('select[provider-search]');
|
|
|
+ select.empty().append($('<option value="' + uid + '" selected/>').text(label));
|
|
|
+ select.val(uid).trigger('change');
|
|
|
+
|
|
|
+ // set input value
|
|
|
+ $(this).closest('.position-relative')
|
|
|
+ .prev('.pro-suggest-input')
|
|
|
+ .val(label)
|
|
|
+ .trigger('change');
|
|
|
+
|
|
|
+ $('.suggestions-outer.pro-suggestions').addClass('d-none');
|
|
|
+
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ addMCInitializer('pro-suggest', init);
|
|
|
+})();
|
|
|
+
|
|
|
+
|
