Skip to content

Commit d528c5e

Browse files
author
Sharon
committed
fixed error in empty profile
1 parent 44415f0 commit d528c5e

3 files changed

Lines changed: 39 additions & 20 deletions

File tree

‎examples/header/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,5 +32,18 @@ <h2 id="header"><a href="#header">Header</a></h2>
3232
<pre id="viewSource-header"></pre><script>showSource('header')</script>
3333
<div id="div-header"></div>
3434

35+
<h2 id="headerNotLoggedIn"><a href="#headerNotLoggedIn">Header</a></h2>
36+
<div id='PageHeader2'></div>
37+
<script id="script-headerNotLoggedIn">
38+
window.addEventListener('DOMContentLoaded', async () => {
39+
try {
40+
await UI.initHeader(UI.store)
41+
} catch (error) {
42+
window.alert(`Error loading header. You need to have a div with id = PageHeader on your page.`)
43+
}
44+
});
45+
</script>
46+
<pre id="viewSource-headerNotLoggedIn"></pre><script>showSource('headerNotLoggedIn')</script>
47+
<div id="div-headerNotLoggedIn"></div>
3548
</body>
3649
</html>

‎src/header/empty-profile.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@ export const emptyProfile = `
77
<g mask="url(#mask0)">
88
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0468 10.4586C17.0468 14.4979 15.4281 16.9214 12.9999 16.9214C10.5718 16.9214 8.95298 14.4979 8.95298 10.4586C8.95298 6.41931 12.9999 6.41931 12.9999 6.41931C12.9999 6.41931 17.0468 6.41931 17.0468 10.4586ZM4.09668 23.3842C6.52483 17.7293 12.9999 17.7293 12.9999 17.7293C12.9999 17.7293 19.475 17.7293 21.9031 23.3842C21.9031 23.3842 17.8481 25 12.9999 25C8.15169 25 4.09668 23.3842 4.09668 23.3842Z" fill="#8B8B8B"/>
99
</g>
10-
</svg>`
10+
</svg>`

‎src/header/index.ts‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -42,33 +42,42 @@ export interface SolidSession {
4242
webId: string;
4343
}
4444

45-
export async function initHeader (store: IndexedFormula) {
45+
type Menu = {
46+
label: string,
47+
url: string
48+
}
49+
type HeaderOptions = {
50+
logo?: string,
51+
menuList?: Menu[]
52+
}
53+
export async function initHeader (store: IndexedFormula, options: HeaderOptions) {
4654
const header = document.getElementById('PageHeader')
4755
if (!header) {
4856
return
4957
}
5058

5159
const pod = getPod()
52-
solidAuthClient.trackSession(rebuildHeader(header, store, pod))
60+
solidAuthClient.trackSession(rebuildHeader(header, store, pod, options))
5361
}
5462

55-
function rebuildHeader (header: HTMLElement, store: IndexedFormula, pod: NamedNode) {
63+
function rebuildHeader (header: HTMLElement, store: IndexedFormula, pod: NamedNode, options: HeaderOptions) {
5664
return async (session: SolidSession | null) => {
5765
const user = session ? sym(session.webId) : null
58-
log(user)
66+
// SAM - don't forget to put in the line above instead of the line below :)
67+
// const user = sym('https://sharonstrats.inrupt.net/profile/card#me')
5968
header.innerHTML = ''
60-
header.appendChild(await createBanner(store, pod, user))
69+
header.appendChild(await createBanner(store, pod, user, options))
6170
}
6271
}
6372

64-
async function createBanner (store: IndexedFormula, pod: NamedNode, user: NamedNode | null): Promise<HTMLElement> {
73+
async function createBanner (store: IndexedFormula, pod: NamedNode, user: NamedNode | null, options: HeaderOptions): Promise<HTMLElement> {
6574
const podLink = document.createElement('a')
6675
podLink.href = pod.uri
6776
podLink.classList.add('header-banner__link')
6877
podLink.innerHTML = icon
6978

7079
const menu = user
71-
? await createUserMenu(store, user)
80+
? await createUserMenu(store, user, options)
7281
: createLoginSignUpButtons()
7382

7483
const banner = document.createElement('div')
@@ -102,7 +111,7 @@ function createUserMenuLink (label: string, href: string): HTMLElement {
102111
return link
103112
}
104113

105-
async function createUserMenu (store: IndexedFormula, user: NamedNode): Promise<HTMLElement> {
114+
async function createUserMenu (store: IndexedFormula, user: NamedNode, options: HeaderOptions): Promise<HTMLElement> {
106115
const fetcher = (<any>store).fetcher
107116
if (fetcher) {
108117
// Making sure that Profile is loaded before building menu
@@ -155,20 +164,17 @@ function createUserMenuItem (child: HTMLElement): HTMLElement {
155164
return menuProfileItem
156165
}
157166

158-
async function getMenuItems (outliner: any): Promise<Array<{
159-
paneName: string;
160-
tabName?: string;
161-
label: string;
162-
icon: string;
163-
}>> {
164-
return outliner.getDashboardItems()
165-
}
166-
167167
function getProfileImg (store: IndexedFormula, user: NamedNode): string | HTMLElement {
168-
const profileUrl = widgets.findImage(user)
169-
if (!profileUrl) {
168+
const profileUrl = null
169+
try {
170+
const profileUrl = widgets.findImage(user)
171+
if (!profileUrl) {
172+
return emptyProfile
173+
}
174+
} catch {
170175
return emptyProfile
171176
}
177+
172178
const profileImage = document.createElement('div')
173179
profileImage.classList.add('header-user-menu__photo')
174180
profileImage.style.backgroundImage = `url("${profileUrl}")`

0 commit comments

Comments
 (0)