Merge pull request #29 from strukturart/qr-reader

Qr reader

application/app.js

@@ -247,7 +247,7 @@ $(document).ready(function () {
     });
   }
 
-  bottom_bar("", "select", "");
+  bottom_bar("settings", "select", "");
 
   function addCategories() {
     $.each(dataSet.categories, function (key, val) {
@@ -316,6 +316,9 @@ $(document).ready(function () {
     if (current_panel == 0) {
       $("input").val("");
       $("input").focus();
+      $("div#navigation").css("display", "none");
+    } else {
+      $("div#navigation").css("display", "block");
     }
   }
 
@@ -365,23 +368,28 @@ $(document).ready(function () {
   //store current article
   let article_id;
 
-  function show_article() {
-    let $focused = $(":focus");
+  function show_article(app) {
+    let $focused;
+    if (app) {
+      $focused = $('[data-slug="' + app + '"]');
+      $('[data-slug="' + app + '"]').focus();
+    } else {
+      $focused = $(":focus");
+    }
+
     let getClass = $focused.attr("class");
-    let getId = $(":focus").parent().attr("id");
-    article_id = $(":focus").attr("id");
+    let getId = $focused.parent().attr("id");
+    article_id = $focused.attr("id");
 
     if (getId == "search") {
-      return false;
+      //return false;
     }
 
-    if (getClass != "About" || getId != "search") {
+    if (getClass != "About") {
       $("article").css("display", "none");
       $("div#navigation").css("display", "none");
       $("div#app div#app-panels").css("margin", "5px 0 0 0");
       $("div#app div#app-panels").css("max-height", "100%");
-      $("div#app div#app-panels").css("overflow-y", "scroll");
-
       $focused.css("display", "block");
       $("div.summary").css("display", "block");
       $("div.meta-data").css("display", "block");
@@ -400,17 +408,18 @@ $(document).ready(function () {
 
   function show_article_list() {
     panels_list(panels[current_panel]);
-    $("div#app div#app-panels").css("margin", "32px 0 0 0");
-    $("div#app div#app-panels").css("max-height", "73%");
-    $("div#options").css("display", "none");
+    $("div#app div#app-panels").css("margin", "35px 0 50px 0px");
 
-    $("div#navigation").css("display", "block");
+    $("article#search").css("margin", "-35px 0 0 0!Important");
+    $("div#options").css("display", "none");
+    if (current_panel != 0) {
+      $("div#navigation").css("display", "block");
+    }
     $("div#app-panels").css("display", "block");
     $("div.summary").css("display", "none");
     $("div.meta-data").css("display", "none");
     $("div.channel").css("display", "block");
     $("ul.images").css("display", "none");
-
     $("div.icon").css("display", "none");
 
     let targetElement = article_array[pos_focus];
@@ -466,6 +475,18 @@ $(document).ready(function () {
     window_status = "options";
   }
 
+  const search_listener = document.querySelector('input[type="search"]');
+
+  search_listener.addEventListener("focus", (event) => {
+    bottom_bar("scan", "select", "");
+    window_status = "search";
+  });
+
+  search_listener.addEventListener("blur", (event) => {
+    bottom_bar("", "select", "");
+    window_status = "article-list";
+  });
+
   //////////////////////////
   ////KEYPAD TRIGGER////////////
   /////////////////////////
@@ -507,6 +528,16 @@ $(document).ready(function () {
         break;
 
       case "SoftLeft":
+        if (window_status == "search") {
+          start_scan(function (callback) {
+            let slug = callback.replace("bhackers:", "");
+            show_article(slug);
+          });
+
+          bottom_bar("", "", "");
+          window_status = "scan";
+        }
+
         if (window_status == "single-article") {
           open_options();
         }
@@ -530,6 +561,12 @@ $(document).ready(function () {
           return;
         }
 
+        if (window_status == "scan") {
+          document.getElementById("qr-screen").hidden = true;
+
+          return;
+        }
+
         if (window_status == "options") {
           close_options();
           return;

application/assets/css/main.css

@@ -49,6 +49,8 @@ body {
   font-family: "Lato-Regular";
   font-weight: 100;
   width: 100vw;
+  max-width: 100vw;
+  overflow-x: hidden;
   position: relative;
   margin: 0px;
   padding: 0px;
@@ -136,29 +138,14 @@ div#toast {
 /*///////////////////////////
 ///APPS////////////////*/
 
-article#search {
-  margin: 0px 0 10px 0;
-  font-weight: normal;
-  min-width: 95vw;
-  height: 40px;
-  padding: 5px;
-  background: silver;
-  text-align: center;
-}
-
-article#search input {
-  height: 30px;
-  padding: 3px;
-  width: 80%;
-}
-
 div#navigation {
   position: fixed;
   height: 30px;
   background: black;
   width: 100%;
   top: 0px;
   left: 0px;
+  display: none;
 }
 
 div#navigation div {
@@ -184,12 +171,27 @@ div#app div#app-panels article {
   min-width: 95vw;
   max-height: 100%;
   padding: 4px;
-  overflow: scroll;
+  overflow-y: scroll;
+}
+
+article#search {
+  margin: -35px 0 10px 0 !important;
+  font-weight: normal;
+  min-width: 95vw;
+  height: 40px;
+  padding: 5px;
+  background: silver;
+  text-align: center;
+}
+
+article#search input {
+  height: 30px;
+  padding: 3px;
+  width: 80%;
 }
 
 div#app div#app-panels {
-  margin: 32px 0 0 0;
-  max-height: 75%;
+  margin: 35px 0 50px 0px;
 }
 
 div#app div#app-panels article:focus {

application/assets/css/qr_reader.css

@@ -0,0 +1,66 @@
+#video {
+  bottom: 0;
+  height: auto;
+  min-height: 100%;
+  min-width: 100%;
+  position: fixed;
+  right: 0;
+  width: auto;
+}
+
+#startDecoding {
+  background: #0095dd;
+  border-radius: 40px;
+  color: #fff;
+  font-family: Arial, sans;
+  font-size: 20px;
+  left: 50%;
+  margin: -30px 0 0 -95px;
+  padding: 20px;
+  position: fixed;
+  text-align: center;
+  top: 50%;
+  width: 150px;
+}
+
+#corner-nw,
+#corner-no,
+#corner-so,
+#corner-sw {
+  border: #fff 6px solid;
+  height: 30px;
+  position: fixed;
+  width: 30px;
+}
+
+#corner-nw {
+  border-bottom: 0;
+  border-right: 0;
+  border-top-left-radius: 20px;
+  left: 20px;
+  top: 20px;
+}
+
+#corner-no {
+  border-bottom: 0;
+  border-left: 0;
+  border-top-right-radius: 20px;
+  right: 20px;
+  top: 20px;
+}
+
+#corner-so {
+  border-bottom-right-radius: 20px;
+  border-left: 0;
+  border-top: 0;
+  bottom: 20px;
+  right: 20px;
+}
+
+#corner-sw {
+  border-bottom-left-radius: 20px;
+  border-right: 0;
+  border-top: 0;
+  bottom: 20px;
+  left: 20px;
+}