ボタンクリックイベント対応

2024-03-01 22:47:37 +09:00
parent 72608a8ffd
commit 03904a4e35
19 changed files with 676 additions and 1419 deletions
--- a/plugin/kintone-addins/src/actions/button-add.ts
+++ b/plugin/kintone-addins/src/actions/button-add.ts
@@ -0,0 +1,107 @@
+
+import { actionAddins } from ".";
+import $ from 'jquery';
+import { IAction, IActionProperty, IActionNode, IActionResult } from "../types/ActionTypes";
+/**
+ * ボタン配置属性定義
+ */
+interface IButtonAddProps {
+    //ボタン表示名
+    buttonName: string;
+    //配置位置
+    position: string;
+    //イベント名
+    eventName:string
+}   
+
+export class ButtonAddAction implements IAction {
+    name: string; 
+    actionProps: IActionProperty[]; 
+    props: IButtonAddProps;
+    constructor() { 
+        this.name = "ボタンの配置";
+        this.actionProps = [];
+        this.props = {
+            buttonName: '',
+            position: '',
+            eventName:''
+        }
+        this.register();
+    }
+
+    /**
+     * アクションの実行を呼び出す
+     * @param actionNode 
+     * @param event 
+     * @returns 
+     */
+    async process(actionNode: IActionNode, event: any): Promise<IActionResult> { 
+        let result = { 
+            canNext: true,
+            result: false
+        };
+        try { 
+            this.actionProps = actionNode.actionProps;
+            if (!('buttonName' in actionNode.ActionValue) && !('position' in actionNode.ActionValue)) { 
+                return result
+            }
+            this.props = actionNode.ActionValue as IButtonAddProps; 
+            //ボタンを配置する
+            const menuSpace = kintone.app.record.getHeaderMenuSpaceElement();
+            if(!menuSpace) return result;
+            if($("style#alc-button-add").length===0){
+                const css=`
+                .alc-button-normal {
+                    display: inline-block;
+                    box-sizing: border-box;
+                    padding: 0 16px;
+                    margin-left: 16px;
+                    margin-top: 8px;
+                    min-width: 100px;
+                    outline: none;
+                    border: 1px solid #e3e7e8;
+                    background-color: #f7f9fa;
+                    box-shadow: 1px 1px 1px #fff inset;
+                    color: #3498db;
+                    text-align: center;
+                    line-height: 32px;
+                }
+                .alc-button-normal:hover {
+                    background-color: #c8d6dd;
+                    box-shadow: none;
+                    cursor: pointer;
+                  }
+                .alc-button-normal:active {
+                    color: #f7f9fa;
+                    background-color: #54b8eb;
+                }`;
+                const style = $("<style id='alc-button-add'>/<style>");
+                style.text(css);
+                $("head").append(style);
+            }
+            const button =$(`<button id='${this.props.eventName}' class='alc-button-normal' >${this.props.buttonName}</button>`);
+            if(this.props.position==="一番左に追加する"){
+                $(menuSpace).prepend(button);
+            }else{
+                $(menuSpace).append(button);
+            }
+            const clickEventName = `${event.type}.customButtonClick.${this.props.eventName}`;
+            button.on("click",()=>{
+                $(document).trigger(clickEventName,event);
+            });
+            return result;
+        } catch (error) {
+            event.error = error;
+            console.error(error);
+            result.canNext = false;
+            return result;
+        }
+    }
+  
+
+    register(): void {
+        actionAddins[this.name] = this;
+    }
+
+}
+new ButtonAddAction();