Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • adi-ia/enrollment-profile
  • SABERG3/enrollment-profile
2 results
Show changes
Commits on Source (20)
Expand all Hide whitespace changes
Inline Side-by-side
CHANGELOG.md
View file @ bba5b845
# myuw-profile versions
## 1.3.2
### Fixed
* Check for valid references before messing with DOM elements/variables
## 1.3.0
### Added
......
README.md
View file @ bba5b845
......@@ -9,6 +9,8 @@ Add the following import to your page's `<head>`:
<script nomodule src="https://unpkg.com/@myuw-web-components/myuw-profile@^1"></script>
```
*Note: You may want to specify a specific version of the component to ensure stability. See [the change log](CHANGELOG.md) or the [npm entry](https://www.npmjs.com/package/@myuw-web-components/myuw-profile) for version information.*
Use the component's HTML tag wherever you want:
```HTML
......@@ -20,39 +22,57 @@ Use the component's HTML tag wherever you want:
</myuw-profile>
```
### Login event
To tell the component that there is an active session, dispatch a CustomEvent called "myuw-login":
### Displaying the component
Because it has multiple states depending on whether there is an active session, all elements of the profile component are hidden by default. The component listens for a CustomEvent called "myuw-login" and its state is dependent on the data you pass when you dispatch that event:
```js
/*
Notes about configuring the event:
- The event MUST contain a "detail" object. The contents of the detail object determine what the component will display:
- An empty "detail" object ( detail: {} ) will result in the login button being displayed
- An empty "person" object ( person: {} ) will result in a generic session being displayed (using the person icon). This should only be used when the session doesn't provide a user's name, username, email, etc.
- A person object containing a "firstName" ( person: {firstName: "Name"} ) will result in the full session display
- The "bubbles" property is optional unless you're dispatching the event from an element/scope other than "document"
*/
var customEvent = new CustomEvent('myuw-login', {
detail: { // required object "detail"
person: { // required object "person"
"firstName": "User" // required property "firstName"
bubbles: true, // optional
detail: { // required always
person: { // required for generic session display
"firstName": "User" // required for full session display
}
}
});
// Dispatch the event
document.getElementsByTagName('myuw-profile')[0].dispatchEvent(customEvent);
document.dispatchEvent(customEvent);
```
Notes:
#### Initial page load
- The "detail" object is required by the CustomEvent spec
- The "person" object is required by the myuw-profile component
- The "firstName" attribute determines the letter displayed in the profile menu button and the name displayed within the menu
If you want the component to show something on the initial page load (and not be hidden), make sure to dispatch the "myuw-login" event **after** all web components are loaded and upgraded (i.e. ready to be interacted with). The webcomponentsjs polyfill provides and event you can hook into:
```js
document.addEventListener('WebComponentsReady', function() {
var customEvent = new CustomEvent('myuw-login', {
// Configure the event data to display what you want
});
// Dispatch the event
document.dispatchEvent(customEvent);
});
```
#### Configurable properties
### 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
- **Background color (background-color):** Use this to dynamically set the background color of the profile menu button
#### Slots
### Slots
- **Profile Navigation Item (nav-item):** Add a custom item to the profile button's navigation menu, this slot expects an `<a>` tag
#### CSS Variables
### CSS Variables
- `--myuw-profile-font`: Set the font stack for this component
- `--myuw-profile-login-color`: Set the font color of the "Login" button
......@@ -60,3 +80,7 @@ Notes:
- `--myuw-menu-color`: The text color of links/buttons in the profile menu
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")
Cross-browser testing provided by:<br/>
<a href="https://www.browserstack.com/"><img width="160" src="https://myuw-web-components.github.io/img/Browserstack-logo.svg" alt="BrowserStack"/></a>
index.html
View file @ bba5b845
......@@ -49,6 +49,10 @@
}
</style>
<script src="https://unpkg.com/css-vars-ponyfill@1"></script>
<script>
cssVars({shadowDOM: true,watch: true});
</script>
<!-- Web component polyfill loader -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
......@@ -60,7 +64,6 @@
<script type="module" src="./dist/myuw-profile.mjs"></script>
<script nomodule src="./dist/myuw-profile.mjs"></script>
</head>
<body>
<!-- App bar with profile button -->
......@@ -95,6 +98,9 @@
<div class="demo-item">
<button aria-label="restore demo session" onclick="setPortalSession()">Set portal session</button>
</div>
<div class="demo-item">
<button aria-label="set a session without user info" onclick="setNonstandardSession()">Set session without person info</button>
</div>
<div class="demo-item">
<button aria-label="log in with other data" onclick="customLogin()">Set custom session</button>
</div>
......@@ -105,22 +111,36 @@
// Add event listener to profile component
function customLogin(event) {
var customEvent = new CustomEvent('myuw-login', {
bubbles: true,
detail: {
person: {
"firstName": "Shibboleth"
}
}
});
document.getElementsByTagName('myuw-profile')[0].dispatchEvent(customEvent);
document.dispatchEvent(customEvent);
};
function logout() {
var customEvent = new CustomEvent('myuw-login', {
bubbles: true,
detail: {
person: null
}
});
document.getElementsByTagName('myuw-profile')[0].dispatchEvent(customEvent);
document.dispatchEvent(customEvent);
}
function setNonstandardSession() {
var customEvent = new CustomEvent('myuw-login', {
bubbles: true,
detail: {
person: {
"someOtherAttribute": "What is this"
}
}
});
document.dispatchEvent(customEvent);
}
function setPortalSession() {
......@@ -135,28 +155,31 @@
// Set user data to the component
var customEvent = new CustomEvent('myuw-login', {
bubbles: true,
detail: {
person: data.person
}
});
document.getElementsByTagName('myuw-profile')[0].dispatchEvent(customEvent);
document.dispatchEvent(customEvent);
})
} else {
var customEvent = new CustomEvent('myuw-login', {
bubbles: true,
detail: {
person: null
}
});
document.getElementsByTagName('myuw-profile')[0].dispatchEvent(customEvent);
document.dispatchEvent(customEvent);
}
})
.catch( e => {
var customEvent = new CustomEvent('myuw-login', {
bubbles: true,
detail: {
person: null
}
});
document.getElementsByTagName('myuw-profile')[0].dispatchEvent(customEvent);
document.dispatchEvent(customEvent);
} );
}
......
package-lock.json
View file @ bba5b845
This diff is collapsed.
package.json
View file @ bba5b845
{
"name": "@myuw-web-components/myuw-profile",
"version": "1.2.2",
"name": "enrollment-profile",
"version": "1.3.1",
"description": "Web component that provides an avatar button and profile menu",
"module": "dist/myuw-profile.min.mjs",
"browser": "dist/myuw-profile.min.js",
"scripts": {
"build": "rollup -c",
"watch": "rollup -c -w",
"serve": "live-server",
"serve": "live-server --port=4200",
"start": "run-p watch serve",
"prepare": "npm run build",
"pages": "rm -rf demo && mkdir -p demo && cp -r dist demo/ && cp -r test demo/ && cp index.html demo/ && gh-pages -d demo --repo git@github.com:myuw-web-components/myuw-profile.git",
......@@ -15,19 +15,18 @@
},
"repository": {
"type": "git",
"url": "git+https://github.com/myuw-web-components/myuw-profile.git"
"url": "git+https://git.doit.wisc.edu/adi-ia/enrollment-profile.git"
},
"author": "",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/myuw-web-components/myuw-profile/issues"
},
"homepage": "https://github.com/myuw-web-components/myuw-profile#readme",
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"gh-pages": "^1.2.0",
"live-server": "^1.2.0",
"npm-run-all": "^4.1.3",
"rollup": "^0.63.4",
"rollup-plugin-babel": "^4.0.3",
"rollup-plugin-html": "^0.2.1",
"rollup-plugin-minify-es": "^1.1.1",
"tota11y": "^0.1.6"
......
rollup.config.js
View file @ bba5b845
import { rollup } from 'rollup';
import html from 'rollup-plugin-html';
import minify from 'rollup-plugin-minify-es';
import babel from 'rollup-plugin-babel';
let fileName = 'myuw-profile';
let objName = 'MyUWProfile';
......@@ -38,7 +39,7 @@ let plugins = {
export default [
{
input: `src/${fileName}.js`,
plugins: plugins.full,
plugins: plugins.full.concat([babel({exclude: 'node_modules/**'})]),
output: {
file: `dist/${fileName}.js`,
name: objName,
......@@ -47,7 +48,7 @@ export default [
},
{
input: `src/${fileName}.js`,
plugins: plugins.min,
plugins: plugins.min.concat([babel({exclude: 'node_modules/**'})]),
output: {
file: `dist/${fileName}.min.js`,
name: objName,
......
src/.babelrc 0 → 100644
View file @ bba5b845
{
"presets": [
["@babel/env", {
"modules": false
}]
],
}
src/myuw-profile.html
View file @ bba5b845
<style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
:host([hidden]) {
display: none;
}
......@@ -183,6 +185,10 @@
border-bottom: none;
}
#myuw-profile-nav #myuw-profile-nav-user.hidden {
display: none;
}
#myuw-profile-nav #myuw-profile-nav-user:hover {
background-color: rgb(255,255,255);
}
......@@ -210,7 +216,7 @@
aria-haspopup="true"
aria-controls="myuw-profile-nav"
aria-expanded="false">
<p id="myuw-profile-circle-initial">B</p>
<p id="myuw-profile-circle-initial"><i class="material-icons">person</i></p>
</button>
<ul id="myuw-profile-nav"
......
src/myuw-profile.js
View file @ bba5b845
......@@ -19,12 +19,14 @@ class MyUWProfile extends HTMLElement {
];
}
attributeChangedCallback(name, oldValue, newValue){
attributeChangedCallback(name, oldValue, newValue) {
if (typeof this.$circle !== 'undefined') {
// Update the attribute internally
this[name] = newValue;
// Update the component with new att value
this.updateAttribute(name);
}
}
connectedCallback(){
......@@ -49,12 +51,12 @@ class MyUWProfile extends HTMLElement {
* Listen for custom event to receive session information
* @param {CustomEvent} event Event that should pass "person" information to display
*/
document.getElementsByTagName('myuw-profile')[0].addEventListener('myuw-login', (event) => {
document.addEventListener('myuw-login', (event) => {
// Process data passed with event
if (event.detail.person) {
this.componentReady(event.detail.person);
} else {
this.showLoginButton();
this.componentReady();
}
}, false);
......@@ -103,12 +105,11 @@ class MyUWProfile extends HTMLElement {
}
});
this.componentReady();
// this.componentReady();
// Update the component to use the new attributes
this.updateAttribute('login-url');
this.updateAttribute('logout-url');
this.updateAttribute('open-right');
this.updateAttribute('background-color');
}
......@@ -123,35 +124,32 @@ class MyUWProfile extends HTMLElement {
this.shadowRoot.getElementById('myuw-profile-logout').setAttribute('href', this['logout-url']);
break;
case 'open-right':
if(this['open-right']){
this.$nav.classList.add('open-right');
}
break;
case 'background-color':
this.$circle.style.backgroundColor = this['background-color'];
break;
}
}
/*
Function to run after the session endpoint
has been hit and the component has all the
data that it needs to render.
If user data was returned from the endpoint,
the profile bubble will show.
If not, the login button will show.
/**
* Runs after component detects the 'myuw-login' event and receives
* the required parameter
* @param {*} person
*/
componentReady(user) {
if (user) {
// Add user's name to first menu item
this.$displayName.innerHTML = user.firstName;
// Change the letter in the profile circle
this.$circle.innerHTML = user.firstName.substring(0,1);
// Show the profile bubble
this.showProfileBubble();
componentReady(person) {
if (person) {
if (person.firstName) {
// Add user's name to first menu item
this.$displayName.classList.remove('hidden');
this.$displayName.innerHTML = person.firstName;
// Change the letter in the profile circle
this.$circle.innerHTML = person.firstName.substring(0,1);
// Show the profile bubble
this.showProfileBubble();
} else {
this.$displayName.classList.add('hidden');
this.$circle.innerHTML = '<i class="material-icons">person</i>';
this.showProfileBubble();
}
} else {
this.showLoginButton();
}
......