From 210aa5d1ed32c1097f23399573f97b6341399a98 Mon Sep 17 00:00:00 2001
From: Guuq <50501321+Guuq@users.noreply.github.com>
Date: Thu, 14 Nov 2019 19:41:44 +0100
Subject: [PATCH] 14-11 #1
---
css.css | 6 -----
index.html | 30 +++++++++++------------
js.js | 47 ------------------------------------
resources/css/cssall.css | 4 +++
resources/css/shortcuts.css | 5 +++-
resources/js/insertNavbar.js | 45 ++++++++++++++++++++++++++++++++++
resources/js/navbar.json.js | 12 ++++-----
resources/js/shortcuts.js | 10 +++-----
8 files changed, 77 insertions(+), 82 deletions(-)
diff --git a/css.css b/css.css
index b61ea0e..7b89b50 100644
--- a/css.css
+++ b/css.css
@@ -68,15 +68,9 @@ footer ul {
margin-top: 20px;
padding: 0;
}
-footer a {
- transition: color .5s;
-}
footer li {
margin-top: 1rem;
}
-footer a:hover {
- color: gray!important;
-}
/* Mobile support */
@viewport {
width: device-width;
diff --git a/index.html b/index.html
index c154f95..87f2424 100644
--- a/index.html
+++ b/index.html
@@ -2,20 +2,20 @@
-
-
-
-
-
- Home
-
-
-
-
-
-
-
-
+
+
+
+
+
+ Home
+
+
+
+
+
+
+
+
@@ -82,7 +82,7 @@
diff --git a/js.js b/js.js
index bd1570c..5790ce9 100644
--- a/js.js
+++ b/js.js
@@ -2,53 +2,6 @@ var d = document.getElementById.bind(document);
var c = document.createElement.bind(document);
var q = document.querySelector.bind(document);
-// Google Search
-d("googleSearchBar").addEventListener("keyup",searchGoogleEnter)
-function searchGoogleEnter(key) {
- if(key.key == "Enter") {
- var search = d("googleSearchBar").value;
- var containsDot = search.indexOf(".");
- if (search !== "") {
- if (containsDot > -1) {
- open("http://" + search);
- }
- else {
- open("https://www.google.com/search?q=" + search);
- }
- }
- }
- if (key.key == "Escape") {
- closeSearch()
- }
-}
-
-addEventListener("keyup",showSearch)
-function showSearch(e) {
- if (e.target !== document.body || !d("addShortcutMenu").classList.contains("hidden")) {
- return
- }
- var open = !d("googleSearchBar").classList.contains("searchMove")
- if (open && !d("googleSearchBar").value || e.key == "Escape" ) {
- closeSearch();
- }
- else {
- openSearch();
- d("googleSearchBar").value = d("googleSearchBar").value + e.key
- }
-}
-
-function closeSearch() {
- $("#opacityMenu").addClass("lowerIndex")
- d("googleSearchBar").blur()
- d("googleSearchBar").classList.add("searchMove")
-}
-
-function openSearch(e) {
- $("#opacityMenu").removeClass("lowerIndex")
- d("googleSearchBar").classList.remove("searchMove")
- d("googleSearchBar").focus()
-}
-
// Clock
function showTime() {
var date = new Date()
diff --git a/resources/css/cssall.css b/resources/css/cssall.css
index bed7bff..d75b125 100644
--- a/resources/css/cssall.css
+++ b/resources/css/cssall.css
@@ -37,6 +37,10 @@ body {
a {
text-decoration: none!important;
color: white!important;
+ transition: color .4s;
+}
+a:hover {
+ color: gray!important;
}
/* Standard block styling */
.box {
diff --git a/resources/css/shortcuts.css b/resources/css/shortcuts.css
index bf75c0b..c0d8dc8 100644
--- a/resources/css/shortcuts.css
+++ b/resources/css/shortcuts.css
@@ -9,15 +9,18 @@
section span button {
margin: 0 0 1rem 1rem;
width: 12rem;
+ max-height: 5.3rem;
padding: 1rem;
color: white;
background-color: #363840;
border: #363840 2px solid;
border-radius: .5rem;
display: inline-block;
- cursor: pointer;
transition: background-color .5s, border .5s;
}
+section span button::-webkit-scrollbar {
+ display: hidden;
+}
section span button:hover {
background-color: #3d3e47;
border-color: #3d3e47;
diff --git a/resources/js/insertNavbar.js b/resources/js/insertNavbar.js
index 909966f..5e483de 100644
--- a/resources/js/insertNavbar.js
+++ b/resources/js/insertNavbar.js
@@ -10,6 +10,48 @@ navbarList.className = "navbarList"
navigation.appendChild(navbarList)
document.body.appendChild(navigation)
+// Search
+d("googleSearchBar").addEventListener("keyup",searchGoogleEnter)
+function searchGoogleEnter(key) {
+ if(key.key == "Enter") {
+ var search = d("googleSearchBar").value;
+ var containsDot = search.indexOf(".");
+ if (search !== "") {
+ if (containsDot > -1) {
+ open("http://" + search);
+ }
+ else {
+ open("https://www.google.com/search?q=" + search);
+ }
+ }
+ }
+ if (key.key == "Escape") {
+ closeSearch()
+ }
+}
+
+function showSearch() {
+ var open = !d("googleSearchBar").classList.contains("searchMove")
+ if (open) {
+ closeSearch();
+ }
+ else {
+ openSearch();
+ }
+}
+
+function closeSearch() {
+ $("#opacityMenu").addClass("lowerIndex")
+ d("googleSearchBar").blur()
+ d("googleSearchBar").classList.add("searchMove")
+}
+
+function openSearch(e) {
+ $("#opacityMenu").removeClass("lowerIndex")
+ d("googleSearchBar").classList.remove("searchMove")
+ d("googleSearchBar").focus()
+}
+
// Create Navbar
Navbar.forEach(i=>{
var navList = c("li")
@@ -26,6 +68,9 @@ Navbar.forEach(i=>{
if (i.desc) {
navButton.title = i.desc
}
+ if (i.func) {
+ navButton.setAttribute('onclick',i.func)
+ }
navList.appendChild(navButton)
var dropdownList = c("ul")
dropdownList.className = "dropdownList"
diff --git a/resources/js/navbar.json.js b/resources/js/navbar.json.js
index 95cf1dd..6beb2db 100644
--- a/resources/js/navbar.json.js
+++ b/resources/js/navbar.json.js
@@ -1,16 +1,16 @@
Navbar = [
+ {
+ name: "Search",
+ desc: "Zoek iets op",
+ icon: "fas fa-search",
+ func: "showSearch()"
+ },
{
name: "Home",
desc: "Ga naar de homepagina",
link: "/",
icon: "fas fa-home"
},
- {
- name: "Downloads",
- desc: "Handige downloads",
- link: "/downloads",
- icon: "fas fa-download"
- },
{
name: "Contact",
desc: "Neem contact met mij op",
diff --git a/resources/js/shortcuts.js b/resources/js/shortcuts.js
index eec70c3..a7fac1f 100644
--- a/resources/js/shortcuts.js
+++ b/resources/js/shortcuts.js
@@ -44,17 +44,13 @@ function createShortcut(shortcutObj) {
}
var obj = JSON.stringify(data)
ls.setItem("shortcuts", obj)
- var shortcut = c("a")
- shortcut.href = shortcutLink
- shortcut.alt = " "
- shortcut.target = "_blank"
- shortcut.innerHTML = shortcutName
var shortcutButton = c("button")
+ shortcutButton.onclick = function() { window.open(shortcutLink); }
+ shortcutButton.innerHTML = shortcutName
var shortcutImage = c("img")
shortcutImage.src = "/resources/img/shortcut.png"
$("#shortcuts").append(shortcutButton);
- $(shortcutButton).append(shortcut);
- $(shortcut).prepend(shortcutImage);
+ $(shortcutButton).prepend(shortcutImage);
$(".inputMenu").val('')
closeMenu();
}