donate-button.v2.js builds!
This commit is contained in:
Eric Schultz
Eric Schultz
parent
c54f0d2423
commit
4daaeb8c7f
6 changed files with 4963 additions and 2972 deletions
3
.babelrc
3
.babelrc
|
|
@ -1,5 +1,4 @@
|
|||
{
|
||||
"compact":false,
|
||||
"presets":
|
||||
["babel-preset-env"]
|
||||
"presets": ["@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"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/preset-env": "^7.7.1",
|
||||
"@types/color": "^3.0.0",
|
||||
"@types/enzyme": "^3.1.9",
|
||||
"@types/enzyme-to-json": "^1.5.1",
|
||||
|
|
@ -41,7 +42,7 @@
|
|||
"@types/validator": "^9.4.1",
|
||||
"@types/velocity-animate": "^1.2.33",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-loader": "^8.0.6",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"bootstrap": "^3.4.1",
|
||||
|
|
@ -59,7 +60,6 @@
|
|||
"enzyme-to-json": "^3.3.3",
|
||||
"exports-loader": "^0.7.0",
|
||||
"expose-loader": "^0.7.5",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"file-loader": "^1.1.11",
|
||||
"imports-loader": "^0.8.0",
|
||||
"jest": "^24.1.0",
|
||||
|
|
@ -70,24 +70,18 @@
|
|||
"lodash": "^4.17.14",
|
||||
"node-sass": "^4.12.0",
|
||||
"phantomjs-prebuilt": "^2.1.16",
|
||||
"postcss-cssnext": "^2.9.0",
|
||||
"postcss-import": "^9.1.0",
|
||||
"postcss-loader": "^2.1.1",
|
||||
"resolve-url-loader": "^2.3.0",
|
||||
"sass-loader": "^7.0.1",
|
||||
"sinon": "^5.0.7",
|
||||
"string-replace-loader": "^2.1.1",
|
||||
"string-replace-webpack-plugin": "^0.1.3",
|
||||
"style-loader": "^0.21.0",
|
||||
"ts-jest": "^24.0.0",
|
||||
"ts-loader": "^3",
|
||||
"typescript": "^2.9.2",
|
||||
"uglifyjs-webpack-plugin": "^0.4.6",
|
||||
"url-loader": "^1.0.1",
|
||||
"webpack": "^3",
|
||||
"webpack-dev-server": "^3.9.0",
|
||||
"webpack-merge": "^4.1.2",
|
||||
"webpack-sweet-entry": "^1.1.4"
|
||||
"webpack": "^4.0.0",
|
||||
"webpack-dev-server": "^3.9.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@rails/webpacker": "^4.0.7",
|
||||
|
|
|
|||
Loading…
Reference in a new issue