hematite 0.0.11 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c5f6a0cdf074d0025f0cf3031037a4dc365af38f99aa811578f3d88f0c356175
4
- data.tar.gz: 533d5d2c8897c2985977971c5a6ca66552df1edee4bae22c9184750e97478007
3
+ metadata.gz: 8ba3735a0bf64aa9c895fc9622e0370b0827c80386469ccb4c5172058f91db97
4
+ data.tar.gz: e6f824c10b0febde44d427ee0528681f756cc59bff67a3362e256d77d5be3650
5
5
  SHA512:
6
- metadata.gz: be650d2182b5d2dccdc6bccc3837691246f94bf8271bda4343cd923e7da5eb2c9fa3ddc960f35d2711c13cf51b574f3b27eddd47f31afc3c8688e231ab22afe7
7
- data.tar.gz: 7ebc7f1a7902040eb224a1adb08da8115207303e028e4bad22d608f061e11a3f5450da65c2e572da68a10317c835ba73469d1ebef1c7a9f2a182a5567eb4f80f
6
+ metadata.gz: 958067abc2e83cbecc509dc7c31c2eb711c2116ea201a27c28f6a89bc0f0a6658d34532433596b989178ab070d686c2a5de0d26781ff6b92d73fdc6416f9608f
7
+ data.tar.gz: e01cb8c28899e24135e832ef89543c9266e66db13d9a53f40327d6c32b6d8ed815d5da7247a63fd88ca94dc762180ab752fb8494c2d9e31d3ae2ed13fdda6297
data/_config.yml CHANGED
@@ -1,9 +1,6 @@
1
1
 
2
2
  # Settings for the demo site.
3
3
  # `jekyll serve` does not auto-reload this file.
4
- #
5
- # See https://leo3418.github.io/collections/multilingual-jekyll-site/localize-strings
6
- # for how localization works.
7
4
 
8
5
  title: Hematite Theme
9
6
  description: A Jekyll theme intended for course websites
@@ -12,6 +9,9 @@ permalink: pretty
12
9
  hematite:
13
10
  auto_invert_imgs: true
14
11
 
12
+ # Set to true to minimize the header by default
13
+ minimize_header: false
14
+
15
15
  # Date options are as specified here:
16
16
  # https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
17
17
  date_format:
@@ -0,0 +1,101 @@
1
+ <!--
2
+ See assets/html/settings.html. This file can be included
3
+ in your own settings page and add your settings to it!
4
+ -->
5
+
6
+ <!-- So they can be localized, much of this page is filled by JavaScript -->
7
+ <!-- Organization inspired by https://www.w3.org/WAI/tutorials/forms/grouping/ -->
8
+ <fieldset>
9
+ <legend id="font_legend">settings_font_legend</legend>
10
+ <div>
11
+ <label id="font_family_lbl" for="font_family">settings_font_family_label</label>
12
+ <select id="font_family"></select>
13
+ </div>
14
+ <div>
15
+ <label id="font_size_lbl" for="font_size">settings_font_size_label</label>
16
+ <select id="font_size">
17
+ </select>
18
+ </div>
19
+ </fieldset>
20
+
21
+ <fieldset>
22
+ <legend id="theme_legend">page_theme_legend</legend>
23
+ <div>
24
+ <label id="page_theme_lbl" for="page_theme">settings_theme_label</label>
25
+ <select id="page_theme"></select>
26
+ </div>
27
+ <div>
28
+ <label id="page_minimize_header_lbl" for="minimize_page_hdr">settings_minimize_header</label>
29
+ <input type="checkbox" id="minimize_page_hdr"/>
30
+ </div>
31
+ </fieldset>
32
+
33
+ <script type="module">
34
+ import Settings from "{{ 'assets/js/Settings.mjs' | relative_url }}";
35
+ import { stringLookup } from "{{ 'assets/js/strings.mjs' | relative_url }}";
36
+
37
+ let settingsTextElemIDs = [
38
+ `settings_header`, `settings_description`, `font_legend`,
39
+ `font_family_lbl`, `font_size_lbl`, `theme_legend`,
40
+ `page_theme_lbl`, `page_minimize_header_lbl`,
41
+ ];
42
+
43
+ // Localize all descriptive settings elements (each should contian the
44
+ // name of its localization key).
45
+ for (const id of settingsTextElemIDs) {
46
+ let elem = document.querySelector(`#${id}`);
47
+
48
+ if (elem) {
49
+ elem.innerText = stringLookup(elem.innerText);
50
+ }
51
+ }
52
+
53
+ let fontSizeSelect = document.querySelector("#font_size");
54
+ let fontFamilySelect = document.querySelector("#font_family");
55
+ let pageThemeSelect = document.querySelector("#page_theme");
56
+ let minimizeHeaderCheckbox = document.querySelector("#minimize_page_hdr");
57
+
58
+ pageThemeSelect.innerHTML =
59
+ `
60
+ <option value='${Settings.THEME_AUTO}'>${stringLookup('page_theme_auto')}</option>
61
+ <option value='${Settings.THEME_DARK}'>${stringLookup('page_theme_dark')}</option>
62
+ <option value='${Settings.THEME_LIGHT}'>${stringLookup('page_theme_light')}</option>
63
+ `;
64
+
65
+ fontFamilySelect.innerHTML =
66
+ `
67
+ <option value='${Settings.FONT_DEFAULT}'>${stringLookup('page_font_default')}</option>
68
+ <option value='${Settings.FONT_SERIF}'>${stringLookup('page_font_serif')}</option>
69
+ <option value='${Settings.FONT_SANS}'>${stringLookup('page_font_sans')}</option>
70
+ `;
71
+
72
+ fontSizeSelect.innerHTML =
73
+ `
74
+ <option value='${Settings.FONT_SIZE_DEFAULT}'>${stringLookup('page_font_default')}</option>
75
+ <option value='${Settings.FONT_SIZE_SMALL}'>${stringLookup('page_font_small')}</option>
76
+ <option value='${Settings.FONT_SIZE_MEDIUM}'>${stringLookup('page_font_medium')}</option>
77
+ <option value='${Settings.FONT_SIZE_LARGE}'>${stringLookup('page_font_large')}</option>
78
+ `;
79
+
80
+ fontSizeSelect.oninput = () => {
81
+ Settings.setFontSize(fontSizeSelect.value);
82
+ };
83
+
84
+ fontFamilySelect.oninput = () => {
85
+ Settings.setFontFamily(fontFamilySelect.value);
86
+ };
87
+
88
+ pageThemeSelect.oninput = () => {
89
+ Settings.setTheme(pageThemeSelect.value);
90
+ };
91
+
92
+ minimizeHeaderCheckbox.oninput = () => {
93
+ Settings.setHeaderMinimized(minimizeHeaderCheckbox.checked);
94
+ };
95
+
96
+ pageThemeSelect.value = Settings.getTheme();
97
+ fontFamilySelect.value = Settings.getFontFamily();
98
+ fontSizeSelect.value = Settings.getFontSize();
99
+ minimizeHeaderCheckbox.checked = Settings.getHeaderMinimized();
100
+
101
+ </script>
data/_sass/_nav.scss CHANGED
@@ -57,7 +57,7 @@ body > header {
57
57
 
58
58
  // The minimizedNavHeader class is added after page load. Make the
59
59
  // transition less jarring.
60
- animation: fade-in 0.5s ease 1;
60
+ animation: grow-in 0.5s ease 1;
61
61
  }
62
62
 
63
63
  :root.minimizedNavHeader.hasOpenSidebar body > header {
@@ -6,98 +6,7 @@ noindex: true
6
6
 
7
7
  <noscript>JavaScript is required to view this page's content!</noscript>
8
8
 
9
- <!-- So they can be localized, much of this page is filled by JavaScript -->
10
9
  <h1 id="settings_header">page_settings_header</h1>
11
10
  <p id="settings_description">page_settings_description</p>
12
11
 
13
- <!-- Organization inspired by https://www.w3.org/WAI/tutorials/forms/grouping/ -->
14
- <fieldset>
15
- <legend id="font_legend">settings_font_legend</legend>
16
- <div>
17
- <label id="font_family_lbl" for="font_family">settings_font_family_label</label>
18
- <select id="font_family"></select>
19
- </div>
20
- <div>
21
- <label id="font_size_lbl" for="font_size">settings_font_size_label</label>
22
- <select id="font_size">
23
- </select>
24
- </div>
25
- </fieldset>
26
-
27
- <fieldset>
28
- <legend id="theme_legend">page_theme_legend</legend>
29
- <div>
30
- <label id="page_theme_lbl" for="page_theme">settings_theme_label</label>
31
- <select id="page_theme"></select>
32
- </div>
33
- <div>
34
- <label id="page_minimize_header_lbl" for="minimize_page_hdr">settings_minimize_header</label>
35
- <input type="checkbox" id="minimize_page_hdr"/>
36
- </fieldset>
37
-
38
- <script type="module">
39
- import Settings from "{{ 'assets/js/Settings.mjs' | relative_url }}";
40
- import { stringLookup } from "{{ 'assets/js/strings.mjs' | relative_url }}";
41
-
42
- let settingsTextElemIDs = [
43
- `settings_header`, `settings_description`, `font_legend`,
44
- `font_family_lbl`, `font_size_lbl`, `theme_legend`,
45
- `page_theme_lbl`, `page_minimize_header_lbl`,
46
- ];
47
-
48
- // Localize all descriptive settings elements (each should contian the
49
- // name of its localization key).
50
- for (const id of settingsTextElemIDs) {
51
- let elem = document.querySelector(`#${id}`);
52
- elem.innerText = stringLookup(elem.innerText);
53
- }
54
-
55
- let fontSizeSelect = document.querySelector("#font_size");
56
- let fontFamilySelect = document.querySelector("#font_family");
57
- let pageThemeSelect = document.querySelector("#page_theme");
58
- let minimizeHeaderCheckbox = document.querySelector("#minimize_page_hdr");
59
-
60
- pageThemeSelect.innerHTML =
61
- `
62
- <option value='${Settings.THEME_AUTO}'>${stringLookup('page_theme_auto')}</option>
63
- <option value='${Settings.THEME_DARK}'>${stringLookup('page_theme_dark')}</option>
64
- <option value='${Settings.THEME_LIGHT}'>${stringLookup('page_theme_light')}</option>
65
- `;
66
-
67
- fontFamilySelect.innerHTML =
68
- `
69
- <option value='${Settings.FONT_DEFAULT}'>${stringLookup('page_font_default')}</option>
70
- <option value='${Settings.FONT_SERIF}'>${stringLookup('page_font_serif')}</option>
71
- <option value='${Settings.FONT_SANS}'>${stringLookup('page_font_sans')}</option>
72
- `;
73
-
74
- fontSizeSelect.innerHTML =
75
- `
76
- <option value='${Settings.FONT_SIZE_DEFAULT}'>${stringLookup('page_font_default')}</option>
77
- <option value='${Settings.FONT_SIZE_SMALL}'>${stringLookup('page_font_small')}</option>
78
- <option value='${Settings.FONT_SIZE_MEDIUM}'>${stringLookup('page_font_medium')}</option>
79
- <option value='${Settings.FONT_SIZE_LARGE}'>${stringLookup('page_font_large')}</option>
80
- `;
81
-
82
- fontSizeSelect.oninput = () => {
83
- Settings.setFontSize(fontSizeSelect.value);
84
- };
85
-
86
- fontFamilySelect.oninput = () => {
87
- Settings.setFontFamily(fontFamilySelect.value);
88
- };
89
-
90
- pageThemeSelect.oninput = () => {
91
- Settings.setTheme(pageThemeSelect.value);
92
- };
93
-
94
- minimizeHeaderCheckbox.oninput = () => {
95
- Settings.setHeaderMinimized(minimizeHeaderCheckbox.checked);
96
- };
97
-
98
- pageThemeSelect.value = Settings.getTheme();
99
- fontFamilySelect.value = Settings.getFontFamily();
100
- fontSizeSelect.value = Settings.getFontSize();
101
- minimizeHeaderCheckbox.checked = Settings.getHeaderMinimized();
102
-
103
- </script>
12
+ {% include settings.html %}
@@ -49,7 +49,8 @@ class Settings {
49
49
  }
50
50
 
51
51
  getHeaderMinimized() {
52
- let minimizedStr = this.getSetting_(this.HEADER_MINIMIZED_KEY_) ?? {{ site.hematite.minimize_header | default: "false" | jsonify }};
52
+ let minimizedStr = this.getSetting_(this.HEADER_MINIMIZED_KEY_)
53
+ ?? {{ site.hematite.user_config.minimize_header | default: site.hematite.minimize_header | default: "false" | jsonify }};
53
54
  return minimizedStr == "true";
54
55
  }
55
56
 
@@ -163,9 +164,10 @@ class Settings {
163
164
 
164
165
  document.documentElement.classList.add("minimizedNavHeader");
165
166
 
166
- // Animate the header.
167
167
  if (header) {
168
- await AnimationUtil.expandInVert(header, THEME_TRANSITION_TIME / 2);
168
+ // Re-show the header
169
+ // Rely on a CSS animation for animating the header's return.
170
+ await AnimationUtil.expandInVert(header, 0);
169
171
  }
170
172
  })();
171
173
  }
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: hematite
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.11
4
+ version: 0.0.12
5
5
  platform: ruby
6
6
  authors:
7
7
  - Henry Heino
@@ -43,6 +43,7 @@ files:
43
43
  - _includes/nav/pages_list.html
44
44
  - _includes/nav/pinned_page.html
45
45
  - _includes/nav/sidebar.html
46
+ - _includes/settings.html
46
47
  - _layouts/calendar.html
47
48
  - _layouts/default.html
48
49
  - _layouts/home.html