From 5d9b9d9a219a983f8f2673d74b2050ede4ccba97 Mon Sep 17 00:00:00 2001
From: SheetJS <dev@sheetjs.com>
Date: Wed, 3 Aug 2022 03:42:37 -0400
Subject: [PATCH] nwjs

---
 .../{05-salesforce.md => 01-salesforce.md}    |   2 +-
 .../03-demos/02-extendscript.md               |   2 +-
 .../{10-database.md => 03-database.md}        |   2 +-
 .../03-demos/04-netsuite.md                   |   2 +-
 .../03-demos/{01-gsheet.md => 05-gsheet.md}   |   2 +-
 .../03-demos/{03-excel.md => 10-excel.md}     |   2 +-
 .../03-demos/15-chromium.md                   |   2 +-
 .../04-getting-started/03-demos/16-desktop.md | 128 ++++++++++++++++++
 .../docs/04-getting-started/03-demos/index.md |   2 +-
 docz/static/nwjs/index.html                   | 110 +++++++++++++++
 10 files changed, 246 insertions(+), 8 deletions(-)
 rename docz/docs/04-getting-started/03-demos/{05-salesforce.md => 01-salesforce.md} (99%)
 rename docz/docs/04-getting-started/03-demos/{10-database.md => 03-database.md} (99%)
 rename docz/docs/04-getting-started/03-demos/{01-gsheet.md => 05-gsheet.md} (96%)
 rename docz/docs/04-getting-started/03-demos/{03-excel.md => 10-excel.md} (96%)
 create mode 100644 docz/docs/04-getting-started/03-demos/16-desktop.md
 create mode 100644 docz/static/nwjs/index.html

diff --git a/docz/docs/04-getting-started/03-demos/05-salesforce.md b/docz/docs/04-getting-started/03-demos/01-salesforce.md
similarity index 99%
rename from docz/docs/04-getting-started/03-demos/05-salesforce.md
rename to docz/docs/04-getting-started/03-demos/01-salesforce.md
index 84e9c12..58935fa 100644
--- a/docz/docs/04-getting-started/03-demos/05-salesforce.md
+++ b/docz/docs/04-getting-started/03-demos/01-salesforce.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 1
 ---
 
 # Salesforce LWC
diff --git a/docz/docs/04-getting-started/03-demos/02-extendscript.md b/docz/docs/04-getting-started/03-demos/02-extendscript.md
index c12764d..9bedc6a 100644
--- a/docz/docs/04-getting-started/03-demos/02-extendscript.md
+++ b/docz/docs/04-getting-started/03-demos/02-extendscript.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 2
 ---
 
 # Adobe Apps
diff --git a/docz/docs/04-getting-started/03-demos/10-database.md b/docz/docs/04-getting-started/03-demos/03-database.md
similarity index 99%
rename from docz/docs/04-getting-started/03-demos/10-database.md
rename to docz/docs/04-getting-started/03-demos/03-database.md
index 0058705..a2a669b 100644
--- a/docz/docs/04-getting-started/03-demos/10-database.md
+++ b/docz/docs/04-getting-started/03-demos/03-database.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 10
+sidebar_position: 3
 title: Databases and SQL
 ---
 
diff --git a/docz/docs/04-getting-started/03-demos/04-netsuite.md b/docz/docs/04-getting-started/03-demos/04-netsuite.md
index a4b31e3..f5c14d6 100644
--- a/docz/docs/04-getting-started/03-demos/04-netsuite.md
+++ b/docz/docs/04-getting-started/03-demos/04-netsuite.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 4
 ---
 
 # NetSuite
diff --git a/docz/docs/04-getting-started/03-demos/01-gsheet.md b/docz/docs/04-getting-started/03-demos/05-gsheet.md
similarity index 96%
rename from docz/docs/04-getting-started/03-demos/01-gsheet.md
rename to docz/docs/04-getting-started/03-demos/05-gsheet.md
index 563a466..8dab456 100644
--- a/docz/docs/04-getting-started/03-demos/01-gsheet.md
+++ b/docz/docs/04-getting-started/03-demos/05-gsheet.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 5
 ---
 
 # Google Sheets
diff --git a/docz/docs/04-getting-started/03-demos/03-excel.md b/docz/docs/04-getting-started/03-demos/10-excel.md
similarity index 96%
rename from docz/docs/04-getting-started/03-demos/03-excel.md
rename to docz/docs/04-getting-started/03-demos/10-excel.md
index 1da8041..0598f91 100644
--- a/docz/docs/04-getting-started/03-demos/03-excel.md
+++ b/docz/docs/04-getting-started/03-demos/10-excel.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 10
 ---
 
 # Excel JavaScript API
diff --git a/docz/docs/04-getting-started/03-demos/15-chromium.md b/docz/docs/04-getting-started/03-demos/15-chromium.md
index 1759fd6..db9d34d 100644
--- a/docz/docs/04-getting-started/03-demos/15-chromium.md
+++ b/docz/docs/04-getting-started/03-demos/15-chromium.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 14
+sidebar_position: 15
 title: Chrome and Chromium
 ---
 
diff --git a/docz/docs/04-getting-started/03-demos/16-desktop.md b/docz/docs/04-getting-started/03-demos/16-desktop.md
new file mode 100644
index 0000000..dbe31b0
--- /dev/null
+++ b/docz/docs/04-getting-started/03-demos/16-desktop.md
@@ -0,0 +1,128 @@
+---
+sidebar_position: 16
+title: Desktop Applications
+---
+
+Web technologies like JavaScript and HTML have been adapted to the traditional
+app space.  Typically these frameworks bundle a JavaScript engine as well as a
+windowing framework. SheetJS is compatible with many toolkits.
+
+## NW.js
+
+The [Standalone scripts](../../installation/standalone) can be referenced in a
+`SCRIPT` tag from the entry point HTML page.
+
+This demo was tested against NW.js 0.66.0.
+
+<details><summary><b>Complete Example</b> (click to show)</summary>
+
+1) Create a `package.json` file that specifies the entry point:
+
+```json title="package.json"
+{
+  "name": "sheetjs-nwjs",
+  "author": "sheetjs",
+  "version": "0.0.0",
+  "main": "index.html",
+  "dependencies": {
+    "nw": "~0.66.0",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz"
+  }
+}
+```
+
+2) Download [`index.html`](pathname:///nwjs/index.html) into the same folder.
+
+:::caution
+
+Right-click the link and select "Save Link As...".  Left-clicking the link will
+try to load the page in your browser.  The goal is to save the file contents.
+
+:::
+
+3) Run `npm install` to install dependencies
+
+4) To verify the app works, run in the test environment:
+
+```
+npx nw .
+```
+
+The app will show and you should be able to verify reading and writing by using
+the file input element to select a spreadsheet and clicking the export button.
+
+5) To build a standalone app, run the builder:
+
+```
+npx -p nw-builder nwbuild --mode=build .
+```
+
+This will generate the standalone app in the `build\sheetjs-nwjs\` folder.
+
+</details>
+
+### Reading data
+
+The standard HTML5 `FileReader` techniques from the browser apply to NW.js!
+
+NW.js handles the OS minutiae for dragging files into app windows.  The
+[drag and drop snippet](../../solutions/input#example-user-submissions) apply
+to DIV elements on the page.
+
+Similarly, file input elements automatically map to standard Web APIs.
+
+For example, assuming a file input element on the page:
+
+```html
+<input type="file" name="xlfile" id="xlf" /> 
+```
+
+The event handler would process the event as if it were a web event:
+
+```js
+async function handleFile(e) {
+  const file = e.target.files[0];
+  const data = await file.arrayBuffer();
+  /* data is an ArrayBuffer */
+  const workbook = XLSX.read(data);
+
+  /* DO SOMETHING WITH workbook HERE */
+}
+document.getElementById("xlf").addEventListener("change", handleFile, false);
+```
+
+### Writing data
+
+File input elements with the attribute `nwsaveas` show UI for saving a file. The
+standard trick is to generate a hidden file input DOM element and "click" it.
+Since NW.js does not present a `writeFileSync` in the `fs` package, a manual
+step is required:
+
+```js
+/* pre-build the hidden nwsaveas input element */
+var input = document.createElement('input');
+input.style.display = 'none';
+input.setAttribute('nwsaveas', 'SheetJSNWDemo.xlsx');
+input.setAttribute('type', 'file');
+document.body.appendChild(input);
+
+/* show a message if the save is canceled */
+input.addEventListener('cancel',function(){ alert("Save was canceled!"); });
+
+/* write to a file on the 'change' event */
+input.addEventListener('change',function(e){
+  /* the `value` is the path that the program will write */
+  var filename = this.value;
+
+  /* use XLSX.write with type "buffer" to generate a buffer" */
+  /* highlight-next-line */
+  var wbout = XLSX.write(workbook, {type:'buffer', bookType:"xlsx"});
+  /* highlight-next-line */
+  fs.writeFile(filename, wbout, function(err) {
+    if(!err) return alert("Saved to " + filename);
+    alert("Error: " + (err.message || err));
+  });
+});
+
+input.click();
+```
diff --git a/docz/docs/04-getting-started/03-demos/index.md b/docz/docs/04-getting-started/03-demos/index.md
index 90a85dd..855bbd5 100644
--- a/docz/docs/04-getting-started/03-demos/index.md
+++ b/docz/docs/04-getting-started/03-demos/index.md
@@ -38,7 +38,7 @@ The demo projects include small runnable examples and short explainers.
 - [`Command-Line Tools`](./cli)
 - [`NodeJS Server-Side Processing`](https://github.com/SheetJS/SheetJS/tree/master/demos/server/)
 - [`Electron`](https://github.com/SheetJS/SheetJS/tree/master/demos/electron/)
-- [`NW.js`](https://github.com/SheetJS/SheetJS/tree/master/demos/nwjs/)
+- [`NW.js`](./desktop#nwjs)
 - [`Chrome / Chromium Extension`](./chromium)
 - [`Google Sheets API`](./gsheet)
 - [`ExtendScript for Adobe Apps`](./extendscript)
diff --git a/docz/static/nwjs/index.html b/docz/static/nwjs/index.html
new file mode 100644
index 0000000..d2909c4
--- /dev/null
+++ b/docz/static/nwjs/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<!-- sheetjs (C) 2013-present  SheetJS http://sheetjs.com -->
+<!-- vim: set ts=2: -->
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>SheetJS NW.js Demo</title>
+<style>
+#drop{
+  border:2px dashed #bbb;
+  -moz-border-radius:5px;
+  -webkit-border-radius:5px;
+  border-radius:5px;
+  padding:25px;
+  text-align:center;
+  font:20pt bold,"Vollkorn";color:#bbb
+}
+a { text-decoration: none }
+</style>
+</head>
+<body>
+<pre>
+<b><a href="https://sheetjs.com">SheetJS NW.js Demo</a></b>
+<br />
+<div id="drop">Drop a spreadsheet file here to see sheet data</div>
+<input type="file" name="xlfile" id="xlf" /> ... or click here to select a file
+
+</pre>
+<p><input type="submit" value="Export Data!" id="xport" onclick="export_xlsx();" disabled="true"></p>
+<div id="htmlout"></div>
+<br />
+<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
+<script>
+var fs = require('fs');
+
+var process_wb = (function() {
+  var HTMLOUT = document.getElementById('htmlout');
+  var XPORT = document.getElementById('xport');
+
+  return function process_wb(wb) {
+    XPORT.disabled = false;
+    HTMLOUT.innerHTML = "";
+    wb.SheetNames.forEach(function(sheetName) {
+      var htmlstr = XLSX.utils.sheet_to_html(wb.Sheets[sheetName],{editable:true});
+      HTMLOUT.innerHTML += htmlstr;
+    });
+  };
+})();
+
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-36810333-1']);
+_gaq.push(['_trackPageview']);
+
+(function() {
+  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+
+async function do_file(files) {
+  var file = files[0];
+  var data = await file.arrayBuffer();
+  process_wb(XLSX.read(data));
+}
+
+var drop = document.getElementById('drop');
+
+function handleDrop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+  do_file(e.dataTransfer.files);
+}
+
+function handleDragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+  e.dataTransfer.dropEffect = 'copy';
+}
+
+drop.addEventListener('dragenter', handleDragover, false);
+drop.addEventListener('dragover', handleDragover, false);
+drop.addEventListener('drop', handleDrop, false);
+
+var xlf = document.getElementById('xlf');
+function handleFile(e) { do_file(e.target.files); }
+xlf.addEventListener('change', handleFile, false);
+
+var export_xlsx = (function() {
+  var HTMLOUT = document.getElementById('htmlout');
+  var input = document.createElement('input');
+  input.style.display = 'none';
+  input.setAttribute('nwsaveas', 'SheetJSNWDemo.xlsx');
+  input.setAttribute('type', 'file');
+  document.body.appendChild(input);
+  input.addEventListener('cancel',function(){ alert("Save was canceled!"); });
+  input.addEventListener('change',function(e){
+    var filename=this.value, bookType=(filename.match(/[^\.]*$/)||["xlsx"])[0];
+    var wb = XLSX.utils.table_to_book(HTMLOUT.getElementsByTagName("TABLE")[0]);
+    var wbout = XLSX.write(wb, {type:'buffer', bookType:bookType});
+    fs.writeFile(filename, wbout, function(err) {
+      if(!err) return alert("Saved to " + filename);
+      alert("Error: " + (err.message || err));
+    });
+  });
+
+  return function() { input.click(); };
+})();
+</script>
+</body>
+</html>