website-PretendoNetwork/views/docs/search.handlebars

101 lines
3.9 KiB
Handlebars

{{#section 'head'}}
<link rel="stylesheet" href="/assets/css/documentation.css" />
{{/section}}
<div class="docs-wrapper">
<a href="/" class="logo-link">
<svg role="img" aria-label="Pretendo" xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
<g id="logo" transform="translate(553 467)">
<rect id="XMLID_158_" width="39.876" height="39.876" fill="#9d6ff3" opacity="0" />
<g id="XMLID_6_" transform="translate(8.222 1.418)">
<path id="XMLID_15_"
d="M69.149,28.312c-1.051.553-.129,2.139.922,1.585a12.365,12.365,0,0,1,8.794-.571,10.829,10.829,0,0,1,6.342,4.166c.645,1,2.231.074,1.585-.922C83.308,27.169,74.7,25.436,69.149,28.312Z"
transform="translate(-64.246 -23.389)" fill="#9d6ff3" />
<path id="XMLID_14_"
d="M82.64,14.608A15.565,15.565,0,0,0,73.5,8.45a17.535,17.535,0,0,0-12.647.9c-1.051.553-.129,2.139.922,1.585,3.411-1.788,7.6-1.714,11.209-.719,3.1.848,6.268,2.544,8.038,5.309C81.681,16.543,83.267,15.622,82.64,14.608Z"
transform="translate(-57.476 -7.693)" fill="#9d6ff3" />
<path id="XMLID_9_"
d="M55.68,47.8a10.719,10.719,0,0,0-6.71,2.3H45.983A1.336,1.336,0,0,0,44.6,51.376V75.84a1.431,1.431,0,0,0,1.383,1.383h3.023a1.367,1.367,0,0,0,1.309-1.383V68.392A10.993,10.993,0,1,0,55.68,47.8Zm0,17.182a6.213,6.213,0,1,1,6.213-6.213A6.216,6.216,0,0,1,55.68,64.982Z"
transform="translate(-44.6 -40.406)" fill="#9d6ff3" />
</g>
</g>
<text id="Pretendo" transform="translate(593 492)" fill="#fff" font-size="17"
font-family="Poppins-Bold, Poppins" font-weight="700">
<tspan x="0" y="0">Pretendo</tspan>
</text>
</g>
</svg>
</a>
<div class="header-wrapper">
<button id="openSidebar" class="nostyle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</button>
{{> header}}
</div>
{{> docs-sidebar}}
<div class="content search">
<div class="content-inner">
<div class="purple-card">
<h1>{{ locale.docs.search.title }}</h1>
<p>{{ locale.docs.search.caption }}</p>
<label for="errorCode">{{ locale.docs.search.label }}</label>
<div class="input-wrapper">
<input id="errorCode" placeholder="012-3456" required />
<div class="matches">
</div>
</div>
</div>
</div>
</div>
</div>
{{#section 'foot'}}
<script src="/assets/js/docssidebarhandler.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2/dist/fuse.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1.6.0/dist/cleave.min.js"></script>
<script>
const fuse = new Fuse({{{errorList}}}, {includeMatches: true, threshold: 0.4});
const cleave = new Cleave('input#errorCode', {
delimiter: '-',
blocks: [3, 4]
});
const matchesContainer = document.querySelector('.matches');
const input = document.querySelector('input#errorCode');
input.addEventListener('input', (e) => {
const errorCode = e.target.value;
const matches = fuse.search(errorCode);
if (!errorCode) {
matchesContainer.innerHTML = '';
input.classList.remove('has-matches');
return
}
matchesContainer.innerHTML = '';
input.classList.add('has-matches');
if (matches.length > 0) {
matches.forEach(match => {
const errorCode = match.item;
const matchLink = document.createElement('a');
matchLink.innerText = errorCode;
matchLink.href = `/docs/error/${errorCode}`;
matchesContainer.appendChild(matchLink);
});
} else {
const noMatch = document.createElement('p');
noMatch.innerText = '{{ locale.docs.search.no_match }}';
matchesContainer.appendChild(noMatch);
}
});
</script>
{{/section}}