import 'dart:html'; import 'dart:svg'; // 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(''), }; String getPageTitle() => querySelector('title').text; Element makeIcon(SvgElement t_elem) { final icon = t_elem ..classes.add('nav-icon'); return icon; } Future makeToc() async { return Element.li() ..attributes['id'] = 'toc-drop' ..classes.addAll(['nav-item', 'has-dropdown']) ..append(Element.a() ..attributes['href'] = 'javascript:void(0)' ..append(makeIcon(icons['toc']))); } Future makePages() async { var pages = Element.ul() ..attributes['id'] = 'drop-page' ..classes.add('dropdown'); return Element.li() ..append(Element.a() ..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)); } Future makeShare() async { return Element.li() ..classes.addAll(['nav-item', 'has-dropdown']) ..append(Element.a() ..attributes['href'] = 'javascript:void(0)' ..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}'))); } Future makeThemeChanger() async { Element makeThemeItem(String t_btnId, String t_text, [Element t_icon]) { return Element.li() ..classes.add('dropdown-item') ..append(Element.span() ..attributes['id'] = t_btnId ..appendText(' $t_text')); } return Element.li() ..classes.addAll(['nav-item', 'has-dropdown']) ..append(Element.a() ..attributes['href'] = 'javascript:void(0)' ..append(Element.span() ..style.verticalAlign = 'top' ..append(makeIcon(icons['theme'])))) ..append(Element.ul() ..classes.add('dropdown') ..attributes['id'] = 'theme-dropdown' ..append(makeThemeItem('lightBtn', 'Clair', makeIcon(icons['sun']))) ..append(makeThemeItem('darkBtn', 'Sombre', makeIcon(icons['lightbulb']))) ..append(makeThemeItem('blackBtn', 'Noir', makeIcon(icons['moon'])))); } Future makeHome() async { return Element.li() ..classes.add('nav-item') ..insertAdjacentElement( 'afterBegin', Element.a() ..attributes['href'] = '/' ..append(makeIcon(icons['home']))); } // Add a navbar atop of the HTML body, containing two buttons: // - One back to home // - 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(); 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; }