[opt] search
This commit is contained in:
xaoxuu
parent
472fac9da6
commit
adfc537c3e
|
|
@ -2,7 +2,7 @@
|
|||
function layoutDiv() {
|
||||
var el = '<widget class="widget-wrapper search">'
|
||||
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">'
|
||||
var filter = ''
|
||||
if (item.filter == 'auto') {
|
||||
|
|
@ -27,7 +27,7 @@ function layoutDiv() {
|
|||
} else {
|
||||
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 += '<div id="search-result"></div>'
|
||||
el += '<div class="search-no-result">' + __('search.no_results') + '</div>'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.widgets .widget-wrapper.search
|
||||
margin-top: 1rem
|
||||
margin-bottom: 0
|
||||
|
||||
.search-wrapper
|
||||
|
|
@ -12,36 +11,21 @@
|
|||
align-items: center
|
||||
transition: 0.38s ease-out
|
||||
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
|
||||
width: 100%
|
||||
padding: 0.5rem 0
|
||||
line-height: 1
|
||||
line-height: 1.5
|
||||
box-sizing: border-box
|
||||
font-family: $ff-body
|
||||
font-size: $fs-13
|
||||
color: var(--text-p0)
|
||||
|
||||
&.noresult
|
||||
|
||||
&.noresult[searching='true']
|
||||
.search-icon
|
||||
color: $c-red
|
||||
.search-form
|
||||
border: 1px solid $c-red
|
||||
|
||||
.search-no-result
|
||||
display: none
|
||||
|
|
@ -88,22 +72,27 @@
|
|||
|
||||
|
||||
|
||||
.search-wrapper.noresult
|
||||
.search-wrapper.noresult[searching='true']
|
||||
.search-no-result
|
||||
display: block
|
||||
|
||||
.widget-wrapper
|
||||
.search-form
|
||||
top: 0
|
||||
background: var(--site-bg)
|
||||
background: var(--card)
|
||||
border: 1px solid var(--block-border)
|
||||
border-radius: $border-bar
|
||||
.search-input
|
||||
padding-left: 1.5rem
|
||||
text-indent: 0.75rem
|
||||
padding-right: 2rem
|
||||
.search-icon
|
||||
position: absolute
|
||||
margin-left: 0.25rem
|
||||
left: 0
|
||||
margin: 2px
|
||||
position absolute
|
||||
right: 0
|
||||
pointer-events: none
|
||||
color: var(--text-p2)
|
||||
padding: 0.5rem
|
||||
border-radius: 'calc(%s - 2px)' % $border-bar
|
||||
|
||||
#search-result,.search-no-result
|
||||
margin-top: 1rem
|
||||
|
|
|
|||
|
|
@ -362,7 +362,7 @@ if (stellar.search.service) {
|
|||
}
|
||||
path = stellar.config.root + path;
|
||||
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) {
|
||||
if (e.which == 13) {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
// Pieter Robberechts <http://github.com/probberechts>
|
||||
|
||||
/*exported searchFunc*/
|
||||
var searchFunc = function(path, filter, searchId, contentId) {
|
||||
var searchFunc = function(path, filter, wrapperId, searchId, contentId) {
|
||||
|
||||
function getAllCombinations(keywords) {
|
||||
var i, j, result = [];
|
||||
|
|
@ -43,6 +43,7 @@ var searchFunc = function(path, filter, searchId, contentId) {
|
|||
var $input = document.getElementById(searchId);
|
||||
if (!$input) { return; }
|
||||
var $resultContent = document.getElementById(contentId);
|
||||
var $wrapper = document.getElementById(wrapperId);
|
||||
|
||||
$input.addEventListener("input", function(){
|
||||
var resultList = [];
|
||||
|
|
@ -50,8 +51,10 @@ var searchFunc = function(path, filter, searchId, contentId) {
|
|||
.sort(function(a,b) { return b.split(" ").length - a.split(" ").length; });
|
||||
$resultContent.innerHTML = "";
|
||||
if (this.value.trim().length <= 0) {
|
||||
$wrapper.setAttribute('searching', 'false');
|
||||
return;
|
||||
}
|
||||
$wrapper.setAttribute('searching', 'true');
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
if (!data.content?.trim().length) { return }
|
||||
|
|
|
|||
Loading…
Reference in New Issue