Merge branch 'develop' of https://github.com/algolia/docsearch
# Conflicts: # docs/documentation.md
This commit is contained in:
Shipow
commit
c1d90d2393
8 changed files with 452 additions and 7 deletions
|
|
@ -13,6 +13,13 @@
|
|||
</div>
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="searchbar-wrapper">
|
||||
<div class="navbar-form">
|
||||
<div class="form-group">
|
||||
{% include searchbar.html %}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% assign url = page.url %}
|
||||
{% for link in site.navigation %}
|
||||
<li {% if url == link.url %}class="active"{% endif %}>
|
||||
|
|
|
|||
46
docs/_includes/searchbar.html
Normal file
46
docs/_includes/searchbar.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
|
||||
<symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-search-13" viewBox="0 0 40 40">
|
||||
<path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
|
||||
fill-rule="evenodd" />
|
||||
</symbol>
|
||||
<symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-clear-2" viewBox="0 0 20 20">
|
||||
<path d="M8.96 10L.52 1.562 0 1.042 1.04 0l.522.52L10 8.96 18.438.52l.52-.52L20 1.04l-.52.522L11.04 10l8.44 8.438.52.52L18.96 20l-.522-.52L10 11.04l-8.438 8.44-.52.52L0 18.96l.52-.522L8.96 10z" fill-rule="evenodd" />
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<form role="search" novalidate="novalidate" class="searchbox sbx-custom">
|
||||
<input onkeyup="updateReset()" type="search" name="search" placeholder="Search in the documentation" autocomplete="off" required="required" class="sbx-custom__input">
|
||||
<button type="submit" class="sbx-custom__submit">
|
||||
<svg role="img" aria-label="Search">
|
||||
<title>Icon Search</title>
|
||||
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="reset" class="sbx-custom__reset hide">
|
||||
<svg role="img" aria-label="Reset">
|
||||
<title>Icon Reset</title>
|
||||
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
<!--Js: focus search input after reset-->
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
document.querySelector('.searchbox [type="reset"]').addEventListener('click', function() {
|
||||
document.querySelector('.aa-input').focus();
|
||||
this.className += " hide";
|
||||
});
|
||||
|
||||
function updateReset() {
|
||||
var searchbox = document.querySelector('.aa-input');
|
||||
var reset = document.querySelector('.searchbox [type="reset"]');
|
||||
reset.className = "";
|
||||
reset.className = "sbx-custom__reset";
|
||||
if (searchbox.value.length === 0){
|
||||
reset.className += " hide";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//]]>
|
||||
</script>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -35,7 +35,7 @@
|
|||
<link rel="icon" href="{{ "/img/favicon.png" | prepend: site.baseurl }}">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Raleway:300,800" />
|
||||
<link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Raleway:300,600" />
|
||||
<link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600" />
|
||||
|
||||
<link rel="stylesheet" media="screen" href="{{ "/css/main.css" | prepend: site.baseurl }}" />
|
||||
|
|
@ -60,6 +60,18 @@
|
|||
</script>
|
||||
{% endif %}
|
||||
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
docsearch({
|
||||
apiKey: '25626fae796133dc1e734c6bcaaeac3c',
|
||||
indexName: 'docsearch',
|
||||
inputSelector: '.sbx-custom__input',
|
||||
autocompleteOptions: {
|
||||
debug: false
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{% include marketing.html %}
|
||||
|
||||
{% contentblock site-footer %}
|
||||
|
|
|
|||
187
docs/css/_docsearch.scss
Normal file
187
docs/css/_docsearch.scss
Normal file
File diff suppressed because one or more lines are too long
188
docs/css/_searchbar.scss
Normal file
188
docs/css/_searchbar.scss
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
$custom:(
|
||||
input-width: 240px,
|
||||
input-height: 36px,
|
||||
border-width: 2px,
|
||||
border-radius: 18px,
|
||||
input-border-color: darken(#1D96C7,10%),
|
||||
input-focus-border-color: #1D96C7,
|
||||
input-background: #091724,
|
||||
input-focus-background: #091724,
|
||||
font-size: 13px,
|
||||
placeholder-color: #AAAAAA,
|
||||
icon-size: 16px,
|
||||
icon-position: left,
|
||||
icon-color: #1D96C7,
|
||||
icon-background: #FFFFFF,
|
||||
icon-background-opacity: 0,
|
||||
icon-clear-size: 12px
|
||||
);
|
||||
|
||||
@mixin searchbox(
|
||||
$input-width: 500px,
|
||||
$input-height: 40px,
|
||||
$border-width: 1px,
|
||||
$border-radius: 3px,
|
||||
$input-border-color: #ccc,
|
||||
$input-focus-border-color: darken($input-border-color, 15%),
|
||||
$input-background: #fff,
|
||||
$input-focus-background: $input-background,
|
||||
$font-size: 14px,
|
||||
$placeholder-color: #aaa,
|
||||
$icon: 'sbx-icon-search-1',
|
||||
$icon-size: 18px,
|
||||
$icon-position: right,
|
||||
$icon-color: #fff,
|
||||
$icon-background: #3e82f7,
|
||||
$icon-background-opacity: 1,
|
||||
$icon-clear: 'sbx-icon-clear-1',
|
||||
$icon-clear-size: 12px
|
||||
) {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: $input-width;
|
||||
height: $input-height;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__input {
|
||||
display: inline-block;
|
||||
transition: box-shadow .4s ease, background .4s ease, padding .4s ease;
|
||||
border: 0;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: inset 0 0 0 $border-width $input-border-color;
|
||||
background: $input-background;
|
||||
padding: 0;
|
||||
padding-right: if($icon-position == 'right', $input-height, 0) + $icon-clear-size * 2 + 8px;
|
||||
padding-left: if($icon-position == 'right', $font-size, $input-height + if($icon-background-opacity == 0, 0, 8px));
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
white-space: normal;
|
||||
font-size: $font-size;
|
||||
appearance: none;
|
||||
color: white;
|
||||
|
||||
&::-webkit-search-decoration,
|
||||
&::-webkit-search-cancel-button,
|
||||
&::-webkit-search-results-button,
|
||||
&::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 $border-width darken($input-border-color, 10%);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 $border-width $input-focus-border-color;
|
||||
background: $input-focus-background;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $placeholder-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__submit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
#{$icon-position}: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: if($icon-position == 'right', 0 $border-radius $border-radius 0, $border-radius 0 0 $border-radius);
|
||||
background-color: rgba($icon-background, $icon-background-opacity);
|
||||
padding: 0;
|
||||
width: $input-height;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
|
||||
// Helper for vertical alignement of the icon
|
||||
&::before {
|
||||
display: inline-block;
|
||||
margin-right: -4px;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
vertical-align: middle;
|
||||
fill: $icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__reset {
|
||||
position: absolute;
|
||||
top: ($input-height - $icon-clear-size) / 2 - 4px;
|
||||
right: if($icon-position == 'right', 8px + $input-height, ($input-height - $icon-clear-size) / 2) - 4px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
|
||||
&.hide{
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
margin: 4px;
|
||||
width: $icon-clear-size;
|
||||
height: $icon-clear-size;
|
||||
fill: $icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__input:valid ~ &__reset {
|
||||
display: block;
|
||||
animation-name: sbx-reset-in;
|
||||
animation-duration: .15s;
|
||||
}
|
||||
|
||||
@keyframes sbx-reset-in {
|
||||
from {
|
||||
transform: translate3d(-20%, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sbx-custom{
|
||||
@include searchbox($custom...);
|
||||
}
|
||||
|
||||
.site-header .navbar .navbar-nav > li.searchbar-wrapper {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.algolia-autocomplete {
|
||||
display: inline !important;
|
||||
}
|
||||
|
|
@ -11,3 +11,5 @@
|
|||
|
||||
@import "home";
|
||||
@import "page";
|
||||
@import "searchbar";
|
||||
@import "docsearch";
|
||||
|
|
|
|||
|
|
@ -32,7 +32,10 @@ need to add the following code snippet to your website:
|
|||
docsearch({
|
||||
apiKey: '<API_KEY>',
|
||||
indexName: '<INDEX_NAME>',
|
||||
inputSelector: '<YOUR_INPUT_DOM_SELECTOR>'
|
||||
inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
|
||||
autocompleteOptions: {
|
||||
debug: false
|
||||
}
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
|
@ -93,7 +96,8 @@ If you want to do heavily change the way results are displayed, you might find
|
|||
it easier to directly edit the `scss` files in this repository.
|
||||
|
||||
[`_variables.scss`][18]
|
||||
contains all the color, breakpoints and size definitions while
|
||||
contains all the color, breakpoints and size definitions while
|
||||
|
||||
[`_main.scss`][19]
|
||||
holds the structure of the display.
|
||||
|
||||
|
|
@ -113,7 +117,7 @@ results from the Algolia API. As such, you can use any options provided by
|
|||
|
||||
You can pass any options to the underlying `autocomplete` instance through
|
||||
the`autocompleteOptions` parameter. You will find all `autocomplete` options in
|
||||
its [own documentation][22].
|
||||
its [own documentation][22].
|
||||
|
||||
You can also listen to `autocomplete` events through the `.autocomplete`
|
||||
property of the `docsearch` instance.
|
||||
|
|
@ -184,4 +188,3 @@ You will find all Algolia API options in its [own documentation][23]
|
|||
[25]: https://jekyllrb.com/
|
||||
[26]: https://www.ruby-lang.org/en/
|
||||
[27]: http://bundler.io/
|
||||
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ import version from './version.js';
|
|||
import $ from 'npm-zepto';
|
||||
|
||||
/**
|
||||
* Adds an autocomplete dropdown to an input fields
|
||||
* @function documentationSearch
|
||||
* Adds an autocomplete dropdown to an input field
|
||||
* @function DocSearch
|
||||
* @param {string} options.apiKey Read-only API key
|
||||
* @param {string} options.indexName Name of the index to target
|
||||
* @param {string} options.inputSelector CSS selector that targets the input
|
||||
|
|
|
|||
Loading…
Reference in a new issue