randogoth/kanban-todo.txt
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Show warning if Filesystem API missing.

Browse source
This commit is contained in:
Chris McCormick 2026-01-05 08:10:08 +08:00
parent e69faff782
commit dc448c0005
2 changed files with 24 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
TODO.md
View file

@ -8,13 +8,13 @@
## TODO ## TODO
- [ ] Warning colored note on home and about page if browser doesn't support FileSystem Access API.
- [ ] Display sub-lines of the form `key: value` immediately after item - [ ] Display sub-lines of the form `key: value` immediately after item
## Bugs ## Bugs
## Done ## Done
- [x] Warning colored note on home and about page if browser doesn't support FileSystem Access API.
- [x] Ability to delete an item, with confirmation. - [x] Ability to delete an item, with confirmation.
- [x] When the dots menu shows on a 'completed' item the stuff behind it shows through - [x] When the dots menu shows on a 'completed' item the stuff behind it shows through
- [x] Pressing + in a column and then cancel removes the button entirely - [x] Pressing + in a column and then cancel removes the button entirely

23
index.html
View file

@ -660,6 +660,13 @@
border-radius: var(--radius); border-radius: var(--radius);
} }
.warning {
background-color: #885500;
color: #ffa500;
padding: 0.5em 1em;
border-radius: var(--radius);
}
.modal { .modal {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
@ -812,6 +819,9 @@ chmod 755 kbtd
<li>CLI tool to launch as a Chrome app: <code>kbtd TODO.md</code></li> <li>CLI tool to launch as a Chrome app: <code>kbtd TODO.md</code></li>
<li>Two-way binding between UI and text file</li> <li>Two-way binding between UI and text file</li>
</ul> </ul>
<div id="api-warning" class="warning" style="display:none; max-width: 600px;">
⚠ Your browser does not support the FileSystem Access API. Chromium-based browsers (Chrome, Edge, etc.) are known to work.
</div>
<div class="project-name-form"> <div class="project-name-form">
<label for="project-name-input">Project name:</label> <label for="project-name-input">Project name:</label>
<div class="form-row"> <div class="form-row">
@ -915,6 +925,9 @@ chmod 755 kbtd
<li>Single HTML file - upload to self-host</li> <li>Single HTML file - upload to self-host</li>
<li>CLI tool to launch as a Chrome app: <code>kbtd TODO.md</code></li> <li>CLI tool to launch as a Chrome app: <code>kbtd TODO.md</code></li>
</ul> </ul>
<div id="about-api-warning" class="warning" style="display:none;">
⚠ Your browser does not support the FileSystem Access API. This app requires a Chromium-based browser (Chrome, Edge, etc.) to work.
</div>
<div id="about-instructions"></div> <div id="about-instructions"></div>
<p><a href="https://github.com/chr15m/kanban-todo" target="_blank">Source code for self-hosting</a></p> <p><a href="https://github.com/chr15m/kanban-todo" target="_blank">Source code for self-hosting</a></p>
<p>Copyright &copy; Chris McCormick 2025</p> <p>Copyright &copy; Chris McCormick 2025</p>
@ -961,6 +974,10 @@ chmod 755 kbtd
baseIndent: '' baseIndent: ''
}; };
function checkFileSystemAccessAPI() {
return 'showOpenFilePicker' in window;
}
function h(tag, props = {}, ...children) { function h(tag, props = {}, ...children) {
const el = document.createElement(tag); const el = document.createElement(tag);
for (const [k, v] of Object.entries(props)) { for (const [k, v] of Object.entries(props)) {
@ -2368,6 +2385,12 @@ chmod 755 kbtd
insertInstallInstructions('landing-instructions'); insertInstallInstructions('landing-instructions');
insertInstallInstructions('about-instructions'); insertInstallInstructions('about-instructions');
if (!checkFileSystemAccessAPI()) {
$('#api-warning').style.display = 'block';
$('#about-api-warning').style.display = 'block';
$('#open-file-btn').disabled = true;
}
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
state.filePath = params.get('file'); state.filePath = params.get('file');