From 070e8b4ba1a25be4731562de58fce39b07abd4cc Mon Sep 17 00:00:00 2001 From: Lucien Cartier-Tilet Date: Tue, 5 May 2020 12:34:22 +0200 Subject: [PATCH] Moved out navbar-related code --- web/dart/navbar.dart | 149 ++++++++++++++++++++++++++++++++ web/dart/reorganize_html.dart | 157 +--------------------------------- 2 files changed, 150 insertions(+), 156 deletions(-) create mode 100644 web/dart/navbar.dart diff --git a/web/dart/navbar.dart b/web/dart/navbar.dart new file mode 100644 index 0000000..4e404af --- /dev/null +++ b/web/dart/navbar.dart @@ -0,0 +1,149 @@ +import 'dart:html'; + +import './parse_sitemap.dart' show parseSitemap; + +// Returns the title of the current webpage +String getPageTitle() { + return querySelector('title').text; +} + +Element makeIcon(List classes, [String id]) { + final icon = Element.tag('i')..classes.addAll(classes); + if (id != null) { + icon.attributes['id'] = id; + } + 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(['fas', 'fa-list-ol'], 'tocBtn'))); +} + +Future makePages() async { + var pages = Element.ul() + ..attributes['id'] = 'drop-page' + ..classes.add('dropdown'); + await parseSitemap().then((final sitemap) => { + sitemap.forEach((url, name) { + final link = Element.li() + ..classes.add('dropdown-item') + ..insertAdjacentElement( + 'afterBegin', + Element.a() + ..attributes['href'] = url + ..innerText = name); + pages.insertAdjacentElement('beforeEnd', link); + }) + }); + return Element.li() + ..append(Element.a() + ..attributes['href'] = 'javascript:void(0)' + ..append(makeIcon(['fas', 'fa-flag']))) + ..classes.addAll(['nav-item', 'has-dropdown']) + ..insertAdjacentElement('beforeEnd', pages); +} + +Element makeShareLink(Element icon, String url) { + return Element.li() + ..classes.add('dropdown-item') + ..append(Element.a() + ..attributes['href'] = url + ..attributes['target'] = '_blank' + ..append(icon)); +} + +Future makeShare() async { + return Element.li() + ..classes.addAll(['nav-item', 'has-dropdown']) + ..append(Element.a() + ..attributes['href'] = 'javascript:void(0)' + ..append(makeIcon(['fas', 'fa-share-alt']))) + ..append(Element.ul() + ..classes.add('dropdown') + ..attributes['id'] = 'drop-share' + ..append(makeShareLink( + makeIcon(['fab', 'fa-twitter-square']), + 'https://twitter.com/share?text=${getPageTitle()}' + '&url=${window.location.href}')) + ..append(makeShareLink(makeIcon(['fab', 'fa-reddit-square']), + 'https://www.reddit.com/submit?title=${getPageTitle()}s&url=${window.location.href}')) + ..append(makeShareLink(makeIcon(['fas', 'fa-envelope-square']), + 'mailto:?subject=${getPageTitle}&body=${window.location.href}')) + ..append(makeShareLink( + makeIcon(['fab', 'fa-linkedin']), + 'https://www.linkedin.com/shareArticle?mini=true&url=${window.location.href}' + '&title=${getPageTitle()}')) + ..append(makeShareLink(makeIcon(['fab', 'fa-facebook-square']), + 'https://www.facebook.com/sharer/sharer.php?u=${window.location.href}'))); +} + +Future makeThemeChanger() async { + Element makeThemeItem(String t_btnId, Element t_icon, String t_text) { + return Element.li() + ..classes.add('dropdown-item') + ..append(Element.span() + ..attributes['id'] = t_btnId + ..append(t_icon) + ..appendText(' $t_text')); + } + + return Element.li() + ..classes.addAll(['nav-item', 'has-dropdown']) + ..append(Element.a() + ..attributes['href'] = 'javascript:void(0)' + ..append(Element.span() + ..classes.add('fa-stack') + ..style.verticalAlign = 'top' + ..append(makeIcon(['fas', 'fa-sun', 'fa-stack-1x']) + ..style.fontSize = '0.9em') + ..append(makeIcon(['fas', 'fa-moon', 'fa-stack-1x'])))) + ..append(Element.ul() + ..classes.add('dropdown') + ..attributes['id'] = 'theme-dropdown' + ..append(makeThemeItem('lightBtn', makeIcon(['fas', 'fa-sun']), 'Clair')) + ..append( + makeThemeItem('darkBtn', makeIcon(['fas', 'fa-lightbulb']), 'Sombre')) + ..append( + makeThemeItem('blackBtn', makeIcon(['fas', 'fa-moon']), 'Noir'))); +} + +Future makeHome() async { + return Element.li() + ..classes.add('nav-item') + ..insertAdjacentElement( + 'afterBegin', + Element.a() + ..attributes['href'] = '/' + ..append(makeIcon(['fas', 'fa-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; +} diff --git a/web/dart/reorganize_html.dart b/web/dart/reorganize_html.dart index c0e2bbe..10b5a67 100644 --- a/web/dart/reorganize_html.dart +++ b/web/dart/reorganize_html.dart @@ -1,164 +1,9 @@ import 'dart:html'; -import './parse_sitemap.dart' show parseSitemap; - -// Returns the title of the current webpage -String getPageTitle() { - return querySelector('title').text; -} - -Element makeIcon(List classes, [String id]) { - final icon = Element.tag('i')..classes.addAll(classes); - if (id != null) { - icon.attributes['id'] = id; - } - return icon; -} - -Future makePages() async { - // Pages - var pages = Element.ul() - ..attributes['id'] = 'drop-page' - ..classes.add('dropdown'); - await parseSitemap().then((final sitemap) => { - sitemap.forEach((url, name) { - final link = Element.li() - ..classes.add('dropdown-item') - ..insertAdjacentElement( - 'afterBegin', - Element.a() - ..attributes['href'] = url - ..innerText = name); - pages.insertAdjacentElement('beforeEnd', link); - }) - }); - return Element.li() - ..append(Element.a() - ..attributes['href'] = 'javascript:void(0)' - ..append(makeIcon(['fas', 'fa-flag']))) - ..classes.addAll(['nav-item', 'has-dropdown']) - ..insertAdjacentElement('beforeEnd', pages); -} - -Future makeTocDropDown() async { - return Element.li() - ..attributes['id'] = 'toc-drop' - ..classes.addAll(['nav-item', 'has-dropdown']) - ..append(Element.a() - ..attributes['href'] = 'javascript:void(0)' - ..append(makeIcon(['fas', 'fa-list-ol'], 'tocBtn'))); -} - -Future makeThemeChanger() async { - Element makeThemeItem(String t_btnId, Element t_icon, String t_text) { - return Element.li() - ..classes.add('dropdown-item') - ..append(Element.span() - ..attributes['id'] = t_btnId - ..append(t_icon) - ..appendText(' $t_text')); - } - - return Element.li() - ..classes.addAll(['nav-item', 'has-dropdown']) - ..append(Element.a() - ..attributes['href'] = 'javascript:void(0)' - ..append(Element.span() - ..classes.add('fa-stack') - ..style.verticalAlign = 'top' - ..append(makeIcon(['fas', 'fa-sun', 'fa-stack-1x']) - ..style.fontSize = '0.9em') - ..append(makeIcon(['fas', 'fa-moon', 'fa-stack-1x'])))) - ..append(Element.ul() - ..classes.add('dropdown') - ..attributes['id'] = 'theme-dropdown' - ..append(makeThemeItem('lightBtn', makeIcon(['fas', 'fa-sun']), 'Clair')) - ..append( - makeThemeItem('darkBtn', makeIcon(['fas', 'fa-lightbulb']), 'Sombre')) - ..append( - makeThemeItem('blackBtn', makeIcon(['fas', 'fa-moon']), 'Noir'))); -} - -Element makeShareLink(Element icon, String url) { - return Element.li() - ..classes.add('dropdown-item') - ..append(Element.a() - ..attributes['href'] = url - ..attributes['target'] = '_blank' - ..append(icon)); -} - -Future makeShare() async { - return Element.li() - ..classes.addAll(['nav-item', 'has-dropdown']) - ..append(Element.a() - ..attributes['href'] = 'javascript:void(0)' - ..append(makeIcon(['fas', 'fa-share-alt']))) - ..append(Element.ul() - ..classes.add('dropdown') - ..attributes['id'] = 'drop-share' - ..append(makeShareLink( - makeIcon(['fab', 'fa-twitter-square']), - 'https://twitter.com/share?text=${getPageTitle()}' - '&url=${window.location.href}')) - ..append(makeShareLink(makeIcon(['fab', 'fa-reddit-square']), - 'https://www.reddit.com/submit?title=${getPageTitle()}s&url=${window.location.href}')) - ..append(makeShareLink(makeIcon(['fas', 'fa-envelope-square']), - 'mailto:?subject=${getPageTitle}&body=${window.location.href}')) - ..append(makeShareLink( - makeIcon(['fab', 'fa-linkedin']), - 'https://www.linkedin.com/shareArticle?mini=true&url=${window.location.href}' - '&title=${getPageTitle()}')) - ..append(makeShareLink(makeIcon(['fab', 'fa-facebook-square']), - 'https://www.facebook.com/sharer/sharer.php?u=${window.location.href}'))); -} - -// 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 { - var navbar_content = Element.ul()..classes.add('navbar-nav'); - - // Home - navbar_content.append(Element.li() - ..classes.add('nav-item') - ..insertAdjacentElement( - 'afterBegin', - Element.a() - ..attributes['href'] = '/' - ..append(makeIcon(['fas', 'fa-home'])))); - - // Add pages - navbar_content.append(await makePages()); - - // TOC icon - navbar_content.append(await makeTocDropDown()); - - // Share icon - navbar_content.append(await makeShare()); - - // Theme changer - navbar_content.append(await makeThemeChanger()); - - // Navbar content added to navbar - final navbar = Element.nav() - ..classes.add('navbar') - ..append(navbar_content); - - return navbar; -} - -Element addIcon(Element navbar, List classes, String id) { - final icon = makeIcon(classes, id); - navbar.append(Element.li()..append(icon)); - return navbar; -} +import './navbar.dart' show makeNavbar; Future makeHeader() async { var header = Element.tag('header'); - - // querySelector('#container').append(Element.tag('header')); - // var header = querySelector('header'); header ..append(Element.img() ..attributes['src'] =