- support menu.on and menu.off event

 - fix bug: right click incorrectly considered as selection.
 - bump version

Author: zbryikt

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Logs
 
+## v0.5.5
+
+ - support `menu.on` and `menu.off` event
+ - fix bug: right click incorrectly considered as selection.
+
+
 ## v0.5.4
 
  - add `insert` api

README.md

@@ -91,6 +91,13 @@ Following are a list of possible events:
    - `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.
+ - `menu.on`: fired when a `contextmenu` event is fired within sheet. Option is an object with following fields:
+   - `evt`: corresponding event object
+   - `node`: target node from which this event was fired.
+ - `menu.off`: fired when a context menu is expected to dismiss. Option is an object with following fields:
+   - `evt`: corresponding event object
+   - `node`: target node from which this event was fired.
+
 
 ## Rich Text
 

dist/index.js

@@ -176,9 +176,35 @@
       this.dom.textarea.addEventListener('mousedown', function(e){
         return e.stopPropagation();
       });
+      this.dom.sheet.addEventListener('contextmenu', function(e){
+        this$.fire('menu.on', {
+          evt: e,
+          node: e.target
+        });
+        if (this$._menuOff) {
+          return;
+        }
+        this$._menuOff = function(e){
+          if (e.type === 'keydown' && e.keyCode !== 27) {
+            return;
+          }
+          document.body.removeEventListener('click', this$._menuOff);
+          document.body.removeEventListener('keydown', this$._menuOff);
+          this$._menuOff = null;
+          return this$.fire('menu.off', {
+            evt: e,
+            node: e.target
+          });
+        };
+        document.body.addEventListener('click', this$._menuOff);
+        return document.body.addEventListener('keydown', this$._menuOff);
+      });
       dom = this.dom.sheet;
       dom.addEventListener('mousedown', function(e){
         var p, ref$, idx;
+        if (e.button > 1) {
+          return;
+        }
         this$.edited();
         if (!(p = parent(e.target, '.cell', dom))) {
           return;

dist/index.min.js

@@ -3,7 +3,7 @@
   "name": "@plotdb/sheet",
   "license": "MIT",
   "description": "spreadsheet",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "style": "dist/index.min.css",
   "browser": "dist/index.min.js",
   "main": "dist/index.min.js",

package-lock.json

@@ -81,9 +81,22 @@ sheet.prototype = Object.create(Object.prototype) <<< do
 
     # to prevent grid selection
     @dom.textarea.addEventListener \mousedown, (e) -> e.stopPropagation!
+    @dom.sheet.addEventListener \contextmenu, (e) ~>
+      @fire \menu.on, {evt: e, node: e.target}
+      if @_menu-off => return
+      @_menu-off = (e) ~>
+        if e.type == \keydown and e.keyCode != 27 => return
+        document.body.removeEventListener \click, @_menu-off
+        document.body.removeEventListener \keydown, @_menu-off
+        @_menu-off = null
+        @fire \menu.off, {evt: e, node: e.target}
+      document.body.addEventListener \click, @_menu-off
+      document.body.addEventListener \keydown, @_menu-off
 
     dom = @dom.sheet
     dom.addEventListener \mousedown, (e) ~>
+      # selection should skip right click
+      if e.button > 1 => return
       @edited!
       if !(p = parent (e.target), '.cell', dom) => return
       idx = @index(p){row, col}

package.json

@@ -12,6 +12,9 @@ block head
     https://community.airtable.com/t/3074
     */
     body { overscroll-behavior: contain }
+    [ld=menu] {
+      position: absolute;
+    }
 block body
   .ldcv(ld="ldcv",data-name="selection"): .base.w-640.rwd: .inner.p-4
     textarea.form-control.mb-4(ld="textarea",rows="7")
@@ -26,6 +29,9 @@ block body
       .btn.btn-sm.btn-outline-secondary(ld="cur") Show Current Selection
     .aspect-ratio.ratio-1by1
       #root.shadow-sm.border.border-secondary.rounded
+  .dropdown-menu.shadow-sm(ld="menu")
+    .dropdown-item(ld="del") Del Row/Col
+    .dropdown-item(ld="ins") Ins Row/Col
 
 
 block script
@@ -44,6 +50,8 @@ block script
         row: -> s.select {row: 2}
         col: -> s.select {col: 2}
         all: -> s.select {}
+        del: -> s.slice!
+        ins: -> s.insert!
         cur: ->
           app.selection = s.select!
           ldcv.selection.toggle!
@@ -77,6 +85,20 @@ block script
     s.on \change, -> console.log it
     c = s.cell {x: 1, y: 1}
     console.log c
+    s.on \menu.on, ({evt, node}) ->
+      if !(node.classList.contains \idx) => return
+      m = view.get(\menu)
+      m.style.top = "#{evt.clientY}px"
+      m.style.left = "#{evt.clientX}px"
+      m.classList.toggle \show, true
+      evt.preventDefault!
+      evt.stopPropagation!
+    s.on \menu.off, ({evt, node}) ->
+      m = view.get(\menu)
+      m.classList.toggle \show, false
+      evt.preventDefault!
+      evt.stopPropagation!
+
     /*
     c.innerHTML = """
     <div class="dropdown">

src/index.ls

@@ -176,9 +176,35 @@
       this.dom.textarea.addEventListener('mousedown', function(e){
         return e.stopPropagation();
       });
+      this.dom.sheet.addEventListener('contextmenu', function(e){
+        this$.fire('menu.on', {
+          evt: e,
+          node: e.target
+        });
+        if (this$._menuOff) {
+          return;
+        }
+        this$._menuOff = function(e){
+          if (e.type === 'keydown' && e.keyCode !== 27) {
+            return;
+          }
+          document.body.removeEventListener('click', this$._menuOff);
+          document.body.removeEventListener('keydown', this$._menuOff);
+          this$._menuOff = null;
+          return this$.fire('menu.off', {
+            evt: e,
+            node: e.target
+          });
+        };
+        document.body.addEventListener('click', this$._menuOff);
+        return document.body.addEventListener('keydown', this$._menuOff);
+      });
       dom = this.dom.sheet;
       dom.addEventListener('mousedown', function(e){
         var p, ref$, idx;
+        if (e.button > 1) {
+          return;
+        }
         this$.edited();
         if (!(p = parent(e.target, '.cell', dom))) {
           return;