working search and themes

src/index.js

@@ -1,12 +1,29 @@
 import React from 'react';
 import { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import { unstable_createPortal } from 'react-dom';
+//import { unstable_createPortal } from 'react-dom';
 import './index.css';
 
+const setValueFromLocalStorage = property => {
+  let value = localStorage.getItem(property);
+  setValue(property, value);
+};
+const setValue = (property, value) => {
+  if (value) {
+      document.documentElement.style.setProperty(`--${property}`, value);
+
+      const input = document.querySelector(`#${property}`);
+      if (input) {
+          value = value.replace('px', '');
+          input.value = value;
+      }
+  }
+};
+
 function Homepage() {
+  setTheme();
   return (
-    <main id="container" class="fade">
+    <main id="container" className="fade">
         <div>
           <Search />
         </div>
@@ -35,9 +52,9 @@ function Homepage() {
 function Search() {
   return (
     <section id="search">
-      <div class="abackground">
+      <div className="abackground">
-        <input name="keywords" type="text" class="keyword" id="keywords" size="50" placeholder="" />
+        <input name="keywords" type="text" className="keyword" id="keywords" size="50" spellCheck="true" placeholder="" /*onFocus={this.placeholder = ""} onBlur={this.placeholder = ''}*/ autoComplete="off" autoFocus={true} onKeyUp={handleKeyPress}/>
-        <label id="searchType" class="Input-label">Google search</label>
+        <label id="searchType" className="Input-label">Google search</label>
       </div>
     </section>
   )
@@ -82,17 +99,17 @@ function Applications() {
 }
 
 function App(props) {
-  let classType = props.NSFW + "-content";
+  let classNameType = props.NSFW + "-content";
   let hrefUrl = "https://" + props.url;
   let iconName = "mdi-" + props.icon;
   return (
     <div>
-      <a href={hrefUrl} class={classType}>
+      <a href={hrefUrl} className={classNameType}>
-        <div class="apps_item">
+        <div className="apps_item">
-          <div class="apps_icon">
+          <div className="apps_icon">
-            <span class="iconify icon" data-icon={iconName}></span>
+            <span className="iconify icon" data-icon={iconName}></span>
           </div>
-          <div class="apps_text">
+          <div className="apps_text">
             <span id="app-name">{props.name}</span>
             <span id="app-address">{props.url}</span>
           </div>
@@ -145,7 +162,7 @@ function LinkGroups(props) {
 function LinkItem(props) {
   return (
     <div>
-      <a href={props.link.url} class="theme_color-border theme_text-select">{props.link.name}</a>
+      <a href={props.link.url} className="theme_color-border theme_text-select">{props.link.name}</a>
     </div>
   );
 }
@@ -166,30 +183,30 @@ function ModalMenu() {
       <div>
         <header id="modal-header">
           <h1>Options</h1>
-          <a href="#" title="Close" class="modal-close">
+          <a href="#" title="Close" className="modal-close">
-            <span class="iconify" data-icon="mdi-close"></span>
+            <span className="iconify" data-icon="mdi-close"></span>
           </a>
         </header>
 
         <h2>Color themes</h2>
 
         <div id="modal-theme">
-          <button data-theme="blackboard" class="theme-button theme-blackboard">Blackboard</button>
+          <button data-theme="blackboard" className="theme-button theme-blackboard" onClick={updateTheme}>Blackboard</button>
-          <button data-theme="gazette" class="theme-button theme-gazette">Gazette</button>
+          <button data-theme="gazette" className="theme-button theme-gazette" onClick={updateTheme}>Gazette</button>
-          <button data-theme="espresso" class="theme-button theme-espresso">Espresso</button>
+          <button data-theme="espresso" className="theme-button theme-espresso" onClick={updateTheme}>Espresso</button>
-          <button data-theme="cab" class="theme-button theme-cab">Cab</button>
+          <button data-theme="cab" className="theme-button theme-cab" onClick={updateTheme}>Cab</button>
-          <button data-theme="cloud" class="theme-button theme-cloud">Cloud</button>
+          <button data-theme="cloud" className="theme-button theme-cloud" onClick={updateTheme}>Cloud</button>
-          <button data-theme="lime" class="theme-button theme-lime">Lime</button>
+          <button data-theme="lime" className="theme-button theme-lime" onClick={updateTheme}>Lime</button>
-          <button data-theme="passion" class="theme-button theme-passion">Passion</button>
+          <button data-theme="passion" className="theme-button theme-passion" onClick={updateTheme}>Passion</button>
-          <button data-theme="blues" class="theme-button theme-blues">Blues</button>
+          <button data-theme="blues" className="theme-button theme-blues" onClick={updateTheme}>Blues</button>
-          <button data-theme="chalk" class="theme-button theme-chalk">Chalk</button>
+          <button data-theme="chalk" className="theme-button theme-chalk" onClick={updateTheme}>Chalk</button>
-          <button data-theme="tron" class="theme-button theme-tron">Tron</button>
+          <button data-theme="tron" className="theme-button theme-tron" onClick={updateTheme}>Tron</button>
-          <button data-theme="paper" class="theme-button theme-paper">Paper</button>
+          <button data-theme="paper" className="theme-button theme-paper" onClick={updateTheme}>Paper</button>
-          <button data-theme="cyberpunk" class="theme-button theme-cyberpunk">Cyberpunk</button>
+          <button data-theme="cyberpunk" className="theme-button theme-cyberpunk" onClick={updateTheme}>Cyberpunk</button>
-          <button data-theme="quadra" class="theme-button theme-panam">Quadra</button>
+          <button data-theme="quadra" className="theme-button theme-panam" onClick={updateTheme}>Quadra</button>
-          <button data-theme="panam" class="theme-button theme-panam">Panam</button>
+          <button data-theme="panam" className="theme-button theme-panam" onClick={updateTheme}>Panam</button>
-          <button data-theme="touch" class="theme-button theme-touch">Touch</button>
+          <button data-theme="touch" className="theme-button theme-touch" onClick={updateTheme}>Touch</button>
-          <button data-theme="peek" class="theme-button theme-peek">Peek</button>
+          <button data-theme="peek" className="theme-button theme-peek" onClick={updateTheme}>Peek</button>
         </div>
 
 
@@ -207,10 +224,10 @@ function ModalMenu() {
           </section>
 
         <header id="modal-footer">
-          <a href="https://github.com/jeroenpardon/"><span class="iconify" data-icon="mdi-github-box"></span></a>
+          <a href="https://github.com/jeroenpardon/"><span className="iconify" data-icon="mdi-github-box"></span></a>
-          <a href="https://materialdesignicons.com/"><span class="iconify" data-icon="mdi-material-design"></span></a>
+          <a href="https://materialdesignicons.com/"><span className="iconify" data-icon="mdi-material-design"></span></a>
-          <div class="sneaky"><input type="checkbox" id="contenttype" onChange="nsfw(this)"></input>
+          <div className="sneaky"><input type="checkbox" id="contenttype" onChange="nsfw(this)"></input>
-          <label for="contenttype"><span class="iconify" data-icon="mdi-domino-mask"></span></label></div>
+          <label for="contenttype"><span className="iconify" data-icon="mdi-domino-mask"></span></label></div>
         </header>
       </div>
     </section>
@@ -218,7 +235,6 @@ function ModalMenu() {
 }
 
 function Provider(props) {
-  console.log(props);
   return (
     <tr>
       <td><a href={props.provider.url}>{props.provider.name}</a></td>
@@ -230,8 +246,8 @@ function Provider(props) {
 function ModalInit() {
   return (
     <div id="modal_init">
-      <a class="btn" href="#modal">
+      <a className="btn" href="#modal">
-        <span class="iconify icon" data-icon="mdi-xbox-controller-menu"></span>
+        <span className="iconify icon" data-icon="mdi-xbox-controller-menu"></span>
       </a>
     </div>
   );
@@ -272,7 +288,7 @@ function greet() {
   let timeBased = [];
   let easterEggs = [];
   for (var i = 0; i < greetings.messages.length; i++) {
-    if (greetings.messages[i].easteregg == "FALSE") {
+    if (greetings.messages[i].easteregg === "FALSE") {
       timeBased = timeBased.concat(greetings.messages[i]);
     } else {
       easterEggs = easterEggs.concat(greetings.messages[i]);
@@ -300,12 +316,12 @@ function Clock() {
 
   var hour = date.getHours();
   var minutes = date.getMinutes();
-  var seconds = date.getSeconds();
+  //var seconds = date.getSeconds();
   var midday = "AM";
   midday = (hour >= 12) ? "PM" : "AM";
-  hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12) : hour);
+  hour = (hour === 0) ? 12 : ((hour > 12) ? (hour - 12) : hour);
   minutes = fixDigits(minutes);
-  seconds = fixDigits(seconds);
+  //seconds = fixDigits(seconds);
   let time = hour + ":" + minutes + " " + midday;
 
   return (
@@ -324,4 +340,236 @@ function getLinks() {
 function getProviders() {
   let providers = require('./providers.json');
   return providers;
-}
+}
+function getThemes() {
+  let themes = require('./themes.json');
+  return themes;
+}
+
+function updateTheme(e) {
+  var themes = getThemes();
+  var themeName = e.target.innerHTML.toLowerCase();
+  var index = themes.themes.findIndex(function(item, i){
+    return item.name === themeName
+  });
+  console.log(themes.themes[index]);
+  localStorage.setItem("image-background", themes.themes[index].imagebackground);
+  localStorage.setItem("color-background", themes.themes[index].colorbackground);
+  localStorage.setItem("color-search-background", themes.themes[index].colorserachbackground);
+  localStorage.setItem("color-text-pri",themes.themes[index].colortextpri);
+  localStorage.setItem("color-text-acc", themes.themes[index].colortextacc);
+  localStorage.setItem("color-border", themes.themes[index].colorborder);
+  
+  //document.documentElement.style.setProperty(prop, `var(--${themeName}${prop.substring(10)})`);
+  setTheme();
+}
+
+function setTheme() {
+  setValueFromLocalStorage('image-background');
+  setValueFromLocalStorage('color-background');
+  setValueFromLocalStorage('color-search-background');
+  setValueFromLocalStorage('color-text-pri');
+  setValueFromLocalStorage('color-text-acc');
+  setValueFromLocalStorage('color-border');
+  setValueFromLocalStorage('content-display');
+}
+
+function handleKeyPress(e) {
+  var sindex = 0;
+  var cycle = false;
+  var key = e.keyCode || e.which;
+  var text = e.target.value.replaceAll("+", "%2B");
+  var option = text.substr(1, text.indexOf(' ') - 1) || text.substr(1);
+  var subtext = text.substr(2 + option.length);
+  if (key == 13) { // Search functions
+      search(text);
+  }
+  if (key == 9) { // Tab Completion Functions
+      e.preventDefault();
+      e.stopPropagation();
+      if (text[0] === ';') {
+          switch (option) {
+              case 't':
+                  var streamers = ['admiralbahroo', 'moonmoon_ow', 'witwix'];
+                  if (!subtext || cycle) {
+                      cycle = true;
+                      if (sindex > streamers.length - 1) sindex = 0;
+                      document.getElementById("keywords").value = ';t ' + streamers[sindex++];
+                      return;
+                  }
+                  for (var streamer of streamers) {
+                      if (subtext === streamer.substr(0, subtext.length)) {
+                          document.getElementById("keywords").value = ';t ' + streamer;
+                          return;
+                      }
+                  }
+                  break;
+          }
+      }
+  }
+  if(key == 32){ //Space to go to search
+updateLabel(text);
+  }
+  sindex = 0;
+  cycle = false;
+  updateLabel(text);
+}
+
+function updateLabel(text) {
+  var option = text.substr(1, text.indexOf(' ') - 1) || text.substr(1);
+  if (text[0] === '/') {
+//        if (text.indexOf(' ') > -1) {
+          switch (option) {
+              case "am":
+                  document.getElementById("searchType").innerHTML = "Allmusic search";
+                  break;
+  case "d":
+      document.getElementById("searchType").innerHTML = "Duck Duck Go search";
+      break;
+  case "di":
+      document.getElementById("searchType").innerHTML = "Discogs search";
+      break;
+  case "i":
+      document.getElementById("searchType").innerHTML = "IMDB search";
+      break;
+  case "m":
+      document.getElementById("searchType").innerHTML = "TheMovieDB search";
+      break;
+  case "r":
+      document.getElementById("searchType").innerHTML = "Reddit search";
+      break;
+  case "q":
+      document.getElementById("searchType").innerHTML = "Qwant search";
+      break;
+  case "so":
+      document.getElementById("searchType").innerHTML = "Soundcloud search";
+      break;
+  case "s":
+      document.getElementById("searchType").innerHTML = "Spotify search";
+      break;
+  case "tv":
+      document.getElementById("searchType").innerHTML = "TheTVDB search";
+      break;
+  case "t":
+      document.getElementById("searchType").innerHTML = "Trakt search";
+      break;
+  case "y":
+      document.getElementById("searchType").innerHTML = "YouTube search";
+      break;
+  case "w":
+      document.getElementById("searchType").innerHTML = "Wikipedia search";
+      break;
+  case "p":
+      document.getElementById("searchType").innerHTML = "Plex search";
+      break;
+  case "rt":
+      document.getElementById("searchType").innerHTML = "Rotten Tomatoes search";
+      break;
+  default:
+      document.getElementById("searchType").innerHTML = "Invalid search";
+      break;
+          }
+}else {
+  document.getElementById("searchType").innerHTML = "Google search";
+  }
+}
+
+function search(text) {
+  var option = text.substr(1, text.indexOf(' ') - 1) || text.substr(1);
+  var subtext = text.substr(2 + option.length);
+  if (text[0] === '/') {
+      if (text.indexOf(' ') > -1) {
+          switch (option) {
+              case "am":
+                  window.location = "https://www.allmusic.com/search/all/" + subtext;
+                  break;
+              case "d":
+                  window.location = "https://duckduckgo.com/?q=" + subtext;
+                  break;
+              case "di":
+                  window.location = "https://www.discogs.com/search/?q=" + subtext;
+                  break;
+              case "i":
+                  window.location = "https://www.imdb.com/find?q=" + subtext;
+                  break;
+              case "m":
+                  window.location = "https://www.themoviedb.org/search?query=" + subtext;
+                  break;
+              case "r":
+                  window.location = "https://www.reddit.com/search?q=" + subtext;
+                  break;
+              case "q":
+                  window.location = "https://www.qwant.com/?q=" + subtext;
+                  break;
+              case "so":
+                  window.location = "https://soundcloud.com/search?q=" + subtext;
+                  break;
+              case "s":
+                  window.location = "https://open.spotify.com/search/results/" + subtext;
+                  break;
+              case "t":
+                  window.location = "https://trakt.tv/search?query=" + subtext;
+                  break;
+              case "tv":
+                  window.location = "https://www.thetvdb.com/search?query=" + subtext;
+                  break;
+              case "y":
+                  window.location = "https://www.youtube.com/results?search_query=" + subtext;
+                  break;
+              case "w":
+                  window.location = "https://en.wikipedia.org/w/index.php?search=" + subtext;
+                  break;
+              case "p":
+                  window.location = "https://app.plex.tv/desktop/#!/search?query=" + subtext;
+                  break;
+              case "rt":
+                  window.location = "https://www.rottentomatoes.com/search?search=" + subtext;
+                  break;
+                      }
+      } else {
+          var option = text.substr(1);
+          switch (option) {
+              case "d":
+                  window.location = "https://www.duckduckgo.com";
+                  break;
+              case "y":
+                  window.location = "https://www.youtube.com";
+                  break;
+              case "r":
+                  window.location = "https://reddit.com";
+                  break;
+              case "s":
+                  window.location = "https://open.spotify.com";
+                  break;
+          }
+      }
+  } else if (validURL(text)) {
+      if (containsProtocol(text))
+          window.location = text;
+      else
+          window.location = "https://" + text;
+  } else {
+      window.location = "https://www.google.com/search?q=" + text;
+  }
+}
+
+// Source: https://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-a-url
+function validURL(str) {
+  var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
+      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+      '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
+  return !!pattern.test(str);
+}
+
+function containsProtocol(str) {
+  var pattern = new RegExp('^(https?:\\/\\/){1}.*', 'i');
+  return !!pattern.test(str);
+}
+
+String.prototype.replaceAll = function(search, replacement) {
+  var target = this;
+  return target.split(search).join(replacement);
+};