style: rename 'triggerBtn' to 'trigger'

Author: igorMSoares

js-css-animations/animate.js

@@ -137,17 +137,16 @@ const updateCssProperties = (element, opts) => {
  * @returns The CSS selector for the animation target(s) or an empty string
  */
 const getTargetSelector = eventTarget => {
-  /** @type {HTMLElement|null} triggerBtn */
-  let triggerBtn = eventTarget;
-  while (triggerBtn && !triggerBtn.getAttribute('target-selector')) {
+  /** @type {HTMLElement|null} trigger */
+  let trigger = eventTarget;
+  while (trigger && !trigger.getAttribute('target-selector')) {
     /** bubbles up untill the attribute is found */
-    triggerBtn = triggerBtn.parentElement;
+    trigger = trigger.parentElement;
   }
 
-  if (!triggerBtn)
-    throw new ReferenceError('target-selector attribute not found');
+  if (!trigger) throw new ReferenceError('target-selector attribute not found');
 
-  return triggerBtn.getAttribute('target-selector') ?? '';
+  return trigger.getAttribute('target-selector') ?? '';
 };
 
 /**
@@ -316,7 +315,7 @@ const animate = (element, action, id, opts = {}) => {
   disable(element);
   const {
     animType,
-    triggerBtn,
+    trigger,
     start,
     complete,
     keepSpace,
@@ -334,7 +333,7 @@ const animate = (element, action, id, opts = {}) => {
   });
   let parentMeasures, dimension, currentTransition;
 
-  if (triggerBtn) TARGETS_STACK.add(element, triggerBtn);
+  if (trigger) TARGETS_STACK.add(element, trigger);
 
   const handleAnimation = {
     begining: {
@@ -388,21 +387,21 @@ const animate = (element, action, id, opts = {}) => {
       },
     },
     conclude: () => {
-      if (triggerBtn && opts.queryIndex === opts.totalTargets - 1) {
+      if (trigger && opts.queryIndex === opts.totalTargets - 1) {
         opts.staggerDelay
-          ? CALLBACK_TRACKER.remove(triggerBtn)
-          : setTimeout(() => CALLBACK_TRACKER.remove(triggerBtn), delay);
-        TARGETS_STACK.get(triggerBtn).forEach(el => enable(el));
-        TARGETS_STACK.remove(triggerBtn);
-      } else if (!triggerBtn) {
+          ? CALLBACK_TRACKER.remove(trigger)
+          : setTimeout(() => CALLBACK_TRACKER.remove(trigger), delay);
+        TARGETS_STACK.get(trigger).forEach(el => enable(el));
+        TARGETS_STACK.remove(trigger);
+      } else if (!trigger) {
         enable(element);
       }
     },
   };
 
   handleAnimation.begining[animType]();
   if (typeof start === 'function') {
-    initCallback(triggerBtn, start, 'start');
+    initCallback(trigger, start, 'start');
   }
   element.classList.add(CLASS_NAMES[action][id]);
   element.classList.remove(CLASS_NAMES[OPPOSITE_ACTION[action]][id]);
@@ -411,7 +410,7 @@ const animate = (element, action, id, opts = {}) => {
   setTimeout(() => {
     handleAnimation.end[animType]();
     if (typeof complete === 'function') {
-      initCallback(triggerBtn, complete, 'complete');
+      initCallback(trigger, complete, 'complete');
     }
     handleAnimation.conclude();
   }, duration + delay);
@@ -502,13 +501,9 @@ const eventHandler = (el, animationId, opts) => {
  * @see {@link module:globals.MOTION_ANIMS_ID}
  */
 const init = (animationId, opts = {}, eventType = 'click') => {
-  const {
-    triggerBtn = `.${CLASS_NAMES.triggerBtn}`,
-    targetSelector,
-    cursor,
-  } = opts;
+  const { trigger = `.${CLASS_NAMES.trigger}`, targetSelector, cursor } = opts;
 
-  document.querySelectorAll(triggerBtn).forEach(btn => {
+  document.querySelectorAll(trigger).forEach(btn => {
     btn.classList.add(CLASS_NAMES.btnCursor);
     if (typeof cursor === 'string') {
       setCssProperty(btn, 'cursor', cursor);

js-css-animations/globals.js

@@ -70,7 +70,7 @@ export const PROPERTY_NAMES = Object.freeze({
  * dimensionsTransitions: string,
  * heightTransition: string,
  * widthTransition: string,
- * triggerBtn: string,
+ * trigger: string,
  * btnCursor: string,
  * collapsed: string,
  * hidden: string,
@@ -86,7 +86,7 @@ export const CLASS_NAMES = Object.freeze({
   dimensionsTransitions: 'js-anim--dimensions-transitions',
   heightTransition: 'js-anim--height-transition',
   widthTransition: 'js-anim--width-transition',
-  triggerBtn: 'js-anim--trigger-btn',
+  trigger: 'js-anim--trigger-btn',
   btnCursor: 'js-anim--btn-cursor',
   collapsed: 'js-anim--collapsed',
   hidden: 'js-anim--hidden',

main.js

@@ -1,7 +1,7 @@
 import jsCssAnimations from './js-css-animations/js-css-animations.js';
 
 jsCssAnimations.init.slideUp({
-  triggerBtn: '.btn--slide-up',
+  trigger: '.btn--slide-up',
   staggerDelay: 500,
   duration: '1s',
   start: () => {
@@ -10,14 +10,14 @@ jsCssAnimations.init.slideUp({
 });
 
 jsCssAnimations.init.slideRight({
-  triggerBtn: '.btn--slide-right',
+  trigger: '.btn--slide-right',
   start: () => {
     jsCssAnimations.toggle('#anchor2 img', 'rotateRight', 'rotateUp');
   },
 });
 
 jsCssAnimations.init.slideDown({
-  triggerBtn: '.btn--slide-down',
+  trigger: '.btn--slide-down',
   delay: '1.5s',
   start: () => {
     jsCssAnimations.toggle('img', 'rotateDownCCW', 'rotateUp', {
@@ -41,7 +41,7 @@ jsCssAnimations.init.slideDown({
 });
 
 jsCssAnimations.init.slideLeft({
-  triggerBtn: '.btn--slide-left',
+  trigger: '.btn--slide-left',
   staggerDelay: 500,
   start: () => {
     jsCssAnimations.toggle('img', 'slideLeft', 'slideLeft', {
@@ -53,19 +53,19 @@ jsCssAnimations.init.slideLeft({
 });
 
 jsCssAnimations.init.collapse({
-  triggerBtn: '.collapse-expand--btn',
+  trigger: '.collapse-expand--btn',
   targetSelector: '.collapse-expand--p',
 });
 
 jsCssAnimations.init.collapse({
-  triggerBtn: '.collapse-expand--btn__mult',
+  trigger: '.collapse-expand--btn__mult',
   targetSelector: '.collapse-expand--p__mult',
   staggerDelay: 400,
   keepSpace: true,
 });
 
 jsCssAnimations.init.fade({
-  triggerBtn: '.fade--btn',
+  trigger: '.fade--btn',
   blur: '2px',
   keepSpace: true,
 });
@@ -90,7 +90,7 @@ const validateInput = input => {
 };
 
 jsCssAnimations.init.rotate({
-  triggerBtn: '#rotation-angle',
+  trigger: '#rotation-angle',
   targetSelector: '.rotation-area',
   eventType: 'change',
   // @ts-ignore