diff --git a/web/dart/navbar.dart b/web/dart/navbar.dart index 4fd5af4..7993b79 100644 --- a/web/dart/navbar.dart +++ b/web/dart/navbar.dart @@ -1,79 +1,100 @@ import 'dart:html'; import 'dart:svg'; +// You will see here and there some 'tabindex' attributes added to various HTML +// elements, and I’m sure you will ask "Why? They don’t serve any purpose, do +// they?". Well you are wrong. Webkit has a **terrible** implementation of +// `:focus-within`, and the dropdowns will **not** work unless the parent +// element, in this case a `
  • ` has a `tabindex` attribute set to `0` and its +// first child set to `-1`. +// +// Screw WebKit, and screw Apple for using such a terrible web engine. + // Icons from https://materialdesignicons.com/ final icons = { - 'home': SvgElement.svg(''), - - 'pages': SvgElement.svg(''), - - 'toc': SvgElement.svg(''), - - 'share': SvgElement.svg(''), - - 'twitter': SvgElement.svg(''), - - 'reddit': SvgElement.svg(''), - - 'email': SvgElement.svg(''), - - 'linkedin': SvgElement.svg(''), - - 'facebook': SvgElement.svg(''), - - 'theme': SvgElement.svg(''), - - 'sun': SvgElement.svg(''), - - 'lightbulb': SvgElement.svg(''), - - 'moon': SvgElement.svg(''), + 'home': SvgElement.svg( + ''), + 'pages': SvgElement.svg( + ''), + 'toc': SvgElement.svg( + ''), + 'share': SvgElement.svg( + ''), + 'twitter': SvgElement.svg( + ''), + 'reddit': SvgElement.svg( + ''), + 'email': SvgElement.svg( + ''), + 'linkedin': SvgElement.svg( + ''), + 'facebook': SvgElement.svg( + ''), + 'theme': SvgElement.svg( + ''), + 'sun': SvgElement.svg( + ''), + 'lightbulb': SvgElement.svg( + ''), + 'moon': SvgElement.svg( + ''), }; +// Get the current page’s title String getPageTitle() => querySelector('title').text; +// Create any type of icon Element makeIcon(SvgElement t_elem) { - final icon = t_elem - ..classes.add('nav-icon'); + final icon = t_elem..classes.add('nav-icon'); return icon; } +// Make the Table of Content in the navbar Future makeToc() async { return Element.li() ..attributes['id'] = 'toc-drop' + ..attributes['tabindex'] = '0' ..classes.addAll(['nav-item', 'has-dropdown']) ..append(Element.a() + ..attributes['tabindex'] = '-1' ..attributes['href'] = 'javascript:void(0)' ..append(makeIcon(icons['toc']))); } +// Make the list of pages in the navbar Future makePages() async { var pages = Element.ul() ..attributes['id'] = 'drop-page' ..classes.add('dropdown'); return Element.li() + ..attributes['tabindex'] = '0' ..append(Element.a() + ..attributes['tabindex'] = '-1' ..attributes['href'] = 'javascript:void(0)' ..append(makeIcon(icons['pages']))) ..classes.addAll(['nav-item', 'has-dropdown']) ..append(pages); } -Element makeShareLink(Element t_icon, String t_url) { - return Element.li() - ..classes.add('dropdown-item') - ..append(Element.a() - ..attributes['href'] = t_url - ..attributes['target'] = '_blank' - ..attributes['rel'] = 'noreferrer' - ..append(t_icon)); -} - +// Make the share icon Future makeShare() async { + // Create a share button + Element makeShareLink(Element t_icon, String t_url) { + return Element.li() + ..classes.add('dropdown-item') + ..append(Element.a() + ..attributes['href'] = t_url + ..attributes['target'] = '_blank' + ..attributes['rel'] = 'noreferrer' + ..append(t_icon)); + } + return Element.li() ..classes.addAll(['nav-item', 'has-dropdown']) + ..attributes['tabindex'] = '0' ..append(Element.a() ..attributes['href'] = 'javascript:void(0)' + ..attributes['tabindex'] = '-1' ..append(makeIcon(icons['share']))) ..append(Element.ul() ..classes.add('dropdown') @@ -94,6 +115,7 @@ Future makeShare() async { 'https://www.facebook.com/sharer/sharer.php?u=${window.location.href}'))); } +// Make the theme changer in the navbar Future makeThemeChanger() async { Element makeThemeItem(String t_btnId, String t_text, [Element t_icon]) { return Element.li() @@ -105,8 +127,10 @@ Future makeThemeChanger() async { return Element.li() ..classes.addAll(['nav-item', 'has-dropdown']) + ..attributes['tabindex'] = '0' ..append(Element.a() ..attributes['href'] = 'javascript:void(0)' + ..attributes['tabindex'] = '-1' ..append(Element.span() ..style.verticalAlign = 'top' ..append(makeIcon(icons['theme'])))) @@ -118,6 +142,7 @@ Future makeThemeChanger() async { ..append(makeThemeItem('blackBtn', 'Noir', makeIcon(icons['moon'])))); } +// Make home button in navbar Future makeHome() async { return Element.li() ..classes.add('nav-item') @@ -133,11 +158,11 @@ Future makeHome() async { // - A dropdown to each page detected in the sitemap Future makeNavbar() async { final navbar_content = Element.ul()..classes.add('navbar-nav'); - final home = await makeHome(); - final pages = await makePages(); - final toc = await makeToc(); - final share = await makeShare(); - final theme = await makeThemeChanger(); + final home = await makeHome(); + final pages = await makePages(); + final toc = await makeToc(); + final share = await makeShare(); + final theme = await makeThemeChanger(); navbar_content ..append(home)