Created main page structure and animation effects

2022-11-19 11:50:00 -07:00
parent 6d1d87e4f6
commit a2421fad12
3 changed files with 189 additions and 8 deletions
--- a/www/js/main.js
+++ b/www/js/main.js
@@ -0,0 +1,116 @@
+openPerson = false
+
+$(() => {
+  $('a.openlink').click(function(e) {
+    e.preventDefault();
+  })
+
+  $('div.banner').click(function() {
+    if (!openPerson) {
+      // If no profile is open, open one...
+      openPerson = $(this).attr('data-person')
+
+      if (window.matchMedia('(orientation: portrait)').matches) {
+        // If we're opening in portrait mode...
+        $('.main.not' + openPerson).css({
+          height: '50vh',
+          minHeight: 0
+        })
+
+        $('.main.not' + openPerson).animate({
+          height: 0
+        }, {
+          duration: 300,
+          queue: false
+        })
+
+        $('#main-' + openPerson).animate({
+          minHeight: '100vh'
+        }, {
+          duration: 300,
+          queue: false,
+          complete: () => {
+            $('.main.not' + openPerson).css('width', 0)
+            $('#splash-' + openPerson).css({
+              width: '50vw',
+              height: '100vh'
+            })
+          }
+        })
+
+      } else {
+        // If we're opening in landscape mode...
+        $('#splash-' + openPerson).css('height', '100vh')
+
+        $('.main.not' + openPerson).animate({
+          width: 0
+        }, {
+          duration: 300,
+          queue: false
+        })
+
+        $('#splash-' + openPerson).animate({
+          width: '50vw'
+        }, {
+          duration: 300,
+          queue: true,
+          complete: () => {
+            $('.main.not' + openPerson).css({
+              height: 0,
+              minHeight: 0
+            })
+          }
+        })
+
+        // SHOW LINKS HERE
+      }
+    } else {
+      // If a profile is open, close it...
+      if (window.matchMedia('(orientation: portrait)').matches) {
+        // If we're closing in portrait mode...
+        $('.main.not' + openPerson).css('width', '100vw')
+
+        $('#main-' + openPerson).animate({
+          minHeight: '50vh'
+        }, {
+          duration: 300,
+          queue: false
+        })
+
+        $('.main.not' + openPerson).animate({
+          height: '50vh'
+        }, {
+          duration: 300,
+          queue: false,
+          complete: () => {
+            $('.main, .splash').removeAttr('style')
+            openPerson = false
+          }
+        })
+
+      } else {
+        // If we're closing in landscape mode...
+        $('.main.not' + openPerson).css('height', '100vh')
+
+        $('#splash-' + openPerson).animate({
+          width: 0
+        }, {
+          duration: 300,
+          queue: false
+        })
+
+        $('.main.not' + openPerson).animate({
+          width: '50vw'
+        }, {
+         duration: 300,
+         queue: false,
+         complete: () => {
+           $('.main, .splash').removeAttr('style')
+           openPerson = false
+         }
+        })
+
+      }
+    }
+  })
+})