FIXED: Addon: SGNFullPage: Issue #85: Uncaught error: $pageNav is und…

…efined in addon: SGNFullPage
SGNetworksIndia · Feb 14, 2023 · e2722c1 · e2722c1
1 parent d8e0a67
commit e2722c1
Show file tree

Hide file tree

Showing 3 changed files with 194 additions and 88 deletions.
diff --git a/demos/addons/fullpage.html b/demos/addons/fullpage.html
@@ -11,7 +11,6 @@
 		<meta charset="UTF-8">
 		<title>FullPage Addon - SGNUIKit Demo</title>
 		<script src="/src/js/SGNUIKit.loader.js"></script>
-		<!--<script src="/dist/js/SGNUIKit.loader.js"></script>-->
 		<style>
 			.color-block {
 				background-color: hsl(0, 0%, 80%);
@@ -35,7 +34,7 @@
 			}
 		</style>
 	</head>
-	<body class="sgn-fullpage-active">
+	<body>
 		<main>
 			<div class="sgn-fullpage text-white">
 				<div class="section blue-gradient d-flex container-center">Section-1</div>
@@ -53,9 +52,17 @@
 			</div>
 		</main>
 		<script>
-			SGNUIKit.setOnReadyListener((isReady) => {
+			/*$(function() {
+			 const $fullpages = $(".sgn-fullpage");
+			 console.log('Test:', $fullpages);
 
-			});
+			 if($fullpages.length > 0) {
+			 $fullpages.each(function() {
+			 const $this = $(this);
+			 $this.SGNFullPage();
+			 });
+			 }
+			 });*/
 		</script>
 	</body>
 </html>
diff --git a/src/addons/SGNFullPage/SGNFullPage.css b/src/addons/SGNFullPage/SGNFullPage.css
@@ -13,14 +13,31 @@
 	--sgn-fp-nav-active-size: 12px;
 }
 
+.sgn-fullpage-active > .sgn-atom-container > main > .sgn-container,
+.sgn-fullpage-active > main > .sgn-container,
+.sgn-fullpage {
+	flex: 1 0 100%;
+}
+
 .sgn-fullpage,
 .sgn-fullpage > section,
 .sgn-fullpage > .section {
 	height: 100vh;
 }
 
-.sgn-fullpage {
+.sgn-fullpage.fade > section,
+.sgn-fullpage.fade > .section,
+.sgn-fullpage > section.fade,
+.sgn-fullpage > .section.fade {
+	opacity: 0;
+	transition: opacity 2s ease-in-out;
+}
 
+.sgn-fullpage.fade > section.active,
+.sgn-fullpage.fade > .section.active,
+.sgn-fullpage > section.fade.active,
+.sgn-fullpage > .section.fade.active {
+	opacity: 1;
 }
 
 .sgn-fullpage > section.sgn-fp-slides,