178 lines
10 KiB
Dart
178 lines
10 KiB
Dart
import 'dart:html' show querySelector, Element, window;
|
||
import 'dart:svg' show SvgElement;
|
||
|
||
// 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 `<li>` 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(
|
||
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg>'),
|
||
'pages': SvgElement.svg(
|
||
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M19,2L14,6.5V17.5L19,13V2M6.5,5C4.55,5 2.45,5.4 1,6.5V21.16C1,21.41 1.25,21.66 1.5,21.66C1.6,21.66 1.65,21.59 1.75,21.59C3.1,20.94 5.05,20.5 6.5,20.5C8.45,20.5 10.55,20.9 12,22C13.35,21.15 15.8,20.5 17.5,20.5C19.15,20.5 20.85,20.81 22.25,21.56C22.35,21.61 22.4,21.59 22.5,21.59C22.75,21.59 23,21.34 23,21.09V6.5C22.4,6.05 21.75,5.75 21,5.5V7.5L21,13V19C19.9,18.65 18.7,18.5 17.5,18.5C15.8,18.5 13.35,19.15 12,20V13L12,8.5V6.5C10.55,5.4 8.45,5 6.5,5V5Z" /></svg>'),
|
||
'toc': SvgElement.svg(
|
||
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M3,4H7V8H3V4M9,5V7H21V5H9M3,10H7V14H3V10M9,11V13H21V11H9M3,16H7V20H3V16M9,17V19H21V17H9"/></svg>'),
|
||
'share': SvgElement.svg(
|
||
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" /></svg>'),
|
||
'twitter': SvgElement.svg(
|
||
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" /></svg>'),
|
||
'reddit': SvgElement.svg(
|
||
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M14.5 15.41C14.58 15.5 14.58 15.69 14.5 15.8C13.77 16.5 12.41 16.56 12 16.56C11.61 16.56 10.25 16.5 9.54 15.8C9.44 15.69 9.44 15.5 9.54 15.41C9.65 15.31 9.82 15.31 9.92 15.41C10.38 15.87 11.33 16 12 16C12.69 16 13.66 15.87 14.1 15.41C14.21 15.31 14.38 15.31 14.5 15.41M10.75 13.04C10.75 12.47 10.28 12 9.71 12C9.14 12 8.67 12.47 8.67 13.04C8.67 13.61 9.14 14.09 9.71 14.08C10.28 14.08 10.75 13.61 10.75 13.04M14.29 12C13.72 12 13.25 12.5 13.25 13.05S13.72 14.09 14.29 14.09C14.86 14.09 15.33 13.61 15.33 13.05C15.33 12.5 14.86 12 14.29 12M22 12C22 17.5 17.5 22 12 22S2 17.5 2 12C2 6.5 6.5 2 12 2S22 6.5 22 12M18.67 12C18.67 11.19 18 10.54 17.22 10.54C16.82 10.54 16.46 10.7 16.2 10.95C15.2 10.23 13.83 9.77 12.3 9.71L12.97 6.58L15.14 7.05C15.16 7.6 15.62 8.04 16.18 8.04C16.75 8.04 17.22 7.57 17.22 7C17.22 6.43 16.75 5.96 16.18 5.96C15.77 5.96 15.41 6.2 15.25 6.55L12.82 6.03C12.75 6 12.68 6.03 12.63 6.07C12.57 6.11 12.54 6.17 12.53 6.24L11.79 9.72C10.24 9.77 8.84 10.23 7.82 10.96C7.56 10.71 7.2 10.56 6.81 10.56C6 10.56 5.35 11.21 5.35 12C5.35 12.61 5.71 13.11 6.21 13.34C6.19 13.5 6.18 13.62 6.18 13.78C6.18 16 8.79 17.85 12 17.85C15.23 17.85 17.85 16.03 17.85 13.78C17.85 13.64 17.84 13.5 17.81 13.34C18.31 13.11 18.67 12.6 18.67 12Z" /></svg>'),
|
||
'email': SvgElement.svg(
|
||
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" /></svg>'),
|
||
'linkedin': SvgElement.svg(
|
||
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z" /></svg>'),
|
||
'facebook': SvgElement.svg(
|
||
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z" /></svg>'),
|
||
'theme': SvgElement.svg(
|
||
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,18V6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z" /></svg>'),
|
||
};
|
||
|
||
// Get the current page’s title
|
||
String getPageTitle() => querySelector('title')!.text!;
|
||
|
||
// Create the home button
|
||
Future<Element> makeHome() async {
|
||
return Element.li()
|
||
..classes.add('nav-item')
|
||
..insertAdjacentElement(
|
||
'afterBegin',
|
||
Element.a()
|
||
..attributes['href'] = '/'
|
||
..append(makeIcon(icons['home']!)));
|
||
}
|
||
|
||
// Create a clickable icon
|
||
// `t_elem` must be an SVG declared in the above `icons` variable.
|
||
Element makeIcon(SvgElement t_elem) {
|
||
return t_elem..classes.add('nav-icon');
|
||
}
|
||
|
||
// Create the dropdown sitemap
|
||
Future<Element> makePages() async {
|
||
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(Element.ul()
|
||
..attributes['id'] = 'drop-page'
|
||
..classes.add('dropdown'));
|
||
}
|
||
|
||
// Create the array of share icons
|
||
Future<Element> 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')
|
||
..attributes['id'] = 'drop-share'
|
||
..append(makeShareLink(
|
||
makeIcon(icons['twitter']!),
|
||
'https://twitter.com/share?text=${getPageTitle()}'
|
||
'&url=${window.location.href}'))
|
||
..append(makeShareLink(makeIcon(icons['reddit']!),
|
||
'https://www.reddit.com/submit?title=${getPageTitle()}s&url=${window.location.href}'))
|
||
..append(makeShareLink(makeIcon(icons['email']!),
|
||
'mailto:?subject=$getPageTitle&body=${window.location.href}'))
|
||
..append(makeShareLink(
|
||
makeIcon(icons['linkedin']!),
|
||
'https://www.linkedin.com/shareArticle?mini=true&url=${window.location.href}'
|
||
'&title=${getPageTitle()}'))
|
||
..append(makeShareLink(makeIcon(icons['facebook']!),
|
||
'https://www.facebook.com/sharer/sharer.php?u=${window.location.href}')));
|
||
}
|
||
|
||
// Create the theme changer
|
||
Future<Element> makeThemeChanger() async {
|
||
Element makeThemeItem(String t_btnId) {
|
||
return Element.li()
|
||
..classes.add('dropdown-item')
|
||
..append(Element.span()
|
||
..attributes['id'] = t_btnId
|
||
..classes.add('themeBtn'));
|
||
}
|
||
|
||
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']!))))
|
||
..append(Element.ul()
|
||
..classes.add('dropdown')
|
||
..attributes['id'] = 'theme-dropdown'
|
||
..append(makeThemeItem('lightBtn'))
|
||
..append(makeThemeItem('darkBtn'))
|
||
..append(makeThemeItem('nordBtn'))
|
||
..append(makeThemeItem('blackBtn')));
|
||
}
|
||
|
||
// Create the dropdown table of contents
|
||
Future<Element> 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']!)));
|
||
}
|
||
|
||
// Add a navbar atop of the HTML body, containing:
|
||
// - A back to home button
|
||
// - A dropdown sitemap
|
||
// - A dropdown table of contents
|
||
// - A dropdown array of share icons
|
||
// - A theme changer
|
||
Future<Element> 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();
|
||
|
||
navbar_content
|
||
..append(home)
|
||
..append(pages)
|
||
..append(toc)
|
||
..append(share)
|
||
..append(theme);
|
||
|
||
// Navbar content added to navbar
|
||
final navbar = Element.nav()
|
||
..classes.add('navbar')
|
||
..append(navbar_content);
|
||
|
||
return navbar;
|
||
}
|