donate-button.v2.js builds!
This commit is contained in:
parent
c54f0d2423
commit
4daaeb8c7f
6 changed files with 4963 additions and 2972 deletions
3
.babelrc
3
.babelrc
|
@ -1,5 +1,4 @@
|
||||||
{
|
{
|
||||||
"compact":false,
|
"compact":false,
|
||||||
"presets":
|
"presets": ["@babel/preset-env"]
|
||||||
["babel-preset-env"]
|
|
||||||
}
|
}
|
||||||
|
|
160
app/assets/stylesheets/donate-button/donate-button.v2.css
Normal file
160
app/assets/stylesheets/donate-button/donate-button.v2.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
230
app/javascript/donate-button/donate-button.v2.js
Normal file
230
app/javascript/donate-button/donate-button.v2.js
Normal 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()
|
||||||
|
}
|
||||||
|
|
1
app/javascript/packs/donate-button.v2.js
Normal file
1
app/javascript/packs/donate-button.v2.js
Normal file
|
@ -0,0 +1 @@
|
||||||
|
require('../donate-button/donate-button.v2.js')
|
14
package.json
14
package.json
|
@ -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",
|
||||||
|
|
Loading…
Reference in a new issue