Skip to content
Snippets Groups Projects
Commit 41768019 authored by David Witter's avatar David Witter
Browse files

update readme and tweak attribute name

parent b5980caa
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
README.md
+ 6
− 5
View file @ 41768019
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. #myuw-profile
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.
## Getting Started ## Getting Started
Add the following import to your page's `<head>`: Add the following import to your page's `<head>`:
```html ```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: Use the component's HTML tag wherever you want:
...@@ -17,6 +15,7 @@ Use the component's HTML tag wherever you want: ...@@ -17,6 +15,7 @@ Use the component's HTML tag wherever you want:
login-url="" login-url=""
logout-url="" logout-url=""
session-endpoint="" session-endpoint=""
background-color=""
open-right open-right
> >
</myuw-profile> </myuw-profile>
...@@ -27,6 +26,7 @@ Use the component's HTML tag wherever you want: ...@@ -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 - **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 - **Logout URL (logout-url):** The Logout URL to redirect users to on logout
- **Session Endpoint (session-endpoint):** The endpoint URL for session info - **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 - **Open Menu Right (open-right):** Include this attribute if you would like the profile menu to open to the right, instead of left
#### Slots #### Slots
...@@ -36,6 +36,7 @@ Use the component's HTML tag wherever you want: ...@@ -36,6 +36,7 @@ Use the component's HTML tag wherever you want:
#### CSS Variables #### CSS Variables
- `--myuw-profile-font`: Set the font stack for this component - `--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") 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
index.html
+ 8
− 5
View file @ 41768019
...@@ -66,8 +66,7 @@ ...@@ -66,8 +66,7 @@
slot="myuw-profile" slot="myuw-profile"
login-url="https://wisc.edu/" login-url="https://wisc.edu/"
logout-url="https://wisc.edu/" logout-url="https://wisc.edu/"
session-endpoint="./session.json" session-endpoint="./session.json">
color="#fb686d">
<a href="https://wisc.edu" slot="nav-item">UW Madison Home</a> <a href="https://wisc.edu" slot="nav-item">UW Madison Home</a>
<a href="https://wisc.edu" slot="nav-item">STAR</a> <a href="https://wisc.edu" slot="nav-item">STAR</a>
</myuw-profile> </myuw-profile>
...@@ -89,6 +88,9 @@ ...@@ -89,6 +88,9 @@
<div class="demo-item"> <div class="demo-item">
<button aria-label="restore demo session" onclick="setSession('./session.json')">Restore demo session</button> <button aria-label="restore demo session" onclick="setSession('./session.json')">Restore demo session</button>
</div> </div>
<div class="demo-item">
<button aria-label="set missing session-endpoint" onclick="setSession(null)">Set missing session endpoint</button>
</div>
</div> </div>
<!-- Functions for demo content --> <!-- Functions for demo content -->
...@@ -97,11 +99,10 @@ ...@@ -97,11 +99,10 @@
if (newColor.indexOf('#') < 0) { if (newColor.indexOf('#') < 0) {
newColor = '#' + newColor; newColor = '#' + newColor;
} }
document.getElementsByTagName('myuw-profile')[0].setAttribute('color', newColor); document.getElementsByTagName('myuw-profile')[0].setAttribute('background-color', newColor);
} }
function setSession(session) { function setSession(session) {
console.log(session);
// Remove profile from DOM // Remove profile from DOM
document.getElementsByTagName('myuw-profile')[0].remove(); document.getElementsByTagName('myuw-profile')[0].remove();
// Construct new profile template // Construct new profile template
...@@ -109,12 +110,14 @@ ...@@ -109,12 +110,14 @@
newProfileTemplate.setAttribute('slot', 'myuw-profile'); newProfileTemplate.setAttribute('slot', 'myuw-profile');
newProfileTemplate.setAttribute('login-url', 'https://wisc.edu/'); newProfileTemplate.setAttribute('login-url', 'https://wisc.edu/');
newProfileTemplate.setAttribute('logout-url', 'https://wisc.edu/'); newProfileTemplate.setAttribute('logout-url', 'https://wisc.edu/');
newProfileTemplate.setAttribute('session-endpoint', session);
newProfileTemplate.setAttribute('color', '#fb686d'); newProfileTemplate.setAttribute('color', '#fb686d');
newProfileTemplate.innerHTML = ` newProfileTemplate.innerHTML = `
<a href="https://wisc.edu" slot="nav-item">UW Madison Home</a> <a href="https://wisc.edu" slot="nav-item">UW Madison Home</a>
<a href="https://wisc.edu" slot="nav-item">STAR</a> <a href="https://wisc.edu" slot="nav-item">STAR</a>
`; `;
if (session) {
newProfileTemplate.setAttribute('session-endpoint', session);
}
// Reinsert into DOM // Reinsert into DOM
document.getElementsByTagName('myuw-app-bar')[0].appendChild(newProfileTemplate); document.getElementsByTagName('myuw-app-bar')[0].appendChild(newProfileTemplate);
} }
......
myuw-profile.html
+ 6
− 6
View file @ 41768019
...@@ -51,6 +51,7 @@ ...@@ -51,6 +51,7 @@
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 18px;
font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) ); 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; user-select: none;
color: white; color: white;
text-transform: capitalize; text-transform: capitalize;
...@@ -200,7 +201,7 @@ class MyUWProfile extends HTMLElement { ...@@ -200,7 +201,7 @@ class MyUWProfile extends HTMLElement {
'login-url', 'login-url',
'logout-url', 'logout-url',
'open-right', 'open-right',
'color' 'background-color'
]; ];
} }
...@@ -217,7 +218,7 @@ class MyUWProfile extends HTMLElement { ...@@ -217,7 +218,7 @@ class MyUWProfile extends HTMLElement {
this['login-url'] = this.getAttribute('login-url'); this['login-url'] = this.getAttribute('login-url');
this['logout-url'] = this.getAttribute('logout-url'); this['logout-url'] = this.getAttribute('logout-url');
this['session-endpoint'] = this.getAttribute('session-endpoint'); this['session-endpoint'] = this.getAttribute('session-endpoint');
this['color'] = this.getAttribute('color'); this['background-color'] = this.getAttribute('background-color');
this['user'] = false; this['user'] = false;
if(this.getAttribute('open-right') !== null){ if(this.getAttribute('open-right') !== null){
...@@ -296,7 +297,7 @@ class MyUWProfile extends HTMLElement { ...@@ -296,7 +297,7 @@ class MyUWProfile extends HTMLElement {
this.updateAttribute('logout-url'); this.updateAttribute('logout-url');
this.updateAttribute('session-endpoint'); this.updateAttribute('session-endpoint');
this.updateAttribute('open-right'); this.updateAttribute('open-right');
this.updateAttribute('color'); this.updateAttribute('background-color');
} }
// Update the component with attribute values // Update the component with attribute values
...@@ -315,9 +316,8 @@ class MyUWProfile extends HTMLElement { ...@@ -315,9 +316,8 @@ class MyUWProfile extends HTMLElement {
this.shadowRoot.getElementById('myuw-profile-nav').classList.add('open-right'); this.shadowRoot.getElementById('myuw-profile-nav').classList.add('open-right');
} }
break; break;
case 'color': case 'background-color':
console.log('updating color to: ' + this['color']); this.shadowRoot.getElementById('myuw-profile-circle-initial').style.backgroundColor = this['background-color'];
this.shadowRoot.getElementById('myuw-profile-circle-initial').style.backgroundColor = this['color'];
break; break;
} }
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment