x-spreadsheet demo

2020-03-22 21:57:53 -04:00 · 2020-03-22 21:57:53 -04:00 · 3468395494
commit 3468395494
parent 548396f87d
13 changed files with 302 additions and 5 deletions
--- a/README.md
+++ b/README.md
@ -215,6 +215,7 @@ The [`demos` directory](demos/) includes sample projects for:
 - [`Adobe ExtendScript`](demos/extendscript/)
 - [`Headless Browsers`](demos/headless/)
 - [`canvas-datagrid`](demos/datagrid/)
+- [`x-spreadsheet`](demos/xspreadsheet/)
 - [`Swift JSC and other engines`](demos/altjs/)
 - [`"serverless" functions`](demos/function/)
 - [`internet explorer`](demos/oldie/)
--- a/bits/75_xlml.js
+++ b/bits/75_xlml.js
@ -785,7 +785,7 @@ function parse_xlml_xml(d, _opts)/*:Workbook*/ {

 				case 'datavalidation' /*case 'DataValidation'*/:
 				switch(Rn[3]) {
-					case 'range' /*case 'Range'*/: dval.ref = Rn; break;
+					case 'range' /*case 'Range'*/: break;

 					case 'type' /*case 'Type'*/: break;
 					case 'min' /*case 'Min'*/: break;
--- a/demos/README.md
+++ b/demos/README.md
@ -46,6 +46,7 @@ can be installed with Bash on Windows or with `cygwin`.
 - [`Adobe ExtendScript`](extendscript/)
 - [`Headless Browsers`](headless/)
 - [`canvas-datagrid`](datagrid/)
+- [`x-spreadsheet`](xspreadsheet/)
 - [`Swift JSC and other engines`](altjs/)
 - [`"serverless" functions`](function/)
 - [`internet explorer`](oldie/)
--- a/demos/xspreadsheet/README.md
+++ b/demos/xspreadsheet/README.md
@ -0,0 +1,100 @@
+# x-spreadsheet
+
+The `sheet_to_json` utility function generates output arrays suitable for use
+with other JS libraries such as data grids for previewing data.  With a familiar
+UI, [`x-spreadsheet`](https://myliang.github.io/x-spreadsheet/) is an excellent
+choice for developers looking for a modern editor.
+
+This demo is available at <https://oss.sheetjs.com/sheetjs/x-spreadsheet.html>
+
+## Obtaining the Library
+
+The [`x-data-spreadsheet` module](http://npm.im/x-data-spreadsheet) includes a
+minified script `dist/xspreadsheet.js` that can be directly inserted as a script
+tag.  The unpkg CDN also exposes the latest version:
+
+```html
+<script src="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.js"></script>
+```
+
+## Previewing Data
+
+The HTML document needs a container element:
+
+```html
+<div id="gridctr"></div>
+```
+
+Grid initialization is a one-liner:
+
+```js
+/* note that the browser build exposes the variable `x` */
+var grid = x.spreadsheet(document.getElementById("gridctr"));
+```
+
+The following function converts data from SheetJS to x-spreadsheet:
+
+```js
+function stox(wb) {
+  var out = [];
+  wb.SheetNames.forEach(function(name) {
+    var o = {name:name, rows:{}};
+    var ws = wb.Sheets[name];
+    var aoa = XLSX.utils.sheet_to_json(ws, {raw: false, header:1});
+    aoa.forEach(function(r, i) {
+      var cells = {};
+      r.forEach(function(c, j) { cells[j] = ({ text: c }); });
+      o.rows[i] = { cells: cells };
+    })
+    out.push(o);
+  });
+  return out;
+}
+
+/* load data */
+grid.loadData(stox(workbook_object));
+```
+
+## Editing
+
+`x-spreadsheet` handles the entire edit cycle.  No intervention is necessary.
+
+## Saving Data
+
+`grid.getData()` returns an object that can be converted back to a worksheet:
+
+```js
+function xtos(sdata) {
+  var out = XLSX.utils.book_new();
+  sdata.forEach(function(xws) {
+    var aoa = [[]];
+    var rowobj = xws.rows;
+    for(var ri = 0; ri < rowobj.len; ++ri) {
+      var row = rowobj[ri];
+      if(!row) continue;
+      aoa[ri] = [];
+      Object.keys(row.cells).forEach(function(k) {
+        var idx = +k;
+        if(isNaN(idx)) return;
+        aoa[ri][idx] = row.cells[k].text;
+      });
+    }
+    var ws = XLSX.utils.aoa_to_sheet(aoa);
+    XLSX.utils.book_append_sheet(out, ws, xws.name);
+  });
+  return out;
+}
+
+/* build workbook from the grid data */
+var new_wb = xtos(xspr.getData());
+
+/* generate download */
+XLSX.writeFile(new_wb, "SheetJS.xlsx");
+```
+
+## Additional Features
+
+This demo barely scratches the surface.  The underlying grid component includes
+many additional features that work with [SheetJS Pro](https://sheetjs.com/pro).
+
+[![Analytics](https://ga-beacon.appspot.com/UA-36810333-1/SheetJS/js-xlsx?pixel)](https://github.com/SheetJS/js-xlsx)
--- a/demos/xspreadsheet/index.html
+++ b/demos/xspreadsheet/index.html
@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<!-- xlsx.js (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 + x-spreadsheet Live 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
+}
+#b64data{
+	width:100%;
+}
+a { text-decoration: none }
+</style>
+<!-- x-spreadsheet stylesheet -->
+<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.css"/>
+</head>
+<body>
+<pre>
+<b><a href="http://sheetjs.com">SheetJS Data Preview Live Demo</a></b>
+
+<a href="https://github.com/myliang/x-spreadsheet">x-spreadsheet component library</a>
+
+<a href="https://github.com/SheetJS/sheetjs">Source Code Repo</a>
+<a href="https://github.com/SheetJS/sheetjs/issues">Issues?  Something look weird?  Click here and report an issue</a>
+
+<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
+<textarea id="b64data">... or paste a base64-encoding here</textarea>
+<b>Advanced Demo Options:</b>
+Use readAsBinaryString: (when available) <input type="checkbox" name="userabs" checked>
+</pre>
+<p><input type="submit" value="Export to XLSX!" id="xport" onclick="export_xlsx();" disabled="true"></p>
+<div id="htmlout"></div>
+<br />
+<script src="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.js"></script>
+<script src="shim.js"></script>
+<script src="xlsx.full.min.js"></script>
+<script>
+/*jshint browser:true */
+/* eslint-env browser */
+/* eslint no-use-before-define:0 */
+/*global Uint8Array, Uint16Array, ArrayBuffer */
+/*global XLSX */
+
+var HTMLOUT = document.getElementById('htmlout');
+var xspr = x.spreadsheet(HTMLOUT);
+HTMLOUT.style.height = (window.innerHeight - 400) + "px";
+HTMLOUT.style.width = (window.innerWidth - 50) + "px";
+
+function stox(wb) {
+	var out = [];
+	wb.SheetNames.forEach(function(name) {
+		var o = {name:name, rows:{}};
+		var ws = wb.Sheets[name];
+		var aoa = XLSX.utils.sheet_to_json(ws, {raw: false, header:1});
+		aoa.forEach(function(r, i) {
+			var cells = {};
+			r.forEach(function(c, j) { cells[j] = ({ text: c }); });
+			o.rows[i] = { cells: cells };
+		})
+		out.push(o);
+	});
+	return out;
+}
+
+function xtos(sdata) {
+	var out = XLSX.utils.book_new();
+	sdata.forEach(function(xws) {
+		var aoa = [[]];
+		var rowobj = xws.rows;
+		for(var ri = 0; ri < rowobj.len; ++ri) {
+			var row = rowobj[ri];
+			if(!row) continue;
+			aoa[ri] = [];
+			Object.keys(row.cells).forEach(function(k) {
+				var idx = +k;
+				if(isNaN(idx)) return;
+				aoa[ri][idx] = row.cells[k].text;
+			});
+		}
+		var ws = XLSX.utils.aoa_to_sheet(aoa);
+		XLSX.utils.book_append_sheet(out, ws, xws.name);
+	});
+	return out;
+}
+
+var process_wb = (function() {
+	var XPORT = document.getElementById('xport');
+
+	return function process_wb(wb) {
+		/* convert to x-spreadsheet form */
+		var data = stox(wb);
+
+		/* update x-spreadsheet */
+		xspr.loadData(data);
+		XPORT.disabled = false;
+
+		if(typeof console !== 'undefined') console.log("output", new Date());
+	};
+})();
+
+var do_file = (function() {
+	var rABS = typeof FileReader !== "undefined" && (FileReader.prototype||{}).readAsBinaryString;
+	var domrabs = document.getElementsByName("userabs")[0];
+	if(!rABS) domrabs.disabled = !(domrabs.checked = false);
+
+	return function do_file(files) {
+		rABS = domrabs.checked;
+		var f = files[0];
+		var reader = new FileReader();
+		reader.onload = function(e) {
+			if(typeof console !== 'undefined') console.log("onload", new Date(), rABS);
+			var data = e.target.result;
+			if(!rABS) data = new Uint8Array(data);
+			process_wb(XLSX.read(data, {type: rABS ? 'binary' : 'array'}));
+		};
+		if(rABS) reader.readAsBinaryString(f);
+		else reader.readAsArrayBuffer(f);
+	};
+})();
+
+(function() {
+	var drop = document.getElementById('drop');
+	if(!drop.addEventListener) return;
+
+	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);
+})();
+
+(function() {
+	var xlf = document.getElementById('xlf');
+	if(!xlf.addEventListener) return;
+	function handleFile(e) { do_file(e.target.files); }
+	xlf.addEventListener('change', handleFile, false);
+})();
+
+function export_xlsx() {
+	var new_wb = xtos(xspr.getData());
+
+	/* write file and trigger a download */
+	XLSX.writeFile(new_wb, 'sheetjs.xlsx', {});
+}
+</script>
+<script type="text/javascript">
+/* eslint no-use-before-define:0 */
+	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);
+	})();
+</script>
+</body>
+</html>
--- a/demos/xspreadsheet/shim.js
+++ b/demos/xspreadsheet/shim.js
@ -0,0 +1 @@
+../../shim.js
--- a/demos/xspreadsheet/xlsx.full.min.js
+++ b/demos/xspreadsheet/xlsx.full.min.js
@ -0,0 +1 @@
+../../dist/xlsx.full.min.js
--- a/docbits/11_demos.md
+++ b/docbits/11_demos.md
@ -31,6 +31,7 @@ The [`demos` directory](demos/) includes sample projects for:
 - [`Adobe ExtendScript`](demos/extendscript/)
 - [`Headless Browsers`](demos/headless/)
 - [`canvas-datagrid`](demos/datagrid/)
+- [`x-spreadsheet`](demos/xspreadsheet/)
 - [`Swift JSC and other engines`](demos/altjs/)
 - [`"serverless" functions`](demos/function/)
 - [`internet explorer`](demos/oldie/)
--- a/misc/docs/README.md
+++ b/misc/docs/README.md
@ -206,6 +206,7 @@ The [`demos` directory](demos/) includes sample projects for:
 - [`Adobe ExtendScript`](demos/extendscript/)
 - [`Headless Browsers`](demos/headless/)
 - [`canvas-datagrid`](demos/datagrid/)
+- [`x-spreadsheet`](demos/xspreadsheet/)
 - [`Swift JSC and other engines`](demos/altjs/)
 - [`"serverless" functions`](demos/function/)
 - [`internet explorer`](demos/oldie/)
--- a/xlsx.flow.js
+++ b/xlsx.flow.js
@ -16337,7 +16337,7 @@ function parse_xlml_xml(d, _opts)/*:Workbook*/ {

 				case 'datavalidation' /*case 'DataValidation'*/:
 				switch(Rn[3]) {
-					case 'range' /*case 'Range'*/: dval.ref = Rn; break;
+					case 'range' /*case 'Range'*/: break;

 					case 'type' /*case 'Type'*/: break;
 					case 'min' /*case 'Min'*/: break;
--- a/xlsx.js
+++ b/xlsx.js
@ -16228,7 +16228,7 @@ Workbook.WBProps.date1904 = true;

 				case 'datavalidation' /*case 'DataValidation'*/:
 				switch(Rn[3]) {
-					case 'range' /*case 'Range'*/: dval.ref = Rn; break;
+					case 'range' /*case 'Range'*/: break;

 					case 'type' /*case 'Type'*/: break;
 					case 'min' /*case 'Min'*/: break;
--- a/xlsx.mini.flow.js
+++ b/xlsx.mini.flow.js
@ -2729,15 +2729,21 @@ function evert_arr(obj/*:any*/)/*:EvertArrType*/ {
 }

 var basedate = new Date(1899, 11, 30, 0, 0, 0); // 2209161600000
-var dnthresh = basedate.getTime() + (new Date().getTimezoneOffset() - basedate.getTimezoneOffset()) * 60000;
 function datenum(v/*:Date*/, date1904/*:?boolean*/)/*:number*/ {
 	var epoch = v.getTime();
 	if(date1904) epoch -= 1462*24*60*60*1000;
+	var dnthresh = basedate.getTime() + (v.getTimezoneOffset() - basedate.getTimezoneOffset()) * 60000;
 	return (epoch - dnthresh) / (24 * 60 * 60 * 1000);
 }
+var refdate = new Date();
+var dnthresh = basedate.getTime() + (refdate.getTimezoneOffset() - basedate.getTimezoneOffset()) * 60000;
+var refoffset = refdate.getTimezoneOffset();
 function numdate(v/*:number*/)/*:Date*/ {
 	var out = new Date();
 	out.setTime(v * 24 * 60 * 60 * 1000 + dnthresh);
+	if (out.getTimezoneOffset() !== refoffset) {
+		out.setTime(out.getTime() + (out.getTimezoneOffset() - refoffset) * 60000);
+	}
 	return out;
 }

--- a/xlsx.mini.js
+++ b/xlsx.mini.js
@ -2651,15 +2651,21 @@ function evert_arr(obj) {
 }

 var basedate = new Date(1899, 11, 30, 0, 0, 0); // 2209161600000
-var dnthresh = basedate.getTime() + (new Date().getTimezoneOffset() - basedate.getTimezoneOffset()) * 60000;
 function datenum(v, date1904) {
 	var epoch = v.getTime();
 	if(date1904) epoch -= 1462*24*60*60*1000;
+	var dnthresh = basedate.getTime() + (v.getTimezoneOffset() - basedate.getTimezoneOffset()) * 60000;
 	return (epoch - dnthresh) / (24 * 60 * 60 * 1000);
 }
+var refdate = new Date();
+var dnthresh = basedate.getTime() + (refdate.getTimezoneOffset() - basedate.getTimezoneOffset()) * 60000;
+var refoffset = refdate.getTimezoneOffset();
 function numdate(v) {
 	var out = new Date();
 	out.setTime(v * 24 * 60 * 60 * 1000 + dnthresh);
+	if (out.getTimezoneOffset() !== refoffset) {
+		out.setTime(out.getTime() + (out.getTimezoneOffset() - refoffset) * 60000);
+	}
 	return out;
 }