311 lines
14 KiB
JavaScript
311 lines
14 KiB
JavaScript
/**
|
|
* Search Navbar
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
// ! Removed following code if you do't wish to use jQuery. Remember that navbar search functionality will stop working on removal.
|
|
if (typeof $ !== 'undefined') {
|
|
$(function () {
|
|
// ! TODO: Required to load after DOM is ready, did this now with jQuery ready.
|
|
window.Helpers.initSidebarToggle();
|
|
// Toggle Universal Sidebar
|
|
|
|
// Navbar Search with autosuggest (typeahead)
|
|
// ? You can remove the following JS if you don't want to use search functionality.
|
|
//----------------------------------------------------------------------------------
|
|
|
|
var searchToggler = $('.search-toggler'),
|
|
searchInputWrapper = $('.search-input-wrapper'),
|
|
searchInput = $('.search-input'),
|
|
contentBackdrop = $('.content-backdrop');
|
|
|
|
// Open search input on click of search icon
|
|
if (searchToggler.length) {
|
|
searchToggler.on('click', function () {
|
|
if (searchInputWrapper.length) {
|
|
searchInputWrapper.toggleClass('d-none');
|
|
searchInput.focus();
|
|
}
|
|
});
|
|
}
|
|
// Open search on 'CTRL+/'
|
|
$(document).on('keydown', function (event) {
|
|
let ctrlKey = event.ctrlKey,
|
|
slashKey = event.which === 191;
|
|
|
|
if (ctrlKey && slashKey) {
|
|
if (searchInputWrapper.length) {
|
|
searchInputWrapper.toggleClass('d-none');
|
|
searchInput.focus();
|
|
}
|
|
}
|
|
});
|
|
// Note: Following code is required to update container class of typeahead dropdown width on focus of search input. setTimeout is required to allow time to initiate Typeahead UI.
|
|
setTimeout(function () {
|
|
var twitterTypeahead = $('.twitter-typeahead');
|
|
|
|
searchInput.on('focus', function () {
|
|
if (searchInputWrapper.hasClass('container-xxl')) {
|
|
searchInputWrapper.find(twitterTypeahead).addClass('container-xxl');
|
|
twitterTypeahead.removeClass('container-fluid');
|
|
|
|
} else if (searchInputWrapper.hasClass('container-fluid')) {
|
|
searchInputWrapper.find(twitterTypeahead).addClass('container-fluid');
|
|
twitterTypeahead.removeClass('container-xxl');
|
|
}
|
|
});
|
|
}, 10);
|
|
|
|
if (searchInput.length) {
|
|
// Filter config
|
|
var filterConfig = function (data) {
|
|
return function findMatches(q, cb) {
|
|
let matches;
|
|
matches = [];
|
|
data.filter(function (i) {
|
|
if (i.name.toLowerCase().startsWith(q.toLowerCase())) {
|
|
matches.push(i);
|
|
} else if (
|
|
!i.name.toLowerCase().startsWith(q.toLowerCase()) &&
|
|
i.name.toLowerCase().includes(q.toLowerCase())
|
|
) {
|
|
matches.push(i);
|
|
matches.sort(function (a, b) {
|
|
return b.name < a.name ? 1 : -1;
|
|
});
|
|
} else {
|
|
return [];
|
|
}
|
|
});
|
|
cb(matches);
|
|
};
|
|
};
|
|
|
|
// Search JSON
|
|
var searchJson = 'search-navbar'; // For vertical layout
|
|
|
|
if ($('#layout-menu').hasClass('menu-horizontal')) {
|
|
var searchJson = 'search-navbar'; // For vertical layout
|
|
}
|
|
|
|
// Search API AJAX call
|
|
var searchData = $.ajax({
|
|
url: assetsPath + '../../admin/navbar/' + searchJson, //? Use your own search api instead
|
|
dataType: 'json',
|
|
async: false
|
|
}).responseJSON;
|
|
|
|
// Init typeahead on searchInput
|
|
searchInput.each(function () {
|
|
var $this = $(this);
|
|
|
|
searchInput
|
|
.typeahead(
|
|
{
|
|
hint: false,
|
|
classNames: {
|
|
menu: 'tt-menu navbar-search-suggestion',
|
|
cursor: 'active',
|
|
suggestion: 'suggestion d-flex justify-content-between px-4 py-2 w-100'
|
|
}
|
|
},
|
|
// ? Add/Update blocks as per need
|
|
// Pages
|
|
{
|
|
name: 'pages',
|
|
display: 'name',
|
|
limit: 6,
|
|
source: filterConfig(searchData.pages),
|
|
templates: {
|
|
header: '<h6 class="suggestions-header text-primary mb-0 mx-4 mt-3 pb-2">Pages</h6>',
|
|
suggestion: function ({ url, icon, name, path }) {
|
|
return (
|
|
'<a href="' +
|
|
//baseUrl +
|
|
url +
|
|
'">' +
|
|
'<div>' +
|
|
'<i class="ti ' +
|
|
icon +
|
|
' me-2"></i>' +
|
|
'<span class="align-middle">' +
|
|
path +
|
|
' / ' +
|
|
name +
|
|
'</span>' +
|
|
'</div>' +
|
|
'</a>'
|
|
);
|
|
},
|
|
notFound:
|
|
'<div class="not-found px-4 py-2">' +
|
|
'<h6 class="suggestions-header text-primary mb-2">Pages</h6>' +
|
|
'<p class="py-2 mb-0"><i class="ti ti-alert-circle ti-xs me-2"></i> No se encontro resultados</p>' +
|
|
'</div>'
|
|
}
|
|
},
|
|
// Categories
|
|
{
|
|
name: 'categories',
|
|
display: 'name',
|
|
limit: 6,
|
|
source: filterConfig(searchData.categories),
|
|
templates: {
|
|
header: '<h6 class="suggestions-header text-primary mb-0 mx-4 mt-3 pb-2">Categorías</h6>',
|
|
suggestion: function ({ slug, icon, name, path }) {
|
|
return (
|
|
'<a href="' +
|
|
//baseUrl +
|
|
'admin/f/' +
|
|
slug +
|
|
'">' +
|
|
'<div>' +
|
|
'<i class="ti ' +
|
|
icon +
|
|
' me-2"></i>' +
|
|
'<span class="align-middle">' +
|
|
path +
|
|
(path? ' / ': '') +
|
|
name +
|
|
'</span>' +
|
|
'</div>' +
|
|
'</a>'
|
|
);
|
|
},
|
|
notFound:
|
|
'<div class="not-found px-4 py-2">' +
|
|
'<h6 class="suggestions-header text-primary mb-2">Pages</h6>' +
|
|
'<p class="py-2 mb-0"><i class="ti ti-alert-circle ti-xs me-2"></i> No se encontro resultados</p>' +
|
|
'</div>'
|
|
}
|
|
},
|
|
// Files
|
|
/*
|
|
{
|
|
name: 'files',
|
|
display: 'name',
|
|
limit: 4,
|
|
source: filterConfig(searchData.files),
|
|
templates: {
|
|
header: '<h6 class="suggestions-header text-primary mb-0 mx-4 mt-3 pb-2">Files</h6>',
|
|
suggestion: function ({ src, name, subtitle, meta }) {
|
|
return (
|
|
'<a href="javascript:;">' +
|
|
'<div class="d-flex w-50">' +
|
|
'<img class="me-3" src="' +
|
|
assetsPath +
|
|
src +
|
|
'" alt="' +
|
|
name +
|
|
'" height="32">' +
|
|
'<div class="w-75">' +
|
|
'<h6 class="mb-0">' +
|
|
name +
|
|
'</h6>' +
|
|
'<small class="text-muted">' +
|
|
subtitle +
|
|
'</small>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<small class="text-muted">' +
|
|
meta +
|
|
'</small>' +
|
|
'</a>'
|
|
);
|
|
},
|
|
notFound:
|
|
'<div class="not-found px-4 py-2">' +
|
|
'<h6 class="suggestions-header text-primary mb-2">Files</h6>' +
|
|
'<p class="py-2 mb-0"><i class="ti ti-alert-circle ti-xs me-2"></i> No se encontro resultados</p>' +
|
|
'</div>'
|
|
}
|
|
},
|
|
// Members
|
|
{
|
|
name: 'members',
|
|
display: 'name',
|
|
limit: 4,
|
|
source: filterConfig(searchData.members),
|
|
templates: {
|
|
header: '<h6 class="suggestions-header text-primary mb-0 mx-4 mt-3 pb-2">Members</h6>',
|
|
suggestion: function ({ name, src, subtitle }) {
|
|
return (
|
|
'<a href="' +
|
|
baseUrl +
|
|
'app/user/view/account">' +
|
|
'<div class="d-flex align-items-center">' +
|
|
'<img class="rounded-circle me-3" src="' +
|
|
assetsPath +
|
|
src +
|
|
'" alt="' +
|
|
name +
|
|
'" height="32">' +
|
|
'<div class="user-info">' +
|
|
'<h6 class="mb-0">' +
|
|
name +
|
|
'</h6>' +
|
|
'<small class="text-muted">' +
|
|
subtitle +
|
|
'</small>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</a>'
|
|
);
|
|
},
|
|
notFound:
|
|
'<div class="not-found px-4 py-2">' +
|
|
'<h6 class="suggestions-header text-primary mb-2">Members</h6>' +
|
|
'<p class="py-2 mb-0"><i class="ti ti-alert-circle ti-xs me-2"></i> No se encontro resultados</p>' +
|
|
'</div>'
|
|
}
|
|
}
|
|
*/
|
|
)
|
|
//On typeahead result render.
|
|
.bind('typeahead:render', function () {
|
|
// Show content backdrop,
|
|
contentBackdrop.addClass('show').removeClass('fade');
|
|
})
|
|
// On typeahead select
|
|
.bind('typeahead:select', function (ev, suggestion) {
|
|
// Open selected page
|
|
if (suggestion.url !== 'javascript:;') {
|
|
window.location = baseUrl + suggestion.url;
|
|
}
|
|
})
|
|
// On typeahead close
|
|
.bind('typeahead:close', function () {
|
|
// Clear search
|
|
searchInput.val('');
|
|
$this.typeahead('val', '');
|
|
// Hide search input wrapper
|
|
searchInputWrapper.addClass('d-none');
|
|
// Fade content backdrop
|
|
contentBackdrop.addClass('fade').removeClass('show');
|
|
});
|
|
|
|
// On searchInput keyup, Fade content backdrop if search input is blank
|
|
searchInput.on('keyup', function () {
|
|
if (searchInput.val() == '') {
|
|
contentBackdrop.addClass('fade').removeClass('show');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Init PerfectScrollbar in search result
|
|
var psSearch;
|
|
$('.navbar-search-suggestion').each(function () {
|
|
psSearch = new PerfectScrollbar($(this)[0], {
|
|
wheelPropagation: false,
|
|
suppressScrollX: true
|
|
});
|
|
});
|
|
|
|
searchInput.on('keyup', function () {
|
|
psSearch.update();
|
|
});
|
|
}
|
|
});
|
|
}
|