solid-panes
Version:
Solid-compatible Panes: applets and views for the mashlib and databrowser
203 lines (200 loc) • 7.51 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.HELP_MENU_LIST = void 0;
exports.createHeader = createHeader;
exports.refreshHeader = refreshHeader;
var _solidLogic = require("solid-logic");
var _solidUi = require("solid-ui");
require("solid-ui/components/header");
var _help = _interopRequireDefault(require("../icons/help.svg?raw"));
var _person = _interopRequireDefault(require("../icons/person.svg?raw"));
var _signOut = _interopRequireDefault(require("../icons/signOut.svg?raw"));
var _personInCircle = _interopRequireDefault(require("../icons/personInCircle.svg?raw"));
var _downArrow = _interopRequireDefault(require("../icons/downArrow.svg?raw"));
var _signup = _interopRequireDefault(require("../icons/signup.png"));
var _iconHelper = require("../icons/iconHelper");
var _menu = require("./menu");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* menu icons
*/
const HELP_MENU_ICON = (0, _iconHelper.createUiIcon)(_help.default, 'Help Icon', '#ffffff');
const LOGIN_ICON = (0, _iconHelper.createUiIcon)(_person.default, 'LogIn Icon', '#ffffff');
const SIGNUP_ICON = _signup.default;
const LOGOUT_ICON = (0, _iconHelper.createUiIcon)(_signOut.default, 'LogOut Icon', '#000000');
const DEFAULT_AVATAR_ICON = (0, _iconHelper.createUiIcon)(_personInCircle.default, 'Default Avatar Icon', '#6A7282');
const DOWN_ARROW_ICON = (0, _iconHelper.createUiIcon)(_downArrow.default, 'Down Arrow Icon', '#ffffff');
const SOLID_ICON_URL = 'https://solidproject.org/assets/img/solid-emblem.svg';
/**
* menu elements
*/
const SIGN_IN_MENU_ITEM = 'Log In';
const SIGN_OUT_MENU_ITEM = 'Log Out';
const SIGN_UP_MENU_ITEM = 'Sign Up';
const SIGN_UP__MENU_LINK = 'https://solidproject.org/get_a_pod';
// data structure extracted for solid-ui-header binding
const HELP_MENU_LIST = exports.HELP_MENU_LIST = [{
label: 'User guide',
url: 'https://solidos.github.io/userguide/',
target: '_blank'
}, {
label: 'Report a problem',
url: 'https://github.com/solidos/solidos/issues',
target: '_blank'
}];
const HEADER_MOBILE_STYLE_ID = 'solid-ui-header-mobile-style';
function ensureMobileHeaderStyles() {
if (document.getElementById(HEADER_MOBILE_STYLE_ID)) return;
const style = document.createElement('style');
style.id = HEADER_MOBILE_STYLE_ID;
style.textContent = `
solid-ui-header[layout="mobile"]::part(logo) {
display: none !important;
}
`;
document.head.appendChild(style);
}
async function createHeader(store, outliner) {
ensureMobileHeaderStyles();
const header = document.querySelector('solid-ui-header') || document.createElement('solid-ui-header');
const isNewHeader = !header.isConnected;
if (!header.id) {
header.id = 'mainSolidUiHeader';
}
header.__solidPanesOutliner = outliner;
// ensure it is in DOM (before MainContent for consistency)
const main = document.getElementById('MainContent');
if (!header.isConnected) {
if (main && main.parentNode) {
main.parentNode.insertBefore(header, main);
} else {
document.body.prepend(header);
}
}
await refreshHeader(outliner, header);
if (isNewHeader) {
header.__solidPanesListenersAttached = false;
}
attachHeaderListeners(header);
return header;
}
function attachHeaderListeners(header) {
if (header.__solidPanesListenersAttached) return;
const refreshCurrentHeader = async () => {
const outliner = header.__solidPanesOutliner;
if (!outliner) return;
await refreshHeader(outliner, header);
};
_solidLogic.authSession.events.on('login', refreshCurrentHeader);
_solidLogic.authSession.events.on('logout', refreshCurrentHeader);
_solidLogic.authSession.events.on('sessionRestore', refreshCurrentHeader);
header.addEventListener('auth-action-select', async e => {
const outliner = header.__solidPanesOutliner;
if (!outliner) return;
const detail = e.detail;
if (detail?.role === 'login') {
await refreshCurrentHeader();
// Do not auto-open the profile pane after login.
// outliner.showDashboard({ pane: 'profile' })
}
});
header.addEventListener('signup-success', async () => {
// do nothing
});
header.addEventListener('account-menu-select', async e => {
const outliner = header.__solidPanesOutliner;
if (!outliner) return;
const detail = e.detail;
if (detail?.action === 'logout') {
await refreshCurrentHeader();
// Do not navigate to the profile after logout.
} else if (detail?.action === 'show-profile') {
// TODO see if this can be consolidated
const currentUser = _solidLogic.authn.currentUser();
if (currentUser) {
outliner.showDashboard(currentUser, {
pane: 'profile'
});
(0, _menu.setActiveMenuPane)('profile');
}
}
});
header.__solidPanesListenersAttached = true;
}
async function refreshHeader(outliner, headerElement) {
ensureMobileHeaderStyles();
const headerOptions = setHeaderOptions(outliner);
const header = headerElement || document.querySelector('solid-ui-header');
if (!header) return null;
header.theme = headerOptions.theme;
header.layout = headerOptions.layout;
header.brandLink = headerOptions.brandLink;
header.logo = headerOptions.layout === 'desktop' ? headerOptions.logo : '';
header.helpIcon = headerOptions.helpIcon;
header.helpMenuList = headerOptions.helpMenuList;
header.authState = headerOptions.authState;
header.loginAction = headerOptions.loginAction;
header.signUpAction = headerOptions.signUpAction;
header.accountMenu = await setUserMenu();
header.logoutLabel = headerOptions.logoutLabel;
header.accountIcon = headerOptions.accountIcon;
header.accountAvatar = headerOptions.accountAvatar;
header.accountAvatarFallback = headerOptions.accountAvatarFallback;
header.loginIcon = headerOptions.loginIcon;
header.signUpIcon = headerOptions.signUpIcon;
header.logoutIcon = headerOptions.logoutIcon;
return header;
}
function setHeaderOptions(outliner) {
const currentUser = _solidLogic.authn.currentUser();
const isAuthenticated = !!currentUser;
const authState = isAuthenticated ? 'logged-in' : 'logged-out';
const layout = outliner.context?.environment?.layout === 'mobile' ? 'mobile' : 'desktop';
const theme = outliner.context?.environment?.theme === 'dark' ? 'dark' : 'light';
const headerOptions = {
logo: SOLID_ICON_URL,
helpIcon: HELP_MENU_ICON,
helpMenuList: HELP_MENU_LIST,
layout,
theme,
brandLink: '/',
authState,
loginAction: {
label: SIGN_IN_MENU_ITEM
},
signUpAction: {
label: SIGN_UP_MENU_ITEM,
url: SIGN_UP__MENU_LINK
},
logoutLabel: SIGN_OUT_MENU_ITEM,
accountIcon: isAuthenticated ? DOWN_ARROW_ICON : '',
accountAvatar: isAuthenticated ? _solidUi.widgets.findImage(currentUser) : undefined,
accountAvatarFallback: DEFAULT_AVATAR_ICON,
loginIcon: LOGIN_ICON,
signUpIcon: SIGNUP_ICON,
logoutIcon: LOGOUT_ICON
};
return headerOptions;
}
async function setUserMenu() {
const me = _solidLogic.authn.currentUser();
if (!me) {
return [];
}
try {
await _solidLogic.store.fetcher.load(me.doc());
} catch (err) {
console.error('Unable to load user profile', err);
}
const accountMenu = [{
label: _solidUi.utils.label(me),
avatar: _solidUi.widgets.findImage(me),
webid: me.value,
action: 'show-profile'
}
// TODO add all my available accounts
];
return accountMenu;
}