Refactored code to move components out of index.js
Added new folder structure
This commit is contained in:
836
src/index.js
836
src/index.js
@@ -1,841 +1,15 @@
|
||||
import React from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { BrowserRouter, Routes, Route, matchPath } from "react-router-dom";
|
||||
import { Outlet, Link } from "react-router-dom";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
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(
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<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>
|
||||
<App />
|
||||
</BrowserRouter>,
|
||||
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