jeter20131220 3 tahun lalu
induk
melakukan
f8ac26224a
6 mengubah file dengan 104 tambahan dan 187 penghapusan
  1. 3 88
      desktop11/goto.js
  2. 8 3
      mobile/index.html
  3. 78 81
      mobile/script/goto.js
  4. 14 14
      mobile/style.css
  5. 0 0
      mobile/style.css.map
  6. 1 1
      mobile/style.scss

+ 3 - 88
desktop11/goto.js

@@ -249,92 +249,7 @@ $(document).ready(function () {
   $("#date").datepicker();
 });
 
-// // javascript document
-// // This is called with the results from from FB.getLoginStatus().
-
-
-// function statusChangeCallback(response) {
-//   console.log('statusChangeCallback');
-//   console.log(response);
-//   // The response object is returned with a status field that lets the
-//   // app know the current login status of the persopren.
-//   // Full docs on the response object can be found in the documentation
-//   // for FB.getLoginStatus().
-//   if (response.status === 'connected') {
-//     // Logged into your app and Facebook.
-//     login(response.authResponse.accessToken);
-//   } else if (response.status === 'not_authorized') {
-//     // The person is logged into Facebook, but not your app.
-//     console.log('The person is logged into Facebook, but not your app');
-//   } else {
-//     // The person is not logged into Facebook, so we're not sure if
-//     // they are logged into this app or not.
-//     console.log("The person is not logged into Facebook");
-//   }
-// }
-// // This function is called when someone finishes with the Login
-// // Button.  See the onlogin handler attached to it in the sample
-// // code below.
-// function checkLoginState() {
-//   FB.getLoginStatus(function (response) {
-//     statusChangeCallback(response);
-//   });
-// }
-// window.fbAsyncInit = function () {
-//   FB.init({
-//     appId: '1388696554848391',
-//     cookie: true,  // enable cookies to allow the server to access 
-//     // the session
-//     xfbml: true,  // parse social plugins on this page
-//     version: 'v11.0' // use version 2.2
-//   });
-// };
-// // Now that we've initialized the JavaScript SDK, we call
-// // FB.getLoginStatus().  This function gets the state of the
-// // person visiting this page and can return one of three states to
-// // the callback you provide.  They can be:
-// //
-// // 1. Logged into your app ('connected')
-// // 2. Logged into Facebook, but not your app ('not_authorized')
-// // 3. Not logged into Facebook and can't tell if they are logged into
-// //    your app or not.
-// //
-// // These three cases are handled in the callback function.
-// // Load the SDK asynchronously
-// (function (d, s, id) {
-//   var js, fjs = d.getElementsByTagName(s)[0];
-//   if (d.getElementById(id)) return;
-//   js = d.createElement(s); js.id = id;
-//   js.src = "//connect.facebook.net/en_US/sdk.js";
-//   fjs.parentNode.insertBefore(js, fjs);
-// }(document, "script", "facebook-jssdk"));
-// // Here we run a very simple test of the Graph API after login is
-// // successful.  See statusChangeCallback() for when this call is made.
-// function loginNEMI(token) {
-//   // 把 access_token 傳至後端再做資料拿取
-//   console.log("Welcome!  Fetching your information.... ");
-//   var xhr = new XMLHttpRequest();
-//   xhr.open("POST", "/login", true);
-//   xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-//   xhr.onreadystatechange = function () {
-//     if (xhr.readyState === 4 && xhr.status === 200) {
-//       if (JSON.parse(xhr.responseText).status === "ok")
-//         location.href = "/index";
-//       else
-//         alert("something wrong!");
-//     }
-//   };
-//   xhr.send("token=" + token);
-// }
-// $("#fb-button").click(function(){
-//   FB.login(function (response) {
-//     statusChangeCallback(response);
-//     console.log(response);
-//   }, { scope: 'public_profile,email' });
-
-//   // console.log('FB API回傳資料: ' + JSON.stringify(response));
 
-// });
 window.fbAsyncInit = function () {
   FB.init({
     appId: '1388696554848391', // 填入 FB APP ID
@@ -377,9 +292,9 @@ function statusChangeCallback(response) {
   }
 
   // 未登入 FB
-  else {
-    target.innerHTML = "未登入 FB";
-  }
+  // else {
+  //   target.innerHTML = "未登入 FB";
+  // }
 }
 
 

+ 8 - 3
mobile/index.html

@@ -43,7 +43,7 @@
 </head>
 
 <body id="top">
-    <script>
+    <!-- <script>
         function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
             if (response.status === 'connected') {  // 已登入
                 testAPI();
@@ -83,7 +83,7 @@
                 }
             });
         };
-    </script>
+    </script> -->
     <nav class="navigation">
         <div class="logo">
             <a href="https://hhh.com.tw/"><img src="./img/logo/logomain-3.webp" alt=""></a>
@@ -428,7 +428,12 @@
                     </fb:login-button>
                     <div id="status"></div>
                 </div> -->
-                <button  id="fb_login" onclick="fb_login()"><img src="./img/logo/facebook.png" alt=""><p><span class="sapn-line">|</span>使用fb填入信箱與姓名</p></button>
+                <div id="fb_login">
+                    <button id="fb-button"  ><img src="./img/logo/facebook.png" alt="">
+                        <p><span style="padding-right:5vw; font-size: 25px;">|</span>使用fb填入信箱與姓名</p>
+                    </button>
+                    <span id="FB_STATUS_2"></span>
+                </div>
                 <input type="text" name="email" id="email" placeholder="請輸入信箱" required>
                 <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
                 <input type="text" name="phone" id="phone" placeholder="請輸入電話" required>

+ 78 - 81
mobile/script/goto.js

@@ -220,84 +220,81 @@ $(window).scroll(function(){
     
 });
 
-// function statusChangeCallback(response) {
-//   console.log('statusChangeCallback');
-//   console.log(response);
-//   // The response object is returned with a status field that lets the
-//   // app know the current login status of the persopren.
-//   // Full docs on the response object can be found in the documentation
-//   // for FB.getLoginStatus().
-//   if (response.status === 'connected') {
-//     // Logged into your app and Facebook.
-//     login(response.authResponse.accessToken);
-//   } else if (response.status === 'not_authorized') {
-//     // The person is logged into Facebook, but not your app.
-//     console.log('The person is logged into Facebook, but not your app');
-//   } else {
-//     // The person is not logged into Facebook, so we're not sure if
-//     // they are logged into this app or not.
-//     console.log("The person is not logged into Facebook");
-//   }
-// }
-// // This function is called when someone finishes with the Login
-// // Button.  See the onlogin handler attached to it in the sample
-// // code below.
-// function checkLoginState() {
-//   FB.getLoginStatus(function (response) {
-//     statusChangeCallback(response);
-//   });
-// }
-// window.fbAsyncInit = function () {
-//   FB.init({
-//     appId: '1388696554848391',
-//     cookie: true,  // enable cookies to allow the server to access 
-//     // the session
-//     xfbml: true,  // parse social plugins on this page
-//     version: 'v11.0' // use version 2.2
-//   });
-// };
-// // Now that we've initialized the JavaScript SDK, we call
-// // FB.getLoginStatus().  This function gets the state of the
-// // person visiting this page and can return one of three states to
-// // the callback you provide.  They can be:
-// //
-// // 1. Logged into your app ('connected')
-// // 2. Logged into Facebook, but not your app ('not_authorized')
-// // 3. Not logged into Facebook and can't tell if they are logged into
-// //    your app or not.
-// //
-// // These three cases are handled in the callback function.
-// // Load the SDK asynchronously
-// (function (d, s, id) {
-//   var js, fjs = d.getElementsByTagName(s)[0];
-//   if (d.getElementById(id)) return;
-//   js = d.createElement(s); js.id = id;
-//   js.src = "//connect.facebook.net/en_US/sdk.js";
-//   fjs.parentNode.insertBefore(js, fjs);
-// }(document, "script", "facebook-jssdk"));
-// // Here we run a very simple test of the Graph API after login is
-// // successful.  See statusChangeCallback() for when this call is made.
-// function loginNEMI(token) {
-//   // 把 access_token 傳至後端再做資料拿取
-//   console.log("Welcome!  Fetching your information.... ");
-//   var xhr = new XMLHttpRequest();
-//   xhr.open("POST", "/login", true);
-//   xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-//   xhr.onreadystatechange = function () {
-//     if (xhr.readyState === 4 && xhr.status === 200) {
-//       if (JSON.parse(xhr.responseText).status === "ok")
-//         location.href = "/index";
-//       else
-//         alert("something wrong!");
-//     }
-//   };
-//   xhr.send("token=" + token);
-// }
-// // custom fb login button
-// function fb_login() {
-//   // FB 第三方登入,要求公開資料與email
-//   FB.login(function (response) {
-//     statusChangeCallback(response);
-//     console.log(response);
-//   }, { scope: 'public_profile,email' });
-// }
+window.fbAsyncInit = function () {
+  FB.init({
+    appId: '1388696554848391', // 填入 FB APP ID
+    cookie: true,
+    xfbml: true,
+    version: 'v11.0'
+  });
+
+  FB.getLoginStatus(function (response) {
+    statusChangeCallback(response);
+  });
+};
+
+// 處理各種登入身份
+function statusChangeCallback(response) {
+  console.log(response);
+  var target = document.getElementById("FB_STATUS_2"),
+    html = "";
+
+  // 登入 FB 且已加入會員
+  if (response.status === 'connected') {
+    html = "已登入 FB,並加入 WFU BLOG DEMO 應用程式<br/>";
+
+    FB.api('/me?fields=id,name,email', function (response) {
+      console.log('FB API回傳資料: ' + JSON.stringify(response));
+      if (response.id) {
+        // 設定欄位預設值
+        document.getElementById("email").value = response.email;
+        document.getElementById("name").value = response.name;
+
+        // 隱藏FB登入按鈕
+        document.getElementById("fb_login").style.display = 'none';
+    }
+    });
+  }
+
+  // 登入 FB, 未偵測到加入會員
+  else if (response.status === "not_authorized") {
+    target.innerHTML = "已登入 FB,但未加入 WFU BLOG DEMO 應用程式";
+  }
+
+  // 未登入 FB
+  // else {
+  //   target.innerHTML = "未登入 FB";
+  // }
+}
+
+
+// 點擊登入
+$("#fb_login").click(function () {
+  // 進行登入程序
+  FB.login(function (response) {
+    statusChangeCallback(response);
+  }, {
+    scope: 'public_profile,email'
+
+  },
+  );
+
+});
+
+// 點擊登出
+// $("#FB_logout").click(function() {
+// FB.logout(function(response) {
+// statusChangeCallback(response);
+// });
+// });
+
+// 載入 FB SDK
+(function (d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s);
+  js.id = id;
+  js.src = "https://connect.facebook.net/zh_TW/sdk.js";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));
+

+ 14 - 14
mobile/style.css

@@ -769,7 +769,7 @@ body .arrow:hover {
   margin: 0 auto;
 }
 
-#contact-us #contact-form #fb_login {
+#contact-us #contact-form #fb-button {
   margin: 15px auto;
   width: 85vw;
   height: 60px;
@@ -782,14 +782,14 @@ body .arrow:hover {
   color: #3C3C3C;
 }
 
-#contact-us #contact-form #fb_login p {
+#contact-us #contact-form #fb-button p {
   position: absolute;
   top: 2vw;
   font-weight: normal;
 }
 
 @media screen and (max-width: 1024px) {
-  #contact-us #contact-form #fb_login p {
+  #contact-us #contact-form #fb-button p {
     top: 2vw;
     right: 10vw;
     font-size: 20px;
@@ -797,19 +797,19 @@ body .arrow:hover {
 }
 
 @media screen and (max-width: 767px) {
-  #contact-us #contact-form #fb_login p {
+  #contact-us #contact-form #fb-button p {
     top: 1.8vw;
     right: 1vw;
   }
 }
 
 @media screen and (max-width: 350px) {
-  #contact-us #contact-form #fb_login p {
+  #contact-us #contact-form #fb-button p {
     font-size: 16px;
   }
 }
 
-#contact-us #contact-form #fb_login p .sapn-line {
+#contact-us #contact-form #fb-button p .sapn-line {
   padding-right: 1vw;
   font-size: 28px;
   color: #8E8E8E;
@@ -817,31 +817,31 @@ body .arrow:hover {
 }
 
 @media screen and (min-width: 700px) {
-  #contact-us #contact-form #fb_login p .sapn-line {
+  #contact-us #contact-form #fb-button p .sapn-line {
     display: none;
   }
 }
 
 @media screen and (max-width: 767px) {
-  #contact-us #contact-form #fb_login p .sapn-line {
+  #contact-us #contact-form #fb-button p .sapn-line {
     padding-right: 5vw;
   }
 }
 
 @media screen and (max-width: 400px) {
-  #contact-us #contact-form #fb_login p .sapn-line {
+  #contact-us #contact-form #fb-button p .sapn-line {
     padding-right: 2vw;
   }
 }
 
 @media screen and (max-width: 350px) {
-  #contact-us #contact-form #fb_login p .sapn-line {
+  #contact-us #contact-form #fb-button p .sapn-line {
     padding-right: 3vw;
     font-size: 27px;
   }
 }
 
-#contact-us #contact-form #fb_login img {
+#contact-us #contact-form #fb-button img {
   position: absolute;
   left: 30px;
   top: 15px;
@@ -852,17 +852,17 @@ body .arrow:hover {
 }
 
 @media screen and (max-width: 350px) {
-  #contact-us #contact-form #fb_login img {
+  #contact-us #contact-form #fb-button img {
     left: 15px;
   }
 }
 
-#contact-us #contact-form #fb_login:hover {
+#contact-us #contact-form #fb-button:hover {
   background-color: #2a4f91;
   color: #fff;
 }
 
-#contact-us #contact-form #fb_login:hover img {
+#contact-us #contact-form #fb-button:hover img {
   -webkit-filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
           filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
 }

File diff ditekan karena terlalu besar
+ 0 - 0
mobile/style.css.map


+ 1 - 1
mobile/style.scss

@@ -572,7 +572,7 @@ body {
             display: block;
             margin: 0 auto;
         }
-        #fb_login{
+        #fb-button{
             margin: 15px auto;
             width: 85vw;
             height: 60px;

Beberapa file tidak ditampilkan karena terlalu banyak file yang berubah dalam diff ini