From 06a912858b059697292b6579498eb04746aff51f Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 26 Oct 2021 14:44:11 +0200
Subject: refactor: move animation functions to a separated file

App.js becomes heavy. So by moving some functions outside this file, it
improves the readability.
---
 htdocs/src/js/app.js                  | 50 +++++------------------------------
 htdocs/src/js/utilities/animations.js | 45 +++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 44 deletions(-)
 create mode 100644 htdocs/src/js/utilities/animations.js

(limited to 'htdocs/src/js')

diff --git a/htdocs/src/js/app.js b/htdocs/src/js/app.js
index 603b5cc..434f730 100644
--- a/htdocs/src/js/app.js
+++ b/htdocs/src/js/app.js
@@ -1,28 +1,12 @@
 import projects from './config/projects';
+import {
+  hideToBottom,
+  hideToLeft,
+  showFromBottom,
+  showFromLeft,
+} from './utilities/animations';
 import { isSmallVw, isStyleJsExists } from './utilities/helpers';
 
-/**
- * Change the element classes to hide it with a slide out left animation.
- * @param {HTMLElement} el - The HTMLElement to hide.
- */
-function hideToLeft(el) {
-  el?.classList.remove('slide-in--left');
-  el?.classList.add('slide-out--left');
-  setTimeout(() => {
-    el?.classList.add('hide');
-  }, 800);
-}
-
-/**
- * Change the element classes to show it with a slide in left animation.
- * @param {HTMLElement} el - The HTMLElement to show.
- */
-function showFromLeft(el) {
-  el?.classList.remove('slide-out--left');
-  el?.classList.remove('hide');
-  el?.classList.add('slide-in--left');
-}
-
 /**
  * Show/hide header and footer with slide animation (left).
  */
@@ -40,28 +24,6 @@ function toggleHeaderFooter() {
   });
 }
 
-/**
- * Change the element classes to hide it with a slide out bottom animation.
- * @param {HTMLElement} el - The HTMLElement to hide.
- */
-function hideToBottom(el) {
-  el?.classList.remove('slide-in--up');
-  el?.classList.add('slide-out--bottom');
-  setTimeout(() => {
-    el?.classList.add('hide');
-  }, 800);
-}
-
-/**
- * Change the element classes to show it with a slide in up animation.
- * @param {HTMLElement} el - The HTMLElement to show.
- */
-function showFromBottom(el) {
-  el?.classList.remove('slide-out--bottom');
-  el?.classList.remove('hide');
-  el?.classList.add('slide-in--up');
-}
-
 /**
  * Show/hide project details with slide animation (bottom).
  */
diff --git a/htdocs/src/js/utilities/animations.js b/htdocs/src/js/utilities/animations.js
new file mode 100644
index 0000000..9a30685
--- /dev/null
+++ b/htdocs/src/js/utilities/animations.js
@@ -0,0 +1,45 @@
+/**
+ * Change the element classes to hide it with a slide out left animation.
+ * @param {HTMLElement} el - The HTMLElement to hide.
+ */
+function hideToLeft(el) {
+  el?.classList.remove('slide-in--left');
+  el?.classList.add('slide-out--left');
+  setTimeout(() => {
+    el?.classList.add('hide');
+  }, 800);
+}
+
+/**
+ * Change the element classes to show it with a slide in left animation.
+ * @param {HTMLElement} el - The HTMLElement to show.
+ */
+function showFromLeft(el) {
+  el?.classList.remove('slide-out--left');
+  el?.classList.remove('hide');
+  el?.classList.add('slide-in--left');
+}
+
+/**
+ * Change the element classes to hide it with a slide out bottom animation.
+ * @param {HTMLElement} el - The HTMLElement to hide.
+ */
+function hideToBottom(el) {
+  el?.classList.remove('slide-in--up');
+  el?.classList.add('slide-out--bottom');
+  setTimeout(() => {
+    el?.classList.add('hide');
+  }, 800);
+}
+
+/**
+ * Change the element classes to show it with a slide in up animation.
+ * @param {HTMLElement} el - The HTMLElement to show.
+ */
+function showFromBottom(el) {
+  el?.classList.remove('slide-out--bottom');
+  el?.classList.remove('hide');
+  el?.classList.add('slide-in--up');
+}
+
+export { hideToLeft, showFromLeft, hideToBottom, showFromBottom };
-- 
cgit v1.2.3