donate-button.v2.js builds!

This commit is contained in:
Eric Schultz 2019-11-05 17:29:22 -06:00 committed by Eric Schultz
parent c54f0d2423
commit 4daaeb8c7f
6 changed files with 4963 additions and 2972 deletions

View file

@ -1,5 +1,4 @@
{ {
"compact":false, "compact":false,
"presets": "presets": ["@babel/preset-env"]
["babel-preset-env"]
} }

View file

@ -0,0 +1,160 @@
/* License: LGPL-3.0-or-later */
/* css for public/js/donate-button.v2.js */
iframe.commitchange-btn-iframe {
border: none;
height: 58px;
width: 165px;
overflow: hidden;
position: relative;
}
a.commitchange-donate {
overflow: hidden;
cursor: pointer;
position: relative;
display: inline-block;
}
a.commitchange-donate[data-embedded]:before {
}
a.commitchange-donate:before {
position: absolute;
background: rgba(0,0,0,0);
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
z-index: 9;
}
a.commitchange-donate[data-embedded]:before {
height: 0;
}
a.commitchange-donate[data-embedded],
a.commitchange-donate[data-custom] {
opacity: 1;
}
a.commitchange-donate {
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
-ms-opacity: 0.8;
opacity: 0.8;
}
a.commitchange-donate:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
opacity: 1;
}
li.commitchange-donate.hide-iframe iframe {
display: none !important;
/* used for WordPress menus, where data-custom is not accessible */
}
.commitchange-iframe {
width: 406px;
height: 0;
max-width: 100%;
position: fixed;
top: 50%; left: 50%;
margin: 0;
margin-top: -243px;
margin-left: -195px;
background-color: rgba(0, 0, 0, 0);
border: none;
display: block;
padding: 0px;
z-index: 99999;
visibility: visible;
overflow: hidden;
-webkit-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
.commitchange-iframe-embedded {
border: 0;
position: static;
margin: 0;
height: 450px;
width: 390px;
max-width: 100%;
opacity: 1;
}
.commitchange-iframe.commitchange-open {
height: 510px;
border: 0;
opacity: 1;
}
.commitchange-overlay {
z-index: 9999;
position: fixed;
top: 0;
left: 0%;
width: 100%;
height: 0;
background-color: rgba(0, 0, 0, 0.4);
-webkit-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
.commitchange-overlay.commitchange-open {
height: 100%;
}
.commitchange-overlay.commitchange-closed,
.commitchange-iframe.commitchange-closed {
height: 0;
-webkit-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
opacity: 0;
}
.commitchange-overlay.commitchange-open,
.commitchange-iframe.commitchange-open {
-webkit-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
opacity: 1;
}
.commitchange-donate[data-fixed] {
position: fixed;
bottom: 0;
right: 22px;
height: 50px;
z-index: 99999 !important;
-webkit-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
opacity: 1;
}
.commitchange-donate[data-fixed] iframe.commitchange-btn-iframe {
border: none;
height: 50px;
width: 125px;
}
@media screen and (max-width: 380px) {
.commitchange-iframe {
left: 0;
margin: 0;
top: 0;
}
}
@media screen and (max-height: 640px) {
.commitchange-iframe.commitchange-open {
margin-top: 0;
top: 0;
height: 100%;
overflow-y: scroll;
}
}

View file

@ -0,0 +1,230 @@
const donate_css = require('../../assets/stylesheets/donate-button/donate-button.v2.css');
const iframeHost = 'https://us.commitchange.com'
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 = iframeHost
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('style')
// stylesheet.rel = 'stylesheet'
// stylesheet.type = 'text/css'
// stylesheet.innerText = donate_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()
}

View file

@ -0,0 +1 @@
require('../donate-button/donate-button.v2.js')

View file

@ -20,6 +20,7 @@
"webpack": "webpack" "webpack": "webpack"
}, },
"devDependencies": { "devDependencies": {
"@babel/preset-env": "^7.7.1",
"@types/color": "^3.0.0", "@types/color": "^3.0.0",
"@types/enzyme": "^3.1.9", "@types/enzyme": "^3.1.9",
"@types/enzyme-to-json": "^1.5.1", "@types/enzyme-to-json": "^1.5.1",
@ -41,7 +42,7 @@
"@types/validator": "^9.4.1", "@types/validator": "^9.4.1",
"@types/velocity-animate": "^1.2.33", "@types/velocity-animate": "^1.2.33",
"babel-core": "^6.26.0", "babel-core": "^6.26.0",
"babel-loader": "^7.1.4", "babel-loader": "^8.0.6",
"babel-preset-env": "^1.6.1", "babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1", "babel-preset-es2015": "^6.24.1",
"bootstrap": "^3.4.1", "bootstrap": "^3.4.1",
@ -59,7 +60,6 @@
"enzyme-to-json": "^3.3.3", "enzyme-to-json": "^3.3.3",
"exports-loader": "^0.7.0", "exports-loader": "^0.7.0",
"expose-loader": "^0.7.5", "expose-loader": "^0.7.5",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11", "file-loader": "^1.1.11",
"imports-loader": "^0.8.0", "imports-loader": "^0.8.0",
"jest": "^24.1.0", "jest": "^24.1.0",
@ -70,24 +70,18 @@
"lodash": "^4.17.14", "lodash": "^4.17.14",
"node-sass": "^4.12.0", "node-sass": "^4.12.0",
"phantomjs-prebuilt": "^2.1.16", "phantomjs-prebuilt": "^2.1.16",
"postcss-cssnext": "^2.9.0",
"postcss-import": "^9.1.0", "postcss-import": "^9.1.0",
"postcss-loader": "^2.1.1", "postcss-loader": "^2.1.1",
"resolve-url-loader": "^2.3.0", "resolve-url-loader": "^2.3.0",
"sass-loader": "^7.0.1", "sass-loader": "^7.0.1",
"sinon": "^5.0.7", "sinon": "^5.0.7",
"string-replace-loader": "^2.1.1",
"string-replace-webpack-plugin": "^0.1.3",
"style-loader": "^0.21.0", "style-loader": "^0.21.0",
"ts-jest": "^24.0.0", "ts-jest": "^24.0.0",
"ts-loader": "^3", "ts-loader": "^3",
"typescript": "^2.9.2", "typescript": "^2.9.2",
"uglifyjs-webpack-plugin": "^0.4.6",
"url-loader": "^1.0.1", "url-loader": "^1.0.1",
"webpack": "^3", "webpack": "^4.0.0",
"webpack-dev-server": "^3.9.0", "webpack-dev-server": "^3.9.0"
"webpack-merge": "^4.1.2",
"webpack-sweet-entry": "^1.1.4"
}, },
"dependencies": { "dependencies": {
"@rails/webpacker": "^4.0.7", "@rails/webpacker": "^4.0.7",

7527
yarn.lock

File diff suppressed because it is too large Load diff