Refactored code to move components out of index.js
Added new folder structure
This commit is contained in:
834
src/index.js
834
src/index.js
@@ -1,841 +1,15 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useState, useEffect } from 'react';
|
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import { BrowserRouter, Routes, Route, matchPath } from "react-router-dom";
|
import { BrowserRouter } from "react-router-dom";
|
||||||
import { Outlet, Link } from "react-router-dom";
|
|
||||||
import './index.css';
|
import './index.css';
|
||||||
|
import './assets/functions.js'
|
||||||
|
import App from "./App.js";
|
||||||
|
|
||||||
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 App() {
|
|
||||||
return (
|
|
||||||
<Homepage />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Homepage() {
|
|
||||||
setTheme();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<main id="container" className="fade">
|
|
||||||
<div>
|
|
||||||
<Search />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Header
|
|
||||||
date={date()}
|
|
||||||
greet={greet()}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Applications />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Bookmarks />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<SettingsButton />
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Search() {
|
|
||||||
return (
|
|
||||||
<section id="search">
|
|
||||||
<div className="abackground">
|
|
||||||
<input name="keywords" type="text" className="keyword" id="keywords" size="50" spellCheck="true" placeholder="" autoComplete="off" autoFocus={true} onKeyUp={handleKeyPress}/>
|
|
||||||
<label id="searchType" className="Input-label">Google search</label>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function Header(props) {
|
|
||||||
return (
|
|
||||||
<section id="header">
|
|
||||||
<div id="greeting_block">
|
|
||||||
<h1 id="header_greet">{props.greet}</h1>
|
|
||||||
</div>
|
|
||||||
<div id="date_block">
|
|
||||||
<h2 id="header_date">{props.date}</h2>
|
|
||||||
<Clock />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const Applications = () => {
|
|
||||||
let data = (getApps()).apps;
|
|
||||||
return (
|
|
||||||
<section id="apps">
|
|
||||||
<h3>Applications</h3>
|
|
||||||
<div id="apps_loop">
|
|
||||||
{data.map((data) => (
|
|
||||||
<Apps
|
|
||||||
key={data.name}
|
|
||||||
name={data.name}
|
|
||||||
url={data.url}
|
|
||||||
icon={data.icon}
|
|
||||||
NSFW={data.NSFW}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Apps(props) {
|
|
||||||
|
|
||||||
let classNameType = props.NSFW + "-content";
|
|
||||||
let hrefUrl = "https://" + props.url;
|
|
||||||
let iconName = "mdi-" + props.icon;
|
|
||||||
return (
|
|
||||||
<div className={classNameType}>
|
|
||||||
<a href={hrefUrl}>
|
|
||||||
<div className="apps_item">
|
|
||||||
<div className="apps_icon">
|
|
||||||
<span className="iconify icon" data-icon={iconName}></span>
|
|
||||||
</div>
|
|
||||||
<div className="apps_text">
|
|
||||||
<span id="app-name">{props.name}</span>
|
|
||||||
<span id="app-address">{props.url}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Bookmarks() {
|
|
||||||
let bookmarkList = (getLinks()).bookmarks;
|
|
||||||
return (
|
|
||||||
<section id="links">
|
|
||||||
<h3>Bookmarks</h3>
|
|
||||||
<div id="links_loop">
|
|
||||||
{bookmarkList.map((bookmarkList) => (
|
|
||||||
<LinkGroups
|
|
||||||
key={bookmarkList.category}
|
|
||||||
category={bookmarkList.category}
|
|
||||||
links={bookmarkList.links}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function LinkGroups(props) {
|
|
||||||
let links = props.links;
|
|
||||||
return (
|
|
||||||
<div id="links_item">
|
|
||||||
<h4>{props.category}</h4>
|
|
||||||
{links.map((links, index) => (
|
|
||||||
<LinkItem
|
|
||||||
key={index}
|
|
||||||
link={links}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function LinkItem(props) {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<a href={props.link.url} className="theme_color-border theme_text-select">{props.link.name}</a>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function HideButton(props) {
|
|
||||||
if(props.checked === "true") {
|
|
||||||
return (
|
|
||||||
<div className="sneaky"><input type="checkbox" id="contenttype" onChange={udpateDisplayedItems} defaultChecked={true}></input>
|
|
||||||
<label htmlFor="contenttype"><span className="iconify" data-icon="mdi-domino-mask"></span></label></div>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<div className="sneaky"><input type="checkbox" id="contenttype" onChange={udpateDisplayedItems} defaultChecked={false}></input>
|
|
||||||
<label htmlFor="contenttype"><span className="iconify" data-icon="mdi-domino-mask"></span></label></div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function Provider(props) {
|
|
||||||
return (
|
|
||||||
<tr>
|
|
||||||
<td><a href={props.provider.url}>{props.provider.name}</a></td>
|
|
||||||
<td>{props.provider.prefix}</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SettingsButton() {
|
|
||||||
setDisplayedItems();
|
|
||||||
return (
|
|
||||||
<div id="modal_init">
|
|
||||||
<Link to="/sui/settings">
|
|
||||||
<span className="iconify icon" data-icon="mdi-xbox-controller-menu"></span>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Settings() {
|
|
||||||
setTheme();
|
|
||||||
var isChecked = localStorage.getItem("contenttype");
|
|
||||||
return (
|
|
||||||
<main id="settings-container" className="fade">
|
|
||||||
<div id="settings-nav">
|
|
||||||
<h1>Settings</h1>
|
|
||||||
<nav id="nav_item">
|
|
||||||
<Link id='peronsalization' to="/sui/settings/personalization">Personalization</Link>
|
|
||||||
<Link id='applications' to="/sui/settings/apps">Applications</Link>
|
|
||||||
<Link id='bookmarks' to="/sui/settings/bookmarks">Bookmarks</Link>
|
|
||||||
<Link id='themes' to="/sui/settings/themes">Themes</Link>
|
|
||||||
<Link id='providers' to="/sui/settings/providers">Search Providers</Link>
|
|
||||||
</nav>
|
|
||||||
<nav id="nav_item">
|
|
||||||
<header id="modal-footer">
|
|
||||||
<HideButton
|
|
||||||
checked = {isChecked}
|
|
||||||
/>
|
|
||||||
</header>
|
|
||||||
<Link to="/sui">Back Home</Link>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<Outlet />
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const PersonalizationSettings = () => {
|
|
||||||
const handleSubmit = (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div id="settings-panel">
|
|
||||||
<div id="settings-panel-header">
|
|
||||||
<h1>Personalization</h1>
|
|
||||||
<h3>Personal details</h3>
|
|
||||||
</div>
|
|
||||||
<form id="personalizationForm">
|
|
||||||
<PersonalInfo />
|
|
||||||
<div>
|
|
||||||
<h3>Greetings</h3>
|
|
||||||
</div>
|
|
||||||
<MessageInfo />
|
|
||||||
</form>
|
|
||||||
<button onClick={handleSubmit} type="submit" form="personalizationForm" value="submit">Save</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
function PersonalInfo() {
|
|
||||||
var personalData = getPersonalData();
|
|
||||||
return (
|
|
||||||
<FormInput
|
|
||||||
fname={personalData.fname}
|
|
||||||
lname={personalData.lname}
|
|
||||||
email={personalData.email}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function FormInput(props) {
|
|
||||||
let fname = props.fname;
|
|
||||||
let lname = props.lname;
|
|
||||||
let email = props.email;
|
|
||||||
return (
|
|
||||||
<div id="personalForm">
|
|
||||||
<label htmlFor="fname">First Name</label>
|
|
||||||
<input id="fname" type="text" defaultValue={fname} onChange={() => console.log()}></input>
|
|
||||||
<label htmlFor="lname">Last Name</label>
|
|
||||||
<input id="lname" type="text" defaultValue={lname} onChange={() => console.log()}></input>
|
|
||||||
<label htmlFor="email">Email</label>
|
|
||||||
<input id="email" type="email" defaultValue={email} onChange={() => console.log()}></input>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function MessageInfo() {
|
|
||||||
let greetings = (require('./messages.json')).messages;
|
|
||||||
return (
|
|
||||||
<div id="messageForm">
|
|
||||||
{greetings.map((greetings, index) => (
|
|
||||||
<Messages
|
|
||||||
key={index}
|
|
||||||
group={index+1}
|
|
||||||
index={greetings.index}
|
|
||||||
greeting={greetings.message}
|
|
||||||
easterEgg={greetings.easteregg}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Messages(props) {
|
|
||||||
|
|
||||||
var eeChecked;
|
|
||||||
if(props.easterEgg === "TRUE") {
|
|
||||||
eeChecked = true;
|
|
||||||
} else if(props.easterEgg === "FALSE") {
|
|
||||||
eeChecked = false;
|
|
||||||
} else {
|
|
||||||
eeChecked = false;
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div id="messageGrid" title={props.group}>
|
|
||||||
<label htmlFor="index">Index</label>
|
|
||||||
<input id="index" type="text" defaultValue={props.index}></input>
|
|
||||||
<label htmlFor="greeting">Greeting</label>
|
|
||||||
<input id="greeting" type="text" defaultValue={props.greeting}></input>
|
|
||||||
<label htmlFor="Easter Egg">Easter Egg</label>
|
|
||||||
<input id="Easter Egg" type="checkbox" defaultChecked={eeChecked}></input>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const ApplicationSettings = () => {
|
|
||||||
let apps = (getApps()).apps
|
|
||||||
const handleSubmit = (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div id="settings-panel">
|
|
||||||
<div id="settings-panel-header">
|
|
||||||
<h1>Applications</h1>
|
|
||||||
</div>
|
|
||||||
<form id="applicationForm">
|
|
||||||
{apps.map((apps) => (
|
|
||||||
<ApplicationDetails
|
|
||||||
key={apps.name}
|
|
||||||
name={apps.name}
|
|
||||||
url={apps.url}
|
|
||||||
icon={apps.icon}
|
|
||||||
urlbase={apps.urlbase}
|
|
||||||
NSFW={apps.NSFW}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</form>
|
|
||||||
<button onClick={handleSubmit} type="submit" form="applicationForm" value="submit">Save</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ApplicationDetails(props) {
|
|
||||||
|
|
||||||
var nsfwChecked;
|
|
||||||
if(props.NSFW === "NSFW") {
|
|
||||||
nsfwChecked = true;
|
|
||||||
} else if(props.easterEgg === "SAFE") {
|
|
||||||
nsfwChecked = false;
|
|
||||||
} else {
|
|
||||||
nsfwChecked = false;
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div id="applicationGrid" title={props.name}>
|
|
||||||
<label htmlFor="name">Name</label>
|
|
||||||
<input id="name" type="text" defaultValue={props.name}></input>
|
|
||||||
<label htmlFor="url">URL</label>
|
|
||||||
<input id="url" type="text" defaultValue={props.url}></input>
|
|
||||||
<label htmlFor="icon">Icon</label>
|
|
||||||
<input id="icon" type="text" defaultValue={props.icon}></input>
|
|
||||||
<label htmlFor="baseurl">Base URL</label>
|
|
||||||
<input id="baseurl" type="text" defaultValue={props.urlbase}></input>
|
|
||||||
<label htmlFor="NSFW">NSFW</label>
|
|
||||||
<input id="NSFW" type="checkbox" defaultChecked={nsfwChecked}></input>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const BookmarksSettings = () => {
|
|
||||||
let groups = (getLinks()).bookmarks;
|
|
||||||
const handleSubmit = (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div id="settings-panel">
|
|
||||||
<div id="settings-panel-header">
|
|
||||||
<h1>Bookmarks</h1>
|
|
||||||
</div>
|
|
||||||
<form id="bookmarkForm">
|
|
||||||
<div>
|
|
||||||
{groups.map((groups) => (
|
|
||||||
<BookmarkGroups
|
|
||||||
key={groups.category}
|
|
||||||
category={groups.category}
|
|
||||||
links={groups.links}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<button onClick={handleSubmit} type="submit" form="bookmarkForm" value="submit">Save</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function BookmarkGroups(props) {
|
|
||||||
let links = props.links;
|
|
||||||
return (
|
|
||||||
<div id="bookmarkForm">
|
|
||||||
<h3>{props.category}</h3>
|
|
||||||
{links.map((links) => (
|
|
||||||
<BookmarkDetails
|
|
||||||
key={links.name}
|
|
||||||
name={links.name}
|
|
||||||
url={links.url}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function BookmarkDetails(props) {
|
|
||||||
return (
|
|
||||||
<div id="bookmarkGrid" title={props.name}>
|
|
||||||
<label htmlFor="name">Name</label>
|
|
||||||
<input id="name" type="text" defaultValue={props.name}></input>
|
|
||||||
<label htmlFor="url">URL</label>
|
|
||||||
<input id="url" type="text" defaultValue={props.url}></input>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ThemesSettings() {
|
|
||||||
let themes = (getThemes()).themes;
|
|
||||||
console.log(themes[0].colorbackground);
|
|
||||||
return (
|
|
||||||
<div id="settings-panel">
|
|
||||||
<h1>Themes</h1>
|
|
||||||
<div id="modal-theme">
|
|
||||||
{themes.map((themes) => (
|
|
||||||
<div className="theme-row">
|
|
||||||
<button data-theme={themes.name} className={"theme-button theme-" + themes.name} onClick={updateTheme}>{themes.name}</button>
|
|
||||||
<div className="theme-palette">
|
|
||||||
<div className="swatch" style={{background: themes.colorbackground}}></div>
|
|
||||||
<div className="swatch" style={{background: themes.colorserachbackground}}></div>
|
|
||||||
<div className="swatch" style={{background: themes.colortextpri}}></div>
|
|
||||||
<div className="swatch" style={{background: themes.colortextacc}}></div>
|
|
||||||
<div className="swatch" style={{background: themes.colorborder}}></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ProviderSettings() {
|
|
||||||
let providers = (getProviders()).providers;
|
|
||||||
const handleSubmit = (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div id="settings-panel">
|
|
||||||
<div id="settings-panel-header">
|
|
||||||
<h1>Providers</h1>
|
|
||||||
</div>
|
|
||||||
<form id="providersForm">
|
|
||||||
{providers.map((providers) => (
|
|
||||||
<ProvidersDetails
|
|
||||||
key={providers.name}
|
|
||||||
name={providers.name}
|
|
||||||
url={providers.url}
|
|
||||||
prefix={providers.prefix}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</form>
|
|
||||||
<button onClick={handleSubmit} type="submit" form="providersForm" value="submit">Save</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ProvidersDetails(props) {
|
|
||||||
return (
|
|
||||||
<div id="providersGrid" title={props.name}>
|
|
||||||
<label htmlFor="name">Name</label>
|
|
||||||
<input id="name" type="text" defaultValue={props.name}></input>
|
|
||||||
<label htmlFor="prefix">Prefix</label>
|
|
||||||
<input id="prefix" type="text" defaultValue={props.prefix}></input>
|
|
||||||
<label htmlFor="url">URL</label>
|
|
||||||
<input id="url" type="text" defaultValue={props.url}></input>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Routes>
|
<App />
|
||||||
<Route path="/sui" element={<App />} />
|
|
||||||
<Route path="/sui/settings" element={<Settings />}>
|
|
||||||
<Route path="personalization" element={<PersonalizationSettings />}/>
|
|
||||||
<Route path="apps" element={<ApplicationSettings />}/>
|
|
||||||
<Route path="bookmarks" element={<BookmarksSettings />}/>
|
|
||||||
<Route path="themes" element={<ThemesSettings />}/>
|
|
||||||
<Route path="providers" element={<ProviderSettings />}/>
|
|
||||||
</Route>
|
|
||||||
</Routes>
|
|
||||||
</BrowserRouter>,
|
</BrowserRouter>,
|
||||||
document.getElementById('root')
|
document.getElementById('root')
|
||||||
);
|
);
|
||||||
|
|
||||||
//Functions below this line are for calculating data for
|
|
||||||
//other functions
|
|
||||||
|
|
||||||
function date() {
|
|
||||||
let currentDate = new Date();
|
|
||||||
let dateOptions = {
|
|
||||||
weekday: "long",
|
|
||||||
year: "numeric",
|
|
||||||
month: "long",
|
|
||||||
day: "numeric"
|
|
||||||
};
|
|
||||||
let date = currentDate.toLocaleDateString("en-GB", dateOptions);
|
|
||||||
return date;
|
|
||||||
}
|
|
||||||
function fixDigits(k) {
|
|
||||||
if (k < 10) {
|
|
||||||
return "0" + k;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return k;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function greet() {
|
|
||||||
let currentTime = new Date();
|
|
||||||
let greet = Math.floor(currentTime.getHours() / 6);
|
|
||||||
let easterEggChance = Math.floor(Math.random() * 100);
|
|
||||||
let greetings = require('./messages.json');
|
|
||||||
let timeBased = [];
|
|
||||||
let easterEggs = [];
|
|
||||||
for (var i = 0; i < greetings.messages.length; i++) {
|
|
||||||
if (greetings.messages[i].easteregg === "FALSE") {
|
|
||||||
timeBased = timeBased.concat(greetings.messages[i]);
|
|
||||||
} else {
|
|
||||||
easterEggs = easterEggs.concat(greetings.messages[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (easterEggChance > 10) {
|
|
||||||
return timeBased[greet].message;
|
|
||||||
} else {
|
|
||||||
let easterEggText = Math.floor(Math.random() * easterEggs.length);
|
|
||||||
return easterEggs[easterEggText].message;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function Clock() {
|
|
||||||
const [date, setDate] = useState(new Date());
|
|
||||||
|
|
||||||
function refreshClock() {
|
|
||||||
setDate(new Date());
|
|
||||||
}
|
|
||||||
useEffect(() => {
|
|
||||||
const timerId = setInterval(refreshClock, 1000);
|
|
||||||
return function cleanup() {
|
|
||||||
clearInterval(timerId);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
var hour = date.getHours();
|
|
||||||
var minutes = date.getMinutes();
|
|
||||||
//var seconds = date.getSeconds();
|
|
||||||
var midday = "AM";
|
|
||||||
midday = (hour >= 12) ? "PM" : "AM";
|
|
||||||
hour = (hour === 0) ? 12 : ((hour > 12) ? (hour - 12) : hour);
|
|
||||||
minutes = fixDigits(minutes);
|
|
||||||
//seconds = fixDigits(seconds);
|
|
||||||
let time = hour + ":" + minutes + " " + midday;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<h2 id="clock">{time}</h2>
|
|
||||||
|
|
||||||
);
|
|
||||||
}
|
|
||||||
function getApps() {
|
|
||||||
let applications = require('./apps.json');
|
|
||||||
return applications;
|
|
||||||
}
|
|
||||||
function getLinks() {
|
|
||||||
let links = require('./links.json');
|
|
||||||
return links;
|
|
||||||
}
|
|
||||||
function getProviders() {
|
|
||||||
let providers = require('./providers.json');
|
|
||||||
return providers;
|
|
||||||
}
|
|
||||||
function getThemes() {
|
|
||||||
let themes = require('./themes.json');
|
|
||||||
return themes;
|
|
||||||
}
|
|
||||||
function getPersonalData() {
|
|
||||||
let personaldata = require('./personaldata.json');
|
|
||||||
return personaldata;
|
|
||||||
}
|
|
||||||
function updateTheme(e) {
|
|
||||||
var themes = getThemes();
|
|
||||||
var themeName = e.target.innerHTML.toLowerCase();
|
|
||||||
var index = themes.themes.findIndex(function(item, i){
|
|
||||||
return item.name === themeName;
|
|
||||||
});
|
|
||||||
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() {
|
|
||||||
if(localStorage.getItem("color-background") === null) {
|
|
||||||
localStorage.setItem("image-background", "");
|
|
||||||
localStorage.setItem("color-background", "#ffffff");
|
|
||||||
localStorage.setItem("color-search-background", "#22222220");
|
|
||||||
localStorage.setItem("color-text-pri", "#222222");
|
|
||||||
localStorage.setItem("color-text-acc", "#dddddd");
|
|
||||||
localStorage.setItem("color-border", "#dddddd");
|
|
||||||
} else {
|
|
||||||
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;
|
|
||||||
default :
|
|
||||||
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) {
|
|
||||||
if (text[0] === '/') {
|
|
||||||
if (text.indexOf(' ') > -1) {
|
|
||||||
let option = text.substr(1, text.indexOf(' ') - 1) || text.substr(1);
|
|
||||||
var subtext = text.substr(2 + option.length);
|
|
||||||
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;
|
|
||||||
default :
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
let 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;
|
|
||||||
default :
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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);
|
|
||||||
};
|
|
||||||
function udpateDisplayedItems(e) {
|
|
||||||
localStorage.setItem('contenttype', e.target.checked);
|
|
||||||
if (e.target.checked) {
|
|
||||||
localStorage.setItem('content-display', 'none');
|
|
||||||
} else {
|
|
||||||
localStorage.setItem('content-display', 'block');
|
|
||||||
}
|
|
||||||
setDisplayedItems();
|
|
||||||
}
|
|
||||||
function setDisplayedItems() {
|
|
||||||
setValueFromLocalStorage('contenttype');
|
|
||||||
setValueFromLocalStorage('content-display');
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user