[opt] search

This commit is contained in:
xaoxuu 2024-01-13 01:00:50 +08:00
parent 472fac9da6
commit adfc537c3e
4 changed files with 24 additions and 32 deletions

View File

@ -2,7 +2,7 @@
function layoutDiv() { function layoutDiv() {
var el = '<widget class="widget-wrapper search">' var el = '<widget class="widget-wrapper search">'
el += '<div class="widget-body">' el += '<div class="widget-body">'
el += '<div class="search-wrapper" id="search">' el += '<div class="search-wrapper" id="search-wrapper">'
el += '<form class="search-form">' el += '<form class="search-form">'
var filter = '' var filter = ''
if (item.filter == 'auto') { if (item.filter == 'auto') {
@ -27,7 +27,7 @@ function layoutDiv() {
} else { } else {
el += ' placeholder="' + (item.placeholder || __('search.search')) + '">' el += ' placeholder="' + (item.placeholder || __('search.search')) + '">'
} }
el += '<svg t="1670596976048" class="icon search-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2676" width="200" height="200"><path d="M938.2 832.6L723.8 618.1c-2.5-2.5-5.3-4.4-7.9-6.4 36.2-55.6 57.3-121.8 57.3-193.1C773.3 222.8 614.6 64 418.7 64S64 222.8 64 418.6c0 195.9 158.8 354.6 354.6 354.6 71.3 0 137.5-21.2 193.2-57.4 2 2.7 3.9 5.4 6.3 7.8L832.5 938c14.6 14.6 33.7 21.9 52.8 21.9 19.1 0 38.2-7.3 52.8-21.8 29.2-29.1 29.2-76.4 0.1-105.5M418.7 661.3C284.9 661.3 176 552.4 176 418.6 176 284.9 284.9 176 418.7 176c133.8 0 242.6 108.9 242.6 242.7 0 133.7-108.9 242.6-242.6 242.6" p-id="2677"></path></svg>' el += '<svg t="1705074644177" class="icon search-icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1560" width="200" height="200"><path d="M1008.839137 935.96571L792.364903 719.491476a56.783488 56.783488 0 0 0-80.152866 0 358.53545 358.53545 0 1 1 100.857314-335.166073 362.840335 362.840335 0 0 1-3.689902 170.145468 51.248635 51.248635 0 1 0 99.217358 26.444296 462.057693 462.057693 0 1 0-158.255785 242.303546l185.930047 185.725053a51.248635 51.248635 0 0 0 72.568068 0 51.248635 51.248635 0 0 0 0-72.978056z" fill="#111111" p-id="1561"></path><path d="M616.479587 615.969233a50.428657 50.428657 0 0 0-61.498362-5.534852 174.655348 174.655348 0 0 1-177.525271 3.484907 49.403684 49.403684 0 0 0-58.833433 6.76482l-3.074918 2.869923a49.403684 49.403684 0 0 0 8.609771 78.10292 277.767601 277.767601 0 0 0 286.992355-5.739847 49.403684 49.403684 0 0 0 8.404776-76.667958z" fill="#00C569" p-id="1562"></path></svg>'
el += '</form>' el += '</form>'
el += '<div id="search-result"></div>' el += '<div id="search-result"></div>'
el += '<div class="search-no-result">' + __('search.no_results') + '</div>' el += '<div class="search-no-result">' + __('search.no_results') + '</div>'

View File

@ -1,5 +1,4 @@
.widgets .widget-wrapper.search .widgets .widget-wrapper.search
margin-top: 1rem
margin-bottom: 0 margin-bottom: 0
.search-wrapper .search-wrapper
@ -12,36 +11,21 @@
align-items: center align-items: center
transition: 0.38s ease-out transition: 0.38s ease-out
z-index: 0 z-index: 0
&:after
content: ''
position absolute
left: 0
right: 0
bottom: 0
height: 2px
border-radius: 4px
background: convert(hexo-config('style.gradient.search'))
background-size: 200%
animation: glow 10s linear infinite
@keyframes glow {
from {
background-position: 0%
}
to {
background-position: 200%
}
}
.search-input .search-input
width: 100% width: 100%
padding: 0.5rem 0 padding: 0.5rem 0
line-height: 1 line-height: 1.5
box-sizing: border-box box-sizing: border-box
font-family: $ff-body font-family: $ff-body
font-size: $fs-13
color: var(--text-p0) color: var(--text-p0)
&.noresult &.noresult[searching='true']
.search-icon .search-icon
color: $c-red color: $c-red
.search-form
border: 1px solid $c-red
.search-no-result .search-no-result
display: none display: none
@ -88,22 +72,27 @@
.search-wrapper.noresult .search-wrapper.noresult[searching='true']
.search-no-result .search-no-result
display: block display: block
.widget-wrapper .widget-wrapper
.search-form .search-form
top: 0 top: 0
background: var(--site-bg) background: var(--card)
border: 1px solid var(--block-border)
border-radius: $border-bar
.search-input .search-input
padding-left: 1.5rem text-indent: 0.75rem
padding-right: 2rem
.search-icon .search-icon
position: absolute margin: 2px
margin-left: 0.25rem position absolute
left: 0 right: 0
pointer-events: none pointer-events: none
color: var(--text-p2) color: var(--text-p2)
padding: 0.5rem
border-radius: 'calc(%s - 2px)' % $border-bar
#search-result,.search-no-result #search-result,.search-no-result
margin-top: 1rem margin-top: 1rem

View File

@ -362,7 +362,7 @@ if (stellar.search.service) {
} }
path = stellar.config.root + path; path = stellar.config.root + path;
const filter = $inputArea.attr('data-filter') || ''; const filter = $inputArea.attr('data-filter') || '';
searchFunc(path, filter, 'search-input', 'search-result'); searchFunc(path, filter, 'search-wrapper', 'search-input', 'search-result');
}); });
$inputArea.keydown(function(e) { $inputArea.keydown(function(e) {
if (e.which == 13) { if (e.which == 13) {

View File

@ -22,7 +22,7 @@
// Pieter Robberechts <http://github.com/probberechts> // Pieter Robberechts <http://github.com/probberechts>
/*exported searchFunc*/ /*exported searchFunc*/
var searchFunc = function(path, filter, searchId, contentId) { var searchFunc = function(path, filter, wrapperId, searchId, contentId) {
function getAllCombinations(keywords) { function getAllCombinations(keywords) {
var i, j, result = []; var i, j, result = [];
@ -43,6 +43,7 @@ var searchFunc = function(path, filter, searchId, contentId) {
var $input = document.getElementById(searchId); var $input = document.getElementById(searchId);
if (!$input) { return; } if (!$input) { return; }
var $resultContent = document.getElementById(contentId); var $resultContent = document.getElementById(contentId);
var $wrapper = document.getElementById(wrapperId);
$input.addEventListener("input", function(){ $input.addEventListener("input", function(){
var resultList = []; var resultList = [];
@ -50,8 +51,10 @@ var searchFunc = function(path, filter, searchId, contentId) {
.sort(function(a,b) { return b.split(" ").length - a.split(" ").length; }); .sort(function(a,b) { return b.split(" ").length - a.split(" ").length; });
$resultContent.innerHTML = ""; $resultContent.innerHTML = "";
if (this.value.trim().length <= 0) { if (this.value.trim().length <= 0) {
$wrapper.setAttribute('searching', 'false');
return; return;
} }
$wrapper.setAttribute('searching', 'true');
// perform local searching // perform local searching
datas.forEach(function(data) { datas.forEach(function(data) {
if (!data.content?.trim().length) { return } if (!data.content?.trim().length) { return }