phundrak/langue-phundrak-com
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Theme change made permanent, TOC and language changer work

Browse Source 
Replaced all text in navbar by icons, moved TOC to the right of Home
button. TOC is now correctly displayed with small animation. Added black
theme to light and dark themes.
This commit is contained in:
Lucien Cartier-Tilet
2020-04-28 22:32:37 +02:00
parent 05e374dd27
commit 7c9e8b1e5f
5 changed files with 414 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/dart/main.dart
View File

@@ -1,7 +1,8 @@
import './reorganize_html.dart' show reorganizeHtml;
import './theme.dart' show makeThemeChanger;
import './theme.dart' show makeThemeChanger, setTheme;
Future<void> main() async {
await setTheme();
await reorganizeHtml().then((_) {
makeThemeChanger();
});

151
web/dart/reorganize_html.dart
View File

@@ -7,74 +7,103 @@ 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> addLanguages(Element navbar) async {
// Languages
var languages = Element.ul()..classes.add('dropdown');
var languages = Element.ul()
..attributes['id'] = 'drop-lang'
..classes.add('dropdown');
await parseSitemap().then((final sitemap) => {
sitemap.forEach((url, name) {
final link = Element.a()
..attributes['href'] = url
..innerText = name;
final linkLi = Element.li()
final link = Element.li()
..classes.add('dropdown-item')
..insertAdjacentElement('afterBegin', link);
languages.insertAdjacentElement('beforeEnd', linkLi);
..insertAdjacentElement(
'afterBegin',
Element.a()
..attributes['href'] = url
..innerText = name);
languages.insertAdjacentElement('beforeEnd', link);
})
});
navbar.append(Element.li()
..append(Element.a()
..attributes['href'] = '#'
..innerText = 'Langues')
..classes.add('nav-item')
..classes.add('has-dropdown')
..attributes['href'] = 'javascript:void(0)'
..append(makeIcon(['fas', 'fa-language'])))
// ..innerText = 'Langues')
..classes.addAll(['nav-item', 'has-dropdown'])
..insertAdjacentElement('beforeEnd', languages));
return navbar;
}
Element makeTocDropDown() {
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')));
}
Element makeThemeChanger() {
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(makeIcon(['fas', 'fa-sun']))
..append(makeIcon(['fas', 'fa-moon'])))
..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')));
}
// Add a navbar atop of the HTML body, containing two buttons:
// - One back to home
// - A dropdown to each language detected in the sitemap
Future<Element> makeNavbar() async {
// var _navbar = Navbar();
var navbar_content = Element.ul()..classes.add('navbar-nav');
// Home
var navbar_content = Element.ul()..classes.add('navbar-nav');
navbar_content.append(Element.li()
..classes.add('nav-item')
..insertAdjacentElement(
'afterBegin',
Element.a()
..attributes['href'] = '/'
..innerText = 'Accueil'));
..append(makeIcon(['fas', 'fa-home']))));
// TOC icon
navbar_content.append(makeTocDropDown());
// Add languages
// navbar_content.append(Element.html('''
// '''));
navbar_content = await addLanguages(navbar_content);
// Page title
navbar_content.append(Element.li()
..classes.add('nav-item')
..innerText = getPageTitle());
// Share icon
// Add dropdown for sharing on multiple platforms
// TODO Add dropdown for sharing on multiple platforms
navbar_content = addIcon(navbar_content, ['fas', 'fa-share-alt'], 'shareBtn');
// Theme changer
// Add dropdown for theming
// navbar_content = addIcon(navbar_content, ['fas', 'fa-sun'], 'themeBtn');
navbar_content.append(Element.html('''
<li class="nav-item has-dropdown">
<a href="#"><i class="fas fa-sun" id="themeBtn"></i></a>
<ul class="dropdown" id="theme-dropdown">
<li class="dropdown-item"><span id="lightBtn"><i class="fas fa-sun"></i> Clair</span></li>
<li class="dropdown-item"><span id="darkBtn"> <i class="fas fa-moon"></i> Sombre</span></li>
</ul>
</li>'''));
var theme = window.localStorage['theme'];
theme = (theme == null || theme == 'light') ? 'fa-moon' : 'fa-sun';
navbar_content.append(makeThemeChanger());
// Navbar content added to navbar
final navbar = Element.nav()
@@ -85,14 +114,31 @@ Future<Element> makeNavbar() async {
}
Element addIcon(Element navbar, List<String> classes, String id) {
var elem = Element.tag('i')..attributes['id'] = id;
for (var c in classes) {
elem.classes.add(c);
}
navbar.append(Element.li()..append(elem));
final icon = makeIcon(classes, id);
navbar.append(Element.li()..append(icon));
return navbar;
}
Element makeHeader() {
var header = Element.tag('header');
// querySelector('#container').append(Element.tag('header'));
// var header = querySelector('header');
header
..append(Element.img()
..attributes['src'] =
'https://cdn.phundrak.com/img/mahakala-monochrome.png'
..attributes['alt'] = 'Logo de Phundrak'
..attributes['heigh'] = '150px'
..attributes['width'] = '150px')
..append(querySelector('h1'));
var subt = querySelector('.subtitle');
if (subt != null) {
header.append(subt);
}
return header;
}
Future<void> wrapTables() async {
for (var table in querySelectorAll('table')) {
var largetable = DivElement()..className = 'largetable';
@@ -101,24 +147,19 @@ Future<void> wrapTables() async {
}
}
Future<void> makeHeader() async {
querySelector('body')
.insertAdjacentElement('afterBegin', Element.tag('header'));
querySelector('header').append(querySelector('h1'));
querySelector('header').append(querySelector('.subtitle'));
}
Future<void> reorganizeHtml() async {
await makeHeader();
await wrapTables();
// Create navbar and then header
await makeNavbar().then((navbar) {
// querySelector('#toc-drop')
// .append(querySelector('#table-of-contents')..classes.add('dropdown'));
querySelector('body').insertAdjacentElement('afterBegin', navbar);
// querySelector('nav').insertAdjacentElement(
// 'afterEnd', Element.div()..attributes['id'] = 'container');
querySelector('nav').insertAdjacentElement('afterEnd', makeHeader());
querySelector('#toc-drop')
.append(querySelector('#table-of-contents')..classes.add('dropdown'));
});
querySelector('body')
..classes.add('light')
// Add a <hr> element after the content div
..appendHtml('<hr>')
// Move the postamble in the content div
..append(querySelector('#postamble'));
// wrap tables in container for better SCSS display
await wrapTables();
}

55
web/dart/theme.dart
View File

@@ -1,20 +1,53 @@
import 'dart:html';
void switchTheme(final Element body, String theme) {
body.classes.clear();
body.classes.add(theme);
class Theme {
String _name;
String _icon;
Theme(String t_name, String t_icon) {
_name = t_name;
_icon = t_icon;
}
String getIcon() => _icon;
String getName() => _name;
}
final themes = {
'light': Theme('light', 'fa-sun'),
'dark': Theme('dark', 'fa-lightbulb'),
'black': Theme('black', 'fa-moon')
};
final localStorage = window.localStorage;
var currentTheme = themes[localStorage['theme']];
void makeThemeChanger() {
final darkBtn = querySelector('#darkBtn');
final lightBtn = querySelector('#lightBtn');
final body = querySelector('body');
final blackBtn = querySelector('#blackBtn');
darkBtn.onClick.listen((_) {
switchTheme(body, 'dark');
});
lightBtn.onClick.listen((_) {
switchTheme(body, 'light');
});
lightBtn.onClick.listen((_) => switchTheme(themes['light']));
darkBtn.onClick.listen((_) => switchTheme(themes['dark']));
blackBtn.onClick.listen((_) => switchTheme(themes['black']));
}
Future<void> setTheme() async {
if (currentTheme == null) {
currentTheme = themes['light'];
localStorage['theme'] = currentTheme.getName();
}
querySelector('body')
..classes.clear()
..classes.add(currentTheme.getName());
}
void switchTheme(Theme currentTheme) {
// Set HTML theme
querySelector('body')
..classes.clear()
..classes.add(currentTheme.getName());
// Set storage theme
localStorage['theme'] = currentTheme.getName();
}