Skip to content

Commit 72af8e7

Browse files
author
Sharon
committed
added example
1 parent 4429da0 commit 72af8e7

2 files changed

Lines changed: 45 additions & 7 deletions

File tree

‎examples/header/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en">
3+
<head>
4+
<meta charset='UTF-8'>
5+
<title>solid-ui UI.widgets.header examples page</title>
6+
<script type="text/javascript" src="../../lib/webpack-bundle.js"></script>
7+
<script>
8+
const $ = document.querySelector.bind(document)
9+
function showSource(widgetName) {
10+
$(`#viewSource-${widgetName}`).innerHTML = $(`#script-${widgetName}`).innerText
11+
.replace(/&/g, "&amp;")
12+
.replace(/</g, "&lt;")
13+
.replace(/>/g, "&gt;")
14+
.replace(/"/g, "&quot;")
15+
.replace(/'/g, "&#039;")
16+
}
17+
</script>
18+
</head>
19+
<body>
20+
21+
<h2 id="header"><a href="#header">Header</a></h2>
22+
<div id='PageHeader'></div>
23+
<script id="script-header">
24+
window.addEventListener('DOMContentLoaded', async () => {
25+
try {
26+
await UI.initHeader(UI.store)
27+
} catch (error) {
28+
window.alert(`Error loading header. You need to have a div with id = PageHeader on your page.`)
29+
}
30+
});
31+
</script>
32+
<pre id="viewSource-header"></pre><script>showSource('header')</script>
33+
<div id="div-header"></div>
34+
35+
</body>
36+
</html>

‎src/header/index.ts‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { widgets } from '../widgets'
88
import { icon } from './icon'
99
import { emptyProfile } from './empty-profile'
1010
import { throttle, getPod } from './headerHelpers'
11-
import { getOutliner } from 'solid-panes'
11+
import { log } from '../debug'
1212

1313
// SolidAuthorization, SolidClam, and SolidSession was copied from mashlib/typings/solid-auth-client
1414
// access_token, client_id, id_token, at_hash had to be converted to camelcase for typescript compatibility
@@ -54,7 +54,9 @@ export async function initHeader (store: IndexedFormula) {
5454

5555
function rebuildHeader (header: HTMLElement, store: IndexedFormula, pod: NamedNode) {
5656
return async (session: SolidSession | null) => {
57-
const user = session ? sym(session.webId) : null
57+
// const user = session ? sym(session.webId) : null
58+
const user = sym('https://sharonstrats.inrupt.net/profile/card#me')
59+
log(user)
5860
header.innerHTML = ''
5961
header.appendChild(await createBanner(store, pod, user))
6062
}
@@ -113,15 +115,15 @@ async function createUserMenu (store: IndexedFormula, user: NamedNode): Promise<
113115
// Making sure that Profile is loaded before building menu
114116
await fetcher.load(user)
115117
}
116-
const outliner = getOutliner(document)
118+
// const outliner = getOutliner(document)
117119

118120
const loggedInMenuList = document.createElement('ul')
119121
loggedInMenuList.classList.add('header-user-menu__list')
120122
loggedInMenuList.appendChild(createUserMenuItem(createUserMenuLink('Show your profile', user.uri)))
121-
const menuItems = await getMenuItems(outliner)
123+
/* const menuItems = await getMenuItems(outliner)
122124
menuItems.forEach(item => {
123125
loggedInMenuList.appendChild(createUserMenuItem(createUserMenuButton(item.label, () => openDashboardPane(outliner, item.tabName || item.paneName))))
124-
})
126+
}) */
125127
loggedInMenuList.appendChild(createUserMenuItem(createUserMenuButton('Log out', () => solidAuthClient.logout())))
126128

127129
const loggedInMenu = document.createElement('nav')
@@ -132,12 +134,12 @@ async function createUserMenu (store: IndexedFormula, user: NamedNode): Promise<
132134
const loggedInMenuTrigger = document.createElement('button')
133135
loggedInMenuTrigger.classList.add('header-user-menu__trigger')
134136
loggedInMenuTrigger.type = 'button'
135-
const profileImg = getProfileImg(store, user)
137+
/* const profileImg = getProfileImg(store, user)
136138
if (typeof profileImg === 'string') {
137139
loggedInMenuTrigger.innerHTML = profileImg
138140
} else {
139141
loggedInMenuTrigger.appendChild(profileImg)
140-
}
142+
} */
141143

142144
const loggedInMenuContainer = document.createElement('div')
143145
loggedInMenuContainer.classList.add('header-banner__user-menu', 'header-user-menu')

0 commit comments

Comments
 (0)