...
 
Commits (2)
...@@ -29,7 +29,7 @@ class SIBAuth extends HTMLElement { ...@@ -29,7 +29,7 @@ class SIBAuth extends HTMLElement {
this.install(); this.install();
this.processState(); this.processState();
if (this.getUser()) { if (this.getUser()) {
this.dispatchUserInfo(this.getUser()); this.dispatchUserInfo();
} }
} }
...@@ -52,6 +52,28 @@ class SIBAuth extends HTMLElement { ...@@ -52,6 +52,28 @@ class SIBAuth extends HTMLElement {
SIBBase.prototype.login = () => this.login(); SIBBase.prototype.login = () => this.login();
SIBBase.prototype.logout = () => this.logout(); SIBBase.prototype.logout = () => this.logout();
SIBBase.prototype.getUser = () => this.getUser(); SIBBase.prototype.getUser = () => this.getUser();
this.bindUserObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'attributes') {
if (!mutation.target.hasAttribute('bind-user')) return;
this.applyUser(mutation.target);
return;
}
mutation.addedNodes.forEach((node) => {
if (!(node instanceof Element)) return;
if (!node.hasAttribute('bind-user')) return;
this.applyUser(node);
});
});
});
this.bindUserObserver.observe(document.body, {
childList: true,
attributes: true,
characterData: false,
subtree: true,
attributeOldValue: false,
attributeFilter: ['bind-user'],
});
} }
/** @function /** @function
...@@ -63,6 +85,7 @@ class SIBAuth extends HTMLElement { ...@@ -63,6 +85,7 @@ class SIBAuth extends HTMLElement {
SIBBase.prototype.login = null; SIBBase.prototype.login = null;
SIBBase.prototype.logout = null; SIBBase.prototype.logout = null;
SIBBase.prototype.getUser = null; SIBBase.prototype.getUser = null;
this.bindUserObserver.disconnect();
} }
/** @function /** @function
...@@ -176,17 +199,13 @@ class SIBAuth extends HTMLElement { ...@@ -176,17 +199,13 @@ class SIBAuth extends HTMLElement {
/** @function /** @function
* @name dispatchUserInfo * @name dispatchUserInfo
* @param {User} user - User
* Try to replace data-src by user iri on [bind-user] elements * Try to replace data-src by user iri on [bind-user] elements
*/ */
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
async dispatchUserInfo(user) { async dispatchUserInfo() {
const processDOM = async () => { const processDOM = async () => {
const id = user.profile.website; const elements = document.querySelectorAll('[bind-user]');
const elements = document.querySelectorAll(`[bind-user]:not([data-src="${id}"])`); elements.forEach(element => this.applyUser(element));
elements.forEach((element) => {
element.setAttribute('data-src', id);
});
}; };
// check document state and add a hook on DOMContentLoaded if needed // check document state and add a hook on DOMContentLoaded if needed
if (document.readyState === 'loading') { if (document.readyState === 'loading') {
...@@ -196,6 +215,18 @@ class SIBAuth extends HTMLElement { ...@@ -196,6 +215,18 @@ class SIBAuth extends HTMLElement {
} }
} }
/** @function
* @name applyUser
* @param {Element} element
*/
applyUser(element) {
const user = this.getUser();
if (user == null) return;
const id = user.profile.website;
if (element.getAttribute(id === 'data-src')) return;
element.setAttribute('data-src', id);
}
/** @function /** @function
* @name getUser * @name getUser
* Return User or undefined * Return User or undefined
...@@ -224,7 +255,7 @@ class SIBAuth extends HTMLElement { ...@@ -224,7 +255,7 @@ class SIBAuth extends HTMLElement {
setUser(user) { setUser(user) {
localStorage.setItem('oidc_user', JSON.stringify(user)); localStorage.setItem('oidc_user', JSON.stringify(user));
this.user = user; this.user = user;
this.dispatchUserInfo(user); this.dispatchUserInfo();
} }
/** @function /** @function
......