Skip to content

Commit e7da03d

Browse files
jlukicjlukic
committed
Docs updates
1 parent eee0c6b commit e7da03d

3 files changed

Lines changed: 188 additions & 31 deletions

File tree

‎server/documents/collections/menu.html.eco‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -876,20 +876,20 @@ themes : ['Default', 'Chubby', 'GitHub', 'Material']
876876
<h4 class="ui header">Colored</h4>
877877
<p>Additional colors can be specified.</p>
878878
<div class="ui menu">
879-
<a class="ui active red item">Red</a>
880-
<a class="ui orange item">Orange</a>
881-
<a class="ui yellow item">Yellow</a>
882-
<a class="ui olive item">Olive</a>
883-
<a class="ui green item">Green</a>
884-
<a class="ui teal item">Teal</a>
879+
<a class="active red item">Red</a>
880+
<a class="orange item">Orange</a>
881+
<a class="yellow item">Yellow</a>
882+
<a class="olive item">Olive</a>
883+
<a class="green item">Green</a>
884+
<a class="teal item">Teal</a>
885885
</div>
886886
<div class="ui menu">
887-
<a class="ui blue item">Blue</a>
888-
<a class="ui violet item">Violet</a>
889-
<a class="ui purple item">Purple</a>
890-
<a class="ui pink item">Pink</a>
891-
<a class="ui brown item">Brown</a>
892-
<a class="ui grey item">Grey</a>
887+
<a class="blue item">Blue</a>
888+
<a class="violet item">Violet</a>
889+
<a class="purple item">Purple</a>
890+
<a class="pink item">Pink</a>
891+
<a class="brown item">Brown</a>
892+
<a class="grey item">Grey</a>
893893
</div>
894894
</div>
895895
<div class="another example">
@@ -1029,23 +1029,23 @@ themes : ['Default', 'Chubby', 'GitHub', 'Material']
10291029
<div class="another example">
10301030
<p>These colors can also be inverted</p>
10311031
<div class="ui inverted menu">
1032-
<a class="ui active red item">Red</a>
1033-
<a class="ui orange item">Orange</a>
1034-
<a class="ui yellow item">Yellow</a>
1035-
<a class="ui olive item">Olive</a>
1036-
<a class="ui green item">Green</a>
1037-
<a class="ui teal item">Teal</a>
1032+
<a class="active red item">Red</a>
1033+
<a class="orange item">Orange</a>
1034+
<a class="yellow item">Yellow</a>
1035+
<a class="olive item">Olive</a>
1036+
<a class="green item">Green</a>
1037+
<a class="teal item">Teal</a>
10381038
</div>
10391039
<div class="ui inverted menu">
1040-
<a class="ui blue item">Blue</a>
1041-
<a class="ui violet item">Violet</a>
1042-
<a class="ui purple item">Purple</a>
1043-
<a class="ui pink item">Pink</a>
1044-
<a class="ui brown item">Brown</a>
1045-
<a class="ui grey item">Grey</a>
1040+
<a class="blue item">Blue</a>
1041+
<a class="violet item">Violet</a>
1042+
<a class="purple item">Purple</a>
1043+
<a class="pink item">Pink</a>
1044+
<a class="brown item">Brown</a>
1045+
<a class="grey item">Grey</a>
10461046
</div>
10471047
</div>
1048-
<div class="another example">
1048+
<div class="another example">
10491049
<div class="ui red three item inverted menu">
10501050
<a class="active item">
10511051
Home

‎server/documents/modules/search.html.eco‎

Lines changed: 86 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ type : 'UI Module'
1313
<link rel="stylesheet/less" type="text/css" href="/src/definitions/modules/search.less" />
1414
<script src="/javascript/search.js"></script>
1515

16-
<%- @partial('header', { tabs: { definition: 'Definition', usage: 'Usage', settings: 'Settings'} }) %>
16+
<%- @partial('header', { tabs: { definition: 'Definition', examples: 'Examples', usage: 'Usage', settings: 'Settings'} }) %>
1717

1818
<div class="main ui container">
1919

@@ -149,11 +149,6 @@ type : 'UI Module'
149149

150150
</div>
151151

152-
<div class="ui tab" data-tab="examples">
153-
<h2 class="ui dividing header">Examples</h2>
154-
155-
156-
</div>
157152
<div class="ui tab" data-tab="usage">
158153

159154
<h2 class="ui dividing header">Initializing</h2>
@@ -424,6 +419,91 @@ type : 'UI Module'
424419

425420
</div>
426421

422+
<div class="ui tab" data-tab="examples">
423+
424+
<h2 class="ui dividing header">Examples</h2>
425+
426+
<div class="mapping example">
427+
<h4 class="ui header">Using Different Response Fields</h4>
428+
<p>Search expects a very specific API response, however you can easily modify the mapping of server response to displayed field using the <code>fields</code> parameter.
429+
<div class="ui ignored code">
430+
$('.ui.search')
431+
.search({
432+
apiSettings: {
433+
url: '//api.github.com/search/repositories?q={query}'
434+
},
435+
fields: {
436+
results : 'items',
437+
title : 'name',
438+
url : 'html_url'
439+
},
440+
minCharacters : 3
441+
})
442+
;
443+
</div>
444+
<div class="ui search">
445+
<div class="ui left icon input">
446+
<input class="prompt" type="text" placeholder="Search GitHub">
447+
<i class="github icon"></i>
448+
</div>
449+
</div>
450+
</div>
451+
452+
<div class="external example">
453+
<h4 class="ui header">Using API Settings</h4>
454+
<p><a href="/behaviors/api.html">API</a> provides a callback <a href="/behaviors/api.html#response-callbacks"><code>onResponse</code></a> that can be used to restructure third party APIs to match the expected server response for search.</p>
455+
<p>You can also use <a href="/behaviors/api.html#mocking-responses"><code>mockResponseAsync</code></a> to use a custom backend for fullfilling searches.</p>
456+
<div class="ui search">
457+
<div class="ui left icon input">
458+
<input class="prompt" type="text" placeholder="Search GitHub">
459+
<i class="github icon"></i>
460+
</div>
461+
</div>
462+
<div class="ignored code" data-type="javascript">
463+
$('.ui.search')
464+
.search({
465+
type : 'category',
466+
minCharacters : 3,
467+
apiSettings : {
468+
onResponse: function(githubResponse) {
469+
var
470+
response = {
471+
results : {}
472+
}
473+
;
474+
// translate github api response to work with search
475+
$.each(githubResponse.items, function(index, item) {
476+
var
477+
language = item.language || 'Unknown',
478+
maxResults = 8
479+
;
480+
if(index >= maxResults) {
481+
return false;
482+
}
483+
// create new language category
484+
if(response.results[language] === undefined) {
485+
response.results[language] = {
486+
name : language,
487+
results : []
488+
};
489+
}
490+
// add result to category
491+
response.results[language].results.push({
492+
title : item.name,
493+
description : item.description,
494+
url : item.html_url
495+
});
496+
});
497+
return response;
498+
},
499+
url: '//api.github.com/search/repositories?q={query}'
500+
}
501+
})
502+
;
503+
</div>
504+
</div>
505+
</div>
506+
427507
<div class="ui tab" data-tab="settings">
428508
<h2 class="ui dividing header">
429509
Search

‎server/files/javascript/search.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,11 @@ semantic.search.ready = function() {
66
// selector cache
77
var
88
$local = $('.local .ui.search'),
9+
$external = $('.external.example .ui.search'),
10+
$mapping = $('.mapping .ui.search'),
911
$standard = $('.standard .ui.search'),
1012
$category = $('.category .ui.search'),
13+
1114
content,
1215
// alias
1316
handler
@@ -268,6 +271,7 @@ semantic.search.ready = function() {
268271
$standard
269272
.search()
270273
;
274+
271275
$category
272276
.search({
273277
type: 'category',
@@ -277,6 +281,79 @@ semantic.search.ready = function() {
277281
})
278282
;
279283

284+
// mapping example
285+
$mapping
286+
.search({
287+
apiSettings: {
288+
url: '//api.github.com/search/repositories?q={query}',
289+
cache: true
290+
},
291+
debug: true,
292+
fields: {
293+
results : 'items',
294+
title : 'name',
295+
url : 'html_url'
296+
},
297+
minCharacters : 3
298+
})
299+
;
300+
301+
// api mod
302+
$external
303+
.search({
304+
type : 'category',
305+
minCharacters : 3,
306+
apiSettings : {
307+
onFailure: function() {
308+
$(this).search('display message', '<b>Hold off a few minutes</b> <div class="ui divider"></div> GitHub rate limit exceeded for anonymous search.');
309+
},
310+
onResponse: function(githubResponse) {
311+
var
312+
response = {
313+
results : {}
314+
}
315+
;
316+
if(githubResponse.items.length === 0) {
317+
// no results
318+
return response;
319+
}
320+
$.each(githubResponse.items, function(index, item) {
321+
var
322+
language = item.language || 'Unknown',
323+
maxLength = 200,
324+
description
325+
;
326+
if(index >= 8) {
327+
// only show 8 results
328+
return false;
329+
}
330+
// Create new language category
331+
if(response.results[language] === undefined) {
332+
response.results[language] = {
333+
name : language,
334+
results : []
335+
};
336+
}
337+
description = (item.description < maxLength)
338+
? item.description
339+
: item.description.substr(0, maxLength) + '...'
340+
;
341+
description = $.fn.search.settings.templates.escape(description);
342+
// Add result to category
343+
response.results[language].results.push({
344+
title : item.name,
345+
description : description,
346+
url : item.html_url
347+
});
348+
});
349+
return response;
350+
},
351+
url: '//api.github.com/search/repositories?q={query}'
352+
}
353+
})
354+
;
355+
356+
280357
};
281358

282359

0 commit comments

Comments
 (0)