Skip to content

Commit f165892

Browse files
mattludwigsfhunleth
mattludwigs
authored and
fhunleth
committed
Start adding library searching
1 parent 3747d20 commit f165892

File tree

4 files changed

+289
-8
lines changed

4 files changed

+289
-8
lines changed

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,6 @@
11
[![Elixir Circuits](circuits.png)](https://github.com/elixir-circuits)
22

3+
Website!
4+
5+
6+

‎index.html

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ <h1 class="header h1 text center">Elixir Circuits</h1>
2525

2626
<div class="section container content">
2727
<h2 class="header h2 text center">Libraries</h2>
28-
<ul class="libraries">
28+
<ul class="libraries flex-container">
2929
<li class="library">
3030
<div class="circle">
3131
<a class="text secondary library-name" href="https://github.com/elixir-circuits/circuits_gpio"><i class="far fa-lightbulb"></i></a>
@@ -52,9 +52,30 @@ <h3><a href="https://github.com/elixir-circuits/circuits_uart">UART</a></h3>
5252
</li>
5353
</ul>
5454
</div>
55+
56+
<hr class="container">
57+
58+
<div class="container section content js-hex-query-component query-component">
59+
<h2 class="header h2 text center">Search</h2>
60+
61+
62+
<div class="flex-container library-search">
63+
<a href="#" class="js-hex-circuits-library btn btn--big pill hover-active" data-name="circuits_gpio">GPIO</a>
64+
<a href="#" class="js-hex-circuits-library btn pill btn--big hover-active" data-name="circuits_i2c">I2C</a>
65+
<a href="#" class="js-hex-circuits-library btn pill btn--big hover-active" data-name="circuits_spi">SPI</a>
66+
<a href="#" class="js-hex-circuits-library btn pill btn--big hover-active" data-name="circuits_uart">UART</a>
67+
</div>
68+
69+
<div class="js-hex-search-avalibale-libraries avalibale-libraries-list"></div>
70+
</div>
5571
<footer>
5672
<a class="icon" href="https://github.com/elixir-circuits"><i class="fab fa-github"></i></a>
5773
</footer>
74+
5875
<a class="github-fork-ribbon" href="https://github.com/elixir-circuits" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
76+
77+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
78+
<script src="index.js"></script>
79+
5980
</body>
6081
</html>

‎index.js

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
"use strict";
2+
3+
var hexSearch = {
4+
state: {
5+
avaliableLibrariesDom: document.querySelector(".js-hex-search-avalibale-libraries"),
6+
i2cLibraries: [],
7+
spiLibraries: [],
8+
gpioLibraries: [],
9+
uartLibraries: [],
10+
selectedLibraries: [],
11+
lastSearch: null,
12+
},
13+
14+
init: function () {
15+
console.log("Starting query eng");
16+
17+
var jsQueryDom = document.querySelector(".js-hex-query-component");
18+
var jsHexSearchlibraries = document.querySelectorAll(".js-hex-circuits-library");
19+
20+
for (var i = 0; i < jsHexSearchlibraries.length; i++) {
21+
this.attachLibraryClick(jsHexSearchlibraries[i], this.state);
22+
}
23+
},
24+
25+
update: function(update_command, updateData, state) {
26+
switch (update_command) {
27+
case "search":
28+
var elm = updateData[0];
29+
var libQuery = updateData[1];
30+
31+
if (elm.classList.contains("active")) {
32+
state[this.libNameToStateName(libQuery)] = [];
33+
elm.classList.remove("active");
34+
this.update("updateDom", null, state);
35+
} else {
36+
state.lastSearch = libQuery;
37+
elm.classList.add("active");
38+
this.update("search_response", this.search(libQuery), state);
39+
}
40+
41+
break;
42+
case "search_response":
43+
updateData
44+
.then(function (response) {
45+
for (var i = 0; i < response.data.length; i++) {
46+
var lib = {
47+
name: response.data[i].name,
48+
url: response.data[i].html_url,
49+
description: response.data[i].meta.description,
50+
};
51+
52+
if (state.lastSearch === "circuits_i2c") {
53+
state.i2cLibraries.push(lib);
54+
}
55+
56+
if (state.lastSearch === "circuits_gpio") {
57+
state.gpioLibraries.push(lib);
58+
}
59+
60+
if (state.lastSearch === "circuits_spi") {
61+
state.gpioLibraries.push(lib);
62+
}
63+
64+
if (state.lastSearch === "circuits_uart") {
65+
state.uartLibraries.push(lib);
66+
}
67+
}
68+
69+
this.update("updateDom", null, state);
70+
}.bind(this)
71+
)
72+
.catch(function (e) {
73+
consoe.log(e);
74+
});
75+
break;
76+
77+
case "updateDom":
78+
this.updateDom(state);
79+
break;
80+
default:
81+
console.warn("Invalid update command: " + update_command);
82+
}
83+
},
84+
85+
attachLibraryClick: function (libraryDomElm, state) {
86+
libraryDomElm.addEventListener("click", function (event) {
87+
event.preventDefault();
88+
this.update("search", [event.target, event.target.getAttribute("data-name")], state);
89+
}.bind(this))
90+
},
91+
92+
search: function (libraryName) {
93+
return axios
94+
.get("https://hex.pm/api/packages?search=depends%3A" + libraryName)
95+
},
96+
97+
updateDom: function(state) {
98+
var ul = document.createElement("ul");
99+
ul.id = "js-hex-lib-list";
100+
101+
for (var i = 0; i < state.i2cLibraries.length; i++) {
102+
var li = this.buildLibListItem(state.i2cLibraries[i], "circuits_i2c");
103+
ul.appendChild(li);
104+
}
105+
106+
for (var i = 0; i < state.gpioLibraries.length; i++) {
107+
var li = this.buildLibListItem(state.gpioLibraries[i], "circuits_gpio");
108+
ul.appendChild(li);
109+
}
110+
111+
for (var i = 0; i < state.spiLibraries.length; i++) {
112+
var li = this.buildLibListItem(state.spiLibraries[i], "circuits_spi");
113+
ul.appendChild(li);
114+
}
115+
116+
for (var i = 0; i < state.uartLibraries.length; i++) {
117+
var li = this.buildLibListItem(state.uartLibraries[i], "circuits_uart");
118+
ul.appendChild(li);
119+
}
120+
121+
var oldList = document.getElementById("js-hex-lib-list");
122+
123+
if (oldList) {
124+
state.avaliableLibrariesDom.removeChild(oldList);
125+
}
126+
127+
state.avaliableLibrariesDom.appendChild(ul);
128+
},
129+
130+
buildLibListItem: function (lib, protocol) {
131+
var pName = this.aNode(lib.name, lib.url);
132+
var protocol = this.pNode(protocol);
133+
var description = this.pNode(lib.description);
134+
var li = document.createElement("li");
135+
li.className += " library-search-item";
136+
pName.className += " library-name";
137+
protocol.className += " protocol-name";
138+
description.className += "library-description";
139+
li.appendChild(pName);
140+
li.appendChild(protocol);
141+
li.appendChild(description);
142+
143+
return li;
144+
},
145+
146+
pNode: function (txt) {
147+
var txtNode = document.createTextNode(txt);
148+
var p = document.createElement("p");
149+
p.appendChild(txtNode);
150+
151+
return p;
152+
},
153+
154+
aNode: function (txt, link) {
155+
var txtNode = document.createTextNode(txt);
156+
var a = document.createElement("a");
157+
a.appendChild(txtNode);
158+
a.href = link;
159+
a.target = "blank";
160+
161+
return a;
162+
},
163+
164+
libNameToStateName: function (libName) {
165+
switch (libName) {
166+
case "circuits_i2c":
167+
return "i2cLibraries";
168+
break;
169+
case "circuits_gpio":
170+
return "gpioLibraries";
171+
break;
172+
case "circuits_spi":
173+
return "spiLibraries";
174+
break;
175+
case "circuits_uart":
176+
return "uartLibraries";
177+
break;
178+
}
179+
},
180+
181+
}
182+
183+
window.addEventListener("load", function (event) {
184+
hexSearch.init();
185+
});
186+

‎styles.css

Lines changed: 77 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ a {
1616
text-decoration: none;
1717
}
1818

19+
ul {
20+
list-style: none;
21+
}
22+
1923
.p {
2024
margin: 12px 0;
2125
}
@@ -24,6 +28,30 @@ a {
2428
margin: 20px 0;
2529
}
2630

31+
.btn {
32+
border: 1px solid #555;
33+
padding:0 15px;
34+
}
35+
36+
.btn--big {
37+
font-size: 2rem;
38+
padding: 0 60px;
39+
}
40+
41+
.btn.pill {
42+
-webkit-border-radius: 16px;
43+
-moz-border-radius: 16px;
44+
border-radius: 16px;
45+
}
46+
47+
.flex-container {
48+
display: flex;
49+
flex-direction: row;
50+
flex-wrap: wrap;
51+
justify-content: center;
52+
align-items: center;
53+
}
54+
2755
.section {
2856
margin: 50px 0;
2957
}
@@ -67,34 +95,48 @@ a {
6795
font-size: 3rem;
6896
}
6997

98+
.active {
99+
border-color: #665176;
100+
color: #665176;
101+
}
102+
103+
.hover-active {
104+
-o-transition:.5s;
105+
-ms-transition:.5s;
106+
-moz-transition:.5s;
107+
-webkit-transition:.5s;
108+
transition:.5s;
109+
}
110+
111+
.hover-active:hover {
112+
border-color: #665176;
113+
color: #665176;
114+
}
115+
70116
.circle {
71117
width: 150px;
72118
height: 150px;
73119
border-radius: 50%;
74120
border: 4px solid black;
75121
}
76122

123+
/* Refactor someday */
77124
.circle, .circle * {
78125
-o-transition:.5s;
79126
-ms-transition:.5s;
80127
-moz-transition:.5s;
81128
-webkit-transition:.5s;
82-
/* ...and now for the proper property */
83129
transition:.5s;
84130
}
85131

132+
/* Refactor someday */
86133
.circle:hover, .circle:hover * {
87134
border-color: #665176;
88135
color: #665176;
89136
}
90137

91138
.libraries {
92139
list-style: none;
93-
display: flex;
94-
flex-direction: row;
95-
flex-wrap: wrap;
96-
justify-content: center;
97-
align-items: center;
98140
margin-top: 50px;
99141
margin-bottom: 50px;
100142
}
@@ -128,6 +170,35 @@ a {
128170
line-height: 150px;
129171
}
130172

173+
.library-search {
174+
margin-top: 25px;
175+
margin-bottom: 25px;
176+
}
177+
178+
.library-search-item {
179+
margin-bottom: 25px;
180+
}
181+
182+
.library-search-item .library-name {
183+
color: #665176;
184+
font-size: 1.5rem;
185+
}
186+
187+
.library-search-item .protocol-name {
188+
color: rgba(0,0,0,0.5);
189+
font-size: .75rem;
190+
}
191+
192+
.library-description {
193+
margin-top: 5px;
194+
font-size: .75rem;
195+
}
196+
197+
.avalibale-libraries-list {
198+
width: 50%;
199+
text-align: center;
200+
}
201+
131202
footer {
132203
background-color: rgba(0,0,0,0.05);
133204
text-align: center;
@@ -137,7 +208,6 @@ footer {
137208

138209
footer .icon {
139210
font-size: 2.5rem;
140-
141211
-o-transition:.5s;
142212
-ms-transition:.5s;
143213
-moz-transition:.5s;

0 commit comments

Comments
 (0)