Theme change made permanent, TOC and language changer work

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
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
5 changed files with 414 additions and 121 deletions

14
TODOs.org Normal file
View File

@ -0,0 +1,14 @@
* TODO Organization of HTML [1/3]
** DONE Add button to display TOC
CLOSED: [2020-04-28 mar. 22:30]
** TODO Add link to images that dont have any
** TODO Add share links [0/3]
*** TODO Add Twitter share
*** TODO Add Email share
*** TODO Add LinkedIn share
*** TODO Add Facebook share
* TODO Styling [1/3]
** TODO Tables
** DONE Hint bubbles for phonetics (Ñyqy)
CLOSED: [2020-04-28 mar. 22:31]
** TODO Links

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();
});

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();
}

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();
}

View File

@ -2,7 +2,7 @@
@font-face {
font-family: "DoulosSIL";
font-display: swap;
src: url("https://langue.phundrak.com/fonts/DoulosSIL-R.woff");
src: url("/fonts/DoulosSIL-R.woff");
}
@font-face {
font-family: "Noto Sans Runes";
@ -18,69 +18,157 @@
// Themes /////////////////////////////////////////////////////////////////////
$dark: rgba( 52, 73, 94, 1);
$accent1: rgba(66, 191, 221, 1);
$black: rgba( 0, 0, 0, 1);
$accent1: rgba( 93, 115, 126, 1);
$accent2: rgba( 92, 172, 126, 1);
$accent3: rgba(197, 193, 155, 1);
$light: #ddd;
$light: rgba(252, 239, 249, 1);
$grey1: #f8f8f8;
$grey2: #dbe1e8;
$grey3: #b2becd;
$grey4: #6c7983;
$grey5: #454e56;
$grey6: #12181b;
$gradient-top: linear-gradient(0deg, $dark, $accent1, $accent2, $accent3, $light);
$gradient-right: linear-gradient(90deg, $dark, $accent1, $accent2, $accent3, $light);
$gradient-bottom: linear-gradient(180deg, $dark, $accent1, $accent2, $accent3, $light);
$gradient-left: linear-gradient(270deg, $dark, $accent1, $accent2, $accent3, $light);
$gradient-top-right: linear-gradient(45deg, $dark, $accent1, $accent2, $accent3, $light);
$gradient-bottom-right: linear-gradient(135deg, $dark, $accent1, $accent2, $accent3, $light);
$gradient-top-left: linear-gradient(225deg, $dark, $accent1, $accent2, $accent3, $light);
$gradient-bottom-left: linear-gradient(315deg, $dark, $accent1, $accent2, $accent3, $light);
$gradient-radial: radial-gradient( $dark, $accent1, $accent2, $accent3, $light);
// Accent 1
// Black
$gradient-accent1-black-left: linear-gradient(to left, $black, $accent1, $accent1);
$gradient-accent1-black-right: linear-gradient(to right, $black, $accent1, $accent1);
// Dark
$gradient-accent1-dark-left: linear-gradient(to left, $dark, $accent1);
$gradient-accent1-dark-right: linear-gradient(to right, $dark, $accent1);
// Light
$gradient-accent1-light-left: linear-gradient(to left, $light, $accent1);
$gradient-accent1-light-right: linear-gradient(to right, $light, $accent1);
// Accent 2
// Black
$gradient-accent2-black-left: linear-gradient(to left, $black, $accent2, $accent2);
$gradient-accent2-black-right: linear-gradient(to right, $black, $accent2, $accent2);
// Dark
$gradient-accent2-dark-left: linear-gradient(to left, $dark, $accent2);
$gradient-accent2-dark-right: linear-gradient(to right, $dark, $accent2);
// Light
$gradient-accent2-light-left: linear-gradient(to left, $light, $accent2);
$gradient-accent2-light-right: linear-gradient(to right, $light, $accent2);
// Accent 3
// Black
$gradient-accent3-black-left: linear-gradient(to left, $black, $accent3, $accent3);
$gradient-accent3-black-right: linear-gradient(to right, $black, $accent3, $accent3);
// Dark
$gradient-accent3-dark-left: linear-gradient(to left, $dark, $accent3);
$gradient-accent3-dark-right: linear-gradient(to right, $dark, $accent3);
// Light
$gradient-accent3-light-left: linear-gradient(to left, $light, $accent3);
$gradient-accent3-light-right: linear-gradient(to right, $light, $accent3);
$navbar-height: 70px;
$postamble-height: 55px;
.light {
$bg-nav: linear-gradient(to right, $grey1, $grey3);
$bg-dropdown: $grey1;
$text: $light;
$bg-nav: $gradient-accent3-light-right;
$border-color: $accent1;
$bg-solar: $accent3;
transition: background 500ms ease-in-out, color 1s ease-in-out;
color: $dark;
background: $light;
.navbar {
background: $grey3;
}
}
.dark {
$background: $dark;
$foreground: $light;
$bg-nav: linear-gradient(to right, $grey5, $grey6);
$bg-dropdown: $grey6;
$text: $dark;
$border-color: $dark;
$bg-solar: $accent3;
transition: background 500ms ease-in-out, color 1s ease-in-out;
.navbar, header {
background: $bg-nav;
}
.status {
background: $gradient-accent3-light-left;
color: $dark;
}
.tooltip {
border-bottom: 1px dotted $accent3;
.tooltiptext {
background-color: $accent3;
color: $dark;
&::after {
border-color: $accent3 transparent transparent transparent;
}
}
}
.dropdown {
background: $accent3;
color: $dark;
}
}
.dark, .black {
$bg-nav: $gradient-accent2-dark-right;
$border-color: $dark;
color: $light;
background: $dark;
.navbar {
transition: background 500ms ease-in-out, color 1s ease-in-out;
.navbar, header {
background: $bg-nav;
}
.status {
background: $gradient-accent2-dark-left;
color: $light;
}
.tooltip {
border-bottom: 1px dotted $accent1;
.tooltiptext {
background-color: $accent1;
color: $light;
&::after {
border-color: $accent1 transparent transparent transparent;
}
}
}
.dropdown {
background: $accent3;
color: $dark;
}
}
.black {
$bg-nav: $gradient-accent1-black-right;
background: $black;
.navbar, header {
background: $bg-nav;
}
.status {
background: $gradient-accent1-black-left;
}
.dropdown {
background: $dark;
color: $light;
background: $grey6;
}
}
/* Style *********************************************************************/
* {
outline: none;
}
body {
margin: 0;
padding: 0;
font-family: "Noto Sans Runes", "DoulosSIL", "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
font-size: 1.2em;
transition: background 500ms ease-in-out, color 1s ease-in-out;
header, .navbar {
@ -100,7 +188,10 @@ a {
}
.navbar {
height: 70px;
position: fixed;
top: 0;
z-index: 4;
height: $navbar-height;
width: 100%;
}
@ -109,27 +200,22 @@ a {
align-items: center;
justify-content: space-evenly;
height: 100%;
background: $accent3;
color: $dark;
}
header {
padding: 1em;
margin-top: $navbar-height;
margin-bottom: 1em;
padding-bottom: 3.5em;
text-align: center;
clip-path: polygon(50% 0%, 100% 0, 100% 65%, 50% 100%, 0 65%, 0 0);
color: $light;
background: $accent2;
clip-path: polygon(50% 0%, 100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
transition: background 500ms ease-in-out;
}
.dropdown {
position: absolute;
width: 500px;
opacity: 0;
z-index: 2;
background: blue;
border-top: 2px solid white;
z-index: 5;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
@ -137,8 +223,8 @@ header {
display: flex;
align-items: center;
justify-content: space-around;
height: 3rem;
margin-top: 2rem;
min-height: 3rem;
margin-top: 1rem;
padding: 0.5rem;
box-shadow: rgba(2, 8, 20, 0.1) 0px 0.175em 0.5em;
@ -148,8 +234,14 @@ header {
}
#theme-dropdown {
width: 300px;
transform: translateX(-95%);
width: 250px;
flex-direction: row;
transform: translateX(-50%);
}
#drop-lang {
flex-direction: column;
transform: translateX(-40%);
}
.has-dropdown {
@ -158,15 +250,127 @@ header {
opacity: 1;
pointer-events: auto;
}
#table-of-contents {
opacity: 1;
height: 500%;
pointer-events: auto;
}
}
}
.dropdown-item {
cursor: pointer;
a {
width: 100%;
height: 100%;
size: 0.7rem;
padding-left: 10px;
padding-right: 10px;
font-weight: bold;
}
}
#table-of-contents {
flex-direction: column;
padding: 20px;
float: right;
overflow-y: auto;
height: 0%;
width: 400px;
transform: translateX(0);
transition: height 500ms ease-in-out, opacity 500ms ease-in-out;
font-size: 0.9em;
h2 {
font-size: 1.2em;
}
#text-table-of-contents {
height: 100%;
}
}
#content {
padding: 50px;
padding-top: 0;
max-width: 700px;
margin: 0 auto;
text-align: justify;
}
#postamble {
display: grid;
grid-template-areas: 'author email date';
height: $postamble-height;
font-size: 0.8em;
align-content: space-evenly;
text-align: center;
.author {
grid-area: author;
}
.email {
grid-area: email;
}
.date {
grid-area: date;
}
}
h1, h2, h3, h4, h5, h6 {
text-align: center;
}
h2 {
font-size: 3em;
}
h3 {
font-size: 2em;
}
h4 {
font-size: 1.5em;
}
.tooltip {
position: relative;
display: inline-block;
.tooltiptext {
visibility: hidden;
width: 120px;
margin-left: -60px; /* Half the width */
bottom: 100%;
left: 50%;
padding: 5px 0;
text-align: center;
border-radius: 6px;
position: absolute;
z-index: 2;
&::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
}
}
&:hover {
.tooltiptext {
visibility: visible;
}
}
}