455 lines
17 KiB
JavaScript
455 lines
17 KiB
JavaScript
|
class DoxygenAwesomeReadtheDocsSearch {
|
||
|
|
static searchResultsText=[
|
||
|
|
"Sorry, no pages matching your query.",
|
||
|
|
"Search finished, found <b>1</b> page matching the search query.",
|
||
|
|
"Search finished, found <b>$num</b> pages matching the search query.",
|
||
|
|
];
|
||
|
|
static _liveResultsAlignment = 'right';
|
||
|
|
static _liveResultsPositionFrame = null;
|
||
|
|
static _liveSearchAttached = false;
|
||
|
|
static _projectSlug = 'doxygen-awesome-css';
|
||
|
|
static _versionSlug = 'latest';
|
||
|
|
|
||
|
|
static get serverUrl() {
|
||
|
|
const serverUrlSuffix = '_/api/v3/';
|
||
|
|
const domainName = globalThis.location.hostname;
|
||
|
|
console.log(`Domain name: ${domainName}`);
|
||
|
|
|
||
|
|
if (domainName === 'localhost') {
|
||
|
|
let tmpServerUrl = serverUrl;
|
||
|
|
while (tmpServerUrl.endsWith('/')) {
|
||
|
|
tmpServerUrl = tmpServerUrl.slice(0, -1);
|
||
|
|
}
|
||
|
|
console.warn('Localhost detected, you probably need to bypass CORS');
|
||
|
|
return `${tmpServerUrl}/${serverUrlSuffix}`;
|
||
|
|
}
|
||
|
|
return `https://${domainName}/${serverUrlSuffix}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
static init(alignment = 'rightAlign', { projectSlug = 'doxygen-awesome-css', versionSlug = 'latest' } = {}) {
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._liveResultsAlignment = alignment === 'leftAlign' ? 'left' : 'right';
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._projectSlug = projectSlug;
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._versionSlug = versionSlug;
|
||
|
|
|
||
|
|
const realSearchBox = globalThis.SearchBox;
|
||
|
|
globalThis.SearchBox = function(name, resultsPath, extension) {
|
||
|
|
if (realSearchBox) {
|
||
|
|
realSearchBox.call(this, name, resultsPath, extension);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.OnSearchFieldFocus = function() {};
|
||
|
|
|
||
|
|
const originalClose = this.CloseResultsWindow;
|
||
|
|
this.CloseResultsWindow = function() {
|
||
|
|
if (originalClose) {
|
||
|
|
originalClose.call(this);
|
||
|
|
}
|
||
|
|
const field = this.DOMSearchField ? this.DOMSearchField() : null;
|
||
|
|
if (field?.id === document.activeElement?.id) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
// Re-focus the search input if it is replaced in the DOM while focused.
|
||
|
|
// On mobile, viewport resize (triggered by the OSK opening) can cause
|
||
|
|
// menu.js resetState() to recreate the input element, losing focus.
|
||
|
|
const observer = new MutationObserver(function() {
|
||
|
|
const field = document.getElementById('MSearchField');
|
||
|
|
if (field && DoxygenAwesomeReadtheDocsSearch._searchFieldHadFocus) {
|
||
|
|
field.focus();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if (document.body) {
|
||
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._attachLiveSearch();
|
||
|
|
} else {
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._attachLiveSearch();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('focusin', function(e) {
|
||
|
|
if (e.target?.id === 'MSearchField') {
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._searchFieldHadFocus = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
document.addEventListener('focusout', function(e) {
|
||
|
|
if (e.target?.id === 'MSearchField') {
|
||
|
|
setTimeout(function() {
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._searchFieldHadFocus = false;
|
||
|
|
}, 0);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener('click', function(e) {
|
||
|
|
const dropdown = document.getElementById('RTDLiveResults');
|
||
|
|
const field = document.getElementById('MSearchField');
|
||
|
|
if (dropdown && !dropdown.contains(e.target) && e.target !== field) {
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._hideLiveResults();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
globalThis.searchFor = function(query, page, count) {
|
||
|
|
const results = document.getElementById('searchresults');
|
||
|
|
|
||
|
|
// Get the title
|
||
|
|
const pageTitle = document.querySelector('div.title');
|
||
|
|
const originalTitle = pageTitle ? pageTitle.textContent : '';
|
||
|
|
let pageTitleStates = ["Searching", "Searching .", "Searching ..", "Searching ..."];
|
||
|
|
let pageTitleIndex = 0;
|
||
|
|
|
||
|
|
// Function to update the page title
|
||
|
|
function updatePageTitle() {
|
||
|
|
if (pageTitle) pageTitle.textContent = pageTitleStates[pageTitleIndex];
|
||
|
|
pageTitleIndex = (pageTitleIndex + 1) % pageTitleStates.length;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Start the interval to update the page title
|
||
|
|
let titleInterval = setInterval(updatePageTitle, 500);
|
||
|
|
|
||
|
|
// The summary will be displayed at the top of the search results
|
||
|
|
let resultSummary = document.createElement('p');
|
||
|
|
resultSummary.className = 'search-summary';
|
||
|
|
results.appendChild(resultSummary);
|
||
|
|
|
||
|
|
// Put all results into an unordered list
|
||
|
|
let resultList = document.createElement('ul');
|
||
|
|
resultList.className = 'search';
|
||
|
|
results.appendChild(resultList);
|
||
|
|
|
||
|
|
// readthedocs metadata
|
||
|
|
const projectSlug = DoxygenAwesomeReadtheDocsSearch.projectSlug;
|
||
|
|
const projectVersion = DoxygenAwesomeReadtheDocsSearch.versionSlug;
|
||
|
|
|
||
|
|
const ctx = {
|
||
|
|
query, resultSummary, resultList, titleInterval, pageTitle, originalTitle, firstUrl: true
|
||
|
|
};
|
||
|
|
|
||
|
|
// pull requests are not indexed, so use the default version
|
||
|
|
const versionReady = /^\d+$/.test(projectVersion)
|
||
|
|
? DoxygenAwesomeReadtheDocsSearch.getReadTheDocsDefaultVersion(projectSlug)
|
||
|
|
: Promise.resolve(projectVersion);
|
||
|
|
|
||
|
|
versionReady.then(function(resolvedVersion) {
|
||
|
|
const url = `${DoxygenAwesomeReadtheDocsSearch.serverUrl}search/?q=project:${projectSlug}/${resolvedVersion}+${query}&page=${page + 1}&page_size=${count}`;
|
||
|
|
console.log(url);
|
||
|
|
DoxygenAwesomeReadtheDocsSearch.fetchResults(url, ctx);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
static _attachLiveSearch() {
|
||
|
|
if (DoxygenAwesomeReadtheDocsSearch._liveSearchAttached) return;
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._liveSearchAttached = true;
|
||
|
|
|
||
|
|
let debounceTimer = null;
|
||
|
|
|
||
|
|
function onInput() {
|
||
|
|
clearTimeout(debounceTimer);
|
||
|
|
const field = document.getElementById('MSearchField');
|
||
|
|
if (!field) return;
|
||
|
|
const query = field.value.trim();
|
||
|
|
if (!query) {
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._hideLiveResults();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
debounceTimer = setTimeout(function() {
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._runLiveSearch(query);
|
||
|
|
}, 300);
|
||
|
|
}
|
||
|
|
|
||
|
|
function attachToField() {
|
||
|
|
const field = document.getElementById('MSearchField');
|
||
|
|
if (!field || field._rtdLiveSearchAttached) return;
|
||
|
|
field._rtdLiveSearchAttached = true;
|
||
|
|
field.setAttribute('autocomplete', 'off');
|
||
|
|
field.addEventListener('input', onInput);
|
||
|
|
field.addEventListener('keydown', DoxygenAwesomeReadtheDocsSearch._handleLiveSearchKeydown);
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._scheduleLiveResultsPositionUpdate();
|
||
|
|
}
|
||
|
|
|
||
|
|
attachToField();
|
||
|
|
|
||
|
|
// Re-attach when the DOM changes (e.g. menu.js recreates the field on mobile)
|
||
|
|
const fieldObserver = new MutationObserver(attachToField);
|
||
|
|
fieldObserver.observe(document.body, { childList: true, subtree: true });
|
||
|
|
|
||
|
|
window.addEventListener('resize', DoxygenAwesomeReadtheDocsSearch._scheduleLiveResultsPositionUpdate);
|
||
|
|
}
|
||
|
|
|
||
|
|
static _runLiveSearch(query) {
|
||
|
|
const projectSlug = DoxygenAwesomeReadtheDocsSearch.projectSlug;
|
||
|
|
const projectVersion = DoxygenAwesomeReadtheDocsSearch.versionSlug;
|
||
|
|
|
||
|
|
const versionReady = /^\d+$/.test(projectVersion)
|
||
|
|
? DoxygenAwesomeReadtheDocsSearch.getReadTheDocsDefaultVersion(projectSlug)
|
||
|
|
: Promise.resolve(projectVersion);
|
||
|
|
|
||
|
|
versionReady.then(function(resolvedVersion) {
|
||
|
|
const url = `${DoxygenAwesomeReadtheDocsSearch.serverUrl}search/?q=project:${projectSlug}/${resolvedVersion}+${query}&page=1&page_size=5`;
|
||
|
|
fetch(url)
|
||
|
|
.then(function(response) {
|
||
|
|
if (!response.ok) throw new Error(response.statusText);
|
||
|
|
return response.json();
|
||
|
|
})
|
||
|
|
.then(function(data) {
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._showLiveResults(query, data.results || []);
|
||
|
|
})
|
||
|
|
.catch(function() {
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._hideLiveResults();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
static _showLiveResults(query, results) {
|
||
|
|
let dropdown = document.getElementById('RTDLiveResults');
|
||
|
|
if (!dropdown) {
|
||
|
|
dropdown = document.createElement('div');
|
||
|
|
dropdown.id = 'RTDLiveResults';
|
||
|
|
dropdown.addEventListener('keydown', DoxygenAwesomeReadtheDocsSearch._handleLiveSearchKeydown);
|
||
|
|
document.body.appendChild(dropdown);
|
||
|
|
}
|
||
|
|
|
||
|
|
dropdown.innerHTML = '';
|
||
|
|
|
||
|
|
if (results.length === 0) {
|
||
|
|
const empty = document.createElement('div');
|
||
|
|
empty.className = 'rtd-live-empty';
|
||
|
|
empty.textContent = 'No results found.';
|
||
|
|
dropdown.appendChild(empty);
|
||
|
|
} else {
|
||
|
|
const list = document.createElement('ul');
|
||
|
|
list.className = 'rtd-live-list';
|
||
|
|
for (const item of results) {
|
||
|
|
const li = document.createElement('li');
|
||
|
|
const a = document.createElement('a');
|
||
|
|
a.className = 'rtd-live-item';
|
||
|
|
a.href = `${item.domain}${item.path}`;
|
||
|
|
a.tabIndex = 0;
|
||
|
|
|
||
|
|
const title = document.createElement('span');
|
||
|
|
title.className = 'rtd-live-title';
|
||
|
|
title.textContent = item.title;
|
||
|
|
a.appendChild(title);
|
||
|
|
|
||
|
|
if (item.blocks && item.blocks.length > 0) {
|
||
|
|
const snippet = document.createElement('span');
|
||
|
|
snippet.className = 'rtd-live-snippet';
|
||
|
|
let snipHtml = item.blocks[0].highlights.content.join(' … ');
|
||
|
|
snipHtml = snipHtml.replaceAll(/<span>(.*?)<\/span>/g, '<mark>$1</mark>');
|
||
|
|
snippet.innerHTML = snipHtml;
|
||
|
|
a.appendChild(snippet);
|
||
|
|
}
|
||
|
|
|
||
|
|
li.appendChild(a);
|
||
|
|
list.appendChild(li);
|
||
|
|
}
|
||
|
|
dropdown.appendChild(list);
|
||
|
|
}
|
||
|
|
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._positionLiveResults(dropdown);
|
||
|
|
dropdown.style.display = 'block';
|
||
|
|
}
|
||
|
|
|
||
|
|
static _positionLiveResults(dropdown) {
|
||
|
|
const field = document.getElementById('MSearchField');
|
||
|
|
const box = document.getElementById('MSearchBox');
|
||
|
|
const anchor = box || field;
|
||
|
|
if (!anchor) return;
|
||
|
|
const rect = anchor.getBoundingClientRect();
|
||
|
|
const scrollX = window.scrollX;
|
||
|
|
const scrollY = window.scrollY;
|
||
|
|
const viewportWidth = document.documentElement.clientWidth;
|
||
|
|
dropdown.style.top = `${rect.bottom + scrollY}px`;
|
||
|
|
|
||
|
|
if (window.matchMedia('(max-width: 767px)').matches) {
|
||
|
|
dropdown.style.left = '';
|
||
|
|
dropdown.style.right = '';
|
||
|
|
dropdown.style.minWidth = '';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
dropdown.style.minWidth = `${Math.max(rect.width, 260)}px`;
|
||
|
|
if (DoxygenAwesomeReadtheDocsSearch._liveResultsAlignment === 'left') {
|
||
|
|
dropdown.style.left = `${rect.left + scrollX}px`;
|
||
|
|
dropdown.style.right = '';
|
||
|
|
} else {
|
||
|
|
dropdown.style.left = '';
|
||
|
|
dropdown.style.right = `${viewportWidth - rect.right}px`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
static _hideLiveResults(restoreFocus = false) {
|
||
|
|
const dropdown = document.getElementById('RTDLiveResults');
|
||
|
|
if (dropdown) {
|
||
|
|
dropdown.style.display = 'none';
|
||
|
|
}
|
||
|
|
if (restoreFocus) {
|
||
|
|
const field = document.getElementById('MSearchField');
|
||
|
|
if (field) field.focus();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
static _scheduleLiveResultsPositionUpdate() {
|
||
|
|
if (DoxygenAwesomeReadtheDocsSearch._liveResultsPositionFrame) return;
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._liveResultsPositionFrame = window.requestAnimationFrame(function() {
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._liveResultsPositionFrame = null;
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._updateLiveResultsPosition();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
static _updateLiveResultsPosition() {
|
||
|
|
const dropdown = document.getElementById('RTDLiveResults');
|
||
|
|
if (!dropdown || dropdown.style.display === 'none') return;
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._positionLiveResults(dropdown);
|
||
|
|
}
|
||
|
|
|
||
|
|
static _handleLiveSearchKeydown(e) {
|
||
|
|
if (e.key === 'Escape') {
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._hideLiveResults(true);
|
||
|
|
} else if (e.key === 'ArrowDown') {
|
||
|
|
e.preventDefault();
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._moveLiveResultFocus(1);
|
||
|
|
} else if (e.key === 'ArrowUp') {
|
||
|
|
e.preventDefault();
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._moveLiveResultFocus(-1);
|
||
|
|
} else if (e.key === 'Enter') {
|
||
|
|
const focused = document.querySelector('#RTDLiveResults .rtd-live-item:focus');
|
||
|
|
if (focused) {
|
||
|
|
e.preventDefault();
|
||
|
|
focused.click();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
static _moveLiveResultFocus(direction) {
|
||
|
|
const dropdown = document.getElementById('RTDLiveResults');
|
||
|
|
if (!dropdown || dropdown.style.display === 'none') return;
|
||
|
|
const items = Array.from(dropdown.querySelectorAll('.rtd-live-item'));
|
||
|
|
if (items.length === 0) return;
|
||
|
|
const current = document.activeElement;
|
||
|
|
const idx = items.indexOf(current);
|
||
|
|
let next;
|
||
|
|
if (idx === -1) {
|
||
|
|
next = direction > 0 ? items[0] : items.at(-1);
|
||
|
|
} else {
|
||
|
|
next = items[idx + direction];
|
||
|
|
}
|
||
|
|
if (next) next.focus();
|
||
|
|
}
|
||
|
|
|
||
|
|
static fetchResults(url, ctx) {
|
||
|
|
fetch(url)
|
||
|
|
.then(function(response) {
|
||
|
|
if (!response.ok) throw new Error(response.statusText);
|
||
|
|
return response.json();
|
||
|
|
})
|
||
|
|
.then(function(data) {
|
||
|
|
// Add the query to the search field
|
||
|
|
// This seems only be working if applied in the fetch success handler...
|
||
|
|
// maybe the field is not available before this point
|
||
|
|
const searchField = document.getElementById('MSearchField');
|
||
|
|
if (searchField) searchField.value = ctx.query;
|
||
|
|
|
||
|
|
if (ctx.firstUrl) {
|
||
|
|
if (data.count === 1) {
|
||
|
|
ctx.resultSummary.innerHTML = DoxygenAwesomeReadtheDocsSearch.searchResultsText[1];
|
||
|
|
} else if (data.count > 1) {
|
||
|
|
ctx.resultSummary.innerHTML = DoxygenAwesomeReadtheDocsSearch.searchResultsText[2].replace(/\$num/, data.count);
|
||
|
|
} else {
|
||
|
|
ctx.resultSummary.innerHTML = DoxygenAwesomeReadtheDocsSearch.searchResultsText[0];
|
||
|
|
}
|
||
|
|
ctx.firstUrl = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
data.results.forEach(function(item) {
|
||
|
|
DoxygenAwesomeReadtheDocsSearch.appendResultItem(ctx.resultList, item);
|
||
|
|
});
|
||
|
|
|
||
|
|
if (data.next) {
|
||
|
|
DoxygenAwesomeReadtheDocsSearch.fetchResults(data.next, ctx);
|
||
|
|
} else {
|
||
|
|
// Clear the interval when the search is complete
|
||
|
|
clearInterval(ctx.titleInterval);
|
||
|
|
if (ctx.pageTitle) ctx.pageTitle.textContent = ctx.originalTitle;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
static appendResultItem(resultList, item) {
|
||
|
|
const resultItem = document.createElement('li');
|
||
|
|
resultItem.className = 'search-result';
|
||
|
|
const resultItemUrl = `${item.domain}${item.path}`;
|
||
|
|
const resultItemTitleLink = document.createElement('a');
|
||
|
|
const resultItemTitleHeading = document.createElement('h3');
|
||
|
|
resultItemTitleHeading.appendChild(resultItemTitleLink);
|
||
|
|
resultItemTitleLink.href = resultItemUrl;
|
||
|
|
resultItemTitleLink.textContent = item.title;
|
||
|
|
resultItem.append(resultItemTitleHeading);
|
||
|
|
resultList.append(resultItem);
|
||
|
|
|
||
|
|
const resultItemParagraph = document.createElement('p');
|
||
|
|
resultItemParagraph.className = 'context';
|
||
|
|
for (const block of item.blocks) {
|
||
|
|
let blockContent = block.highlights.content.join(', ');
|
||
|
|
blockContent = blockContent.replaceAll(/<span>(.*?)<\/span>/g, '<span class="highlighted">$1</span>');
|
||
|
|
resultItemParagraph.innerHTML += blockContent;
|
||
|
|
|
||
|
|
const blockName = `#${block.title.toLowerCase().replaceAll(' ', '-')}`;
|
||
|
|
const blockUrl = resultItemUrl + blockName;
|
||
|
|
const blockLink = document.createElement('a');
|
||
|
|
blockLink.href = blockUrl;
|
||
|
|
blockLink.textContent = "More...";
|
||
|
|
resultItemParagraph.append(document.createTextNode(' '));
|
||
|
|
resultItemParagraph.append(blockLink);
|
||
|
|
resultItemParagraph.append(document.createElement('br'));
|
||
|
|
}
|
||
|
|
resultItem.append(resultItemParagraph);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Function to extract the value of a specified Read the Docs meta property
|
||
|
|
static getMetaValue(propertyName) {
|
||
|
|
const metaTags = document.getElementsByTagName('meta');
|
||
|
|
|
||
|
|
for (let meta of metaTags) {
|
||
|
|
if (meta.name === propertyName) {
|
||
|
|
return meta.content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
static get projectSlug() {
|
||
|
|
return DoxygenAwesomeReadtheDocsSearch.getMetaValue("readthedocs-project-slug") ||
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._projectSlug;
|
||
|
|
}
|
||
|
|
|
||
|
|
static get versionSlug() {
|
||
|
|
return DoxygenAwesomeReadtheDocsSearch.getMetaValue("readthedocs-version-slug") ||
|
||
|
|
DoxygenAwesomeReadtheDocsSearch._versionSlug;
|
||
|
|
}
|
||
|
|
|
||
|
|
static getReadTheDocsDefaultVersion(project) {
|
||
|
|
console.log('Pull request detected, getting default version from ReadTheDocs API');
|
||
|
|
const url = `${DoxygenAwesomeReadtheDocsSearch.serverUrl}projects/${project}/`;
|
||
|
|
return fetch(url)
|
||
|
|
.then(function(response) {
|
||
|
|
if (!response.ok) throw new Error(response.statusText);
|
||
|
|
return response.json();
|
||
|
|
})
|
||
|
|
.then(function(data) {
|
||
|
|
console.log(data);
|
||
|
|
return data.default_version || 'latest';
|
||
|
|
})
|
||
|
|
.catch(function(err) {
|
||
|
|
console.error('Error:', err);
|
||
|
|
console.log(`Cannot determine default version for ${project}, assuming "latest"`);
|
||
|
|
return 'latest';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|