implement theme switching (F2); theme saving
Hunter
Tuesday, August 6th, 2024 at 7:03 PM
1 +Copyright (c) 2011, wmk69 (wmk69@o2.pl),
2 +with Reserved Font Name MedievalSharp.
3 +
4 +This Font Software is licensed under the SIL Open Font License, Version 1.1.
5 +This license is copied below, and is also available with a FAQ at:
6 +https://openfontlicense.org
7 +
8 +
9 +-----------------------------------------------------------
10 +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
11 +-----------------------------------------------------------
12 +
13 +PREAMBLE
14 +The goals of the Open Font License (OFL) are to stimulate worldwide
15 +development of collaborative font projects, to support the font creation
16 +efforts of academic and linguistic communities, and to provide a free and
17 +open framework in which fonts may be shared and improved in partnership
18 +with others.
19 +
20 +The OFL allows the licensed fonts to be used, studied, modified and
21 +redistributed freely as long as they are not sold by themselves. The
22 +fonts, including any derivative works, can be bundled, embedded,
23 +redistributed and/or sold with any software provided that any reserved
24 +names are not used by derivative works. The fonts and derivatives,
25 +however, cannot be released under any other type of license. The
26 +requirement for fonts to remain under this license does not apply
27 +to any document created using the fonts or their derivatives.
28 +
29 +DEFINITIONS
30 +"Font Software" refers to the set of files released by the Copyright
31 +Holder(s) under this license and clearly marked as such. This may
32 +include source files, build scripts and documentation.
33 +
34 +"Reserved Font Name" refers to any names specified as such after the
35 +copyright statement(s).
36 +
37 +"Original Version" refers to the collection of Font Software components as
38 +distributed by the Copyright Holder(s).
39 +
40 +"Modified Version" refers to any derivative made by adding to, deleting,
41 +or substituting -- in part or in whole -- any of the components of the
42 +Original Version, by changing formats or by porting the Font Software to a
43 +new environment.
44 +
45 +"Author" refers to any designer, engineer, programmer, technical
46 +writer or other person who contributed to the Font Software.
47 +
48 +PERMISSION & CONDITIONS
49 +Permission is hereby granted, free of charge, to any person obtaining
50 +a copy of the Font Software, to use, study, copy, merge, embed, modify,
51 +redistribute, and sell modified and unmodified copies of the Font
52 +Software, subject to the following conditions:
53 +
54 +1) Neither the Font Software nor any of its individual components,
55 +in Original or Modified Versions, may be sold by itself.
56 +
57 +2) Original or Modified Versions of the Font Software may be bundled,
58 +redistributed and/or sold with any software, provided that each copy
59 +contains the above copyright notice and this license. These can be
60 +included either as stand-alone text files, human-readable headers or
61 +in the appropriate machine-readable metadata fields within text or
62 +binary files as long as those fields can be easily viewed by the user.
63 +
64 +3) No Modified Version of the Font Software may use the Reserved Font
65 +Name(s) unless explicit written permission is granted by the corresponding
66 +Copyright Holder. This restriction only applies to the primary font name as
67 +presented to the users.
68 +
69 +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
70 +Software shall not be used to promote, endorse or advertise any
71 +Modified Version, except to acknowledge the contribution(s) of the
72 +Copyright Holder(s) and the Author(s) or with their explicit written
73 +permission.
74 +
75 +5) The Font Software, modified or unmodified, in part or in whole,
76 +must be distributed entirely under this license, and must not be
77 +distributed under any other license. The requirement for fonts to
78 +remain under this license does not apply to any document created
79 +using the Font Software.
80 +
81 +TERMINATION
82 +This license becomes null and void if any of the above conditions are
83 +not met.
84 +
85 +DISCLAIMER
86 +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
87 +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
88 +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
89 +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
90 +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
91 +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
92 +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
93 +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
94 +OTHER DEALINGS IN THE FONT SOFTWARE.
1 <!DOCTYPE html>
-<html lang="en" data-theme="medieval"> <!-- update to change theme -->
2 +<html lang="en" data-theme="gak"> <!-- update to change default theme -->
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
6 +
7 <!-- favicon -->
8 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🪆</text></svg>">
9
30 --chlorophyll: #5aa83b;
31 --terracotta: #b15c2e;
32
- --wheat: #D2C3A3;
- --earth: #4A3C31;
33 + --wheat: #d2c3a3;
34 + --earth: #4a3c31;
35 --pumpkin: #cb7c52;
- --tobacco: #7D6C55;
36 + --tobacco: #7d6c55;
37
- --forest: #20302f;
- --goat-milk:#d8d3c9;
38 + --moss: #20302f;
39 + --goat-milk: #d8d3c9;
40 --burl: #231f20;
41 --flame: #c63728;
42
72 --accent: var(--tobacco);
73 }
74
- [data-theme="medieval"] {
- --background: var(--forest);
75 + :root[data-theme="medieval"] {
76 + --background: var(--moss);
77 --text: var(--goat-milk);
78 --highlight: var(--burl);
79 --accent: var(--flame);
202 });
203 document.addEventListener('DOMContentLoaded', function() {
204 const appContainer = document.getElementById('app-container');
- let rootTask = loadFromLocalStorage();
205 + let rootTask = loadTasksFromLocalStorage();
206 let currentTask = rootTask;
207 let taskPath = [currentTask];
208 let lastSubtaskDownArrowReleased = false;
209 let saveTimer = null;
210 + let currentThemeIndex = 0;
211 + let isF2Pressed = false;
212 + let themes = [];
213
214 function scheduleSave() {
215 if (saveTimer) {
216 clearTimeout(saveTimer);
217 }
- saveTimer = setTimeout(saveToLocalStorage, 1000);
218 + saveTimer = setTimeout(saveTasksToLocalStorage, 1000);
219 }
220
- function saveToLocalStorage() {
221 + function saveTasksToLocalStorage() {
222 const serializedTasks = serializeTaskTree(taskPath[0]);
223 localStorage.setItem('taskTree', serializedTasks);
224 saveTimer = null;
236 return serialized;
237 }
238
- function loadFromLocalStorage() {
239 + function loadTasksFromLocalStorage() {
240 const savedTasks = localStorage.getItem('taskTree');
241 if (savedTasks) {
242 return deserializeTaskTree(savedTasks);
475 selectAndFocusTask(task);
476 scheduleSave();
477 } else {
- // Animate the checkbox
478 + // disallow unchecking and play a 'shake' animation
479 const checkbox = document.querySelector(`.task-container[data-id="${task.id}"] .checkbox-label`);
480 if (checkbox) {
481 checkbox.classList.add('shake');
868 return parentTask.subtasks[parentTask.subtasks.length - 1].id === task.id;
869 }
870
871 + function getThemesFromCSS() {
872 + const styleElement = document.querySelector('style');
873 + if (styleElement && styleElement.textContent) {
874 + const cssText = styleElement.textContent;
875 + const themeRegex = /:root\[data-theme="([^"]+)"\]/g;
876 + let match;
877 + while ((match = themeRegex.exec(cssText)) !== null) {
878 + themes.push(match[1]);
879 + }
880 + }
881 + }
882 +
883 + function cycleTheme() {
884 + currentThemeIndex = (currentThemeIndex + 1) % themes.length;
885 + const newTheme = themes[currentThemeIndex];
886 + document.documentElement.setAttribute('data-theme', newTheme);
887 + saveThemeToLocalStorage(newTheme);
888 + }
889 +
890 + function saveThemeToLocalStorage(theme) {
891 + localStorage.setItem('currentTheme', theme);
892 + }
893 +
894 + function setInitialTheme() {
895 + const savedTheme = localStorage.getItem('currentTheme');
896 + const defaultTheme = document.documentElement.getAttribute('data-theme');
897 +
898 + if (savedTheme && themes.includes(savedTheme)) {
899 + currentThemeIndex = themes.indexOf(savedTheme);
900 + } else if (themes.includes(defaultTheme)) {
901 + currentThemeIndex = themes.indexOf(defaultTheme);
902 + } else {
903 + currentThemeIndex = 0;
904 + }
905 +
906 + document.documentElement.setAttribute('data-theme', themes[currentThemeIndex]);
907 + }
908 +
909 + document.addEventListener('keydown', function(event) {
910 + if (event.key === 'F2' && !isF2Pressed) {
911 + event.preventDefault();
912 + isF2Pressed = true;
913 + cycleTheme();
914 + }
915 + });
916 +
917 + document.addEventListener('keyup', function(event) {
918 + if (event.key === 'F2') {
919 + isF2Pressed = false;
920 + }
921 + });
922 +
923 + getThemesFromCSS();
924 + setInitialTheme();
925 renderCurrentView();
926 selectFirstSubtask();
927 });
Binary files differ.
40 - `Command/Ctrl + Z` undo text edit
41 - `Command/Ctrl + Shift + Z` redo text edit
42
43 +## themes
44 +Press `F2` to cycle through available themes.
45 +
46 +To create a new theme, add a CSS rule set with the following form to the `<style>` tag in index.html:
47 +
48 +```css
49 +:root[data-theme="sunflower"] {
50 + --background: var(--pollen);
51 + --text: var(--loam);
52 + --highlight: var(--chlorophyll);
53 + --accent: var(--terracotta);
54 +}
55 +```
56 +
57 +You can also use themes to set custom fonts, etc:
58 +
59 +``` css
60 +:root[data-theme="medieval"] {
61 + --background: var(--moss);
62 + --text: var(--goat-milk);
63 + --highlight: var(--burl);
64 + --accent: var(--flame);
65 + & input[type="text"] {
66 + font-family: 'MedievalSharp';
67 + src: url('MedievalSharp-Regular.ttf') format('truetype');
68 + }
69 +}
70 +```
71 +
72 +You can add named colors to the `:root` selector at the top of the `<style>` tag:
73 +
74 +```css
75 +:root {
76 + --pollen: #f4a127;
77 + --loam: #5a352b;
78 + --chlorophyll: #5aa83b;
79 + --terracotta: #b15c2e;
80 +
81 + --wheat: #d2c3a3;
82 + --earth: #4a3c31;
83 + --pumpkin: #cb7c52;
84 + --tobacco: #7d6c55;
85 +
86 + --moss: #20302f;
87 + --goat-milk: #d8d3c9;
88 + --burl: #231f20;
89 + --flame: #c63728;
90 +
91 + .
92 + .
93 + .
94 +}
95 +```
96 +
97 ## data persistence
98 your task tree is automatically saved to your browser's local storage. this ensures your tasks will persist even if you close the browser or refresh the page. note that clearing your browser data may erase your saved tasks.
99
103 ## privacy
104 all data is stored locally on your machine. no data is sent to or stored on any external servers.
105
-## license
-this project is licensed under the <a href="https://github.com/hunterirving/matryoshka/blob/main/LICENSE">GNU general public license v3.0</a>.
106 +## licenses
107 +this project is licensed under the <a href="https://github.com/hunterirving/matryoshka/blob/main/LICENSE">GNU General Public License v3.0</a>.
108 +
109 +the Medieval Sharp font by <a href="http://www.identifont.com/show?3DQU">Wojciech Kalinowski</a> is licensed under the <a href="https://github.com/hunterirving/matryoshka/blob/main/OFL.txt">SIL Open Font License, version 1.1</a>.