Skip to content

Commit e2da9fb

Browse files
markzegarellimarkzegarelli
committed
mobile search fixed
1 parent 1c50740 commit e2da9fb

File tree

5 files changed

+133
-61
lines changed

5 files changed

+133
-61
lines changed

‎js/algolia/index.js

Lines changed: 129 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -13,68 +13,140 @@ const searchClient = algoliasearch(appId, apiKey);
1313
insightsClient('init', { appId, apiKey });
1414
const algoliaInsightsPlugin = createAlgoliaInsightsPlugin({ insightsClient });
1515

16+
// define locations to separate invocation for mobile and desktop
17+
const locations = ['#autocomplete','#autocomplete-mobile'];
1618

17-
const search = autocomplete({
18-
container: '#autocomplete',
19-
placeholder: 'Search the Segment documentation',
20-
debug: false,
21-
openOnFocus: false,
22-
keyboardShortcuts: ['s', 191],
23-
plugins: [algoliaInsightsPlugin,],
24-
detachedMediaQuery:'none',
25-
getSources( {query} ) {
26-
return [
27-
{
28-
sourceId: 'articles',
29-
getItemUrl({ item }){
30-
if (item.anchor != null) {
31-
var itemUrl = item.url+"#" + item.anchor;
32-
} else {
33-
var itemUrl = item.url;
34-
}
35-
return itemUrl;
36-
},
37-
getItems() {
38-
return getAlgoliaHits({
39-
searchClient,
40-
queries: [
41-
{
42-
indexName: 'segment-docs',
43-
query,
44-
params: {
45-
hitsPerPage: 7,
46-
facetFilters: ['hidden:-true'],
47-
clickAnalytics: true,
48-
},
49-
},
50-
],
51-
});
52-
},
53-
templates: {
54-
item({ item }){
19+
function initAutocomplete(item){
20+
const search = autocomplete({
21+
container: item,
22+
placeholder: 'Search the Segment documentation',
23+
debug: false,
24+
openOnFocus: false,
25+
keyboardShortcuts: ['s', 191],
26+
plugins: [algoliaInsightsPlugin,],
27+
detachedMediaQuery:'none',
28+
getSources( {query} ) {
29+
return [
30+
{
31+
sourceId: 'articles',
32+
getItemUrl({ item }){
5533
if (item.anchor != null) {
56-
var anchorLink = "#" + item.anchor;
34+
var itemUrl = item.url+"#" + item.anchor;
5735
} else {
58-
var anchorLink = "";
36+
var itemUrl = item.url;
37+
}
38+
return itemUrl;
39+
},
40+
getItems() {
41+
return getAlgoliaHits({
42+
searchClient,
43+
queries: [
44+
{
45+
indexName: 'segment-docs',
46+
query,
47+
params: {
48+
hitsPerPage: 7,
49+
facetFilters: ['hidden:-true'],
50+
clickAnalytics: true,
51+
},
52+
},
53+
],
54+
});
55+
},
56+
templates: {
57+
item({ item }){
58+
if (item.anchor != null) {
59+
var anchorLink = "#" + item.anchor;
60+
} else {
61+
var anchorLink = "";
62+
}
63+
return html `<a class="aa-link" href="/docs${item.url}${anchorLink}">
64+
<p class="aa-title" >${highlightHit({hit: item, attribute: 'title'})}</h3>
65+
<p class="aa-heading">${item.headings.join(' >')}</p>
66+
<p class="aa-content">${highlightHit({hit: item, attribute: 'content'})}</p></a>
67+
`;
68+
},
69+
noResults() {
70+
return html `<p class="aa-content">No results for <strong>${query}</strong></p>`;
5971
}
60-
return html `<a class="aa-link" href="/docs${item.url}${anchorLink}">
61-
<p class="aa-title" >${highlightHit({hit: item, attribute: 'title'})}</h3>
62-
<p class="aa-heading">${item.headings.join(' >')}</p>
63-
<p class="aa-content">${highlightHit({hit: item, attribute: 'content'})}</p></a>
64-
`;
6572
},
66-
noResults() {
67-
return html `<p class="aa-content">No results for <strong>${query}</strong></p>`;
68-
}
73+
6974
},
70-
71-
},
72-
];
73-
},
74-
navigator: {
75-
navigate({ itemUrl }) {
76-
window.location.assign('/docs'+itemUrl);
75+
];
7776
},
78-
}
79-
});
77+
navigator: {
78+
navigate({ itemUrl }) {
79+
window.location.assign('/docs'+itemUrl);
80+
},
81+
}
82+
});
83+
84+
}
85+
86+
locations.forEach(initAutocomplete);
87+
88+
89+
// const search_mobile = autocomplete({
90+
// container: '#autocomplete-mobile',
91+
// placeholder: 'Search the Segment documentation',
92+
// debug: false,
93+
// openOnFocus: false,
94+
// keyboardShortcuts: ['s', 191],
95+
// plugins: [algoliaInsightsPlugin,],
96+
// detachedMediaQuery:'none',
97+
// getSources( {query} ) {
98+
// return [
99+
// {
100+
// sourceId: 'articles',
101+
// getItemUrl({ item }){
102+
// if (item.anchor != null) {
103+
// var itemUrl = item.url+"#" + item.anchor;
104+
// } else {
105+
// var itemUrl = item.url;
106+
// }
107+
// return itemUrl;
108+
// },
109+
// getItems() {
110+
// return getAlgoliaHits({
111+
// searchClient,
112+
// queries: [
113+
// {
114+
// indexName: 'segment-docs',
115+
// query,
116+
// params: {
117+
// hitsPerPage: 7,
118+
// facetFilters: ['hidden:-true'],
119+
// clickAnalytics: true,
120+
// },
121+
// },
122+
// ],
123+
// });
124+
// },
125+
// templates: {
126+
// item({ item }){
127+
// if (item.anchor != null) {
128+
// var anchorLink = "#" + item.anchor;
129+
// } else {
130+
// var anchorLink = "";
131+
// }
132+
// return html `<a class="aa-link" href="/docs${item.url}${anchorLink}">
133+
// <p class="aa-title" >${highlightHit({hit: item, attribute: 'title'})}</h3>
134+
// <p class="aa-heading">${item.headings.join(' >')}</p>
135+
// <p class="aa-content">${highlightHit({hit: item, attribute: 'content'})}</p></a>
136+
// `;
137+
// },
138+
// noResults() {
139+
// return html `<p class="aa-content">No results for <strong>${query}</strong></p>`;
140+
// }
141+
// },
142+
143+
// },
144+
// ];
145+
// },
146+
// navigator: {
147+
// navigate({ itemUrl }) {
148+
// window.location.assign('/docs'+itemUrl);
149+
// },
150+
// }
151+
// });
80152

‎src/_includes/navbar/navbar-mobile.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
</div>
2727

2828
<div class="navbar-mobile__search">
29-
{% include_cached navbar/search.html placeholder="Search the Segment documentation..." %}
29+
{% include_cached navbar/search.html container="autocomplete-mobile" %}
3030
</div>
3131

3232
<div class="navbar-mobile__panel">

‎src/_includes/navbar/search.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="field field--expand field--icon">
2-
<div id="autocomplete"></div>
2+
<div id="{{include.container}}"></div>
33
{% unless include.mobile %}
44
<div class="field__icon field__icon--right flex flex--middle flex--center">
55
<button class="field__button" data-ref="search-navbar[trigger]">

‎src/_layouts/home.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<div class="flex flex--justify gutter gutter--large@medium">
88
<div class="flex__column flex__column--6@xlarge">
99
<div class="search">
10-
{% include_cached navbar/search.html placeholder="Search the Segment documentation..." %}
10+
{% include_cached navbar/search.html container="autocomplete" %}
1111
</div>
1212
</div>
1313

@@ -19,7 +19,7 @@
1919

2020
{% include_cached navbar/navbar-mobile.html %}
2121

22-
<article class="home page" data-tracking-scroll data-swiftype-name="body" data-swiftype-type="text">
22+
<article class="home page" data-tracking-scroll>
2323
<div class="home__body page__body">
2424
<div>
2525
{%- if page.title -%}

‎src/utils/search.md

Whitespace-only changes.

0 commit comments

Comments
 (0)