diff --git a/README.md b/README.md
index a625b375bbdaf8389b71cb601d673d2fe3e737d9..452b6a9ea2a3f31779b904376b93793dc283e128 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,11 @@
-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
diff --git a/index.html b/index.html
index 0de06246fb8d4643575984ef9f90beb622b82d99..7835883071155a4530e274e226b0b7d2e137fd09 100644
--- 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);
}
diff --git a/myuw-profile.html b/myuw-profile.html
index c60f0a51238542ef2ac23499ae02fb5e0052046c..821b7a4f6ae06b808e88b71b825f55b789d66945 100644
--- 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;
}
}