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

feat: add tota11y and more demo content

parent 0eb2e944
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
index.html
+ 98
− 7
View file @ b5980caa
......@@ -4,32 +4,123 @@
body {
padding: 0;
margin: 0;
background: #ccc;
font-family: Arial, Helvetica, sans-serif;
}
.demo-content {
padding: 0 36px;
}
.demo-item {
height: 48px;
display: flex;
justify-content: start;
align-content: center;
align-items: flex-end;
flex-direction: row;
}
.demo-item .column {
display: flex;
flex-direction: column;
}
.demo-item label {
font-size: 14px;
margin-bottom: 4px;
}
.demo-item input {
height: 36px;
border-radius: 5px;
margin-right: 8px;
font-size: 14px;
border: none;
}
.demo-item button {
min-width: 48px;
min-height: 24px;
padding: 8px 8px;
font-size: 14px;
overflow-y: hidden;
border-radius: 5px;
transition: background 0.15s ease-in-out;
}
.demo-item button:hover {
background: #ebebeb;
cursor: pointer;
}
</style>
<script src="https://unpkg.com/@myuw-web-components/myuw-app-styles/myuw-app-styles.js"></script>
<link rel="import" href="https://unpkg.com/@myuw-web-components/myuw-app-bar@1.0.0/myuw-app-bar.html">
<script src="https://cdn.rawgit.com/myuw-web-components/myuw-app-styles/6f62858b/myuw-app-styles.js"></script>
<link rel="import" href="https://cdn.rawgit.com/myuw-web-components/myuw-app-bar/86b5c15b/myuw-app-bar.html">
<link rel="import" href="myuw-profile.html">
</head>
<body>
<!-- App bar with profile button -->
<myuw-app-bar
theme-name="MyUW"
theme-url=""
app-name="Component Test"
app-name="Profile Demo"
app-url=""
background="rgb(197, 5, 12)"
color="white"
>
color="white">
<myuw-profile
slot="myuw-profile"
login-url="https://wisc.edu/"
logout-url="https://wisc.edu/"
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">STAR</a>
</myuw-profile>
</myuw-app-bar>
<!-- Demo content -->
<div class="demo-content">
<h1>Demo</h1>
<div class="demo-item">
<div class="column">
<label for="newColor">Color: </label>
<input id="newColor" type="text" placeholder="#888">
</div>
<button aria-label="set profile button color" onclick="setColor(newColor.value)">Set profile color</button>
</div>
<div class="demo-item">
<button aria-label="set no session" onclick="setSession('jargon')">No session</button>
</div>
<div class="demo-item">
<button aria-label="restore demo session" onclick="setSession('./session.json')">Restore demo session</button>
</div>
</div>
<!-- Functions for demo content -->
<script>
function setColor(newColor) {
if (newColor.indexOf('#') < 0) {
newColor = '#' + newColor;
}
document.getElementsByTagName('myuw-profile')[0].setAttribute('color', newColor);
}
function setSession(session) {
console.log(session);
// Remove profile from DOM
document.getElementsByTagName('myuw-profile')[0].remove();
// Construct new profile template
var newProfileTemplate = document.createElement('myuw-profile');
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>
`;
// Reinsert into DOM
document.getElementsByTagName('myuw-app-bar')[0].appendChild(newProfileTemplate);
}
</script>
<!-- Accessibility tester -->
<script src="./node_modules/tota11y/build/tota11y.min.js"></script>
</body>
</html>
\ No newline at end of file
myuw-profile.html
+ 79
− 54
View file @ b5980caa
......@@ -16,6 +16,7 @@
font-size: 14px;
position: relative;
display: inline-block;
transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);
}
#myuw-profile-login.hidden {
......@@ -23,15 +24,25 @@
}
#myuw-profile-circle {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
outline: none;
border-radius: 50%;
height: 42px;
width: 42px;
min-width: initial;
margin-left: 8px;
padding: 4px;
text-transform: uppercase;
text-align: center;
background: transparent;
border-color: transparent;
transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);
}
#myuw-profile-circle:hover,
#myuw-profile-login:hover {
cursor: pointer;
background: rgba(0,0,0,0.12);
}
#myuw-profile-circle-initial {
......@@ -43,6 +54,16 @@
user-select: none;
color: white;
text-transform: capitalize;
border-radius: 50%;
display: block;
margin: 0;
overflow: hidden;
position: relative;
height: 33px;
width: 33px;
line-height: 33px;
font-size: 18px;
font-weight: 400;
}
#myuw-profile-wrapper {
......@@ -64,15 +85,17 @@
margin: 0;
padding: 0;
font-size: 14px;
z-index: 101;
transform-origin: top right;
transform: scale(0);
opacity: 0;
transition: opacity .25s cubic-bezier(0.0, 0.0, 0.2, 1), transform .25s cubic-bezier(0.0, 0.0, 0.2, 1);
visibility: hidden;
transition: visibility 0s, opacity .25s cubic-bezier(0.0, 0.0, 0.2, 1), transform .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);
box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
-webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
-moz-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
}
#myuw-profile-nav.open-right {
......@@ -84,6 +107,7 @@
#myuw-profile-nav.visible {
transform: scale(1);
opacity: 1;
visibility: visible;
}
#myuw-profile-nav p {
......@@ -99,50 +123,63 @@
position: relative;
font-size: 15px;
font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );
display: block;
padding: 14px 16px;
color: black;
padding: 3px 16px;
color: rgba(0,0,0,0.87);
text-decoration: none;
background-color: #f9f9f9;
border-bottom: solid 1px #e5e5e5;
background-color: #f5f5f5;
border-bottom: 1px solid #e5e5e5;
user-select: none;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
min-height: 48px;
height: 48px;
-webkit-align-content: center;
align-content: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
#myuw-profile-nav a:first-child,
#myuw-profile-nav p:first-child {
padding: 14px 16px;
font-weight: bold;
background-color: white;
font-weight: 600;
text-transform: capitalize;
background-color: rgb(255,255,255);
border-bottom: none;
}
#myuw-profile-nav a:first-child:hover,
#myuw-profile-nav p:first-child:hover {
background-color: white;
background-color: rgb(255,255,255);
}
#myuw-profile-nav a:hover,
#myuw-profile-nav p:hover,
::slotted(a:hover),
::slotted(p:hover) {
background-color: rgba(158,158,158,0.2);
background-color: #ececec;
}
</style>
<a href="#" id="myuw-profile-login" class="hidden">Login</a>
<div id="myuw-profile-wrapper" class="hidden">
<div id="myuw-profile-circle">
<button id="myuw-profile-circle" aria-label="show profile menu">
<p id="myuw-profile-circle-initial">B</p>
</div>
</button>
<div id="myuw-profile-nav">
<div id="myuw-profile-nav" class="aria-hidden">
<p id="myuw-profile-nav-user">Bucky</p>
<slot name="nav-item"></slot>
<a href="#">Settings</a>
<a id="myuw-profile-logout" href="#">Logout</a>
</div>
</div>
</template>
<script>
class MyUWProfile extends HTMLElement {
......@@ -158,7 +195,14 @@ class MyUWProfile extends HTMLElement {
this.shadowRoot.appendChild(MyUWProfile.template.content.cloneNode(true));
}
static get observedAttributes() {return ['login-url', 'logout-url', 'open-right']; }
static get observedAttributes() {
return [
'login-url',
'logout-url',
'open-right',
'color'
];
}
attributeChangedCallback(name, oldValue, newValue){
// Update the attribute internally
......@@ -173,6 +217,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['user'] = false;
if(this.getAttribute('open-right') !== null){
......@@ -217,7 +262,7 @@ class MyUWProfile extends HTMLElement {
window.addEventListener('click', e => {
let nav = this.shadowRoot.getElementById('myuw-profile-nav');
if(nav.classList.contains('visible')){
if (nav.classList.contains('visible')) {
nav.classList.remove('visible')
}
});
......@@ -251,10 +296,11 @@ class MyUWProfile extends HTMLElement {
this.updateAttribute('logout-url');
this.updateAttribute('session-endpoint');
this.updateAttribute('open-right');
this.updateAttribute('color');
}
// Update the component with attribute values
updateAttribute(att){
updateAttribute(att) {
switch(att){
case 'login-url':
this.shadowRoot.getElementById('myuw-profile-login').setAttribute('href', this['login-url']);
......@@ -269,6 +315,10 @@ 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'];
break;
}
}
......@@ -288,9 +338,7 @@ class MyUWProfile extends HTMLElement {
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);
this.setProfileColor();
// Show the profile bubble
this.showProfileBubble();
} else {
if (this['login-url'] !== null) {
......@@ -301,29 +349,6 @@ class MyUWProfile extends HTMLElement {
}
}
/*
Programmatically select a profile background
color based on the length of the users first name
and the first letter of their first name
*/
setProfileColor() {
const colors = [
'#093145',
'#107896',
'#829356',
'#00A996',
'#BCA136',
'#744196'
];
const firstName = this.user.firstName.length;
const initial = this.user.firstName.substring(0,1).charCodeAt();
const colorIndex = (initial + firstName) % colors.length;
this.shadowRoot.getElementById('myuw-profile-circle').style.backgroundColor = colors[colorIndex];
}
showLoginButton() {
// Show Login Button
this.shadowRoot.getElementById('myuw-profile-login').classList.remove('hidden');
......
package-lock.json
+ 6
− 0
View file @ b5980caa
......@@ -1199,6 +1199,12 @@
"integrity": "sha1-lYYL/MXHbCd/j4Mm/Q9bLiDrohc=",
"dev": true
},
"tota11y": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/tota11y/-/tota11y-0.1.6.tgz",
"integrity": "sha1-MScjYU/5X/u4dOVogElAd0ceFUc=",
"dev": true
},
"toxic": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/toxic/-/toxic-1.0.0.tgz",
......
package.json
+ 2
− 1
View file @ b5980caa
......@@ -17,6 +17,7 @@
},
"homepage": "https://github.com/myuw-web-components/myuw-profile#readme",
"devDependencies": {
"superstatic": "^5.0.1"
"superstatic": "^5.0.1",
"tota11y": "^0.1.6"
}
}
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