navigation bar + options popup (no content)

gadget_result.js

@@ -54,6 +54,7 @@
     
     .declareMethod("clear", function(){
       var list = document.getElementById("list");
+      console.log(list);
       while (list.firstChild) {
         list.removeChild(list.firstChild);
       }

mynij.css

@@ -13,7 +13,7 @@ form{
   width: 86%;
   max-width: 50em;
   height: 5%;
-    border: 2px solid #cecece;
+  border: 1px solid #cecece;
   background: white;
   box-sizing: border-box;
   border-radius: 25px;
@@ -44,11 +44,63 @@ input{
   padding: 0 20px;
 }
 
-#mynij{
+::-webkit-scrollbar { 
+    display: none; 
+}
+
+#navbar {
+  margin-top : 3%;
+  margin-left : 10.3%;
+  font-size: 1em;
+  max-width: 49em;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+}
+
+#navbar > ul {
+  display: inline-block;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  margin-left:15%;
+}
+
+#navbar > ul > li {
+  display: inline-block;
+}
+
+#navbar > ul > li > a {
+  display: inline-block;
+  color : #777;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+#navbar > ul > li > a:hover {
+  color : black;
+}
+
+.active{
+  color: #1A73E8 !important;
+  border-bottom: 3px solid #1A73E8;
+  font-weight: bold;
+}
+
+#options{
+ float: left;
  position: absolute;
-  left: 1%;
-  top: 3%;
-  font-size: 3em;
+ margin-left:-6%;
+ background:#fff;
+ padding-bottom:0.2%;
+}
+
+#mynij{
+  position: fixed;
+  left: 1.5%;
+  top: 3.5%;
+  font-size: 250%;
   font-family: "Roboto", Geneva, "Lucida Console", sans-serif;
   font-weight: 500;
   color: #485a67;

result.css

+#list{
+  margin-top : 4%;
+  text-align: left;
+}
+
+#list > li { 
+  margin: auto;
+  list-style-type: none;
+  position: relative;
+  display: table;
+  margin-left: 8.3%;
+  margin-top: 1%;
+  padding-top: 1%;
+  padding-bottom: 1%;
+  padding-left : 1%;
+  background: #fff;
+  color: #2b2b5d;
+  width: 98%;
+  max-width: 48em;
+  text-align : left;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+  border-radius: 8px;
+}
+
+.title {
+  color: #1122CC;
+  text-decoration: none;
+  font-size: x-large;
+  max-width: 48em;
+}
+
+.link, .link:visited {
+  text-decoration: none;
+  color: #009933;
+  max-width: 48em;
+}
+
+.body {
+  color : #444444;
+  max-width: 48em;
+}
+
+#list > a {
+  position: relative;
+ 
+} 
+#list > a:after {
+    content: '';
+    position: absolute;
+    bottom: -.4em;
+    left: 50%;
+    right: 50%;
+    height: 1px;
+    background: #2b2b5d;
+    transition: all ease .2s;
+} 
+  
+#list > a:hover:after {
+  left: 0;
+  right: 0;
+  height: 2px;
+} 
+  
+#list > a:before {
+  position: absolute;
+  transform: translateX(-100%);    
+  left: -10px;
+  color: #2b2b5d;
+  opacity: .3;
+  font-weight: 100;
+  font-size: .8em;
+}
\ No newline at end of file

search.html

@@ -17,6 +17,25 @@
   <form id = "search_bar">
     <input type="search" required>
   </form>
+  <nav id="navbar">
+    <ul>
+      <li id="options"><a>Mes index</a></li>
+      <li><a class="active">Scolaire</a></li>
+      <li><a>Index 1</a></li>
+      <li><a>Index 2</a></li>
+      <li><a>Index 3</a></li>
+      <li><a>Index 4</a></li>
+      <li><a>Index 5</a></li>
+      <li><a>Index 6</a></li>
+      <li><a>Index 7</a></li>
+      <li><a>Index 8</a></li>
+      <li><a>Index 9</a></li>
+      <li><a>Index 10</a></li>
+    </ul>
+  </nav>
+  <dialog id="myDialog">
+  This is an open dialog window
+  </dialog>
   <div data-gadget-url="gadget_result.html"
   data-gadget-scope="result"
   data-gadget-sandbox="public">

search.js

 (function (window, document, rJS, RSVP) {
   var gadget;
+  var preventDefault = function (e) {
+    e = e || window.event;
+    if (e.preventDefault)
+      e.preventDefault();
+    e.returnValue = false;  
+  };
   rJS(window)
 
   .setState({
@@ -24,10 +30,11 @@
 
   .ready(function(){
       var model_gadget,
-          result_gadget;
+          result_gadget,
+          gadget;
 
     console.log("ready !");
-    var gadget = this;
+    gadget = this;
     return gadget.getDeclaredGadget("model")
       .push(function(model){
         model_gadget = model;
@@ -47,6 +54,17 @@
           parser_gadget : result,
           result_gadget : result_gadget
         });
+      })
+      .push(function(){
+        return gadget.set_on_click_options();
+      })
+      .push(function(){
+        document.addEventListener("keydown", function(event){
+          if (event.key === "Escape" && document.getElementById("myDialog").open){
+            document.getElementById("myDialog").close();
+            return gadget.enableScroll();
+          } 
+        }, true);
       });
   })
 
@@ -89,5 +107,31 @@
 
   .onEvent("submit", function(event){
     this.search(event.target.elements[0].value);
+  })
+  
+  .declareMethod("set_on_click_options", function(){
+    var options = document.getElementById("options"),
+        gadget = this;
+    options.onclick = function(){
+      document.getElementById("myDialog").showModal();
+      return gadget.disableScroll();
+    };
+  })
+  
+  .declareMethod("disableScroll", function(){
+    if (window.addEventListener) window.addEventListener('DOMMouseScroll', preventDefault, false);
+    document.addEventListener('wheel', preventDefault, {passive: false}); // Disable scrolling in Chrome
+    window.onwheel = preventDefault; // modern standard
+    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
+    window.ontouchmove  = preventDefault; // mobile
+  })
+  
+  .declareMethod("enableScroll", function(){
+    if (window.removeEventListener) window.removeEventListener('DOMMouseScroll', preventDefault, false);
+    document.removeEventListener('wheel', preventDefault, {passive: false}); // Enable scrolling in Chrome
+    window.onmousewheel = document.onmousewheel = null; 
+    window.onwheel = null; 
+    window.ontouchmove = null;  
   });
+
 }(window, document, rJS, RSVP));