Moved out navbar-related code
This commit is contained in:
parent
d692d30ff8
commit
070e8b4ba1
GPG Key ID:
BD7789E705CB8DCA
149
web/dart/navbar.dart
Normal file
149
web/dart/navbar.dart
Normal file
@ -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<String> classes, [String id]) {
|
||||||
|
final icon = Element.tag('i')..classes.addAll(classes);
|
||||||
|
if (id != null) {
|
||||||
|
icon.attributes['id'] = id;
|
||||||
|
}
|
||||||
|
return icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<Element> 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<Element> 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<Element> 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<Element> 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<Element> 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<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;
|
||||||
|
}
|
||||||
@ -1,164 +1,9 @@
|
|||||||
import 'dart:html';
|
import 'dart:html';
|
||||||
|
|
||||||
import './parse_sitemap.dart' show parseSitemap;
|
import './navbar.dart' show makeNavbar;
|
||||||
|
|
||||||
// Returns the title of the current webpage
|
|
||||||
String getPageTitle() {
|
|
||||||
return querySelector('title').text;
|
|
||||||
}
|
|
||||||
|
|
||||||
Element makeIcon(List<String> classes, [String id]) {
|
|
||||||
final icon = Element.tag('i')..classes.addAll(classes);
|
|
||||||
if (id != null) {
|
|
||||||
icon.attributes['id'] = id;
|
|
||||||
}
|
|
||||||
return icon;
|
|
||||||
}
|
|
||||||
|
|
||||||
Future<Element> 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<Element> 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<Element> 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<Element> 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<Element> 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<String> classes, String id) {
|
|
||||||
final icon = makeIcon(classes, id);
|
|
||||||
navbar.append(Element.li()..append(icon));
|
|
||||||
return navbar;
|
|
||||||
}
|
|
||||||
|
|
||||||
Future<Element> makeHeader() async {
|
Future<Element> makeHeader() async {
|
||||||
var header = Element.tag('header');
|
var header = Element.tag('header');
|
||||||
|
|
||||||
// querySelector('#container').append(Element.tag('header'));
|
|
||||||
// var header = querySelector('header');
|
|
||||||
header
|
header
|
||||||
..append(Element.img()
|
..append(Element.img()
|
||||||
..attributes['src'] =
|
..attributes['src'] =
|
||||||
|
|||||||
Reference in New Issue
Block a user