From f99d45e8ab2cc233c5d5fb172d581b5eae37fe77 Mon Sep 17 00:00:00 2001 From: Lucien Cartier-Tilet Date: Tue, 25 Aug 2020 03:34:55 +0200 Subject: [PATCH] Simplify code, remove html dependency This commit removes the `html' package dependency, speeding up the compile time of the Dart code. It also simplifies the code and removes some unused code. For instance the sun, moon, and lightbulb icons is removed, the `Theme' class is removed, and the `switchTheme' function is now merged into the `setTheme' function. The `makeThemeItem' function has also had its second argument removed. --- pubspec.yaml | 3 +- web/dart/main.dart | 7 ++-- web/dart/navbar.dart | 18 ++++------ web/dart/parse_sitemap.dart | 20 +++++------ web/dart/reorganize_html.dart | 2 +- web/dart/theme.dart | 64 ++++++++++------------------------- 6 files changed, 38 insertions(+), 76 deletions(-) diff --git a/pubspec.yaml b/pubspec.yaml index 3b48081..cf94c11 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -8,9 +8,8 @@ environment: sdk: '>=2.7.0 <3.0.0' dependencies: - html: '^0.14.0+3' dev_dependencies: - build_runner: ^1.8.0 + build_runner: ^1.10.1 build_web_compilers: ^2.9.0 pedantic: ^1.9.0 diff --git a/web/dart/main.dart b/web/dart/main.dart index eb182ef..8a78c18 100644 --- a/web/dart/main.dart +++ b/web/dart/main.dart @@ -4,7 +4,8 @@ import './theme.dart' show enableThemeChanger, setTheme; Future main() async { await setTheme(); - await reorganizeHtml() - .then((_) => enableThemeChanger()) - .then((_) => createSitemap()); + await reorganizeHtml().then((_) { + enableThemeChanger(); + createSitemap(); + }); } diff --git a/web/dart/navbar.dart b/web/dart/navbar.dart index 85d46ac..bda7124 100644 --- a/web/dart/navbar.dart +++ b/web/dart/navbar.dart @@ -1,5 +1,5 @@ -import 'dart:html'; -import 'dart:svg'; +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 @@ -32,12 +32,6 @@ final icons = { ''), 'theme': SvgElement.svg( ''), - 'sun': SvgElement.svg( - ''), - 'lightbulb': SvgElement.svg( - ''), - 'moon': SvgElement.svg( - ''), }; // Get the current page’s title @@ -117,7 +111,7 @@ Future makeShare() async { // Create the theme changer Future makeThemeChanger() async { - Element makeThemeItem(String t_btnId, [Element t_icon]) { + Element makeThemeItem(String t_btnId) { return Element.li() ..classes.add('dropdown-item') ..append(Element.span()..attributes['id'] = t_btnId); @@ -135,9 +129,9 @@ Future makeThemeChanger() async { ..append(Element.ul() ..classes.add('dropdown') ..attributes['id'] = 'theme-dropdown' - ..append(makeThemeItem('lightBtn', makeIcon(icons['sun']))) - ..append(makeThemeItem('darkBtn', makeIcon(icons['lightbulb']))) - ..append(makeThemeItem('blackBtn', makeIcon(icons['moon'])))); + ..append(makeThemeItem('lightBtn')) + ..append(makeThemeItem('darkBtn')) + ..append(makeThemeItem('blackBtn'))); } // Create the dropdown table of contents diff --git a/web/dart/parse_sitemap.dart b/web/dart/parse_sitemap.dart index b38ab98..92d38ff 100644 --- a/web/dart/parse_sitemap.dart +++ b/web/dart/parse_sitemap.dart @@ -1,7 +1,4 @@ -import 'dart:html' as html show HttpRequest, Element, querySelector; - -import 'package:html/parser.dart' show parse; -import 'package:html/dom.dart' as dom show Element; +import 'dart:html' show HttpRequest, Element, querySelector; final excluded_keywords = {'index', 'CONTRIBUTING', 'LICENSE', 'README'}; @@ -9,7 +6,7 @@ final excluded_keywords = {'index', 'CONTRIBUTING', 'LICENSE', 'README'}; Future fetchRemoteSitemap() async { const path = '/sitemap.html'; try { - return await html.HttpRequest.getString(path); + return await HttpRequest.getString(path); } catch (e) { print('Couldn’t open $path'); } @@ -17,7 +14,7 @@ Future fetchRemoteSitemap() async { } // Parse the list of elements and detect pages from this list -Map detectPages(List t_sitemap, +Map detectPages(List t_sitemap, [String t_prefix, Map t_links]) { t_links ??= {}; @@ -47,17 +44,18 @@ Map detectPages(List t_sitemap, // from the sitemap. Future> parseSitemap() async { final content = await fetchRemoteSitemap(); - final sitemap = parse(content).getElementsByClassName('org-ul')[0].children; - return detectPages(sitemap); + final sitemap = Element.ul()..innerHtml = content; + final sitemapNodes = sitemap.querySelector('ul').children; + return detectPages(sitemapNodes); } Future createSitemap() async { final sitemap = await parseSitemap(); - final pages = html.querySelector('#drop-page'); + final pages = querySelector('#drop-page'); sitemap.forEach((url, name) { - final link = html.Element.li() + final link = Element.li() ..classes.add('dropdown-item') - ..append(html.Element.a() + ..append(Element.a() ..attributes['href'] = url ..innerText = name); pages.append(link); diff --git a/web/dart/reorganize_html.dart b/web/dart/reorganize_html.dart index 07b8046..72a5ce2 100644 --- a/web/dart/reorganize_html.dart +++ b/web/dart/reorganize_html.dart @@ -1,4 +1,4 @@ -import 'dart:html'; +import 'dart:html' show DivElement, Element, querySelector, querySelectorAll; import './navbar.dart' show makeNavbar; diff --git a/web/dart/theme.dart b/web/dart/theme.dart index 676bfd2..ec6c7e3 100644 --- a/web/dart/theme.dart +++ b/web/dart/theme.dart @@ -1,53 +1,23 @@ import 'dart:html'; -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; +Future setTheme([String theme]) async { + final currentTheme = theme ?? localStorage['theme'] ?? + () { + final devicePrefersDark = + window.matchMedia('(prefers-color-scheme: dark)').matches; + return devicePrefersDark ? 'dark' : 'light'; + }(); + localStorage['theme'] = currentTheme; + querySelector('body') + ..classes.clear() + ..classes.add(currentTheme); +} + void enableThemeChanger() { - final darkBtn = querySelector('#darkBtn'); - final lightBtn = querySelector('#lightBtn'); - final blackBtn = querySelector('#blackBtn'); - - lightBtn.onClick.listen((_) => switchTheme(themes['light'])); - darkBtn.onClick.listen((_) => switchTheme(themes['dark'])); - blackBtn.onClick.listen((_) => switchTheme(themes['black'])); -} - -Future setTheme() async { - final currentTheme = themes[localStorage['theme']] ?? - () { - final devicePrefersDark = - window.matchMedia('(prefers-color-scheme: dark)').matches; - return themes[devicePrefersDark ? 'dark' : 'light']; - }(); - 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(); + final themes = ['light', 'dark', 'black']; + themes.forEach((theme) => + querySelector('#${theme}Btn').onClick.listen((_) => setTheme(theme)) + ); }