Skip to content

Commit

Permalink
Rename to File System Access
Browse files Browse the repository at this point in the history
  • Loading branch information
petele committed Nov 12, 2020
1 parent 612041a commit e3a33c2
Show file tree
Hide file tree
Showing 7 changed files with 24 additions and 27 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# HTML5 Text Editor

A simple text editor designed to experiement with and demonstrate the
new Native File System APIs.
new File System Access APIs.

This is not an officially supported Google product.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "text-editor",
"description": "Text Editor - Demo for the HTML5 Native File System.",
"version": "0.0.12",
"description": "Text Editor - Demo for the HTML5 File System Access API.",
"version": "0.0.13",
"repository": {
"type": "git",
"url": "https://github.com/GoogleChromeLabs/text-editor.git"
Expand Down
2 changes: 1 addition & 1 deletion src/humans.txt
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,4 @@ Twitter: @petele

/* TECHNOLOGY COLOPHON */

HTML5, CSS3, Native File System APIs
HTML5, CSS3, File System Access APIs
19 changes: 8 additions & 11 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- SEO description and info -->
<meta name="description" content="Text Editor - Demo for the HTML5 Native File System.">
<meta name="description" content="Text Editor - Demo for the HTML5 File System Access.">
<link rel="canonical" href="https://googlechromelabs.github.io/text-editor/">

<!-- Manifest and icons -->
Expand All @@ -46,7 +46,7 @@
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://googlechromelabs.github.io/text-editor/">
<meta name="twitter:title" content="Text Editor">
<meta name="twitter:description" content="Text Editor - Demo for the HTML5 Native File System.">
<meta name="twitter:description" content="Text Editor - Demo for the HTML5 File System Access API.">
<meta name="twitter:image" content="./images/icon-192.png">
<meta name="twitter:creator" content="@petele">

Expand All @@ -55,7 +55,7 @@
<meta property="og:type" content="website">
<meta property="og:image" content="./images/icon-192.png">
<meta property="og:url" content="https://googlechromelabs.github.io/text-editor/">
<meta property="og:description" content="Text Editor - Demo for the HTML5 Native File System.">
<meta property="og:description" content="Text Editor - Demo for the HTML5 File System Access API.">

<!-- Analytics -->
<script src="/inline-scripts/analytics.js" inline></script>
Expand Down Expand Up @@ -169,20 +169,17 @@ <h1>
</summary>
<div id="not-supported">
The
<a href="https://wicg.github.io/native-file-system/" target="_blank">Native File System API</a>
<a href="https://wicg.github.io/file-system-access/" target="_blank">File System Access API</a>
is <b>not</b> supported in this browser yet, and Text Editor is running
in legacy mode. In legacy mode, the file modified indicators are not shown.
If you're running Chrome, you can enable the Native File System
APIs by enabling the <code>#native-file-system-api</code>
flag in <code>chrome://flags</code>.
</div>
<div>
Text Editor is a simple text editor similar to notepad that makes
it easy to edit text files on your local file system. It shows how
to easily use the new HTML5 Native File System APIs. To learn more
about the Native File System APIs and how this demo was built, check out
<a href="https://web.dev/native-file-system/" target="_blank">
The native file system APIs</a> article on Web Fundamentals, or see the
to easily use the new HTML5 File System Access APIs. To learn more
about the File System Access APIs and how this demo was built, check out
<a href="https://web.dev/file-system-access/" target="_blank">
The file system access APIs</a> article on Web Fundamentals, or see the
<a href="https://github.com/GoogleChromeLabs/text-editor/" target="_blank">
source code on GitHub</a>.
Written by <a href="https://twitter.com/petele" target="_blank">Pete LePage</a>.
Expand Down
20 changes: 10 additions & 10 deletions src/inline-scripts/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,15 @@ const app = {
monoSpace: false,
wordWrap: true,
},
hasNativeFS: 'chooseFileSystemEntries' in window ||
hasFSAccess: 'chooseFileSystemEntries' in window ||
'showOpenFilePicker' in window,
isMac: navigator.userAgent.includes('Mac OS X'),
};

// Verify the APIs we need are supported, show a polite warning if not.
if (app.hasNativeFS) {
if (app.hasFSAccess) {
document.getElementById('not-supported').classList.add('hidden');
gaEvent('File System APIs', 'Native');
gaEvent('File System APIs', 'FSAccess');
} else {
document.getElementById('lblLegacyFS').classList.toggle('hidden', false);
document.getElementById('butSave').classList.toggle('hidden', true);
Expand Down Expand Up @@ -73,8 +73,8 @@ app.openFile = async (fileHandle) => {
return;
}

// If the Native File System API is not supported, use the legacy file apis.
if (!app.hasNativeFS) {
// If the File System Access API is not supported, use the legacy file apis.
if (!app.hasFSAccess) {
gaEvent('FileAction', 'Open', 'Legacy');
const file = await app.getFileLegacy();
if (file) {
Expand All @@ -86,13 +86,13 @@ app.openFile = async (fileHandle) => {
// If a fileHandle is provided, verify we have permission to read/write it,
// otherwise, show the file open prompt and allow the user to select the file.
if (fileHandle) {
gaEvent('FileAction', 'OpenRecent', 'Native');
gaEvent('FileAction', 'OpenRecent', 'FSAccess');
if (await verifyPermission(fileHandle, true) === false) {
console.error(`User did not grant permission to '${fileHandle.name}'`);
return;
}
} else {
gaEvent('FileAction', 'Open', 'Native');
gaEvent('FileAction', 'Open', 'FSAccess');
try {
fileHandle = await getFileHandle();
} catch (ex) {
Expand Down Expand Up @@ -157,13 +157,13 @@ app.saveFile = async () => {
* Saves a new file to disk.
*/
app.saveFileAs = async () => {
if (!app.hasNativeFS) {
if (!app.hasFSAccess) {
gaEvent('FileAction', 'Save As', 'Legacy');
app.saveAsLegacy(app.file.name, app.getText());
app.setFocus();
return;
}
gaEvent('FileAction', 'Save As', 'Native');
gaEvent('FileAction', 'Save As', 'FSAccess');
let fileHandle;
try {
fileHandle = await getNewFileHandle();
Expand All @@ -186,7 +186,7 @@ app.saveFileAs = async () => {
const msg = 'Unable to save file.';
console.error(msg, ex);
alert(msg);
gaEvent('Error', 'Unable to write file', 'Native');
gaEvent('Error', 'Unable to write file', 'FSAccess');
return;
}
app.setFocus();
Expand Down
2 changes: 1 addition & 1 deletion src/inline-scripts/ui.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
* @param {boolean} val True if the file has been modified.
*/
app.setModified = (val) => {
if (!app.hasNativeFS) {
if (!app.hasFSAccess) {
return;
}
app.file.isModified = val;
Expand Down
2 changes: 1 addition & 1 deletion src/manifest.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "Text Editor",
"short_name": "TextEdit",
"description": "Text Editor - Demo for the HTML5 Native File System.",
"description": "Text Editor - Demo for the HTML5 File System Access API.",
"start_url": "./",
"display": "standalone",
"theme_color": "#1a237e",
Expand Down

0 comments on commit e3a33c2

Please sign in to comment.