forked from extern/the-glorious-startpage
Quality control (#27)
* 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
GitHub
parent
f484e86e09
commit
ae6e1254ea
@ -1,15 +1,15 @@
|
|||||||
## A bloated and modern-looking startpage
|
## A bloated and modern-looking startpage
|
||||||
|
|
||||||
[](https://github.com/manilarome/the-glorious-startpage/commits/master) [](https://github.com/manilarome/the-glorious-startpage/pulls) [](http://hits.dwyl.com/manilarome/the-glorious-startpage)
|
[](https://github.com/manilarome/the-glorious-startpage/commits/master) [](https://github.com/manilarome/the-glorious-startpage/pulls) [](http://hits.dwyl.com/manilarome/the-glorious-startpage) [](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/)
|
## [Live Preview](https://manilarome.github.io/the-glorious-startpage/)
|
||||||
|
|
||||||
## Gallery
|
## Gallery
|
||||||
|
|
||||||
<div align='center'>
|
<div align='center'>
|
||||||
<h3>
|
<h3>
|
||||||
<img src='/scrots/idle.png' align='center'>
|
<img src='/scrots/idle.png' align='center'>
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -3,11 +3,11 @@
|
|||||||
backdrop-filter: blur(var(--blur-strength));
|
backdrop-filter: blur(var(--blur-strength));
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
|
|
||||||
/*Make clock unselectable*/
|
/* Make clock unselectable */
|
||||||
-webkit-touch-callout: none;
|
-webkit-touch-callout: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-khtml-user-select: none;
|
-khtml-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,9 +4,9 @@
|
|||||||
font-family: roboto-bold, sans-serif;
|
font-family: roboto-bold, sans-serif;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
||||||
/*Center lock*/
|
/* Center lock */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
/*Dock buttons*/
|
/* Dock buttons */
|
||||||
.dockButton {
|
.dockButton {
|
||||||
background: var(--base-container);
|
background: var(--base-container);
|
||||||
width: 36px;
|
width: 36px;
|
||||||
@ -9,23 +9,22 @@
|
|||||||
padding: 5px;
|
padding: 5px;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
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 {
|
.dockLink {
|
||||||
/*Act as div*/
|
/* Act as div */
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
/*Remove outlines*/
|
/* Remove outlines */
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
border: none;
|
border: none;
|
||||||
-moz-outline-style: none;
|
-moz-outline-style: none;
|
||||||
|
|
||||||
/*Disable dragging*/
|
/* Disable dragging */
|
||||||
user-select: none;
|
user-select: none;
|
||||||
user-drag: none;
|
|
||||||
-webkit-user-drag: none;
|
-webkit-user-drag: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -41,28 +40,30 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Dock button hover */
|
||||||
.dockButton:hover {
|
.dockButton:hover {
|
||||||
background: var(--base-hover-bg);
|
background: var(--base-hover-bg);
|
||||||
|
|
||||||
-ms-transform: scale(1.25);
|
-ms-transform: scale(1.25);
|
||||||
-webkit-transform: scale(1.25);
|
-webkit-transform: scale(1.25);
|
||||||
transform: scale(1.25);
|
transform: scale(1.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Dock button active */
|
||||||
.dockButton:active {
|
.dockButton:active {
|
||||||
background: var(--base-active-bg);
|
background: var(--base-active-bg);
|
||||||
|
|
||||||
-ms-transform: scale(1);
|
-ms-transform: scale(1);
|
||||||
-webkit-transform: scale(1);
|
-webkit-transform: scale(1);
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Dock button image */
|
||||||
.dockButtonImage {
|
.dockButtonImage {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,22 +2,22 @@
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
||||||
/*On bottom, center horizontally*/
|
/* On bottom, center horizontally */
|
||||||
left: 50%;
|
left: 50%;
|
||||||
-ms-transform: translateX(-50%);
|
-ms-transform: translateX(-50%);
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
|
||||||
/*Add transition*/
|
/* Add transition */
|
||||||
transition: opacity var(--transition-speed);
|
transition: opacity var(--transition-speed);
|
||||||
}
|
}
|
||||||
|
|
||||||
#dock {
|
#dock {
|
||||||
background: var(--panel-bg);
|
background: var(--panel-bg);
|
||||||
border-radius: var(--rounded-radius);
|
border-radius: var(--rounded-radius);
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: auto;
|
height: auto;
|
||||||
@ -26,159 +26,149 @@
|
|||||||
padding: 5px;
|
padding: 5px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
|
|
||||||
transition: transform var(--transition-speed);
|
transition: transform var(--transition-speed);
|
||||||
z-index: 1;
|
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) {
|
@media screen and (max-width: 470px) and (min-height: 490px) {
|
||||||
|
|
||||||
.dockContainer {
|
.dockContainer {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
margin:0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
||||||
-webkit-transform: translateY(-50%);
|
-webkit-transform: translateY(-50%);
|
||||||
transition: opacity var(--transition-speed);
|
transition: opacity var(--transition-speed);
|
||||||
}
|
}
|
||||||
|
|
||||||
#dock {
|
#dock {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
transform: scale(0.90);
|
transform: scale(0.9);
|
||||||
transition: transform var(--transition-speed);
|
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) {
|
@media screen and (max-width: 469px) and (max-height: 489px) {
|
||||||
|
|
||||||
.dockContainer {
|
.dockContainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
||||||
/*On bottom, center horizontally*/
|
/* On bottom, center horizontally */
|
||||||
left: 50%;
|
left: 50%;
|
||||||
-ms-transform: translateX(-50%);
|
-ms-transform: translateX(-50%);
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
|
||||||
/*Add transition*/
|
/* Add transition */
|
||||||
transition: opacity var(--transition-speed);
|
transition: opacity var(--transition-speed);
|
||||||
}
|
}
|
||||||
|
|
||||||
#dock {
|
#dock {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
transform: scale(0.85);
|
transform: scale(0.85);
|
||||||
transition: transform var(--transition-speed);
|
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) {
|
@media screen and (max-width: 380px) and (max-height: 489px) {
|
||||||
|
|
||||||
.dockContainer {
|
.dockContainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
||||||
/*On bottom, center horizontally*/
|
/* On bottom, center horizontally */
|
||||||
left: 50%;
|
left: 50%;
|
||||||
-ms-transform: translateX(-50%);
|
-ms-transform: translateX(-50%);
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
|
||||||
/*Add transition*/
|
/* Add transition */
|
||||||
transition: opacity var(--transition-speed);
|
transition: opacity var(--transition-speed);
|
||||||
}
|
}
|
||||||
|
|
||||||
#dock {
|
#dock {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
transform: scale(0.75);
|
transform: scale(0.75);
|
||||||
transition: transform var(--transition-speed);
|
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) {
|
@media screen and (max-width: 350px) and (min-width: 320px) and (max-height: 489px) {
|
||||||
|
|
||||||
.dockContainer {
|
.dockContainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
||||||
/*On bottom, center horizontally*/
|
/* On bottom, center horizontally */
|
||||||
left: 50%;
|
left: 50%;
|
||||||
-ms-transform: translateX(-50%);
|
-ms-transform: translateX(-50%);
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
|
||||||
/*Add transition*/
|
/* Add transition */
|
||||||
transition: opacity var(--transition-speed);
|
transition: opacity var(--transition-speed);
|
||||||
}
|
}
|
||||||
|
|
||||||
#dock {
|
#dock {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
transform: scale(0.70);
|
transform: scale(0.7);
|
||||||
transition: transform var(--transition-speed);
|
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) {
|
@media screen and (max-width: 319px) and (max-height: 489px) {
|
||||||
|
|
||||||
.dockContainer {
|
.dockContainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
||||||
/*On bottom, center horizontally*/
|
/* On bottom, center horizontally */
|
||||||
left: 50%;
|
left: 50%;
|
||||||
-ms-transform: translateX(-50%);
|
-ms-transform: translateX(-50%);
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
|
||||||
/*Add transition*/
|
/* Add transition */
|
||||||
transition: opacity var(--transition-speed);
|
transition: opacity var(--transition-speed);
|
||||||
}
|
}
|
||||||
|
|
||||||
#dock {
|
#dock {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
transform: scale(0.0);
|
transform: scale(0);
|
||||||
transition: transform var(--transition-speed),
|
transition:
|
||||||
|
transform var(--transition-speed),
|
||||||
opacity var(--transition-speed);
|
opacity var(--transition-speed);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
|
||||||
|
|||||||
@ -2,4 +2,4 @@
|
|||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,65 +1,5 @@
|
|||||||
:root {
|
/* Scrollbar */
|
||||||
/* Colors */
|
/* Width */
|
||||||
--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 */
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
}
|
}
|
||||||
@ -74,28 +14,82 @@ html, body {
|
|||||||
background: var(--base-active-bg);
|
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 */
|
/* Handle on hover */
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: var(--base-hover-bg);
|
background: var(--base-hover-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Hide focus elements outline*/
|
* {
|
||||||
input:focus,
|
box-sizing: border-box;
|
||||||
textarea:focus,
|
|
||||||
select:focus{
|
/* Font rendering */
|
||||||
outline: none;
|
-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 {
|
body {
|
||||||
display: none;
|
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 {
|
select {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-align-last: center;
|
text-align-last: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Hide focus elements outline */
|
||||||
|
input:focus,
|
||||||
|
textarea:focus,
|
||||||
|
select:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
select::-ms-expand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
option {
|
option {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -19,4 +19,4 @@
|
|||||||
|
|
||||||
.dummyBackgroundHide {
|
.dummyBackgroundHide {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,16 +1,19 @@
|
|||||||
|
/* Fantasque Sans */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'fantasque-sans-mono';
|
font-family: 'fantasque-sans-mono';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
src: url('../../fonts/fantasque-sans-mono-bold-italic-nerd-font-complete.ttf');
|
src: url('../../fonts/fantasque-sans-mono-bold-italic-nerd-font-complete.ttf');
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Roboto light*/
|
/* Roboto light */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'roboto-light';
|
font-family: 'roboto-light';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
src: url('../../fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
|
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.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.woff2') format('woff2'), /* Super Modern Browsers */
|
||||||
url('../../fonts/roboto-v20-latin-300.woff') format('woff'), /* 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 */
|
url('../../fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Roboto normal*/
|
/* Roboto normal */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'roboto';
|
font-family: 'roboto';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: url('../../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
|
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.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.woff2') format('woff2'), /* Super Modern Browsers */
|
||||||
url('../../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
|
url('../../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
|
||||||
@ -32,16 +37,18 @@
|
|||||||
url('../../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
|
url('../../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Roboto bold*/
|
/* Roboto bold */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'roboto-bold';
|
font-family: 'roboto-bold';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
src: url('../../fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
|
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.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.woff2') format('woff2'), /* Super Modern Browsers */
|
||||||
url('../../fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
|
url('../../fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
|
||||||
url('../../fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
|
url('../../fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||||
url('../../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
|
url('../../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
|
||||||
}
|
}
|
||||||
|
|||||||
8
css/base/normalize.css
vendored
8
css/base/normalize.css
vendored
@ -62,7 +62,7 @@ hr {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
font-family: monospace, monospace; /* 1 */
|
font-family: monospace; /* 1 */
|
||||||
font-size: 1em; /* 2 */
|
font-size: 1em; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -105,7 +105,7 @@ strong {
|
|||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
samp {
|
||||||
font-family: monospace, monospace; /* 1 */
|
font-family: monospace; /* 1 */
|
||||||
font-size: 1em; /* 2 */
|
font-size: 1em; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -234,7 +234,7 @@ fieldset {
|
|||||||
* 1. Correct the text wrapping in Edge and IE.
|
* 1. Correct the text wrapping in Edge and IE.
|
||||||
* 2. Correct the color inheritance from `fieldset` elements in 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
|
* 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 {
|
legend {
|
||||||
@ -346,4 +346,4 @@ template {
|
|||||||
|
|
||||||
[hidden] {
|
[hidden] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
/*Container*/
|
/* Container */
|
||||||
.phrasesContainer {
|
.phrasesContainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
||||||
@ -11,7 +11,7 @@
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--transition-speed);
|
transition: opacity var(--transition-speed);
|
||||||
|
|
||||||
/*Disable user touch/select on text elements*/
|
/* Disable user touch/select on text elements */
|
||||||
-webkit-touch-callout: none;
|
-webkit-touch-callout: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-khtml-user-select: none;
|
-khtml-user-select: none;
|
||||||
@ -20,49 +20,49 @@
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Show suggestion*/
|
/* Show suggestion */
|
||||||
#suggestionsContainer.suggestionsShow {
|
#suggestionsContainer.suggestionsShow {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*ul*/
|
/* UL */
|
||||||
#suggestions {
|
#suggestions {
|
||||||
|
|
||||||
height: auto;
|
height: auto;
|
||||||
width: 50vw;
|
width: 50vw;
|
||||||
|
|
||||||
/*Center ul horizontally*/
|
/* Center ul horizontally */
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
||||||
/*Remove the fucking padding*/
|
/* Remove the fucking padding */
|
||||||
/*It took me an hour to fix this piece of shit*/
|
/* It took me an hour to fix this piece of shit */
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
/*Allow centering of children*/
|
/* Allow centering of children */
|
||||||
display: table;
|
display: table;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*li*/
|
/* LI */
|
||||||
#phrase {
|
#phrase {
|
||||||
/*Align list horizontally*/
|
/* Align list horizontally */
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
||||||
/*Always stack and center horizontally*/
|
/* Always stack and center horizontally */
|
||||||
/*display: table-cell;*/
|
/* display: table-cell; */
|
||||||
/*width: auto;*/
|
/* width: auto; */
|
||||||
/*text-align: center;*/
|
/* text-align: center; */
|
||||||
|
|
||||||
/*Always stack and center vertically*/
|
/* Always stack and center vertically */
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*The li's child*/
|
/* LI's Child */
|
||||||
.phraseButton {
|
.phraseButton {
|
||||||
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@ -71,35 +71,35 @@
|
|||||||
|
|
||||||
color: var(--base-color);
|
color: var(--base-color);
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
font-family: roboto-bold;
|
font-family: roboto-bold, sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Focus */
|
||||||
.phraseButton:focus {
|
.phraseButton:focus {
|
||||||
background: var(--base-bg);
|
background: var(--base-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Active */
|
||||||
.phraseButton:active {
|
.phraseButton:active {
|
||||||
background: var(--base-active-bg);
|
background: var(--base-active-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-height: 539px) and (min-height: 341px) {
|
@media screen and (max-height: 539px) and (min-height: 341px) {
|
||||||
|
#suggestions {
|
||||||
#suggestions {
|
|
||||||
height: auto;
|
height: auto;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*The Li*/
|
/* The Li */
|
||||||
#phrase {
|
#phrase {
|
||||||
/*Always stack and center horizontally*/
|
/* Always stack and center horizontally */
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
width: auto;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -110,9 +110,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-height: 340px) {
|
@media screen and (max-height: 340px) {
|
||||||
|
/* Hide */
|
||||||
#suggestionsContainer.phrasesContainer {
|
#suggestionsContainer.phrasesContainer {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
|
||||||
|
|||||||
@ -12,7 +12,8 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
transition: opacity var(--transition-speed),
|
transition:
|
||||||
|
opacity var(--transition-speed),
|
||||||
z-index var(--transition-speed),
|
z-index var(--transition-speed),
|
||||||
backdrop-filter var(--transition-speed);
|
backdrop-filter var(--transition-speed);
|
||||||
}
|
}
|
||||||
@ -21,4 +22,4 @@
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
backdrop-filter: blur(var(--blur-strength)) brightness(70%);
|
backdrop-filter: blur(var(--blur-strength)) brightness(70%);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,12 +1,12 @@
|
|||||||
.centeredBar {
|
.centeredBar {
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
||||||
border: none;
|
border: none;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
-webkit-transform: translate(-50%, -50%);
|
-webkit-transform: translate(-50%, -50%);
|
||||||
@ -16,11 +16,12 @@
|
|||||||
#centeredBox {
|
#centeredBox {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
transition: opacity var(--transition-speed),
|
transition:
|
||||||
z-index var(--transition-speed);
|
opacity var(--transition-speed),
|
||||||
|
z-index var(--transition-speed);
|
||||||
}
|
}
|
||||||
|
|
||||||
.centeredBar#centeredBox.hiddenBox {
|
.centeredBar#centeredBox.hiddenBox {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,10 +6,10 @@
|
|||||||
width: 138px;
|
width: 138px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
pointer-events: initial;
|
pointer-events: initial;
|
||||||
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-bottom: 110px;
|
margin-bottom: 110px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
flex-flow: column wrap;
|
flex-flow: column wrap;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -18,7 +18,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#profileImage {
|
#profileImage {
|
||||||
background-image: url('../../assets/user.png') ;
|
background-image: url('../../assets/user.png');
|
||||||
height: 128px;
|
height: 128px;
|
||||||
width: 128px;
|
width: 128px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@ -37,6 +37,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes rotate {
|
@keyframes rotate {
|
||||||
from { -webkit-transform: rotate(0deg) }
|
from {
|
||||||
to { -webkit-transform: rotate(360deg) }
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -8,7 +8,8 @@
|
|||||||
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
transition: opacity var(--transition-speed),
|
transition:
|
||||||
|
opacity var(--transition-speed),
|
||||||
top var(--transition-speed),
|
top var(--transition-speed),
|
||||||
pointer-events var(--transition-speed);
|
pointer-events var(--transition-speed);
|
||||||
}
|
}
|
||||||
@ -22,8 +23,8 @@
|
|||||||
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
/*Center horizontally*/
|
/* Center horizontally */
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
|
||||||
@ -54,7 +55,7 @@
|
|||||||
|
|
||||||
@media screen and (max-width: 470px) {
|
@media screen and (max-width: 470px) {
|
||||||
#searchBox {
|
#searchBox {
|
||||||
width: 50vw;
|
width: 50vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
#searchBoxContainer.showSearchBox {
|
#searchBoxContainer.showSearchBox {
|
||||||
@ -63,4 +64,3 @@
|
|||||||
pointer-events: initial;
|
pointer-events: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
background: var(--panel-bg);
|
background: var(--panel-bg);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 7;
|
z-index: 7;
|
||||||
/*border-radius: var(--rounded-radius);*/
|
/* border-radius: var(--rounded-radius); */
|
||||||
backdrop-filter: blur(var(--blur-strength));
|
backdrop-filter: blur(var(--blur-strength));
|
||||||
|
|
||||||
-webkit-touch-callout: none;
|
-webkit-touch-callout: none;
|
||||||
@ -16,7 +16,7 @@
|
|||||||
.rightDashboardBody {
|
.rightDashboardBody {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
height: auto;
|
height: auto;
|
||||||
width: 330px;
|
width: 330px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#rightDashboard {
|
#rightDashboard {
|
||||||
@ -28,22 +28,22 @@
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
transition: width var(--transition-speed);
|
transition: width var(--transition-speed);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Hide scrollbar*/
|
/* Hide scrollbar */
|
||||||
#rightDashboard::-webkit-scrollbar {
|
#rightDashboard::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Show dashboard*/
|
/* Show dashboard */
|
||||||
.dashboard#rightDashboard.showRightDashboard {
|
.dashboard#rightDashboard.showRightDashboard {
|
||||||
width: 350px;
|
width: 350px;
|
||||||
z-index: 7;
|
z-index: 7;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Overlay*/
|
/* Overlay */
|
||||||
.dashboardOverlay {
|
.dashboardOverlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
@ -58,7 +58,8 @@
|
|||||||
|
|
||||||
z-index: -2;
|
z-index: -2;
|
||||||
filter: blur(var(--blur-strength)) brightness(70%);
|
filter: blur(var(--blur-strength)) brightness(70%);
|
||||||
transition: visibility var(--transition-speed),
|
transition:
|
||||||
|
visibility var(--transition-speed),
|
||||||
z-index var(--transition-speed);
|
z-index var(--transition-speed);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -12,6 +12,6 @@
|
|||||||
|
|
||||||
.dashboardMessage#dateMessage {
|
.dashboardMessage#dateMessage {
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
font-family: roboto, sans-serif;
|
font-family: roboto, sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
position: relative;;
|
position: relative;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: var(--base-color);
|
color: var(--base-color);
|
||||||
background: var(--base-container);
|
background: var(--base-container);
|
||||||
@ -94,7 +94,7 @@ select::-ms-expand {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
/*Center vertically*/
|
/* Center vertically */
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -120,4 +120,4 @@ select::-ms-expand {
|
|||||||
width: 96vw;
|
width: 96vw;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
.themeEngine {
|
.themeEngine {
|
||||||
font-family: roboto, sans-serif;
|
font-family: roboto, sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
position: relative;;
|
position: relative;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: var(--base-color);
|
color: var(--base-color);
|
||||||
background: var(--base-container);
|
background: var(--base-container);
|
||||||
@ -48,7 +49,7 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
/*Center vertically*/
|
/* Center vertically */
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -85,7 +86,7 @@
|
|||||||
.foregroundColorSetter,
|
.foregroundColorSetter,
|
||||||
.blurSetter,
|
.blurSetter,
|
||||||
.animSpeedSetter {
|
.animSpeedSetter {
|
||||||
/*Align div inside horizontally*/
|
/* Align div inside horizontally */
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
@ -138,4 +139,4 @@
|
|||||||
width: 96vw;
|
width: 96vw;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
position: relative;;
|
position: relative;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: var(--base-color);
|
color: var(--base-color);
|
||||||
background: var(--base-container);
|
background: var(--base-container);
|
||||||
@ -28,7 +28,7 @@
|
|||||||
background-image: url('../../assets/ui-icons/weather.svg');
|
background-image: url('../../assets/ui-icons/weather.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Main settings*/
|
/* Main settings */
|
||||||
.weatherSettingsGroups {
|
.weatherSettingsGroups {
|
||||||
height: auto;
|
height: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -48,7 +48,8 @@
|
|||||||
height: 0;
|
height: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transition: height var(--transition-speed),
|
transition:
|
||||||
|
height var(--transition-speed),
|
||||||
opacity var(--transition-speed);
|
opacity var(--transition-speed);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -67,7 +68,7 @@
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: var(--base-color);
|
color: var(--base-color);
|
||||||
|
|
||||||
/*Center vertically*/
|
/* Center vertically */
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -123,23 +124,25 @@
|
|||||||
margin-right: 2.5px;
|
margin-right: 2.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#weatherSettingsApply:hover, #weatherSettingsReset:hover {
|
#weatherSettingsApply:hover,
|
||||||
|
#weatherSettingsReset:hover {
|
||||||
outline: none;
|
outline: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: var(--base-hover-bg);
|
background: var(--base-hover-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
#weatherSettingsApply:active, #weatherSettingsReset:active {
|
#weatherSettingsApply:active,
|
||||||
|
#weatherSettingsReset:active {
|
||||||
outline: none;
|
outline: none;
|
||||||
background: var(--base-active-bg);
|
background: var(--base-active-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
#weatherSettingsApply:focus, #weatherSettingsReset:focus {
|
#weatherSettingsApply:focus,
|
||||||
|
#weatherSettingsReset:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
background: var(--base-focus-bg);
|
background: var(--base-focus-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#weatherSettingsButtons {
|
#weatherSettingsButtons {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -155,4 +158,4 @@
|
|||||||
width: 96vw;
|
width: 96vw;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
backdrop-filter: blur(var(--blur-strength));
|
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-touch-callout: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-khtml-user-select: none;
|
-khtml-user-select: none;
|
||||||
@ -18,8 +18,8 @@
|
|||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
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;
|
-webkit-box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,17 +1,14 @@
|
|||||||
#weatherScreen {
|
#weatherScreen {
|
||||||
display:flex;
|
display: flex;
|
||||||
justify-content:center;
|
justify-content: center;
|
||||||
align-items:center;
|
align-items: center;
|
||||||
|
padding: 6vh 12vw;
|
||||||
padding-top: 6vh;
|
|
||||||
padding-bottom: 6vh;
|
|
||||||
padding-left: 12vw;
|
|
||||||
padding-right: 12vw;
|
|
||||||
|
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
transition: transform var(--transition-speed),
|
transition:
|
||||||
|
transform var(--transition-speed),
|
||||||
opacity var(--transition-speed),
|
opacity var(--transition-speed),
|
||||||
z-index var(--transition-speed);
|
z-index var(--transition-speed);
|
||||||
}
|
}
|
||||||
@ -24,9 +21,8 @@
|
|||||||
|
|
||||||
#weatherScreenContainer {
|
#weatherScreenContainer {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
|
||||||
|
|
||||||
/*Align vertically center*/
|
/* Align vertically center */
|
||||||
margin: 0;
|
margin: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@ -89,32 +85,29 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#sunriseHourDataIcon {
|
#sunriseHourDataIcon {
|
||||||
background: url("../../assets/weather-icons/sunrise.svg");
|
background-image: url("../../assets/weather-icons/sunrise.svg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#sunsetHourDataIcon {
|
#sunsetHourDataIcon {
|
||||||
background: url("../../assets/weather-icons/sunset.svg");
|
background-image: url("../../assets/weather-icons/sunset.svg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
margin-left: 5px
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#updateHourDataIcon {
|
#updateHourDataIcon {
|
||||||
background: url("../../assets/weather-icons/refresh.svg");
|
background-image: url("../../assets/weather-icons/refresh.svg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
margin-left: 5px
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.weatherForecast {
|
.weatherForecast {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Forecast Container */
|
||||||
/*Forecast Container*/
|
|
||||||
.weatherForecastDay {
|
.weatherForecastDay {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
@ -124,14 +117,14 @@
|
|||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Add fixed geometry to weatherForecastDay children*/
|
/* Add fixed geometry to weatherForecastDay children */
|
||||||
.weatherForecastDay > div {
|
.weatherForecastDay > div {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.weatherForecastDayIconContainer {
|
.weatherForecastDayIconContainer {
|
||||||
clear:both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.weatherForecastDayIcon {
|
.weatherForecastDayIcon {
|
||||||
@ -146,10 +139,9 @@
|
|||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Center*/
|
/* Center */
|
||||||
.weatherForecastDayDetails {
|
.weatherForecastDayDetails {
|
||||||
|
clear: both;
|
||||||
clear:both;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.weatherForecastDayDetailsTemperature,
|
.weatherForecastDayDetailsTemperature,
|
||||||
@ -167,17 +159,14 @@
|
|||||||
font-size: 14pt;
|
font-size: 14pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Right side*/
|
/* Right side */
|
||||||
.weatherForecastDayDate {
|
.weatherForecastDayDate {
|
||||||
clear:both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 470px) {
|
@media screen and (max-width: 470px) {
|
||||||
#weatherScreen {
|
#weatherScreen {
|
||||||
padding-top: 6vh;
|
padding: 6vh 18vw 0 18vw;
|
||||||
padding-bottom: 0vh;
|
|
||||||
padding-left: 18vw;
|
|
||||||
padding-right: 18vw;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -188,24 +177,23 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 470px) {
|
@media screen and (max-width: 470px) {
|
||||||
|
|
||||||
.weatherForecast {
|
.weatherForecast {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Forecast Container*/
|
/* Forecast Container */
|
||||||
.weatherForecastDay {
|
.weatherForecastDay {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
|
|
||||||
float: none;
|
float: none;
|
||||||
clear: none;
|
clear: none;
|
||||||
margin-left : 0px;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Add fixed geometry to weatherForecastDay children*/
|
/* Add fixed geometry to weatherForecastDay children */
|
||||||
.weatherForecastDay > div {
|
.weatherForecastDay > div {
|
||||||
width: 75px;
|
width: 75px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
@ -221,17 +209,16 @@
|
|||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Center*/
|
/* Center */
|
||||||
.weatherForecastDayDetails {
|
.weatherForecastDayDetails {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
clear: none;
|
clear: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Right side*/
|
/* Right side */
|
||||||
.weatherForecastDayDate {
|
.weatherForecastDayDate {
|
||||||
float: right;
|
float: right;
|
||||||
clear: none;
|
clear: none;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
|
||||||
|
|||||||
@ -1,29 +1,22 @@
|
|||||||
#webMenuScreen {
|
#webMenuScreen {
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
|
padding: 40px 12vw 6vh 12vw;
|
||||||
padding-top: 40px;
|
|
||||||
padding-bottom: 6vh;
|
|
||||||
padding-left: 12vw;
|
|
||||||
padding-right: 12vw;
|
|
||||||
|
|
||||||
/*Transitions*/
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
transition: transform var(--transition-speed),
|
transition:
|
||||||
|
transform var(--transition-speed),
|
||||||
opacity var(--transition-speed),
|
opacity var(--transition-speed),
|
||||||
z-index var(--transition-speed);
|
z-index var(--transition-speed);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 470px) {
|
@media screen and (max-width: 470px) {
|
||||||
#webMenuScreen {
|
#webMenuScreen {
|
||||||
padding-top: 6vh;
|
padding: 6vh 18vw 0 18vw;
|
||||||
padding-bottom: 0vh;
|
|
||||||
padding-left: 18vw;
|
|
||||||
padding-right: 18vw;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Show web menu*/
|
/* Show web menu */
|
||||||
.screen#webMenuScreen.showWebMenu {
|
.screen#webMenuScreen.showWebMenu {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -39,7 +32,7 @@
|
|||||||
|
|
||||||
#webMenuSearchBox {
|
#webMenuSearchBox {
|
||||||
background: var(--base-bg);
|
background: var(--base-bg);
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: roboto-bold, sans-serif;
|
font-family: roboto-bold, sans-serif;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
@ -67,7 +60,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#webMenuSearchBoxContainer {
|
#webMenuSearchBoxContainer {
|
||||||
/*Center horizontally*/
|
/* Center horizontally */
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column wrap;
|
flex-flow: column wrap;
|
||||||
@ -76,9 +69,9 @@
|
|||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Web menu list*/
|
/* Web menu list */
|
||||||
|
|
||||||
/*UL*/
|
/* UL */
|
||||||
#webMenuList {
|
#webMenuList {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -89,9 +82,9 @@
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*List*/
|
/* List */
|
||||||
#webMenuList li {
|
#webMenuList li {
|
||||||
/*Align list horizontally*/
|
/* Align list horizontally */
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -107,7 +100,7 @@
|
|||||||
transition: transform var(--transition-speed);
|
transition: transform var(--transition-speed);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Child of li*/
|
/* Child of li */
|
||||||
.webItem {
|
.webItem {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
width: 128px;
|
width: 128px;
|
||||||
@ -143,15 +136,15 @@
|
|||||||
background: var(--base-active-bg);
|
background: var(--base-active-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Contains web icon and label*/
|
/* Contains web icon and label */
|
||||||
.webItemContainer {
|
.webItemContainer {
|
||||||
/*Align vertically*/
|
/* Align vertically */
|
||||||
margin:0 auto;
|
margin: 0 auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
-webkit-transform: translateY(-50%);
|
-webkit-transform: translateY(-50%);
|
||||||
|
|
||||||
/*Align horizontally*/
|
/* Align horizontally */
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -159,7 +152,7 @@
|
|||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Web icon container*/
|
/* Web icon container */
|
||||||
.webItemIconContainer {
|
.webItemIconContainer {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -171,9 +164,10 @@
|
|||||||
height: 64px;
|
height: 64px;
|
||||||
width: 64px;
|
width: 64px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Web label/name*/
|
/* Web label/name */
|
||||||
.webItemName {
|
.webItemName {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 11pt;
|
font-size: 11pt;
|
||||||
@ -181,7 +175,6 @@
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
color: var(--base-color);
|
color: var(--base-color);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#webMenuListContainer {
|
#webMenuListContainer {
|
||||||
@ -191,9 +184,9 @@
|
|||||||
max-height: 70vh;
|
max-height: 70vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
/*Fade transparency*/
|
/* Fade transparency */
|
||||||
/*-webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);*/
|
/* -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%); */
|
||||||
/*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*/
|
/*Stretch list item if screen width < 470px*/
|
||||||
@ -209,13 +202,13 @@
|
|||||||
.webItem:hover {
|
.webItem:hover {
|
||||||
-ms-transform: scale(1);
|
-ms-transform: scale(1);
|
||||||
-webkit-transform: scale(1);
|
-webkit-transform: scale(1);
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.webItemFocus {
|
.webItemFocus {
|
||||||
-ms-transform: scale(1);
|
-ms-transform: scale(1);
|
||||||
-webkit-transform: scale(1);
|
-webkit-transform: scale(1);
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
#webMenuListContainer {
|
#webMenuListContainer {
|
||||||
@ -224,7 +217,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#webMenuListContainer::-webkit-scrollbar {
|
#webMenuListContainer::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -241,6 +234,5 @@
|
|||||||
|
|
||||||
/*Disable dragging*/
|
/*Disable dragging*/
|
||||||
user-select: none;
|
user-select: none;
|
||||||
user-drag: none;
|
|
||||||
-webkit-user-drag: none;
|
-webkit-user-drag: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,31 +1,31 @@
|
|||||||
/*Load all CSS*/
|
/* Load all CSS */
|
||||||
@import url('base/normalize.css');
|
@import url('base/normalize.css');
|
||||||
@import url('base/font-face.css');
|
@import url('base/font-face.css');
|
||||||
@import url('base/base.css');
|
@import url('base/base.css');
|
||||||
@import url('base/dummy-body-background.css');
|
@import url('base/dummy-body-background.css');
|
||||||
|
|
||||||
/*Bars and Panels*/
|
/* Bars and Panels */
|
||||||
@import url('bars/bar.css');
|
@import url('bars/bar.css');
|
||||||
@import url('bars/top-panel.css');
|
@import url('bars/top-panel.css');
|
||||||
@import url('bars/clock.css');
|
@import url('bars/clock.css');
|
||||||
@import url('bars/dock.css');
|
@import url('bars/dock.css');
|
||||||
@import url('bars/dock-buttons.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.css');
|
||||||
@import url('centeredbox/centered-box-overlay.css');
|
@import url('centeredbox/centered-box-overlay.css');
|
||||||
@import url('centeredbox/profile-image.css');
|
@import url('centeredbox/profile-image.css');
|
||||||
@import url('centeredbox/search-box.css');
|
@import url('centeredbox/search-box.css');
|
||||||
@import url('centeredbox/auto-suggestion.css');
|
@import url('centeredbox/auto-suggestion.css');
|
||||||
|
|
||||||
/*Screens*/
|
/* Screens */
|
||||||
@import url('screens/screens.css');
|
@import url('screens/screens.css');
|
||||||
@import url('screens/weather-screen.css');
|
@import url('screens/weather-screen.css');
|
||||||
@import url('screens/web-menu.css');
|
@import url('screens/web-menu.css');
|
||||||
|
|
||||||
/*Dashboard and Settings*/
|
/* Dashboard and Settings */
|
||||||
@import url('dashboard/dashboard.css');
|
@import url('dashboard/dashboard.css');
|
||||||
@import url('dashboard/greeter-date-message.css');
|
@import url('dashboard/greeter-date-message.css');
|
||||||
@import url('dashboard/search-engine-settings.css');
|
@import url('dashboard/search-engine-settings.css');
|
||||||
@import url('dashboard/weather-settings.css');
|
@import url('dashboard/weather-settings.css');
|
||||||
@import url('dashboard/theme-engine.css');
|
@import url('dashboard/theme-engine.css');
|
||||||
|
|||||||
@ -40,31 +40,31 @@ class AutoSuggestion {
|
|||||||
|
|
||||||
const phraseButtons = Array.prototype.slice.call(document.querySelectorAll('button'));
|
const phraseButtons = Array.prototype.slice.call(document.querySelectorAll('button'));
|
||||||
const phraseIndex = (phraseButtons.indexOf(document.activeElement) + 1) % phraseButtons.length;
|
const phraseIndex = (phraseButtons.indexOf(document.activeElement) + 1) % phraseButtons.length;
|
||||||
const phraseButton = phraseButtons[phraseIndex];
|
const phraseButton = phraseButtons[parseInt(phraseIndex, 10)];
|
||||||
phraseButton.focus();
|
phraseButton.focus();
|
||||||
|
|
||||||
} else if ((e.key === 'ArrowUp') || e.key === 'ArrowLeft') {
|
} else if ((e.key === 'ArrowUp') || e.key === 'ArrowLeft') {
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
const phraseButtons = Array.prototype.slice.call(document.querySelectorAll('button'));
|
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) {
|
if (phraseIndex < 0) {
|
||||||
phraseIndex = phraseButtons.length - 1;
|
phraseIndex = phraseButtons.length - 1;
|
||||||
};
|
}
|
||||||
|
|
||||||
const phraseButton = phraseButtons[phraseIndex];
|
const phraseButton = phraseButtons[parseInt(phraseIndex, 10)];
|
||||||
phraseButton.focus();
|
phraseButton.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
};
|
||||||
|
|
||||||
// Onmouseup event
|
// Onmouseup event
|
||||||
button.onmouseup = e => {
|
button.onmouseup = e => {
|
||||||
this._searchBox.value = button.innerText;
|
this._searchBox.value = button.innerText;
|
||||||
this._searchBox.focus();
|
this._searchBox.focus();
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Generate and parse suggestions
|
// Generate and parse suggestions
|
||||||
@ -105,12 +105,12 @@ class AutoSuggestion {
|
|||||||
_fetchSuggestion = () => {
|
_fetchSuggestion = () => {
|
||||||
|
|
||||||
const endpoint = 'https://duckduckgo.com/ac/';
|
const endpoint = 'https://duckduckgo.com/ac/';
|
||||||
const callback = 'autocompleteCallback'
|
const callback = 'autocompleteCallback';
|
||||||
const searchQuery = String(this._searchBox.value);
|
const searchQuery = String(this._searchBox.value);
|
||||||
window[callback] = res => {
|
window[String(callback)] = res => {
|
||||||
// Passed the suggestion object to process it
|
// Passed the suggestion object to process it
|
||||||
this._autocompleteCallback(res);
|
this._autocompleteCallback(res);
|
||||||
}
|
};
|
||||||
|
|
||||||
// Fetch from duckduckgo
|
// Fetch from duckduckgo
|
||||||
const script = document.createElement('script');
|
const script = document.createElement('script');
|
||||||
|
|||||||
@ -46,8 +46,8 @@ class DummyBodyBackground {
|
|||||||
|
|
||||||
},
|
},
|
||||||
3000
|
3000
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
// Add a delay when to fetch the hq background
|
// Add a delay when to fetch the hq background
|
||||||
setTimeout (
|
setTimeout (
|
||||||
|
|||||||
@ -1,34 +1,34 @@
|
|||||||
class CenteredBox {
|
class CenteredBox {
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this._centeredBox = document.querySelector('#centeredBox');
|
this._centeredBox = document.querySelector('#centeredBox');
|
||||||
|
|
||||||
this._centeredBoxVisibility = true;
|
this._centeredBoxVisibility = true;
|
||||||
|
|
||||||
this.showCenteredBox = this.showCenteredBox.bind(this);
|
this.showCenteredBox = this.showCenteredBox.bind(this);
|
||||||
this.hideCenteredBox = this.hideCenteredBox.bind(this);
|
this.hideCenteredBox = this.hideCenteredBox.bind(this);
|
||||||
this.toggleCenteredBox = this.toggleCenteredBox.bind(this);
|
this.toggleCenteredBox = this.toggleCenteredBox.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
showCenteredBox = () => {
|
showCenteredBox = () => {
|
||||||
this._centeredBox.classList.remove('hiddenBox');
|
this._centeredBox.classList.remove('hiddenBox');
|
||||||
this._centeredBoxVisibility = !this._centeredBoxVisibility;
|
this._centeredBoxVisibility = !this._centeredBoxVisibility;
|
||||||
}
|
}
|
||||||
|
|
||||||
hideCenteredBox = () => {
|
hideCenteredBox = () => {
|
||||||
this._centeredBox.classList.add('hiddenBox');
|
this._centeredBox.classList.add('hiddenBox');
|
||||||
this._centeredBoxVisibility = !this._centeredBoxVisibility;
|
this._centeredBoxVisibility = !this._centeredBoxVisibility;
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleCenteredBox = () => {
|
toggleCenteredBox = () => {
|
||||||
|
|
||||||
if (this._centeredBoxVisibility) {
|
if (this._centeredBoxVisibility) {
|
||||||
// hide centered box
|
// hide centered box
|
||||||
this.hideCenteredBox();
|
this.hideCenteredBox();
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
// Show centered box
|
// Show centered box
|
||||||
this.showCenteredBox();
|
this.showCenteredBox();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -29,7 +29,7 @@ class Config {
|
|||||||
name: 'Bing',
|
name: 'Bing',
|
||||||
prefix: 'https://www.bing.com/search?q='
|
prefix: 'https://www.bing.com/search?q='
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
return searchEngines;
|
return searchEngines;
|
||||||
}
|
}
|
||||||
|
|||||||
180
js/dashboard.js
180
js/dashboard.js
@ -1,119 +1,119 @@
|
|||||||
class Dashboard {
|
class Dashboard {
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this._dashboard = document.querySelector('#rightDashboard');
|
this._dashboard = document.querySelector('#rightDashboard');
|
||||||
this._dashboardOverlay = document.querySelector('#dashboardOverlay');
|
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._centeredBox = document.querySelector('#centeredBox');
|
||||||
this._webMenu = document.querySelector('#webMenuScreen');
|
this._webMenu = document.querySelector('#webMenuScreen');
|
||||||
this._searchBoxContainer = document.querySelector('#searchBoxContainer');
|
this._searchBoxContainer = document.querySelector('#searchBoxContainer');
|
||||||
this._weatherScreen = document.querySelector('#weatherScreen');
|
this._weatherScreen = document.querySelector('#weatherScreen');
|
||||||
|
|
||||||
this._init();
|
this._init();
|
||||||
}
|
}
|
||||||
|
|
||||||
_init = () => {
|
_init = () => {
|
||||||
this._registerOverlayMouseUpEvent();
|
this._registerOverlayMouseUpEvent();
|
||||||
this._disableDashboardInputs(true);
|
this._disableDashboardInputs(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
_disableDashboardInputs = status => {
|
_disableDashboardInputs = status => {
|
||||||
const elems = this._dashboard.getElementsByTagName('input');
|
const elems = this._dashboard.getElementsByTagName('input');
|
||||||
const len = elems.length;
|
const len = elems.length;
|
||||||
|
|
||||||
for (let i = 0; i < len; i++) {
|
for (let i = 0; i < len; i++) {
|
||||||
elems[i].disabled = status;
|
elems[parseInt(i, 10)].disabled = status;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
getRightDashboardVisibility = () => {
|
getRightDashboardVisibility = () => {
|
||||||
return this._rightDashboardVisibility;
|
return this._rightDashboardVisibility;
|
||||||
}
|
}
|
||||||
|
|
||||||
showDashboard = () => {
|
showDashboard = () => {
|
||||||
this._dashboard.classList.add('showRightDashboard');
|
this._dashboard.classList.add('showRightDashboard');
|
||||||
|
|
||||||
// Show overlay
|
// Show overlay
|
||||||
this._dashboardOverlay.classList.add('showDashboardOverlay');
|
this._dashboardOverlay.classList.add('showDashboardOverlay');
|
||||||
|
|
||||||
// Enable Inputs
|
// Enable Inputs
|
||||||
this._disableDashboardInputs(false);
|
this._disableDashboardInputs(false);
|
||||||
|
|
||||||
this._rightDashboardVisibility = !this._rightDashboardVisibility;
|
this._rightDashboardVisibility = !this._rightDashboardVisibility;
|
||||||
}
|
}
|
||||||
|
|
||||||
hideDashboard = () => {
|
hideDashboard = () => {
|
||||||
this._dashboard.classList.remove('showRightDashboard');
|
this._dashboard.classList.remove('showRightDashboard');
|
||||||
this._dashboard.scrollTop = 0;
|
this._dashboard.scrollTop = 0;
|
||||||
|
|
||||||
// Disable Inputs
|
// Disable Inputs
|
||||||
this._disableDashboardInputs(true);
|
this._disableDashboardInputs(true);
|
||||||
|
|
||||||
// Hide overlay
|
// Hide overlay
|
||||||
this._dashboardOverlay.classList.remove('showDashboardOverlay');
|
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
|
// Hide dashboard
|
||||||
this.hideDashboard();
|
this.hideDashboard();
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
// Show dashboard
|
// Show dashboard
|
||||||
this.showDashboard();
|
this.showDashboard();
|
||||||
|
|
||||||
// If centered box is hidden, open it
|
// If centered box is hidden, open it
|
||||||
if (this._centeredBox.classList.contains('hiddenBox')) {
|
if (this._centeredBox.classList.contains('hiddenBox')) {
|
||||||
|
|
||||||
console.log('centered box is hidden, reopening...');
|
// console.log('centered box is hidden, reopening...');
|
||||||
|
|
||||||
// Rotate profile container
|
// Rotate profile container
|
||||||
profileImage.rotateProfile();
|
profileImage.rotateProfile();
|
||||||
|
|
||||||
// Toggle center box
|
// Toggle center box
|
||||||
centeredBox.toggleCenteredBox();
|
centeredBox.toggleCenteredBox();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check if any of these are open, if yes, close it
|
// Check if any of these are open, if yes, close it
|
||||||
if (this._searchBoxContainer.classList.contains('showSearchBox')) {
|
if (this._searchBoxContainer.classList.contains('showSearchBox')) {
|
||||||
console.log('searchbox is open, closing...');
|
// console.log('searchbox is open, closing...');
|
||||||
searchBoxShow.hideSearchBox();
|
searchBoxShow.hideSearchBox();
|
||||||
|
|
||||||
} else if (this._webMenu.classList.contains('showWebMenu')) {
|
} else if (this._webMenu.classList.contains('showWebMenu')) {
|
||||||
console.log('web menu is open, closing...');
|
// console.log('web menu is open, closing...');
|
||||||
webMenu.hideWebMenu();
|
webMenu.hideWebMenu();
|
||||||
return;
|
return;
|
||||||
|
|
||||||
} else if (this._weatherScreen.classList.contains('showWeatherScreen')) {
|
} else if (this._weatherScreen.classList.contains('showWeatherScreen')) {
|
||||||
console.log('weather screen is open, closing...');
|
// console.log('weather screen is open, closing...');
|
||||||
weatherScreen.hideWeatherScreen();
|
weatherScreen.hideWeatherScreen();
|
||||||
return;
|
return;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_dashboardOverlayMouseUpEvent = e => {
|
_dashboardOverlayMouseUpEvent = e => {
|
||||||
if (this._rightDashboardVisibility) {
|
if (this._rightDashboardVisibility) {
|
||||||
this.toggleDashboard();
|
this.toggleDashboard();
|
||||||
}
|
}
|
||||||
console.log('dashboard overlay clicked...');
|
// console.log('dashboard overlay clicked...');
|
||||||
}
|
}
|
||||||
|
|
||||||
_registerOverlayMouseUpEvent = () => {
|
_registerOverlayMouseUpEvent = () => {
|
||||||
this._dashboardOverlay.addEventListener('mouseup', this._dashboardOverlayMouseUpEvent);
|
this._dashboardOverlay.addEventListener('mouseup', this._dashboardOverlayMouseUpEvent);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,124 +1,124 @@
|
|||||||
class DockButtons {
|
class DockButtons {
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this._dock = document.querySelector('#dock');
|
this._dock = document.querySelector('#dock');
|
||||||
|
|
||||||
// Retrieve dockSites object from Config instance
|
// Retrieve dockSites object from Config instance
|
||||||
this.dockSites = config.getDockSites();
|
this.dockSites = config.getDockSites();
|
||||||
|
|
||||||
// Populate dock
|
// Populate dock
|
||||||
this._populateDock();
|
this._populateDock();
|
||||||
}
|
}
|
||||||
|
|
||||||
_buildDockButton = (id, className, callback = null) => {
|
_buildDockButton = (id, className, callback = null) => {
|
||||||
|
|
||||||
const dockButton = document.createElement('div');
|
const dockButton = document.createElement('div');
|
||||||
dockButton.id = `button${id}`;
|
dockButton.id = `button${id}`;
|
||||||
dockButton.className = 'dockButton';
|
dockButton.className = 'dockButton';
|
||||||
dockButton.onmouseup = callback;
|
dockButton.onmouseup = callback;
|
||||||
|
|
||||||
return dockButton;
|
return dockButton;
|
||||||
}
|
}
|
||||||
|
|
||||||
_buildDockButtonImage = (id, className, background) => {
|
_buildDockButtonImage = (id, className, background) => {
|
||||||
|
|
||||||
const buttonImage = document.createElement('div');
|
const buttonImage = document.createElement('div');
|
||||||
buttonImage.id = id;
|
buttonImage.id = id;
|
||||||
buttonImage.className = className;
|
buttonImage.className = className;
|
||||||
buttonImage.style.backgroundImage = background;
|
buttonImage.style.backgroundImage = background;
|
||||||
|
|
||||||
return buttonImage;
|
return buttonImage;
|
||||||
}
|
}
|
||||||
|
|
||||||
_generateFromManual = (id, icon, callback) => {
|
_generateFromManual = (id, icon, callback) => {
|
||||||
|
|
||||||
const dockButton = this._buildDockButton(
|
const dockButton = this._buildDockButton(
|
||||||
`button${id}`,
|
`button${id}`,
|
||||||
'dockButton',
|
'dockButton',
|
||||||
callback
|
callback
|
||||||
);
|
);
|
||||||
|
|
||||||
const buttonImage = this._buildDockButtonImage(
|
const buttonImage = this._buildDockButtonImage(
|
||||||
`buttonImage${id}`,
|
`buttonImage${id}`,
|
||||||
'dockButtonImage',
|
'dockButtonImage',
|
||||||
`url('assets/buttons/${icon}.svg')`
|
`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 site = this.dockSites[parseInt(i, 10)].site;
|
||||||
const icon = this.dockSites[i].icon;
|
const icon = this.dockSites[parseInt(i, 10)].icon;
|
||||||
const url = this.dockSites[i].url;
|
const url = this.dockSites[parseInt(i, 10)].url;
|
||||||
|
|
||||||
// Create a href
|
// Create a href
|
||||||
const aDock = document.createElement('a');
|
const aDock = document.createElement('a');
|
||||||
aDock.className = 'dockLink';
|
aDock.className = 'dockLink';
|
||||||
aDock.href = url;
|
aDock.href = url;
|
||||||
aDock.tabIndex = '-1';
|
aDock.tabIndex = '-1';
|
||||||
|
|
||||||
// Create div container
|
// Create div container
|
||||||
const dockButton = this._buildDockButton(
|
const dockButton = this._buildDockButton(
|
||||||
site,
|
site,
|
||||||
'dockButton'
|
'dockButton'
|
||||||
);
|
);
|
||||||
|
|
||||||
// Create div container for button icon
|
// Create div container for button icon
|
||||||
const buttonImage = this._buildDockButtonImage(
|
const buttonImage = this._buildDockButtonImage(
|
||||||
`buttonImage${i}`,
|
`buttonImage${i}`,
|
||||||
'dockButtonImage',
|
'dockButtonImage',
|
||||||
`url('assets/webcons/${icon}.svg')`
|
`url('assets/webcons/${icon}.svg')`
|
||||||
);
|
);
|
||||||
|
|
||||||
// Append divs
|
// Append divs
|
||||||
dockButton.appendChild(buttonImage);
|
dockButton.appendChild(buttonImage);
|
||||||
aDock.appendChild(dockButton);
|
aDock.appendChild(dockButton);
|
||||||
|
|
||||||
this._dock.appendChild(aDock);
|
this._dock.appendChild(aDock);
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_populateDock = () => {
|
_populateDock = () => {
|
||||||
|
|
||||||
// Create launcher button
|
// Create launcher button
|
||||||
this._generateFromManual(
|
this._generateFromManual(
|
||||||
'Launch',
|
'Launch',
|
||||||
'launch',
|
'launch',
|
||||||
() => {
|
() => {
|
||||||
// Toggle web menu
|
// Toggle web menu
|
||||||
webMenu.toggleWebMenu();
|
webMenu.toggleWebMenu();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
// Create dock buttons fetched from sites-list.js
|
// Create dock buttons fetched from sites-list.js
|
||||||
this._generateFromList();
|
this._generateFromList();
|
||||||
|
|
||||||
// Create weather button
|
// Create weather button
|
||||||
this._generateFromManual(
|
this._generateFromManual(
|
||||||
'Weather',
|
'Weather',
|
||||||
'weather',
|
'weather',
|
||||||
() => {
|
() => {
|
||||||
// Toggle weather screen
|
// Toggle weather screen
|
||||||
weatherScreen.toggleWeatherScreen();
|
weatherScreen.toggleWeatherScreen();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
// Create menu button
|
// Create menu button
|
||||||
this._generateFromManual(
|
this._generateFromManual(
|
||||||
'Dashboard',
|
'Dashboard',
|
||||||
'dashboard',
|
'dashboard',
|
||||||
() => {
|
() => {
|
||||||
// Toggle dashboard
|
// Toggle dashboard
|
||||||
dashboard.toggleDashboard();
|
dashboard.toggleDashboard();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -53,8 +53,8 @@ class GreeterDateMessage {
|
|||||||
greeterSuffix = 'Evening';
|
greeterSuffix = 'Evening';
|
||||||
}
|
}
|
||||||
|
|
||||||
this._greeterMessage.innerHTML = `Good<br>${greeterSuffix}!`;
|
this._greeterMessage.innerText = `Good\n${greeterSuffix}!`;
|
||||||
this._dateMessage.innerHTML = `Today's the ${this._getDayOrdinal(date.getDate())} of ` +
|
this._dateMessage.innerText = `Today's the ${this._getDayOrdinal(date.getDate())} of ` +
|
||||||
`${this._monthsArr[date.getMonth()]}, and it's ${this._daysArr[date.getDay()]}.`;
|
`${this._monthsArr[date.getMonth()]}, and it's ${this._daysArr[date.getDay()]}.`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,113 +1,113 @@
|
|||||||
class KeyBinding {
|
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._documentAddKeyDownEvent = this._documentAddKeyDownEvent.bind(this);
|
||||||
this._documentAddKeyUpEvent = this._documentAddKeyUpEvent.bind(this);
|
this._documentAddKeyUpEvent = this._documentAddKeyUpEvent.bind(this);
|
||||||
|
|
||||||
this._init();
|
this._init();
|
||||||
}
|
}
|
||||||
|
|
||||||
_init = () => {
|
_init = () => {
|
||||||
this._registerDocumentAddKeyDownEvent();
|
this._registerDocumentAddKeyDownEvent();
|
||||||
this._registerDocumentAddKeyUpEvent();
|
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();
|
e.preventDefault();
|
||||||
dashboard.toggleDashboard();
|
dashboard.toggleDashboard();
|
||||||
return;
|
return;
|
||||||
|
|
||||||
} else if (this._keysPressed['Alt'] && e.key === 'e') {
|
} else if (this._keysPressed['Alt'] && e.key === 'e') {
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
webMenu.toggleWebMenu();
|
webMenu.toggleWebMenu();
|
||||||
return;
|
return;
|
||||||
|
|
||||||
} else if (this._keysPressed['Alt'] && e.key === 'x') {
|
} else if (this._keysPressed['Alt'] && e.key === 'x') {
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
weatherScreen.toggleWeatherScreen();
|
weatherScreen.toggleWeatherScreen();
|
||||||
return;
|
return;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (e.key === 'Escape') {
|
if (e.key === 'Escape') {
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
// If any of this are open, close it
|
// If any of this are open, close it
|
||||||
if (searchBoxVisibility) {
|
if (searchBoxVisibility) {
|
||||||
|
|
||||||
// Hide searchbox
|
// Hide searchbox
|
||||||
searchBoxShow.toggleSearchBox();
|
searchBoxShow.toggleSearchBox();
|
||||||
this._searchBox.value = '';
|
this._searchBox.value = '';
|
||||||
return;
|
return;
|
||||||
|
|
||||||
} else if (dashboard.getRightDashboardVisibility()) {
|
} else if (dashboard.getRightDashboardVisibility()) {
|
||||||
|
|
||||||
// Hide dashboard
|
// Hide dashboard
|
||||||
dashboard.toggleDashboard();
|
dashboard.toggleDashboard();
|
||||||
return;
|
return;
|
||||||
|
|
||||||
} else if (weatherScreen.getWeatherScreenVisiblity()) {
|
} else if (weatherScreen.getWeatherScreenVisiblity()) {
|
||||||
|
|
||||||
// Hide weather
|
// Hide weather
|
||||||
weatherScreen.toggleWeatherScreen();
|
weatherScreen.toggleWeatherScreen();
|
||||||
return;
|
return;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show web menu
|
// Show web menu
|
||||||
webMenu.toggleWebMenu();
|
webMenu.toggleWebMenu();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!searchBoxVisibility) {
|
if (!searchBoxVisibility) {
|
||||||
|
|
||||||
// Don't show searchbox if web menu, dashboard
|
// Don't show searchbox if web menu, dashboard
|
||||||
// and weather screen is open
|
// and weather screen is open
|
||||||
if (dashboard.getRightDashboardVisibility() ||
|
if (dashboard.getRightDashboardVisibility() ||
|
||||||
webMenu.getwebMenuVisibility() ||
|
webMenu.getwebMenuVisibility() ||
|
||||||
weatherScreen.getWeatherScreenVisiblity()) return;
|
weatherScreen.getWeatherScreenVisiblity()) return;
|
||||||
|
|
||||||
// Only accept single charactered key and backspace to open search box
|
// Only accept single charactered key and backspace to open search box
|
||||||
if ((e.key.length > 1) && (e.key !== 'Backspace')) return;
|
if ((e.key.length > 1) && (e.key !== 'Backspace')) return;
|
||||||
|
|
||||||
// Open searchbox
|
// Open searchbox
|
||||||
searchBoxShow.toggleSearchBox();
|
searchBoxShow.toggleSearchBox();
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
// Backspacing while there's no search query will hide searhbox
|
// Backspacing while there's no search query will hide searhbox
|
||||||
// Will also hide if you hit enter
|
// Will also hide if you hit enter
|
||||||
if ((e.key === 'Backspace' || e.key === 'Enter') &&
|
if ((e.key === 'Backspace' || e.key === 'Enter') &&
|
||||||
this._searchBox.value < 1) { searchBoxShow.toggleSearchBox(); return; };
|
this._searchBox.value < 1) { searchBoxShow.toggleSearchBox(); return; }
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_documentAddKeyUpEvent = e => {
|
_documentAddKeyUpEvent = e => {
|
||||||
delete this._keysPressed[e.key];
|
delete this._keysPressed[e.key];
|
||||||
}
|
}
|
||||||
|
|
||||||
_registerDocumentAddKeyDownEvent = () => {
|
_registerDocumentAddKeyDownEvent = () => {
|
||||||
document.addEventListener('keydown', this._documentAddKeyDownEvent);
|
document.addEventListener('keydown', this._documentAddKeyDownEvent);
|
||||||
}
|
}
|
||||||
|
|
||||||
_registerDocumentAddKeyUpEvent = () => {
|
_registerDocumentAddKeyUpEvent = () => {
|
||||||
document.addEventListener('keyup', this._documentAddKeyUpEvent);
|
document.addEventListener('keyup', this._documentAddKeyUpEvent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -14,55 +14,55 @@ class SwipeEventManager {
|
|||||||
|
|
||||||
el.addEventListener(
|
el.addEventListener(
|
||||||
'touchstart',
|
'touchstart',
|
||||||
(event) => {
|
event => {
|
||||||
// event.preventDefault();
|
// event.preventDefault();
|
||||||
this._xDown = event.touches[0].clientX;
|
this._xDown = event.touches[0].clientX;
|
||||||
this._yDown = event.touches[0].clientY;
|
this._yDown = event.touches[0].clientY;
|
||||||
},
|
},
|
||||||
{ passive: true }
|
{ passive: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
el.addEventListener(
|
el.addEventListener(
|
||||||
'touchmove',
|
'touchmove',
|
||||||
(event) => {
|
event => {
|
||||||
// event.preventDefault();
|
// event.preventDefault();
|
||||||
if ( ! this._xDown || ! this._yDown ) {
|
if ( ! this._xDown || ! this._yDown ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const xUp = event.touches[0].clientX;
|
const xUp = event.touches[0].clientX;
|
||||||
const yUp = event.touches[0].clientY;
|
const yUp = event.touches[0].clientY;
|
||||||
const xDiff = this._xDown - xUp;
|
const xDiff = this._xDown - xUp;
|
||||||
const yDiff = this._yDown - yUp;
|
const yDiff = this._yDown - yUp;
|
||||||
|
|
||||||
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
|
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
|
||||||
if ( xDiff > 0 ) {
|
if ( xDiff > 0 ) {
|
||||||
// Left Swipe
|
// Left Swipe
|
||||||
dir = 'left'
|
dir = 'left';
|
||||||
} else {
|
} else {
|
||||||
// Right Swipe
|
// Right Swipe
|
||||||
dir = 'right';
|
dir = 'right';
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
if ( yDiff > 0 ) {
|
if ( yDiff > 0 ) {
|
||||||
// Up Swipe
|
// Up Swipe
|
||||||
dir = 'up';
|
dir = 'up';
|
||||||
} else {
|
} else {
|
||||||
// Down Swipe
|
// Down Swipe
|
||||||
dir = 'down';
|
dir = 'down';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Reset values */
|
/* Reset values */
|
||||||
this._xDown = null;
|
this._xDown = null;
|
||||||
this._yDown = null;
|
this._yDown = null;
|
||||||
|
|
||||||
if (dir !== ''){
|
if (dir !== ''){
|
||||||
if (typeof callback === 'function') {
|
if (typeof callback === 'function') {
|
||||||
callback(el, dir);
|
callback(el, dir);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
{ passive: true }
|
{ passive: true }
|
||||||
|
|||||||
@ -1,66 +1,66 @@
|
|||||||
class ProfileImage {
|
class ProfileImage {
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this._profileContainer = document.querySelector('#profileImageContainer')
|
this._profileContainer = document.querySelector('#profileImageContainer');
|
||||||
|
|
||||||
this._profileAnimRunning = false;
|
this._profileAnimRunning = false;
|
||||||
|
|
||||||
// Don't run animation on startup
|
// Don't run animation on startup
|
||||||
this._profileContainer.style.webkitAnimationPlayState = 'paused';
|
this._profileContainer.style.webkitAnimationPlayState = 'paused';
|
||||||
|
|
||||||
this.rotateProfile = this.rotateProfile.bind(this);
|
this.rotateProfile = this.rotateProfile.bind(this);
|
||||||
|
|
||||||
this._animationEndEvent = this._animationEndEvent.bind(this);
|
this._animationEndEvent = this._animationEndEvent.bind(this);
|
||||||
this._onClickEvent = this._onClickEvent.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 = () => {
|
_init = () => {
|
||||||
this._registerAnimationEndEvent();
|
this._registerAnimationEndEvent();
|
||||||
this._registerOnClickEvent();
|
this._registerOnClickEvent();
|
||||||
}
|
}
|
||||||
|
|
||||||
rotateProfile = () => {
|
rotateProfile = () => {
|
||||||
event.preventDefault;
|
event.preventDefault;
|
||||||
|
|
||||||
// Remove anim class
|
// Remove anim class
|
||||||
this._profileContainer.classList.remove('rotateProfileAnim');
|
this._profileContainer.classList.remove('rotateProfileAnim');
|
||||||
|
|
||||||
// Triggering reflow
|
// Triggering reflow
|
||||||
void this._profileContainer.offsetWidth;
|
void this._profileContainer.offsetWidth;
|
||||||
|
|
||||||
// Re-add animation class
|
// Re-add animation class
|
||||||
this._profileContainer.classList.add('rotateProfileAnim');
|
this._profileContainer.classList.add('rotateProfileAnim');
|
||||||
|
|
||||||
// Start rotation animation
|
// Start rotation animation
|
||||||
this._profileContainer.style.webkitAnimationPlayState = 'running';
|
this._profileContainer.style.webkitAnimationPlayState = 'running';
|
||||||
this._profileAnimRunning = true;
|
this._profileAnimRunning = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
_animationEndEvent = e => {
|
_animationEndEvent = e => {
|
||||||
this._profileAnimRunning = false;
|
this._profileAnimRunning = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Re-enable animation after death
|
// Re-enable animation after death
|
||||||
_registerAnimationEndEvent = () => {
|
_registerAnimationEndEvent = () => {
|
||||||
this._profileContainer.addEventListener('animationend', this._animationEndEvent);
|
this._profileContainer.addEventListener('animationend', this._animationEndEvent);
|
||||||
}
|
}
|
||||||
|
|
||||||
_onClickEvent = e => {
|
_onClickEvent = e => {
|
||||||
if (this._profileAnimRunning) return;
|
if (this._profileAnimRunning) return;
|
||||||
searchBoxShow.toggleSearchBox();
|
searchBoxShow.toggleSearchBox();
|
||||||
}
|
}
|
||||||
|
|
||||||
_registerOnClickEvent = () => {
|
_registerOnClickEvent = () => {
|
||||||
this._profileContainer.onclick = this._onClickEvent;
|
this._profileContainer.onclick = this._onClickEvent;
|
||||||
}
|
}
|
||||||
|
|
||||||
getProfileAnimationStatus = () => {
|
getProfileAnimationStatus = () => {
|
||||||
return this._profileAnimRunning;
|
return this._profileAnimRunning;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -42,7 +42,7 @@ class SearchEngineSettings {
|
|||||||
Object.keys(this._searchEngines)
|
Object.keys(this._searchEngines)
|
||||||
.forEach(key => {
|
.forEach(key => {
|
||||||
const seValue = key;
|
const seValue = key;
|
||||||
const seData = this._searchEngines[key];
|
const seData = this._searchEngines[String(key)];
|
||||||
const seOption = document.createElement('option');
|
const seOption = document.createElement('option');
|
||||||
|
|
||||||
// Generate search engine suggestions
|
// Generate search engine suggestions
|
||||||
@ -51,8 +51,8 @@ class SearchEngineSettings {
|
|||||||
`
|
`
|
||||||
<option value='${seValue}'>${seData.name}</option>
|
<option value='${seValue}'>${seData.name}</option>
|
||||||
`
|
`
|
||||||
)
|
);
|
||||||
})
|
});
|
||||||
|
|
||||||
// Call to update query string and placeholder
|
// Call to update query string and placeholder
|
||||||
this._updateSearchEngineElements();
|
this._updateSearchEngineElements();
|
||||||
@ -69,8 +69,8 @@ class SearchEngineSettings {
|
|||||||
|
|
||||||
// Use this to select the current/default search engine on startup
|
// Use this to select the current/default search engine on startup
|
||||||
_selectTheEngine = () => {
|
_selectTheEngine = () => {
|
||||||
this._selectSearchEngine.value = this._currentSearchEngine;
|
this._selectSearchEngine.value = this._currentSearchEngine;
|
||||||
this._updateSearchEngineElements();
|
this._updateSearchEngineElements();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Execute this on change event of <select>
|
// Execute this on change event of <select>
|
||||||
|
|||||||
@ -34,22 +34,22 @@ class SearchQuerySend {
|
|||||||
};
|
};
|
||||||
|
|
||||||
_keyUpEvent = event => {
|
_keyUpEvent = event => {
|
||||||
// Cancel the default action, if needed
|
// Cancel the default action, if needed
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
if (event.key === 'Tab') return;
|
if (event.key === 'Tab') return;
|
||||||
|
|
||||||
// Number 13 is the "Enter" key on the keyboard
|
// Number 13 is the "Enter" key on the keyboard
|
||||||
if (event.key === 'Enter') {
|
if (event.key === 'Enter') {
|
||||||
|
|
||||||
// Don't accept empty strings
|
// Don't accept empty strings
|
||||||
if (searchBox.value < 1) {
|
if (searchBox.value < 1) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Search the web
|
// Search the web
|
||||||
this._sendQuery()
|
this._sendQuery();
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_registerKeyUpEvent = () => {
|
_registerKeyUpEvent = () => {
|
||||||
|
|||||||
@ -1,68 +1,68 @@
|
|||||||
class SearchBoxShow {
|
class SearchBoxShow {
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
|
|
||||||
this._searchBox = document.querySelector('#searchBox');
|
this._searchBox = document.querySelector('#searchBox');
|
||||||
this._searchBoxContainer = document.querySelector('#searchBoxContainer');
|
this._searchBoxContainer = document.querySelector('#searchBoxContainer');
|
||||||
this._centeredBoxOverlay = document.querySelector('#centeredBoxOverlay');
|
this._centeredBoxOverlay = document.querySelector('#centeredBoxOverlay');
|
||||||
|
|
||||||
this._searchBoxVisility = false;
|
this._searchBoxVisility = false;
|
||||||
|
|
||||||
this.showSearchBox = this.showSearchBox.bind(this);
|
this.showSearchBox = this.showSearchBox.bind(this);
|
||||||
this.hideSearchBox = this.hideSearchBox.bind(this);
|
this.hideSearchBox = this.hideSearchBox.bind(this);
|
||||||
this.toggleSearchBox = this.toggleSearchBox.bind(this);
|
this.toggleSearchBox = this.toggleSearchBox.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
getSearchBoxVisibility = () => {
|
getSearchBoxVisibility = () => {
|
||||||
return this._searchBoxVisility;
|
return this._searchBoxVisility;
|
||||||
}
|
}
|
||||||
|
|
||||||
showSearchBox = () => {
|
showSearchBox = () => {
|
||||||
this._searchBoxContainer.classList.add('showSearchBox');
|
this._searchBoxContainer.classList.add('showSearchBox');
|
||||||
|
|
||||||
// Focus
|
// Focus
|
||||||
this._searchBox.focus();
|
this._searchBox.focus();
|
||||||
|
|
||||||
this._searchBoxVisility = !this._searchBoxVisility;
|
this._searchBoxVisility = !this._searchBoxVisility;
|
||||||
|
|
||||||
// Toggle overlay
|
// Toggle overlay
|
||||||
this._centeredBoxOverlay.classList.toggle('showOverlay');
|
this._centeredBoxOverlay.classList.toggle('showOverlay');
|
||||||
}
|
}
|
||||||
|
|
||||||
hideSearchBox = () => {
|
hideSearchBox = () => {
|
||||||
this._searchBoxContainer.classList.remove('showSearchBox');
|
this._searchBoxContainer.classList.remove('showSearchBox');
|
||||||
|
|
||||||
// Toggle overlay
|
// Toggle overlay
|
||||||
this._centeredBoxOverlay.classList.toggle('showOverlay');
|
this._centeredBoxOverlay.classList.toggle('showOverlay');
|
||||||
|
|
||||||
this._searchBox.value = '';
|
this._searchBox.value = '';
|
||||||
|
|
||||||
// Hide suggestions
|
// Hide suggestions
|
||||||
autoSuggestion.hideSuggestions();
|
autoSuggestion.hideSuggestions();
|
||||||
|
|
||||||
this._searchBoxVisility = !this._searchBoxVisility;
|
this._searchBoxVisility = !this._searchBoxVisility;
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleSearchBox = () => {
|
toggleSearchBox = () => {
|
||||||
|
|
||||||
// If profile anim is still running,
|
// If profile anim is still running,
|
||||||
// Return to avoid spam
|
// Return to avoid spam
|
||||||
if (profileImage.getProfileAnimationStatus()) return;
|
if (profileImage.getProfileAnimationStatus()) return;
|
||||||
|
|
||||||
// Rotate profile
|
// Rotate profile
|
||||||
profileImage.rotateProfile();
|
profileImage.rotateProfile();
|
||||||
|
|
||||||
if (this._searchBoxVisility) {
|
if (this._searchBoxVisility) {
|
||||||
// Hide search box
|
// Hide search box
|
||||||
this.hideSearchBox();
|
this.hideSearchBox();
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
// Show search box
|
// Show search box
|
||||||
this.showSearchBox();
|
this.showSearchBox();
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('toggle searchbox');
|
// console.log('toggle searchbox');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -53,13 +53,13 @@ class ThemeEngine {
|
|||||||
if (!colorRGBA) {
|
if (!colorRGBA) {
|
||||||
|
|
||||||
// If RGB - (#RRGGBB)
|
// 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
|
// Add completely opaque alpha
|
||||||
return colorStr + 'FF';
|
return colorStr + 'FF';
|
||||||
|
|
||||||
// If three-charactered HEX color - (#RGB)
|
// 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
|
// 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');
|
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 {
|
} else {
|
||||||
alert('Invalid color');
|
alert('Invalid color');
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -158,7 +159,7 @@ class ThemeEngine {
|
|||||||
foregroundOpacity,
|
foregroundOpacity,
|
||||||
blurStrength,
|
blurStrength,
|
||||||
animSpeed
|
animSpeed
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
_updateCSSconstiables = () => {
|
_updateCSSconstiables = () => {
|
||||||
|
|||||||
@ -42,7 +42,7 @@ class WeatherScreen {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_getWeatherIcon = code => {
|
_getWeatherIcon = code => {
|
||||||
const icon_tbl = {
|
const iconTbl = {
|
||||||
'01d': 'sun_icon.svg',
|
'01d': 'sun_icon.svg',
|
||||||
'01n': 'moon_icon.svg',
|
'01n': 'moon_icon.svg',
|
||||||
'02d': 'dfew_clouds.svg',
|
'02d': 'dfew_clouds.svg',
|
||||||
@ -63,7 +63,7 @@ class WeatherScreen {
|
|||||||
'50n': 'nmist.svg'
|
'50n': 'nmist.svg'
|
||||||
};
|
};
|
||||||
|
|
||||||
return icon_tbl[code];
|
return iconTbl[String(code)];
|
||||||
}
|
}
|
||||||
|
|
||||||
_updateWeatherDockButton = icon => {
|
_updateWeatherDockButton = icon => {
|
||||||
@ -73,15 +73,15 @@ class WeatherScreen {
|
|||||||
|
|
||||||
_setWeatherValue = (loc, desc, icon, sunr, suns, updt) => {
|
_setWeatherValue = (loc, desc, icon, sunr, suns, updt) => {
|
||||||
|
|
||||||
this._weatherLocation.innerHTML = loc;
|
this._weatherLocation.innerText = loc;
|
||||||
this._weatherDescription.innerHTML = desc + this._tempSymbol;
|
this._weatherDescription.innerText = desc + this._tempSymbol;
|
||||||
|
|
||||||
this._weatherIcon.style.background = `url('assets/weather-icons/${icon}')`;
|
this._weatherIcon.style.background = `url('assets/weather-icons/${icon}')`;
|
||||||
this._weatherIcon.style.backgroundSize = 'cover';
|
this._weatherIcon.style.backgroundSize = 'cover';
|
||||||
|
|
||||||
this._sunriseHour.innerHTML = sunr;
|
this._sunriseHour.innerText = sunr;
|
||||||
this._sunsetHour.innerHTML = suns;
|
this._sunsetHour.innerText = suns;
|
||||||
this._updateHour.innerHTML = updt;
|
this._updateHour.innerText = updt;
|
||||||
|
|
||||||
// Update weather button on dock
|
// Update weather button on dock
|
||||||
this._updateWeatherDockButton(icon);
|
this._updateWeatherDockButton(icon);
|
||||||
@ -90,9 +90,9 @@ class WeatherScreen {
|
|||||||
_createForecastBody = (fIcon, forecastTemp, foreDescription, dayName, fHour) => {
|
_createForecastBody = (fIcon, forecastTemp, foreDescription, dayName, fHour) => {
|
||||||
|
|
||||||
// Generate forecast
|
// Generate forecast
|
||||||
this._forecastContainer.insertAdjacentHTML(
|
this._forecastContainer.insertAdjacentHTML(
|
||||||
'beforeend',
|
'beforeend',
|
||||||
`
|
`
|
||||||
<div class='weatherForecastDay'>
|
<div class='weatherForecastDay'>
|
||||||
<div class='weatherForecastDayDate'>
|
<div class='weatherForecastDayDate'>
|
||||||
<div class='weatherForecastDayDateName'>${dayName}</div>
|
<div class='weatherForecastDayDateName'>${dayName}</div>
|
||||||
@ -107,7 +107,7 @@ class WeatherScreen {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -136,7 +136,7 @@ class WeatherScreen {
|
|||||||
const wLoc = cityName + ', ' + countryName;
|
const wLoc = cityName + ', ' + countryName;
|
||||||
|
|
||||||
let wDesc = weatherDescription + ', ' + weatherTemp;
|
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 wIcon = this._getWeatherIcon(weatherIcon);
|
||||||
const rise = this._formatUnixTime(sunRise);
|
const rise = this._formatUnixTime(sunRise);
|
||||||
@ -158,7 +158,7 @@ class WeatherScreen {
|
|||||||
callback(JSON.parse(request.response));
|
callback(JSON.parse(request.response));
|
||||||
} else {
|
} else {
|
||||||
this._setErrValue();
|
this._setErrValue();
|
||||||
};
|
}
|
||||||
};
|
};
|
||||||
request.send();
|
request.send();
|
||||||
}
|
}
|
||||||
@ -204,17 +204,17 @@ class WeatherScreen {
|
|||||||
_processForecastData = data => {
|
_processForecastData = data => {
|
||||||
|
|
||||||
// Empty forecast container to avoid duplication
|
// Empty forecast container to avoid duplication
|
||||||
this._forecastContainer.innerHTML = '';
|
this._forecastContainer.innerText = '';
|
||||||
|
|
||||||
const forecast = data.list;
|
const forecast = data.list;
|
||||||
|
|
||||||
for (let i = 8; i < forecast.length; i+=8) {
|
for (let i = 8; i < forecast.length; i+=8) {
|
||||||
|
|
||||||
const foreIcon = forecast[i].weather[0].icon;
|
const foreIcon = forecast[parseInt(i, 10)].weather[0].icon;
|
||||||
const minimumTemp = forecast[i].main.temp_min;
|
const minimumTemp = forecast[parseInt(i, 10)].main.temp_min;
|
||||||
const maximumTemp = forecast[i].main.temp_max;
|
const maximumTemp = forecast[parseInt(i, 10)].main.temp_max;
|
||||||
const foreDescription = forecast[i].weather[0].description;
|
const foreDescription = forecast[parseInt(i, 10)].weather[0].description;
|
||||||
const dateTime = forecast[i].dt_txt;
|
const dateTime = forecast[parseInt(i, 10)].dt_txt;
|
||||||
|
|
||||||
const fIcon = this._getWeatherIcon(foreIcon);
|
const fIcon = this._getWeatherIcon(foreIcon);
|
||||||
const minTemp = Math.floor(minimumTemp);
|
const minTemp = Math.floor(minimumTemp);
|
||||||
@ -233,51 +233,51 @@ class WeatherScreen {
|
|||||||
|
|
||||||
showWeatherScreen = () => {
|
showWeatherScreen = () => {
|
||||||
this._weatherScreen.classList.add('showWeatherScreen');
|
this._weatherScreen.classList.add('showWeatherScreen');
|
||||||
this._weatherScreenVisibility = !this._weatherScreenVisibility;
|
this._weatherScreenVisibility = !this._weatherScreenVisibility;
|
||||||
}
|
}
|
||||||
|
|
||||||
hideWeatherScreen = () => {
|
hideWeatherScreen = () => {
|
||||||
this._weatherScreen.classList.remove('showWeatherScreen');
|
this._weatherScreen.classList.remove('showWeatherScreen');
|
||||||
this._weatherScreenVisibility = !this._weatherScreenVisibility;
|
this._weatherScreenVisibility = !this._weatherScreenVisibility;
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleWeatherScreen = () => {
|
toggleWeatherScreen = () => {
|
||||||
|
|
||||||
console.log('toggle weather screen');
|
// console.log('toggle weather screen');
|
||||||
|
|
||||||
// If profile anim is still running,
|
// If profile anim is still running,
|
||||||
// Return to avoid spam
|
// Return to avoid spam
|
||||||
if (profileImage.getProfileAnimationStatus()) return;
|
if (profileImage.getProfileAnimationStatus()) return;
|
||||||
|
|
||||||
// Rotate profile
|
// Rotate profile
|
||||||
profileImage.rotateProfile();
|
profileImage.rotateProfile();
|
||||||
|
|
||||||
if (this._weatherScreenVisibility) {
|
if (this._weatherScreenVisibility) {
|
||||||
// Hide weather screen
|
// Hide weather screen
|
||||||
this.hideWeatherScreen();
|
this.hideWeatherScreen();
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
// Show weather screen
|
// Show weather screen
|
||||||
this.showWeatherScreen();
|
this.showWeatherScreen();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check if any of these are open, if yes, close it
|
// Check if any of these are open, if yes, close it
|
||||||
if (this._webMenu.classList.contains('showWebMenu')) {
|
if (this._webMenu.classList.contains('showWebMenu')) {
|
||||||
console.log('web menu is open, closing...');
|
// console.log('web menu is open, closing...');
|
||||||
webMenu.hideWebMenu();
|
webMenu.hideWebMenu();
|
||||||
return;
|
return;
|
||||||
|
|
||||||
} else if (this._searchBoxContainer.classList.contains('showSearchBox')) {
|
} else if (this._searchBoxContainer.classList.contains('showSearchBox')) {
|
||||||
console.log('searchbox is open, closing...');
|
// console.log('searchbox is open, closing...');
|
||||||
searchBoxShow.hideSearchBox();
|
searchBoxShow.hideSearchBox();
|
||||||
|
|
||||||
} else if (this._dashboard.classList.contains('showRightDashboard')) {
|
} else if (this._dashboard.classList.contains('showRightDashboard')) {
|
||||||
console.log('dashboard is open, closing...');
|
// console.log('dashboard is open, closing...');
|
||||||
dashboard.hideDashboard();
|
dashboard.hideDashboard();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Toggle center box
|
// Toggle center box
|
||||||
centeredBox.toggleCenteredBox();
|
centeredBox.toggleCenteredBox();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -105,7 +105,7 @@ class WeatherSettings {
|
|||||||
_deniedGeolocation = () => {
|
_deniedGeolocation = () => {
|
||||||
|
|
||||||
alert(`Location access denied! If you're on mobile, make sure to`+
|
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)) {
|
if ((this._origLongitude !== currentCoord.longitude) || (this._origLatitude !== currentCoord.latitude)) {
|
||||||
|
|
||||||
console.log('update current position');
|
// console.log('update current position');
|
||||||
|
|
||||||
// Update origPositions
|
// Update origPositions
|
||||||
this._origLongitude = currentCoord.longitude;
|
this._origLongitude = currentCoord.longitude;
|
||||||
@ -131,9 +131,9 @@ class WeatherSettings {
|
|||||||
// Error
|
// Error
|
||||||
_watchGeoError = err => {
|
_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();
|
this._deniedGeolocation();
|
||||||
|
|
||||||
@ -150,7 +150,7 @@ class WeatherSettings {
|
|||||||
|
|
||||||
navigator.permissions.query({name:'geolocation'}).then(result => {
|
navigator.permissions.query({name:'geolocation'}).then(result => {
|
||||||
|
|
||||||
if ((result.state === 'prompt') || (result.state == 'granted')) {
|
if ((result.state === 'prompt') || (result.state === 'granted')) {
|
||||||
|
|
||||||
this._watchGeoPosition();
|
this._watchGeoPosition();
|
||||||
|
|
||||||
@ -170,13 +170,13 @@ class WeatherSettings {
|
|||||||
|
|
||||||
if (this._locatorMode === 'geolocation') {
|
if (this._locatorMode === 'geolocation') {
|
||||||
|
|
||||||
console.log('geolocation');
|
// console.log('geolocation');
|
||||||
|
|
||||||
this._weatherSettingsCityIDGroup.classList.add('hideWeatherSettings');
|
this._weatherSettingsCityIDGroup.classList.add('hideWeatherSettings');
|
||||||
|
|
||||||
} else if (this._locatorMode === 'city') {
|
} else if (this._locatorMode === 'city') {
|
||||||
|
|
||||||
console.log('city');
|
// console.log('city');
|
||||||
|
|
||||||
this._weatherSettingsCityIDGroup.classList.remove('hideWeatherSettings');
|
this._weatherSettingsCityIDGroup.classList.remove('hideWeatherSettings');
|
||||||
|
|
||||||
|
|||||||
145
js/web-menu.js
145
js/web-menu.js
@ -37,12 +37,12 @@ class WebMenu {
|
|||||||
|
|
||||||
// Disable textboxes
|
// Disable textboxes
|
||||||
_disableWebMenuInputs = status => {
|
_disableWebMenuInputs = status => {
|
||||||
const elems = this._webMenuScreen.getElementsByTagName('input');
|
const elems = this._webMenuScreen.getElementsByTagName('input');
|
||||||
const len = elems.length;
|
const len = elems.length;
|
||||||
|
|
||||||
for (let i = 0; i < len; i++) {
|
for (let i = 0; i < len; i++) {
|
||||||
elems[i].disabled = status;
|
elems[parseInt(i, 10)].disabled = status;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Create callback property, to be used when enter was pressed while item is focused
|
// 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
|
// Create a callback property for the passed li
|
||||||
li.callback = () => {
|
li.callback = () => {
|
||||||
window.location.href = encodeURI(url);
|
window.location.href = encodeURI(url);
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Sort list alphabetically
|
// Sort list alphabetically
|
||||||
_sortList = () => {
|
_sortList = () => {
|
||||||
Array.from(this._webMenuList.getElementsByTagName('li'))
|
Array.from(this._webMenuList.getElementsByTagName('li'))
|
||||||
.sort((a, b) => a.textContent.localeCompare(b.textContent))
|
.sort((a, b) => a.textContent.localeCompare(b.textContent))
|
||||||
.forEach(li => this._webMenuList.appendChild(li));
|
.forEach(li => this._webMenuList.appendChild(li));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Create/generate web items
|
// Create/generate web items
|
||||||
@ -81,7 +81,7 @@ class WebMenu {
|
|||||||
<div class='webItemContainer'>
|
<div class='webItemContainer'>
|
||||||
<div class='webItemBody'>
|
<div class='webItemBody'>
|
||||||
<div class='webItemIconContainer'>
|
<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>
|
||||||
<div class='webItemName'>${site}</div>
|
<div class='webItemName'>${site}</div>
|
||||||
</div>
|
</div>
|
||||||
@ -89,7 +89,7 @@ class WebMenu {
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
`
|
`
|
||||||
)
|
);
|
||||||
|
|
||||||
// Create callback property
|
// Create callback property
|
||||||
this._createWebItemCallback(li, url);
|
this._createWebItemCallback(li, url);
|
||||||
@ -103,18 +103,25 @@ class WebMenu {
|
|||||||
|
|
||||||
// Allow fuzzy searching in web menu
|
// Allow fuzzy searching in web menu
|
||||||
_fuzzySearch = () => {
|
_fuzzySearch = () => {
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-extend-native
|
||||||
String.prototype.fuzzy = function(term, ratio) {
|
String.prototype.fuzzy = function(term, ratio) {
|
||||||
const string = this.toLowerCase();
|
const string = this.toLowerCase();
|
||||||
const compare = term.toLowerCase();
|
const compare = term.toLowerCase();
|
||||||
let matches = 0;
|
let matches = 0;
|
||||||
|
|
||||||
// Covers basic partial matches
|
// Covers basic partial matches
|
||||||
if (string.indexOf(compare) > -1) return true;
|
if (string.indexOf(compare) > -1) return true;
|
||||||
|
|
||||||
for (let i = 0; i < compare.length; i++) {
|
for (let i = 0; i < compare.length; i++) {
|
||||||
string.indexOf(compare[i]) > -1 ? matches += 1 : matches -=1;
|
const ind = string.indexOf(compare[parseInt(i, 10)]);
|
||||||
}
|
if (ind > -1) {
|
||||||
return ((matches / this.length) >= ratio || term === '');
|
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
|
// Loop through all list items, and focus if matches the search query
|
||||||
for (let i = 0; i < li.length; i++) {
|
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;
|
txtValue = a.innerHTML || a.textContent || a.innerText;
|
||||||
|
|
||||||
// If an item match, hightlight it and focus
|
// If an item match, hightlight it and focus
|
||||||
@ -144,7 +151,7 @@ class WebMenu {
|
|||||||
oldWebItemFocusChild.classList.remove('webItemFocus');
|
oldWebItemFocusChild.classList.remove('webItemFocus');
|
||||||
|
|
||||||
// Update webItemFocus
|
// Update webItemFocus
|
||||||
this._webItemFocus = li[i];
|
this._webItemFocus = li[parseInt(i, 10)];
|
||||||
|
|
||||||
// Update weblistindex
|
// Update weblistindex
|
||||||
this._webListIndex = i;
|
this._webListIndex = i;
|
||||||
@ -192,22 +199,22 @@ class WebMenu {
|
|||||||
// Enable inputs
|
// Enable inputs
|
||||||
this._disableWebMenuInputs(false);
|
this._disableWebMenuInputs(false);
|
||||||
|
|
||||||
this._webMenuVisibility = !this._webMenuVisibility;
|
this._webMenuVisibility = !this._webMenuVisibility;
|
||||||
|
|
||||||
// Focus to input field
|
// Focus to input field
|
||||||
this._webMenuSearchBox.focus();
|
this._webMenuSearchBox.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide web menu screen
|
// Hide web menu screen
|
||||||
hideWebMenu = () => {
|
hideWebMenu = () => {
|
||||||
// Clear input field
|
// Clear input field
|
||||||
this._webMenuSearchBox.value = '';
|
this._webMenuSearchBox.value = '';
|
||||||
|
|
||||||
// Unfocus input field
|
// Unfocus input field
|
||||||
this._webMenuSearchBox.blur();
|
this._webMenuSearchBox.blur();
|
||||||
|
|
||||||
// Refilter web list
|
// Refilter web list
|
||||||
this._filterWebList();
|
this._filterWebList();
|
||||||
|
|
||||||
// Scroll to top
|
// Scroll to top
|
||||||
this._webMenuListContainer.scrollTop = 0;
|
this._webMenuListContainer.scrollTop = 0;
|
||||||
@ -223,48 +230,48 @@ class WebMenu {
|
|||||||
// Disable inputs
|
// Disable inputs
|
||||||
this._disableWebMenuInputs(true);
|
this._disableWebMenuInputs(true);
|
||||||
|
|
||||||
this._webMenuVisibility = !this._webMenuVisibility;
|
this._webMenuVisibility = !this._webMenuVisibility;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Toggle web menu screen
|
// Toggle web menu screen
|
||||||
toggleWebMenu = () => {
|
toggleWebMenu = () => {
|
||||||
|
|
||||||
console.log('toggle web menu');
|
// console.log('toggle web menu');
|
||||||
|
|
||||||
// If profile anim is still running,
|
// If profile anim is still running,
|
||||||
// Return to avoid spam
|
// Return to avoid spam
|
||||||
if (profileImage.getProfileAnimationStatus()) return;
|
if (profileImage.getProfileAnimationStatus()) return;
|
||||||
|
|
||||||
// Rotate profile
|
// Rotate profile
|
||||||
profileImage.rotateProfile();
|
profileImage.rotateProfile();
|
||||||
|
|
||||||
if (this._webMenuVisibility) {
|
if (this._webMenuVisibility) {
|
||||||
// Hide web menu
|
// Hide web menu
|
||||||
this.hideWebMenu();
|
this.hideWebMenu();
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
// Show Web menu
|
// Show Web menu
|
||||||
this.showWebMenu();
|
this.showWebMenu();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check if any of these are open, if yes, close it
|
// Check if any of these are open, if yes, close it
|
||||||
if (searchBoxContainer.classList.contains('showSearchBox')) {
|
if (searchBoxContainer.classList.contains('showSearchBox')) {
|
||||||
console.log('searchbox is open, closing...');
|
// console.log('searchbox is open, closing...');
|
||||||
searchBoxShow.hideSearchBox();
|
searchBoxShow.hideSearchBox();
|
||||||
|
|
||||||
} else if (this._dashboard.classList.contains('showRightDashboard')) {
|
} else if (this._dashboard.classList.contains('showRightDashboard')) {
|
||||||
console.log('dashboard is open, closing...');
|
// console.log('dashboard is open, closing...');
|
||||||
dashboard.hideDashboard();
|
dashboard.hideDashboard();
|
||||||
|
|
||||||
} else if (this._weatherScreen.classList.contains('showWeatherScreen')) {
|
} else if (this._weatherScreen.classList.contains('showWeatherScreen')) {
|
||||||
console.log('weather screen is open, closing...');
|
// console.log('weather screen is open, closing...');
|
||||||
weatherScreen.hideWeatherScreen();
|
weatherScreen.hideWeatherScreen();
|
||||||
return;
|
return;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Toggle center box
|
// Toggle center box
|
||||||
centeredBox.toggleCenteredBox();
|
centeredBox.toggleCenteredBox();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove focus class
|
// Remove focus class
|
||||||
@ -304,7 +311,7 @@ class WebMenu {
|
|||||||
const containerWindow = ((window.innerWidth - (menuItemWidth / 2) - scrollBarWidth - vw(24)) / menuItemWidth);
|
const containerWindow = ((window.innerWidth - (menuItemWidth / 2) - scrollBarWidth - vw(24)) / menuItemWidth);
|
||||||
// Get rounded result
|
// Get rounded result
|
||||||
return Math.round(containerWindow);
|
return Math.round(containerWindow);
|
||||||
}
|
};
|
||||||
|
|
||||||
// Determine the index position by key
|
// Determine the index position by key
|
||||||
const changeWebListIndex = () => {
|
const changeWebListIndex = () => {
|
||||||
@ -330,24 +337,24 @@ class WebMenu {
|
|||||||
this._webMenuSearchBox.value = '';
|
this._webMenuSearchBox.value = '';
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const changeItemFocus = (condition, overFlowIndex) => {
|
const changeItemFocus = (condition, overFlowIndex) => {
|
||||||
const next = this._webMenuList.getElementsByTagName('li')[this._webListIndex];
|
const next = this._webMenuList.getElementsByTagName('li')[this._webListIndex];
|
||||||
if(typeof next !== undefined && condition) {
|
if(typeof next !== 'undefined' && condition) {
|
||||||
this._webItemFocus = next;
|
this._webItemFocus = next;
|
||||||
} else {
|
} else {
|
||||||
this._webListIndex = overFlowIndex;
|
this._webListIndex = overFlowIndex;
|
||||||
this._webItemFocus = this._webMenuList.getElementsByTagName('li')[overFlowIndex];
|
this._webItemFocus = this._webMenuList.getElementsByTagName('li')[parseInt(overFlowIndex, 10)];
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const changeItemFocusByKey = () => {
|
const changeItemFocusByKey = () => {
|
||||||
if (key === right) { 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 === left) { return changeItemFocus((this._webListIndex >= 0), len); }
|
||||||
if (key === up) { 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 === down) { return changeItemFocus((this._webListIndex <= len), 0); }
|
||||||
}
|
};
|
||||||
|
|
||||||
changeWebListIndex();
|
changeWebListIndex();
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user