feat(src/controllers/constant.js src/controllers/rowcolumnoperation.js src/index.html): custom

Add custom rigth click menu

#514

src/controllers/constant.js

@@ -288,6 +288,14 @@ function rightclickHTML(){
         dataMenuseparator = false;
     }
 
+    const customsButtons = (config.customs || [{title: 'test'}]).map((item, index) => `
+            <div data-index="${index}" class="luckysheetColsRowsHandleAdd_custom luckysheet-cols-menuitem luckysheet-mousedown-cancel">
+                <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
+                ${item.title}
+                </div>
+            </div>`
+        ).join("");
+
     const rightclickContainer =  `<div id="luckysheet-rightclick-menu" class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-mousedown-cancel">
                 <div id="luckysheet-copy-btn" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel luckysheet-copy-btn" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" style="display:${config.copy ? 'block' : 'none'};">
                     <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.copy}</div>
@@ -422,6 +430,7 @@ function rightclickHTML(){
                     <div id="luckysheetCellFormatRightClickMenu" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.cellFormat ? 'block' : 'none'};">
                         <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${toolbar.cellFormat}</div>
                     </div>
+                    ${customsButtons}
                 </div>
             </div>
             <div id="luckysheetcopyfor_sub" class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-rightgclick-menu-sub luckysheet-mousedown-cancel">

src/controllers/rowColumnOperation.js

@@ -1134,6 +1134,29 @@ export function rowColumnOperationInitial(){
 
 
     })
+
+    // custom right-click a cell buttton click
+    $(".luckysheetColsRowsHandleAdd_custom").click(function (clickEvent) {
+        $("#luckysheet-rightclick-menu").hide();
+        const cellRightClickConfig =
+          luckysheetConfigsetting.cellRightClickConfig;
+        const rowIndex = Store.luckysheet_select_save[0].row[0];
+        const columnIndex = Store.luckysheet_select_save[0].column[0];
+        if (
+          cellRightClickConfig.customs[
+            Number(clickEvent.currentTarget.dataset.index)
+          ]
+        ) {
+          try {
+            cellRightClickConfig.customs[
+              Number(clickEvent.currentTarget.dataset.index)
+            ].onClick(clickEvent, event, { rowIndex, columnIndex });
+          } catch (e) {
+            console.error("custom click error", e);
+          }
+        }
+        
+    });
     // Add the row up, and click the text area to trigger the confirmation instead of clicking the confirmation button to enhance the experience
     // $("#luckysheet-addTopRows").click(function (event) {
     // $("#luckysheetColsRowsHandleAdd_sub .luckysheet-cols-menuitem:first-child").click(function (event) {

src/index.html

@@ -1878,6 +1878,14 @@
 				},
 				imageClass:"loadingAnimation"
 			}
+			options.cellRightClickConfig = {
+				customs: [{
+					title: 'test',
+					onClick: function (clickEvent, event, params) {
+						console.log('function test click', clickEvent, event, params)
+					}
+				}]
+			}
 			luckysheet.create(options);
 			})
 	</script>