@gip-recia/eyebrow-user-info-lit
Version:
Web component to display into eyebrow menu a user information menu with profile picture and more.
58 lines (54 loc) • 2.44 kB
HTML
<html lang="fr"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><title>eyebrow-user-info</title><style>#app > header {
display: block;
width: 100%;
height: 48px;
position: fixed;
background-color: #25b2f3;
}
#app > header > * {
float: right;
margin-right: 25px;
}
#app > div {
padding-top: 150px;
height: 200vh;
width: 100%;
display: block;
}</style><script defer="defer" src="js/eyebrow-user-info.js"></script></head><body><noscript><strong>We're sorry but eyebrow-user-info doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"><header><shadow-1></shadow-1></header><div class="content">a content for test ! <button>DOM</button></div></div><script type="module">window.addEventListener('eyebrow-user-info', (e) => {
console.log('eyebrow-user-info', e.detail);
});
customElements.define('shadow-1', class extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<shadow-2></shadow-2>`;
}
});
customElements.define('shadow-2', class extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<div style="display: inline-flex;">
<button>ShadowDOM</button>
<div>
<eyebrow-user-info
messages='[{"locales": ["fr"], "messages": { "message": {"eyebrow": { "logout": "Sign out !" } }}}]'
:menu-is-dark="false"
portal-base-url="domaine.local"
display-name="John Doe"
picture="https://lycees.netocentre.fr/images/icones/noPictureUser.svg"
avatar-size="48px"
config='{
"starter": false
}'
notification="4"
force-new-ui
/>
</div>
</div>`;
}
});</script></body></html>