Merge pull request #11 from tionis/master

Removed jQuery Dependency and Added Scrollbar for Options

assets/css/styles.css

@@ -285,6 +285,7 @@ table a{
 
 
 #modal{
+	overflow-y: auto;
 	bottom: 0;
 	left: 0;
 	opacity: 0;
@@ -307,7 +308,7 @@ table a{
 	margin-left: auto;
     margin-right: auto;
 	padding: 2em;
-	margin-top: 25vh;
+	margin-top: 5vh;
 	width: 50%;
     display: flex;
     flex-direction: column;
@@ -480,7 +481,7 @@ table a{
     #modal>div{
         margin-left: auto;
         margin-right: auto;
-        margin-top: 25vh;
+        margin-top: 5vh;
         width: 90%;
     }
 }
@@ -545,4 +546,11 @@ table a{
 		grid-template-columns: 1fr 1fr;
 		grid-template-rows: auto;
 	}
+}
+
+/* Small Screens */
+@media only screen and (max-width: 400px) {
+	#app-address {
+		display: none;
+	}
 }

assets/js/data.js

@@ -1,35 +1,50 @@
 var data_links = "links.json";
-  
-$(document).ready(function(){
-  $.getJSON(data_links,
-    function (data) {
-      var mysource = $('#links-template').html();
-      var mytemplate = Handlebars.compile(mysource);
-      var myresult = mytemplate(data)
-      $('#links').html(myresult);
-  });
+var bookmarks = JSON.parse(localStorage.getItem("links"));
+
+function handleLinks(data) {
+  var mysource = document.getElementById("links-template").innerHTML;
+  var mytemplate = Handlebars.compile(mysource);
+  var myresult = mytemplate(data)
+  document.getElementById("links").innerHTML = myresult;
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  if (!bookmarks) {
+      fetch(data_links)
+          .then(response => response.json())
+          .then(function (data) {
+              handleLinks(data);
+              localStorage.setItem("links", JSON.stringify(data));
+          });
+  } else {
+      handleLinks(bookmarks);
+  }
 });
 
 var data_apps = "apps.json";
-  
-$(document).ready(function(){
-  $.getJSON(data_apps,
+
+document.addEventListener("DOMContentLoaded", function () {
+  fetch(data_apps)
+  .then( response => response.json())
+  .then(
     function (data) {
-      var mysource = $('#apps-template').html();
+      var mysource = document.getElementById("apps-template").innerHTML;
       var mytemplate = Handlebars.compile(mysource);
       var myresult = mytemplate(data)
-      $('#apps').html(myresult);
-  });
+      document.getElementById("apps").innerHTML = myresult;
+    });
 });
 
 var data_providers = "providers.json";
-  
-$(document).ready(function(){
-  $.getJSON(data_providers,
+
+document.addEventListener("DOMContentLoaded", function () {
+  fetch(data_providers)
+  .then( response => response.json())
+  .then(
     function (data) {
-      var mysource = $('#providers-template').html();
+      var mysource = document.getElementById("providers-template").innerHTML;
       var mytemplate = Handlebars.compile(mysource);
       var myresult = mytemplate(data)
-      $('#providers').html(myresult);
-  });
+      document.getElementById("providers").innerHTML = myresult;
+    });
 });

index.html

@@ -7,7 +7,6 @@
     <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
     <link type="text/css" rel="stylesheet" href="./assets/css/styles.css"  media="screen,projection"/>
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.1/handlebars.min.js"></script>
     <script src="https://code.iconify.design/1/1.0.0-rc7/iconify.min.js"></script>
 </head>
@@ -87,7 +86,7 @@
                         </div>
                         <div class="apps_text">
                             <a href="https://{{url}}">{{name}}</a>
-                            <span>{{url}}</span>
+                            <span id="app-address">{{url}}</span>
                         </div>
                     </div>
                 {{/apps}}