Start adding library searching

README.md

@@ -1,2 +1,6 @@
 [![Elixir Circuits](circuits.png)](https://github.com/elixir-circuits)
 
+Website!
+
+
+

index.html

@@ -25,7 +25,7 @@ <h1 class="header h1 text center">Elixir Circuits</h1>
 
    <div class="section container content">
      <h2 class="header h2 text center">Libraries</h2>
-     <ul class="libraries">
+     <ul class="libraries flex-container">
        <li class="library">
          <div class="circle">
            <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>
         </li>
      </ul>
     </div>
+
+    <hr class="container">
+
+    <div class="container section content js-hex-query-component query-component">
+     <h2 class="header h2 text center">Search</h2>
+
+
+     <div class="flex-container library-search">
+      <a href="#" class="js-hex-circuits-library btn btn--big pill hover-active" data-name="circuits_gpio">GPIO</a>
+      <a href="#" class="js-hex-circuits-library btn pill btn--big hover-active" data-name="circuits_i2c">I2C</a>
+      <a href="#" class="js-hex-circuits-library btn pill btn--big hover-active" data-name="circuits_spi">SPI</a>
+      <a href="#" class="js-hex-circuits-library btn pill btn--big hover-active" data-name="circuits_uart">UART</a>
+     </div>
+
+      <div class="js-hex-search-avalibale-libraries avalibale-libraries-list"></div>
+    </div>
      <footer>
        <a class="icon" href="https://github.com/elixir-circuits"><i class="fab fa-github"></i></a>
      </footer>
+
     <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>
+
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="index.js"></script>
+
   </body>
 </html>

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();
+});
+

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,34 +95,48 @@ 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;
   border-radius: 50%;
   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;
 }
 
 .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;