Compare revisions

David Witter · David Witter · David Witter · David Witter · David Witter · David Witter
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
 # myuw-profile versions
+## 1.3.2
+### Fixed 
+* Check for valid references before messing with DOM elements/variables
 ## 1.3.0
 ### Added

--- a/README.md
+++ b/README.md
@@ -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"
+  bubbles: true, // optional
-    person: { // required object "person"
+  detail: { // required always
-      "firstName": "User" // required property "firstName"
+    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
+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:
- 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
+```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>
--- a/index.html
+++ b/index.html
@@ -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);
            } );
          }

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
 {
-  "name": "@myuw-web-components/myuw-profile",
+  "name": "enrollment-profile",
-  "version": "1.2.2",
+  "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"

--- a/rollup.config.js
+++ b/rollup.config.js
 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,

--- a/src/.babelrc
+++ b/src/.babelrc
+{
+  "presets": [
+    ["@babel/env", {
+      "modules": false
+    }]
+  ],
+}
--- a/src/myuw-profile.html
+++ b/src/myuw-profile.html
 <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"

--- a/src/myuw-profile.js
+++ b/src/myuw-profile.js
@@ -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
+    * Runs after component detects the 'myuw-login' event and receives
-        has been hit and the component has all the
+    * the required parameter
-        data that it needs to render.
+    * @param {*} person 
-        If user data was returned from the endpoint,
-        the profile bubble will show.
-        If not, the login button will show.
    */
-    componentReady(user) {
+    componentReady(person) {
-      if (user) {
+      if (person) {
-        // Add user's name to first menu item
+        if (person.firstName) {
-        this.$displayName.innerHTML = user.firstName;
+          // Add user's name to first menu item
-        // Change the letter in the profile circle
+          this.$displayName.classList.remove('hidden');
-        this.$circle.innerHTML = user.firstName.substring(0,1);
+          this.$displayName.innerHTML = person.firstName;
-        // Show the profile bubble
+          // Change the letter in the profile circle
-        this.showProfileBubble();
+          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();
      }
No results found