Working hide button on the modal
This commit is contained in:
Sean Edmunds
2
node_modules/.cache/.eslintcache
generated
vendored
2
node_modules/.cache/.eslintcache
generated
vendored
@@ -1 +1 @@
|
||||
[{"/home/seanedmunds/dev/home-page/src/index.js":"1","/home/seanedmunds/dev/home-page/src/search.js":"2","/home/seanedmunds/dev/home-page/src/themer.js":"3"},{"size":17989,"mtime":1639503841427,"results":"4","hashOfConfig":"5"},{"size":7513,"mtime":1639496882220,"results":"6","hashOfConfig":"5"},{"size":7478,"mtime":1639496786188,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"fatalErrorCount":0,"warningCount":9,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"szjdbt",{"filePath":"10","messages":"11","errorCount":0,"fatalErrorCount":0,"warningCount":9,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"12","messages":"13","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/home/seanedmunds/dev/home-page/src/index.js",["14","15","16","17","18","19","20","21","22"],"/home/seanedmunds/dev/home-page/src/search.js",["23","24","25","26","27","28","29","30","31"],"/home/seanedmunds/dev/home-page/src/themer.js",["32"],{"ruleId":"33","severity":1,"message":"34","line":186,"column":11,"nodeType":"35","endLine":186,"endColumn":61},{"ruleId":"36","severity":1,"message":"37","line":384,"column":11,"nodeType":"38","messageId":"39","endLine":384,"endColumn":13},{"ruleId":"36","severity":1,"message":"37","line":387,"column":11,"nodeType":"38","messageId":"39","endLine":387,"endColumn":13},{"ruleId":"40","severity":1,"message":"41","line":391,"column":11,"nodeType":"42","messageId":"43","endLine":407,"endColumn":12},{"ruleId":"36","severity":1,"message":"37","line":410,"column":10,"nodeType":"38","messageId":"39","endLine":410,"endColumn":12},{"ruleId":"40","severity":1,"message":"41","line":482,"column":11,"nodeType":"42","messageId":"43","endLine":528,"endColumn":24},{"ruleId":"44","severity":1,"message":"45","line":530,"column":15,"nodeType":"46","messageId":"47","endLine":530,"endColumn":21},{"ruleId":"40","severity":1,"message":"41","line":531,"column":11,"nodeType":"42","messageId":"43","endLine":544,"endColumn":12},{"ruleId":"48","severity":1,"message":"49","line":572,"column":1,"nodeType":"50","messageId":"39","endLine":575,"endColumn":2},{"ruleId":"51","severity":1,"message":"52","line":15,"column":10,"nodeType":"46","messageId":"53","endLine":15,"endColumn":24},{"ruleId":"36","severity":1,"message":"37","line":20,"column":13,"nodeType":"38","messageId":"39","endLine":20,"endColumn":15},{"ruleId":"36","severity":1,"message":"37","line":23,"column":13,"nodeType":"38","messageId":"39","endLine":23,"endColumn":15},{"ruleId":"40","severity":1,"message":"41","line":27,"column":13,"nodeType":"42","messageId":"43","endLine":43,"endColumn":14},{"ruleId":"36","severity":1,"message":"37","line":46,"column":12,"nodeType":"38","messageId":"39","endLine":46,"endColumn":14},{"ruleId":"40","severity":1,"message":"41","line":118,"column":13,"nodeType":"42","messageId":"43","endLine":164,"endColumn":14},{"ruleId":"44","severity":1,"message":"45","line":166,"column":17,"nodeType":"46","messageId":"47","endLine":166,"endColumn":23},{"ruleId":"40","severity":1,"message":"41","line":167,"column":13,"nodeType":"42","messageId":"43","endLine":180,"endColumn":14},{"ruleId":"48","severity":1,"message":"49","line":208,"column":1,"nodeType":"50","messageId":"39","endLine":211,"endColumn":2},{"ruleId":"40","severity":1,"message":"41","line":44,"column":9,"nodeType":"42","messageId":"43","endLine":230,"endColumn":10},"jsx-a11y/anchor-is-valid","The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md","JSXOpeningElement","eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected","default-case","Expected a default case.","SwitchStatement","missingDefaultCase","no-redeclare","'option' is already defined.","Identifier","redeclared","no-extend-native","String prototype is read only, properties should not be added.","AssignmentExpression","no-unused-vars","'handleKeyPress' is defined but never used.","unusedVar"]
|
||||
[{"/home/seanedmunds/dev/home-page/src/index.js":"1"},{"size":19454,"mtime":1639516153474,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"fatalErrorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"szjdbt","/home/seanedmunds/dev/home-page/src/index.js",["6","7"],{"ruleId":"8","severity":1,"message":"9","line":206,"column":11,"nodeType":"10","endLine":206,"endColumn":61},{"ruleId":"11","severity":1,"message":"12","line":607,"column":1,"nodeType":"13","messageId":"14","endLine":610,"endColumn":2},"jsx-a11y/anchor-is-valid","The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md","JSXOpeningElement","no-extend-native","String prototype is read only, properties should not be added.","AssignmentExpression","unexpected"]
|
||||
@@ -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"}
|
||||
]
|
||||
|
||||
@@ -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
148
src/index.js
@@ -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');
|
||||
}
|
||||
Reference in New Issue
Block a user