smedmunds/home-page
Archived
1
0
Fork 0
Code Releases 2 Activity

Working hide button on the modal

Browse Source
This commit is contained in:
Sean Edmunds
2021-12-14 15:24:37 -06:00
parent 1b513e8109
commit 3e39eec843
4 changed files with 103 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/apps.json
View File

@@ -1,6 +1,7 @@
{
"apps" : [
{"name":"Deluge","url":"home.halfaperture.com/deluge","icon":"water","urlbase":"/Deluge","NSFW":"NSFW"},
{"name":"Gitea","url":"home.halfaperture.com/gitea","icon":"tea","urlbase":"/Gitea","NSFW":"SAFE"},
{"name":"Grafana","url":"home.halfaperture.com/grafana","icon":"chart-areaspline-variant","urlbase":"/Grafana","NSFW":"SAFE"},
{"name":"Guacamole","url":"home.halfaperture.com/guacamole","icon":"remote-desktop","urlbase":"/Guacamole","NSFW":"SAFE"},
{"name":"Jackett","url":"home.halfaperture.com/jackett","icon":"tshirt-crew","urlbase":"/Jackett","NSFW":"NSFW"},
@@ -16,7 +17,7 @@
{"name":"Radarr","url":"home.halfaperture.com/radarr","icon":"movie-open","urlbase":"/Radarr","NSFW":"NSFW"},
{"name":"SABnzbd","url":"home.halfaperture.com/sabnzbd","icon":"download","urlbase":"/SABnzbd","NSFW":"NSFW"},
{"name":"Sonarr","url":"home.halfaperture.com/sonarr","icon":"television-classic","urlbase":"/Sonarr","NSFW":"NSFW"},
{"name":"Tautulli","url":"home.halfaperture.com/stats","icon":"chart-bar","urlbase":"/Stats","NSFW":"SAFE"},
{"name":"Tautulli","url":"home.halfaperture.com/stats","icon":"chart-bar","urlbase":"/Stats","NSFW":"NSFW"},
{"name":"uBooquity","url":"home.halfaperture.com/ubooquity","icon":"book-open-outline","urlbase":"/uBooquity","NSFW":"SAFE"},
{"name":"Wiki","url":"home.halfaperture.com/wiki","icon":"wikipedia","urlbase":"/Wiki","NSFW":"SAFE"}
]

3
src/index.css
View File

@@ -43,7 +43,7 @@ h1, h2{
font-weight: 300;
margin: 0;
margin-left: .5em;
margin-right: 5em;
margin-right: .5em;
padding: 0;
text-align: left;
}
@@ -154,6 +154,7 @@ a:hover #app-address{
z-index: 1;
position: absolute;
text-align: center;
color: red;
}
.keyword:focus:not(:placeholder-shown) + .Input-label{
visibility: visible;

148
src/index.js
View File

@@ -1,7 +1,6 @@
import React from 'react';
import { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
//import { unstable_createPortal } from 'react-dom';
import './index.css';
const setValueFromLocalStorage = property => {
@@ -22,6 +21,7 @@ const setValue = (property, value) => {
function Homepage() {
setTheme();
return (
<main id="container" className="fade">
<div>
@@ -53,7 +53,7 @@ function Search() {
return (
<section id="search">
<div className="abackground">
<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}/>
<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>
@@ -78,15 +78,32 @@ function Applications() {
let appList = getApps();
var items = [];
for (var i = 0; i < appList.apps.length; i++) {
items.push(
<App
key={i}
name={appList.apps[i].name}
url={appList.apps[i].url}
icon={appList.apps[i].icon}
NSFW={appList.apps[i].NSFW}
/>
);
var safe = appList.apps[i].NSFW;
var NSFWEnabled = localStorage.getItem("contenttype");
if (safe === "SAFE") {
items.push(
<App
key={i}
name={appList.apps[i].name}
url={appList.apps[i].url}
icon={appList.apps[i].icon}
NSFW={appList.apps[i].NSFW}
/>
);
} else if (safe === "NSFW" && NSFWEnabled) {
items.push(
<App
key={i}
name={appList.apps[i].name}
url={appList.apps[i].url}
icon={appList.apps[i].icon}
NSFW={appList.apps[i].NSFW}
/>
);
} else {
}
}
return (
<section id="apps">
@@ -99,24 +116,25 @@ function Applications() {
}
function App(props) {
let classNameType = props.NSFW + "-content";
let hrefUrl = "https://" + props.url;
let iconName = "mdi-" + props.icon;
return (
<div>
<a href={hrefUrl} className={classNameType}>
<div className="apps_item">
<div className="apps_icon">
<span className="iconify icon" data-icon={iconName}></span>
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>
<div className="apps_text">
<span id="app-name">{props.name}</span>
<span id="app-address">{props.url}</span>
</div>
</div>
</a>
</div>
);
</a>
</div>
);
}
function Bookmarks() {
@@ -170,6 +188,8 @@ function LinkItem(props) {
function ModalMenu() {
var providers = getProviders();
var items = [];
var isChecked = localStorage.getItem("contenttype");
console.log(localStorage.getItem("contenttype"));
for (var i = 0; i < providers.providers.length; i++) {
items.push(
<Provider
@@ -226,14 +246,32 @@ function ModalMenu() {
<header id="modal-footer">
<a href="https://github.com/jeroenpardon/"><span className="iconify" data-icon="mdi-github-box"></span></a>
<a href="https://materialdesignicons.com/"><span className="iconify" data-icon="mdi-material-design"></span></a>
<div className="sneaky"><input type="checkbox" id="contenttype" onChange="nsfw(this)"></input>
<label for="contenttype"><span className="iconify" data-icon="mdi-domino-mask"></span></label></div>
<HideButton
checked = {isChecked}
/>
</header>
</div>
</section>
);
}
function HideButton(props) {
console.log(props.checked);
if(props.checked === "true") {
console.log("icon should be grey");
return (
<div className="sneaky"><input type="checkbox" id="contenttype" onChange={udpateDisplayedItems} defaultChecked={true}></input>
<label for="contenttype"><span className="iconify" data-icon="mdi-domino-mask"></span></label></div>
);
} else {
console.log("icon should be white");
return (
<div className="sneaky"><input type="checkbox" id="contenttype" onChange={udpateDisplayedItems} defaultChecked={false}></input>
<label for="contenttype"><span className="iconify" data-icon="mdi-domino-mask"></span></label></div>
);
}
}
function Provider(props) {
return (
<tr>
@@ -244,6 +282,7 @@ function Provider(props) {
}
function ModalInit() {
setDisplayedItems();
return (
<div id="modal_init">
<a className="btn" href="#modal">
@@ -345,14 +384,12 @@ 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
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);
@@ -363,7 +400,6 @@ function updateTheme(e) {
//document.documentElement.style.setProperty(prop, `var(--${themeName}${prop.substring(10)})`);
setTheme();
}
function setTheme() {
setValueFromLocalStorage('image-background');
setValueFromLocalStorage('color-background');
@@ -373,7 +409,6 @@ function setTheme() {
setValueFromLocalStorage('color-border');
setValueFromLocalStorage('content-display');
}
function handleKeyPress(e) {
var sindex = 0;
var cycle = false;
@@ -381,10 +416,10 @@ function handleKeyPress(e) {
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
if (key === 13) { // Search functions
search(text);
}
if (key == 9) { // Tab Completion Functions
if (key === 9) { // Tab Completion Functions
e.preventDefault();
e.stopPropagation();
if (text[0] === ';') {
@@ -404,17 +439,18 @@ function handleKeyPress(e) {
}
}
break;
default :
break;
}
}
}
if(key == 32){ //Space to go to search
updateLabel(text);
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] === '/') {
@@ -473,12 +509,11 @@ function updateLabel(text) {
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) {
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;
@@ -525,9 +560,11 @@ function search(text) {
case "rt":
window.location = "https://www.rottentomatoes.com/search?search=" + subtext;
break;
}
default :
break;
}
} else {
var option = text.substr(1);
let option = text.substr(1);
switch (option) {
case "d":
window.location = "https://www.duckduckgo.com";
@@ -541,6 +578,8 @@ function search(text) {
case "s":
window.location = "https://open.spotify.com";
break;
default :
break;
}
}
} else if (validURL(text)) {
@@ -552,8 +591,6 @@ function search(text) {
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
@@ -563,13 +600,24 @@ function validURL(str) {
'(\\#[-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');
}