From 868e5b7c020c95af87d27fd63976c36d4d652f72 Mon Sep 17 00:00:00 2001
From: Gerome Matilla <gerome.matilla07@gmail.com>
Date: Thu, 4 Jun 2020 09:13:56 +0800
Subject: [PATCH] add rotate animation on profile image

---
 css/profile-image.css       | 11 +++++++++++
 css/search-box.css          | 36 ++++++++++++++++++++++++++++++++++++
 css/style.css               |  1 +
 index.html                  |  1 +
 js/animate-profile-image.js | 36 ++++++++++++++++++++++++++++++++++++
 5 files changed, 85 insertions(+)
 create mode 100644 css/search-box.css
 create mode 100644 js/animate-profile-image.js

diff --git a/css/profile-image.css b/css/profile-image.css
index effae71..06914bb 100644
--- a/css/profile-image.css
+++ b/css/profile-image.css
@@ -29,3 +29,14 @@
   	justify-content: center;
   	align-items: center;
 }
+
+.rotateProfileAnim {
+	animation: rotate var(--transition-speed) 1;
+	animation-iteration-count: 1;
+	animation-play-state: paused;
+}
+
+@keyframes rotate {
+    from { -webkit-transform: rotate(0deg) } 
+    to { -webkit-transform: rotate(360deg) } 
+}
\ No newline at end of file
diff --git a/css/search-box.css b/css/search-box.css
new file mode 100644
index 0000000..cbc6b67
--- /dev/null
+++ b/css/search-box.css
@@ -0,0 +1,36 @@
+#searchBox {
+	background: var(--base-bg);
+	color: var(--base-color);
+	text-align: center;
+	font-family: roboto-bold;
+
+	width: 30vw;
+	height: 48px;
+	border: none;
+	border-radius: 24px;
+	
+	padding-left: 10px;
+	padding-right: 10px;
+	margin: 0;
+	opacity: 0;
+	position: absolute;
+	backdrop-filter: blur(var(--blur-strength));
+	
+	left: 50%;
+	top: 60%;
+	
+	pointer-events: none;
+	
+	-ms-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+	transition: opacity var(--transition-speed), 
+				top var(--transition-speed), 
+				visibility var(--transition-speed), 
+				pointer-events var(--transition-speed) ; 
+}
+
+#searchBox.show {
+	opacity: 1;
+	top: 100%;
+	pointer-events: initial;
+}
diff --git a/css/style.css b/css/style.css
index 3b1c45a..43fdf36 100644
--- a/css/style.css
+++ b/css/style.css
@@ -7,6 +7,7 @@
 @import url('dock-buttons.css');
 @import url('centered-box.css');
 @import url('profile-image.css');
+@import url('search-box.css');
 
 :root {
 	/* Colors */
diff --git a/index.html b/index.html
index 968c00a..ea21768 100644
--- a/index.html
+++ b/index.html
@@ -58,5 +58,6 @@
 	<script src="js/clock.js"></script>
 	<script src="js/sites-list.js"></script>
 	<script src="js/dock-buttons.js"></script>
+	<script src="js/animate-profile-image.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/animate-profile-image.js b/js/animate-profile-image.js
new file mode 100644
index 0000000..6baaaf6
--- /dev/null
+++ b/js/animate-profile-image.js
@@ -0,0 +1,36 @@
+var profileContainer = document.getElementById("profileImageContainer");
+
+let profileAnimRunning = false;
+
+// Don't run animation on startup
+profileContainer.style.webkitAnimationPlayState = "paused";
+
+// Rotate profile
+const rotateProfile = () => {
+    event.preventDefault;
+
+    // Remove anim class
+    profileContainer.classList.remove('rotateProfileAnim');
+
+    // Triggering reflow
+    void profileContainer.offsetWidth;
+
+    // Re-add animation class
+    profileContainer.classList.add('rotateProfileAnim');
+
+    profileContainer.style.webkitAnimationPlayState = "running";
+    profileAnimRunning = true;
+}
+
+// Re-enable animation after death
+profileContainer.addEventListener(
+    "animationend", 
+    (event) => {
+        profileAnimRunning = false;
+    }
+);
+
+// Animate/Show searchbox if profile container was clicked
+profileContainer.onclick = () => {
+	rotateProfile();
+};