clipboard action

taichunmin · Feb 6, 2024 · 92f89f5 · 92f89f5
1 parent 355739b
commit 92f89f5
Show file tree

Hide file tree

Showing 12 changed files with 232 additions and 159 deletions.
diff --git a/libs/tryAddShareBtn.js b/libs/tryAddShareBtn.js
@@ -8,89 +8,64 @@ const flexShareBtn = ({ uri, gistId }) => ({
   type: 'flex',
   contents: {
     type: 'carousel',
-    contents: [
+    contents: _.map([
       {
-        size: 'nano',
-        type: 'bubble',
-        body: {
-          alignItems: 'center',
-          justifyContent: 'center',
-          layout: 'horizontal',
-          paddingAll: '5px',
-          spacing: 'md',
-          type: 'box',
-          action: {
-            type: 'uri',
-            uri,
-          },
-          contents: [
-            {
-              height: '16px',
-              layout: 'vertical',
-              type: 'box',
-              width: '16px',
-              contents: [
-                {
-                  aspectMode: 'cover',
-                  aspectRatio: '1:1',
-                  size: 'full',
-                  type: 'image',
-                  url: 'https://i.imgur.com/IFjR25G.png',
-                },
-              ],
-            },
-            {
-              flex: 0,
-              size: '16px',
-              text: '分享',
-              type: 'text',
-            },
-          ],
-        },
+        icon: 'https://i.imgur.com/IFjR25G.png',
+        text: '分享',
+        action: { type: 'uri', uri },
       },
       {
-        size: 'nano',
-        type: 'bubble',
-        body: {
-          alignItems: 'center',
-          justifyContent: 'center',
-          layout: 'horizontal',
-          paddingAll: '5px',
-          spacing: 'md',
-          type: 'box',
-          action: {
-            data: '/gistReplaceAltText',
-            displayText: '如果你是在手機上點選「改替代」按鈕，你應該可以在下方輸入框看到自動填寫的文字指令，請在指令後面輸入新的替代文字後傳送。',
-            fillInText: `/gistReplaceAltText ${gistId} `,
-            inputOption: 'openKeyboard',
-            type: 'postback',
-          },
-          contents: [
-            {
-              height: '16px',
-              layout: 'vertical',
-              type: 'box',
-              width: '16px',
-              contents: [
-                {
-                  aspectMode: 'cover',
-                  aspectRatio: '1:1',
-                  size: 'full',
-                  type: 'image',
-                  url: 'https://i.imgur.com/dLElEk7.png',
-                },
-              ],
-            },
-            {
-              flex: 0,
-              size: '16px',
-              text: '改替代',
-              type: 'text',
-            },
-          ],
+        icon: 'https://i.imgur.com/W6RbIne.png',
+        text: '複製網址',
+        action: { type: 'clipboard', clipboardText: uri },
+      },
+      {
+        icon: 'https://i.imgur.com/dLElEk7.png',
+        text: '改替代',
+        action: {
+          data: '/gistReplaceAltText',
+          displayText: '如果你是在手機上點選「改替代」按鈕，你應該可以在下方輸入框看到自動填寫的文字指令，請在指令後面輸入新的替代文字後傳送。',
+          fillInText: `/gistReplaceAltText ${gistId} `,
+          inputOption: 'openKeyboard',
+          type: 'postback',
         },
       },
-    ],
+    ], btn => ({
+      size: 'nano',
+      type: 'bubble',
+      body: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        layout: 'horizontal',
+        paddingAll: '5px',
+        spacing: 'md',
+        type: 'box',
+        action: btn.action,
+        contents: [
+          {
+            height: '16px',
+            layout: 'vertical',
+            type: 'box',
+            width: '16px',
+            contents: [
+              {
+                aspectMode: 'cover',
+                aspectRatio: '1:1',
+                size: 'full',
+                type: 'image',
+                url: btn.icon,
+              },
+            ],
+          },
+          {
+            flex: 0,
+            size: '16px',
+            text: btn.text,
+            type: 'text',
+          },
+        ],
+      },
+    })),
   },
   sender: {
     iconUrl: 'https://i.imgur.com/1KZoSue.png',

diff --git a/package.json b/package.json
@@ -8,11 +8,11 @@
   "dependencies": {
     "@google-cloud/functions-framework": "^3.3.0",
     "@josephg/resolvable": "^1.0.1",
-    "@line/bot-sdk": "^8.2.0",
-    "axios": "^1.6.3",
+    "@line/bot-sdk": "^8.3.1",
+    "axios": "^1.6.7",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.10",
-    "dotenv": "^16.3.1",
+    "dotenv": "^16.4.1",
     "json5": "^2.2.3",
     "lodash": "^4.17.21",
     "octokit": "^3.1.2",
@@ -22,7 +22,7 @@
     "eslint": "^8.56.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^16.6.1",
+    "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.1.1",
     "jest": "^29.7.0"

diff --git a/richmenu/playground-1.js b/richmenu/playground-1.js
@@ -10,45 +10,45 @@ module.exports = {
     selected: true,
     size: { width: 2500, height: 1684 },
     areas: [
-      {
+      { // 關閉圖文選單遊樂場
         bounds: { x: 2325, y: 0, width: 175, height: 208 },
         action: {
           type: 'message',
           text: '/richmenuPlayground exit',
         },
       },
-      {
+      { // 動作說明
         bounds: { x: 2150, y: 0, width: 175, height: 208 },
         action: {
           type: 'uri',
           uri: 'https://developers.line.biz/en/docs/messaging-api/try-rich-menu/#try-message-action',
         },
       },
-      {
+      { // 2. postback
         bounds: { x: 742, y: 208, width: 737, height: 245 },
         action: {
           type: 'richmenuswitch',
           richMenuAliasId: 'playground-2',
           data: httpBuildQuery({ from: RICHMENU_ALIAS, to: 'playground-2' }),
         },
       },
-      {
+      { // 3. URI
         bounds: { x: 1479, y: 208, width: 730, height: 245 },
         action: {
           type: 'richmenuswitch',
           richMenuAliasId: 'playground-3',
           data: httpBuildQuery({ from: RICHMENU_ALIAS, to: 'playground-3' }),
         },
       },
-      {
+      { // 4. 選擇日時
         bounds: { x: 2209, y: 208, width: 291, height: 245 },
         action: {
           type: 'richmenuswitch',
           richMenuAliasId: 'playground-4',
           data: httpBuildQuery({ from: RICHMENU_ALIAS, to: 'playground-4' }),
         },
       },
-      {
+      { // 傳送訊息
         bounds: { x: 576, y: 1055, width: 1346, height: 494 },
         action: {
           type: 'message',

diff --git a/richmenu/playground-2.js b/richmenu/playground-2.js
@@ -10,60 +10,60 @@ module.exports = {
     selected: true,
     size: { width: 2500, height: 1684 },
     areas: [
-      {
+      { // 關閉圖文選單遊樂場
         bounds: { x: 2325, y: 0, width: 175, height: 208 },
         action: {
           type: 'message',
           text: '/richmenuPlayground exit',
         },
       },
-      {
+      { // 動作說明
         bounds: { x: 2150, y: 0, width: 175, height: 208 },
         action: {
           type: 'uri',
-          uri: 'https://developers.line.biz/en/docs/messaging-api/try-rich-menu/#try-postback-action',
+          uri: 'https://developers.line.biz/en/docs/messaging-api/try-rich-menu/#try-postback-1-action',
         },
       },
-      {
+      { // 1. message
         bounds: { x: 0, y: 208, width: 742, height: 245 },
         action: {
           type: 'richmenuswitch',
           richMenuAliasId: 'playground-1',
           data: httpBuildQuery({ from: RICHMENU_ALIAS, to: 'playground-1' }),
         },
       },
-      {
+      { // 3. URI
         bounds: { x: 1479, y: 208, width: 730, height: 245 },
         action: {
           type: 'richmenuswitch',
           richMenuAliasId: 'playground-3',
           data: httpBuildQuery({ from: RICHMENU_ALIAS, to: 'playground-3' }),
         },
       },
-      {
+      { // 4. 選擇日時
         bounds: { x: 2209, y: 208, width: 291, height: 245 },
         action: {
           type: 'richmenuswitch',
           richMenuAliasId: 'playground-4',
           data: httpBuildQuery({ from: RICHMENU_ALIAS, to: 'playground-4' }),
         },
       },
-      {
+      { // 包含 displayText
         bounds: { x: 0, y: 875, width: 1250, height: 420 },
         action: {
           type: 'postback',
           data: 'actionId=21',
           displayText: '這則文字將顯示在聊天視窗內。',
         },
       },
-      {
+      { // 沒有 displayText
         bounds: { x: 1250, y: 875, width: 1250, height: 420 },
         action: {
           type: 'postback',
           data: 'actionId=22',
         },
       },
-      {
+      { // 測試 inputOption 屬性
         bounds: { x: 0, y: 1295, width: 2500, height: 320 },
         action: {
           type: 'richmenuswitch',

diff --git a/richmenu/playground-3.js b/richmenu/playground-3.js
@@ -10,80 +10,80 @@ module.exports = {
     selected: true,
     size: { width: 2500, height: 1684 },
     areas: [
-      {
+      { // 關閉圖文選單遊樂場
         bounds: { x: 2325, y: 0, width: 175, height: 208 },
         action: {
           type: 'message',
           text: '/richmenuPlayground exit',
         },
       },
-      {
+      { // 動作說明
         bounds: { x: 2150, y: 0, width: 175, height: 208 },
         action: {
           type: 'uri',
           uri: 'https://developers.line.biz/en/docs/messaging-api/try-rich-menu/#try-uri-action',
         },
       },
-      {
+      { // 1. message
         bounds: { x: 0, y: 208, width: 742, height: 245 },
         action: {
           type: 'richmenuswitch',
           richMenuAliasId: 'playground-1',
           data: httpBuildQuery({ from: RICHMENU_ALIAS, to: 'playground-1' }),
         },
       },
-      {
+      { // 2. postback
         bounds: { x: 742, y: 208, width: 737, height: 245 },
         action: {
           type: 'richmenuswitch',
           richMenuAliasId: 'playground-2',
           data: httpBuildQuery({ from: RICHMENU_ALIAS, to: 'playground-2' }),
         },
       },
-      {
+      { // 4. 選擇日時
         bounds: { x: 2209, y: 208, width: 291, height: 245 },
         action: {
           type: 'richmenuswitch',
           richMenuAliasId: 'playground-4',
           data: httpBuildQuery({ from: RICHMENU_ALIAS, to: 'playground-4' }),
         },
       },
-      {
+      { // 開啟 URL
         bounds: { x: 0, y: 485, width: 1332, height: 375 },
         action: {
           type: 'uri',
           uri: 'https://developers.line.biz/en/reference/messaging-api/#uri-action',
         },
       },
-      {
+      { // 開啟 URL 查看網址
         bounds: { x: 1332, y: 485, width: 380, height: 375 },
         action: {
           type: 'message',
           text: '網址為:\nhttps://developers.line.biz/en/reference/messaging-api/#uri-action',
         },
       },
-      {
+      { // 在外部瀏覽器開啟
         bounds: { x: 0, y: 860, width: 1332, height: 375 },
         action: {
           type: 'uri',
           uri: 'https://developers.line.biz/en/reference/messaging-api/?openExternalBrowser=1#uri-action',
         },
       },
-      {
+      { // 在外部瀏覽器開啟 查看網址
         bounds: { x: 1332, y: 860, width: 380, height: 375 },
         action: {
           type: 'message',
           text: '網址為:\nhttps://developers.line.biz/en/reference/messaging-api/?openExternalBrowser=1#uri-action',
         },
       },
-      {
+      { // 在 APP 內的 Chrome 開啟
         bounds: { x: 0, y: 1235, width: 1332, height: 375 },
         action: {
           type: 'uri',
           uri: 'https://developers.line.biz/en/reference/messaging-api/?openInAppBrowser=0#uri-action',
         },
       },
-      {
+      { // 在 APP 內的 Chrome 開啟 查看網址
         bounds: { x: 1332, y: 1235, width: 380, height: 375 },
         action: {
           type: 'message',