From e8654f4e95cba7f71d27af894adf23c146235e22 Mon Sep 17 00:00:00 2001 From: Sagar Deshmukh Date: Thu, 11 Feb 2021 19:40:27 +0530 Subject: [PATCH] PLANET-5752 Remove jQuery from enhancedDonateButton.js --- assets/src/js/enhancedDonateButton.js | 60 +++++++++++++++++++-------- 1 file changed, 42 insertions(+), 18 deletions(-) diff --git a/assets/src/js/enhancedDonateButton.js b/assets/src/js/enhancedDonateButton.js index 217daeb803..b169d65d39 100644 --- a/assets/src/js/enhancedDonateButton.js +++ b/assets/src/js/enhancedDonateButton.js @@ -1,34 +1,58 @@ -export const setupEnhancedDonateButton = function() { - function isMobile() { - return window.matchMedia('(max-width: 576px)').matches; - } +export const setupEnhancedDonateButton = () => { + const isMobile = () => window.matchMedia('(max-width: 576px)').matches; - function setupDonateButton() { + const setupDonateButton = () => { + const donateButton = document.querySelector('.btn-donate-top'); if ( isMobile() ) { - if (!$('.btn-enhanced-donate.btn-donate-top').length) { - $('.btn-enhanced-donate').clone().appendTo('body').addClass('btn-donate-top'); - $('.btn-donate-top').parent('body').addClass('with-donate-on-top'); + if ( ! donateButton ) { + const enhancedDonateBtn = document.querySelector('.btn-enhanced-donate').cloneNode(true); + enhancedDonateBtn.classList.add('btn-donate-top'); + + document.querySelector('body').appendChild(enhancedDonateBtn); + document.querySelector('body').classList.add('with-donate-on-top'); + } + } else { + if ( donateButton ) { + donateButton.parentNode.removeChild(donateButton); } + + document.querySelector('body').classList.remove('with-donate-on-top'); + } + }; + + const ready = (fn) => { + if ( document.readyState !== 'loading' ) { + fn(); } else { - $('.btn-donate-top').remove(); - $('body').removeClass('with-donate-on-top'); + document.addEventListener('DOMContentLoaded', fn); + } + }; + + ready(() => { + + // Check Show enhanced donate button setting. + if (!document.querySelector('.btn-enhanced-donate')) { + return false; } - } - jQuery(function($) { setupDonateButton(); - $( window ).on('resize', function() { + window.addEventListener('resize', () => { setupDonateButton(); }); const windowHeight = window.innerHeight; - window.addEventListener('scroll', function() { - if ( isMobile() ) { - $('.btn-enhanced-donate.btn-donate-top').toggleClass('btn-donate-top-hide', window.scrollY > windowHeight); - } else { - $('.btn-enhanced-donate.btn-donate-top').removeClass('btn-donate-top-hide'); + window.addEventListener('scroll', () => { + + const enhancedDonateBtn = document.querySelector('.btn-enhanced-donate.btn-donate-top'); + + if ( enhancedDonateBtn ) { + if ( isMobile() ) { + enhancedDonateBtn.classList.toggle('btn-donate-top-hide', window.scrollY > windowHeight); + } else { + enhancedDonateBtn.classList.remove('btn-donate-top-hide'); + } } }); });