Skip to content

Commit

Permalink
fix(search): custom clear button, fixed #271
Browse files Browse the repository at this point in the history
  • Loading branch information
QingWei-Li committed Feb 11, 2018
1 parent 5e161a1 commit 864aa18
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 7 deletions.
55 changes: 49 additions & 6 deletions src/plugins/search/component.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ function style () {
border-bottom: 1px solid #eee;
}
.search .input-wrap {
display: flex;
align-items: center;
}
.search .results-panel {
display: none;
}
Expand All @@ -26,13 +31,31 @@ function style () {
outline: none;
border: none;
width: 100%;
padding: 7px;
line-height: 22px;
padding: 0 7px;
line-height: 36px;
font-size: 14px;
}
.search input::-webkit-search-decoration,
.search input::-webkit-search-cancel-button,
.search input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.search .clear-button {
width: 36px;
text-align: right;
display: none;
}
.search .clear-button.show {
display: block;
}
.search .clear-button svg {
transform: scale(.5);
}
.search h2 {
font-size: 17px;
Expand Down Expand Up @@ -70,9 +93,18 @@ function style () {

function tpl (opts, defaultValue = '') {
const html =
`<input type="search" value="${defaultValue}" />` +
'<div class="results-panel"></div>' +
'</div>'
`<div class="input-wrap">
<input type="search" value="${defaultValue}" />
<div class="clear-button">
<svg width="26" height="24">
<circle cx="12" cy="12" r="11" fill="#ccc" />
<path stroke="white" stroke-width="2" d="M8.25,8.25,15.75,15.75" />
<path stroke="white" stroke-width="2"d="M8.25,15.75,15.75,8.25" />
</svg>
</div>
</div>
<div class="results-panel"></div>
</div>`
const el = Docsify.dom.create('div', html)
const aside = Docsify.dom.find('aside')

Expand All @@ -83,9 +115,11 @@ function tpl (opts, defaultValue = '') {
function doSearch (value) {
const $search = Docsify.dom.find('div.search')
const $panel = Docsify.dom.find($search, '.results-panel')
const $clearBtn = Docsify.dom.find($search, '.clear-button')

if (!value) {
$panel.classList.remove('show')
$clearBtn.classList.remove('show')
$panel.innerHTML = ''
return
}
Expand All @@ -94,20 +128,22 @@ function doSearch (value) {
let html = ''
matchs.forEach(post => {
html += `<div class="matching-post">
<a href="${post.url}">
<a href="${post.url}">
<h2>${post.title}</h2>
<p>${post.content}</p>
</a>
</div>`
})

$panel.classList.add('show')
$clearBtn.classList.add('show')
$panel.innerHTML = html || `<p class="empty">${NO_DATA_TEXT}</p>`
}

function bindEvents () {
const $search = Docsify.dom.find('div.search')
const $input = Docsify.dom.find($search, 'input')
const $inputWrap = Docsify.dom.find($search, '.input-wrap')

let timeId
// Prevent to Fold sidebar
Expand All @@ -120,6 +156,13 @@ function bindEvents () {
clearTimeout(timeId)
timeId = setTimeout(_ => doSearch(e.target.value.trim()), 100)
})
Docsify.dom.on($inputWrap, 'click', e => {
// click input outside
if (e.target.tagName !== 'INPUT') {
$input.value = ''
doSearch()
}
})
}

function updatePlaceholder (text, path) {
Expand Down
1 change: 0 additions & 1 deletion src/themes/basic/_layout.css
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,6 @@ li input[type=checkbox] {

/* navbar */
.app-nav {
left: 0;
margin: 25px 60px 0 0;
position: absolute;
right: 0;
Expand Down

0 comments on commit 864aa18

Please sign in to comment.