diff --git a/README.md b/README.md index b01d2b2..37b7804 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,6 @@ [![Elixir Circuits](circuits.png)](https://github.com/elixir-circuits) +Website! + + + diff --git a/index.html b/index.html index 2d3dd6c..6f8af14 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,7 @@

Elixir Circuits

Libraries

-
+ +
+ +
+

Search

+ + +
+ GPIO + I2C + SPI + UART +
+ +
+
+ Fork me on GitHub + + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..c53b7c0 --- /dev/null +++ b/index.js @@ -0,0 +1,186 @@ +"use strict"; + +var hexSearch = { + state: { + avaliableLibrariesDom: document.querySelector(".js-hex-search-avalibale-libraries"), + i2cLibraries: [], + spiLibraries: [], + gpioLibraries: [], + uartLibraries: [], + selectedLibraries: [], + lastSearch: null, + }, + + init: function () { + console.log("Starting query eng"); + + var jsQueryDom = document.querySelector(".js-hex-query-component"); + var jsHexSearchlibraries = document.querySelectorAll(".js-hex-circuits-library"); + + for (var i = 0; i < jsHexSearchlibraries.length; i++) { + this.attachLibraryClick(jsHexSearchlibraries[i], this.state); + } + }, + + update: function(update_command, updateData, state) { + switch (update_command) { + case "search": + var elm = updateData[0]; + var libQuery = updateData[1]; + + if (elm.classList.contains("active")) { + state[this.libNameToStateName(libQuery)] = []; + elm.classList.remove("active"); + this.update("updateDom", null, state); + } else { + state.lastSearch = libQuery; + elm.classList.add("active"); + this.update("search_response", this.search(libQuery), state); + } + + break; + case "search_response": + updateData + .then(function (response) { + for (var i = 0; i < response.data.length; i++) { + var lib = { + name: response.data[i].name, + url: response.data[i].html_url, + description: response.data[i].meta.description, + }; + + if (state.lastSearch === "circuits_i2c") { + state.i2cLibraries.push(lib); + } + + if (state.lastSearch === "circuits_gpio") { + state.gpioLibraries.push(lib); + } + + if (state.lastSearch === "circuits_spi") { + state.gpioLibraries.push(lib); + } + + if (state.lastSearch === "circuits_uart") { + state.uartLibraries.push(lib); + } + } + + this.update("updateDom", null, state); + }.bind(this) + ) + .catch(function (e) { + consoe.log(e); + }); + break; + + case "updateDom": + this.updateDom(state); + break; + default: + console.warn("Invalid update command: " + update_command); + } + }, + + attachLibraryClick: function (libraryDomElm, state) { + libraryDomElm.addEventListener("click", function (event) { + event.preventDefault(); + this.update("search", [event.target, event.target.getAttribute("data-name")], state); + }.bind(this)) + }, + + search: function (libraryName) { + return axios + .get("https://hex.pm/api/packages?search=depends%3A" + libraryName) + }, + + updateDom: function(state) { + var ul = document.createElement("ul"); + ul.id = "js-hex-lib-list"; + + for (var i = 0; i < state.i2cLibraries.length; i++) { + var li = this.buildLibListItem(state.i2cLibraries[i], "circuits_i2c"); + ul.appendChild(li); + } + + for (var i = 0; i < state.gpioLibraries.length; i++) { + var li = this.buildLibListItem(state.gpioLibraries[i], "circuits_gpio"); + ul.appendChild(li); + } + + for (var i = 0; i < state.spiLibraries.length; i++) { + var li = this.buildLibListItem(state.spiLibraries[i], "circuits_spi"); + ul.appendChild(li); + } + + for (var i = 0; i < state.uartLibraries.length; i++) { + var li = this.buildLibListItem(state.uartLibraries[i], "circuits_uart"); + ul.appendChild(li); + } + + var oldList = document.getElementById("js-hex-lib-list"); + + if (oldList) { + state.avaliableLibrariesDom.removeChild(oldList); + } + + state.avaliableLibrariesDom.appendChild(ul); + }, + + buildLibListItem: function (lib, protocol) { + var pName = this.aNode(lib.name, lib.url); + var protocol = this.pNode(protocol); + var description = this.pNode(lib.description); + var li = document.createElement("li"); + li.className += " library-search-item"; + pName.className += " library-name"; + protocol.className += " protocol-name"; + description.className += "library-description"; + li.appendChild(pName); + li.appendChild(protocol); + li.appendChild(description); + + return li; + }, + + pNode: function (txt) { + var txtNode = document.createTextNode(txt); + var p = document.createElement("p"); + p.appendChild(txtNode); + + return p; + }, + + aNode: function (txt, link) { + var txtNode = document.createTextNode(txt); + var a = document.createElement("a"); + a.appendChild(txtNode); + a.href = link; + a.target = "blank"; + + return a; + }, + + libNameToStateName: function (libName) { + switch (libName) { + case "circuits_i2c": + return "i2cLibraries"; + break; + case "circuits_gpio": + return "gpioLibraries"; + break; + case "circuits_spi": + return "spiLibraries"; + break; + case "circuits_uart": + return "uartLibraries"; + break; + } + }, + +} + +window.addEventListener("load", function (event) { + hexSearch.init(); +}); + diff --git a/styles.css b/styles.css index 34cee55..e05bcb0 100644 --- a/styles.css +++ b/styles.css @@ -16,6 +16,10 @@ a { text-decoration: none; } +ul { + list-style: none; +} + .p { margin: 12px 0; } @@ -24,6 +28,30 @@ a { margin: 20px 0; } +.btn { + border: 1px solid #555; + padding:0 15px; +} + +.btn--big { + font-size: 2rem; + padding: 0 60px; +} + +.btn.pill { + -webkit-border-radius: 16px; + -moz-border-radius: 16px; + border-radius: 16px; +} + +.flex-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + .section { margin: 50px 0; } @@ -67,6 +95,24 @@ a { font-size: 3rem; } +.active { + border-color: #665176; + color: #665176; +} + +.hover-active { + -o-transition:.5s; + -ms-transition:.5s; + -moz-transition:.5s; + -webkit-transition:.5s; + transition:.5s; +} + +.hover-active:hover { + border-color: #665176; + color: #665176; +} + .circle { width: 150px; height: 150px; @@ -74,15 +120,16 @@ a { border: 4px solid black; } +/* Refactor someday */ .circle, .circle * { -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; - /* ...and now for the proper property */ transition:.5s; } +/* Refactor someday */ .circle:hover, .circle:hover * { border-color: #665176; color: #665176; @@ -90,11 +137,6 @@ a { .libraries { list-style: none; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: center; margin-top: 50px; margin-bottom: 50px; } @@ -128,6 +170,35 @@ a { line-height: 150px; } +.library-search { + margin-top: 25px; + margin-bottom: 25px; +} + +.library-search-item { + margin-bottom: 25px; +} + +.library-search-item .library-name { + color: #665176; + font-size: 1.5rem; +} + +.library-search-item .protocol-name { + color: rgba(0,0,0,0.5); + font-size: .75rem; +} + +.library-description { + margin-top: 5px; + font-size: .75rem; +} + +.avalibale-libraries-list { + width: 50%; + text-align: center; +} + footer { background-color: rgba(0,0,0,0.05); text-align: center; @@ -137,7 +208,6 @@ footer { footer .icon { font-size: 2.5rem; - -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s;