refactor: change setOverflowHidden() and removeOverflowHidden() from resize-parent.js to animate.js

Author: igorMSoares

js-css-animations/animate.js

@@ -9,12 +9,7 @@ import {
   CUSTOM_CSS_PROPERTIES,
 } from './globals.js';
 
-import {
-  initParentResize,
-  endParentResize,
-  setOverflowHidden,
-  removeOverflowHidden,
-} from './resize-parent.js';
+import { initParentResize, endParentResize } from './resize-parent.js';
 
 import {
   removeInlineTransition,
@@ -334,6 +329,22 @@ const enable = element => {
 const isEnabled = element =>
   !(element.getAttribute('js-anim--disabled') === 'true');
 
+/**
+ * Adds a CSS class which will set the overflow property to 'clip' (or 'hidden')
+ * @param {HTMLElement} el - The DOM element which will receive the CSS class
+ */
+const setOverflowHidden = el => {
+  el.classList.add(CLASS_NAMES.overflowHidden);
+};
+
+/**
+ * Removes the CSS class which sets the overflow property to 'clip' (or 'hidden')
+ * @param {HTMLElement} el - The DOM element with the CSS class to remove
+ */
+const removeOverflowHidden = el => {
+  el.classList.remove(CLASS_NAMES.overflowHidden);
+};
+
 /**
  * Verifies if an element has defined an iteration CSS property
  * @param {HTMLElement} element
@@ -385,7 +396,8 @@ const endVisibilityToggle = (element, opts) => {
   }
   if (opts.heightTransition || opts.widthTransition)
     endParentResize(element, opts);
-  else if (opts.overflowHidden && element.parentElement)
+
+  if (opts.overflowHidden && element.parentElement)
     removeOverflowHidden(element.parentElement);
 };
 
@@ -457,9 +469,10 @@ const animate = (element, action, id, opts = {}) => {
             action,
             widthTransition,
             heightTransition,
-            overflowHidden,
           }));
-        } else if (overflowHidden && element.parentElement)
+        }
+
+        if (overflowHidden && element.parentElement)
           setOverflowHidden(element.parentElement);
       },
       motion: () => {

js-css-animations/resize-parent.js

@@ -3,11 +3,7 @@
  * when child element is being animated
  * @module resize-parent
  */
-import {
-  CLASS_NAMES,
-  CUSTOM_CSS_PROPERTIES,
-  PROPERTY_NAMES,
-} from './globals.js';
+import { CUSTOM_CSS_PROPERTIES, PROPERTY_NAMES } from './globals.js';
 
 import {
   getParentMeasures,
@@ -66,30 +62,13 @@ const getDimension = (wTransit, hTransit) => {
   return dimension;
 };
 
-/**
- * Adds a CSS class which will set the overflow property to 'clip' (or 'hidden')
- * @param {HTMLElement} el - The DOM element which will receive the CSS class
- */
-const setOverflowHidden = el => {
-  el.classList.add(CLASS_NAMES.overflowHidden);
-};
-
-/**
- * Removes the CSS class which sets the overflow property to 'clip' (or 'hidden')
- * @param {HTMLElement} el - The DOM element with the CSS class to remove
- */
-const removeOverflowHidden = el => {
-  el.classList.remove(CLASS_NAMES.overflowHidden);
-};
-
 /**
  * Handles parent element width/height transitions during child element's animation
  * @param {{
  *  element: HTMLElement,
  *  action: string,
  *  widthTransition: boolean,
  *  heightTransition: boolean,
- *  overflowHidden: boolean
  * }} args - Containing all the information needed to initiate parent's dimensions transitions
  * @returns An object with the dimension(s) to transition and the parent element's measurements before and after the child element's animation is performed
  */
@@ -101,7 +80,6 @@ const initParentResize = args => {
   const dimension = getDimension(widthTransition, heightTransition);
   setDimensionsTransitions(parentElement, widthTransition, heightTransition);
   setParentCssProperties(element);
-  if (args.overflowHidden) setOverflowHidden(parentElement);
   setParentMaxMeasures({
     parentState: 'initial',
     element,
@@ -124,12 +102,6 @@ const endParentResize = (element, opts) => {
   removeDimensionMax(parentElement, 'width');
   removeCustomCssProperties(parentElement);
   removeDimensionsTransitions(parentElement, wTransit, hTransit);
-  removeOverflowHidden(parentElement);
 };
 
-export {
-  initParentResize,
-  endParentResize,
-  setOverflowHidden,
-  removeOverflowHidden,
-};
+export { initParentResize, endParentResize };