test

misa-event/index.html

@@ -47,14 +47,15 @@
     <center>
       <button onclick="login()">登入 LINE</button>
       <button onclick="logout()">登出 LINE</button>
+      <button onclick="sendShare()">測試按鈕</button>
       <button id="senddm" onclick="shareTargetPicker()">發傳單給最多十個好友</button>
     </center>
   </div>
 
   <p id="load">ChoozMo</p>
-  <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
-  <script src="js/liff-init.js?1234"></script>
-  <script src="js/liff-functions.js?12345"></script>
+  <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
+  <script src="js/liff-init.js"></script>
+  <script src="js/liff-functions.js"></script>
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 </body>
 

misa-event/js/liff-functions.js

@@ -324,42 +324,232 @@ function shareTargetPicker() {
       external: true
     });
   }
-  
-  // if (liff.isApiAvailable('shareTargetPicker')) {
-  //   liff.shareTargetPicker([
-  //     {
-  //       type: "text",
-  //       text: "Hello, World!"
-  //     }
-  //   ])
-  //     .then(
-  //       console.log("ShareTargetPicker was launched")
-  //     ).catch(function(res) {
-  //       console.log("Failed to launch ShareTargetPicker")
-  //     })
-  // }
+}
+
+async function sendShare() {
+  const result = await liff.shareTargetPicker([
+    {
+      "type": "bubble",
+      "hero": {
+        "type": "box",
+        "layout": "vertical",
+        "contents": [
+          {
+            "type": "box",
+            "layout": "vertical",
+            "contents": [
+              {
+                "type": "text",
+                "text": "MISA 新年度 新思維",
+                "color": "#ffffff",
+                "align": "center",
+                "offsetTop": "3px",
+                "size": "lg",
+                "weight": "bold"
+              }
+            ],
+            "backgroundColor": "#dd462b",
+            "paddingAll": "15px"
+          },
+          {
+            "type": "box",
+            "layout": "vertical",
+            "contents": [
+              {
+                "type": "image",
+                "size": "full",
+                "margin": "none",
+                "url": "https://upload.cc/i1/2023/01/07/U4iHYt.jpg"
+              }
+            ],
+            "paddingStart": "5px",
+            "paddingEnd": "5px",
+            "height": "220px",
+            "paddingTop": "10px"
+          }
+        ]
+      },
+      "body": {
+        "type": "box",
+        "layout": "vertical",
+        "contents": [
+          {
+            "type": "text",
+            "text": "【2023 新的一年如何翻轉慣性思考邏輯",
+            "weight": "bold",
+            "size": "sm",
+            "align": "center",
+            "wrap": true
+          },
+          {
+            "type": "text",
+            "text": "創造新思維模式】",
+            "weight": "bold",
+            "size": "sm",
+            "align": "center",
+            "wrap": true
+          },
+          {
+            "type": "text",
+            "text": "「經營管理」的面向非常廣泛",
+            "weight": "bold",
+            "size": "sm",
+            "align": "center",
+            "wrap": true,
+            "margin": "xxl"
+          },
+          {
+            "type": "text",
+            "text": "曾國棟院士透過線上課程視頻",
+            "weight": "bold",
+            "size": "sm",
+            "align": "center",
+            "wrap": true,
+            "margin": "sm"
+          },
+          {
+            "type": "text",
+            "text": "為您分析歸納在職場管理會遇到的問題",
+            "weight": "bold",
+            "size": "sm",
+            "align": "center",
+            "wrap": true,
+            "margin": "sm"
+          },
+          {
+            "type": "text",
+            "text": "跳出框架，充分建立基本的心理建設",
+            "weight": "bold",
+            "size": "sm",
+            "align": "center",
+            "margin": "sm",
+            "wrap": true
+          },
+          {
+            "type": "text",
+            "text": "幫助您減少摸索的時間",
+            "weight": "bold",
+            "size": "sm",
+            "align": "center",
+            "margin": "sm",
+            "wrap": true
+          },
+          {
+            "type": "text",
+            "text": "新年度跨越思維",
+            "weight": "bold",
+            "size": "sm",
+            "align": "center",
+            "margin": "xxl"
+          },
+          {
+            "type": "text",
+            "text": "讓您瞭解成功領導者在想什麼！",
+            "weight": "bold",
+            "size": "sm",
+            "align": "center",
+            "margin": "sm"
+          }
+        ]
+      },
+      "footer": {
+        "type": "box",
+        "layout": "vertical",
+        "spacing": "sm",
+        "contents": [
+          {
+            "type": "box",
+            "layout": "vertical",
+            "contents": [
+              {
+                "type": "button",
+                "style": "link",
+                "height": "sm",
+                "action": {
+                  "type": "uri",
+                  "label": "活動主頁",
+                  "uri": "https://www.misaglobal.org/event"
+                },
+                "color": "#ffffff"
+              }
+            ],
+            "backgroundColor": "#dd462b",
+            "cornerRadius": "md"
+          },
+          {
+            "type": "box",
+            "layout": "vertical",
+            "contents": [
+              {
+                "type": "button",
+                "style": "link",
+                "height": "sm",
+                "action": {
+                  "type": "uri",
+                  "label": "活動分享",
+                  "uri": "https://liff.googo.org/misa-event/"
+                },
+                "color": "#dd462b"
+              }
+            ],
+            "cornerRadius": "md",
+            "margin": "lg",
+            "borderColor": "#dd462b",
+            "borderWidth": "normal"
+          },
+          {
+            "type": "box",
+            "layout": "vertical",
+            "contents": [
+              {
+                "type": "button",
+                "style": "link",
+                "height": "sm",
+                "action": {
+                  "type": "uri",
+                  "label": "官方網站",
+                  "uri": "https://www.misaglobal.org/"
+                },
+                "color": "#dd462b"
+              }
+            ],
+            "cornerRadius": "md",
+            "margin": "lg",
+            "borderColor": "#dd462b",
+            "borderWidth": "normal"
+          },
+          {
+            "type": "box",
+            "layout": "vertical",
+            "contents": [
+              {
+                "type": "image",
+                "url": "https://static.kolable.com/images/misa/logo.png/120?v=1641520480847"
+              }
+            ],
+            "margin": "none",
+            "position": "absolute",
+            "offsetStart": "108px",
+            "offsetTop": "130px"
+          }
+        ],
+        "flex": 0,
+        "height": "200px"
+      }
+    }
+  ])
+  if (result) {
+    alert(`[${result.status}] Message sent!`)
+  } else {
+    const [majorVer, minorVer, patchVer] = (liff.getLineVersion() || "").split('.');
 
-  // liff.shareTargetPicker([
-  //   createFlexMessageData()
-  // ])
-  //   .then(function (res) {
-  //     if (res) {
-  //       // succeeded in sending a message through TargetPicker
-  //       console.log(`[${res.status}] Message sent!`)
-  //     } else {
-  //       const [majorVer, minorVer] = (liff.getLineVersion() || "").split('.');
-  //       if (parseInt(majorVer) == 10 && parseInt(minorVer) < 11) {
-  //         // LINE 10.3.0 - 10.10.0
-  //         // Old LINE will access here regardless of user's action
-  //         console.log('TargetPicker was opened at least. Whether succeeded to send message is unclear')
-  //       } else {
-  //         // LINE 10.11.0 -
-  //         // sending message canceled
-  //         console.log('TargetPicker was closed!')
-  //       }
-  //     }
-  //   }).catch(function (error) {
-  //     // something went wrong before sending a message
-  //     console.log('something wrong happen', error)
-  //   })
+    if (minorVer === undefined) {
+      alert('ShareTargetPicker was canceled in external browser')
+      return
+    }
+
+    if (parseInt(majorVer) >= 10 && parseInt(minorVer) >= 10 && parseInt(patchVer) > 0) {
+      alert('ShareTargetPicker was canceled in LINE app')
+    }
+  }
 }

yuri/index.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>MISA 資訊分享</title>
-  <link rel="shortcut icon" href="icon/icon.ico" type="image/x-icon" />
-  <link rel="icon" href="icon/icon.ico" type="image/x-icon" />
-  <link rel="stylesheet" href="/css/style.css">
-</head>
-
-<body>
-  <div id="message">
-    <button id="btnShare" onclick="sendShare()">Share Target Picker</button>
-    <button id="btnLogin" onclick="login()">Log In</button>
-    <button id="btnLogOut" onclick="logOut()">Log Out</button>
-  </div>
-
-  <p id="load">ChoozMo</p>
-  <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
-  <script src="js/liff-init.js"></script>
-  <script src="js/liff-functions.js"></script>
-  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-</body>
-
-</html>

yuri/js/liff-functions.js

@@ -1,136 +0,0 @@
-console.log('load');
-async function sendShare() {
-  const result = await liff.shareTargetPicker([
-    {
-      "type": "flex",
-      "altText": "Flex Message",
-      "contents": {
-        "type": "bubble",
-        "body": {
-          "type": "box",
-          "layout": "vertical",
-          "spacing": "md",
-          "contents": [
-            {
-              "type": "text",
-              "text": "BROWN'S ADVENTURE",
-              "size": "xl",
-              "gravity": "center",
-              "weight": "bold",
-              "wrap": true
-            },
-            {
-              "type": "box",
-              "layout": "vertical",
-              "spacing": "sm",
-              "margin": "lg",
-              "contents": [
-                {
-                  "type": "box",
-                  "layout": "baseline",
-                  "spacing": "sm",
-                  "contents": [
-                    {
-                      "type": "text",
-                      "text": "Date",
-                      "flex": 1,
-                      "size": "sm",
-                      "color": "#AAAAAA"
-                    },
-                    {
-                      "type": "text",
-                      "text": "Monday 25, 9:00PM",
-                      "flex": 4,
-                      "size": "sm",
-                      "color": "#666666",
-                      "wrap": true
-                    }
-                  ]
-                },
-                {
-                  "type": "box",
-                  "layout": "baseline",
-                  "spacing": "sm",
-                  "contents": [
-                    {
-                      "type": "text",
-                      "text": "Place",
-                      "flex": 1,
-                      "size": "sm",
-                      "color": "#AAAAAA"
-                    },
-                    {
-                      "type": "text",
-                      "text": "LINE Thailand",
-                      "flex": 4,
-                      "size": "sm",
-                      "color": "#666666",
-                      "wrap": true
-                    }
-                  ]
-                },
-                {
-                  "type": "box",
-                  "layout": "vertical",
-                  "margin": "xxl",
-                  "contents": [
-                    {
-                      "type": "spacer"
-                    },
-                    {
-                      "type": "image",
-                      "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/linecorp_code_withborder.png",
-                      "size": "xl",
-                      "aspectMode": "cover"
-                    },
-                    {
-                      "type": "text",
-                      "text": "You can enter the theater by using this code instead of a ticket",
-                      "margin": "xxl",
-                      "size": "xs",
-                      "color": "#AAAAAA",
-                      "wrap": true
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      }
-    }
-  ])
-  if (result) {
-    alert(`[${result.status}] Message sent!`)
-  } else {
-    const [majorVer, minorVer, patchVer] = (liff.getLineVersion() || "").split('.');
-
-    if (minorVer === undefined) {
-      alert('ShareTargetPicker was canceled in external browser')
-      return
-    }
-
-    if (parseInt(majorVer) >= 10 && parseInt(minorVer) >= 10 && parseInt(patchVer) > 0) {
-      alert('ShareTargetPicker was canceled in LINE app')
-    }
-  }
-}
-function logOut() {
-  liff.logout()
-  window.location.reload()
-}
-function login() {
-  liff.login();
-}
-async function main() {
-  await liff.init({ liffId: "1657798711-YMAv5Nd2" })
-  if (liff.isLoggedIn()) {
-    document.getElementById("btnShare").style.display = "block"
-    if (!liff.isInClient()) {
-      document.getElementById("btnLogOut").style.display = "block"
-    }
-  } else {
-    document.getElementById("btnLogin").style.display = "block"
-  }
-}
-main()

yuri/js/liff-init.js

@@ -1,84 +0,0 @@
-// ----- Configuration Zone! -----
-// Don't forget to change this to your LIFF ID
-
-const liffId = "1657798711-YMAv5Nd2";
-
-// Don't forget to change this to your LIFF ID
-
-liff.init(
-  { liffId: liffId },
-  () => {
-    initLIFF();
-  },
-  err => {
-    window.alert(err);
-  }
-);
-function initLIFF() {
-  if (liff.isLoggedIn()) {
-    liff
-      .getProfile()
-      .then(profile => {
-        document.getElementById("profileImage").src = profile.pictureUrl;
-//        document.getElementById("userId").innerHTML = profile.userId;
-  //      document.getElementById("displayName").innerHTML = profile.displayName;
-  //      document.getElementById("statusMessage").innerHTML =
-    //      profile.statusMessage;
-//        document.getElementById("pictureUrl").href = profile.pictureUrl;
-  //      document.getElementById("pictureUrl").innerHTML = profile.pictureUrl;
-    //    document.getElementById(
-      //    "email"
-      //  ).innerHTML = liff.getDecodedIDToken().email;
-      })
-      .catch(e => {
-      //  document.getElementById("userId").innerHTML = "No data, " + e;
-      //  document.getElementById("displayName").innerHTML = "No data, " + e;
-      //  document.getElementById("statusMessage").innerHTML = "No data, " + e;
-       // document.getElementById("pictureUrl").innerHTML = "No data, " + e;
-        //document.getElementById("email").innerHTML = "No data, " + e;
-      });
-  } else {
-//    document.getElementById("userId").innerHTML = "No data, Login first";
-  //  document.getElementById("displayName").innerHTML = "No data, Login first";
- //   document.getElementById("statusMessage").innerHTML = "No data, Login first";
-  //  document.getElementById("pictureUrl").innerHTML = "No data, Login first";
-  //  document.getElementById("email").innerHTML = "No data, Login first";
-  }
-
-//  document.getElementById("getOS").innerHTML = liff.getOS();
-  //document.getElementById("getLanguage").innerHTML = liff.getLanguage();
- // document.getElementById("getVersion").innerHTML = liff.getVersion();
- // document.getElementById("isInClient").innerHTML = liff.isInClient();
-  //document.getElementById("isLoggedIn").innerHTML = liff.isLoggedIn();
-  var context = liff.getContext();
-  if (context !== null) {
-//    document.getElementById("context_type").innerHTML = context.type;
- //   document.getElementById("context_viewType").innerHTML = context.viewType;
-  //  document.getElementById("context_userId").innerHTML = context.userId;
-    if (context.utouId) {
-//      document.getElementById("context_utouId").innerHTML = context.utouId;
-    } else {
- //     document.getElementById("context_utouId").innerHTML =
-  //      "You are not in the utou";
-    }
-    if (context.roomId) {
-//      document.getElementById("context_roomId").innerHTML = context.roomId;
-    } else {
- //     document.getElementById("context_roomId").innerHTML =
-  //      "You are not in the room";
-    }
-    if (context.groupId) {
-  //    document.getElementById("context_groupId").innerHTML = context.groupId;
-    } else {
-  //    document.getElementById("context_groupId").innerHTML =
-   //     "You are not in the group ";
-    }
-  } else {
- //   document.getElementById("context_type").innerHTML = "No data.";
-  //  document.getElementById("context_viewType").innerHTML = "No data.";
-   // document.getElementById("context_userId").innerHTML = "No data.";
-   // document.getElementById("context_utouId").innerHTML = "No data.";
-    //document.getElementById("context_roomId").innerHTML = "No data.";
-   // document.getElementById("context_groupId").innerHTML = "No data.";
-  }
-}