[GitHub/WoltLab/WCF.git] / com.woltlab.wcf / templates / pageHeaderUser.tpl

<nav id="topMenu" class="userPanel{if $__wcf->user->userID} userPanelLoggedIn{/if}">
	{if $__wcf->user->userID}
		<span class="userPanelAvatar" aria-hidden="true">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32, false)}</span>
	{else}
		<a
			href="{link controller='Login' url=$__wcf->getRequestURI()}{/link}"
			class="userPanelLoginLink jsTooltip"
			title="{lang}wcf.user.loginOrRegister{/lang}"
			rel="nofollow"
		>
			<span class="icon icon32 fa-sign-in" aria-hidden="true"></span>
		</a>
	{/if}
	
	<ul class="userPanelItems">
		{if $__wcf->user->userID}
			<!-- user menu -->
			<li id="userMenu">
				<a
					class="jsTooltip"
					href="{$__wcf->user->getLink()}"
					title="{lang}wcf.user.controlPanel{/lang}"
					role="button"
					tabindex="0"
					aria-haspopup="true"
					aria-expanded="false"
				>
					{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32, false)} <span>{lang}wcf.user.userNote{/lang}</span>
				</a>
				<div class="userMenu userMenuControlPanel" data-origin="userMenu" tabindex="-1" hidden>
					<div class="userMenuHeader">
						<div class="userMenuTitle">{lang}wcf.user.controlPanel{/lang}</div>
					</div>
					<div class="userMenuContent">
						<div class="userMenuItem{if !MODULE_USER_RANK} userMenuItemSingleLine userMenuItemUserHeader{/if}">
							<div class="userMenuItemImage">
								{@$__wcf->getUserProfileHandler()->getUserProfile()->getAvatar()->getImageTag(48)}
							</div>
							<div class="userMenuItemContent">
								{* This is the unformatted username, custom styles might not work nicely here and
								   the consistent styling is used to provide visual anchors to identify links. *}
								<a href="{$__wcf->user->getLink()}" class="userMenuItemLink">{$__wcf->user->username}</a>
							</div>
							{if MODULE_USER_RANK}
							<div class="userMenuItemMeta">
								{if $__wcf->getUserProfileHandler()->getUserTitle()}
									<span class="badge userTitleBadge{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->cssClassName} {@$__wcf->getUserProfileHandler()->getRank()->cssClassName}{/if}">{$__wcf->getUserProfileHandler()->getUserTitle()}</span>
								{/if}
								{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->rankImage}
									<span class="userRankImage">{@$__wcf->getUserProfileHandler()->getRank()->getImage()}</span>
								{/if}
							</div>
							{/if}
						</div>
					</div>
					{hascontent}
						<div class="userMenuContentDivider"></div>
						<div class="userMenuContent">
							{content}
								{if $__wcf->getUserProfileHandler()->canEditOwnProfile()}
									<div class="userMenuItem userMenuItemNarrow userMenuItemSingleLine">
										<div class="userMenuItemImage">
											<span class="icon icon32 fa-pencil"></span>
										</div>
										<div class="userMenuItemContent">
											<a href="{link controller='User' object=$__wcf->user editOnInit=true}{/link}" class="userMenuItemLink">{lang}wcf.user.editProfile{/lang}</a>
										</div>
									</div>
								{/if}
								{if $__wcf->session->getPermission('admin.general.canUseAcp')}
									<div class="userMenuItem userMenuItemNarrow userMenuItemSingleLine">
										<div class="userMenuItemImage">
											<span class="icon icon32 fa-wrench"></span>
										</div>
										<div class="userMenuItemContent">
											<a href="{link isACP=true}{/link}" class="userMenuItemLink">{lang}wcf.global.acp{/lang}</a>
										</div>
									</div>
								{/if}
							{/content}
						</div>
					{/hascontent}
					<div class="userMenuContentDivider"></div>
					<div class="userMenuContent userMenuContentScrollable">
						{foreach from=$__wcf->getUserMenu()->getUserMenuItems() item=menuItem}
						<div class="userMenuItem userMenuItemNarrow userMenuItemSingleLine" data-category="{$menuItem[category]->menuItem}">
							<div class="userMenuItemImage">
								<span class="icon icon32 {$menuItem[category]->getIconClassName()}"></span>
							</div>
							<div class="userMenuItemContent">
								<a href="{$menuItem[link]}" class="userMenuItemLink">
									{$menuItem[category]->getTitle()}
								</a>
							</div>
						</div>
						{/foreach}
					</div>
					<div class="userMenuFooter">
						<form method="post" action="{link controller='Logout'}{/link}">
							<a href="#" class="userMenuFooterLink" role="button">{lang}wcf.user.logout{/lang}</a>
							{csrfToken}
						</form>
					</div>
				</div>
				<script data-relocate="true">
					require(["WoltLabSuite/Core/Ui/User/Menu/ControlPanel"], ({ setup }) => setup());
				</script>
			</li>
			
			<!-- user notifications -->
			{if !$__hideUserMenu|isset}
				<li id="userNotifications" data-count="{#$__wcf->getUserNotificationHandler()->getNotificationCount()}">
					<a
						class="jsTooltip"
						href="{link controller='NotificationList'}{/link}"
						title="{lang}wcf.user.notification.notifications{/lang}"
						role="button"
						tabindex="0"
						aria-haspopup="true"
						aria-expanded="false"
					>
						<span class="icon icon32 fa-bell-o"></span> <span>{lang}wcf.user.notification.notifications{/lang}</span>{if $__wcf->getUserNotificationHandler()->getNotificationCount()} <span class="badge badgeUpdate">{#$__wcf->getUserNotificationHandler()->getNotificationCount()}</span>{/if}
					</a>
					{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
						<script data-relocate="true">
							require(["WoltLabSuite/Core/Language", "WoltLabSuite/Core/Ui/User/Menu/Data/Notification"], (Language, { setup }) => {
								Language.addObject({
									"wcf.user.notification.enableDesktopNotifications": "{jslang}wcf.user.notification.enableDesktopNotifications{/jslang}",
									"wcf.user.notification.enableDesktopNotifications.button": "{jslang}wcf.user.notification.enableDesktopNotifications.button{/jslang}",
								});

								setup({
									noItems: '{jslang}wcf.user.notification.noMoreNotifications{/jslang}',
									settingsLink: '{link controller='NotificationSettings' encode=false}{/link}',
									settingsTitle: '{jslang}wcf.user.notification.settings{/jslang}',
									showAllLink: '{link controller='NotificationList' encode=false}{/link}',
									showAllTitle: '{jslang}wcf.user.notification.showAll{/jslang}',
									title: '{jslang}wcf.user.notification.notifications{/jslang}',
								});
							});
						</script>
					{/if}
				</li>
			{/if}
		{else}
			{if $__wcf->getLanguage()->getLanguages()|count > 1}
				<li id="pageLanguageContainer">
					<script data-relocate="true">
						require(['WoltLabSuite/Core/Language/Chooser'], function(LanguageChooser) {
							var languages = {
								{implode from=$__wcf->getLanguage()->getLanguages() item=_language}
									'{@$_language->languageID}': {
										iconPath: '{@$_language->getIconPath()|encodeJS}',
										languageName: '{@$_language|encodeJS}',
										languageCode: '{@$_language->languageCode|encodeJS}'
									}
								{/implode}
							};
								
							var callback = function(listItem) {
								var location;
								var languageCode = elData(listItem, 'language-code');
								var link = elBySel('link[hreflang="' + languageCode + '"]');
								if (link !== null) {
									location = link.href;
								}
								else {
									location = window.location.toString().replace(/#.*/, '').replace(/(\?|&)l=[0-9]+/g, '');
								}
								
								var delimiter = (location.indexOf('?') == -1) ? '?' : '&';
								window.location = location + delimiter + 'l=' + elData(listItem, 'language-id') + window.location.hash;
							};
							
							LanguageChooser.init('pageLanguageContainer', 'pageLanguageID', {@$__wcf->getLanguage()->languageID}, languages, callback);
						});
					</script>
				</li>
			{/if}
			<li id="userLogin">
				<a class="loginLink" href="{link controller='Login' url=$__wcf->getRequestURI()}{/link}">{lang}wcf.user.loginOrRegister{/lang}</a>
			</a>
		{/if}
		
		{if !$__hideUserMenu|isset}
			{if $__wcf->user->userID && $__wcf->session->getPermission('mod.general.canUseModeration')}
				<li id="outstandingModeration" data-count="{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}">
					<a
						class="jsTooltip"
						href="{link controller='ModerationList'}{/link}"
						title="{lang}wcf.moderation.moderation{/lang}"
						role="button"
						tabindex="0"
						aria-haspopup="true"
						aria-expanded="false"
					>
						<span class="icon icon32 fa-exclamation-triangle"></span>
						<span>{lang}wcf.moderation.moderation{/lang}</span>
						{if $__wcf->getModerationQueueManager()->getUnreadModerationCount()}<span class="badge badgeUpdate">{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}</span>{/if}
					</a>
					{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
						<script data-relocate="true">
							require(["WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue"], ({ setup }) => {
								setup({
									deletedContent: '{jslang}wcf.moderation.showDeletedContent{/jslang}',
									deletedContentLink: '{link controller='DeletedContentList' encode=false}{/link}',
									noItems: '{jslang}wcf.moderation.noMoreItems{/jslang}',
									showAllLink: '{link controller='ModerationList' encode=false}{/link}',
									showAllTitle: '{jslang}wcf.moderation.showAll{/jslang}',
									title: '{jslang}wcf.moderation.moderation{/jslang}'
								});
							});
						</script>
					{/if}
				</li>
			{/if}
			
			{event name='menuItems'}
		{/if}
		
		<!-- page search -->
		<li>
			<a href="{link controller='Search'}{/link}" id="userPanelSearchButton" class="jsTooltip" title="{lang}wcf.global.search{/lang}"><span class="icon icon32 fa-search"></span> <span>{lang}wcf.global.search{/lang}</span></a>
		</li>
	</ul>
</nav>
Commit	Line	Data
0a6f84dc MW	1	<nav id="topMenu" class="userPanel{if $__wcf->user->userID} userPanelLoggedIn{/if}">
0a6f84dc MW	2	{if $__wcf->user->userID}
04e04bfb	3	<span class="userPanelAvatar" aria-hidden="true">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32, false)}</span>
6e5b3652	4	{else}
fa0b20e8 TD	5	<a
	6	href="{link controller='Login' url=$__wcf->getRequestURI()}{/link}"
	7	class="userPanelLoginLink jsTooltip"
	8	title="{lang}wcf.user.loginOrRegister{/lang}"
	9	rel="nofollow"
	10	>
690e409d	11	<span class="icon icon32 fa-sign-in" aria-hidden="true"></span>
6e5b3652	12	</a>
0a6f84dc MW	13	{/if}
0a6f84dc MW	14
b8eab696 AE	15	<ul class="userPanelItems">
	16	{if $__wcf->user->userID}
	17	<!-- user menu -->
	18	<li id="userMenu">
677bdb69 AE	19	<a
	20	class="jsTooltip"
	21	href="{$__wcf->user->getLink()}"
	22	title="{lang}wcf.user.controlPanel{/lang}"
	23	role="button"
	24	tabindex="0"
	25	aria-haspopup="true"
	26	aria-expanded="false"
	27	>
04e04bfb	28	{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32, false)} <span>{lang}wcf.user.userNote{/lang}</span>
677bdb69 AE	29	</a>
	30	<div class="userMenu userMenuControlPanel" data-origin="userMenu" tabindex="-1" hidden>
	31	<div class="userMenuHeader">
	32	<div class="userMenuTitle">{lang}wcf.user.controlPanel{/lang}</div>
b8eab696	33	</div>
677bdb69	34	<div class="userMenuContent">
9b76f5bb	35	<div class="userMenuItem{if !MODULE_USER_RANK} userMenuItemSingleLine userMenuItemUserHeader{/if}">
677bdb69 AE	36	<div class="userMenuItemImage">
	37	{@$__wcf->getUserProfileHandler()->getUserProfile()->getAvatar()->getImageTag(48)}
	38	</div>
	39	<div class="userMenuItemContent">
	40	{* This is the unformatted username, custom styles might not work nicely here and
	41	the consistent styling is used to provide visual anchors to identify links. *}
	42	<a href="{$__wcf->user->getLink()}" class="userMenuItemLink">{$__wcf->user->username}</a>
677bdb69	43	</div>
f9ea63e5	44	{if MODULE_USER_RANK}
677bdb69	45	<div class="userMenuItemMeta">
f9ea63e5 AE	46	{if $__wcf->getUserProfileHandler()->getUserTitle()}
	47	<span class="badge userTitleBadge{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->cssClassName} {@$__wcf->getUserProfileHandler()->getRank()->cssClassName}{/if}">{$__wcf->getUserProfileHandler()->getUserTitle()}</span>
	48	{/if}
	49	{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->rankImage}
	50	<span class="userRankImage">{@$__wcf->getUserProfileHandler()->getRank()->getImage()}</span>
	51	{/if}
677bdb69	52	</div>
f9ea63e5	53	{/if}
677bdb69 AE	54	</div>
677bdb69 AE	55	</div>
ec44bfad MW	56	{hascontent}
	57	<div class="userMenuContentDivider"></div>
	58	<div class="userMenuContent">
	59	{content}
	60	{if $__wcf->getUserProfileHandler()->canEditOwnProfile()}
	61	<div class="userMenuItem userMenuItemNarrow userMenuItemSingleLine">
	62	<div class="userMenuItemImage">
	63	<span class="icon icon32 fa-pencil"></span>
	64	</div>
	65	<div class="userMenuItemContent">
	66	<a href="{link controller='User' object=$__wcf->user editOnInit=true}{/link}" class="userMenuItemLink">{lang}wcf.user.editProfile{/lang}</a>
	67	</div>
	68	</div>
	69	{/if}
	70	{if $__wcf->session->getPermission('admin.general.canUseAcp')}
	71	<div class="userMenuItem userMenuItemNarrow userMenuItemSingleLine">
	72	<div class="userMenuItemImage">
	73	<span class="icon icon32 fa-wrench"></span>
	74	</div>
	75	<div class="userMenuItemContent">
	76	<a href="{link isACP=true}{/link}" class="userMenuItemLink">{lang}wcf.global.acp{/lang}</a>
	77	</div>
	78	</div>
	79	{/if}
	80	{/content}
677bdb69	81	</div>
ec44bfad	82	{/hascontent}
677bdb69	83	<div class="userMenuContentDivider"></div>
4996d792	84	<div class="userMenuContent userMenuContentScrollable">
677bdb69	85	{foreach from=$__wcf->getUserMenu()->getUserMenuItems() item=menuItem}
f9ea63e5	86	<div class="userMenuItem userMenuItemNarrow userMenuItemSingleLine" data-category="{$menuItem[category]->menuItem}">
677bdb69 AE	87	<div class="userMenuItemImage">
	88	<span class="icon icon32 {$menuItem[category]->getIconClassName()}"></span>
	89	</div>
	90	<div class="userMenuItemContent">
	91	<a href="{$menuItem[link]}" class="userMenuItemLink">
	92	{$menuItem[category]->getTitle()}
	93	</a>
	94	</div>
677bdb69 AE	95	</div>
	96	{/foreach}
	97	</div>
	98	<div class="userMenuFooter">
372f863c AE	99	<form method="post" action="{link controller='Logout'}{/link}">
	100	<a href="#" class="userMenuFooterLink" role="button">{lang}wcf.user.logout{/lang}</a>
	101	{csrfToken}
	102	</form>
b8eab696	103	</div>
b8eab696	104	</div>
51547f2c	105	<script data-relocate="true">
677bdb69	106	require(["WoltLabSuite/Core/Ui/User/Menu/ControlPanel"], ({ setup }) => setup());
51547f2c	107	</script>
b8eab696 AE	108	</li>
b8eab696 AE	109
b8eab696 AE	110	<!-- user notifications -->
b8eab696 AE	111	{if !$__hideUserMenu\|isset}
18b442af	112	<li id="userNotifications" data-count="{#$__wcf->getUserNotificationHandler()->getNotificationCount()}">
ea0c0ef6 AE	113	<a
	114	class="jsTooltip"
	115	href="{link controller='NotificationList'}{/link}"
	116	title="{lang}wcf.user.notification.notifications{/lang}"
	117	role="button"
	118	tabindex="0"
	119	aria-haspopup="true"
	120	aria-expanded="false"
	121	>
	122	<span class="icon icon32 fa-bell-o"></span> <span>{lang}wcf.user.notification.notifications{/lang}</span>{if $__wcf->getUserNotificationHandler()->getNotificationCount()} <span class="badge badgeUpdate">{#$__wcf->getUserNotificationHandler()->getNotificationCount()}</span>{/if}
	123	</a>
b8eab696 AE	124	{if !OFFLINE \|\| $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
b8eab696 AE	125	<script data-relocate="true">
f99a0caf AE	126	require(["WoltLabSuite/Core/Language", "WoltLabSuite/Core/Ui/User/Menu/Data/Notification"], (Language, { setup }) => {
	127	Language.addObject({
	128	"wcf.user.notification.enableDesktopNotifications": "{jslang}wcf.user.notification.enableDesktopNotifications{/jslang}",
	129	"wcf.user.notification.enableDesktopNotifications.button": "{jslang}wcf.user.notification.enableDesktopNotifications.button{/jslang}",
	130	});
	131
8eaab6e0	132	setup({
9f663473	133	noItems: '{jslang}wcf.user.notification.noMoreNotifications{/jslang}',
b8eab696	134	settingsLink: '{link controller='NotificationSettings' encode=false}{/link}',
8eaab6e0	135	settingsTitle: '{jslang}wcf.user.notification.settings{/jslang}',
b8eab696	136	showAllLink: '{link controller='NotificationList' encode=false}{/link}',
8eaab6e0 AE	137	showAllTitle: '{jslang}wcf.user.notification.showAll{/jslang}',
8eaab6e0 AE	138	title: '{jslang}wcf.user.notification.notifications{/jslang}',
677bdb69	139	});
b8eab696	140	});
b8eab696	141	</script>
320f4a6d	142	{/if}
b8eab696 AE	143	</li>
	144	{/if}
	145	{else}
d4e8bc05 AE	146	{if $__wcf->getLanguage()->getLanguages()\|count > 1}
	147	<li id="pageLanguageContainer">
	148	<script data-relocate="true">
6e5b3652	149	require(['WoltLabSuite/Core/Language/Chooser'], function(LanguageChooser) {
d4e8bc05	150	var languages = {
fb062f13 MS	151	{implode from=$__wcf->getLanguage()->getLanguages() item=_language}
	152	'{@$_language->languageID}': {
	153	iconPath: '{@$_language->getIconPath()\|encodeJS}',
	154	languageName: '{@$_language\|encodeJS}',
	155	languageCode: '{@$_language->languageCode\|encodeJS}'
d4e8bc05 AE	156	}
	157	{/implode}
	158	};
ff110591	159
d4e8bc05	160	var callback = function(listItem) {
ff110591 MW	161	var location;
	162	var languageCode = elData(listItem, 'language-code');
	163	var link = elBySel('link[hreflang="' + languageCode + '"]');
	164	if (link !== null) {
	165	location = link.href;
	166	}
	167	else {
	168	location = window.location.toString().replace(/#.*/, '').replace(/(\?\|&)l=[0-9]+/g, '');
	169	}
d4e8bc05	170
ff110591	171	var delimiter = (location.indexOf('?') == -1) ? '?' : '&';
d4e8bc05 AE	172	window.location = location + delimiter + 'l=' + elData(listItem, 'language-id') + window.location.hash;
	173	};
	174
51ab1086	175	LanguageChooser.init('pageLanguageContainer', 'pageLanguageID', {@$__wcf->getLanguage()->languageID}, languages, callback);
b2e0e0cd	176	});
b8eab696 AE	177	</script>
	178	</li>
	179	{/if}
6e5b3652	180	<li id="userLogin">
931a1eff	181	<a class="loginLink" href="{link controller='Login' url=$__wcf->getRequestURI()}{/link}">{lang}wcf.user.loginOrRegister{/lang}</a>
6e5b3652	182	</a>
b8eab696 AE	183	{/if}
	184
	185	{if !$__hideUserMenu\|isset}
	186	{if $__wcf->user->userID && $__wcf->session->getPermission('mod.general.canUseModeration')}
0882d872	187	<li id="outstandingModeration" data-count="{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}">
ea0c0ef6 AE	188	<a
	189	class="jsTooltip"
	190	href="{link controller='ModerationList'}{/link}"
	191	title="{lang}wcf.moderation.moderation{/lang}"
	192	role="button"
	193	tabindex="0"
	194	aria-haspopup="true"
	195	aria-expanded="false"
	196	>
e2368a74	197	<span class="icon icon32 fa-exclamation-triangle"></span>
b8eab696	198	<span>{lang}wcf.moderation.moderation{/lang}</span>
e2368a74	199	{if $__wcf->getModerationQueueManager()->getUnreadModerationCount()}<span class="badge badgeUpdate">{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}</span>{/if}
b8eab696 AE	200	</a>
	201	{if !OFFLINE \|\| $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
	202	<script data-relocate="true">
cf9e11c3 AE	203	require(["WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue"], ({ setup }) => {
cf9e11c3 AE	204	setup({
9f663473	205	deletedContent: '{jslang}wcf.moderation.showDeletedContent{/jslang}',
b8eab696	206	deletedContentLink: '{link controller='DeletedContentList' encode=false}{/link}',
9f663473	207	noItems: '{jslang}wcf.moderation.noMoreItems{/jslang}',
b8eab696	208	showAllLink: '{link controller='ModerationList' encode=false}{/link}',
cf9e11c3	209	showAllTitle: '{jslang}wcf.moderation.showAll{/jslang}',
9f663473	210	title: '{jslang}wcf.moderation.moderation{/jslang}'
677bdb69	211	});
b8eab696	212	});
b8eab696 AE	213	</script>
	214	{/if}
	215	</li>
51547f2c	216	{/if}
b8eab696 AE	217
	218	{event name='menuItems'}
	219	{/if}
74029e21 AE	220
74029e21 AE	221	<!-- page search -->
e7500593 AE	222	<li>
e7500593 AE	223	<a href="{link controller='Search'}{/link}" id="userPanelSearchButton" class="jsTooltip" title="{lang}wcf.global.search{/lang}"><span class="icon icon32 fa-search"></span> <span>{lang}wcf.global.search{/lang}</span></a>
ee983961	224	</li>
b8eab696	225	</ul>
bf1461c2	226	</nav>