Website now runs on Dart’s webdev

langue.phundrak.com now runs using the `webdev` tool from Dart.
Javascript code has been replaced with Dart code, and CSS code has
been replaced with SCSS code. To run the project, execute
`webdev serve` at the project’s root.
This commit is contained in:
2019-12-12 15:44:23 +01:00
parent 79596d60a1
commit c84aace663
80 changed files with 1657 additions and 939 deletions

11
web/dart/cookie.dart Normal file
View File

@@ -0,0 +1,11 @@
@JS()
library cookie;
import 'package:js/js.dart';
@JS()
class Cookies {
// external factory Cookie();
external static String get(String name);
external static void set(String name, String value);
}

59
web/dart/main.dart Normal file
View File

@@ -0,0 +1,59 @@
@JS()
library main;
import 'dart:html';
import 'package:js/js.dart';
import './cookie.dart';
void main() {
reorganizeHtml();
createThemeSwitcher();
querySelector('.themeBtn').onClick.listen(themeSwitch);
}
void createThemeSwitcher() {
// set the correct CSS depending on the cookie, dark is enabled by default
var isDark = isThemeDark();
// Set the correct symbol in the theme switcher button
querySelector('body').append(DivElement()..className = 'themeBtn');
querySelector('.themeBtn')
.children
.add(Element.tag('i')..className = 'fas fa-' + (isDark ? 'sun' : 'moon'));
}
bool isThemeDark() {
if (Cookies.get('theme') == 'light') {
return false;
}
Cookies.set('theme', 'dark');
return true;
}
bool setTheme(bool dark) {
Cookies.set('theme', (dark ? 'dark' : 'light'));
return !dark;
}
void themeSwitch(MouseEvent event) {
print('Switch theme');
bool isDark = setTheme(isThemeDark());
querySelector('.fas').className = 'fas fa-' + (isDark ? 'sun' : 'moon');
querySelector('#theme').attributes['href'] =
'/css/' + (isDark ? 'dark' : 'light') + '.css';
}
void reorganizeHtml() {
// Add a <hr> element after the content div
querySelector('#content').appendHtml('<hr>');
// Move the postamble in the content div
querySelector('#content').append(querySelector('#postamble'));
for (var table in querySelectorAll('table')) {
var largetable = DivElement();
largetable.className = 'largetable';
table.before(largetable);
largetable.children.add(table);
}
}