Skip to content

Commit

Permalink
Add hideOtherSidebarContent option (#661)
Browse files Browse the repository at this point in the history
Allow user to configure whether or not to hide other sidebar content while showing searching results.

Related issue: #535
  • Loading branch information
cheng-kang authored and QingWei-Li committed Oct 31, 2018
1 parent a39b214 commit d653cb7
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 5 deletions.
4 changes: 3 additions & 1 deletion docs/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,9 @@ By default, the hyperlink on the current page is recognized and the content is s
},
// Headline depth, 1 - 6
depth: 2
depth: 2,
hideOtherSidebarContent: false, // whether or not to hide other sidebar content
}
}
</script>
Expand Down
2 changes: 1 addition & 1 deletion src/core/render/tpl.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export function main(config) {
'</button>' +
'<aside class="sidebar">' +
(config.name ?
`<h1><a class="app-name-link" data-nosearch>${
`<h1 class="app-name"><a class="app-name-link" data-nosearch>${
config.logo ?
`<img alt=${config.name} src=${config.logo}>` :
config.name
Expand Down
26 changes: 24 additions & 2 deletions src/plugins/search/component.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {search} from './search'

let NO_DATA_TEXT = ''
let options

function style() {
const code = `
Expand Down Expand Up @@ -86,12 +87,16 @@ function style() {
.search p.empty {
text-align: center;
}
.app-name.hide, .sidebar-nav.hide {
display: none;
}`

Docsify.dom.style(code)
}

function tpl(opts, defaultValue = '') {
function tpl(defaultValue = '') {
const html =
`<div class="input-wrap">
<input type="search" value="${defaultValue}" />
Expand All @@ -116,11 +121,18 @@ 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')
const $sidebarNav = Docsify.dom.find('.sidebar-nav')
const $appName = Docsify.dom.find('.app-name')

if (!value) {
$panel.classList.remove('show')
$clearBtn.classList.remove('show')
$panel.innerHTML = ''

if (options.hideOtherSidebarContent) {
$sidebarNav.classList.remove('hide')
$appName.classList.remove('hide')
}
return
}
const matchs = search(value)
Expand All @@ -138,6 +150,10 @@ function doSearch(value) {
$panel.classList.add('show')
$clearBtn.classList.add('show')
$panel.innerHTML = html || `<p class="empty">${NO_DATA_TEXT}</p>`
if (options.hideOtherSidebarContent) {
$sidebarNav.classList.add('hide')
$appName.classList.add('hide')
}
}

function bindEvents() {
Expand Down Expand Up @@ -188,16 +204,22 @@ function updateNoData(text, path) {
}
}

function updateOptions(opts) {
options = opts
}

export function init(opts, vm) {
const keywords = vm.router.parse().query.s

updateOptions(opts)
style()
tpl(opts, keywords)
tpl(keywords)
bindEvents()
keywords && setTimeout(_ => doSearch(keywords), 500)
}

export function update(opts, vm) {
updateOptions(opts)
updatePlaceholder(opts.placeholder, vm.route.path)
updateNoData(opts.noData, vm.route.path)
}
4 changes: 3 additions & 1 deletion src/plugins/search/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ const CONFIG = {
noData: 'No Results!',
paths: 'auto',
depth: 2,
maxAge: 86400000 // 1 day
maxAge: 86400000, // 1 day
hideOtherSidebarContent: false
}

const install = function (hook, vm) {
Expand All @@ -21,6 +22,7 @@ const install = function (hook, vm) {
CONFIG.placeholder = opts.placeholder || CONFIG.placeholder
CONFIG.noData = opts.noData || CONFIG.noData
CONFIG.depth = opts.depth || CONFIG.depth
CONFIG.hideOtherSidebarContent = opts.hideOtherSidebarContent || CONFIG.hideOtherSidebarContent
}

const isAuto = CONFIG.paths === 'auto'
Expand Down

0 comments on commit d653cb7

Please sign in to comment.