Jared преди 2 години
родител
ревизия
a61418809a
променени са 3 файла, в които са добавени 298 реда и са изтрити 43 реда
  1. 255 0
      index copy.html
  2. 1 1
      js/liff-functions.js
  3. 42 42
      js/liff-init.js

+ 255 - 0
index copy.html

@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>LIFF 2.0 Example</title>
+    <link rel="shortcut icon" href="icon/icon.ico" type="image/x-icon" />
+    <link rel="icon" href="icon/icon.ico" type="image/x-icon" />
+    <style media="screen">
+      body {
+        background: #eceff1;
+        color: rgba(0, 0, 0, 0.87);
+        font-family: Roboto, Helvetica, Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+      }
+      #message {
+        background: white;
+        max-width: 1000px;
+        margin: 10px auto 16px;
+        padding: 32px 24px;
+        border-radius: 10px;
+      }
+      #message h2 {
+        color: #ffa100;
+        font-weight: bold;
+        font-size: 30px;
+        margin: 0 0 8px;
+      }
+      #message h1 {
+        font-size: 22px;
+        font-weight: 300;
+        color: rgba(0, 0, 0, 0.6);
+        margin: 0 0 16px;
+      }
+      #message p {
+        line-height: 140%;
+        margin: 16px 0 24px;
+        font-size: 14px;
+      }
+      #message a {
+        display: block;
+        text-align: center;
+        background: #039be5;
+        text-transform: uppercase;
+        text-decoration: none;
+        color: white;
+        padding: 16px;
+        border-radius: 4px;
+      }
+      #message,
+      #message a {
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      }
+      #load {
+        color: rgba(0, 0, 0, 0.4);
+        text-align: center;
+        font-size: 13px;
+      }
+      @media (max-width: 600px) {
+        body,
+        #message {
+          margin-top: 0;
+          background: white;
+          box-shadow: none;
+        }
+        body {
+          border-top: 16px solid #ffa100;
+        }
+      }
+      table {
+        margin-top: 10px;
+        border: 2px solid black;
+        border-collapse: collapse;
+        width: 100%;
+      }
+
+      table td {
+        border: 1px solid black;
+      }
+
+      table td.shrink {
+        white-space: wrap;
+        font-size: 19px;
+        padding: 5px;
+        background-color: yellow;
+      }
+      table td.shrink_context {
+        white-space: wrap;
+        font-size: 19px;
+        padding: 5px;
+        background-color: rgb(0, 255, 106);
+      }
+      table td.shrink_top {
+        white-space: nowrap;
+        background-color: black;
+        color: white;
+        font-size: 25px;
+      }
+      table td.expand {
+        width: 99%;
+        white-space: wrap;
+        font-size: 19px;
+        padding: 5px;
+      }
+      table td.expand_top {
+        width: 99%;
+        white-space: wrap;
+        background-color: black;
+      }
+      tr:hover {
+        background-color: gray;
+      }
+
+      button {
+        background-color: #4caf50; /* Green */
+        border: none;
+        color: white;
+        padding: 10px 10px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 16px;
+        border-radius: 5px;
+        -webkit-transition-duration: 0.4s; /* Safari */
+        transition-duration: 0.4s;
+        cursor: pointer;
+      }
+
+      button:hover {
+        background-color: honeydew;
+        color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <center><h2>LIFF 2.0 | Example</h2></center>
+
+      <center>
+        <img
+          src="https://firebasestorage.googleapis.com/v0/b/uce-bot.appspot.com/o/user.jpg?alt=media&token=554b90c5-562c-469a-bfee-f36b5e3f54c9"
+          style="border-radius: 10px;"
+          width="150px"
+          height="150px"
+          id="profileImage"
+        />
+      </center>
+      <center>
+        <button onclick="login()">liff.login()</button>
+        <button onclick="logout()">liff.logout()</button>
+        <button onclick="sendMessage()">liff.sendMessage()</button>
+        <button onclick="scanCode()">liff.scanCode()</button>
+        <button onclick="openWindow()">liff.openWindow()</button>
+        <button onclick="closeWindow()">liff.closeWindow()</button>
+        <button onclick="shareTargetPicker()">liff.shareTargetPicker()</button>
+      </center>
+      <table>
+        <tr>
+          <td class="shrink_top">* Profile</td>
+          <td class="expand_top">
+            <button onclick="getProfile()">View raw JSON Data</button>
+          </td>
+        </tr>
+        <tr>
+          <td class="shrink">userId</td>
+          <td class="expand" id="userId">Loading . . .</td>
+        </tr>
+        <tr>
+          <td class="shrink">displayName</td>
+          <td class="expand" id="displayName">Loading. . .</td>
+        </tr>
+        <tr>
+          <td class="shrink">statusMessage</td>
+          <td class="expand" id="statusMessage">Loading . . .</td>
+        </tr>
+        <tr>
+          <td class="shrink">Email</td>
+          <td class="expand" id="email">Loading . . .</td>
+        </tr>
+        <tr>
+          <td class="shrink">pictureUrl</td>
+          <td class="expand">
+            <a id="pictureUrl" target="_blank">Loading . . .</a>
+          </td>
+        </tr>
+        <tr>
+          <td class="shrink_top">* LIFF Context</td>
+          <td class="expand_top"></td>
+        </tr>
+        <tr>
+          <td class="shrink_context">liff.getOS()</td>
+          <td class="expand" id="getOS">Loading . . .</td>
+        </tr>
+        <tr>
+          <td class="shrink_context">liff.getLanguage()</td>
+          <td class="expand" id="getLanguage">Loading . . .</td>
+        </tr>
+        <tr>
+          <td class="shrink_context">liff.getVersion()</td>
+          <td class="expand" id="getVersion">Loading . . .</td>
+        </tr>
+        <tr>
+          <td class="shrink_context">liff.isInClient()</td>
+          <td class="expand" id="isInClient">Loading . . .</td>
+        </tr>
+        <tr>
+          <td class="shrink_context">liff.isLoggedIn()</td>
+          <td class="expand" id="isLoggedIn">Loading . . .</td>
+        </tr>
+        <tr>
+          <td class="shrink_context">liff.getAccessToken()</td>
+          <td class="expand" id="getAccessToken">
+            <button onclick="getAccessToken()">show AccessToken</button>
+          </td>
+        </tr>
+        <tr>
+          <td class="shrink_context">liff.getContext()</td>
+          <td class="expand" id="">
+            <button onclick="getContext()">show raw JSON Data</button>
+          </td>
+        </tr>
+        <tr>
+          <td class="shrink_context">| -> type</td>
+          <td class="expand" id="context_type">Loading . . .</td>
+        </tr>
+        <tr>
+          <td class="shrink_context">| -> viewType</td>
+          <td class="expand" id="context_viewType">Loading . . .</td>
+        </tr>
+        <tr>
+          <td class="shrink_context">| -> userId</td>
+          <td class="expand" id="context_userId">Loading . . .</td>
+        </tr>
+        <tr>
+          <td class="shrink_context">| -> utouId</td>
+          <td class="expand" id="context_utouId">Loading . . .</td>
+        </tr>
+        <tr>
+          <td class="shrink_context">| -> roomId</td>
+          <td class="expand" id="context_roomId">Loading . . .</td>
+        </tr>
+        <tr>
+          <td class="shrink_context">| -> groupId</td>
+          <td class="expand" id="context_groupId">Loading . . .</td>
+        </tr>
+      </table>
+    </div>
+
+    <p id="load">Develop with ♡ by Siratee K.</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>
+  </body>
+</html>

+ 1 - 1
js/liff-functions.js

@@ -78,7 +78,7 @@ function createFlexMessageData() {
           "contents": [
             {
               "type": "text",
-              "text": "ChoozMo",
+              "text": "ChoozMo x 引新聞",
               "color": "#ffffff66",
               "size": "sm"
             },

+ 42 - 42
js/liff-init.js

@@ -20,65 +20,65 @@ function initLIFF() {
       .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;
+//        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;
+      //  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("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();
+//  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;
+//    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;
+//      document.getElementById("context_utouId").innerHTML = context.utouId;
     } else {
-      document.getElementById("context_utouId").innerHTML =
-        "You are not in the utou";
+ //     document.getElementById("context_utouId").innerHTML =
+  //      "You are not in the utou";
     }
     if (context.roomId) {
-      document.getElementById("context_roomId").innerHTML = context.roomId;
+//      document.getElementById("context_roomId").innerHTML = context.roomId;
     } else {
-      document.getElementById("context_roomId").innerHTML =
-        "You are not in the room";
+ //     document.getElementById("context_roomId").innerHTML =
+  //      "You are not in the room";
     }
     if (context.groupId) {
-      document.getElementById("context_groupId").innerHTML = context.groupId;
+  //    document.getElementById("context_groupId").innerHTML = context.groupId;
     } else {
-      document.getElementById("context_groupId").innerHTML =
-        "You are not in the group ";
+  //    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.";
+ //   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.";
   }
 }