Merge pull request #4638 from Arjunsivakumar28/wv-2058

WV-2058: Add click animation when URL parameter is passed

Author: DaleMcGrew

src/App.jsx

@@ -25,6 +25,7 @@ import webAppConfig from './js/config';
 import VoterStore from './js/stores/VoterStore';
 import initializeFacebookSDK from './js/utils/initializeFacebookSDK';
 import RouterV5SendMatch from './js/utils/RouterV5SendMatch';
+import flashCursorClickListener from './js/common/utils/flashCursorClickListener';
 // importRemoveCordovaListenersToken1  -- Do not remove this line!
 
 // Root URL pages
@@ -226,6 +227,10 @@ class App extends Component {
 
     this.acceptURLVariables();
     this.bypass2FA();
+
+    if (AppObservableStore.getFlashCursorEnabled()) {
+      this.detatchCursorListener = flashCursorClickListener();
+    }
   }
 
   componentDidUpdate (prevProps) {
@@ -243,6 +248,9 @@ class App extends Component {
   componentWillUnmount () {
     this.appStateSubscription.unsubscribe();
     this.voterStoreListener.remove();
+    if (this.detatchCursorListener) {
+      this.detatchCursorListener();
+    }
     // removeCordovaListenersToken -- Do not remove this line!
   }
 
@@ -367,6 +375,8 @@ class App extends Component {
     const fromAd = query.get('ad');
     const showOfficeBannerAboveHeader = query.get('office_intro');
     const showEditPoliticianNotice = query.get('show_edit_politician_notice');
+    const normalizedQuery = new URLSearchParams(queryString.toLowerCase());
+    const flashCursor = normalizedQuery.get('flashcursor');
     if (fromAd === '1' && !fromAdSet) {
       this.setState({ fromAdSet: true });
       Cookies.set('ad_url_variable_used', '1', { expires: 15, path: '/' });
@@ -380,6 +390,10 @@ class App extends Component {
       this.setState({ showOfficeBannerAboveHeaderSet: true });
       AppObservableStore.setShowOfficeBannerAboveHeader(true);
     }
+    if (flashCursor === '1') {
+      this.setState({ flashCursor: true });
+      AppObservableStore.setFlashCursorEnabled(true);
+    }
   }
 
   bypass2FA () {

src/css/main.css

@@ -4833,3 +4833,36 @@ a {
   min-width:100%!important;
   width:100%!important
 }
+
+/* ripple click overlay */
+.flashCursorOverlay {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2147483647;
+}
+
+/* ripple element from click */
+.clickRipple {
+  position: fixed;
+  width: 18px; /* initial size */
+  height: 18px;
+  border-radius: 9999px;
+  border: 2px solid rgba(0, 154, 250, 0.9); /* ripple color */
+  transform: translate(-50%, -50%) scale(0.2);
+  opacity: 0.9;
+  will-change: transform, opacity; /* change scale and opacity */
+  animation: clickRippleOut 0.5s ease-out forwards; /* ripple and fade */
+}
+
+/* Expanding + fading ripple */
+@keyframes clickRippleOut {
+  0% {
+    transform: translate(-50%, -50%) scale(0.2);
+    opacity: 0.9;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(3);
+    opacity: 0;
+  }
+}

src/js/common/stores/AppObservableStore.js

@@ -35,6 +35,7 @@ const nonFluxState = {
   chosenWebsiteName: '',
   currentPathname: '',
   drawerOpenDict: {},
+  flashCursorEnabled: false,
   getStartedMode: '',
   getVoterGuideSettingsDashboardEditMode: '',
   googleAnalyticsEnabled: false,
@@ -174,6 +175,9 @@ export default {
     }
     return false;
   },
+  getFlashCursorEnabled () {
+    return nonFluxState.flashCursorEnabled;
+  },
 
   getPoliticianWeVoteIdBeingViewed () {
     return nonFluxState.politicianWeVoteIdBeingViewed;
@@ -490,6 +494,9 @@ export default {
     nonFluxState.drawerOpenDict = updatedDrawerOpenDict;
     messageService.sendMessage('state updated drawerOpenDict');
   },
+  setFlashCursorEnabled (flashCursorEnabled) {
+    nonFluxState.flashCursorEnabled = flashCursorEnabled;
+  },
 
   setEvaluateHeaderDisplay () {
     // Force the Header to evaluate whether it should display

src/js/common/utils/flashCursorClickListener.js

@@ -0,0 +1,49 @@
+// check if overlay exists, if not create one
+function cursorOverlayExists () {
+  let overlay = document.querySelector('#flashCursorOverlay');
+  if (!overlay) {
+    overlay = document.createElement('div');
+    overlay.id = 'flashCursorOverlay';
+    overlay.className = 'flashCursorOverlay';
+    document.body.appendChild(overlay);
+  }
+  return overlay;
+}
+
+// check if ripple object exists
+function rippleCircle () {
+  let ripple = document.querySelector('#clickRipple');
+  if (!ripple) {
+    ripple = document.createElement('div');
+    ripple.id = 'clickRipple';
+    ripple.className = 'clickRipple';
+  }
+  return ripple;
+}
+
+export default function flashCursorClickListener () {
+  const overlay = cursorOverlayExists();
+  const onClick = (e) => {
+    // get mouse position
+    const x = e.clientX;
+    const y = e.clientY;
+
+    // set ripple div on mouse location
+    const el = rippleCircle();
+    el.style.left = `${x}px`;
+    el.style.top = `${y}px`;
+
+    overlay.appendChild(el);
+    window.setTimeout(() => {
+      el.remove();
+    }, 600);
+  };
+
+  // begin event listener
+  document.addEventListener('click', onClick, true);
+
+  // return function to remove event listener
+  return () => {
+    document.removeEventListener('click', onClick, true);
+  };
+}