Testing Alpha
This commit is contained in:
@ -4,42 +4,43 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
$(function () {
|
||||
window.Helpers.initSidebarToggle();
|
||||
// Toggle Universal Sidebar
|
||||
// ! 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)
|
||||
var searchToggler = $('.search-toggler'),
|
||||
searchInputWrapper = $('.search-input-wrapper'),
|
||||
searchInput = $('.search-input'),
|
||||
contentBackdrop = $('.content-backdrop');
|
||||
// Navbar Search with autosuggest (typeahead)
|
||||
// ? You can remove the following JS if you don't want to use search functionality.
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
// Open search input on click of search icon
|
||||
if (searchToggler.length) {
|
||||
searchToggler.on('click', function () {
|
||||
if (searchInputWrapper.length) {
|
||||
searchInputWrapper.toggleClass('d-none');
|
||||
searchInput.trigger('focus');
|
||||
}
|
||||
});
|
||||
var searchToggler = $('.search-toggler'),
|
||||
searchInputWrapper = $('.search-input-wrapper'),
|
||||
searchInput = $('.search-input'),
|
||||
contentBackdrop = $('.content-backdrop');
|
||||
|
||||
document.addEventListener('keydown', function (event) {
|
||||
const ctrlKey = event.ctrlKey;
|
||||
const slashKey = event.key === '/'; // Usa 'key' para obtener la tecla como texto
|
||||
// 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) {
|
||||
const searchInputWrapper = document.querySelector('.search-input-wrapper');
|
||||
const searchInput = document.querySelector('.search-input');
|
||||
|
||||
if (searchInputWrapper) {
|
||||
searchInputWrapper.classList.toggle('d-none'); // Alterna la visibilidad
|
||||
if (searchInput) {
|
||||
searchInput.focus(); // Coloca el foco en el input
|
||||
}
|
||||
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');
|
||||
@ -48,154 +49,262 @@ $(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) {
|
||||
// Función para normalizar cadenas (eliminar acentos)
|
||||
function normalizeString(str) {
|
||||
return str
|
||||
.normalize('NFD')
|
||||
.replace(/[\u0300-\u036f]/g, '')
|
||||
.toLowerCase();
|
||||
}
|
||||
|
||||
// Filter config con soporte para ignorar acentos
|
||||
var filterConfig = function (data) {
|
||||
return function findMatches(q, cb) {
|
||||
let matches = [];
|
||||
|
||||
// Normalizar la consulta
|
||||
const normalizedQuery = normalizeString(q);
|
||||
|
||||
data.filter(function (i) {
|
||||
const normalizedName = normalizeString(i.name);
|
||||
|
||||
if (normalizedName.startsWith(normalizedQuery)) {
|
||||
matches.push(i);
|
||||
} else if (
|
||||
!normalizedName.startsWith(normalizedQuery) &&
|
||||
normalizedName.includes(normalizedQuery)
|
||||
) {
|
||||
matches.push(i);
|
||||
|
||||
// Ordenar por coincidencia secundaria
|
||||
matches.sort(function (a, b) {
|
||||
return b.name < a.name ? 1 : -1;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
cb(matches);
|
||||
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')) {
|
||||
// Search JSON
|
||||
var searchJson = 'search-navbar'; // For vertical layout
|
||||
}
|
||||
|
||||
// Search API AJAX call
|
||||
var searchData = $.ajax({
|
||||
url: assetsPath + '../../admin/' + searchJson, //? Use your own search api instead
|
||||
dataType: 'json',
|
||||
async: false
|
||||
}).responseJSON;
|
||||
if ($('#layout-menu').hasClass('menu-horizontal')) {
|
||||
var searchJson = 'search-navbar'; // For vertical layout
|
||||
}
|
||||
|
||||
// Init typeahead on searchInput
|
||||
searchInput.each(function () {
|
||||
var $this = $(this);
|
||||
// Search API AJAX call
|
||||
var searchData = $.ajax({
|
||||
url: assetsPath + '../../admin/navbar/' + searchJson, //? Use your own search api instead
|
||||
dataType: 'json',
|
||||
async: false
|
||||
}).responseJSON;
|
||||
|
||||
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'
|
||||
// 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>'
|
||||
}
|
||||
}
|
||||
},
|
||||
// Páginas
|
||||
{
|
||||
name: 'pages',
|
||||
display: 'name',
|
||||
limit: 8,
|
||||
source: filterConfig(searchData.pages),
|
||||
templates: {
|
||||
header: '<h6 class="suggestions-header text-primary mb-0 mx-4 mt-3 pb-2">Páginas</h6>',
|
||||
suggestion: function ({ url, icon, name }) {
|
||||
return (
|
||||
'<a href="' +
|
||||
url +
|
||||
'">' +
|
||||
'<div>' +
|
||||
'<i class="ti ' +
|
||||
icon +
|
||||
' me-2"></i>' +
|
||||
'<span class="align-middle">' +
|
||||
name +
|
||||
'</span>' +
|
||||
'</div>' +
|
||||
'</a>'
|
||||
);
|
||||
},
|
||||
notFound:
|
||||
'<div class="not-found px-4 py-2">' +
|
||||
'<h6 class="suggestions-header text-primary mb-2">Páginas</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');
|
||||
}
|
||||
)
|
||||
//On typeahead result render.
|
||||
.on('typeahead:render', function () {
|
||||
// Show content backdrop,
|
||||
contentBackdrop.addClass('show').removeClass('fade');
|
||||
})
|
||||
// On typeahead select
|
||||
.on('typeahead:select', function (ev, suggestion) {
|
||||
// Open selected page
|
||||
if (suggestion.url !== 'javascript:;') window.location = suggestion.url;
|
||||
})
|
||||
// On typeahead close
|
||||
.on('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');
|
||||
});
|
||||
});
|
||||
|
||||
// Init PerfectScrollbar in search result
|
||||
var psSearch;
|
||||
$('.navbar-search-suggestion').each(function () {
|
||||
psSearch = new PerfectScrollbar($(this)[0], {
|
||||
wheelPropagation: false,
|
||||
suppressScrollX: true
|
||||
});
|
||||
});
|
||||
|
||||
// On searchInput keyup, Fade content backdrop if search input is blank
|
||||
searchInput.on('keyup', function () {
|
||||
if (searchInput.val() == '') contentBackdrop.addClass('fade').removeClass('show');
|
||||
psSearch.update();
|
||||
});
|
||||
});
|
||||
|
||||
// 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();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user