重寫健康護照顯示部分

src/fe/healthpassport/css/all.scss

@@ -7,6 +7,7 @@
 @import "module/img-scale";
 @import "module/px2em";
 @import "module/frosted";
+@import "module/transition";
 
 @import "variable/base";
 

src/fe/healthpassport/css/component/_section.scss

@@ -1,6 +1,7 @@
 .section {
     opacity: 0;
     visibility: hidden;
+    pointer-events: none;
     position: absolute;
     overflow-y: auto;
     overflow-x: hidden;
@@ -15,4 +16,8 @@
         padding-top: 0;
         transform-origin: center top;
     }
+    &.--is-active {
+        visibility: visible;
+        pointer-events: auto;
+    }
 }

src/fe/healthpassport/css/layout/_body.scss

@@ -24,8 +24,7 @@ p {
     top: 0;
     left: 50%;
     transform: translateX(-50%);
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden;
     width: 100%;
     height: 100%;
     max-width: 640px;
@@ -35,7 +34,9 @@ p {
 }
 
 .wrapper__line-scroll-fixed {
-    position: relative;
+    position: absolute;
+    left: 0;
+    top: 0;
     width: 100%;
     height: calc(100% + 10px);
     z-index: 1;
@@ -47,6 +48,7 @@ p {
     left: 0;
     width: 100%;
     height: 100%;
+    overflow: hidden;
     z-index: 1;
 }
 

src/fe/healthpassport/css/module/_transition.scss

@@ -0,0 +1,12 @@
+.fade-enter-active, 
+.fade-leave-active {
+  transition: opacity .25s;
+}
+  
+.fade-enter {
+  opacity: 1!important;
+}
+.fade-leave-to {
+  opacity: 0!important;
+}
+  

src/fe/healthpassport/css/page/_passport.scss

@@ -130,7 +130,8 @@
         position: fixed;
         left: 50%;
         transform: translateX(-50%);
-        bottom: 5em;
+        // bottom: 5em;
+        bottom: 3em;
         width: 89%;
         margin: 0 auto;
         box-shadow: 0 0.2em 0.5em rgba(#000, 0.2);

src/fe/healthpassport/index.html

@@ -20,7 +20,7 @@
   <meta property="og:description" content="" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
     integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-  <link rel="stylesheet" href="./css/all.css?v=202310121821">
+  <link rel="stylesheet" href="./css/all.css?2bfccafdcea738f81dfd47159974209c4bb34e27">
 
 </head>
 
@@ -379,9 +379,10 @@
       </section>
       <!-- 活動辦法 methods -->
       <section class="section methods wrapper__line-scroll-fixed">
-        <div class="backform"><span>
-            << /span>
-              <p>回上一頁</p>
+        <div class="backform">
+          <span>
+            <p>回上一頁</p>
+          </span>
         </div>
         <div class="section__container methods__container">
           <p>
@@ -503,9 +504,9 @@
   <script defer src="./js/utlis.js?7cbe65f53be79cd4b77a5eb4a8276309636ce117"></script>
   <script defer src="./js/services/userModel.js"></script>
   <script defer src="./js/services/index.js?94e36845bbde69677cfe04ccd35e1cab693f8bfd"></script>
-  <script defer src="./js/register.js?9d81090955cff53a869bf5bbddb30fbca297fc41"></script>
-  <script defer src="./js/passport.js?5d68a597e0db4dfda46a82ae1ac395ee680dd7df"></script>
-  <script defer src="./js/base.js?9fb825c8551ab8f7975d17a190781d6d5e38182a"></script>
+  <script defer src="./js/register.js?773e635dd81c36c2ba24f139b95017c8512eb9f7"></script>
+  <script defer src="./js/passport.js?7077ad7a5eb513e7ddd4288761f1a77b55a5d75f"></script>
+  <script defer src="./js/base.js?40b7843a8fd152309d08b4fd1e3ac8bc737c2884"></script>
   <!-- <script>
     // init vConsole
     var vConsole = new VConsole();

src/fe/healthpassport/js/base.js

@@ -1,15 +1,28 @@
-base = function () {
+function useBase() {
 	//private menbers
 	let isActivityOver = false;
 	let userProfile = null;
 	let userData = null;
-
+	let passport;
+	let register;
 
 	//private methods
 	function init() {
 
 		console.log('base init')
 
+		passport = new usePassport({
+			goToRegister,
+			insertFromData
+		});
+	
+		register = new useRegister({
+			myAlert,
+			sectionFadeOut,
+			sectionFadeIn,
+			buildPassportHandler,
+		});
+
 		// 判斷是否活動已結束
 		// entranceTimer();
 
@@ -37,17 +50,17 @@ base = function () {
 					console.log("userData: ",userData)
 					
 					if(userData === null) {
-						console.log('LinePicHandler');
-						register.LinePicHandler(profile.pictureUrl);
 						console.log('goToRegister');
 						goToRegister();
+						console.log('LinePicHandler');
+						register.LinePicHandler(profile.pictureUrl);
 					}else {
+						console.log('goToPassport');
+						goToPassport();
 						console.log('buildPassportHandler');
 						passport.buildPassportHandler(userData);
 						console.log('insertFromData');
 						register.insertFromData(userData);
-						console.log('goToPassport');
-						goToPassport();
 						console.log('sendCompleteMessage');
 						GameService.getInstanse().sendCompleteMessage();
 					}
@@ -80,8 +93,18 @@ base = function () {
 			// console.log("goToActivity click");
 			goToMethods();
 		});
+	}
 
-		
+	function insertFromData(theUserData) {
+		if (register) {
+			register.insertFromData(theUserData);
+		}
+	}
+
+	function buildPassportHandler(theUserData) {
+		if (passport) {
+			passport.buildPassportHandler(theUserData);
+		}
 	}
 
 	// 活動期間判斷
@@ -135,22 +158,45 @@ base = function () {
 
 	// page進入動態
 	function sectionFadeIn(el) {
-		$(el).show();
-		gsap.to(el, {
-			duration: 0.3,
-			autoAlpha: 1
-		})
+		const elememt = document.querySelector(el);
+		if (elememt) {
+			elememt.classList.remove('fade-leave-active');
+			elememt.classList.remove('fade-leave-to');
+			elememt.classList.add('--is-active');
+			elememt.classList.add('fade-enter-active');
+			sleep(300).then(() => {
+				elememt.classList.add('fade-enter');
+			});
+		}
+		// $(el).show();
+		// gsap.to(el, {
+		// 	duration: 0.3,
+		// 	autoAlpha: 1
+		// })
 	}
 
 	// page離開動態
 	function sectionFadeOut(el) {
-		gsap.to(el, {
-			duration: 0.3,
-			autoAlpha: 0,
-			onComplete: function() {
-				$(el).hide();
-			}
-		})
+		const elememt = document.querySelector(el);
+		if (elememt) {
+			elememt.classList.add('fade-leave-active');
+			elememt.classList.add('fade-leave-to');
+			sleep(300).then(() => {
+				elememt.classList.remove('fade-enter');
+				elememt.classList.remove('fade-enter-active');
+				elememt.classList.remove('fade-leave-active');
+				elememt.classList.remove('fade-leave-active');
+				elememt.classList.remove('fade-leave-to');
+				elememt.classList.remove('--is-active');
+			});
+		}
+		// gsap.to(el, {
+		// 	duration: 0.3,
+		// 	autoAlpha: 0,
+		// 	onComplete: function() {
+		// 		$(el).hide();
+		// 	}
+		// })
 	}
 
 	{
@@ -177,4 +223,4 @@ base = function () {
 	};
 };
 
-window.base = new base();
+window.base = new useBase();

src/fe/healthpassport/js/passport.js

@@ -1,15 +1,15 @@
-passport = function () {
+function usePassport(delegate) {
+	
+	const options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
 	//private menbers
 	let tagData = null;
-	let convertData = {}
-
-
-
+	let convertData = {};
 
 	//private methods
 	function init() {
 
-		console.log('passport init')
+		console.log('passport init');
 
 		getTagData();
 
@@ -27,8 +27,8 @@ passport = function () {
 
 		$(".passport__edit").on("click", function(){
 			userData = GameService.getInstanse().getUserData();
-			register.insertFromData(userData);
-			window.base.goToRegister();
+			delegate.insertFromData(userData);
+			delegate.goToRegister();
 		});
 	}
 
@@ -190,4 +190,4 @@ passport = function () {
 	};
 };
 
-var passport = new passport();
+// var passport = new usePassport();

src/fe/healthpassport/js/register.js

@@ -1,5 +1,5 @@
 
-register = function () {
+function useRegister(delegate) {
 	let _noteScrollTop = 0;
 	let linePicUrl = null;
 	let lineBase64Data = null;
@@ -69,7 +69,7 @@ register = function () {
 			if(checkRegister()) {
 				sendRegister();
 			}else {
-				window.base.myAlert(registerAlert);
+				delegate.myAlert(registerAlert);
 				$(this).removeClass("disable");
                 $(".form-submit p").text("下一步");
 			}
@@ -80,23 +80,21 @@ register = function () {
 	function LinePicHandler(url) {
 
 		linePicUrl = url;
-		$(".photo__img").html("");
-		$(".photo__img").append(`
-			<img src="${linePicUrl}"/>
-		`);
-		
-		$(".photo .load-wrapp ").hide();
-
 		const imageURL = linePicUrl;
 		if(imageURL.trim() !== '') {
 			const img = new Image();
-			img.src = imageURL;
+			img.crossOrigin = 'anonymous';
+			img.onload = function() {
 
-			const canvas = document.createElement("canvas");
-			const ctx = canvas.getContext("2d");
-			img.crossOrigin = 'Anonymous';
+				$(".photo__img").html("");
+				$(".photo__img").append(`
+					<img src="${linePicUrl}"/>
+				`);
+				
+				$(".photo .load-wrapp ").hide();
 
-			img.onload = function() {
+				const canvas = document.createElement("canvas");
+				const ctx = canvas.getContext("2d");
 				canvas.width = img.width;
 				canvas.height = img.height;
 				ctx.drawImage(img, 0, 0);
@@ -106,8 +104,8 @@ register = function () {
 				finalase64Data = lineBase64Data;
 
 				// console.log(finalase64Data)
-
 			}
+			img.src = imageURL;
 		}
 	}
 
@@ -193,7 +191,6 @@ register = function () {
 
 		GameService.getInstanse().userUpdatePhoto(finalase64Data).then(res => {
 			console.log('userUpdatePhoto：', res);
-			// base.myAlert('成功上傳。');
 		});
 		
 	}
@@ -368,9 +365,9 @@ register = function () {
 	
 						console.log("userData: ",userData)
 						
-						window.base.sectionFadeOut(".register");
-						window.base.sectionFadeIn(".passport");
-						passport.buildPassportHandler(userData)
+						delegate.sectionFadeOut(".register");
+						delegate.sectionFadeIn(".passport");
+						delegate.buildPassportHandler(userData)
 
 						GameService.getInstanse().sendCompleteMessage();
 					})
@@ -380,7 +377,7 @@ register = function () {
 			.catch(_err => {
 				console.log(_err);
 				// let msg = err.message.replaceAll("Error:", "");
-				window.base.myAlert(_err);
+				delegate.myAlert(_err);
 				$(".register .form-submit").removeClass("disable");
                 $(".register .form-submit p").text("下一步");
 			})
@@ -424,4 +421,4 @@ register = function () {
 	};
 };
 
-var register = new register();
+// var register = new useRegister();