- rename update event to change event.

 - check sheet focus before pasting data
 - support copy tsv format text to clipboard. use `navigator.clipboard`,
   which doesn't support older browsers.

Author: zbryikt

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Logs
 
+## v0.1.0
+
+ - rename `update` event to `change` event.
+ - check sheet focus before pasting data
+ - support copy tsv format text to clipboard. use `navigator.clipboard`, which doesn't support older browsers.
+
+
 ## v0.0.10
 
  - fix selection issue across frozen cells

README.md

@@ -55,6 +55,26 @@ initialize:
  - `render()`: force to re-render visible cells
  - `editing(v)`: set edit status to v, or return edit status if v is not provided.
 
+
+## Event
+
+use `sheet.on('event-name', callback)` to handle sheet related events, e.g.,
+
+    s = new sheet( ... );
+    s.on('change', function({row, col, data, range}) {
+      ....
+    });
+
+
+Following are a list of possible events:
+
+ - `change`: fired when some cells are updated. callback function with following options, in object:
+   - `row`: base row of the updated cell
+   - `col`: base col of the updated cell
+   - `data`: data used to update. If it's a 2D array and `range` is true, then cells are updated with values in `data` correspondingly relative to `row` and `col` as the original cell
+   - `range`: true if a range of cells are updated.
+
+
 ## License
 
 MIT

dist/index.js

@@ -3,7 +3,7 @@
   "name": "@plotdb/sheet",
   "license": "MIT",
   "description": "spreadsheet",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "main": "dist/index.js",
   "homepage": "https://github.com/plotdb/sheet",
   "files": [

dist/index.min.js

@@ -97,13 +97,14 @@ sheet.prototype = Object.create(Object.prototype) <<< do
       @edit {node: p, quick: false}
 
     document.body.addEventListener \paste, (e) ~>
-      # TODO we need to find some way to ensure sheet gets users' focus before handling paste event
+      if !parent(document.activeElement, '.sheet', dom) => return
       if !@les.start => return
       data = e.clipboardData.getData('text')
       data = parse-csv data
       @set {row: @les.start.row, col: @les.start.col, data: data, range: true}
 
     dom.addEventListener \keydown, (e) ~>
+      if e.keyCode == 67 and (e.metaKey or e.ctrlKey) => return @copy!
       if !@event-in-scope(e) => return
       code = e.keyCode
       if code == 8 =>
@@ -162,6 +163,16 @@ sheet.prototype = Object.create(Object.prototype) <<< do
       e.preventDefault!
     ), {passive: false}
 
+  copy: ->
+    if !@les.start => return
+    c = []
+    for row from @les.start.row til @les.end.row + 1=>
+      r = []
+      for col from @les.start.col til @les.end.col + 1 =>
+        r.push ('"' + (('' + @data[][row][col]) or '').replace(/"/g,'""') + '"')
+      c.push r.join(\\t)
+    s = c.join(\\n)
+    navigator.clipboard.writeText s
 
   event-in-scope: (e) -> (parent e.target, '.sheet', @dom.sheet) == @dom.sheet
   regrid: ->
@@ -189,7 +200,7 @@ sheet.prototype = Object.create(Object.prototype) <<< do
       for r from 0 til data.length => for c from 0 til data[r].length =>
         @data[][r + row][c + col] = data[r][c]
         @_content {y: r + row - @pos.row + @xif.row.1, x: c + col - @pos.col + @xif.col.1}
-    @fire \update, {row, col, data, range: !!range}
+    @fire \change, {row, col, data, range: !!range}
 
   # re-render cell with the content they suppose to have
   _content: ({x, y, n}) ->

package-lock.json

@@ -170,7 +170,7 @@ pug_mixins["script"]("assets/lib/@plotdb/sheet/dev/index.min.js");
 ;pug_debug_line = 15;pug_debug_filename = "src\u002Fpug\u002Findex.pug";
 pug_html = pug_html + "\u003Cscript\u003E";
 ;pug_debug_line = 15;pug_debug_filename = "src\u002Fpug\u002Findex.pug";
-pug_html = pug_html + "var s, c;\ns = new sheet({\n  root: '#root',\n  size: {\n    col: [48, 64, 92, 128].map(function(it){\n      return it + \"px\";\n    }),\n    row: [48, 64, 92, 128].map(function(it){\n      return it + \"px\";\n    })\n  },\n  data: [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [13, 14, 15, 16]],\n  idx: {\n    row: true,\n    col: true\n  },\n  fixed: {\n    row: 2,\n    col: 2\n  },\n  frozen: {\n    row: 2,\n    col: 2\n  }\n});\ns.on('update', function(it){\n  return console.log(it);\n});\nc = s.cell({\n  x: 1,\n  y: 1\n});\nconsole.log(c);\nc.innerHTML = \"\u003Cdiv class=\\\"dropdown\\\"\u003E\\n\u003Cdiv class=\\\"btn btn-sm btn-primary dropdown-toggle\\\" data-toggle=\\\"dropdown\\\"\u003Eclick me\u003C\u002Fdiv\u003E\\n\u003C\u002Fdiv\u003E\";\u003C\u002Fscript\u003E\u003C\u002Fbody\u003E\u003C\u002Fhtml\u003E";
+pug_html = pug_html + "var s, c;\ns = new sheet({\n  root: '#root',\n  size: {\n    col: [48, 64, 92, 128].map(function(it){\n      return it + \"px\";\n    }),\n    row: [48, 64, 92, 128].map(function(it){\n      return it + \"px\";\n    })\n  },\n  data: [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [13, 14, 15, 16]],\n  idx: {\n    row: true,\n    col: true\n  },\n  fixed: {\n    row: 2,\n    col: 2\n  },\n  frozen: {\n    row: 2,\n    col: 2\n  }\n});\ns.on('change', function(it){\n  return console.log(it);\n});\nc = s.cell({\n  x: 1,\n  y: 1\n});\nconsole.log(c);\nc.innerHTML = \"\u003Cdiv class=\\\"dropdown\\\"\u003E\\n\u003Cdiv class=\\\"btn btn-sm btn-primary dropdown-toggle\\\" data-toggle=\\\"dropdown\\\"\u003Eclick me\u003C\u002Fdiv\u003E\\n\u003C\u002Fdiv\u003E\";\u003C\u002Fscript\u003E\u003C\u002Fbody\u003E\u003C\u002Fhtml\u003E";
     }.call(this, "JSON" in locals_for_with ?
         locals_for_with.JSON :
         typeof JSON !== 'undefined' ? JSON : undefined, "b64img" in locals_for_with ?

package.json

@@ -27,7 +27,7 @@ block script
       idx: {row: true, col: true}
       fixed: {row: 2, col: 2}
       frozen: {row: 2, col: 2}
-    s.on \update, -> console.log it
+    s.on \change, -> console.log it
     c = s.cell {x: 1, y: 1}
     console.log c
     c.innerHTML = """