Skip to content

Commit b007a4f

Browse files
felixmulderfelixmulder
committed
Finish entity search implementation
1 parent 5f15ebf commit b007a4f

File tree

4 files changed

+362
-22
lines changed

4 files changed

+362
-22
lines changed

‎doc-tool/resources/_layouts/search.html

Lines changed: 119 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,33 @@
77

88
{% include "toolbar" %}
99

10-
<a id="back-anchor" href="">&lt; Back</a>
11-
<h1 id="searching-for"></h1>
10+
<div id="back-container">
11+
<span>
12+
<a id="back-anchor" href="">Back</a>
13+
</span>
14+
</div>
15+
16+
<div id="search-container">
17+
<h1 id="searching-for"></h1>
18+
<div id="result-container">
19+
<div class="results">
20+
<h1>Entity Results</h1>
21+
<ul id="entity-results">
22+
</ul>
23+
</div>
24+
<div class="results">
25+
<h1>Member Results</h1>
26+
<ul id="member-results">
27+
</ul>
28+
</div>
29+
</div>
30+
</div>
1231

1332
<script>
1433
// Parse parameters from URL:
1534
var parameters = [];
1635
var apiSearch = undefined;
36+
var docs = {{ docs | json }};
1737
(function() {
1838
var pairs = location.search.substring(1).split('&');
1939
for (var i = 0; i < pairs.length; i++) {
@@ -24,7 +44,7 @@ <h1 id="searching-for"></h1>
2444

2545
// Set search term and back button:
2646
var searchTerm = parameters["searchTerm"];
27-
document.getElementById("searching-for").innerHTML = 'Seaching for "' + searchTerm + '"...';
47+
document.getElementById("searching-for").innerHTML = 'Search results for "' + searchTerm + '"';
2848
document.getElementById("back-anchor").href = parameters["previousUrl"];
2949

3050
if (!window.Worker) {
@@ -33,15 +53,101 @@ <h1 id="searching-for"></h1>
3353
"web workers not supported. Please update your browser.";
3454
}
3555
else {
36-
apiSearch = new Worker("{{ site.baseurl }}/js/api-search.js");
37-
apiSearch.postMessage({
38-
"type": "setup",
39-
"search": searchTerm,
40-
"docs": {{ docs | json }},
41-
});
42-
43-
apiSearch.onmessage = function(res) {
44-
console.log("got res: " + res.data);
45-
};
56+
// perform API search:
57+
apiSearch = new Worker("{{ site.baseurl }}/js/api-search.js");
58+
apiSearch.postMessage({
59+
"type": "setup",
60+
"search": searchTerm,
61+
"docs": docs,
62+
});
63+
64+
var entityResultsNode = document.getElementById("entity-results");
65+
var entityResults = [];
66+
67+
var insertEntity = function(entity, parent) {
68+
var shouldInsert =
69+
parent.kind == "package" &&
70+
!(entity.kind == "object" && entity.hasCompanion)
71+
72+
if (shouldInsert) {
73+
// If parent package not in list, create it first:
74+
if (!(parent.name in entityResults)) {
75+
var packageLi = document.createElement("li");
76+
entityResultsNode.appendChild(packageLi);
77+
78+
packageLi.innerHTML =
79+
"<h1 class=\"package-name\">" +
80+
"<a href=\"{{ site.baseurl }}/api/" + parent.path.join('/') + "/index.html\">" +
81+
parent.name +
82+
"</a>" +
83+
"</h1>";
84+
85+
var entityUl = document.createElement("ul");
86+
entityUl.classList.add("entity-ul");
87+
packageLi.appendChild(entityUl);
88+
entityResults[parent.name] = entityUl;
89+
var coverBlock = document.createElement("div");
90+
coverBlock.classList.add("cover-block");
91+
entityUl.appendChild(coverBlock);
92+
}
93+
94+
// Insert into list of results in package, no need to sort -
95+
// already sorted:
96+
var entityUl = entityResults[parent.name];
97+
var entityLi = document.createElement("li");
98+
if (entity.hasCompanion)
99+
entityLi.classList.add("entity-result-li", "with-companion");
100+
else
101+
entityLi.classList.add("entity-result-li");
102+
103+
var companion = !entity.hasCompanion ? "" : (
104+
'<a class="letter-anchor object" href="{{ site.baseurl }}/api/' + entity.companionPath.join('/') + '.html">O</a>'
105+
);
106+
107+
var letter =
108+
'<a class="letter-anchor ' + entity.kind + '" href="{{ site.baseurl }}/api/' + entity.path.join('/') + '.html">' +
109+
entity.kind.charAt(0).toUpperCase() +
110+
'</a>'
111+
112+
entityLi.innerHTML = (
113+
'<div class="entity-kinds">' +
114+
companion +
115+
letter +
116+
'</div>' +
117+
"<a class=\"entity-name\" href=\"{{ site.baseurl }}/api/" + entity.path.join('/') + ".html\">" +
118+
entity.name +
119+
"</a>"
120+
);
121+
entityUl.appendChild(entityLi);
122+
}
123+
};
124+
125+
var memberResultsNode = document.getElementById("member-results");
126+
var memberResults = [];
127+
var insertMember = function(member, parent) {
128+
129+
};
130+
131+
apiSearch.onmessage = function(res) {
132+
switch(res.data.type) {
133+
case "entityResult": {
134+
var entity = res.data.entity;
135+
var parent = res.data.parent;
136+
console.log("got entity: " + entity.name + ", in package: " + parent.name);
137+
insertEntity(entity, parent);
138+
break;
139+
}
140+
case "memberResult": {
141+
var member = res.data.member;
142+
var parent = res.data.parent;
143+
console.log("got member: " + member.name + ", in entity: " + parent.name);
144+
insertMember(member, parent);
145+
break;
146+
}
147+
default: {
148+
console.log("Got unknown message: " + res.data.type);
149+
}
150+
}
151+
};
46152
}
47153
</script>

‎doc-tool/resources/css/search.css

Lines changed: 159 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,160 @@
1-
h1#searching-for {
1+
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:200,300,400,600);
2+
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700);
3+
4+
div#back-container {
5+
height: 75px;
6+
width: 100%;
7+
padding-top: 25px;
8+
}
9+
10+
div#back-container > span {
11+
padding: 10px;
12+
border-left: 1px solid #fff;
13+
margin-left: 27px;
14+
font-family: "Titillium Web", sans-serif;
15+
font-weight: 200;
16+
text-transform: uppercase;
17+
font-size: 13px;
18+
}
19+
20+
div#back-container > span:hover {
21+
border-left: 1px solid #0fa00f;
22+
}
23+
24+
div#back-container > span > a#back-anchor:hover,
25+
div#back-container > span > a#back-anchor:focus,
26+
div#back-container > span > a#back-anchor {
27+
color: #373a3c;
28+
text-decoration: none;
29+
}
30+
31+
div#search-container {
32+
margin: 0 auto;
33+
width: 1000px;
34+
}
35+
36+
div#search-container > h1#searching-for {
37+
text-align: center;
38+
margin-bottom: 50px;
39+
font-family: "Source Sans Pro", sans-serif;
40+
}
41+
42+
div#search-container > div#result-container {
43+
width: 100%;
44+
}
45+
46+
div#result-container > div.results {
47+
float: left;
48+
width: 50%;
49+
padding-right: 20px;
50+
min-height: 40px; /** debug */
51+
}
52+
53+
div#entity-results {
54+
background-color: green; /** debug */
55+
}
56+
57+
div#member-results {
58+
background-color: red; /** debug */
59+
}
60+
61+
div.results > h1 {
62+
width: 100%;
63+
border-bottom: 1px solid black;
64+
font-family: "Titillium Web", sans-serif;
65+
font-weight: 300;
66+
font-size: 24px;
67+
}
68+
69+
div.results ul {
70+
list-style-type: none;
71+
padding-left: 0;
72+
}
73+
74+
div.results > ul > li > h1.package-name {
75+
font-size: 13px;
76+
margin-top: 20px;
77+
}
78+
79+
div.results > ul > li > h1.package-name > a {
80+
font-family: "Titillium Web", sans-serif;
81+
font-weight: 300;
82+
color: #ff4081;
83+
}
84+
85+
div.results > ul > li a:hover,
86+
div.results > ul > li a:focus,
87+
div.results > ul > li a {
88+
color: #373a3c;
89+
text-decoration: none;
90+
}
91+
92+
div.results > ul > li > ul {
93+
border-left: 2px solid gray;
94+
font-family: "Titillium Web", sans-serif;
95+
font-size: 13px;
96+
font-weight: 100;
97+
}
98+
99+
div.results > ul > li > ul > li {
100+
line-height: 40px;
101+
}
102+
103+
div.results li.entity-result-li {
104+
}
105+
106+
div.results ul.entity-ul {
107+
position: relative;
108+
}
109+
110+
div.cover-block {
111+
position: absolute;
112+
background: #fff;
113+
border-right: 2px solid gray;
114+
width: 82px;
115+
height: 100%;
116+
left: -82px;
117+
top: 0;
118+
}
119+
120+
div.results li.entity-result-li > a.entity-name {
121+
margin-left: 10px;
122+
}
123+
124+
div.results li.entity-result-li {
125+
transition: all 0.2s ease;
126+
margin-left: -42px;
127+
}
128+
129+
div.results li.entity-result-li.with-companion {
130+
margin-left: -82px;
131+
}
132+
133+
div.results li.entity-result-li:hover {
134+
margin-left: 0;
135+
}
136+
137+
div.results li.entity-result-li > div.entity-kinds {
138+
float: left;
139+
}
140+
141+
div.results li.entity-result-li > div.entity-kinds > a.letter-anchor {
142+
height: 40px;
143+
width: 40px;
144+
display: block;
145+
float: left;
146+
text-align: center;
147+
color: #fff;
148+
}
149+
150+
div.results li.entity-result-li > div.entity-kinds > a.letter-anchor.object {
151+
background-color: rgb(44, 108, 141);
152+
}
153+
154+
div.results li.entity-result-li > div.entity-kinds > a.letter-anchor.class {
155+
background-color: rgb(68, 173, 125);
156+
}
157+
158+
div.results li.entity-result-li > div.entity-kinds > a.letter-anchor.trait {
159+
background-color: rgb(25, 170, 207);
2160
}

‎doc-tool/resources/css/sidebar.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -220,11 +220,11 @@ ul.package-entities > li > div.entity-kinds > a.letter-anchor.trait {
220220
/** Cover block used to hide where the kind blocks come from */
221221
div#cover-block {
222222
position: absolute;
223-
background: #fafafa;
223+
background: #fff;
224224
border-right: 2px solid gray;
225-
width: 40px;
225+
width: 41px;
226226
height: 100%;
227-
left: -40px;
227+
left: -41px;
228228
top: 0;
229229
}
230230

0 commit comments

Comments
 (0)