update readme and tweak attribute name

41768019 · David Witter · b5980caa · 41768019 · 41768019 · 41768019
Commit 41768019 authored 6 years ago by David Witter
--- 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.
+#myuw-profile

 ## Getting Started

 Add the following import to your page's `<head>`:

 ```html
-<link rel="import" href="https://unpkg.com/@myuw-web-components/myuw-profile@1.0.0/myuw-profile.html">
+<link rel="import" href="https://cdn.rawgit.com/myuw-web-components/myuw-profile/0eb2e944/myuw-profile.html">
 ```

 Use the component's HTML tag wherever you want:
@@ -17,6 +15,7 @@ Use the component's HTML tag wherever you want:
    login-url=""
    logout-url=""
    session-endpoint=""
+    background-color=""
    open-right
 >
 </myuw-profile>
@@ -27,6 +26,7 @@ Use the component's HTML tag wherever you want:
 - **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
+- **Background color (background-color):** Use this to dynamically set the background color of the profile menu button
 - **Open Menu Right (open-right):** Include this attribute if you would like the profile menu to open to the right, instead of left

 #### Slots
@@ -36,6 +36,7 @@ Use the component's HTML tag wherever you want:
 #### CSS Variables

 - `--myuw-profile-font`: Set the font stack for this component
- `--myuw-profile-login-color`: Se the font color for the "Login" button
+- `--myuw-profile-login-color`: Set the font color of the "Login" button
+- `--myuw-profile-background-color`: Set the background color of the circular menu button

 For more information about CSS variables and how they work with MyUW Web Components, [reference the styles component](https://github.com/myuw-web-components/myuw-app-styles "reference the styles component")
\ No newline at end of file
--- a/index.html
+++ b/index.html
@@ -66,8 +66,7 @@
                slot="myuw-profile"
                login-url="https://wisc.edu/"
                logout-url="https://wisc.edu/"
-                session-endpoint="./session.json"
-                color="#fb686d">
+                session-endpoint="./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>
@@ -89,6 +88,9 @@
            <div class="demo-item">
                <button aria-label="restore demo session" onclick="setSession('./session.json')">Restore demo session</button>
            </div>
+            <div class="demo-item">
+                <button aria-label="set missing session-endpoint" onclick="setSession(null)">Set missing session endpoint</button>
+            </div>
        </div>
        
        <!-- Functions for demo content -->
@@ -97,11 +99,10 @@
                if (newColor.indexOf('#') < 0) {
                    newColor = '#' + newColor;
                }
-                document.getElementsByTagName('myuw-profile')[0].setAttribute('color', newColor);
+                document.getElementsByTagName('myuw-profile')[0].setAttribute('background-color', newColor);
            }

            function setSession(session) {
-                console.log(session);
                // Remove profile from DOM
                document.getElementsByTagName('myuw-profile')[0].remove();
                // Construct new profile template
@@ -109,12 +110,14 @@
                newProfileTemplate.setAttribute('slot', 'myuw-profile');
                newProfileTemplate.setAttribute('login-url', 'https://wisc.edu/');
                newProfileTemplate.setAttribute('logout-url', 'https://wisc.edu/');
-                newProfileTemplate.setAttribute('session-endpoint', session);
                newProfileTemplate.setAttribute('color', '#fb686d');
                newProfileTemplate.innerHTML = `
                    <a href="https://wisc.edu" slot="nav-item">UW Madison Home</a>
                    <a href="https://wisc.edu" slot="nav-item">STAR</a>
                `;
+                if (session) {
+                    newProfileTemplate.setAttribute('session-endpoint', session);
+                }
                // Reinsert into DOM   
                document.getElementsByTagName('myuw-app-bar')[0].appendChild(newProfileTemplate);
            }

--- a/myuw-profile.html
+++ b/myuw-profile.html
@@ -51,6 +51,7 @@
        font-weight: 500;
        font-size: 18px;
        font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );
+        background-color: var( --myuw-profile-background-color, #fb686d);
        user-select: none;
        color: white;
        text-transform: capitalize;
@@ -200,7 +201,7 @@ class MyUWProfile extends HTMLElement {
            'login-url', 
            'logout-url', 
            'open-right',
-            'color'
+            'background-color'
        ];
    }

@@ -217,7 +218,7 @@ class MyUWProfile extends HTMLElement {
        this['login-url']           = this.getAttribute('login-url');
        this['logout-url']          = this.getAttribute('logout-url');
        this['session-endpoint']    = this.getAttribute('session-endpoint');
-        this['color']               = this.getAttribute('color');
+        this['background-color']    = this.getAttribute('background-color');
        this['user'] = false;

        if(this.getAttribute('open-right') !== null){
@@ -296,7 +297,7 @@ class MyUWProfile extends HTMLElement {
        this.updateAttribute('logout-url');
        this.updateAttribute('session-endpoint');
        this.updateAttribute('open-right');
-        this.updateAttribute('color');
+        this.updateAttribute('background-color');
    }

    // Update the component with attribute values
@@ -315,9 +316,8 @@ class MyUWProfile extends HTMLElement {
                    this.shadowRoot.getElementById('myuw-profile-nav').classList.add('open-right');
                }
                break;
-            case 'color':
-                console.log('updating color to: ' + this['color']);
-                this.shadowRoot.getElementById('myuw-profile-circle-initial').style.backgroundColor = this['color'];
+            case 'background-color':
+                this.shadowRoot.getElementById('myuw-profile-circle-initial').style.backgroundColor = this['background-color'];
                break;
        }
    }