Populate name and initial dynamically, add slot for custom menu item

5907e7f8 · Scott Berg · 8450c2ab · 5907e7f8 · 5907e7f8 · 5907e7f8
Commit 5907e7f8 authored 6 years ago by Scott Berg
--- a/README.md
+++ b/README.md
 This component is currently a work in progress, right now it does work as a stand alone component and in tandem with the myuw-app-bar component.

-Right now all of the data is hardcoded in as a placeholder, this will be updated soon to use dynamic data pulled in from the MyUW session endpoint. I am also looking into ways for users to include custom link items using slots, but getting everything to style properly is proving difficult.
+Right now all of the data is hardcoded in as a placeholder, this will be updated soon to use dynamic data pulled in from the MyUW session endpoint.

 ## Testing

@@ -11,4 +11,8 @@ You can view a test of this component being used with the myuw-app-bar by openin

 - **Login URL (login-url):** The URL to redirect users to on login
 - **Logout URL (logout-url):** The Logout URL to redirect users to on logout
- **Session Endpoint (session-endpoint):** The endpoint URL for session info
\ No newline at end of file
+- **Session Endpoint (session-endpoint):** The endpoint URL for session info
+
+#### Slots
+
+- **Profile Navigation Item (nav-item):** Add a custom item to the profile button's navigation menu, this slot expects an `<a>` tag
\ No newline at end of file
--- a/index.html
+++ b/index.html
 <html>
    <head>
        <style>
-            *{
+            body {
                padding: 0;
                margin: 0;
            }
-            nav {
-                text-align: right;
-                background: #c5050c;
-                height: 50px;
-                width: calc(100% - 10px);
-                max-width: 100%;
-                padding-top: 10px;
-                padding-right: 10px;
-            }
        </style>
        <script src="https://unpkg.com/@myuw-web-components/myuw-app-bar@0.1.1"></script>
        <link rel="import" href="myuw-profile.html">
    </head>
    <body>

-        <myuw-app-bar appName="Bucky Backup">
+        <myuw-app-bar>
            <myuw-profile 
                slot="myuw-profile"
                login-url="https://wisc.edu/"
                logout-url="https://wisc.edu/"
                session-endpoint="https://my.wisc.edu/portal/web/session.json"
            >
+            <a href="https://wisc.edu" slot="nav-item">UW Madison Home</a>
+            <a href="https://wisc.edu" slot="nav-item">STAR</a>
            </myuw-profile>
        </myuw-app-bar>
    </body>

--- a/myuw-profile.css
+++ b/myuw-profile.css
@@ -21,6 +21,18 @@
    height: 40px;
    background: teal;
    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+#myuw-profile-circle-initial {
+    padding: 0;
+    margin: 0;
+    font-weight: 100;
+    user-select: none;
+    text-transform: capitalize;
 }

 #myuw-profile-wrapper {
@@ -47,7 +59,7 @@
    transform-origin: top right;
    transform: scale(0);
    opacity: 0;
-    transition: all .25s ease;
+    transition: all .25s cubic-bezier(0.0, 0.0, 0.2, 1);

    -webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 7px 0px rgba(50, 50, 50, 0.75);
@@ -64,41 +76,36 @@
    margin: 0;
 }

-#myuw-profile-nav.visible a,
-#myuw-profile-nav.visible p {
-    opacity: 1;
-}
-
 #myuw-profile-nav a,
-#myuw-profile-nav p {
-    opacity: 0;
+#myuw-profile-nav p,
+::slotted(a),
+::slotted(p){
    transition: all .3s ease;
    position: relative;
    display: block;
    padding: 14px 16px;
-    /* transition: background-color .15s ease; */
    color: black;
    text-decoration: none;
+    background-color: #f9f9f9;
+    border-bottom: solid 1px #e5e5e5;
+    user-select: none;
 }

 #myuw-profile-nav a:first-child,
 #myuw-profile-nav p:first-child {
    padding: 14px 16px;
    font-weight: bold;
+    background-color: white;
 }

-#myuw-profile-wrapper a:hover,
-#myuw-profile-wrapper p:hover {
-    background-color: rgba(158,158,158,0.2);
+#myuw-profile-nav a:first-child:hover,
+#myuw-profile-nav p:first-child:hover {
+    background-color: white;
 }

-:global(#myuw-profile-nav li a) {
-    transition: all .3s ease;
-    position: relative;
-    display: block;
-    padding: 14px 16px;
-    background-color: teal;
-    /* transition: background-color .15s ease; */
-    color: black;
-    text-decoration: none;
+#myuw-profile-wrapper a:hover,
+#myuw-profile-wrapper p:hover,
+::slotted(a:hover),
+::slotted(p:hover)  {
+    background-color: rgba(158,158,158,0.2);
 }
\ No newline at end of file
--- a/myuw-profile.html
+++ b/myuw-profile.html
@@ -5,13 +5,15 @@
    <a href="#" id="myuw-profile-login">Login</a>

    <div id="myuw-profile-wrapper">
-            <div id="myuw-profile-circle"></div>
+            <div id="myuw-profile-circle">
+                <p id="myuw-profile-circle-initial">B</p>
+            </div>

            <div id="myuw-profile-nav">
-                <p>Bucky</p>
-                <slot name="list-item"></slot>
+                <p id="myuw-profile-nav-user">Bucky</p>
+                <slot name="nav-item"></slot>
                <a href="#">Settings</a>
-                <a href="#">Logout</a>
+                <a id="myuw-profile-logout" href="#">Logout</a>
            </div>
    </div>

@@ -92,14 +94,25 @@ class MyUWProfile extends HTMLElement {
        // Set the Login URL
        this.shadowRoot.getElementById('myuw-profile-login').setAttribute('href', this['login-url']);

+        // Set the logout URL
+        this.shadowRoot.getElementById('myuw-profile-logout').setAttribute('href', this['logout-url']);
+
        // Show / hide elements based on shib state
        if(this.user){
+            // Hide login button
            this.shadowRoot.getElementById('myuw-profile-login').classList.add('hidden');
-
+            // Show Profile circle
            this.shadowRoot.getElementById('myuw-profile-wrapper').classList.remove('hidden');
+
+            // Add user's name to first menu item
+            this.shadowRoot.getElementById('myuw-profile-nav-user').innerHTML = this.user.firstName;
+
+            // Change the letter in the profile circle
+            this.shadowRoot.getElementById('myuw-profile-circle-initial').innerHTML = this.user.firstName.substring(0,1);
        } else {
+            // Show Login Button
            this.shadowRoot.getElementById('myuw-profile-login').classList.remove('hidden');
-
+            // Hide profile Circle
            this.shadowRoot.getElementById('myuw-profile-wrapper').classList.add('hidden');
        }
    }