From c0714ecbc6ab7cb0467fa17a30e8ebebf0ddc41e Mon Sep 17 00:00:00 2001
From: Daniel Scalzi <d_scalzi@yahoo.com>
Date: Thu, 21 Jun 2018 12:38:21 -0400
Subject: [PATCH] Added functionality to avatar overlay.

Overlay changed from div to button.
Clicking on the overlay will bring you directly to the settings account tab.
Modified overlay background color.
---
 app/assets/css/launcher.css       |  9 +++-
 app/assets/js/scripts/landing.js  |  8 ++++
 app/assets/js/scripts/settings.js | 80 ++++++++++++++++++++-----------
 app/landing.ejs                   |  2 +-
 app/settings.ejs                  |  2 +-
 5 files changed, 69 insertions(+), 32 deletions(-)

diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
index 000e6f55..3e7d263f 100644
--- a/app/assets/css/launcher.css
+++ b/app/assets/css/launcher.css
@@ -2308,16 +2308,21 @@ input:checked + .toggleSwitchSlider:before {
     transition: 0.25s ease;
     font-weight: bold;
     letter-spacing: 2px;
-    background: linear-gradient(65deg, rgba(0, 0, 0, 0.4), rgba(136, 77, 77, 0.4) 60%);
+    background-color: rgba(0, 0, 0, 0.35);
     -webkit-user-select: none;
+    border: none;
     cursor: pointer;
     width: 100%;
     height: 100%;
     border-radius: 50%;
 }
-#avatarOverlay:hover {
+#avatarOverlay:hover,
+#avatarOverlay:focus {
     opacity: 1;
 }
+#avatarOverlay:active {
+    background-color: rgba(0, 0, 0, 0.45);
+}
 
 /* User profile name text. */
 #user_text {
diff --git a/app/assets/js/scripts/landing.js b/app/assets/js/scripts/landing.js
index c08c0137..6369ec93 100644
--- a/app/assets/js/scripts/landing.js
+++ b/app/assets/js/scripts/landing.js
@@ -110,6 +110,14 @@ document.getElementById('settingsMediaButton').onclick = (e) => {
     switchView(getCurrentView(), VIEWS.settings)
 }
 
+// Bind avatar overlay button.
+document.getElementById('avatarOverlay').onclick = (e) => {
+    prepareSettings()
+    switchView(getCurrentView(), VIEWS.settings, 500, 500, () => {
+        settingsNavItemListener(document.getElementById('settingsNavAccount'), false)
+    })
+}
+
 // Bind selected account
 function updateSelectedAccount(authUser){
     let username = 'No Account Selected'
diff --git a/app/assets/js/scripts/settings.js b/app/assets/js/scripts/settings.js
index 6e209623..f2a293ee 100644
--- a/app/assets/js/scripts/settings.js
+++ b/app/assets/js/scripts/settings.js
@@ -140,7 +140,7 @@ function saveSettingsValues(){
     })
 }
 
-let selectedTab = 'settingsTabAccount'
+let selectedSettingsTab = 'settingsTabAccount'
 
 /**
  * Modify the settings container UI when the scroll threshold reaches
@@ -162,38 +162,62 @@ function settingsTabScrollListener(e){
 function setupSettingsTabs(){
     Array.from(document.getElementsByClassName('settingsNavItem')).map((val) => {
         if(val.hasAttribute('rSc')){
-            val.onclick = (e) => {
-                if(val.hasAttribute('selected')){
-                    return
-                }
-                const navItems = document.getElementsByClassName('settingsNavItem')
-                for(let i=0; i<navItems.length; i++){
-                    if(navItems[i].hasAttribute('selected')){
-                        navItems[i].removeAttribute('selected')
-                    }
-                }
-                val.setAttribute('selected', '')
-                let prevTab = selectedTab
-                selectedTab = val.getAttribute('rSc')
-
-                document.getElementById(prevTab).onscroll = null
-                document.getElementById(selectedTab).onscroll = settingsTabScrollListener
-
-                $(`#${prevTab}`).fadeOut(250, () => {
-                    $(`#${selectedTab}`).fadeIn({
-                        duration: 250,
-                        start: () => {
-                            settingsTabScrollListener({
-                                target: document.getElementById(selectedTab)
-                            })
-                        }
-                    })
-                })
+            val.onclick = () => {
+                settingsNavItemListener(val)
             }
         }
     })
 }
 
+/**
+ * Settings nav item onclick lisener. Function is exposed so that
+ * other UI elements can quickly toggle to a certain tab from other views.
+ * 
+ * @param {Element} ele The nav item which has been clicked.
+ * @param {boolean} fade Optional. True to fade transition.
+ */
+function settingsNavItemListener(ele, fade = true){
+    if(ele.hasAttribute('selected')){
+        return
+    }
+    const navItems = document.getElementsByClassName('settingsNavItem')
+    for(let i=0; i<navItems.length; i++){
+        if(navItems[i].hasAttribute('selected')){
+            navItems[i].removeAttribute('selected')
+        }
+    }
+    ele.setAttribute('selected', '')
+    let prevTab = selectedSettingsTab
+    selectedSettingsTab = ele.getAttribute('rSc')
+
+    document.getElementById(prevTab).onscroll = null
+    document.getElementById(selectedSettingsTab).onscroll = settingsTabScrollListener
+
+    if(fade){
+        $(`#${prevTab}`).fadeOut(250, () => {
+            $(`#${selectedSettingsTab}`).fadeIn({
+                duration: 250,
+                start: () => {
+                    settingsTabScrollListener({
+                        target: document.getElementById(selectedSettingsTab)
+                    })
+                }
+            })
+        })
+    } else {
+        $(`#${prevTab}`).hide(0, () => {
+            $(`#${selectedSettingsTab}`).show({
+                duration: 0,
+                start: () => {
+                    settingsTabScrollListener({
+                        target: document.getElementById(selectedSettingsTab)
+                    })
+                }
+            })
+        })
+    }
+}
+
 const settingsNavDone = document.getElementById('settingsNavDone')
 
 /**
diff --git a/app/landing.ejs b/app/landing.ejs
index 1697ad54..ed64fcb0 100644
--- a/app/landing.ejs
+++ b/app/landing.ejs
@@ -13,7 +13,7 @@
                 <div id="user_content">
                     <span id="user_text">Username</span>
                     <div id="avatarContainer">
-                        <div id="avatarOverlay">Edit</div>
+                        <button id="avatarOverlay">Edit</button>
                     </div>
                 </div>
                 <div id="mediaContent">
diff --git a/app/settings.ejs b/app/settings.ejs
index 9a59202a..eca33a53 100644
--- a/app/settings.ejs
+++ b/app/settings.ejs
@@ -6,7 +6,7 @@
             </div>
             <div id="settingsNavItemsContainer">
                 <div id="settingsNavItemsContent">
-                    <button class="settingsNavItem" rSc="settingsTabAccount" selected>Account</button>
+                    <button class="settingsNavItem" rSc="settingsTabAccount" id="settingsNavAccount" selected>Account</button>
                     <button class="settingsNavItem" rSc="settingsTabMinecraft">Minecraft</button>
                     <button class="settingsNavItem" rSc="settingsTabMods">Mods</button>
                     <button class="settingsNavItem" rSc="settingsTabJava">Java</button>