8000 Prepare for demo page · typescript-bot/TypeSearch@dc6ac9a · GitHub
[go: up one dir, main page]
Skip to content

Commit dc6ac9a

Browse files
RyanCavanaughRyanCavanaugh
committed
Prepare for demo page
1 parent 9dca8af commit dc6ac9a

File tree

8 files changed

+149
-75
lines changed

8 files changed

+149
-75
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
node_modules/
2+
*.js

‎demo.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
body {
2+
text-align: center;
3+
font-family: 'Palatino Linotype';
4+
font-size: 24px;
5+
line-height: 1.4;
6+
background: 'red';
7+
position: relative;
8+
padding-top: 1em;
9+
}
10+
11+
.typescript, a, a:visited {
12+
color: #294E80;
13+
}
14+
15+
h1 {
16+
margin-bottom: 1.4em;
17+
}
18+
19+
.footer {
20+
font-size: 80%;
21+
position: fixed;
22+
bottom: 12px;
23+
left: 0px;
24+
right: 0px;
25+
text-align: center;
26+
}
27+
28+
#demo {
29+
width: 20em;
30+
}

‎index.html

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,25 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Types Search Demo</title>
5+
<title>TypeScript Types Search</title>
6+
<link rel="stylesheet" href="demo.css">
67
<link rel="stylesheet" href="style.css">
78
<script src="node_modules/jquery/dist/jquery.min.js"></script>
89
<script src="node_modules/typeahead.js/dist/typeahead.bundle.js"></script>
9-
<script src="search.js"></script>
10+
<script src="bin/search.js"></script>
1011
<script>
1112
$(function() {
1213
typeSearch(document.getElementById('demo'));
1314
});
1415
</script>
1516
</head>
1617
<body>
17-
<h2>Types Search Demo</h2>
18-
<input id="demo" class="typeahead" />
18+
<h1><span class="typescript">Types Search</span></h1>
19+
<div style="{ width: 36em; }">
20+
<input id="demo" class="typeahead" placeholder="Search for Types Packages" value="angular" style={ width: 100% } />
21+
<div id="output" />
22+
</div>
23+
24+
<div class="footer">Powered by <a href="https://github.com/DefinitelyTyped/DefinitelyTyped">DefinitelyTyped</a> and <a href="https://github.com/RyanCavanaugh/publish-typings">publish-typings</a></div>
1925
</body>
2026
</html>

‎search-index-head.json

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎search-index-min.json

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎search.ts

Lines changed: 86 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,104 @@
11
/// <reference path="typings/tsd.d.ts" />
22

3-
const bh = new Bloodhound(<any>{
4-
datumTokenizer: (entry: any): string[] => {
5-
return [entry.libraryName, entry.projectName, entry.typePackageName].concat(entry.globals);
6-
},
7-
queryTokenizer: (input: string) => {
8-
return [input];
9-
},
10-
identify: (e: any) => e.typePackageName,
11-
prefetch: {
12-
url: '/search-index-full.json',
13-
ttl: 0
14-
},
15-
sorter: (x: any, y: any) => {
16-
// TODO: Include edit distance as additional weighting factor
17-
return y.downloads - x.downloads;
18-
}
19-
});
3+
const localStorageDataKey = 'typesearch-data';
4+
const localStorageOriginKey = 'typeseach-data-origin';
5+< F438 div class="diff-text-inner">
6+
const dataTimeout = 1000 * 60 * 60 * 24; // 1 day
207

21-
bh.clearPrefetchCache();
22-
bh.initialize();
23-
/*
24-
$.getJSON('/search-index-full.json', data => {
25-
bh.add(data);
26-
});
27-
*/
8+
interface MinifiedSearchRecord {
9+
// types package name
10+
t: string;
11+
// globals
12+
g: string[];
13+
// modules
14+
m: string[];
15+
// project name
16+
p: string;
17+
// library name
18+
l: string;
19+
// downloads in the last month from NPM
20+
d: number;
21+
}
2822

2923
function typeSearch(el: HTMLInputElement) {
24+
const jqueryEl = $(el);
3025
const opts: Twitter.Typeahead.Options = {
3126
highlight: true,
32-
minLength: 1
27+
minLength: 0
3328
};
29+
30+
const source = createDataSource();
31+
3432
const data = {
35-
source: bh,
36-
displayKey: 'typePackageName',
33+
source,
34+
displayKey: 't',
3735
templates: {
38-
suggestion: (obj: any) => {
36+
suggestion: (obj: MinifiedSearchRecord) => {
3937
return `<div class="suggestion">
40-
<span class="type-package-name">${obj.typePackageName}</span>
41-
<span class="library-name">${obj.libraryName}</span>
38+
<span class="type-package-name">${obj.t}</span>
39+
<span class="library-name">${obj.l}</span>
4240
</div>`
4341
}
4442
}
4543
};
4644

47-
$(el).typeahead(opts, data);
45+
jqueryEl.typeahead(opts, data);
46+
jqueryEl.on('typeahead:select', (unused: {}, obj: MinifiedSearchRecord) => navigate(obj.t));
47+
jqueryEl.keyup(k => {
48+
if(k.keyCode === 13) {
49+
navigate(el.value);
50+
}
51+
});
52+
53+
jqueryEl.focus(fetchFull);
54+
55+
function navigate(value: string) {
56+
window.location.href = `https://www.npmjs.org/package/@ryancavanaugh/${value}`;
57+
}
58+
59+
let fetching = false;
60+
function fetchFull() {
61+
const lastFetch = +window.localStorage.getItem(localStorageOriginKey);
62+
63+
if (Date.now() > lastFetch + dataTimeout) {
64+
if (!fetching) {
65+
fetching = true;
66+
67+
$.getJSON('/search-index-min.json', data => {
68+
window.localStorage.setItem(localStorageOriginKey, Date.now().toString());
69+
window.localStorage.setItem(localStorageDataKey, JSON.stringify(data));
70+
source.add(data);
71+
fetching = false;
72+
});
73+
}
74+
}
75+
}
76+
77+
function createDataSource() {
78+
const local = JSON.parse(window.localStorage.getItem(localStorageDataKey)) || undefined;
79+
80+
const bh = new Bloodhound({
81+
82+
datumTokenizer: (entry: MinifiedSearchRecord): string[] => {
83+
return [entry.l, entry.p, entry.t].concat(entry.g).concat(entry.m);
84+
},
85+
queryTokenizer: (input: string) => {
86+
return [input];
87+
},
88+
identify: (e: MinifiedSearchRecord) => <any>e.t,
89+
prefetch: {
90+
url: '/search-index-head.json',
91+
ttl: dataTimeout
92+
},
93+
sorter: (x: MinifiedSearchRecord, y: MinifiedSearchRecord) => {
94+
// TODO: Include edit distance as additional weighting factor
95+
return y.d - x.d;
96+
},
97+
local
98+
});
99+
100+
return bh;
101+
}
102+
48103
}
49104

‎style.css

Lines changed: 18 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
21
div.suggestion {
32
border: solid 1px gray;
4-
5-
}
6-
7-
input#demo {
8-
width: 18em;
3+
cursor: pointer;
94
}
105

116
.twitter-typehead {
@@ -16,47 +11,30 @@ input#demo {
1611

1712
span.type-package-name {
1813
font-family: monospace;
14+
text-align: left;
15+
left: 5%;
16+
right: 35%;
1917
}
2018

21-
span.library-name {
22-
float: right;
19+
span.type-package-name, span.library-name {
20+
display: block;
21+
position: absolute;
22+
text-overflow: ellipsis;
23+
overflow: hidden;
24+
white-space: nowrap;
25+
clip: all;
2326
}
2427

25-
.container {
26-
margin: 0 auto;
27-
max-width: 750px;
28-
text-align: center;
28+
span.library-name {
29+
display: block;
30+
left: 60%;
31+
right: 2%;
32+
text-align: right;
2933
}
34+
3035
.tt-dropdown-menu, .gist {
3136
text-align: left;
3237
}
33-
html {
34-
color: #333333;
35-
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
36-
font-size: 18px;
37-
line-height: 1.2;
38-
}
39-
.title, .example-name {
40-
font-family: Prociono;
41-
}
42-
p {
43-
margin: 0 0 10px;
44-
}
45-
.title {
46-
font-size: 64px;
47-
margin: 20px 0 0;
48-
}
49-
.example {
50-
padding: 30px 0;
51-
}
52-
.example-name {
53-
font-size: 32px;
54-
margin: 20px 0;
55-
}
56-
.demo {
57-
margin: 50px 0;
58-
position: relative;
59-
}
6038
.typeahead, .tt-query, .tt-hint {
6139
border: 2px solid #CCCCCC;
6240
border-radius: 8px 8px 8px 8px;
@@ -91,6 +69,7 @@ p {
9169
font-size: 18px;
9270
line-height: 24px;
9371
padding: 3px 20px;
72+
height: 24px;
9473
}
9574
.tt-suggestion.tt-cursor {
9675
background-color: #0097CF;

‎tsconfig.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
"module": "commonjs",
55
"target": "es5",
66
"noImplicitAny": true,
7-
"sourceMap": false
7+
"sourceMap": false,
8+
"outDir": "bin"
89
},
910
"exclude": [
1011
"node_modules"

0 commit comments

Comments
 (0)
0