Skip to content
Snippets Groups Projects
Commit 8450c2ab authored by Scott Berg's avatar Scott Berg
Browse files

Inital commit. Create basic profile component

parents
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
README.md 0 → 100644
+ 15
− 0
View file @ 8450c2ab
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.
## Testing
You can view a test of this component being used with the myuw-app-bar by opening index.html
#### Configurable properties
- **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
index.html 0 → 100644
+ 34
− 0
View file @ 8450c2ab
<html>
<head>
<style>
*{
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-profile
slot="myuw-profile"
login-url="https://wisc.edu/"
logout-url="https://wisc.edu/"
session-endpoint="https://my.wisc.edu/portal/web/session.json"
>
</myuw-profile>
</myuw-app-bar>
</body>
</html>
\ No newline at end of file
myuw-profile.css 0 → 100644
+ 105
− 0
View file @ 8450c2ab
#myuw-profile-login {
font-family: 'Roboto', 'Noto', sans-serif;
text-transform: uppercase;
text-decoration: none;
color: white;
padding: 10px 13px;
letter-spacing: 1px;
font-size: 14px;
position: relative;
display: inline-block;
}
#myuw-profile-login.hidden {
display: none;
}
#myuw-profile-circle {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
background: teal;
border-radius: 100%;
}
#myuw-profile-wrapper {
position: relative;
display: inline-block;
}
#myuw-profile-wrapper.hidden {
display: none;
}
#myuw-profile-nav {
position: absolute;
top: 45px;
right: 0;
background-color:white;
min-width: 320px;
color: black;
list-style: none;
margin: 0;
padding: 0;
font-size: 14px;
transform-origin: top right;
transform: scale(0);
opacity: 0;
transition: all .25s ease;
-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);
box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
}
#myuw-profile-nav.visible {
transform: scale(1);
opacity: 1;
}
#myuw-profile-nav p {
padding: 0;
margin: 0;
}
#myuw-profile-nav.visible a,
#myuw-profile-nav.visible p {
opacity: 1;
}
#myuw-profile-nav a,
#myuw-profile-nav p {
opacity: 0;
transition: all .3s ease;
position: relative;
display: block;
padding: 14px 16px;
/* transition: background-color .15s ease; */
color: black;
text-decoration: none;
}
#myuw-profile-nav a:first-child,
#myuw-profile-nav p:first-child {
padding: 14px 16px;
font-weight: bold;
}
#myuw-profile-wrapper a:hover,
#myuw-profile-wrapper p:hover {
background-color: rgba(158,158,158,0.2);
}
: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;
}
\ No newline at end of file
myuw-profile.html 0 → 100644
+ 109
− 0
View file @ 8450c2ab
<!DOCTYPE html>
<template id="myuw-profile-template">
<link href="./myuw-profile.css" rel="stylesheet">
<a href="#" id="myuw-profile-login">Login</a>
<div id="myuw-profile-wrapper">
<div id="myuw-profile-circle"></div>
<div id="myuw-profile-nav">
<p>Bucky</p>
<slot name="list-item"></slot>
<a href="#">Settings</a>
<a href="#">Logout</a>
</div>
</div>
</template>
<script>
const testMyUW = {"person":{"firstName":"Bucky","lastName":"Badger","sessionKey":"111111111","displayName":"Bucky Badger","serverName":"prod","userName":"bbadger"}};
class MyUWProfile extends HTMLElement {
constructor() {
super();
// Get the script document
const thisDoc = (document._currentScript || document.currentScript).ownerDocument;
// Create a shadowroot for this element
this.attachShadow({mode: 'open'});
// Get the template and extract the HTML content
const template = thisDoc.getElementById('myuw-profile-template');
// Append the custom HTML to the shadowroot
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
static get observedAttributes() {return ['login-url', 'logout-url', 'session-endpoint']; }
attributeChangedCallback(name, oldValue, newValue){
// Update the attribute internally
// console.log(`${name} has updated from "${oldValue}" to "${newValue}"`);
this[name] = newValue;
// Update the component
this.updateComponent();
}
connectedCallback(){
// Get all attributes
this['login-url'] = this.getAttribute('login-url');
this['logout-url'] = this.getAttribute('logout-url');
this['session-endpoint'] = this.getAttribute('session-endpoint');
// Get the user info
if(this['session-endpoint']){
this['user'] = testMyUW.person;
// this['user'] = false
} else {
throw 'No session endpoint has been defiend. Please pass the session endpoint URL into the myuw-profile element!';
this['user'] = false;
}
// Attach onClick to profile button
this.shadowRoot.getElementById('myuw-profile-circle').addEventListener('click', e => {
e.stopPropagation();
this.shadowRoot.getElementById('myuw-profile-nav').classList.toggle('visible');
});
this.shadowRoot.getElementById('myuw-profile-nav').addEventListener('click', e => {
e.stopPropagation();
});
// Add onclick to body
window.addEventListener('click', e => {
let nav = this.shadowRoot.getElementById('myuw-profile-nav');
if(nav.classList.contains('visible')){
nav.classList.remove('visible')
}
});
// Update the component to use the new attributes
this.updateComponent();
}
updateComponent(){
// Set the Login URL
this.shadowRoot.getElementById('myuw-profile-login').setAttribute('href', this['login-url']);
// Show / hide elements based on shib state
if(this.user){
this.shadowRoot.getElementById('myuw-profile-login').classList.add('hidden');
this.shadowRoot.getElementById('myuw-profile-wrapper').classList.remove('hidden');
} else {
this.shadowRoot.getElementById('myuw-profile-login').classList.remove('hidden');
this.shadowRoot.getElementById('myuw-profile-wrapper').classList.add('hidden');
}
}
}
window.customElements.define('myuw-profile', MyUWProfile);
</script>
\ No newline at end of file
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