From fd5eb72dca522742a1140abfadb75e2934be4b1b Mon Sep 17 00:00:00 2001
From: David M Sibley <sibley@wisc.edu>
Date: Fri, 22 Jun 2018 14:22:34 -0500
Subject: [PATCH] grab template when script loads
---
myuw-profile.html | 27 +++++++++++----------------
1 file changed, 11 insertions(+), 16 deletions(-)
diff --git a/myuw-profile.html b/myuw-profile.html
index 2201a5f..d62b99a 100644
--- a/myuw-profile.html
+++ b/myuw-profile.html
@@ -125,9 +125,9 @@
::slotted(a:hover),
::slotted(p:hover) {
background-color: rgba(158,158,158,0.2);
- }
+ }
</style>
-
+
<a href="#" id="myuw-profile-login" class="hidden">Login</a>
<div id="myuw-profile-wrapper" class="hidden">
@@ -149,19 +149,13 @@ class MyUWProfile extends HTMLElement {
constructor() {
super();
- // Get the script document
- MyUWProfile.document = (document._currentScript || document.currentScript).ownerDocument;
-
this['open-right'] = false;
// Create a shadowroot for this element
this.attachShadow({mode: 'open'});
- // Get the template and extract the HTML content
- const template = MyUWProfile.document.getElementById('myuw-profile-template');
-
// Append the custom HTML to the shadowroot
- this.shadowRoot.appendChild(template.content.cloneNode(true));
+ this.shadowRoot.appendChild(MyUWProfile.template.content.cloneNode(true));
}
static get observedAttributes() {return ['login-url', 'logout-url', 'open-right']; }
@@ -180,7 +174,7 @@ class MyUWProfile extends HTMLElement {
this['logout-url'] = this.getAttribute('logout-url');
this['session-endpoint'] = this.getAttribute('session-endpoint');
this['user'] = false;
-
+
if(this.getAttribute('open-right') !== null){
this['open-right'] = true;
}
@@ -210,7 +204,7 @@ class MyUWProfile extends HTMLElement {
// Show login button if we couldn't get session info
this.componentReady();
} );
-
+
} else {
throw Error('No session endpoint has been defiend. Please set the "session-endpoint" attribute URL into the myuw-profile element!');
}
@@ -230,7 +224,7 @@ class MyUWProfile extends HTMLElement {
/*
Add an on click event to the profile nav menu.
- We need to do this in order to stop the propagation
+ We need to do this in order to stop the propagation
of click events on the menu specifically.
If a user clicks on the nav menu, the window on click
@@ -243,7 +237,7 @@ class MyUWProfile extends HTMLElement {
/*
Add an on click event to profile bubble
- We need to make sure that we stop propagation on
+ We need to make sure that we stop propagation on
this event or else the window on click will always fire
and the menu will never open.
*/
@@ -280,10 +274,10 @@ class MyUWProfile extends HTMLElement {
/*
Function to run after the session endpoint
- has been hit and the component has all the
+ has been hit and the component has all the
data that it needs to render.
- If user data was returned from the endpoint,
+ If user data was returned from the endpoint,
the profile bubble will show.
If not, the login button will show.
@@ -345,5 +339,6 @@ class MyUWProfile extends HTMLElement {
}
}
+MyUWProfile.template = (document._currentScript || document.currentScript).ownerDocument.getElementById('myuw-profile-template');
window.customElements.define('myuw-profile', MyUWProfile);
-</script>
\ No newline at end of file
+</script>
--
GitLab