holm/the-glorious-startpage
1
0
Fork 0
forked from extern/the-glorious-startpage
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Quality control (#27)

Browse Source 
* fix paddings on screen

* fix  test Variable Assigned to Object Injection Sink

* fix parse int missing base

* fix security issues(regex not included)

* fix missing base

* fixes padding

* minor fixes

* regex

* cleanup

* minor cleanup in webmenu

* cleanups

* cleanups spaces to tab

* cleanups

* spacing tabs fixes test

* cleanup

* cleanup

* multitransition new line

* cleanup

* cleanup

* cleanup

* cleanup

* readme

* comments

* cleanup

* Avoid assignments in operands

* cleanup
This commit is contained in:
Gerome Matilla 2020-06-16 20:07:54 +08:00 committed by GitHub
parent f484e86e09
commit ae6e1254ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
41 changed files with 900 additions and 910 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -1,15 +1,15 @@
## A bloated and modern-looking startpage
[![maintained](https://img.shields.io/maintenance/yes/2020?label=maintained&style=flat-square)](https://github.com/manilarome/the-glorious-startpage/commits/master) [![contributions](https://img.shields.io/badge/contribution-welcome-brightgreen&?style=flat-square)](https://github.com/manilarome/the-glorious-startpage/pulls) [![HitCount](http://hits.dwyl.com/manilarome/the-glorious-startpage.svg)](http://hits.dwyl.com/manilarome/the-glorious-startpage)
[![maintained](https://img.shields.io/maintenance/yes/2020?label=maintained&style=flat-square)](https://github.com/manilarome/the-glorious-startpage/commits/master) [![contributions](https://img.shields.io/badge/contribution-welcome-brightgreen&?style=flat-square)](https://github.com/manilarome/the-glorious-startpage/pulls) [![HitCount](http://hits.dwyl.com/manilarome/the-glorious-startpage.svg)](http://hits.dwyl.com/manilarome/the-glorious-startpage) [![Codacy Badge](https://app.codacy.com/project/badge/Grade/d942895baf48442d8c9df54306887aa0)](https://www.codacy.com/manual/manilarome/the-glorious-startpage?utm_source=github.com&utm_medium=referral&utm_content=manilarome/the-glorious-startpage&utm_campaign=Badge_Grade)
## [Live Preview](https://manilarome.github.io/the-glorious-startpage/)
## Gallery
<div align='center'>
<h3>
<img src='/scrots/idle.png' align='center'>
</h3>
<h3>
<img src='/scrots/idle.png' align='center'>
</h3>
</div>

2
css/bars/bar.css
View File

@ -3,7 +3,7 @@
backdrop-filter: blur(var(--blur-strength));
z-index: 5;
/*Make clock unselectable*/
/* Make clock unselectable */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;

6
css/bars/clock.css
View File

@ -4,9 +4,9 @@
font-family: roboto-bold, sans-serif;
font-weight: 700;
/*Center lock*/
/* Center lock */
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
top: 50%;
transform: translateY(-50%);
}

17
css/bars/dock-buttons.css
View File

@ -1,4 +1,4 @@
/*Dock buttons*/
/* Dock buttons */
.dockButton {
background: var(--base-container);
width: 36px;
@ -9,23 +9,22 @@
padding: 5px;
border: none;
cursor: pointer;
transition: transform .2s;
transition: transform 0.2s;
}
/*The a href container/main dock button container*/
/* The a href container/main dock button container */
.dockLink {
/*Act as div*/
/* Act as div */
display: block;
/*Remove outlines*/
/* Remove outlines */
text-decoration: none;
outline: 0;
border: none;
-moz-outline-style: none;
/*Disable dragging*/
/* Disable dragging */
user-select: none;
user-drag: none;
-webkit-user-drag: none;
}
@ -41,12 +40,12 @@
top: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
overflow: auto;
}
/* Dock button hover */
.dockButton:hover {
background: var(--base-hover-bg);
@ -55,6 +54,7 @@
transform: scale(1.25);
}
/* Dock button active */
.dockButton:active {
background: var(--base-active-bg);
@ -63,6 +63,7 @@
transform: scale(1);
}
/* Dock button image */
.dockButtonImage {
background-size: cover;
}

112
css/bars/dock.css
View File

@ -2,21 +2,21 @@
background: transparent;
position: absolute;
z-index: 5;
margin: 0 auto;
bottom: 0;
margin: 0 auto;
bottom: 0;
/*On bottom, center horizontally*/
/* On bottom, center horizontally */
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
/*Add transition*/
/* Add transition */
transition: opacity var(--transition-speed);
}
#dock {
background: var(--panel-bg);
border-radius: var(--rounded-radius);
border-radius: var(--rounded-radius);
display: flex;
position: relative;
@ -26,159 +26,149 @@
padding: 5px;
margin: 10px;
transition: transform var(--transition-speed);
transition: transform var(--transition-speed);
z-index: 1;
}
/*Translate dock to left side if width <= 470 and height >= 540*/
/* Translate dock to left side if width <= 470 and height >= 540 */
@media screen and (max-width: 470px) and (min-height: 490px) {
.dockContainer {
display: inline-block;
opacity: 1;
position: relative;
margin:0 auto;
position: relative;
margin: 0 auto;
top: 50%;
left: 0;
bottom: 0;
right: 0;
top: 50%;
left: 0;
bottom: 0;
right: 0;
-webkit-transform: translateY(-50%);
transition: opacity var(--transition-speed);
-webkit-transform: translateY(-50%);
transition: opacity var(--transition-speed);
}
#dock {
display: inline-block;
width: auto;
height: auto;
width: auto;
height: auto;
margin: 5px;
transform: scale(0.90);
transform: scale(0.9);
transition: transform var(--transition-speed);
}
}
/*Decrease scale to 0.85 if width is less than 470px*/
/* Decrease scale to 0.85 if width is less than 470px */
@media screen and (max-width: 469px) and (max-height: 489px) {
.dockContainer {
position: absolute;
background: transparent;
z-index: 5;
margin: 0 auto;
bottom: 0;
margin: 0 auto;
bottom: 0;
/*On bottom, center horizontally*/
/* On bottom, center horizontally */
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
/*Add transition*/
/* Add transition */
transition: opacity var(--transition-speed);
}
#dock {
display: flex;
width: auto;
height: auto;
width: auto;
height: auto;
margin: 5px;
transform: scale(0.85);
transition: transform var(--transition-speed);
}
}
/*Decrease scale to 0.75 if width is less than 380px*/
/* Decrease scale to 0.75 if width is less than 380px */
@media screen and (max-width: 380px) and (max-height: 489px) {
.dockContainer {
position: absolute;
background: transparent;
z-index: 5;
margin: 0 auto;
bottom: 0;
margin: 0 auto;
bottom: 0;
/*On bottom, center horizontally*/
/* On bottom, center horizontally */
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
/*Add transition*/
/* Add transition */
transition: opacity var(--transition-speed);
}
#dock {
display: flex;
width: auto;
height: auto;
width: auto;
height: auto;
margin: 5px;
transform: scale(0.75);
transition: transform var(--transition-speed);
}
}
/*Decrease scale to 0.70 if width is less than or equal to 374px and greater than or equal to 320px*/
/* Decrease scale to 0.70 if width is less than or equal to 374px and greater than or equal to 320px */
@media screen and (max-width: 350px) and (min-width: 320px) and (max-height: 489px) {
.dockContainer {
position: absolute;
background: transparent;
z-index: 5;
margin: 0 auto;
bottom: 0;
margin: 0 auto;
bottom: 0;
/*On bottom, center horizontally*/
/* On bottom, center horizontally */
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
/*Add transition*/
/* Add transition */
transition: opacity var(--transition-speed);
}
#dock {
display: flex;
width: auto;
height: auto;
width: auto;
height: auto;
margin: 5px;
transform: scale(0.70);
transform: scale(0.7);
transition: transform var(--transition-speed);
}
}
/*Scale to 0 if less than 320px*/
/* Scale to 0 if less than 320px */
@media screen and (max-width: 319px) and (max-height: 489px) {
.dockContainer {
position: absolute;
background: transparent;
z-index: 5;
margin: 0 auto;
bottom: 0;
margin: 0 auto;
bottom: 0;
/*On bottom, center horizontally*/
/* On bottom, center horizontally */
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
/*Add transition*/
/* Add transition */
transition: opacity var(--transition-speed);
}
#dock {
display: flex;
width: auto;
height: auto;
opacity: 0;
width: auto;
height: auto;
opacity: 0;
margin: 5px;
transform: scale(0.0);
transition: transform var(--transition-speed),
transform: scale(0);
transition:
transform var(--transition-speed),
opacity var(--transition-speed);
}
}

134
css/base/base.css
View File

@ -1,65 +1,5 @@
:root {
/* Colors */
--base-body-bg: #1A1A1AFF;
--base-bg: #00000060;
--base-color: #FEFEFEFF;
--base-container: #F2F2F220;
--base-hover-bg: #F2F2F230;
--base-focus-bg: #F2F2F245;
--base-active-bg: #FEFEFE60;
--blur-strength: 6px;
--panel-bg: var(--base-bg);
--panel-color: var(--base-color);
--transition-speed: 300ms;
--rounded-radius: 12px;
}
* {
box-sizing: border-box;
/*Font rendering*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-variant-ligatures: none;
/*Disable tap hightlight color on mobile devices*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: var(--base-body-bg);
color: var(--foreground);
}
html, body {
font-family: roboto, sans-serif;
height: 100%;
position: fixed;
}
/*Placeholder*/
::placeholder {
color: var(--base-color);
opacity: 0.65;
}
/*Scrollbar*/
/* width */
/* Scrollbar */
/* Width */
::-webkit-scrollbar {
width: 10px;
}
@ -74,28 +14,82 @@ html, body {
background: var(--base-active-bg);
}
:root {
/* Colors */
--base-body-bg: #1a1a1aff;
--base-bg: #00000060;
--base-color: #fefefeff;
--base-container: #f2f2f220;
--base-hover-bg: #f2f2f230;
--base-focus-bg: #f2f2f245;
--base-active-bg: #fefefe60;
--blur-strength: 6px;
--panel-bg: var(--base-bg);
--panel-color: var(--base-color);
--transition-speed: 300ms;
--rounded-radius: 12px;
}
/* Placeholder */
::placeholder {
color: var(--base-color);
opacity: 0.65;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--base-hover-bg);
}
/*Hide focus elements outline*/
input:focus,
textarea:focus,
select:focus{
outline: none;
* {
box-sizing: border-box;
/* Font rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-variant-ligatures: none;
/* Disable tap hightlight color on mobile devices */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
select::-ms-expand {
display: none;
body {
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: var(--base-body-bg);
color: var(--foreground);
}
/*Select*/
html,
body {
font-family: roboto, sans-serif;
height: 100%;
position: fixed;
}
/* Select */
select {
text-align: center;
text-align-last: center;
}
/* Hide focus elements outline */
input:focus,
textarea:focus,
select:focus {
outline: none;
}
select::-ms-expand {
display: none;
}
option {
text-align: left;
}

19
css/base/font-face.css
View File

@ -1,16 +1,19 @@
/* Fantasque Sans */
@font-face {
font-family: 'fantasque-sans-mono';
font-style: normal;
src: url('../../fonts/fantasque-sans-mono-bold-italic-nerd-font-complete.ttf');
}
/*Roboto light*/
/* Roboto light */
@font-face {
font-family: 'roboto-light';
font-style: normal;
font-weight: 300;
src: url('../../fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
src: local('Roboto Light'), local('Roboto-Light'),
src:
local('Roboto Light'),
local('Roboto-Light'),
url('../../fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../../fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../../fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
@ -18,13 +21,15 @@
url('../../fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/*Roboto normal*/
/* Roboto normal */
@font-face {
font-family: 'roboto';
font-style: normal;
font-weight: 400;
src: url('../../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Roboto'), local('Roboto-Regular'),
src:
local('Roboto'),
local('Roboto-Regular'),
url('../../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
@ -32,13 +37,15 @@
url('../../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/*Roboto bold*/
/* Roboto bold */
@font-face {
font-family: 'roboto-bold';
font-style: normal;
font-weight: 700;
src: url('../../fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
src: local('Roboto Bold'), local('Roboto-Bold'),
src:
local('Roboto Bold'),
local('Roboto-Bold'),
url('../../fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../../fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../../fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */

6
css/base/normalize.css vendored
View File

@ -62,7 +62,7 @@ hr {
*/
pre {
font-family: monospace, monospace; /* 1 */
font-family: monospace; /* 1 */
font-size: 1em; /* 2 */
}
@ -105,7 +105,7 @@ strong {
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-family: monospace; /* 1 */
font-size: 1em; /* 2 */
}
@ -234,7 +234,7 @@ fieldset {
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
* `fieldset` elements in all browsers.
*/
legend {

47
css/centeredbox/auto-suggestion.css
View File

@ -1,4 +1,4 @@
/*Container*/
/* Container */
.phrasesContainer {
position: absolute;
@ -11,7 +11,7 @@
opacity: 0;
transition: opacity var(--transition-speed);
/*Disable user touch/select on text elements*/
/* Disable user touch/select on text elements */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
@ -20,49 +20,49 @@
user-select: none;
}
/*Show suggestion*/
/* Show suggestion */
#suggestionsContainer.suggestionsShow {
opacity: 1;
}
/*ul*/
/* UL */
#suggestions {
height: auto;
width: 50vw;
/*Center ul horizontally*/
/* Center ul horizontally */
margin: 0 auto;
list-style: none;
/*Remove the fucking padding*/
/*It took me an hour to fix this piece of shit*/
/* Remove the fucking padding */
/* It took me an hour to fix this piece of shit */
padding: 0;
/*Allow centering of children*/
/* Allow centering of children */
display: table;
table-layout: fixed;
}
/*li*/
/* LI */
#phrase {
/*Align list horizontally*/
/* Align list horizontally */
justify-content: center;
height: auto;
/*Always stack and center horizontally*/
/*display: table-cell;*/
/*width: auto;*/
/*text-align: center;*/
/* Always stack and center horizontally */
/* display: table-cell; */
/* width: auto; */
/* text-align: center; */
/*Always stack and center vertically*/
/* Always stack and center vertically */
display: inline-flex;
width: 100%;
text-align: center;
}
/*The li's child*/
/* LI's Child */
.phraseButton {
background: transparent;
@ -71,35 +71,35 @@
color: var(--base-color);
font-size: 12pt;
font-family: roboto-bold;
font-family: roboto-bold, sans-serif;
font-weight: 700;
text-align: center;
border-radius: 6px;
vertical-align: middle;
padding: 10px;
}
/* Focus */
.phraseButton:focus {
background: var(--base-bg);
}
/* Active */
.phraseButton:active {
background: var(--base-active-bg);
}
@media screen and (max-height: 539px) and (min-height: 341px) {
#suggestions {
height: auto;
width: 100vw;
}
/*The Li*/
/* The Li */
#phrase {
/*Always stack and center horizontally*/
/* Always stack and center horizontally */
display: table-cell;
width: auto;
text-align: center;
justify-content: space-between;
@ -110,9 +110,8 @@
}
@media screen and (max-height: 340px) {
/* Hide */
#suggestionsContainer.phrasesContainer {
opacity: 0;
}
}

3
css/centeredbox/centered-box-overlay.css
View File

@ -12,7 +12,8 @@
margin: 0;
padding: 0;
z-index: -1;
transition: opacity var(--transition-speed),
transition:
opacity var(--transition-speed),
z-index var(--transition-speed),
backdrop-filter var(--transition-speed);
}

13
css/centeredbox/centered-box.css
View File

@ -1,12 +1,12 @@
.centeredBar {
width: 100%;
height: auto;
height: auto;
border: none;
pointer-events: none;
border: none;
pointer-events: none;
position: absolute;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
@ -16,8 +16,9 @@
#centeredBox {
opacity: 1;
z-index: 2;
transition: opacity var(--transition-speed),
z-index var(--transition-speed);
transition:
opacity var(--transition-speed),
z-index var(--transition-speed);
}
.centeredBar#centeredBox.hiddenBox {

17
css/centeredbox/profile-image.css
View File

@ -7,9 +7,9 @@
border-radius: 50%;
pointer-events: initial;
margin: 0 auto;
margin-bottom: 110px;
position: relative;
margin: 0 auto;
margin-bottom: 110px;
position: relative;
flex-flow: column wrap;
display: flex;
@ -18,7 +18,7 @@
}
#profileImage {
background-image: url('../../assets/user.png') ;
background-image: url('../../assets/user.png');
height: 128px;
width: 128px;
border-radius: 50%;
@ -37,6 +37,11 @@
}
@keyframes rotate {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

8
css/centeredbox/search-box.css
View File

@ -8,7 +8,8 @@
pointer-events: none;
transition: opacity var(--transition-speed),
transition:
opacity var(--transition-speed),
top var(--transition-speed),
pointer-events var(--transition-speed);
}
@ -22,7 +23,7 @@
margin-bottom: 10px;
/*Center horizontally*/
/* Center horizontally */
position: relative;
left: 50%;
transform: translateX(-50%);
@ -54,7 +55,7 @@
@media screen and (max-width: 470px) {
#searchBox {
width: 50vw;
width: 50vw;
}
#searchBoxContainer.showSearchBox {
@ -63,4 +64,3 @@
pointer-events: initial;
}
}

15
css/dashboard/dashboard.css
View File

@ -2,7 +2,7 @@
background: var(--panel-bg);
height: 100%;
z-index: 7;
/*border-radius: var(--rounded-radius);*/
/* border-radius: var(--rounded-radius); */
backdrop-filter: blur(var(--blur-strength));
-webkit-touch-callout: none;
@ -16,7 +16,7 @@
.rightDashboardBody {
margin: 10px;
height: auto;
width: 330px;
width: 330px;
}
#rightDashboard {
@ -31,19 +31,19 @@
transition: width var(--transition-speed);
}
/*Hide scrollbar*/
/* Hide scrollbar */
#rightDashboard::-webkit-scrollbar {
display: none;
display: none;
}
/*Show dashboard*/
/* Show dashboard */
.dashboard#rightDashboard.showRightDashboard {
width: 350px;
z-index: 7;
scrollbar-width: none;
}
/*Overlay*/
/* Overlay */
.dashboardOverlay {
position: absolute;
visibility: hidden;
@ -58,7 +58,8 @@
z-index: -2;
filter: blur(var(--blur-strength)) brightness(70%);
transition: visibility var(--transition-speed),
transition:
visibility var(--transition-speed),
z-index var(--transition-speed);
}

2
css/dashboard/greeter-date-message.css
View File

@ -12,6 +12,6 @@
.dashboardMessage#dateMessage {
font-size: 12pt;
font-family: roboto, sans-serif;
font-family: roboto, sans-serif;
font-weight: 400;
}

4
css/dashboard/search-engine-settings.css
View File

@ -3,7 +3,7 @@
font-weight: 400;
width: 100%;
height: auto;
position: relative;;
position: relative;
border-radius: 6px;
color: var(--base-color);
background: var(--base-container);
@ -94,7 +94,7 @@ select::-ms-expand {
cursor: pointer;
border: none;
/*Center vertically*/
/* Center vertically */
display: flex;
justify-content: center;
align-items: center;

7
css/dashboard/theme-engine.css
View File

@ -1,9 +1,10 @@
.themeEngine {
font-family: roboto, sans-serif;
font-weight: 400;
width: 100%;
height: auto;
position: relative;;
position: relative;
border-radius: 6px;
color: var(--base-color);
background: var(--base-container);
@ -48,7 +49,7 @@
cursor: pointer;
border: none;
/*Center vertically*/
/* Center vertically */
display: flex;
justify-content: center;
align-items: center;
@ -85,7 +86,7 @@
.foregroundColorSetter,
.blurSetter,
.animSpeedSetter {
/*Align div inside horizontally*/
/* Align div inside horizontally */
display: flex;
flex-direction: row;
justify-content: left;

19
css/dashboard/weather-settings.css
View File

@ -3,7 +3,7 @@
font-weight: 400;
width: 100%;
height: auto;
position: relative;;
position: relative;
border-radius: 6px;
color: var(--base-color);
background: var(--base-container);
@ -28,7 +28,7 @@
background-image: url('../../assets/ui-icons/weather.svg');
}
/*Main settings*/
/* Main settings */
.weatherSettingsGroups {
height: auto;
width: 100%;
@ -48,7 +48,8 @@
height: 0;
opacity: 0;
pointer-events: none;
transition: height var(--transition-speed),
transition:
height var(--transition-speed),
opacity var(--transition-speed);
}
@ -67,7 +68,7 @@
font-weight: 400;
color: var(--base-color);
/*Center vertically*/
/* Center vertically */
display: flex;
justify-content: center;
align-items: center;
@ -123,23 +124,25 @@
margin-right: 2.5px;
}
#weatherSettingsApply:hover, #weatherSettingsReset:hover {
#weatherSettingsApply:hover,
#weatherSettingsReset:hover {
outline: none;
cursor: pointer;
background: var(--base-hover-bg);
}
#weatherSettingsApply:active, #weatherSettingsReset:active {
#weatherSettingsApply:active,
#weatherSettingsReset:active {
outline: none;
background: var(--base-active-bg);
}
#weatherSettingsApply:focus, #weatherSettingsReset:focus {
#weatherSettingsApply:focus,
#weatherSettingsReset:focus {
outline: none;
background: var(--base-focus-bg);
}
#weatherSettingsButtons {
display: flex;
flex-direction: row;

4
css/screens/screens.css
View File

@ -10,7 +10,7 @@
overflow: hidden;
backdrop-filter: blur(var(--blur-strength));
/*Disable user touch/select on text elements*/
/* Disable user touch/select on text elements */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
@ -18,7 +18,7 @@
-ms-user-select: none;
user-select: none;
/*Dont increase the geometry by using padding*/
/* Dont increase the geometry by using padding */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

63
css/screens/weather-screen.css
View File

@ -1,17 +1,14 @@
#weatherScreen {
display:flex;
justify-content:center;
align-items:center;
padding-top: 6vh;
padding-bottom: 6vh;
padding-left: 12vw;
padding-right: 12vw;
display: flex;
justify-content: center;
align-items: center;
padding: 6vh 12vw;
transform: scale(0);
opacity: 0;
z-index: 0;
transition: transform var(--transition-speed),
transition:
transform var(--transition-speed),
opacity var(--transition-speed),
z-index var(--transition-speed);
}
@ -24,9 +21,8 @@
#weatherScreenContainer {
overflow: hidden;
position: relative;
/*Align vertically center*/
/* Align vertically center */
margin: 0;
position: absolute;
top: 50%;
@ -89,32 +85,29 @@
}
#sunriseHourDataIcon {
background: url("../../assets/weather-icons/sunrise.svg");
background-image: url("../../assets/weather-icons/sunrise.svg");
background-size: cover;
}
#sunsetHourDataIcon {
background: url("../../assets/weather-icons/sunset.svg");
background-image: url("../../assets/weather-icons/sunset.svg");
background-size: cover;
margin-left: 5px
margin-left: 5px;
}
#updateHourDataIcon {
background: url("../../assets/weather-icons/refresh.svg");
background-image: url("../../assets/weather-icons/refresh.svg");
background-size: cover;
margin-left: 5px
margin-left: 5px;
}
.weatherForecast {
display: flex;
flex-direction: row;
justify-content: center;
}
/*Forecast Container*/
/* Forecast Container */
.weatherForecastDay {
text-align: center;
margin-top: 20px;
@ -124,14 +117,14 @@
margin-left: 10px;
}
/*Add fixed geometry to weatherForecastDay children*/
/* Add fixed geometry to weatherForecastDay children */
.weatherForecastDay > div {
width: 100px;
height: 60px;
}
.weatherForecastDayIconContainer {
clear:both;
clear: both;
}
.weatherForecastDayIcon {
@ -146,10 +139,9 @@
transform: translateX(-50%);
}
/*Center*/
/* Center */
.weatherForecastDayDetails {
clear:both;
clear: both;
}
.weatherForecastDayDetailsTemperature,
@ -167,17 +159,14 @@
font-size: 14pt;
}
/*Right side*/
/* Right side */
.weatherForecastDayDate {
clear:both;
clear: both;
}
@media screen and (max-width: 470px) {
#weatherScreen {
padding-top: 6vh;
padding-bottom: 0vh;
padding-left: 18vw;
padding-right: 18vw;
padding: 6vh 18vw 0 18vw;
}
}
@ -188,24 +177,23 @@
}
@media screen and (max-width: 470px) {
.weatherForecast {
display: inline-block;
flex-direction: row;
justify-content: center;
}
/*Forecast Container*/
/* Forecast Container */
.weatherForecastDay {
text-align: center;
margin-top: 20px;
float: none;
clear: none;
margin-left : 0px;
margin-left: 0;
}
/*Add fixed geometry to weatherForecastDay children*/
/* Add fixed geometry to weatherForecastDay children */
.weatherForecastDay > div {
width: 75px;
height: 50px;
@ -221,17 +209,16 @@
font-size: 12pt;
}
/*Center*/
/* Center */
.weatherForecastDayDetails {
display: inline-block;
margin: 0 auto;
clear: none;
}
/*Right side*/
/* Right side */
.weatherForecastDayDate {
float: right;
clear: none;
}
}

52
css/screens/web-menu.css
View File

@ -1,29 +1,22 @@
#webMenuScreen {
z-index: 0;
padding: 40px 12vw 6vh 12vw;
padding-top: 40px;
padding-bottom: 6vh;
padding-left: 12vw;
padding-right: 12vw;
/*Transitions*/
opacity: 0;
transform: scale(0);
transition: transform var(--transition-speed),
transition:
transform var(--transition-speed),
opacity var(--transition-speed),
z-index var(--transition-speed);
}
@media screen and (max-width: 470px) {
#webMenuScreen {
padding-top: 6vh;
padding-bottom: 0vh;
padding-left: 18vw;
padding-right: 18vw;
padding: 6vh 18vw 0 18vw;
}
}
/*Show web menu*/
/* Show web menu */
.screen#webMenuScreen.showWebMenu {
transform: scale(1);
opacity: 1;
@ -67,7 +60,7 @@
}
#webMenuSearchBoxContainer {
/*Center horizontally*/
/* Center horizontally */
position: relative;
display: flex;
flex-flow: column wrap;
@ -76,9 +69,9 @@
margin-bottom: 20px;
}
/*Web menu list*/
/* Web menu list */
/*UL*/
/* UL */
#webMenuList {
list-style-type: none;
padding: 0;
@ -89,9 +82,9 @@
background: transparent;
}
/*List*/
/* List */
#webMenuList li {
/*Align list horizontally*/
/* Align list horizontally */
display: inline-block;
}
@ -107,7 +100,7 @@
transition: transform var(--transition-speed);
}
/*Child of li*/
/* Child of li */
.webItem {
background: transparent;
width: 128px;
@ -143,15 +136,15 @@
background: var(--base-active-bg);
}
/*Contains web icon and label*/
/* Contains web icon and label */
.webItemContainer {
/*Align vertically*/
margin:0 auto;
/* Align vertically */
margin: 0 auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
/*Align horizontally*/
/* Align horizontally */
display: flex;
flex-direction: row;
justify-content: center;
@ -159,7 +152,7 @@
padding: 5px;
}
/*Web icon container*/
/* Web icon container */
.webItemIconContainer {
position: relative;
display: flex;
@ -171,9 +164,10 @@
height: 64px;
width: 64px;
margin-bottom: 0;
background-size: cover;
}
/*Web label/name*/
/* Web label/name */
.webItemName {
text-align: center;
font-size: 11pt;
@ -181,7 +175,6 @@
font-weight: 400;
word-wrap: break-word;
color: var(--base-color);
}
#webMenuListContainer {
@ -191,9 +184,9 @@
max-height: 70vh;
overflow-y: auto;
/*Fade transparency*/
/*-webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);*/
/*mask-image: linear-gradient(to bottom, black 85%, transparent 100%);*/
/* Fade transparency */
/* -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%); */
/* mask-image: linear-gradient(to bottom, black 85%, transparent 100%); */
}
/*Stretch list item if screen width < 470px*/
@ -224,7 +217,7 @@
}
#webMenuListContainer::-webkit-scrollbar {
display: none;
display: none;
}
}
@ -241,6 +234,5 @@
/*Disable dragging*/
user-select: none;
user-drag: none;
-webkit-user-drag: none;
}

10
css/style.css
View File

@ -1,29 +1,29 @@
/*Load all CSS*/
/* Load all CSS */
@import url('base/normalize.css');
@import url('base/font-face.css');
@import url('base/base.css');
@import url('base/dummy-body-background.css');
/*Bars and Panels*/
/* Bars and Panels */
@import url('bars/bar.css');
@import url('bars/top-panel.css');
@import url('bars/clock.css');
@import url('bars/dock.css');
@import url('bars/dock-buttons.css');
/*Centered box and Contents*/
/* Centered box and Contents */
@import url('centeredbox/centered-box.css');
@import url('centeredbox/centered-box-overlay.css');
@import url('centeredbox/profile-image.css');
@import url('centeredbox/search-box.css');
@import url('centeredbox/auto-suggestion.css');
/*Screens*/
/* Screens */
@import url('screens/screens.css');
@import url('screens/weather-screen.css');
@import url('screens/web-menu.css');
/*Dashboard and Settings*/
/* Dashboard and Settings */
@import url('dashboard/dashboard.css');
@import url('dashboard/greeter-date-message.css');
@import url('dashboard/search-engine-settings.css');

22
js/auto-suggestion.js
View File

@ -40,31 +40,31 @@ class AutoSuggestion {
const phraseButtons = Array.prototype.slice.call(document.querySelectorAll('button'));
const phraseIndex = (phraseButtons.indexOf(document.activeElement) + 1) % phraseButtons.length;
const phraseButton = phraseButtons[phraseIndex];
phraseButton.focus();
const phraseButton = phraseButtons[parseInt(phraseIndex, 10)];
phraseButton.focus();
} else if ((e.key === 'ArrowUp') || e.key === 'ArrowLeft') {
e.preventDefault();
const phraseButtons = Array.prototype.slice.call(document.querySelectorAll('button'));
const phraseIndex = (phraseButtons.indexOf(document.activeElement) - 1) % phraseButtons.length;
let phraseIndex = (phraseButtons.indexOf(document.activeElement) - 1) % phraseButtons.length;
if (phraseIndex < 0) {
phraseIndex = phraseButtons.length - 1;
};
}
const phraseButton = phraseButtons[phraseIndex];
phraseButton.focus();
const phraseButton = phraseButtons[parseInt(phraseIndex, 10)];
phraseButton.focus();
}
}
};
// Onmouseup event
button.onmouseup = e => {
this._searchBox.value = button.innerText;
this._searchBox.focus();
}
};
}
// Generate and parse suggestions
@ -105,12 +105,12 @@ class AutoSuggestion {
_fetchSuggestion = () => {
const endpoint = 'https://duckduckgo.com/ac/';
const callback = 'autocompleteCallback'
const callback = 'autocompleteCallback';
const searchQuery = String(this._searchBox.value);
window[callback] = res => {
window[String(callback)] = res => {
// Passed the suggestion object to process it
this._autocompleteCallback(res);
}
};
// Fetch from duckduckgo
const script = document.createElement('script');

4
js/background-set.js
View File

@ -46,8 +46,8 @@ class DummyBodyBackground {
},
3000
)
}
);
};
// Add a delay when to fetch the hq background
setTimeout (

48
js/centered-box.js
View File

@ -1,34 +1,34 @@
class CenteredBox {
constructor() {
this._centeredBox = document.querySelector('#centeredBox');
constructor() {
this._centeredBox = document.querySelector('#centeredBox');
this._centeredBoxVisibility = true;
this._centeredBoxVisibility = true;
this.showCenteredBox = this.showCenteredBox.bind(this);
this.hideCenteredBox = this.hideCenteredBox.bind(this);
this.toggleCenteredBox = this.toggleCenteredBox.bind(this);
}
this.showCenteredBox = this.showCenteredBox.bind(this);
this.hideCenteredBox = this.hideCenteredBox.bind(this);
this.toggleCenteredBox = this.toggleCenteredBox.bind(this);
}
showCenteredBox = () => {
this._centeredBox.classList.remove('hiddenBox');
this._centeredBoxVisibility = !this._centeredBoxVisibility;
}
showCenteredBox = () => {
this._centeredBox.classList.remove('hiddenBox');
this._centeredBoxVisibility = !this._centeredBoxVisibility;
}
hideCenteredBox = () => {
this._centeredBox.classList.add('hiddenBox');
this._centeredBoxVisibility = !this._centeredBoxVisibility;
}
hideCenteredBox = () => {
this._centeredBox.classList.add('hiddenBox');
this._centeredBoxVisibility = !this._centeredBoxVisibility;
}
toggleCenteredBox = () => {
toggleCenteredBox = () => {
if (this._centeredBoxVisibility) {
// hide centered box
this.hideCenteredBox();
if (this._centeredBoxVisibility) {
// hide centered box
this.hideCenteredBox();
} else {
// Show centered box
this.showCenteredBox();
}
}
} else {
// Show centered box
this.showCenteredBox();
}
}
}

2
js/config.js
View File

@ -29,7 +29,7 @@ class Config {
name: 'Bing',
prefix: 'https://www.bing.com/search?q='
}
}
};
return searchEngines;
}

164
js/dashboard.js
View File

@ -1,119 +1,119 @@
class Dashboard {
constructor() {
this._dashboard = document.querySelector('#rightDashboard');
this._dashboardOverlay = document.querySelector('#dashboardOverlay');
constructor() {
this._dashboard = document.querySelector('#rightDashboard');
this._dashboardOverlay = document.querySelector('#dashboardOverlay');
this._rightDashboardVisibility = false;
this._rightDashboardVisibility = false;
this._dashboardOverlayMouseUpEvent = this._dashboardOverlayMouseUpEvent.bind(this);
this._dashboardOverlayMouseUpEvent = this._dashboardOverlayMouseUpEvent.bind(this);
this._centeredBox = document.querySelector('#centeredBox');
this._webMenu = document.querySelector('#webMenuScreen');
this._searchBoxContainer = document.querySelector('#searchBoxContainer');
this._weatherScreen = document.querySelector('#weatherScreen');
this._centeredBox = document.querySelector('#centeredBox');
this._webMenu = document.querySelector('#webMenuScreen');
this._searchBoxContainer = document.querySelector('#searchBoxContainer');
this._weatherScreen = document.querySelector('#weatherScreen');
this._init();
}
this._init();
}
_init = () => {
this._registerOverlayMouseUpEvent();
this._disableDashboardInputs(true);
}
_init = () => {
this._registerOverlayMouseUpEvent();
this._disableDashboardInputs(true);
}
_disableDashboardInputs = status => {
const elems = this._dashboard.getElementsByTagName('input');
const len = elems.length;
_disableDashboardInputs = status => {
const elems = this._dashboard.getElementsByTagName('input');
const len = elems.length;
for (let i = 0; i < len; i++) {
elems[i].disabled = status;
}
}
for (let i = 0; i < len; i++) {
elems[parseInt(i, 10)].disabled = status;
}
}
getRightDashboardVisibility = () => {
return this._rightDashboardVisibility;
}
getRightDashboardVisibility = () => {
return this._rightDashboardVisibility;
}
showDashboard = () => {
this._dashboard.classList.add('showRightDashboard');
showDashboard = () => {
this._dashboard.classList.add('showRightDashboard');
// Show overlay
this._dashboardOverlay.classList.add('showDashboardOverlay');
// Show overlay
this._dashboardOverlay.classList.add('showDashboardOverlay');
// Enable Inputs
this._disableDashboardInputs(false);
// Enable Inputs
this._disableDashboardInputs(false);
this._rightDashboardVisibility = !this._rightDashboardVisibility;
}
this._rightDashboardVisibility = !this._rightDashboardVisibility;
}
hideDashboard = () => {
this._dashboard.classList.remove('showRightDashboard');
this._dashboard.scrollTop = 0;
hideDashboard = () => {
this._dashboard.classList.remove('showRightDashboard');
this._dashboard.scrollTop = 0;
// Disable Inputs
this._disableDashboardInputs(true);
// Disable Inputs
this._disableDashboardInputs(true);
// Hide overlay
this._dashboardOverlay.classList.remove('showDashboardOverlay');
// Hide overlay
this._dashboardOverlay.classList.remove('showDashboardOverlay');
this._rightDashboardVisibility = !this._rightDashboardVisibility;
}
this._rightDashboardVisibility = !this._rightDashboardVisibility;
}
toggleDashboard = () => {
toggleDashboard = () => {
console.log('toggle dashboard');
// console.log('toggle dashboard');
if (this._rightDashboardVisibility) {
if (this._rightDashboardVisibility) {
// Hide dashboard
this.hideDashboard();
// Hide dashboard
this.hideDashboard();
} else {
} else {
// Show dashboard
this.showDashboard();
// Show dashboard
this.showDashboard();
// If centered box is hidden, open it
if (this._centeredBox.classList.contains('hiddenBox')) {
// If centered box is hidden, open it
if (this._centeredBox.classList.contains('hiddenBox')) {
console.log('centered box is hidden, reopening...');
// console.log('centered box is hidden, reopening...');
// Rotate profile container
profileImage.rotateProfile();
// Rotate profile container
profileImage.rotateProfile();
// Toggle center box
centeredBox.toggleCenteredBox();
}
}
// Toggle center box
centeredBox.toggleCenteredBox();
}
}
// Check if any of these are open, if yes, close it
if (this._searchBoxContainer.classList.contains('showSearchBox')) {
console.log('searchbox is open, closing...');
searchBoxShow.hideSearchBox();
// Check if any of these are open, if yes, close it
if (this._searchBoxContainer.classList.contains('showSearchBox')) {
// console.log('searchbox is open, closing...');
searchBoxShow.hideSearchBox();
} else if (this._webMenu.classList.contains('showWebMenu')) {
console.log('web menu is open, closing...');
webMenu.hideWebMenu();
return;
} else if (this._webMenu.classList.contains('showWebMenu')) {
// console.log('web menu is open, closing...');
webMenu.hideWebMenu();
return;
} else if (this._weatherScreen.classList.contains('showWeatherScreen')) {
console.log('weather screen is open, closing...');
weatherScreen.hideWeatherScreen();
return;
} else if (this._weatherScreen.classList.contains('showWeatherScreen')) {
// console.log('weather screen is open, closing...');
weatherScreen.hideWeatherScreen();
return;
}
}
}
}
_dashboardOverlayMouseUpEvent = e => {
if (this._rightDashboardVisibility) {
this.toggleDashboard();
}
console.log('dashboard overlay clicked...');
}
_dashboardOverlayMouseUpEvent = e => {
if (this._rightDashboardVisibility) {
this.toggleDashboard();
}
// console.log('dashboard overlay clicked...');
}
_registerOverlayMouseUpEvent = () => {
this._dashboardOverlay.addEventListener('mouseup', this._dashboardOverlayMouseUpEvent);
}
_registerOverlayMouseUpEvent = () => {
this._dashboardOverlay.addEventListener('mouseup', this._dashboardOverlayMouseUpEvent);
}
}

186
js/dock-buttons.js
View File

@ -1,124 +1,124 @@
class DockButtons {
constructor() {
this._dock = document.querySelector('#dock');
constructor() {
this._dock = document.querySelector('#dock');
// Retrieve dockSites object from Config instance
this.dockSites = config.getDockSites();
// Retrieve dockSites object from Config instance
this.dockSites = config.getDockSites();
// Populate dock
this._populateDock();
}
// Populate dock
this._populateDock();
}
_buildDockButton = (id, className, callback = null) => {
_buildDockButton = (id, className, callback = null) => {
const dockButton = document.createElement('div');
dockButton.id = `button${id}`;
dockButton.className = 'dockButton';
dockButton.onmouseup = callback;
const dockButton = document.createElement('div');
dockButton.id = `button${id}`;
dockButton.className = 'dockButton';
dockButton.onmouseup = callback;
return dockButton;
}
return dockButton;
}
_buildDockButtonImage = (id, className, background) => {
_buildDockButtonImage = (id, className, background) => {
const buttonImage = document.createElement('div');
buttonImage.id = id;
buttonImage.className = className;
buttonImage.style.backgroundImage = background;
const buttonImage = document.createElement('div');
buttonImage.id = id;
buttonImage.className = className;
buttonImage.style.backgroundImage = background;
return buttonImage;
}
return buttonImage;
}
_generateFromManual = (id, icon, callback) => {
_generateFromManual = (id, icon, callback) => {
const dockButton = this._buildDockButton(
`button${id}`,
'dockButton',
callback
);
const dockButton = this._buildDockButton(
`button${id}`,
'dockButton',
callback
);
const buttonImage = this._buildDockButtonImage(
`buttonImage${id}`,
'dockButtonImage',
`url('assets/buttons/${icon}.svg')`
);
const buttonImage = this._buildDockButtonImage(
`buttonImage${id}`,
'dockButtonImage',
`url('assets/buttons/${icon}.svg')`
);
dockButton.appendChild(buttonImage);
dockButton.appendChild(buttonImage);
this._dock.appendChild(dockButton);
}
this._dock.appendChild(dockButton);
}
_generateFromList = () => {
_generateFromList = () => {
for (let i = 0; i < (this.dockSites.length); i++) {
for (let i = 0; i < (this.dockSites.length); i++) {
const site = this.dockSites[i].site;
const icon = this.dockSites[i].icon;
const url = this.dockSites[i].url;
const site = this.dockSites[parseInt(i, 10)].site;
const icon = this.dockSites[parseInt(i, 10)].icon;
const url = this.dockSites[parseInt(i, 10)].url;
// Create a href
const aDock = document.createElement('a');
aDock.className = 'dockLink';
aDock.href = url;
aDock.tabIndex = '-1';
// Create a href
const aDock = document.createElement('a');
aDock.className = 'dockLink';
aDock.href = url;
aDock.tabIndex = '-1';
// Create div container
const dockButton = this._buildDockButton(
site,
'dockButton'
);
// Create div container
const dockButton = this._buildDockButton(
site,
'dockButton'
);
// Create div container for button icon
const buttonImage = this._buildDockButtonImage(
`buttonImage${i}`,
'dockButtonImage',
`url('assets/webcons/${icon}.svg')`
);
// Create div container for button icon
const buttonImage = this._buildDockButtonImage(
`buttonImage${i}`,
'dockButtonImage',
`url('assets/webcons/${icon}.svg')`
);
// Append divs
dockButton.appendChild(buttonImage);
aDock.appendChild(dockButton);
// Append divs
dockButton.appendChild(buttonImage);
aDock.appendChild(dockButton);
this._dock.appendChild(aDock);
};
}
this._dock.appendChild(aDock);
}
}
_populateDock = () => {
_populateDock = () => {
// Create launcher button
this._generateFromManual(
'Launch',
'launch',
() => {
// Toggle web menu
webMenu.toggleWebMenu();
}
);
// Create launcher button
this._generateFromManual(
'Launch',
'launch',
() => {
// Toggle web menu
webMenu.toggleWebMenu();
}
);
// Create dock buttons fetched from sites-list.js
this._generateFromList();
// Create dock buttons fetched from sites-list.js
this._generateFromList();
// Create weather button
this._generateFromManual(
'Weather',
'weather',
() => {
// Toggle weather screen
weatherScreen.toggleWeatherScreen();
}
);
// Create weather button
this._generateFromManual(
'Weather',
'weather',
() => {
// Toggle weather screen
weatherScreen.toggleWeatherScreen();
}
);
// Create menu button
this._generateFromManual(
'Dashboard',
'dashboard',
() => {
// Toggle dashboard
dashboard.toggleDashboard();
}
);
// Create menu button
this._generateFromManual(
'Dashboard',
'dashboard',
() => {
// Toggle dashboard
dashboard.toggleDashboard();
}
);
}
}
}

4
js/greeter-date-message.js
View File

@ -53,8 +53,8 @@ class GreeterDateMessage {
greeterSuffix = 'Evening';
}
this._greeterMessage.innerHTML = `Good<br>${greeterSuffix}!`;
this._dateMessage.innerHTML = `Today's the ${this._getDayOrdinal(date.getDate())} of ` +
this._greeterMessage.innerText = `Good\n${greeterSuffix}!`;
this._dateMessage.innerText = `Today's the ${this._getDayOrdinal(date.getDate())} of ` +
`${this._monthsArr[date.getMonth()]}, and it's ${this._daysArr[date.getDay()]}.`;
}

148
js/keybindings.js
View File

@ -1,113 +1,113 @@
class KeyBinding {
constructor() {
constructor() {
this._searchBox = document.querySelector('#searchBox');
this._searchBox = document.querySelector('#searchBox');
this._keysPressed = {};
this._keysPressed = {};
this._documentAddKeyDownEvent = this._documentAddKeyDownEvent.bind(this);
this._documentAddKeyUpEvent = this._documentAddKeyUpEvent.bind(this);
this._documentAddKeyDownEvent = this._documentAddKeyDownEvent.bind(this);
this._documentAddKeyUpEvent = this._documentAddKeyUpEvent.bind(this);
this._init();
}
this._init();
}
_init = () => {
this._registerDocumentAddKeyDownEvent();
this._registerDocumentAddKeyUpEvent();
}
_init = () => {
this._registerDocumentAddKeyDownEvent();
this._registerDocumentAddKeyUpEvent();
}
_documentAddKeyDownEvent = e => {
_documentAddKeyDownEvent = e => {
const searchBoxVisibility = searchBoxShow.getSearchBoxVisibility();
const searchBoxVisibility = searchBoxShow.getSearchBoxVisibility();
this._keysPressed[e.key] = true;
this._keysPressed[e.key] = true;
if (this._keysPressed['Alt'] && e.key === 's') {
if (this._keysPressed['Alt'] && e.key === 's') {
e.preventDefault();
dashboard.toggleDashboard();
return;
e.preventDefault();
dashboard.toggleDashboard();
return;
} else if (this._keysPressed['Alt'] && e.key === 'e') {
} else if (this._keysPressed['Alt'] && e.key === 'e') {
e.preventDefault();
webMenu.toggleWebMenu();
return;
e.preventDefault();
webMenu.toggleWebMenu();
return;
} else if (this._keysPressed['Alt'] && e.key === 'x') {
} else if (this._keysPressed['Alt'] && e.key === 'x') {
e.preventDefault();
weatherScreen.toggleWeatherScreen();
return;
e.preventDefault();
weatherScreen.toggleWeatherScreen();
return;
}
}
if (e.key === 'Escape') {
if (e.key === 'Escape') {
e.preventDefault();
e.preventDefault();
// If any of this are open, close it
if (searchBoxVisibility) {
// If any of this are open, close it
if (searchBoxVisibility) {
// Hide searchbox
searchBoxShow.toggleSearchBox();
this._searchBox.value = '';
return;
// Hide searchbox
searchBoxShow.toggleSearchBox();
this._searchBox.value = '';
return;
} else if (dashboard.getRightDashboardVisibility()) {
} else if (dashboard.getRightDashboardVisibility()) {
// Hide dashboard
dashboard.toggleDashboard();
return;
// Hide dashboard
dashboard.toggleDashboard();
return;
} else if (weatherScreen.getWeatherScreenVisiblity()) {
} else if (weatherScreen.getWeatherScreenVisiblity()) {
// Hide weather
weatherScreen.toggleWeatherScreen();
return;
// Hide weather
weatherScreen.toggleWeatherScreen();
return;
}
}
// Show web menu
webMenu.toggleWebMenu();
return;
}
// Show web menu
webMenu.toggleWebMenu();
return;
}
if (!searchBoxVisibility) {
if (!searchBoxVisibility) {
// Don't show searchbox if web menu, dashboard
// and weather screen is open
if (dashboard.getRightDashboardVisibility() ||
webMenu.getwebMenuVisibility() ||
weatherScreen.getWeatherScreenVisiblity()) return;
// Don't show searchbox if web menu, dashboard
// and weather screen is open
if (dashboard.getRightDashboardVisibility() ||
webMenu.getwebMenuVisibility() ||
weatherScreen.getWeatherScreenVisiblity()) return;
// Only accept single charactered key and backspace to open search box
if ((e.key.length > 1) && (e.key !== 'Backspace')) return;
// Only accept single charactered key and backspace to open search box
if ((e.key.length > 1) && (e.key !== 'Backspace')) return;
// Open searchbox
searchBoxShow.toggleSearchBox();
// Open searchbox
searchBoxShow.toggleSearchBox();
} else {
} else {
// Backspacing while there's no search query will hide searhbox
// Will also hide if you hit enter
if ((e.key === 'Backspace' || e.key === 'Enter') &&
this._searchBox.value < 1) { searchBoxShow.toggleSearchBox(); return; };
}
// Backspacing while there's no search query will hide searhbox
// Will also hide if you hit enter
if ((e.key === 'Backspace' || e.key === 'Enter') &&
this._searchBox.value < 1) { searchBoxShow.toggleSearchBox(); return; }
}
}
}
_documentAddKeyUpEvent = e => {
delete this._keysPressed[e.key];
}
_documentAddKeyUpEvent = e => {
delete this._keysPressed[e.key];
}
_registerDocumentAddKeyDownEvent = () => {
document.addEventListener('keydown', this._documentAddKeyDownEvent);
}
_registerDocumentAddKeyDownEvent = () => {
document.addEventListener('keydown', this._documentAddKeyDownEvent);
}
_registerDocumentAddKeyUpEvent = () => {
document.addEventListener('keyup', this._documentAddKeyUpEvent);
}
_registerDocumentAddKeyUpEvent = () => {
document.addEventListener('keyup', this._documentAddKeyUpEvent);
}
}

70
js/mobile-swipe-event.js
View File

@ -14,55 +14,55 @@ class SwipeEventManager {
el.addEventListener(
'touchstart',
(event) => {
event => {
// event.preventDefault();
this._xDown = event.touches[0].clientX;
this._yDown = event.touches[0].clientY;
this._yDown = event.touches[0].clientY;
},
{ passive: true }
);
el.addEventListener(
'touchmove',
(event) => {
event => {
// event.preventDefault();
if ( ! this._xDown || ! this._yDown ) {
return;
}
if ( ! this._xDown || ! this._yDown ) {
return;
}
const xUp = event.touches[0].clientX;
const yUp = event.touches[0].clientY;
const xDiff = this._xDown - xUp;
const yDiff = this._yDown - yUp;
const xUp = event.touches[0].clientX;
const yUp = event.touches[0].clientY;
const xDiff = this._xDown - xUp;
const yDiff = this._yDown - yUp;
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
if ( xDiff > 0 ) {
// Left Swipe
dir = 'left'
} else {
// Right Swipe
dir = 'right';
}
} else {
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
if ( xDiff > 0 ) {
// Left Swipe
dir = 'left';
} else {
// Right Swipe
dir = 'right';
}
} else {
if ( yDiff > 0 ) {
// Up Swipe
dir = 'up';
} else {
// Down Swipe
dir = 'down';
}
}
if ( yDiff > 0 ) {
// Up Swipe
dir = 'up';
} else {
// Down Swipe
dir = 'down';
}
}
/* Reset values */
this._xDown = null;
this._yDown = null;
/* Reset values */
this._xDown = null;
this._yDown = null;
if (dir !== ''){
if (typeof callback === 'function') {
callback(el, dir);
}
}
if (dir !== ''){
if (typeof callback === 'function') {
callback(el, dir);
}
}
},
{ passive: true }

88
js/profile-image.js
View File

@ -1,66 +1,66 @@
class ProfileImage {
constructor() {
this._profileContainer = document.querySelector('#profileImageContainer')
constructor() {
this._profileContainer = document.querySelector('#profileImageContainer');
this._profileAnimRunning = false;
this._profileAnimRunning = false;
// Don't run animation on startup
this._profileContainer.style.webkitAnimationPlayState = 'paused';
// Don't run animation on startup
this._profileContainer.style.webkitAnimationPlayState = 'paused';
this.rotateProfile = this.rotateProfile.bind(this);
this.rotateProfile = this.rotateProfile.bind(this);
this._animationEndEvent = this._animationEndEvent.bind(this);
this._onClickEvent = this._onClickEvent.bind(this);
this._animationEndEvent = this._animationEndEvent.bind(this);
this._onClickEvent = this._onClickEvent.bind(this);
this.getProfileAnimationStatus = this.getProfileAnimationStatus.bind(this);
this.getProfileAnimationStatus = this.getProfileAnimationStatus.bind(this);
this._init();
}
this._init();
}
_init = () => {
this._registerAnimationEndEvent();
this._registerOnClickEvent();
}
_init = () => {
this._registerAnimationEndEvent();
this._registerOnClickEvent();
}
rotateProfile = () => {
event.preventDefault;
rotateProfile = () => {
event.preventDefault;
// Remove anim class
this._profileContainer.classList.remove('rotateProfileAnim');
// Remove anim class
this._profileContainer.classList.remove('rotateProfileAnim');
// Triggering reflow
void this._profileContainer.offsetWidth;
// Triggering reflow
void this._profileContainer.offsetWidth;
// Re-add animation class
this._profileContainer.classList.add('rotateProfileAnim');
// Re-add animation class
this._profileContainer.classList.add('rotateProfileAnim');
// Start rotation animation
this._profileContainer.style.webkitAnimationPlayState = 'running';
this._profileAnimRunning = true;
}
// Start rotation animation
this._profileContainer.style.webkitAnimationPlayState = 'running';
this._profileAnimRunning = true;
}
_animationEndEvent = e => {
this._profileAnimRunning = false;
}
_animationEndEvent = e => {
this._profileAnimRunning = false;
}
// Re-enable animation after death
_registerAnimationEndEvent = () => {
this._profileContainer.addEventListener('animationend', this._animationEndEvent);
}
// Re-enable animation after death
_registerAnimationEndEvent = () => {
this._profileContainer.addEventListener('animationend', this._animationEndEvent);
}
_onClickEvent = e => {
if (this._profileAnimRunning) return;
searchBoxShow.toggleSearchBox();
}
_onClickEvent = e => {
if (this._profileAnimRunning) return;
searchBoxShow.toggleSearchBox();
}
_registerOnClickEvent = () => {
this._profileContainer.onclick = this._onClickEvent;
}
_registerOnClickEvent = () => {
this._profileContainer.onclick = this._onClickEvent;
}
getProfileAnimationStatus = () => {
return this._profileAnimRunning;
}
getProfileAnimationStatus = () => {
return this._profileAnimRunning;
}
}

10
js/search-engine-settings.js
View File

@ -42,7 +42,7 @@ class SearchEngineSettings {
Object.keys(this._searchEngines)
.forEach(key => {
const seValue = key;
const seData = this._searchEngines[key];
const seData = this._searchEngines[String(key)];
const seOption = document.createElement('option');
// Generate search engine suggestions
@ -51,8 +51,8 @@ class SearchEngineSettings {
`
<option value='${seValue}'>${seData.name}</option>
`
)
})
);
});
// Call to update query string and placeholder
this._updateSearchEngineElements();
@ -69,8 +69,8 @@ class SearchEngineSettings {
// Use this to select the current/default search engine on startup
_selectTheEngine = () => {
this._selectSearchEngine.value = this._currentSearchEngine;
this._updateSearchEngineElements();
this._selectSearchEngine.value = this._currentSearchEngine;
this._updateSearchEngineElements();
}
// Execute this on change event of <select>

12
js/search-query-send.js
View File

@ -34,22 +34,22 @@ class SearchQuerySend {
};
_keyUpEvent = event => {
// Cancel the default action, if needed
event.preventDefault();
// Cancel the default action, if needed
event.preventDefault();
if (event.key === 'Tab') return;
// Number 13 is the "Enter" key on the keyboard
if (event.key === 'Enter') {
if (event.key === 'Enter') {
// Don't accept empty strings
if (searchBox.value < 1) {
return;
}
// Search the web
this._sendQuery()
};
// Search the web
this._sendQuery();
}
}
_registerKeyUpEvent = () => {

88
js/show-search-box.js
View File

@ -1,68 +1,68 @@
class SearchBoxShow {
constructor() {
constructor() {
this._searchBox = document.querySelector('#searchBox');
this._searchBoxContainer = document.querySelector('#searchBoxContainer');
this._centeredBoxOverlay = document.querySelector('#centeredBoxOverlay');
this._searchBox = document.querySelector('#searchBox');
this._searchBoxContainer = document.querySelector('#searchBoxContainer');
this._centeredBoxOverlay = document.querySelector('#centeredBoxOverlay');
this._searchBoxVisility = false;
this._searchBoxVisility = false;
this.showSearchBox = this.showSearchBox.bind(this);
this.hideSearchBox = this.hideSearchBox.bind(this);
this.toggleSearchBox = this.toggleSearchBox.bind(this);
}
this.showSearchBox = this.showSearchBox.bind(this);
this.hideSearchBox = this.hideSearchBox.bind(this);
this.toggleSearchBox = this.toggleSearchBox.bind(this);
}
getSearchBoxVisibility = () => {
return this._searchBoxVisility;
}
getSearchBoxVisibility = () => {
return this._searchBoxVisility;
}
showSearchBox = () => {
this._searchBoxContainer.classList.add('showSearchBox');
showSearchBox = () => {
this._searchBoxContainer.classList.add('showSearchBox');
// Focus
this._searchBox.focus();
// Focus
this._searchBox.focus();
this._searchBoxVisility = !this._searchBoxVisility;
this._searchBoxVisility = !this._searchBoxVisility;
// Toggle overlay
this._centeredBoxOverlay.classList.toggle('showOverlay');
}
// Toggle overlay
this._centeredBoxOverlay.classList.toggle('showOverlay');
}
hideSearchBox = () => {
this._searchBoxContainer.classList.remove('showSearchBox');
hideSearchBox = () => {
this._searchBoxContainer.classList.remove('showSearchBox');
// Toggle overlay
this._centeredBoxOverlay.classList.toggle('showOverlay');
// Toggle overlay
this._centeredBoxOverlay.classList.toggle('showOverlay');
this._searchBox.value = '';
this._searchBox.value = '';
// Hide suggestions
autoSuggestion.hideSuggestions();
// Hide suggestions
autoSuggestion.hideSuggestions();
this._searchBoxVisility = !this._searchBoxVisility;
}
this._searchBoxVisility = !this._searchBoxVisility;
}
toggleSearchBox = () => {
toggleSearchBox = () => {
// If profile anim is still running,
// Return to avoid spam
if (profileImage.getProfileAnimationStatus()) return;
// If profile anim is still running,
// Return to avoid spam
if (profileImage.getProfileAnimationStatus()) return;
// Rotate profile
profileImage.rotateProfile();
// Rotate profile
profileImage.rotateProfile();
if (this._searchBoxVisility) {
// Hide search box
this.hideSearchBox();
if (this._searchBoxVisility) {
// Hide search box
this.hideSearchBox();
} else {
// Show search box
this.showSearchBox();
}
} else {
// Show search box
this.showSearchBox();
}
console.log('toggle searchbox');
}
// console.log('toggle searchbox');
}
}

7
js/theme-engine.js
View File

@ -53,13 +53,13 @@ class ThemeEngine {
if (!colorRGBA) {
// If RGB - (#RRGGBB)
if (/^#([0-9A-F]{3}){1,2}$/i.test(colorStr)) {
if (/^#[0-9A-F]{3}$/i.test(colorStr)) {
// Add completely opaque alpha
return colorStr + 'FF';
// If three-charactered HEX color - (#RGB)
} else if (/^#([0-9A-F]{3}){1,2}$/i.test(colorStr)) {
} else if (/^#[0-9A-F]{3}$/i.test(colorStr)) {
// Convert it to RRGGBB
return colorStr.replace(/^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/, '#$1$1$2$2$3$3');
@ -74,6 +74,7 @@ class ThemeEngine {
} else {
alert('Invalid color');
return false;
}
}
@ -158,7 +159,7 @@ class ThemeEngine {
foregroundOpacity,
blurStrength,
animSpeed
)
);
}
_updateCSSconstiables = () => {

92
js/weather-screen.js
View File

@ -42,7 +42,7 @@ class WeatherScreen {
}
_getWeatherIcon = code => {
const icon_tbl = {
const iconTbl = {
'01d': 'sun_icon.svg',
'01n': 'moon_icon.svg',
'02d': 'dfew_clouds.svg',
@ -63,7 +63,7 @@ class WeatherScreen {
'50n': 'nmist.svg'
};
return icon_tbl[code];
return iconTbl[String(code)];
}
_updateWeatherDockButton = icon => {
@ -73,15 +73,15 @@ class WeatherScreen {
_setWeatherValue = (loc, desc, icon, sunr, suns, updt) => {
this._weatherLocation.innerHTML = loc;
this._weatherDescription.innerHTML = desc + this._tempSymbol;
this._weatherLocation.innerText = loc;
this._weatherDescription.innerText = desc + this._tempSymbol;
this._weatherIcon.style.background = `url('assets/weather-icons/${icon}')`;
this._weatherIcon.style.backgroundSize = 'cover';
this._sunriseHour.innerHTML = sunr;
this._sunsetHour.innerHTML = suns;
this._updateHour.innerHTML = updt;
this._sunriseHour.innerText = sunr;
this._sunsetHour.innerText = suns;
this._updateHour.innerText = updt;
// Update weather button on dock
this._updateWeatherDockButton(icon);
@ -90,9 +90,9 @@ class WeatherScreen {
_createForecastBody = (fIcon, forecastTemp, foreDescription, dayName, fHour) => {
// Generate forecast
this._forecastContainer.insertAdjacentHTML(
'beforeend',
`
this._forecastContainer.insertAdjacentHTML(
'beforeend',
`
<div class='weatherForecastDay'>
<div class='weatherForecastDayDate'>
<div class='weatherForecastDayDateName'>${dayName}</div>
@ -107,7 +107,7 @@ class WeatherScreen {
</div>
</div>
`
)
);
}
@ -136,7 +136,7 @@ class WeatherScreen {
const wLoc = cityName + ', ' + countryName;
let wDesc = weatherDescription + ', ' + weatherTemp;
wDesc = wDesc && wDesc[0].toUpperCase() + wDesc.slice(1)
wDesc = wDesc && wDesc[0].toUpperCase() + wDesc.slice(1);
const wIcon = this._getWeatherIcon(weatherIcon);
const rise = this._formatUnixTime(sunRise);
@ -158,7 +158,7 @@ class WeatherScreen {
callback(JSON.parse(request.response));
} else {
this._setErrValue();
};
}
};
request.send();
}
@ -204,17 +204,17 @@ class WeatherScreen {
_processForecastData = data => {
// Empty forecast container to avoid duplication
this._forecastContainer.innerHTML = '';
this._forecastContainer.innerText = '';
const forecast = data.list;
for (let i = 8; i < forecast.length; i+=8) {
const foreIcon = forecast[i].weather[0].icon;
const minimumTemp = forecast[i].main.temp_min;
const maximumTemp = forecast[i].main.temp_max;
const foreDescription = forecast[i].weather[0].description;
const dateTime = forecast[i].dt_txt;
const foreIcon = forecast[parseInt(i, 10)].weather[0].icon;
const minimumTemp = forecast[parseInt(i, 10)].main.temp_min;
const maximumTemp = forecast[parseInt(i, 10)].main.temp_max;
const foreDescription = forecast[parseInt(i, 10)].weather[0].description;
const dateTime = forecast[parseInt(i, 10)].dt_txt;
const fIcon = this._getWeatherIcon(foreIcon);
const minTemp = Math.floor(minimumTemp);
@ -233,51 +233,51 @@ class WeatherScreen {
showWeatherScreen = () => {
this._weatherScreen.classList.add('showWeatherScreen');
this._weatherScreenVisibility = !this._weatherScreenVisibility;
this._weatherScreenVisibility = !this._weatherScreenVisibility;
}
hideWeatherScreen = () => {
this._weatherScreen.classList.remove('showWeatherScreen');
this._weatherScreenVisibility = !this._weatherScreenVisibility;
this._weatherScreenVisibility = !this._weatherScreenVisibility;
}
toggleWeatherScreen = () => {
console.log('toggle weather screen');
// console.log('toggle weather screen');
// If profile anim is still running,
// Return to avoid spam
// If profile anim is still running,
// Return to avoid spam
if (profileImage.getProfileAnimationStatus()) return;
// Rotate profile
profileImage.rotateProfile();
profileImage.rotateProfile();
if (this._weatherScreenVisibility) {
// Hide weather screen
this.hideWeatherScreen();
if (this._weatherScreenVisibility) {
// Hide weather screen
this.hideWeatherScreen();
} else {
// Show weather screen
this.showWeatherScreen();
}
} else {
// Show weather screen
this.showWeatherScreen();
}
// Check if any of these are open, if yes, close it
if (this._webMenu.classList.contains('showWebMenu')) {
console.log('web menu is open, closing...');
webMenu.hideWebMenu();
return;
// Check if any of these are open, if yes, close it
if (this._webMenu.classList.contains('showWebMenu')) {
// console.log('web menu is open, closing...');
webMenu.hideWebMenu();
return;
} else if (this._searchBoxContainer.classList.contains('showSearchBox')) {
console.log('searchbox is open, closing...');
searchBoxShow.hideSearchBox();
} else if (this._searchBoxContainer.classList.contains('showSearchBox')) {
// console.log('searchbox is open, closing...');
searchBoxShow.hideSearchBox();
} else if (this._dashboard.classList.contains('showRightDashboard')) {
console.log('dashboard is open, closing...');
dashboard.hideDashboard();
}
} else if (this._dashboard.classList.contains('showRightDashboard')) {
// console.log('dashboard is open, closing...');
dashboard.hideDashboard();
}
// Toggle center box
centeredBox.toggleCenteredBox();
// Toggle center box
centeredBox.toggleCenteredBox();
}
}

14
js/weather-settings.js
View File

@ -105,7 +105,7 @@ class WeatherSettings {
_deniedGeolocation = () => {
alert(`Location access denied! If you're on mobile, make sure to`+
` enable your GPS and allow the location permission on your browser's settings.`)
` enable your GPS and allow the location permission on your browser's settings.`);
}
@ -116,7 +116,7 @@ class WeatherSettings {
if ((this._origLongitude !== currentCoord.longitude) || (this._origLatitude !== currentCoord.latitude)) {
console.log('update current position');
// console.log('update current position');
// Update origPositions
this._origLongitude = currentCoord.longitude;
@ -131,9 +131,9 @@ class WeatherSettings {
// Error
_watchGeoError = err => {
console.warn('ERROR(' + err.code + '): ' + err.message);
// console.warn('ERROR(' + err.code + '): ' + err.message);
if (err.code == err.PERMISSION_DENIED) {
if (err.code === err.PERMISSION_DENIED) {
this._deniedGeolocation();
@ -150,7 +150,7 @@ class WeatherSettings {
navigator.permissions.query({name:'geolocation'}).then(result => {
if ((result.state === 'prompt') || (result.state == 'granted')) {
if ((result.state === 'prompt') || (result.state === 'granted')) {
this._watchGeoPosition();
@ -170,13 +170,13 @@ class WeatherSettings {
if (this._locatorMode === 'geolocation') {
console.log('geolocation');
// console.log('geolocation');
this._weatherSettingsCityIDGroup.classList.add('hideWeatherSettings');
} else if (this._locatorMode === 'city') {
console.log('city');
// console.log('city');
this._weatherSettingsCityIDGroup.classList.remove('hideWeatherSettings');

137
js/web-menu.js
View File

@ -37,12 +37,12 @@ class WebMenu {
// Disable textboxes
_disableWebMenuInputs = status => {
const elems = this._webMenuScreen.getElementsByTagName('input');
const len = elems.length;
const elems = this._webMenuScreen.getElementsByTagName('input');
const len = elems.length;
for (let i = 0; i < len; i++) {
elems[i].disabled = status;
}
for (let i = 0; i < len; i++) {
elems[parseInt(i, 10)].disabled = status;
}
}
// Create callback property, to be used when enter was pressed while item is focused
@ -50,14 +50,14 @@ class WebMenu {
// Create a callback property for the passed li
li.callback = () => {
window.location.href = encodeURI(url);
}
};
}
// Sort list alphabetically
_sortList = () => {
Array.from(this._webMenuList.getElementsByTagName('li'))
.sort((a, b) => a.textContent.localeCompare(b.textContent))
.forEach(li => this._webMenuList.appendChild(li));
.forEach(li => this._webMenuList.appendChild(li));
}
// Create/generate web items
@ -81,7 +81,7 @@ class WebMenu {
<div class='webItemContainer'>
<div class='webItemBody'>
<div class='webItemIconContainer'>
<div class='webItemIcon' style='background: url("assets/webcons/${icon}.svg"); background-size: cover;'></div>
<div class='webItemIcon' style='background-image: url("assets/webcons/${icon}.svg");'></div>
</div>
<div class='webItemName'>${site}</div>
</div>
@ -89,7 +89,7 @@ class WebMenu {
</div>
</a>
`
)
);
// Create callback property
this._createWebItemCallback(li, url);
@ -103,18 +103,25 @@ class WebMenu {
// Allow fuzzy searching in web menu
_fuzzySearch = () => {
// eslint-disable-next-line no-extend-native
String.prototype.fuzzy = function(term, ratio) {
const string = this.toLowerCase();
const compare = term.toLowerCase();
let matches = 0;
const string = this.toLowerCase();
const compare = term.toLowerCase();
let matches = 0;
// Covers basic partial matches
if (string.indexOf(compare) > -1) return true;
// Covers basic partial matches
if (string.indexOf(compare) > -1) return true;
for (let i = 0; i < compare.length; i++) {
string.indexOf(compare[i]) > -1 ? matches += 1 : matches -=1;
}
return ((matches / this.length) >= ratio || term === '');
for (let i = 0; i < compare.length; i++) {
const ind = string.indexOf(compare[parseInt(i, 10)]);
if (ind > -1) {
matches += 1;
} else {
matches -=1;
}
}
return ((matches / this.length) >= ratio || term === '');
};
}
@ -131,7 +138,7 @@ class WebMenu {
// Loop through all list items, and focus if matches the search query
for (let i = 0; i < li.length; i++) {
a = li[i].getElementsByClassName('webItemName')[0];
a = li[parseInt(i, 10)].getElementsByClassName('webItemName')[0];
txtValue = a.innerHTML || a.textContent || a.innerText;
// If an item match, hightlight it and focus
@ -144,7 +151,7 @@ class WebMenu {
oldWebItemFocusChild.classList.remove('webItemFocus');
// Update webItemFocus
this._webItemFocus = li[i];
this._webItemFocus = li[parseInt(i, 10)];
// Update weblistindex
this._webListIndex = i;
@ -192,22 +199,22 @@ class WebMenu {
// Enable inputs
this._disableWebMenuInputs(false);
this._webMenuVisibility = !this._webMenuVisibility;
this._webMenuVisibility = !this._webMenuVisibility;
// Focus to input field
this._webMenuSearchBox.focus();
// Focus to input field
this._webMenuSearchBox.focus();
}
// Hide web menu screen
hideWebMenu = () => {
// Clear input field
this._webMenuSearchBox.value = '';
// Clear input field
this._webMenuSearchBox.value = '';
// Unfocus input field
this._webMenuSearchBox.blur();
// Unfocus input field
this._webMenuSearchBox.blur();
// Refilter web list
this._filterWebList();
// Refilter web list
this._filterWebList();
// Scroll to top
this._webMenuListContainer.scrollTop = 0;
@ -223,48 +230,48 @@ class WebMenu {
// Disable inputs
this._disableWebMenuInputs(true);
this._webMenuVisibility = !this._webMenuVisibility;
this._webMenuVisibility = !this._webMenuVisibility;
}
// Toggle web menu screen
toggleWebMenu = () => {
console.log('toggle web menu');
// console.log('toggle web menu');
// If profile anim is still running,
// Return to avoid spam
// If profile anim is still running,
// Return to avoid spam
if (profileImage.getProfileAnimationStatus()) return;
// Rotate profile
profileImage.rotateProfile();
profileImage.rotateProfile();
if (this._webMenuVisibility) {
// Hide web menu
this.hideWebMenu();
if (this._webMenuVisibility) {
// Hide web menu
this.hideWebMenu();
} else {
// Show Web menu
this.showWebMenu();
}
} else {
// Show Web menu
this.showWebMenu();
}
// Check if any of these are open, if yes, close it
if (searchBoxContainer.classList.contains('showSearchBox')) {
console.log('searchbox is open, closing...');
searchBoxShow.hideSearchBox();
// Check if any of these are open, if yes, close it
if (searchBoxContainer.classList.contains('showSearchBox')) {
// console.log('searchbox is open, closing...');
searchBoxShow.hideSearchBox();
} else if (this._dashboard.classList.contains('showRightDashboard')) {
console.log('dashboard is open, closing...');
dashboard.hideDashboard();
} else if (this._dashboard.classList.contains('showRightDashboard')) {
// console.log('dashboard is open, closing...');
dashboard.hideDashboard();
} else if (this._weatherScreen.classList.contains('showWeatherScreen')) {
console.log('weather screen is open, closing...');
weatherScreen.hideWeatherScreen();
return;
} else if (this._weatherScreen.classList.contains('showWeatherScreen')) {
// console.log('weather screen is open, closing...');
weatherScreen.hideWeatherScreen();
return;
}
}
// Toggle center box
centeredBox.toggleCenteredBox();
// Toggle center box
centeredBox.toggleCenteredBox();
}
// Remove focus class
@ -304,7 +311,7 @@ class WebMenu {
const containerWindow = ((window.innerWidth - (menuItemWidth / 2) - scrollBarWidth - vw(24)) / menuItemWidth);
// Get rounded result
return Math.round(containerWindow);
}
};
// Determine the index position by key
const changeWebListIndex = () => {
@ -330,24 +337,24 @@ class WebMenu {
this._webMenuSearchBox.value = '';
break;
}
}
};
const changeItemFocus = (condition, overFlowIndex) => {
const next = this._webMenuList.getElementsByTagName('li')[this._webListIndex];
if(typeof next !== undefined && condition) {
if(typeof next !== 'undefined' && condition) {
this._webItemFocus = next;
} else {
this._webListIndex = overFlowIndex;
this._webItemFocus = this._webMenuList.getElementsByTagName('li')[overFlowIndex];
this._webItemFocus = this._webMenuList.getElementsByTagName('li')[parseInt(overFlowIndex, 10)];
}
}
};
const changeItemFocusByKey = () => {
if (key === right) { return changeItemFocus((this._webListIndex <= len), 0) }
if (key === left) { return changeItemFocus((this._webListIndex >= 0), len) }
if (key === up) { return changeItemFocus((this._webListIndex >= 0), len) }
if (key === down) { return changeItemFocus((this._webListIndex <= len), 0) }
}
if (key === right) { return changeItemFocus((this._webListIndex <= len), 0); }
if (key === left) { return changeItemFocus((this._webListIndex >= 0), len); }
if (key === up) { return changeItemFocus((this._webListIndex >= 0), len); }
if (key === down) { return changeItemFocus((this._webListIndex <= len), 0); }
};
changeWebListIndex();