feat: move search portable
This commit is contained in:
parent
aa0cf2bad4
commit
d5d3277013
2 changed files with 87 additions and 65 deletions
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
<div class="col-12 col-lg-8">
|
||||
<div class="doc-search-container">
|
||||
<div class="doc-search">
|
||||
<div class="doc-search" id="search-container">
|
||||
<div class="dropdown">
|
||||
<div class="search-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
|
||||
|
|
@ -117,73 +117,11 @@ id="page-{{ name or route | e }}" data-path="{{ pathname | e }}"
|
|||
{%- block script -%}
|
||||
<script>
|
||||
frappe.ready(() => {
|
||||
setup_search();
|
||||
frappe.setup_search('#search-container', '{{ docs_search_scope or "" }}');
|
||||
|
||||
$('.web-footer .container')
|
||||
.removeClass('container')
|
||||
.addClass('container-fluid doc-container');
|
||||
});
|
||||
|
||||
function setup_search() {
|
||||
let $dropdown = $('.doc-search .dropdown');
|
||||
let $dropdown_menu = $('.doc-search .dropdown-menu');
|
||||
let $input = $('.doc-search input');
|
||||
|
||||
$(document).on('keypress', e => {
|
||||
if (e.key === '/') {
|
||||
e.preventDefault();
|
||||
$input.focus();
|
||||
}
|
||||
});
|
||||
|
||||
$input.on('input', frappe.utils.debounce(() => {
|
||||
if (!$input.val()) {
|
||||
clear_dropdown();
|
||||
return;
|
||||
}
|
||||
|
||||
frappe.call({
|
||||
method: 'frappe.modules.full_text_search.web_search',
|
||||
args: {
|
||||
index_name: 'web_routes',
|
||||
scope: '{{ docs_search_scope or "" }}' || null,
|
||||
query: $input.val(),
|
||||
limit: 5
|
||||
}
|
||||
}).then(r => {
|
||||
let results = r.message || [];
|
||||
let dropdown_html;
|
||||
if (results.length == 0) {
|
||||
dropdown_html = `<div class="dropdown-item">No results found</div>`;
|
||||
} else {
|
||||
dropdown_html = results.map(r => {
|
||||
return `<a class="dropdown-item" href="/${r.path}">
|
||||
<h6>${r.title_highlights || r.title}</h6>
|
||||
<div style="white-space: normal;">${r.content_highlights}</div>
|
||||
</a>`
|
||||
}).join('')
|
||||
}
|
||||
$dropdown_menu.html(dropdown_html);
|
||||
$dropdown_menu.addClass('show');
|
||||
});
|
||||
}, 500));
|
||||
|
||||
$input.on('focus', () => {
|
||||
if (!$input.val()) {
|
||||
clear_dropdown();
|
||||
}
|
||||
});
|
||||
|
||||
$input.on('blur', () => {
|
||||
setTimeout(() => {
|
||||
clear_dropdown();
|
||||
}, 300);
|
||||
});
|
||||
|
||||
function clear_dropdown() {
|
||||
$dropdown_menu.html('');
|
||||
$dropdown_menu.removeClass('show');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{%- endblock -%}
|
||||
|
|
|
|||
|
|
@ -380,9 +380,93 @@ $.extend(frappe, {
|
|||
}
|
||||
});
|
||||
|
||||
frappe.setup_search = function (target, search_scope) {
|
||||
if (typeof target === "string") {
|
||||
target = $(target);
|
||||
}
|
||||
|
||||
let $search_input = $(`<div class="dropdown">
|
||||
<div class="search-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-search">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<input type="search" class="form-control" placeholder="Search the docs (Press ? to focus)" />
|
||||
<div class="overflow-hidden shadow dropdown-menu w-100">
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
target.empty();
|
||||
$search_input.appendTo(target);
|
||||
|
||||
let $dropdown = $search_input.find('.dropdown');
|
||||
let $dropdown_menu = $search_input.find('.dropdown-menu');
|
||||
let $input = $search_input.find('input');
|
||||
|
||||
$(document).on('keypress', e => {
|
||||
if (e.key === '/') {
|
||||
e.preventDefault();
|
||||
$input.focus();
|
||||
}
|
||||
});
|
||||
|
||||
$input.on('input', frappe.utils.debounce(() => {
|
||||
if (!$input.val()) {
|
||||
clear_dropdown();
|
||||
return;
|
||||
}
|
||||
|
||||
frappe.call({
|
||||
method: 'frappe.modules.full_text_search.web_search',
|
||||
args: {
|
||||
index_name: 'web_routes',
|
||||
scope: search_scope || null,
|
||||
query: $input.val(),
|
||||
limit: 5
|
||||
}
|
||||
}).then(r => {
|
||||
let results = r.message || [];
|
||||
let dropdown_html;
|
||||
if (results.length == 0) {
|
||||
dropdown_html = `<div class="dropdown-item">No results found</div>`;
|
||||
} else {
|
||||
dropdown_html = results.map(r => {
|
||||
return `<a class="dropdown-item" href="/${r.path}">
|
||||
<h6>${r.title_highlights || r.title}</h6>
|
||||
<div style="white-space: normal;">${r.content_highlights}</div>
|
||||
</a>`
|
||||
}).join('')
|
||||
}
|
||||
$dropdown_menu.html(dropdown_html);
|
||||
$dropdown_menu.addClass('show');
|
||||
});
|
||||
}, 500));
|
||||
|
||||
$input.on('focus', () => {
|
||||
if (!$input.val()) {
|
||||
clear_dropdown();
|
||||
}
|
||||
});
|
||||
|
||||
$input.on('blur', () => {
|
||||
setTimeout(() => {
|
||||
clear_dropdown();
|
||||
}, 300);
|
||||
});
|
||||
|
||||
function clear_dropdown() {
|
||||
$dropdown_menu.html('');
|
||||
$dropdown_menu.removeClass('show');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Utility functions
|
||||
|
||||
window.valid_email = function(id) {
|
||||
// eslint-disable-next-line
|
||||
// copied regex from frappe/utils.js validate_type
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue