[opt] search
This commit is contained in:
parent
472fac9da6
commit
adfc537c3e
|
@ -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>'
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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 }
|
||||||
|
|
Loading…
Reference in New Issue