diff --git a/README.md b/README.md index d0af5eb..bcb3547 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,15 @@ ## A bloated and modern-looking startpage -[![maintained](https://img.shields.io/maintenance/yes/2020?label=maintained&style=flat-square)](https://github.com/manilarome/the-glorious-startpage/commits/master) [![contributions](https://img.shields.io/badge/contribution-welcome-brightgreen&?style=flat-square)](https://github.com/manilarome/the-glorious-startpage/pulls) [![HitCount](http://hits.dwyl.com/manilarome/the-glorious-startpage.svg)](http://hits.dwyl.com/manilarome/the-glorious-startpage) +[![maintained](https://img.shields.io/maintenance/yes/2020?label=maintained&style=flat-square)](https://github.com/manilarome/the-glorious-startpage/commits/master) [![contributions](https://img.shields.io/badge/contribution-welcome-brightgreen&?style=flat-square)](https://github.com/manilarome/the-glorious-startpage/pulls) [![HitCount](http://hits.dwyl.com/manilarome/the-glorious-startpage.svg)](http://hits.dwyl.com/manilarome/the-glorious-startpage) [![Codacy Badge](https://app.codacy.com/project/badge/Grade/d942895baf48442d8c9df54306887aa0)](https://www.codacy.com/manual/manilarome/the-glorious-startpage?utm_source=github.com&utm_medium=referral&utm_content=manilarome/the-glorious-startpage&utm_campaign=Badge_Grade) ## [Live Preview](https://manilarome.github.io/the-glorious-startpage/) ## Gallery
-

- -

+

+ +

diff --git a/css/bars/bar.css b/css/bars/bar.css index 31ccfc5..78ff84a 100644 --- a/css/bars/bar.css +++ b/css/bars/bar.css @@ -3,11 +3,11 @@ backdrop-filter: blur(var(--blur-strength)); z-index: 5; - /*Make clock unselectable*/ + /* Make clock unselectable */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -} \ No newline at end of file +} diff --git a/css/bars/clock.css b/css/bars/clock.css index 02a970c..c3be63a 100644 --- a/css/bars/clock.css +++ b/css/bars/clock.css @@ -4,9 +4,9 @@ font-family: roboto-bold, sans-serif; font-weight: 700; - /*Center lock*/ + /* Center lock */ text-align: center; position: relative; - top: 50%; - transform: translateY(-50%); -} \ No newline at end of file + top: 50%; + transform: translateY(-50%); +} diff --git a/css/bars/dock-buttons.css b/css/bars/dock-buttons.css index e76ef48..eb8a2d3 100644 --- a/css/bars/dock-buttons.css +++ b/css/bars/dock-buttons.css @@ -1,4 +1,4 @@ -/*Dock buttons*/ +/* Dock buttons */ .dockButton { background: var(--base-container); width: 36px; @@ -9,23 +9,22 @@ padding: 5px; border: none; cursor: pointer; - transition: transform .2s; + transition: transform 0.2s; } -/*The a href container/main dock button container*/ +/* The a href container/main dock button container */ .dockLink { - /*Act as div*/ + /* Act as div */ display: block; - /*Remove outlines*/ + /* Remove outlines */ text-decoration: none; outline: 0; border: none; -moz-outline-style: none; - /*Disable dragging*/ + /* Disable dragging */ user-select: none; - user-drag: none; -webkit-user-drag: none; } @@ -41,28 +40,30 @@ top: 0; bottom: 0; margin: auto; - max-width: 100%; max-height: 100%; overflow: auto; } +/* Dock button hover */ .dockButton:hover { background: var(--base-hover-bg); -ms-transform: scale(1.25); -webkit-transform: scale(1.25); - transform: scale(1.25); + transform: scale(1.25); } +/* Dock button active */ .dockButton:active { background: var(--base-active-bg); -ms-transform: scale(1); -webkit-transform: scale(1); - transform: scale(1); + transform: scale(1); } +/* Dock button image */ .dockButtonImage { background-size: cover; -} \ No newline at end of file +} diff --git a/css/bars/dock.css b/css/bars/dock.css index 6f24837..5986c82 100644 --- a/css/bars/dock.css +++ b/css/bars/dock.css @@ -2,22 +2,22 @@ background: transparent; position: absolute; z-index: 5; - margin: 0 auto; - bottom: 0; + margin: 0 auto; + bottom: 0; - /*On bottom, center horizontally*/ + /* On bottom, center horizontally */ left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); - /*Add transition*/ + /* Add transition */ transition: opacity var(--transition-speed); } #dock { background: var(--panel-bg); - border-radius: var(--rounded-radius); - + border-radius: var(--rounded-radius); + display: flex; position: relative; height: auto; @@ -26,159 +26,149 @@ padding: 5px; margin: 10px; - transition: transform var(--transition-speed); + transition: transform var(--transition-speed); z-index: 1; } -/*Translate dock to left side if width <= 470 and height >= 540*/ +/* Translate dock to left side if width <= 470 and height >= 540 */ @media screen and (max-width: 470px) and (min-height: 490px) { - .dockContainer { display: inline-block; opacity: 1; - position: relative; - margin:0 auto; + position: relative; + margin: 0 auto; - top: 50%; - left: 0; - bottom: 0; - right: 0; + top: 50%; + left: 0; + bottom: 0; + right: 0; - -webkit-transform: translateY(-50%); - transition: opacity var(--transition-speed); + -webkit-transform: translateY(-50%); + transition: opacity var(--transition-speed); } #dock { display: inline-block; - width: auto; - height: auto; + width: auto; + height: auto; margin: 5px; - transform: scale(0.90); + transform: scale(0.9); transition: transform var(--transition-speed); } } - -/*Decrease scale to 0.85 if width is less than 470px*/ +/* Decrease scale to 0.85 if width is less than 470px */ @media screen and (max-width: 469px) and (max-height: 489px) { - .dockContainer { position: absolute; background: transparent; z-index: 5; - margin: 0 auto; - bottom: 0; + margin: 0 auto; + bottom: 0; - /*On bottom, center horizontally*/ + /* On bottom, center horizontally */ left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); - /*Add transition*/ + /* Add transition */ transition: opacity var(--transition-speed); } #dock { display: flex; - width: auto; - height: auto; + width: auto; + height: auto; margin: 5px; transform: scale(0.85); transition: transform var(--transition-speed); } - } - -/*Decrease scale to 0.75 if width is less than 380px*/ +/* Decrease scale to 0.75 if width is less than 380px */ @media screen and (max-width: 380px) and (max-height: 489px) { - .dockContainer { position: absolute; background: transparent; z-index: 5; - margin: 0 auto; - bottom: 0; + margin: 0 auto; + bottom: 0; - /*On bottom, center horizontally*/ + /* On bottom, center horizontally */ left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); - /*Add transition*/ + /* Add transition */ transition: opacity var(--transition-speed); } #dock { display: flex; - width: auto; - height: auto; + width: auto; + height: auto; margin: 5px; transform: scale(0.75); transition: transform var(--transition-speed); } - } -/*Decrease scale to 0.70 if width is less than or equal to 374px and greater than or equal to 320px*/ +/* Decrease scale to 0.70 if width is less than or equal to 374px and greater than or equal to 320px */ @media screen and (max-width: 350px) and (min-width: 320px) and (max-height: 489px) { - .dockContainer { position: absolute; background: transparent; z-index: 5; - margin: 0 auto; - bottom: 0; + margin: 0 auto; + bottom: 0; - /*On bottom, center horizontally*/ + /* On bottom, center horizontally */ left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); - /*Add transition*/ + /* Add transition */ transition: opacity var(--transition-speed); } #dock { display: flex; - width: auto; - height: auto; + width: auto; + height: auto; margin: 5px; - transform: scale(0.70); + transform: scale(0.7); transition: transform var(--transition-speed); } } - -/*Scale to 0 if less than 320px*/ +/* Scale to 0 if less than 320px */ @media screen and (max-width: 319px) and (max-height: 489px) { - .dockContainer { position: absolute; background: transparent; z-index: 5; - margin: 0 auto; - bottom: 0; + margin: 0 auto; + bottom: 0; - /*On bottom, center horizontally*/ + /* On bottom, center horizontally */ left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); - /*Add transition*/ + /* Add transition */ transition: opacity var(--transition-speed); } #dock { display: flex; - width: auto; - height: auto; - opacity: 0; + width: auto; + height: auto; + opacity: 0; margin: 5px; - transform: scale(0.0); - transition: transform var(--transition-speed), + transform: scale(0); + transition: + transform var(--transition-speed), opacity var(--transition-speed); } - -} \ No newline at end of file +} diff --git a/css/bars/top-panel.css b/css/bars/top-panel.css index a35531b..3617ae8 100644 --- a/css/bars/top-panel.css +++ b/css/bars/top-panel.css @@ -2,4 +2,4 @@ width: 100vw; height: 32px; position: absolute; -} \ No newline at end of file +} diff --git a/css/base/base.css b/css/base/base.css index b5e1666..56619b2 100644 --- a/css/base/base.css +++ b/css/base/base.css @@ -1,65 +1,5 @@ -:root { - /* Colors */ - --base-body-bg: #1A1A1AFF; - - --base-bg: #00000060; - --base-color: #FEFEFEFF; - --base-container: #F2F2F220; - - --base-hover-bg: #F2F2F230; - --base-focus-bg: #F2F2F245; - --base-active-bg: #FEFEFE60; - - --blur-strength: 6px; - - --panel-bg: var(--base-bg); - --panel-color: var(--base-color); - - --transition-speed: 300ms; - - --rounded-radius: 12px; -} - -* { - box-sizing: border-box; - - /*Font rendering*/ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - font-variant-ligatures: none; - - /*Disable tap hightlight color on mobile devices*/ - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -} - -body { - top: 0; - left: 0; - width: 100%; - height: 100%; - margin: 0; - padding: 0; - overflow: hidden; - background: var(--base-body-bg); - color: var(--foreground); -} - -html, body { - font-family: roboto, sans-serif; - height: 100%; - position: fixed; -} - -/*Placeholder*/ -::placeholder { - color: var(--base-color); - opacity: 0.65; -} - -/*Scrollbar*/ -/* width */ +/* Scrollbar */ +/* Width */ ::-webkit-scrollbar { width: 10px; } @@ -74,28 +14,82 @@ html, body { background: var(--base-active-bg); } +:root { + /* Colors */ + --base-body-bg: #1a1a1aff; + --base-bg: #00000060; + --base-color: #fefefeff; + --base-container: #f2f2f220; + --base-hover-bg: #f2f2f230; + --base-focus-bg: #f2f2f245; + --base-active-bg: #fefefe60; + --blur-strength: 6px; + --panel-bg: var(--base-bg); + --panel-color: var(--base-color); + --transition-speed: 300ms; + --rounded-radius: 12px; +} + +/* Placeholder */ +::placeholder { + color: var(--base-color); + opacity: 0.65; +} + /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: var(--base-hover-bg); } -/*Hide focus elements outline*/ -input:focus, -textarea:focus, -select:focus{ - outline: none; +* { + box-sizing: border-box; + + /* Font rendering */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + font-variant-ligatures: none; + + /* Disable tap hightlight color on mobile devices */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -select::-ms-expand { - display: none; +body { + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow: hidden; + background: var(--base-body-bg); + color: var(--foreground); } -/*Select*/ +html, +body { + font-family: roboto, sans-serif; + height: 100%; + position: fixed; +} + +/* Select */ select { text-align: center; text-align-last: center; } +/* Hide focus elements outline */ +input:focus, +textarea:focus, +select:focus { + outline: none; +} + +select::-ms-expand { + display: none; +} + option { text-align: left; } diff --git a/css/base/dummy-body-background.css b/css/base/dummy-body-background.css index 3a32313..f62c00a 100644 --- a/css/base/dummy-body-background.css +++ b/css/base/dummy-body-background.css @@ -19,4 +19,4 @@ .dummyBackgroundHide { opacity: 0; -} \ No newline at end of file +} diff --git a/css/base/font-face.css b/css/base/font-face.css index 1614fce..805b5dc 100644 --- a/css/base/font-face.css +++ b/css/base/font-face.css @@ -1,16 +1,19 @@ +/* Fantasque Sans */ @font-face { font-family: 'fantasque-sans-mono'; font-style: normal; src: url('../../fonts/fantasque-sans-mono-bold-italic-nerd-font-complete.ttf'); } -/*Roboto light*/ +/* Roboto light */ @font-face { font-family: 'roboto-light'; font-style: normal; font-weight: 300; src: url('../../fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */ - src: local('Roboto Light'), local('Roboto-Light'), + src: + local('Roboto Light'), + local('Roboto-Light'), url('../../fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../../fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */ @@ -18,13 +21,15 @@ url('../../fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */ } -/*Roboto normal*/ +/* Roboto normal */ @font-face { font-family: 'roboto'; font-style: normal; font-weight: 400; src: url('../../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */ - src: local('Roboto'), local('Roboto-Regular'), + src: + local('Roboto'), + local('Roboto-Regular'), url('../../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */ @@ -32,16 +37,18 @@ url('../../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */ } -/*Roboto bold*/ +/* Roboto bold */ @font-face { font-family: 'roboto-bold'; font-style: normal; font-weight: 700; src: url('../../fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */ - src: local('Roboto Bold'), local('Roboto-Bold'), + src: + local('Roboto Bold'), + local('Roboto-Bold'), url('../../fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../../fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */ url('../../fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */ -} \ No newline at end of file +} diff --git a/css/base/normalize.css b/css/base/normalize.css index b0c1902..3ee267c 100644 --- a/css/base/normalize.css +++ b/css/base/normalize.css @@ -62,7 +62,7 @@ hr { */ pre { - font-family: monospace, monospace; /* 1 */ + font-family: monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -105,7 +105,7 @@ strong { code, kbd, samp { - font-family: monospace, monospace; /* 1 */ + font-family: monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -234,7 +234,7 @@ fieldset { * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. + * `fieldset` elements in all browsers. */ legend { @@ -346,4 +346,4 @@ template { [hidden] { display: none; -} \ No newline at end of file +} diff --git a/css/centeredbox/auto-suggestion.css b/css/centeredbox/auto-suggestion.css index 567542a..249b680 100644 --- a/css/centeredbox/auto-suggestion.css +++ b/css/centeredbox/auto-suggestion.css @@ -1,7 +1,7 @@ -/*Container*/ +/* Container */ .phrasesContainer { position: absolute; - + width: 100vw; height: auto; @@ -11,7 +11,7 @@ opacity: 0; transition: opacity var(--transition-speed); - /*Disable user touch/select on text elements*/ + /* Disable user touch/select on text elements */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; @@ -20,49 +20,49 @@ user-select: none; } -/*Show suggestion*/ +/* Show suggestion */ #suggestionsContainer.suggestionsShow { opacity: 1; } -/*ul*/ +/* UL */ #suggestions { height: auto; width: 50vw; - /*Center ul horizontally*/ + /* Center ul horizontally */ margin: 0 auto; list-style: none; - /*Remove the fucking padding*/ - /*It took me an hour to fix this piece of shit*/ + /* Remove the fucking padding */ + /* It took me an hour to fix this piece of shit */ padding: 0; - /*Allow centering of children*/ + /* Allow centering of children */ display: table; table-layout: fixed; } -/*li*/ +/* LI */ #phrase { - /*Align list horizontally*/ + /* Align list horizontally */ justify-content: center; height: auto; - /*Always stack and center horizontally*/ - /*display: table-cell;*/ - /*width: auto;*/ - /*text-align: center;*/ + /* Always stack and center horizontally */ + /* display: table-cell; */ + /* width: auto; */ + /* text-align: center; */ - /*Always stack and center vertically*/ + /* Always stack and center vertically */ display: inline-flex; width: 100%; text-align: center; } -/*The li's child*/ +/* LI's Child */ .phraseButton { background: transparent; @@ -71,35 +71,35 @@ color: var(--base-color); font-size: 12pt; - font-family: roboto-bold; + font-family: roboto-bold, sans-serif; + font-weight: 700; text-align: center; border-radius: 6px; vertical-align: middle; padding: 10px; - } +/* Focus */ .phraseButton:focus { background: var(--base-bg); } +/* Active */ .phraseButton:active { background: var(--base-active-bg); } @media screen and (max-height: 539px) and (min-height: 341px) { - - #suggestions { + #suggestions { height: auto; width: 100vw; } - /*The Li*/ + /* The Li */ #phrase { - /*Always stack and center horizontally*/ + /* Always stack and center horizontally */ display: table-cell; - width: auto; text-align: center; justify-content: space-between; @@ -110,9 +110,8 @@ } @media screen and (max-height: 340px) { - - #suggestionsContainer.phrasesContainer { + /* Hide */ + #suggestionsContainer.phrasesContainer { opacity: 0; } - -} \ No newline at end of file +} diff --git a/css/centeredbox/centered-box-overlay.css b/css/centeredbox/centered-box-overlay.css index 6a77452..e1501a2 100644 --- a/css/centeredbox/centered-box-overlay.css +++ b/css/centeredbox/centered-box-overlay.css @@ -12,7 +12,8 @@ margin: 0; padding: 0; z-index: -1; - transition: opacity var(--transition-speed), + transition: + opacity var(--transition-speed), z-index var(--transition-speed), backdrop-filter var(--transition-speed); } @@ -21,4 +22,4 @@ opacity: 1; z-index: 0; backdrop-filter: blur(var(--blur-strength)) brightness(70%); -} \ No newline at end of file +} diff --git a/css/centeredbox/centered-box.css b/css/centeredbox/centered-box.css index c890893..24c4946 100644 --- a/css/centeredbox/centered-box.css +++ b/css/centeredbox/centered-box.css @@ -1,12 +1,12 @@ .centeredBar { width: 100%; - height: auto; - - border: none; - pointer-events: none; - - position: absolute; + height: auto; + + border: none; + pointer-events: none; + + position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); @@ -16,11 +16,12 @@ #centeredBox { opacity: 1; z-index: 2; - transition: opacity var(--transition-speed), - z-index var(--transition-speed); + transition: + opacity var(--transition-speed), + z-index var(--transition-speed); } .centeredBar#centeredBox.hiddenBox { opacity: 0; z-index: 0; -} \ No newline at end of file +} diff --git a/css/centeredbox/profile-image.css b/css/centeredbox/profile-image.css index 5e12292..0e2fa62 100644 --- a/css/centeredbox/profile-image.css +++ b/css/centeredbox/profile-image.css @@ -6,10 +6,10 @@ width: 138px; border-radius: 50%; pointer-events: initial; - - margin: 0 auto; - margin-bottom: 110px; - position: relative; + + margin: 0 auto; + margin-bottom: 110px; + position: relative; flex-flow: column wrap; display: flex; @@ -18,7 +18,7 @@ } #profileImage { - background-image: url('../../assets/user.png') ; + background-image: url('../../assets/user.png'); height: 128px; width: 128px; border-radius: 50%; @@ -37,6 +37,11 @@ } @keyframes rotate { - from { -webkit-transform: rotate(0deg) } - to { -webkit-transform: rotate(360deg) } -} \ No newline at end of file + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} diff --git a/css/centeredbox/search-box.css b/css/centeredbox/search-box.css index db14eed..9459478 100644 --- a/css/centeredbox/search-box.css +++ b/css/centeredbox/search-box.css @@ -8,7 +8,8 @@ pointer-events: none; - transition: opacity var(--transition-speed), + transition: + opacity var(--transition-speed), top var(--transition-speed), pointer-events var(--transition-speed); } @@ -22,8 +23,8 @@ margin-bottom: 10px; - /*Center horizontally*/ - position: relative; + /* Center horizontally */ + position: relative; left: 50%; transform: translateX(-50%); @@ -54,7 +55,7 @@ @media screen and (max-width: 470px) { #searchBox { - width: 50vw; + width: 50vw; } #searchBoxContainer.showSearchBox { @@ -63,4 +64,3 @@ pointer-events: initial; } } - diff --git a/css/dashboard/dashboard.css b/css/dashboard/dashboard.css index 0476d19..583f435 100644 --- a/css/dashboard/dashboard.css +++ b/css/dashboard/dashboard.css @@ -2,7 +2,7 @@ background: var(--panel-bg); height: 100%; z-index: 7; - /*border-radius: var(--rounded-radius);*/ + /* border-radius: var(--rounded-radius); */ backdrop-filter: blur(var(--blur-strength)); -webkit-touch-callout: none; @@ -16,7 +16,7 @@ .rightDashboardBody { margin: 10px; height: auto; - width: 330px; + width: 330px; } #rightDashboard { @@ -28,22 +28,22 @@ overflow-y: auto; box-sizing: border-box; scrollbar-width: none; - transition: width var(--transition-speed); + transition: width var(--transition-speed); } -/*Hide scrollbar*/ +/* Hide scrollbar */ #rightDashboard::-webkit-scrollbar { - display: none; + display: none; } -/*Show dashboard*/ +/* Show dashboard */ .dashboard#rightDashboard.showRightDashboard { width: 350px; z-index: 7; scrollbar-width: none; } -/*Overlay*/ +/* Overlay */ .dashboardOverlay { position: absolute; visibility: hidden; @@ -58,7 +58,8 @@ z-index: -2; filter: blur(var(--blur-strength)) brightness(70%); - transition: visibility var(--transition-speed), + transition: + visibility var(--transition-speed), z-index var(--transition-speed); } diff --git a/css/dashboard/greeter-date-message.css b/css/dashboard/greeter-date-message.css index fff28a5..fc67ecd 100644 --- a/css/dashboard/greeter-date-message.css +++ b/css/dashboard/greeter-date-message.css @@ -12,6 +12,6 @@ .dashboardMessage#dateMessage { font-size: 12pt; - font-family: roboto, sans-serif; + font-family: roboto, sans-serif; font-weight: 400; -} \ No newline at end of file +} diff --git a/css/dashboard/search-engine-settings.css b/css/dashboard/search-engine-settings.css index 9a59fe1..062e09a 100644 --- a/css/dashboard/search-engine-settings.css +++ b/css/dashboard/search-engine-settings.css @@ -3,7 +3,7 @@ font-weight: 400; width: 100%; height: auto; - position: relative;; + position: relative; border-radius: 6px; color: var(--base-color); background: var(--base-container); @@ -94,7 +94,7 @@ select::-ms-expand { cursor: pointer; border: none; - /*Center vertically*/ + /* Center vertically */ display: flex; justify-content: center; align-items: center; @@ -120,4 +120,4 @@ select::-ms-expand { width: 96vw; box-sizing: border-box; } -} \ No newline at end of file +} diff --git a/css/dashboard/theme-engine.css b/css/dashboard/theme-engine.css index 286f5d3..9205a49 100644 --- a/css/dashboard/theme-engine.css +++ b/css/dashboard/theme-engine.css @@ -1,9 +1,10 @@ .themeEngine { font-family: roboto, sans-serif; font-weight: 400; + width: 100%; height: auto; - position: relative;; + position: relative; border-radius: 6px; color: var(--base-color); background: var(--base-container); @@ -48,7 +49,7 @@ cursor: pointer; border: none; - /*Center vertically*/ + /* Center vertically */ display: flex; justify-content: center; align-items: center; @@ -85,7 +86,7 @@ .foregroundColorSetter, .blurSetter, .animSpeedSetter { - /*Align div inside horizontally*/ + /* Align div inside horizontally */ display: flex; flex-direction: row; justify-content: left; @@ -138,4 +139,4 @@ width: 96vw; box-sizing: border-box; } -} \ No newline at end of file +} diff --git a/css/dashboard/weather-settings.css b/css/dashboard/weather-settings.css index 88a24ca..dd9d329 100644 --- a/css/dashboard/weather-settings.css +++ b/css/dashboard/weather-settings.css @@ -3,7 +3,7 @@ font-weight: 400; width: 100%; height: auto; - position: relative;; + position: relative; border-radius: 6px; color: var(--base-color); background: var(--base-container); @@ -28,7 +28,7 @@ background-image: url('../../assets/ui-icons/weather.svg'); } -/*Main settings*/ +/* Main settings */ .weatherSettingsGroups { height: auto; width: 100%; @@ -48,7 +48,8 @@ height: 0; opacity: 0; pointer-events: none; - transition: height var(--transition-speed), + transition: + height var(--transition-speed), opacity var(--transition-speed); } @@ -67,7 +68,7 @@ font-weight: 400; color: var(--base-color); - /*Center vertically*/ + /* Center vertically */ display: flex; justify-content: center; align-items: center; @@ -123,23 +124,25 @@ margin-right: 2.5px; } -#weatherSettingsApply:hover, #weatherSettingsReset:hover { +#weatherSettingsApply:hover, +#weatherSettingsReset:hover { outline: none; cursor: pointer; background: var(--base-hover-bg); } -#weatherSettingsApply:active, #weatherSettingsReset:active { +#weatherSettingsApply:active, +#weatherSettingsReset:active { outline: none; background: var(--base-active-bg); } -#weatherSettingsApply:focus, #weatherSettingsReset:focus { +#weatherSettingsApply:focus, +#weatherSettingsReset:focus { outline: none; background: var(--base-focus-bg); } - #weatherSettingsButtons { display: flex; flex-direction: row; @@ -155,4 +158,4 @@ width: 96vw; box-sizing: border-box; } -} \ No newline at end of file +} diff --git a/css/screens/screens.css b/css/screens/screens.css index 75fadce..e052235 100644 --- a/css/screens/screens.css +++ b/css/screens/screens.css @@ -10,7 +10,7 @@ overflow: hidden; backdrop-filter: blur(var(--blur-strength)); - /*Disable user touch/select on text elements*/ + /* Disable user touch/select on text elements */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; @@ -18,8 +18,8 @@ -ms-user-select: none; user-select: none; - /*Dont increase the geometry by using padding*/ + /* Dont increase the geometry by using padding */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -} \ No newline at end of file +} diff --git a/css/screens/weather-screen.css b/css/screens/weather-screen.css index 992fb80..6b00200 100644 --- a/css/screens/weather-screen.css +++ b/css/screens/weather-screen.css @@ -1,17 +1,14 @@ #weatherScreen { - display:flex; - justify-content:center; - align-items:center; - - padding-top: 6vh; - padding-bottom: 6vh; - padding-left: 12vw; - padding-right: 12vw; + display: flex; + justify-content: center; + align-items: center; + padding: 6vh 12vw; transform: scale(0); opacity: 0; z-index: 0; - transition: transform var(--transition-speed), + transition: + transform var(--transition-speed), opacity var(--transition-speed), z-index var(--transition-speed); } @@ -24,9 +21,8 @@ #weatherScreenContainer { overflow: hidden; - position: relative; - /*Align vertically center*/ + /* Align vertically center */ margin: 0; position: absolute; top: 50%; @@ -89,32 +85,29 @@ } #sunriseHourDataIcon { - background: url("../../assets/weather-icons/sunrise.svg"); + background-image: url("../../assets/weather-icons/sunrise.svg"); background-size: cover; - } #sunsetHourDataIcon { - background: url("../../assets/weather-icons/sunset.svg"); + background-image: url("../../assets/weather-icons/sunset.svg"); background-size: cover; - margin-left: 5px + margin-left: 5px; } #updateHourDataIcon { - background: url("../../assets/weather-icons/refresh.svg"); + background-image: url("../../assets/weather-icons/refresh.svg"); background-size: cover; - margin-left: 5px + margin-left: 5px; } - .weatherForecast { display: flex; flex-direction: row; justify-content: center; } - -/*Forecast Container*/ +/* Forecast Container */ .weatherForecastDay { text-align: center; margin-top: 20px; @@ -124,14 +117,14 @@ margin-left: 10px; } -/*Add fixed geometry to weatherForecastDay children*/ +/* Add fixed geometry to weatherForecastDay children */ .weatherForecastDay > div { width: 100px; height: 60px; } .weatherForecastDayIconContainer { - clear:both; + clear: both; } .weatherForecastDayIcon { @@ -146,10 +139,9 @@ transform: translateX(-50%); } -/*Center*/ +/* Center */ .weatherForecastDayDetails { - - clear:both; + clear: both; } .weatherForecastDayDetailsTemperature, @@ -167,17 +159,14 @@ font-size: 14pt; } -/*Right side*/ +/* Right side */ .weatherForecastDayDate { - clear:both; + clear: both; } @media screen and (max-width: 470px) { #weatherScreen { - padding-top: 6vh; - padding-bottom: 0vh; - padding-left: 18vw; - padding-right: 18vw; + padding: 6vh 18vw 0 18vw; } } @@ -188,24 +177,23 @@ } @media screen and (max-width: 470px) { - .weatherForecast { display: inline-block; flex-direction: row; justify-content: center; } - /*Forecast Container*/ + /* Forecast Container */ .weatherForecastDay { text-align: center; margin-top: 20px; float: none; clear: none; - margin-left : 0px; + margin-left: 0; } - /*Add fixed geometry to weatherForecastDay children*/ + /* Add fixed geometry to weatherForecastDay children */ .weatherForecastDay > div { width: 75px; height: 50px; @@ -221,17 +209,16 @@ font-size: 12pt; } - /*Center*/ + /* Center */ .weatherForecastDayDetails { display: inline-block; margin: 0 auto; clear: none; } - /*Right side*/ + /* Right side */ .weatherForecastDayDate { float: right; clear: none; } - -} \ No newline at end of file +} diff --git a/css/screens/web-menu.css b/css/screens/web-menu.css index 9cf063f..e8e1a2b 100644 --- a/css/screens/web-menu.css +++ b/css/screens/web-menu.css @@ -1,29 +1,22 @@ #webMenuScreen { z-index: 0; - - padding-top: 40px; - padding-bottom: 6vh; - padding-left: 12vw; - padding-right: 12vw; + padding: 40px 12vw 6vh 12vw; - /*Transitions*/ opacity: 0; transform: scale(0); - transition: transform var(--transition-speed), + transition: + transform var(--transition-speed), opacity var(--transition-speed), z-index var(--transition-speed); } @media screen and (max-width: 470px) { #webMenuScreen { - padding-top: 6vh; - padding-bottom: 0vh; - padding-left: 18vw; - padding-right: 18vw; + padding: 6vh 18vw 0 18vw; } } -/*Show web menu*/ +/* Show web menu */ .screen#webMenuScreen.showWebMenu { transform: scale(1); opacity: 1; @@ -39,7 +32,7 @@ #webMenuSearchBox { background: var(--base-bg); - + text-align: center; font-family: roboto-bold, sans-serif; font-weight: 700; @@ -67,7 +60,7 @@ } #webMenuSearchBoxContainer { - /*Center horizontally*/ + /* Center horizontally */ position: relative; display: flex; flex-flow: column wrap; @@ -76,9 +69,9 @@ margin-bottom: 20px; } -/*Web menu list*/ +/* Web menu list */ -/*UL*/ +/* UL */ #webMenuList { list-style-type: none; padding: 0; @@ -89,9 +82,9 @@ background: transparent; } -/*List*/ +/* List */ #webMenuList li { - /*Align list horizontally*/ + /* Align list horizontally */ display: inline-block; } @@ -107,7 +100,7 @@ transition: transform var(--transition-speed); } -/*Child of li*/ +/* Child of li */ .webItem { background: transparent; width: 128px; @@ -143,15 +136,15 @@ background: var(--base-active-bg); } -/*Contains web icon and label*/ +/* Contains web icon and label */ .webItemContainer { - /*Align vertically*/ - margin:0 auto; + /* Align vertically */ + margin: 0 auto; position: relative; top: 50%; -webkit-transform: translateY(-50%); - /*Align horizontally*/ + /* Align horizontally */ display: flex; flex-direction: row; justify-content: center; @@ -159,7 +152,7 @@ padding: 5px; } -/*Web icon container*/ +/* Web icon container */ .webItemIconContainer { position: relative; display: flex; @@ -171,9 +164,10 @@ height: 64px; width: 64px; margin-bottom: 0; + background-size: cover; } -/*Web label/name*/ +/* Web label/name */ .webItemName { text-align: center; font-size: 11pt; @@ -181,7 +175,6 @@ font-weight: 400; word-wrap: break-word; color: var(--base-color); - } #webMenuListContainer { @@ -191,9 +184,9 @@ max-height: 70vh; overflow-y: auto; - /*Fade transparency*/ - /*-webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);*/ - /*mask-image: linear-gradient(to bottom, black 85%, transparent 100%);*/ + /* Fade transparency */ + /* -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%); */ + /* mask-image: linear-gradient(to bottom, black 85%, transparent 100%); */ } /*Stretch list item if screen width < 470px*/ @@ -209,13 +202,13 @@ .webItem:hover { -ms-transform: scale(1); -webkit-transform: scale(1); - transform: scale(1); + transform: scale(1); } .webItemFocus { -ms-transform: scale(1); -webkit-transform: scale(1); - transform: scale(1); + transform: scale(1); } #webMenuListContainer { @@ -224,7 +217,7 @@ } #webMenuListContainer::-webkit-scrollbar { - display: none; + display: none; } } @@ -241,6 +234,5 @@ /*Disable dragging*/ user-select: none; - user-drag: none; -webkit-user-drag: none; -} \ No newline at end of file +} diff --git a/css/style.css b/css/style.css index 8082837..f7f6ea8 100644 --- a/css/style.css +++ b/css/style.css @@ -1,31 +1,31 @@ -/*Load all CSS*/ +/* Load all CSS */ @import url('base/normalize.css'); @import url('base/font-face.css'); @import url('base/base.css'); @import url('base/dummy-body-background.css'); -/*Bars and Panels*/ +/* Bars and Panels */ @import url('bars/bar.css'); @import url('bars/top-panel.css'); @import url('bars/clock.css'); @import url('bars/dock.css'); @import url('bars/dock-buttons.css'); -/*Centered box and Contents*/ +/* Centered box and Contents */ @import url('centeredbox/centered-box.css'); @import url('centeredbox/centered-box-overlay.css'); @import url('centeredbox/profile-image.css'); @import url('centeredbox/search-box.css'); @import url('centeredbox/auto-suggestion.css'); -/*Screens*/ +/* Screens */ @import url('screens/screens.css'); @import url('screens/weather-screen.css'); @import url('screens/web-menu.css'); -/*Dashboard and Settings*/ +/* Dashboard and Settings */ @import url('dashboard/dashboard.css'); @import url('dashboard/greeter-date-message.css'); @import url('dashboard/search-engine-settings.css'); @import url('dashboard/weather-settings.css'); -@import url('dashboard/theme-engine.css'); \ No newline at end of file +@import url('dashboard/theme-engine.css'); diff --git a/js/auto-suggestion.js b/js/auto-suggestion.js index 8907adf..10a0f64 100644 --- a/js/auto-suggestion.js +++ b/js/auto-suggestion.js @@ -40,31 +40,31 @@ class AutoSuggestion { const phraseButtons = Array.prototype.slice.call(document.querySelectorAll('button')); const phraseIndex = (phraseButtons.indexOf(document.activeElement) + 1) % phraseButtons.length; - const phraseButton = phraseButtons[phraseIndex]; - phraseButton.focus(); + const phraseButton = phraseButtons[parseInt(phraseIndex, 10)]; + phraseButton.focus(); } else if ((e.key === 'ArrowUp') || e.key === 'ArrowLeft') { e.preventDefault(); const phraseButtons = Array.prototype.slice.call(document.querySelectorAll('button')); - const phraseIndex = (phraseButtons.indexOf(document.activeElement) - 1) % phraseButtons.length; + let phraseIndex = (phraseButtons.indexOf(document.activeElement) - 1) % phraseButtons.length; if (phraseIndex < 0) { phraseIndex = phraseButtons.length - 1; - }; + } - const phraseButton = phraseButtons[phraseIndex]; - phraseButton.focus(); + const phraseButton = phraseButtons[parseInt(phraseIndex, 10)]; + phraseButton.focus(); } - } + }; // Onmouseup event button.onmouseup = e => { this._searchBox.value = button.innerText; this._searchBox.focus(); - } + }; } // Generate and parse suggestions @@ -105,12 +105,12 @@ class AutoSuggestion { _fetchSuggestion = () => { const endpoint = 'https://duckduckgo.com/ac/'; - const callback = 'autocompleteCallback' + const callback = 'autocompleteCallback'; const searchQuery = String(this._searchBox.value); - window[callback] = res => { + window[String(callback)] = res => { // Passed the suggestion object to process it this._autocompleteCallback(res); - } + }; // Fetch from duckduckgo const script = document.createElement('script'); diff --git a/js/background-set.js b/js/background-set.js index 426f927..f62929d 100644 --- a/js/background-set.js +++ b/js/background-set.js @@ -46,8 +46,8 @@ class DummyBodyBackground { }, 3000 - ) - } + ); + }; // Add a delay when to fetch the hq background setTimeout ( diff --git a/js/centered-box.js b/js/centered-box.js index fd94820..59d2064 100644 --- a/js/centered-box.js +++ b/js/centered-box.js @@ -1,34 +1,34 @@ class CenteredBox { - - constructor() { - this._centeredBox = document.querySelector('#centeredBox'); + + constructor() { + this._centeredBox = document.querySelector('#centeredBox'); - this._centeredBoxVisibility = true; + this._centeredBoxVisibility = true; - this.showCenteredBox = this.showCenteredBox.bind(this); - this.hideCenteredBox = this.hideCenteredBox.bind(this); - this.toggleCenteredBox = this.toggleCenteredBox.bind(this); - } + this.showCenteredBox = this.showCenteredBox.bind(this); + this.hideCenteredBox = this.hideCenteredBox.bind(this); + this.toggleCenteredBox = this.toggleCenteredBox.bind(this); + } - showCenteredBox = () => { - this._centeredBox.classList.remove('hiddenBox'); - this._centeredBoxVisibility = !this._centeredBoxVisibility; - } + showCenteredBox = () => { + this._centeredBox.classList.remove('hiddenBox'); + this._centeredBoxVisibility = !this._centeredBoxVisibility; + } - hideCenteredBox = () => { - this._centeredBox.classList.add('hiddenBox'); - this._centeredBoxVisibility = !this._centeredBoxVisibility; - } + hideCenteredBox = () => { + this._centeredBox.classList.add('hiddenBox'); + this._centeredBoxVisibility = !this._centeredBoxVisibility; + } - toggleCenteredBox = () => { + toggleCenteredBox = () => { - if (this._centeredBoxVisibility) { - // hide centered box - this.hideCenteredBox(); + if (this._centeredBoxVisibility) { + // hide centered box + this.hideCenteredBox(); - } else { - // Show centered box - this.showCenteredBox(); - } - } + } else { + // Show centered box + this.showCenteredBox(); + } + } } \ No newline at end of file diff --git a/js/config.js b/js/config.js index 6d070c6..899621a 100644 --- a/js/config.js +++ b/js/config.js @@ -29,7 +29,7 @@ class Config { name: 'Bing', prefix: 'https://www.bing.com/search?q=' } - } + }; return searchEngines; } diff --git a/js/dashboard.js b/js/dashboard.js index 82efe2e..178b29d 100644 --- a/js/dashboard.js +++ b/js/dashboard.js @@ -1,119 +1,119 @@ class Dashboard { - constructor() { - this._dashboard = document.querySelector('#rightDashboard'); - this._dashboardOverlay = document.querySelector('#dashboardOverlay'); + constructor() { + this._dashboard = document.querySelector('#rightDashboard'); + this._dashboardOverlay = document.querySelector('#dashboardOverlay'); - this._rightDashboardVisibility = false; + this._rightDashboardVisibility = false; - this._dashboardOverlayMouseUpEvent = this._dashboardOverlayMouseUpEvent.bind(this); + this._dashboardOverlayMouseUpEvent = this._dashboardOverlayMouseUpEvent.bind(this); - this._centeredBox = document.querySelector('#centeredBox'); - this._webMenu = document.querySelector('#webMenuScreen'); - this._searchBoxContainer = document.querySelector('#searchBoxContainer'); - this._weatherScreen = document.querySelector('#weatherScreen'); + this._centeredBox = document.querySelector('#centeredBox'); + this._webMenu = document.querySelector('#webMenuScreen'); + this._searchBoxContainer = document.querySelector('#searchBoxContainer'); + this._weatherScreen = document.querySelector('#weatherScreen'); - this._init(); - } + this._init(); + } - _init = () => { - this._registerOverlayMouseUpEvent(); - this._disableDashboardInputs(true); - } + _init = () => { + this._registerOverlayMouseUpEvent(); + this._disableDashboardInputs(true); + } - _disableDashboardInputs = status => { - const elems = this._dashboard.getElementsByTagName('input'); - const len = elems.length; + _disableDashboardInputs = status => { + const elems = this._dashboard.getElementsByTagName('input'); + const len = elems.length; - for (let i = 0; i < len; i++) { - elems[i].disabled = status; - } - } + for (let i = 0; i < len; i++) { + elems[parseInt(i, 10)].disabled = status; + } + } - getRightDashboardVisibility = () => { - return this._rightDashboardVisibility; - } + getRightDashboardVisibility = () => { + return this._rightDashboardVisibility; + } - showDashboard = () => { - this._dashboard.classList.add('showRightDashboard'); + showDashboard = () => { + this._dashboard.classList.add('showRightDashboard'); - // Show overlay - this._dashboardOverlay.classList.add('showDashboardOverlay'); + // Show overlay + this._dashboardOverlay.classList.add('showDashboardOverlay'); - // Enable Inputs - this._disableDashboardInputs(false); + // Enable Inputs + this._disableDashboardInputs(false); - this._rightDashboardVisibility = !this._rightDashboardVisibility; - } + this._rightDashboardVisibility = !this._rightDashboardVisibility; + } - hideDashboard = () => { - this._dashboard.classList.remove('showRightDashboard'); - this._dashboard.scrollTop = 0; + hideDashboard = () => { + this._dashboard.classList.remove('showRightDashboard'); + this._dashboard.scrollTop = 0; - // Disable Inputs - this._disableDashboardInputs(true); + // Disable Inputs + this._disableDashboardInputs(true); - // Hide overlay - this._dashboardOverlay.classList.remove('showDashboardOverlay'); + // Hide overlay + this._dashboardOverlay.classList.remove('showDashboardOverlay'); - this._rightDashboardVisibility = !this._rightDashboardVisibility; - } + this._rightDashboardVisibility = !this._rightDashboardVisibility; + } - toggleDashboard = () => { + toggleDashboard = () => { - console.log('toggle dashboard'); - - if (this._rightDashboardVisibility) { - - // Hide dashboard - this.hideDashboard(); - - } else { + // console.log('toggle dashboard'); + + if (this._rightDashboardVisibility) { + + // Hide dashboard + this.hideDashboard(); + + } else { - // Show dashboard - this.showDashboard(); + // Show dashboard + this.showDashboard(); - // If centered box is hidden, open it - if (this._centeredBox.classList.contains('hiddenBox')) { - - console.log('centered box is hidden, reopening...'); - - // Rotate profile container - profileImage.rotateProfile(); - - // Toggle center box - centeredBox.toggleCenteredBox(); - } - } + // If centered box is hidden, open it + if (this._centeredBox.classList.contains('hiddenBox')) { + + // console.log('centered box is hidden, reopening...'); + + // Rotate profile container + profileImage.rotateProfile(); + + // Toggle center box + centeredBox.toggleCenteredBox(); + } + } - // Check if any of these are open, if yes, close it - if (this._searchBoxContainer.classList.contains('showSearchBox')) { - console.log('searchbox is open, closing...'); - searchBoxShow.hideSearchBox(); + // Check if any of these are open, if yes, close it + if (this._searchBoxContainer.classList.contains('showSearchBox')) { + // console.log('searchbox is open, closing...'); + searchBoxShow.hideSearchBox(); - } else if (this._webMenu.classList.contains('showWebMenu')) { - console.log('web menu is open, closing...'); - webMenu.hideWebMenu(); - return; - - } else if (this._weatherScreen.classList.contains('showWeatherScreen')) { - console.log('weather screen is open, closing...'); - weatherScreen.hideWeatherScreen(); - return; + } else if (this._webMenu.classList.contains('showWebMenu')) { + // console.log('web menu is open, closing...'); + webMenu.hideWebMenu(); + return; + + } else if (this._weatherScreen.classList.contains('showWeatherScreen')) { + // console.log('weather screen is open, closing...'); + weatherScreen.hideWeatherScreen(); + return; - } + } - } + } - _dashboardOverlayMouseUpEvent = e => { - if (this._rightDashboardVisibility) { - this.toggleDashboard(); - } - console.log('dashboard overlay clicked...'); - } + _dashboardOverlayMouseUpEvent = e => { + if (this._rightDashboardVisibility) { + this.toggleDashboard(); + } + // console.log('dashboard overlay clicked...'); + } - _registerOverlayMouseUpEvent = () => { - this._dashboardOverlay.addEventListener('mouseup', this._dashboardOverlayMouseUpEvent); - } - + _registerOverlayMouseUpEvent = () => { + this._dashboardOverlay.addEventListener('mouseup', this._dashboardOverlayMouseUpEvent); + } + } \ No newline at end of file diff --git a/js/dock-buttons.js b/js/dock-buttons.js index e31a6ec..68fbc67 100644 --- a/js/dock-buttons.js +++ b/js/dock-buttons.js @@ -1,124 +1,124 @@ class DockButtons { - - constructor() { - this._dock = document.querySelector('#dock'); - - // Retrieve dockSites object from Config instance - this.dockSites = config.getDockSites(); - - // Populate dock - this._populateDock(); - } + + constructor() { + this._dock = document.querySelector('#dock'); + + // Retrieve dockSites object from Config instance + this.dockSites = config.getDockSites(); + + // Populate dock + this._populateDock(); + } - _buildDockButton = (id, className, callback = null) => { + _buildDockButton = (id, className, callback = null) => { - const dockButton = document.createElement('div'); - dockButton.id = `button${id}`; - dockButton.className = 'dockButton'; - dockButton.onmouseup = callback; + const dockButton = document.createElement('div'); + dockButton.id = `button${id}`; + dockButton.className = 'dockButton'; + dockButton.onmouseup = callback; - return dockButton; - } + return dockButton; + } - _buildDockButtonImage = (id, className, background) => { + _buildDockButtonImage = (id, className, background) => { - const buttonImage = document.createElement('div'); - buttonImage.id = id; - buttonImage.className = className; - buttonImage.style.backgroundImage = background; - - return buttonImage; - } + const buttonImage = document.createElement('div'); + buttonImage.id = id; + buttonImage.className = className; + buttonImage.style.backgroundImage = background; + + return buttonImage; + } - _generateFromManual = (id, icon, callback) => { + _generateFromManual = (id, icon, callback) => { - const dockButton = this._buildDockButton( - `button${id}`, - 'dockButton', - callback - ); + const dockButton = this._buildDockButton( + `button${id}`, + 'dockButton', + callback + ); - const buttonImage = this._buildDockButtonImage( - `buttonImage${id}`, - 'dockButtonImage', - `url('assets/buttons/${icon}.svg')` - ); - - dockButton.appendChild(buttonImage); + const buttonImage = this._buildDockButtonImage( + `buttonImage${id}`, + 'dockButtonImage', + `url('assets/buttons/${icon}.svg')` + ); + + dockButton.appendChild(buttonImage); - this._dock.appendChild(dockButton); - } - - _generateFromList = () => { + this._dock.appendChild(dockButton); + } + + _generateFromList = () => { - for (let i = 0; i < (this.dockSites.length); i++) { - - const site = this.dockSites[i].site; - const icon = this.dockSites[i].icon; - const url = this.dockSites[i].url; - - // Create a href - const aDock = document.createElement('a'); - aDock.className = 'dockLink'; - aDock.href = url; - aDock.tabIndex = '-1'; - - // Create div container - const dockButton = this._buildDockButton( - site, - 'dockButton' - ); - - // Create div container for button icon - const buttonImage = this._buildDockButtonImage( - `buttonImage${i}`, - 'dockButtonImage', - `url('assets/webcons/${icon}.svg')` - ); - - // Append divs - dockButton.appendChild(buttonImage); - aDock.appendChild(dockButton); + for (let i = 0; i < (this.dockSites.length); i++) { + + const site = this.dockSites[parseInt(i, 10)].site; + const icon = this.dockSites[parseInt(i, 10)].icon; + const url = this.dockSites[parseInt(i, 10)].url; + + // Create a href + const aDock = document.createElement('a'); + aDock.className = 'dockLink'; + aDock.href = url; + aDock.tabIndex = '-1'; + + // Create div container + const dockButton = this._buildDockButton( + site, + 'dockButton' + ); + + // Create div container for button icon + const buttonImage = this._buildDockButtonImage( + `buttonImage${i}`, + 'dockButtonImage', + `url('assets/webcons/${icon}.svg')` + ); + + // Append divs + dockButton.appendChild(buttonImage); + aDock.appendChild(dockButton); - this._dock.appendChild(aDock); - }; - } + this._dock.appendChild(aDock); + } + } - _populateDock = () => { - - // Create launcher button - this._generateFromManual( - 'Launch', - 'launch', - () => { - // Toggle web menu - webMenu.toggleWebMenu(); - } - ); - - // Create dock buttons fetched from sites-list.js - this._generateFromList(); - - // Create weather button - this._generateFromManual( - 'Weather', - 'weather', - () => { - // Toggle weather screen - weatherScreen.toggleWeatherScreen(); - } - ); - - // Create menu button - this._generateFromManual( - 'Dashboard', - 'dashboard', - () => { - // Toggle dashboard - dashboard.toggleDashboard(); - } - ); + _populateDock = () => { + + // Create launcher button + this._generateFromManual( + 'Launch', + 'launch', + () => { + // Toggle web menu + webMenu.toggleWebMenu(); + } + ); + + // Create dock buttons fetched from sites-list.js + this._generateFromList(); + + // Create weather button + this._generateFromManual( + 'Weather', + 'weather', + () => { + // Toggle weather screen + weatherScreen.toggleWeatherScreen(); + } + ); + + // Create menu button + this._generateFromManual( + 'Dashboard', + 'dashboard', + () => { + // Toggle dashboard + dashboard.toggleDashboard(); + } + ); - } + } } diff --git a/js/greeter-date-message.js b/js/greeter-date-message.js index 363cc3f..13b0171 100644 --- a/js/greeter-date-message.js +++ b/js/greeter-date-message.js @@ -53,8 +53,8 @@ class GreeterDateMessage { greeterSuffix = 'Evening'; } - this._greeterMessage.innerHTML = `Good
${greeterSuffix}!`; - this._dateMessage.innerHTML = `Today's the ${this._getDayOrdinal(date.getDate())} of ` + + this._greeterMessage.innerText = `Good\n${greeterSuffix}!`; + this._dateMessage.innerText = `Today's the ${this._getDayOrdinal(date.getDate())} of ` + `${this._monthsArr[date.getMonth()]}, and it's ${this._daysArr[date.getDay()]}.`; } diff --git a/js/keybindings.js b/js/keybindings.js index d3a6197..805044e 100644 --- a/js/keybindings.js +++ b/js/keybindings.js @@ -1,113 +1,113 @@ class KeyBinding { - constructor() { + constructor() { - this._searchBox = document.querySelector('#searchBox'); + this._searchBox = document.querySelector('#searchBox'); - this._keysPressed = {}; + this._keysPressed = {}; - this._documentAddKeyDownEvent = this._documentAddKeyDownEvent.bind(this); - this._documentAddKeyUpEvent = this._documentAddKeyUpEvent.bind(this); + this._documentAddKeyDownEvent = this._documentAddKeyDownEvent.bind(this); + this._documentAddKeyUpEvent = this._documentAddKeyUpEvent.bind(this); - this._init(); - } + this._init(); + } - _init = () => { - this._registerDocumentAddKeyDownEvent(); - this._registerDocumentAddKeyUpEvent(); - } + _init = () => { + this._registerDocumentAddKeyDownEvent(); + this._registerDocumentAddKeyUpEvent(); + } - _documentAddKeyDownEvent = e => { + _documentAddKeyDownEvent = e => { - const searchBoxVisibility = searchBoxShow.getSearchBoxVisibility(); + const searchBoxVisibility = searchBoxShow.getSearchBoxVisibility(); - this._keysPressed[e.key] = true; + this._keysPressed[e.key] = true; - if (this._keysPressed['Alt'] && e.key === 's') { + if (this._keysPressed['Alt'] && e.key === 's') { - e.preventDefault(); - dashboard.toggleDashboard(); - return; + e.preventDefault(); + dashboard.toggleDashboard(); + return; - } else if (this._keysPressed['Alt'] && e.key === 'e') { + } else if (this._keysPressed['Alt'] && e.key === 'e') { - e.preventDefault(); - webMenu.toggleWebMenu(); - return; + e.preventDefault(); + webMenu.toggleWebMenu(); + return; - } else if (this._keysPressed['Alt'] && e.key === 'x') { + } else if (this._keysPressed['Alt'] && e.key === 'x') { - e.preventDefault(); - weatherScreen.toggleWeatherScreen(); - return; + e.preventDefault(); + weatherScreen.toggleWeatherScreen(); + return; - } + } - if (e.key === 'Escape') { + if (e.key === 'Escape') { - e.preventDefault(); - - // If any of this are open, close it - if (searchBoxVisibility) { - - // Hide searchbox - searchBoxShow.toggleSearchBox(); - this._searchBox.value = ''; - return; + e.preventDefault(); + + // If any of this are open, close it + if (searchBoxVisibility) { + + // Hide searchbox + searchBoxShow.toggleSearchBox(); + this._searchBox.value = ''; + return; - } else if (dashboard.getRightDashboardVisibility()) { - - // Hide dashboard - dashboard.toggleDashboard(); - return; - - } else if (weatherScreen.getWeatherScreenVisiblity()) { - - // Hide weather - weatherScreen.toggleWeatherScreen(); - return; + } else if (dashboard.getRightDashboardVisibility()) { + + // Hide dashboard + dashboard.toggleDashboard(); + return; + + } else if (weatherScreen.getWeatherScreenVisiblity()) { + + // Hide weather + weatherScreen.toggleWeatherScreen(); + return; - } + } - // Show web menu - webMenu.toggleWebMenu(); - return; - } + // Show web menu + webMenu.toggleWebMenu(); + return; + } - if (!searchBoxVisibility) { + if (!searchBoxVisibility) { - // Don't show searchbox if web menu, dashboard - // and weather screen is open - if (dashboard.getRightDashboardVisibility() || - webMenu.getwebMenuVisibility() || - weatherScreen.getWeatherScreenVisiblity()) return; + // Don't show searchbox if web menu, dashboard + // and weather screen is open + if (dashboard.getRightDashboardVisibility() || + webMenu.getwebMenuVisibility() || + weatherScreen.getWeatherScreenVisiblity()) return; - // Only accept single charactered key and backspace to open search box - if ((e.key.length > 1) && (e.key !== 'Backspace')) return; + // Only accept single charactered key and backspace to open search box + if ((e.key.length > 1) && (e.key !== 'Backspace')) return; - // Open searchbox - searchBoxShow.toggleSearchBox(); + // Open searchbox + searchBoxShow.toggleSearchBox(); - } else { - - // Backspacing while there's no search query will hide searhbox - // Will also hide if you hit enter - if ((e.key === 'Backspace' || e.key === 'Enter') && - this._searchBox.value < 1) { searchBoxShow.toggleSearchBox(); return; }; - } + } else { + + // Backspacing while there's no search query will hide searhbox + // Will also hide if you hit enter + if ((e.key === 'Backspace' || e.key === 'Enter') && + this._searchBox.value < 1) { searchBoxShow.toggleSearchBox(); return; } + } - } + } - _documentAddKeyUpEvent = e => { - delete this._keysPressed[e.key]; - } + _documentAddKeyUpEvent = e => { + delete this._keysPressed[e.key]; + } - _registerDocumentAddKeyDownEvent = () => { - document.addEventListener('keydown', this._documentAddKeyDownEvent); - } + _registerDocumentAddKeyDownEvent = () => { + document.addEventListener('keydown', this._documentAddKeyDownEvent); + } - _registerDocumentAddKeyUpEvent = () => { - document.addEventListener('keyup', this._documentAddKeyUpEvent); - } + _registerDocumentAddKeyUpEvent = () => { + document.addEventListener('keyup', this._documentAddKeyUpEvent); + } } diff --git a/js/mobile-swipe-event.js b/js/mobile-swipe-event.js index 2b4734b..83651f7 100644 --- a/js/mobile-swipe-event.js +++ b/js/mobile-swipe-event.js @@ -14,55 +14,55 @@ class SwipeEventManager { el.addEventListener( 'touchstart', - (event) => { + event => { // event.preventDefault(); this._xDown = event.touches[0].clientX; - this._yDown = event.touches[0].clientY; + this._yDown = event.touches[0].clientY; }, { passive: true } ); el.addEventListener( 'touchmove', - (event) => { + event => { // event.preventDefault(); - if ( ! this._xDown || ! this._yDown ) { - return; - } + if ( ! this._xDown || ! this._yDown ) { + return; + } - const xUp = event.touches[0].clientX; - const yUp = event.touches[0].clientY; - const xDiff = this._xDown - xUp; - const yDiff = this._yDown - yUp; + const xUp = event.touches[0].clientX; + const yUp = event.touches[0].clientY; + const xDiff = this._xDown - xUp; + const yDiff = this._yDown - yUp; - if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) { - if ( xDiff > 0 ) { - // Left Swipe - dir = 'left' - } else { - // Right Swipe - dir = 'right'; - } - } else { + if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) { + if ( xDiff > 0 ) { + // Left Swipe + dir = 'left'; + } else { + // Right Swipe + dir = 'right'; + } + } else { - if ( yDiff > 0 ) { - // Up Swipe - dir = 'up'; - } else { - // Down Swipe - dir = 'down'; - } - } - - /* Reset values */ - this._xDown = null; - this._yDown = null; + if ( yDiff > 0 ) { + // Up Swipe + dir = 'up'; + } else { + // Down Swipe + dir = 'down'; + } + } + + /* Reset values */ + this._xDown = null; + this._yDown = null; - if (dir !== ''){ - if (typeof callback === 'function') { - callback(el, dir); - } - } + if (dir !== ''){ + if (typeof callback === 'function') { + callback(el, dir); + } + } }, { passive: true } diff --git a/js/profile-image.js b/js/profile-image.js index 9521c26..8e76d8b 100644 --- a/js/profile-image.js +++ b/js/profile-image.js @@ -1,66 +1,66 @@ class ProfileImage { - constructor() { - this._profileContainer = document.querySelector('#profileImageContainer') + constructor() { + this._profileContainer = document.querySelector('#profileImageContainer'); - this._profileAnimRunning = false; + this._profileAnimRunning = false; - // Don't run animation on startup - this._profileContainer.style.webkitAnimationPlayState = 'paused'; + // Don't run animation on startup + this._profileContainer.style.webkitAnimationPlayState = 'paused'; - this.rotateProfile = this.rotateProfile.bind(this); + this.rotateProfile = this.rotateProfile.bind(this); - this._animationEndEvent = this._animationEndEvent.bind(this); - this._onClickEvent = this._onClickEvent.bind(this); + this._animationEndEvent = this._animationEndEvent.bind(this); + this._onClickEvent = this._onClickEvent.bind(this); - this.getProfileAnimationStatus = this.getProfileAnimationStatus.bind(this); + this.getProfileAnimationStatus = this.getProfileAnimationStatus.bind(this); - this._init(); - } + this._init(); + } - _init = () => { - this._registerAnimationEndEvent(); - this._registerOnClickEvent(); - } + _init = () => { + this._registerAnimationEndEvent(); + this._registerOnClickEvent(); + } - rotateProfile = () => { - event.preventDefault; + rotateProfile = () => { + event.preventDefault; - // Remove anim class - this._profileContainer.classList.remove('rotateProfileAnim'); + // Remove anim class + this._profileContainer.classList.remove('rotateProfileAnim'); - // Triggering reflow - void this._profileContainer.offsetWidth; + // Triggering reflow + void this._profileContainer.offsetWidth; - // Re-add animation class - this._profileContainer.classList.add('rotateProfileAnim'); + // Re-add animation class + this._profileContainer.classList.add('rotateProfileAnim'); - // Start rotation animation - this._profileContainer.style.webkitAnimationPlayState = 'running'; - this._profileAnimRunning = true; - } + // Start rotation animation + this._profileContainer.style.webkitAnimationPlayState = 'running'; + this._profileAnimRunning = true; + } - _animationEndEvent = e => { - this._profileAnimRunning = false; - } + _animationEndEvent = e => { + this._profileAnimRunning = false; + } - // Re-enable animation after death - _registerAnimationEndEvent = () => { - this._profileContainer.addEventListener('animationend', this._animationEndEvent); - } + // Re-enable animation after death + _registerAnimationEndEvent = () => { + this._profileContainer.addEventListener('animationend', this._animationEndEvent); + } - _onClickEvent = e => { - if (this._profileAnimRunning) return; - searchBoxShow.toggleSearchBox(); - } + _onClickEvent = e => { + if (this._profileAnimRunning) return; + searchBoxShow.toggleSearchBox(); + } - _registerOnClickEvent = () => { - this._profileContainer.onclick = this._onClickEvent; - } + _registerOnClickEvent = () => { + this._profileContainer.onclick = this._onClickEvent; + } - getProfileAnimationStatus = () => { - return this._profileAnimRunning; - } + getProfileAnimationStatus = () => { + return this._profileAnimRunning; + } } diff --git a/js/search-engine-settings.js b/js/search-engine-settings.js index b58bb4f..51d6b44 100644 --- a/js/search-engine-settings.js +++ b/js/search-engine-settings.js @@ -42,7 +42,7 @@ class SearchEngineSettings { Object.keys(this._searchEngines) .forEach(key => { const seValue = key; - const seData = this._searchEngines[key]; + const seData = this._searchEngines[String(key)]; const seOption = document.createElement('option'); // Generate search engine suggestions @@ -51,8 +51,8 @@ class SearchEngineSettings { ` ` - ) - }) + ); + }); // Call to update query string and placeholder this._updateSearchEngineElements(); @@ -69,8 +69,8 @@ class SearchEngineSettings { // Use this to select the current/default search engine on startup _selectTheEngine = () => { - this._selectSearchEngine.value = this._currentSearchEngine; - this._updateSearchEngineElements(); + this._selectSearchEngine.value = this._currentSearchEngine; + this._updateSearchEngineElements(); } // Execute this on change event of