houdini/client/js/widget/donate-button.v2.js

// License: LGPL-3.0-or-later
/* this file expects a config/config.json that contains
{ "button":{
    "url":"https://commitchange.com",
    "css":"https://s3-us-west-1.amazonaws.com/commitchange/manual/donate-button.v2.css"
  }
}

 this file is generated by rails when compiling the assets
*/


function on_ios11() {
  var userAgent = window.navigator.userAgent;
  var has11 = userAgent.search("OS 11_\\d") > 0
  var hasMacOS = userAgent.search(" like Mac OS X") > 0

  return has11 && hasMacOS;
}

window.commitchange = {
  iframes: []
, modalIframe: null
}

commitchange.getParamsFromUrl = (whitelist) => {
    var result = {},
        tmp = [];
    var items = location.search.substr(1).split("&");
    for (var index = 0; index < items.length; index++) {
        tmp = items[index].split("=");
        if (whitelist.indexOf(tmp[0])) result[tmp[0]] = decodeURIComponent(tmp[1]);
    }
    return result;
}

commitchange.openDonationModal = (iframe, overlay) => {
  return (event) => {
    overlay.className = 'commitchange-overlay commitchange-open'
    iframe.className = 'commitchange-iframe commitchange-open'
    if (on_ios11()) {
        iframe.style.position = 'absolute'
    }
    commitchange.setParams(commitchange.getParamsFromButton(event.currentTarget), iframe)
    if (on_ios11()) {
        iframe.scrollIntoView()
    }

    commitchange.open_iframe = iframe
    commitchange.open_overlay = overlay
  }
}

// Dynamically set the params of the appended iframe donate window
commitchange.setParams = (params, iframe) => {
  params.command = 'setDonationParams'
  params.sender = 'commitchange'
  iframe.contentWindow.postMessage(JSON.stringify(params), fullHost)
}

commitchange.hideDonation = () => {
  if(!commitchange.open_overlay || !commitchange.open_iframe) return
  commitchange.open_overlay.className = 'commitchange-overlay commitchange-closed'
  commitchange.open_iframe.className = 'commitchange-iframe commitchange-closed'
  if (on_ios11()) {
      commitchange.open_iframe.style.position = 'fixed'
  }
  commitchange.open_overlay = undefined
  commitchange.open_iframe = undefined
}

const fullHost = 'REPLACE_FULL_HOST' 

commitchange.overlay = () => {
  let div = document.createElement('div')
  div.setAttribute('class', 'commitchange-closed commitchange-overlay')
  return div
}

commitchange.createIframe = (source) => {
  let i = document.createElement('iframe')
  const url = document.location.href
  i.setAttribute('class', 'commitchange-closed commitchange-iframe')
  i.src = source + "&origin=" + url
  return i
}

// Given a button with a bunch of data parameters
// return an object of key/vals corresponing to each param
commitchange.getParamsFromButton = (elem) => {
  let options = {
    offsite: 't'
  , type: elem.getAttribute('data-type')
  , custom_amounts: elem.getAttribute('data-custom-amounts') || elem.getAttribute('data-amounts')
  , amount: elem.getAttribute('data-amount')
  , minimal: elem.getAttribute('data-minimal')
  , weekly: elem.getAttribute('data-weekly')
  , default: elem.getAttribute('data-default')
  , custom_fields: elem.getAttribute('data-custom-fields')
  , campaign_id: elem.getAttribute('data-campaign-id')
  , gift_option_id: elem.getAttribute('data-gift-option-id')
  , redirect: elem.getAttribute('data-redirect')
  , designation: elem.getAttribute('data-designation')
  , multiple_designations: elem.getAttribute('data-multiple-designations')
  , hide_dedication: elem.getAttribute('data-hide-dedication')? true : false
  , designations_prompt: elem.getAttribute('data-designations-prompt')
  , single_amount: elem.getAttribute('data-single-amount')
  , designation_desc: elem.getAttribute('data-designation-desc') || elem.getAttribute('data-description')
  , locale: elem.getAttribute('data-locale')
  , "utm_source": elem.getAttribute('data-utm_source')
  , "utm_campaign": elem.getAttribute('data-utm_campaign')
  , "utm_medium": elem.getAttribute('data-utm_medium')
  , "utm_content": elem.getAttribute('data-utm_content')
  , "first_name": elem.getAttribute('data-first_name')
  , "last_name": elem.getAttribute('data-last_name')
  , "country": elem.getAttribute('data-country')
  , "postal_code": elem.getAttribute('data-postal_code')


  }
  // Remove false values from the options
  for(let key in options) {
    if(!options[key]) delete options[key]
  }
  return options
}

commitchange.appendMarkup = () => {
  if(commitchange.alreadyAppended) return
  else commitchange.alreadyAppended = true
  let script = document.getElementById('commitchange-donation-script') || document.getElementById('commitchange-script')
  const nonprofitID = script.getAttribute('data-npo-id')
  const baseSource = fullHost + "/nonprofits/" + nonprofitID + "/donate?offsite=t"
  let elems = document.querySelectorAll('.commitchange-donate')

  for(let i = 0; i < elems.length; ++i) {
    let elem = elems[i]
    let source = baseSource

    let optionsButton = commitchange.getParamsFromButton(elem)
    let options = commitchange.getParamsFromUrl(["utm_campaign","utm_content","utm_source","utm_medium","first_name","last_name","country","postal_code","address","city"])
    for (var attr in optionsButton) { options[attr] = optionsButton[attr]; }
    let params = []
    for(let key in options) {
      params.push(key + '=' + options[key])
    }
    source += "&" + params.join("&")

    if(elem.hasAttribute('data-embedded')) {
      source += '&mode=embedded'
      let iframe = commitchange.createIframe(source)
      elem.appendChild(iframe)
      iframe.setAttribute('class', 'commitchange-iframe-embedded')
      commitchange.iframes.push(iframe)
    } else {
      // Show the CommitChange-branded button if it's not set to custom.
      if(!elem.hasAttribute('data-custom') && !elem.hasAttribute('data-custom-button')) {
        let btn_iframe = document.createElement('iframe')
        let btn_src = fullHost + "/nonprofits/" + nonprofitID + "/btn"
        if(elem.hasAttribute('data-fixed')) { btn_src += '?fixed=t' }
        btn_iframe.src = btn_src
        btn_iframe.className = 'commitchange-btn-iframe'
        btn_iframe.setAttribute('scrolling', 'no')
        btn_iframe.setAttribute('seamless', 'seamless')
        elem.appendChild(btn_iframe)
        btn_iframe.onclick = commitchange.openDonationModal(iframe, overlay)
      }
      // Create the iframe overlay for this button
      let modal = document.createElement('div')
      modal.className = 'commitchange-modal'
      let overlay = commitchange.overlay()
      let iframe
      if(commitchange.modalIframe) {
        iframe = commitchange.modalIframe
      } else {
        iframe = commitchange.createIframe(source)
        commitchange.iframes.push(iframe)
        commitchange.modalIframe = iframe
      }
      modal.appendChild(overlay)
      document.body.appendChild(iframe)
      elem.parentNode.appendChild(modal)
      overlay.onclick = commitchange.hideDonation
      elem.onclick = commitchange.openDonationModal(iframe, overlay)
    } // end else
  } // end for loop
}

// Load the CSS for the parent page element from our AWS server
commitchange.loadStylesheet = () => {
  if(commitchange.alreadyStyled) return
  else commitchange.alreadyStyled = true
  let stylesheet = document.createElement('link')
  stylesheet.href = "REPLACE_CSS_URL"
  stylesheet.rel  = 'stylesheet'
  stylesheet.type = 'text/css'
  document.getElementsByTagName('head')[0].appendChild(stylesheet)
}


// Handle iframe post messages
if(window.addEventListener) {
  window.addEventListener('message', (e) => {
    // Close the modal
    if(e.data === 'commitchange:close') {
      commitchange.hideDonation()
    } 
    // Redirect on donation completion using the redirect param
    else if(e.data.match(/^commitchange:redirect/)) {
      const matches = e.data.match(/^commitchange:redirect:(.+)$/)
      if(matches.length === 2) window.location.href = matches[1]
    }
  })
}

// Make initialization calls on document load
if(document.addEventListener) {
  document.addEventListener("DOMContentLoaded", (event) => {
    commitchange.loadStylesheet()
    commitchange.appendMarkup()
  })
} else if(window.jQuery) {
  window.jQuery(document).ready(() => {
    commitchange.loadStylesheet()
    commitchange.appendMarkup()
  })
} else {
  window.onload = () => {
    commitchange.loadStylesheet()
    commitchange.appendMarkup()
  }
}

if(document.querySelector('.commitchange-donate')) {
  commitchange.loadStylesheet()
  commitchange.appendMarkup()
}