121 lines
4.9 KiB
PHP
121 lines
4.9 KiB
PHP
<select id="search-settings" class="d-block w-100 form-select" aria-describedby="<?= __('Search setting input') ?>"><option></option></select>
|
|
|
|
<script>
|
|
let selectData = []
|
|
for (const settingName in settingsFlattened) {
|
|
if (Object.hasOwnProperty.call(settingsFlattened, settingName)) {
|
|
const setting = settingsFlattened[settingName];
|
|
const selectID = settingName.replaceAll('.', '_')
|
|
selectData.push({
|
|
id: selectID,
|
|
text: setting.name,
|
|
setting: setting
|
|
})
|
|
}
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
$("#search-settings").select2({
|
|
data: selectData,
|
|
placeholder: '<?= __('Search a setting by typing here...') ?>',
|
|
templateResult: formatSettingSearchResult,
|
|
templateSelection: formatSettingSearchSelection,
|
|
matcher: settingMatcher,
|
|
sorter: settingSorter,
|
|
})
|
|
.on('select2:select', function (e) {
|
|
const selected = e.params.data
|
|
const settingPath = selected.setting['setting-path']
|
|
const {tabName, IDtoFocus} = getTabAndSettingIDFromPath(settingPath)
|
|
showSetting(selected, tabName, IDtoFocus)
|
|
$("#search-settings").val(null).trigger('change.select2');
|
|
})
|
|
})
|
|
|
|
function getTabAndSettingIDFromPath(settingPath) {
|
|
let settingPathTokenized = settingPath.split('.')
|
|
settingPathTokenized = settingPathTokenized.map((elem) => elem.replaceAll(/(\.|\W)/g, '_'))
|
|
const tabName = settingPathTokenized[0]
|
|
const IDtoFocus = 'sp-' + settingPathTokenized.slice(1).join('-')
|
|
return {tabName: tabName, IDtoFocus: IDtoFocus}
|
|
}
|
|
|
|
function showSetting(selected, tabName, IDtoFocus) {
|
|
const $navController = $('.settings-tabs').find('a.nav-link').filter(function() {
|
|
return $(this).text() == tabName
|
|
})
|
|
if ($navController.length == 1) {
|
|
$toFocus = $(`#${IDtoFocus}`).parent()
|
|
if ($navController.hasClass('active')) {
|
|
$toFocus[0].scrollIntoView()
|
|
$toFocus.find(`input#${selected.id}, textarea#${selected.id}`).focus()
|
|
} else {
|
|
$navController.on('shown.bs.tab.after-selection', () => {
|
|
$toFocus[0].scrollIntoView()
|
|
$toFocus.find(`input#${selected.id}, textarea#${selected.id}`).focus()
|
|
$navController.off('shown.bs.tab.after-selection')
|
|
}).tab('show')
|
|
}
|
|
}
|
|
}
|
|
|
|
function settingMatcher(params, data) {
|
|
if (params.term == null || params.term.trim() === '') {
|
|
return data;
|
|
}
|
|
if (data.text === undefined || data.setting === undefined) {
|
|
return null;
|
|
}
|
|
let modifiedData = $.extend({}, data, true);
|
|
const loweredTerms = params.term.trim().toLowerCase().split(' ')
|
|
let matchNumber = 0
|
|
for (let i = 0; i < loweredTerms.length; i++) {
|
|
const loweredTerm = loweredTerms[i];
|
|
const settingNameMatch = data.setting['true-name'].toLowerCase().indexOf(loweredTerm) > -1 || data.text.toLowerCase().indexOf(loweredTerm) > -1
|
|
const settingGroupMatch = data.setting['setting-path'].toLowerCase().indexOf(loweredTerm) > -1
|
|
const settingDescMatch = data.setting.description.toLowerCase().indexOf(loweredTerm) > -1
|
|
if (settingNameMatch || settingGroupMatch || settingDescMatch) {
|
|
matchNumber += 1
|
|
modifiedData.matchPriority = (settingNameMatch ? 10 : 0) + (settingGroupMatch ? 5 : 0) + (settingDescMatch ? 1 : 0)
|
|
}
|
|
}
|
|
if (matchNumber == loweredTerms.length && modifiedData.matchPriority > 0) {
|
|
return modifiedData;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function settingSorter(data) {
|
|
let sortedData = data.slice(0)
|
|
sortedData = sortedData.sort((a, b) => {
|
|
return a.matchPriority == b.matchPriority ? 0 : (b.matchPriority - a.matchPriority)
|
|
})
|
|
return sortedData;
|
|
}
|
|
|
|
function formatSettingSearchResult(state) {
|
|
if (!state.id) {
|
|
return state.text;
|
|
}
|
|
const $state = $('<div/>').append(
|
|
$('<div/>').addClass('d-flex justify-content-between')
|
|
.append(
|
|
$('<span/>').addClass('fw-bold').text(state.text),
|
|
$('<span/>').addClass('fw-light').text(state.setting['setting-path'].replaceAll('.', ' ▸ '))
|
|
),
|
|
$('<div/>').addClass('font-italic fw-light ms-3').text(state.setting['description'])
|
|
)
|
|
return $state
|
|
}
|
|
|
|
function formatSettingSearchSelection(state) {
|
|
return state.text
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.select2-container {
|
|
max-width: 100%;
|
|
min-width: 100%;
|
|
}
|
|
</style> |