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)