- make it possible to add node instead of pure text.

Author: zbryikt

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Logs
 
+## v0.1.5
+
+ - make it possible to add node instead of pure text.
+
+
 ## v0.1.4
 
  - fix bug: `0` wasn't shown when set cell content. fix this by checking `!(textContent?)` instead of `!(textContent)`.

README.md

@@ -79,6 +79,19 @@ Following are a list of possible events:
    - `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.
 
+## Rich Text
+
+You can add more than texts in the grid of the sheet, by having an object with following structure in data:
+
+    {
+      type: "data-type",
+      ... /* members according to type */
+    }
+
+Currently, only `node` type is supported:
+
+    { type: "node", node: SomeElement }
+
 
 ## License
 

dist/index.js

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

dist/index.min.js

@@ -196,7 +196,11 @@ sheet.prototype = Object.create(Object.prototype) <<< do
     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,'""') + '"')
+        content = @_data[][rpw][col]
+        # TODO advanced content support
+        if typeof(content) == \object => continue
+
+        r.push ('"' + (('' + content) or '').replace(/"/g,'""') + '"')
       c.push r.join(\\t)
     s = c.join(\\n)
     navigator.clipboard.writeText s
@@ -232,7 +236,7 @@ sheet.prototype = Object.create(Object.prototype) <<< do
   # re-render cell with the content they suppose to have
   _content: ({x, y, n}) ->
     if !n and !(n = @dom.inner.childNodes[x + y * @dim.col]) => return
-    [textContent, className] = if x < @xif.col.0 and y < @xif.col.0 => ["","cell idx"]
+    [content, className] = if x < @xif.col.0 and y < @xif.col.0 => ["","cell idx"]
     else if x < @xif.col.0 =>
       v = if y < @xif.row.1 => " "
       else if y < @xif.row.2 => y - @xif.row.1 + 1
@@ -252,10 +256,16 @@ sheet.prototype = Object.create(Object.prototype) <<< do
     else if y < @xif.row.2 =>
       [@_data[][y - @xif.row.1][@pos.col + x - @xif.col.1], "cell frozen"]
     else [@_data[][@pos.row + y - @xif.row.1][@pos.col + x - @xif.col.1], "cell"]
-    if !(textContent?) => textContent = ""
+    if !(content?) => content = ""
 
     n.className = className
-    if textContent != null => n.textContent = textContent
+    if content != null =>
+      # TODO support advanced content
+      if typeof(content) == \object =>
+        if content.type == \dom =>
+          n.textContent = ""
+          n.appendChild content.node
+      else n.textContent = content
 
   # move down
   _md: (mag = 1) ->

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('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";
+pug_html = pug_html + "var node, div, s, c;\nnode = {\n  type: 'dom',\n  node: div = document.createElement('div')\n};\ndiv.setAttribute('class', \"d-flex w-100 justify-content-between h-100 align-items-center\");\ndiv.innerHTML = \"\u003Cdiv\u003Esample\u003C\u002Fdiv\u003E\\n\u003Cdiv\u003E×\u003C\u002Fdiv\u003E\";\ndiv.addEventListener('click', function(it){\n  return console.log('hi', it.target);\n});\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: [[2, 3, node], [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

@@ -13,13 +13,22 @@ block script
   +script("https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.1/papaparse.min.js")
   +script("assets/lib/@plotdb/sheet/dev/index.min.js")
   script: :lsc
+    node =
+      type: \dom
+      node: div = document.createElement(\div)
+    div.setAttribute \class, "d-flex w-100 justify-content-between h-100 align-items-center"
+    div.innerHTML = """
+    <div>sample</div>
+    <div>&times;</div>
+    """
+    div.addEventListener \click, -> console.log \hi, it.target
     s = new sheet do
       root: '#root'
       size:
         col: [48,64,92,128].map -> "#{it}px"
         row: [48,64,92,128].map -> "#{it}px"
       data: [
-        [1,2,3,4],
+        [2,3,node],
         [5,6,7,8],
         [9,10,11,12],
         [13,14,15,16]