diff --git a/app/javascript/donate-button/donate-button.v2.js b/app/javascript/donate-button/donate-button.v2.ts
similarity index 92%
rename from app/javascript/donate-button/donate-button.v2.js
rename to app/javascript/donate-button/donate-button.v2.ts
index d9a877ab..7fa3a682 100644
--- a/app/javascript/donate-button/donate-button.v2.js
+++ b/app/javascript/donate-button/donate-button.v2.ts
@@ -1,3 +1,5 @@
+import { NotifyReporter } from "@jest/reporters";
+
const donate_css = require('../../assets/stylesheets/donate-button/donate-button.v2.css');
const iframeHost = 'https://us.commitchange.com'
@@ -10,13 +12,14 @@ function on_ios11() {
return has11 && hasMacOS;
}
- window.commitchange = {
+ const windowAsAny = window as any;
+ windowAsAny.commitchange = {
iframes: []
, modalIframe: null
}
-
- commitchange.getParamsFromUrl = (whitelist) => {
- var result = {},
+ const commitchange = windowAsAny.commitchange;
+ commitchange.getParamsFromUrl = (whitelist:any) => {
+ var result:any = {},
tmp = [];
var items = location.search.substr(1).split("&");
for (var index = 0; index < items.length; index++) {
@@ -26,8 +29,8 @@ function on_ios11() {
return result;
}
- commitchange.openDonationModal = (iframe, overlay) => {
- return (event) => {
+ commitchange.openDonationModal = (iframe:HTMLIFrameElement, overlay:HTMLElement) => {
+ return (event:Event) => {
overlay.className = 'commitchange-overlay commitchange-open'
iframe.className = 'commitchange-iframe commitchange-open'
if (on_ios11()) {
@@ -44,7 +47,7 @@ function on_ios11() {
}
// Dynamically set the params of the appended iframe donate window
- commitchange.setParams = (params, iframe) => {
+ commitchange.setParams = (params:any, iframe:HTMLIFrameElement) => {
params.command = 'setDonationParams'
params.sender = 'commitchange'
iframe.contentWindow.postMessage(JSON.stringify(params), fullHost)
@@ -69,7 +72,7 @@ function on_ios11() {
return div
}
- commitchange.createIframe = (source) => {
+ commitchange.createIframe = (source:string) => {
let i = document.createElement('iframe')
const url = document.location.href
i.setAttribute('class', 'commitchange-closed commitchange-iframe')
@@ -79,8 +82,8 @@ function on_ios11() {
// Given a button with a bunch of data parameters
// return an object of key/vals corresponing to each param
- commitchange.getParamsFromButton = (elem) => {
- let options = {
+ commitchange.getParamsFromButton = (elem:HTMLElement) => {
+ let options: {[props:string]:any} = {
offsite: 't'
, type: elem.getAttribute('data-type')
, custom_amounts: elem.getAttribute('data-custom-amounts') || elem.getAttribute('data-amounts')
@@ -126,7 +129,7 @@ function on_ios11() {
let elems = document.querySelectorAll('.commitchange-donate')
for(let i = 0; i < elems.length; ++i) {
- let elem = elems[i]
+ let elem:any = elems[i]
let source = baseSource
let optionsButton = commitchange.getParamsFromButton(elem)
@@ -145,6 +148,8 @@ function on_ios11() {
iframe.setAttribute('class', 'commitchange-iframe-embedded')
commitchange.iframes.push(iframe)
} else {
+ let overlay = commitchange.overlay()
+ let iframe
// 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')
@@ -160,8 +165,7 @@ function on_ios11() {
// 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 {
@@ -211,8 +215,8 @@ function on_ios11() {
commitchange.loadStylesheet()
commitchange.appendMarkup()
})
- } else if(window.jQuery) {
- window.jQuery(document).ready(() => {
+ } else if(windowAsAny.jQuery) {
+ windowAsAny.jQuery(document).ready(() => {
commitchange.loadStylesheet()
commitchange.appendMarkup()
})
diff --git a/app/javascript/legacy/bank_accounts/confirm/index.es6 b/app/javascript/legacy/bank_accounts/confirm/index.es6
new file mode 100644
index 00000000..39365009
--- /dev/null
+++ b/app/javascript/legacy/bank_accounts/confirm/index.es6
@@ -0,0 +1,75 @@
+// License: LGPL-3.0-or-later
+const h = require('virtual-dom/h')
+const request = require('../../common/super-agent-frp')
+const view = require('vvvview')
+const flyd = require('flyd')
+const flatMap = require('flyd/module/flatmap')
+const thunk = require('vdom-thunk')
+const format = require('../../common/format')
+const Im = require('immutable')
+const fromJS = Im.fromJS
+const Map = Im.Map
+
+var npURL = '/nonprofits/' + app.nonprofit_id
+
+
+const root = state => {
+ var headerContent = ''
+ if(state.get('loading')) {
+ headerContent = [h('i.fa.fa-spin.fa-gear'), ' Confirming Bank Account...']
+ } else if(!state.get('loading') && !state.get('pending_verification')) {
+ headerContent = [h('i.fa.fa-check'), ' Bank Account Confirmed!']
+ } else { // not loading and unable to confirm
+ headerContent = ['Unable to confirm bank account.']
+ }
+
+ var confirmedMsg = !state.get('pending_verification')
+ ? h('p', [
+ 'Your bank account connection has been confirmed with your email address. ',
+ h("br"),
+ h('a', {href: npURL + '/payouts'}, [h('i.fa.fa-return'), 'Return to your payouts dashboard'])
+ ])
+ : ''
+
+ return h('div', [
+ h('h2', headerContent),
+ confirmedMsg,
+ thunk(accountInfo, state),
+ h('hr'),
+ h('p', [
+ 'If any of this looks incorrect, please contact: ',
+ h('a', {href: 'mailto:support@commitchange.com'}, 'support@commitchange.com')
+ ])
+ ])
+}
+
+
+const accountInfo = state =>
+ h('div.well', [
+ h('p', ['Nonprofit: ', h('strong', state.getIn(['nonprofit', 'name'])), ]),
+ h('p', ['New bank account: ', h('strong', state.get('name')), ]),
+ h('p', ['User who made the change: ', h('strong', state.get('email')), ]),
+ h('p', ['Date and time of update: ', h('strong', format.date.toSimple(state.get('created_at'))), ]),
+ ])
+
+
+var state = fromJS(app.bankAccount).set('loading', true)
+
+var confirmView = view(root, document.querySelector('.js-view-confirm'), state)
+
+
+if(app.bankAccount.pending_verification) {
+ var $confirmResponse = request.post(npURL + '/bank_account/confirm')
+ .send({token: utils.get_param('t')})
+ .perform()
+
+ var $state = flyd.scan(
+ (state, resp) => state.set('loading', false).set('pending_verification', false)
+ , state
+ , $confirmResponse)
+
+ flyd.map(confirmView, $state)
+} else {
+ confirmView(state.set('loading', false).set('pending_verification', false))
+}
+
diff --git a/app/javascript/legacy/bank_accounts/confirm/page.js b/app/javascript/legacy/bank_accounts/confirm/page.js
new file mode 100644
index 00000000..a3d1fc6e
--- /dev/null
+++ b/app/javascript/legacy/bank_accounts/confirm/page.js
@@ -0,0 +1,2 @@
+// License: LGPL-3.0-or-later
+require('./index.es6')
diff --git a/app/javascript/legacy/bank_accounts/create.es6 b/app/javascript/legacy/bank_accounts/create.es6
new file mode 100755
index 00000000..c86d1054
--- /dev/null
+++ b/app/javascript/legacy/bank_accounts/create.es6
@@ -0,0 +1,75 @@
+// License: LGPL-3.0-or-later
+var request = require('../common/super-agent-promise')
+var format_err = require('../common/format_response_error')
+
+module.exports = create_bank_account
+
+function create_bank_account(form_data, el) {
+ return new Promise((resolve, reject) =>{
+ appl.def('new_bank_account', {loading: true, error: ''})
+ return confirm_auth(form_data)
+ .then(tokenize_with_stripe)
+ .then(create_record)
+ .then(complete)
+ .catch(display_err)
+ })
+}
+
+
+// Post to confirm user's password
+function confirm_auth(form_data) {
+
+ return request.post('/users/confirm_auth').send({password: form_data.user_password})
+ .perform()
+ .then((resp) =>{ return {token: resp.body.token, form: form_data}})
+
+
+}
+
+
+// Post to stripe to get back a stripe_bank_account_token
+function tokenize_with_stripe(data) {
+ return new Promise(function(resolve, reject) {
+ Stripe.bankAccount.createToken(data.form, function(status, resp) {
+ data.stripe_resp = resp
+ if(resp.error) reject(resp.error.message)
+ else resolve(data)
+ })
+ })
+}
+
+
+// 'data' must have a stripe response as '.stripe_resp' and a user password confirmation token as '.token
+function create_record(data) {
+ return request.post('/nonprofits/' + app.nonprofit_id + '/bank_account')
+ .send({
+ pw_token: data.token,
+ bank_account: {
+ stripe_bank_account_token: data.stripe_resp.id,
+ stripe_bank_account_id: data.stripe_resp.bank_account.id,
+ name: data.stripe_resp.bank_account.bank_name + ' *' + data.stripe_resp.bank_account.last4,
+ email: app.user.email
+ }
+ })
+ .perform()
+}
+
+function complete() {
+ appl.is_loading()
+ appl.reload()
+}
+
+function display_err(resp) {
+
+ var error_message = null;
+
+ if (typeof resp == 'string')
+ error_message = resp
+ else
+ error_message = format_err(resp)
+
+ appl.def('new_bank_account', {error: error_message, loading: false})
+}
+
+
+
diff --git a/app/javascript/legacy/bank_accounts/resend_confirmation_email.js b/app/javascript/legacy/bank_accounts/resend_confirmation_email.js
new file mode 100644
index 00000000..5eb6843a
--- /dev/null
+++ b/app/javascript/legacy/bank_accounts/resend_confirmation_email.js
@@ -0,0 +1,11 @@
+// License: LGPL-3.0-or-later
+var request = require('../common/super-agent-frp')
+
+var a = document.querySelector(".js-event-resendBankConfirmEmail")
+
+if(a) a.addEventListener('click', resendBankConfirmation)
+
+function resendBankConfirmation() {
+ request.post('/nonprofits/' + app.nonprofit_id + '/bank_account/resend_confirmation').perform()
+ appl.open_modal('bankConfirmResendModal')
+}
diff --git a/app/javascript/legacy/campaigns/index/page.js b/app/javascript/legacy/campaigns/index/page.js
new file mode 100644
index 00000000..2d0166dd
--- /dev/null
+++ b/app/javascript/legacy/campaigns/index/page.js
@@ -0,0 +1,4 @@
+// License: LGPL-3.0-or-later
+if(app.user)
+ require('../new/wizard')
+
diff --git a/app/javascript/legacy/campaigns/new/peer_to_peer_wizard.js b/app/javascript/legacy/campaigns/new/peer_to_peer_wizard.js
new file mode 100644
index 00000000..c839d09c
--- /dev/null
+++ b/app/javascript/legacy/campaigns/new/peer_to_peer_wizard.js
@@ -0,0 +1,43 @@
+// License: LGPL-3.0-or-later
+
+//This is used for federated p2p campaigns
+require('../../components/wizard')
+var format_err = require('../../common/format_response_error')
+
+appl.def('advance_p2p_campaign_name_step', function(form_obj) {
+ var name = form_obj['campaign[name]']
+ appl.def('new_p2p_campaign', form_obj)
+ appl.wizard.advance('new_p2p_campaign_wiz')
+})
+
+// Post a new campaign.
+appl.def('create_p2p_campaign', function(el) {
+ var form_data = utils.toFormData(appl.prev_elem(el))
+ form_data = utils.mergeFormData(form_data, appl.new_p2p_campaign)
+ appl.def('new_p2p_campaign_wiz.loading', true)
+
+ post_p2p_campaign(form_data)
+ .then(function(req) {
+ appl.notify("Redirecting to your campaign...")
+ appl.redirect(JSON.parse(req.response).url)
+ })
+ .catch(function(req) {
+ appl.def('new_p2p_campaign_wiz.loading', false)
+ appl.def('new_p2p_campaign_wiz.error', req.responseText)
+ })
+})
+
+// Using the bare-bones XMLHttpRequest API so we can post form data and upload the image
+function post_p2p_campaign(form_data) {
+ return new Promise(function(resolve, reject) {
+ var req = new XMLHttpRequest()
+ req.open("POST", '/nonprofits/' + app.nonprofit_id + '/campaigns')
+ req.setRequestHeader('X-CSRF-Token', window._csrf)
+ console.log(form_data)
+ req.send(form_data)
+ req.onload = function(ev) {
+ if(req.status === 200) resolve(req)
+ else reject(req)
+ }
+ })
+}
diff --git a/app/javascript/legacy/campaigns/new/wizard.js b/app/javascript/legacy/campaigns/new/wizard.js
new file mode 100644
index 00000000..ab107da1
--- /dev/null
+++ b/app/javascript/legacy/campaigns/new/wizard.js
@@ -0,0 +1,57 @@
+// License: LGPL-3.0-or-later
+require('../../common/pikaday-timepicker')
+require('../../components/wizard')
+require('../../common/image_uploader')
+var checkName = require('../../common/ajax/check_campaign_or_event_name')
+var format_err = require('../../common/format_response_error')
+
+
+appl.def('advance_campaign_name_step', function(form_obj) {
+ var name = form_obj['campaign[name]']
+ checkName(name, 'campaign', function(){
+ appl.def('new_campaign', form_obj)
+ appl.wizard.advance('new_campaign_wiz')
+ })
+})
+
+// Post a new campaign.
+appl.def('create_campaign', function(el) {
+ var form_data = utils.toFormData(appl.prev_elem(el))
+ form_data = utils.mergeFormData(form_data, appl.new_campaign)
+ appl.def('new_campaign_wiz.loading', true)
+
+// TODO: for p2p capmaigns, merge with preset campaing params
+
+ post_campaign(form_data)
+ .then(function(req) {
+ appl.notify("Redirecting to your campaign...")
+ appl.redirect(JSON.parse(req.response).url)
+ })
+ .catch(function(req) {
+ appl.def('new_campaign_wiz.loading', false)
+ appl.def('new_campaign_wiz.error', req.responseText)
+ })
+})
+
+
+var Pikaday = require('pikaday')
+var moment = require('moment')
+new Pikaday({
+ field: document.querySelector('.js-date-picker'),
+ format: 'M/D/YYYY',
+ minDate: moment().toDate()
+})
+
+// Using the bare-bones XMLHttpRequest API so we can post form data and upload the image
+function post_campaign(form_data) {
+ return new Promise(function(resolve, reject) {
+ var req = new XMLHttpRequest()
+ req.open("POST", '/nonprofits/' + app.nonprofit_id + '/campaigns')
+ req.setRequestHeader('X-CSRF-Token', window._csrf)
+ req.send(form_data)
+ req.onload = function(ev) {
+ if(req.status === 200) resolve(req)
+ else reject(req)
+ }
+ })
+}
diff --git a/app/javascript/legacy/campaigns/peer_to_peer/page.js b/app/javascript/legacy/campaigns/peer_to_peer/page.js
new file mode 100644
index 00000000..c9730bcf
--- /dev/null
+++ b/app/javascript/legacy/campaigns/peer_to_peer/page.js
@@ -0,0 +1,129 @@
+// License: LGPL-3.0-or-later
+require('../new/peer_to_peer_wizard')
+require('../new/wizard.js')
+require('../../common/image_uploader')
+
+var request = require("../../common/client")
+
+appl.def('undelete_p2p', function (url){
+ appl.def('loading', true)
+ request.put(url + '/soft_delete', {delete: false}).end(function(err, resp) {
+ if (err) {
+ appl.def('loading', false)
+ }
+ else{
+ window.location = url
+ }
+
+ })
+})
+
+// setting up some default values
+appl.def('is_signing_up', true)
+ .def('selected_result_index', -1)
+
+
+appl.def('search_nonprofits', function(value){
+ // keyCode 13 is the return key.
+ // this conditional just clears the dropdown
+ if(event.keyCode === 13) {
+ appl.def('search_results', [])
+ return
+ }
+ // when the user starts typing,
+ // it sets the selected_results key to false
+ appl.def('selected_result', false)
+
+ // if the the input is empty, it clears the dropdown
+ if (!value) {
+ appl.def('search_results', [])
+ return
+ }
+
+ // logic for controlling the dropdown options with up
+ // and down arrows
+ if (returnUpOrDownArrow() && appl.search_results && appl.search_results.length) {
+ event.preventDefault()
+ setIndexWithArrows(returnUpOrDownArrow())
+ return
+ }
+
+ // if the input is not an up or down arrow or an empty string
+ // or a return key, then it searches for nonprofits
+ utils.delay(300, function(){ajax_nonprofit_search(value)})
+})
+
+
+function ajax_nonprofit_search(value){
+ request.get('/nonprofits/search?npo_name=' + value).end(function(err, resp){
+ if(!resp.body) {
+ appl.def('search_results', [])
+ appl.notify("Sorry, we couldn't find any nonprofits containing the word '" + value + "'")
+ } else {
+ appl.def('selected_result_index', -1)
+ appl.def('search_results', resp.body)
+ }
+ })
+}
+
+
+function returnUpOrDownArrow() {
+ var keyCode = event.keyCode
+ if(keyCode === 38)
+ return 'up'
+ if(keyCode === 40)
+ return 'down'
+}
+
+
+function setIndexWithArrows(dir) {
+ if(dir === 'down') {
+ var search_length = appl.search_results.length -1
+ appl.def('selected_result_index', appl.selected_result_index === search_length
+ ? search_length
+ : appl.selected_result_index += 1)
+ } else {
+ appl.def('selected_result_index', appl.selected_result_index === 0
+ ? 0
+ : appl.selected_result_index -= 1)
+ }
+}
+
+appl.def('select_result', {
+ with_arrows: function(i, node) {
+ addSelectedClass(appl.prev_elem(node))
+ var selected = appl.search_results[appl.selected_result_index]
+ app.nonprofit_id = selected.id
+ appl.def('selected_result', selected)
+ utils.change_url_param('npo_id', selected.id, '/peer-to-peer')
+ },
+ with_click: function(i, node) {
+ appl.def('selected_result_index', i)
+ addSelectedClass(appl.prev_elem(node))
+ var selected = appl.search_results[i]
+ app.nonprofit_id = selected.id
+ appl.def('selected_result', selected)
+ appl.def('search_results', [])
+ utils.change_url_param('npo_id', selected.id, '/peer-to-peer')
+ }
+})
+
+
+function addSelectedClass(node) {
+ if(!node || !node.parentElement) return
+ var siblings = node.parentElement.querySelectorAll('li')
+ var len = siblings.length
+ while(len--){siblings[len].className=''}
+ node.className = 'is-selected'
+}
+
+// this is for clearing the dropdown
+var main = document.querySelector('main')
+
+main.onclick = function(ev) {
+ var node = ev.target.nodeName
+ if(node === 'INPUT' || node === 'BUTTON') {
+ return
+ }
+ appl.def('search_results', [])
+}
diff --git a/app/javascript/legacy/campaigns/show/admin.js b/app/javascript/legacy/campaigns/show/admin.js
new file mode 100644
index 00000000..c4703b95
--- /dev/null
+++ b/app/javascript/legacy/campaigns/show/admin.js
@@ -0,0 +1,113 @@
+// License: LGPL-3.0-or-later
+require('../../common/pikaday-timepicker')
+require('../../common/restful_resource')
+const request = require('../../common/client')
+const formatErr = require('../../common/format_response_error')
+require('../../common/image_uploader')
+require('./tour')
+const dupeIt = require('../../components/duplicate_fundraiser')
+
+dupeIt(`/nonprofits/${app.nonprofit_id}/campaigns`, app.campaign_id)
+
+var url = '/nonprofits/' + app.nonprofit_id + '/campaigns/' + app.campaign_id
+var create_supporter = require('../../nonprofits/supporters/create')
+var create_offline_donation = require('../../donations/create_offline')
+
+require('../../components/ajax/toggle_soft_delete')(url, 'campaign')
+
+// Initialize the froala wysiwyg
+var editable = require('../../common/editable')
+if (app.is_parent_campaign) {
+ editable($('#js-campaignBody'), {
+ sticky: true,
+ placeholder: "Add your campaign's story here. We strongly recommend that this section is filled out with at least 250 words. It will be saved automatically as you type. You can add images, videos and custom HTML too."
+ })
+}
+
+editable($('#js-customReceipt'), {
+ button: ["bold", "italic", "formatBlock", "align", "createLink",
+ "insertImage", "insertUnorderedList", "insertOrderedList",
+ "undo", "redo", "insert_donate_button", "html"]
+ , placeholder: "Add optional message here. It will be saved automatically as you type."
+})
+
+
+
+var path = '/nonprofits/' + app.nonprofit_id + '/campaigns/' + app.campaign_id
+
+
+appl.def('remove_banner_image', function() {
+ var url = '/nonprofits/' + app.nonprofit_id + '/campaigns/' + app.campaign_id
+ var notification = 'Removing banner image...'
+ var payload = {remove_banner_image : true}
+ appl.remove_image(url, 'campaign', notification, payload)
+})
+
+appl.def('remove_background_image', function() {
+ var url = '/nonprofits/' + app.nonprofit_id + '/campaigns/' + app.campaign_id
+ var notification = 'Removing background image...'
+ var payload = {remove_background_image : true}
+ appl.remove_image(url, 'campaign', notification, payload)
+})
+
+appl.def('count_story_words', function() {
+ var wysiwyg = document.querySelector(".editable")
+ appl.def('has_story', wysiwyg.textContent.split(' ').length > 60)
+})
+
+appl.def('highlight_body', function(){
+ appl.def('body_is_highlighted', true)
+ appl.close_modal()
+})
+
+appl.count_story_words(document.querySelector('.campaign-body'))
+
+appl.def('track_launch', function() {
+ window.location.reload()
+})
+
+appl.def('create_offline_donation', function(data, el) {
+ create_supporter({supporter: data.supporter}, createSupporterUI)
+ .then(function(resp) {
+ data.supporter_id = resp.body.id
+ delete data.supporter
+ return create_offline_donation(data, createDonationUI)
+ }).then(function(el){
+ appl.ajax_metrics.index()
+ appl.prev_elem(el).reset()
+ })
+})
+
+
+var createSupporterUI = {
+ start: function() {
+ appl.is_loading()
+ },
+ success: function() {
+ return this
+ },
+ fail: function(msg) {
+ appl.def('error', formatErr(msg))
+ appl.not_loading()
+ }
+}
+
+var createDonationUI = {
+ start: function() { },
+ success: function(resp) {
+ appl.not_loading()
+ appl.close_modal()
+ appl.notify('Campaign Donation Saved!')
+ },
+ fail: function(msg){
+ appl.def('error', formatErr(msg))
+ appl.not_loading()
+ }
+}
+
+if(app.vimeo_id) {
+ request.get('http://vimeo.com/api/v2/video/' + app.vimeo_id + '.json')
+ .end(function(err, resp){
+ appl.def('vimeo_image_url', "background-image:url('" + resp.body[0].thumbnail_small + "')")
+ })
+}
diff --git a/app/javascript/legacy/campaigns/show/choose-gift-options-modal.js b/app/javascript/legacy/campaigns/show/choose-gift-options-modal.js
new file mode 100644
index 00000000..2b42675a
--- /dev/null
+++ b/app/javascript/legacy/campaigns/show/choose-gift-options-modal.js
@@ -0,0 +1,44 @@
+// License: LGPL-3.0-or-later
+const h = require('snabbdom/h')
+const flyd = require('flyd')
+const R = require('ramda')
+
+const soldOut = require('./is-sold-out')
+const giftButton = require('./gift-option-button')
+
+const giftOption = g => h('option', { props: {value: g.id} }, g.name)
+
+const setDisplayGift = (state, gifts) => ev => {
+ var id = Number(ev.target.value)
+ state.selectedModalGift$(R.find(R.propEq('id', id))(gifts))
+}
+
+const chooseGift = (state, gifts) =>
+ h('div.pastelBox--grey.u-padding--10', [
+ h('select.u-margin--0', {on: {change: setDisplayGift(state, gifts)}}
+ , R.concat([h('option', 'Choose a gift option')], R.map(giftOption, gifts)))
+ , h('div.sideGifts',
+ state.selectedModalGift$() && state.selectedModalGift$().id
+ ? [
+ h('p.u-marginTop--10', state.selectedModalGift$().description || '')
+ , giftButton(state.giftOptions, state.selectedModalGift$())
+ ]
+ : ''
+ )
+ ])
+
+const regularContribution = state => {
+ if (app.campaign.hide_custom_amounts) return ''
+ return h('div.u-marginTop--15.centered', [
+ h('a', {on: {click: state.clickRegularContribution$}}, 'Contribute with no gift option')
+ ])
+}
+
+module.exports = state => {
+ var gifts = R.filter(g => !soldOut(g), state.giftOptions.giftOptions$() || [])
+ return h('div.u-padding--15', [
+ chooseGift(state, gifts)
+ , regularContribution(state)
+ ])
+}
+
diff --git a/app/javascript/legacy/campaigns/show/gift-option-button.js b/app/javascript/legacy/campaigns/show/gift-option-button.js
new file mode 100644
index 00000000..b4c67a9d
--- /dev/null
+++ b/app/javascript/legacy/campaigns/show/gift-option-button.js
@@ -0,0 +1,57 @@
+// License: LGPL-3.0-or-later
+const h = require('snabbdom/h')
+const branding = require('../../components/nonprofit-branding')
+const format = require('../../common/format')
+const soldOut = require('./is-sold-out')
+
+// function prepareForIOS11()
+// {
+// bad_elements = $('.ff-modalBackdrop')
+// for(var i = 0; i < bad_elements.length; i++)
+// {
+// bad_elements[i].classList.add('ios-force-absolute-positioning')
+// }
+//
+//
+// $('body').scrollTop(195) // so incredibly hacky
+// }
+
+
+module.exports = (state, gift) => {
+ if(state.timeRemaining$() <= 0) return '' // dont show gift options button if the campaign has ended
+ return h('table', {
+ class: {'u-hide': !gift.amount_one_time && !gift.amount_recurring}
+ }, [
+ h('tr', [
+ gift.amount_one_time
+ ? h('td', [
+ h('button.button--small.button--gift', {
+ on: {click: ev => {
+
+
+ state.clickOption$([gift, gift.amount_one_time, 'one-time'])}
+ }
+
+ , style: {background: branding.dark}
+ , props: {title: `Contribute towards ${gift.name}`}
+ , class: {disabled: soldOut(gift)}
+ }, [ h('span.dollar', '$ ') , format.centsToDollars(gift.amount_one_time), h('br'), h('small', 'One-time') ])
+ ])
+ : '' // no one-time amount
+ , gift.amount_recurring && gift.amount_one_time ? h('td.orWithLine') : '' // whether to show the cool OR graphic between buttons
+ , gift.amount_recurring
+ ? h('td', [
+ h('button.button--small.button--gift', {
+ on: {click: ev => {
+
+ state.clickOption$([gift, gift.amount_recurring, 'recurring'])}
+ }
+ , style: {background: branding.dark}
+ , props: {title: `Contribute monthly towards ${gift.name}`}
+ , class: {disabled: soldOut(gift)}
+ }, [h('span.dollar', '$ '), format.centsToDollars(gift.amount_recurring), h('br'), h('small', 'Monthly') ])
+ ])
+ : '' // no recurring amount
+ ])
+ ])
+}
diff --git a/app/javascript/legacy/campaigns/show/gift-option-list.js b/app/javascript/legacy/campaigns/show/gift-option-list.js
new file mode 100644
index 00000000..a2ef43bb
--- /dev/null
+++ b/app/javascript/legacy/campaigns/show/gift-option-list.js
@@ -0,0 +1,81 @@
+// License: LGPL-3.0-or-later
+const h = require('snabbdom/h')
+const flyd = require('flyd')
+const R = require('ramda')
+const request = require('../../common/request')
+const format = require('../../common/format')
+const branding = require('../../components/nonprofit-branding')
+flyd.mergeAll = require('flyd/module/mergeall')
+
+const quantityLeft = require('./gift-option-quantity-left')
+const giftButton = require('./gift-option-button')
+
+// Pass in a stream that has a value when the gift options need to be refreshed, so we know when to refresh em!
+function init(giftsNeedRefresh$, parentState) {
+ var state = {
+ timeRemaining$: parentState.timeRemaining$
+ , clickOption$: flyd.stream()
+ , openEditGiftModal$: flyd.stream()
+ }
+
+ // XXX some legacy viewscript mixed in here
+ flyd.map(gift => {
+ appl.open_modal('giftOptionFormModal')
+ appl.def('gift_options', {current: gift, is_updating: true})
+ appl.def('gift_option_action', 'Edit')
+ }, state.openEditGiftModal$)
+
+ const pageloadGifts$ = index()
+ const refreshedGifts$ = flyd.flatMap(index, giftsNeedRefresh$)
+ state.giftOptions$ = flyd.mergeAll([
+ pageloadGifts$
+ , refreshedGifts$
+ , flyd.stream([]) // default before ajax loads
+ ])
+ return state
+}
+
+function index() {
+ const path = `/nonprofits/${app.nonprofit_id}/campaigns/${app.campaign_id}/campaign_gift_options`
+ return flyd.map(
+ req => req.body.data
+ , request({path, method: 'get'}).load
+ )
+}
+
+function view(state) {
+ return h('aside.sideGifts.u-marginBottom--15', {
+ class: {'u-hide': !state.giftOptions$().length}
+ }, R.map(giftBox(state), state.giftOptions$())
+ )
+}
+
+const giftBox = state => gift => {
+ return h('section.u-relative', [
+ h('div.sideGift.pastelBox--grey--dark', [
+ h('h5.u-marginTop--0', gift.name)
+ , totalContributions(gift)
+ , quantityLeft(gift)
+ , h('p.u-marginBottom--15', gift.description)
+ , h('div', [ giftButton(state, gift) ])
+ ])
+ , (app.current_campaign_editor && app.is_parent_campaign) // Show edit button only if the current user is a parent campaign editor
+ ? h('button.button--tiny.absolute.edit.hasShadow', {
+ on: {click: ev => state.openEditGiftModal$(gift)}
+ }, [
+ h('i.fa.fa-pencil')
+ , ' Edit Gift'
+ ])
+ : '' // do not show gift edit button
+ ])
+}
+
+const totalContributions = gift => {
+ if(gift.hide_contributions) return ''
+ return h('p', [
+ h('i.fa.fa-star', { style: { color: branding.base} })
+ , ` ${format.numberWithCommas(gift.total_gifts)} Contribution${gift.total_gifts === 1 ? '' : 's'}`
+ ])
+}
+
+module.exports = {view, init}
diff --git a/app/javascript/legacy/campaigns/show/gift-option-quantity-left.js b/app/javascript/legacy/campaigns/show/gift-option-quantity-left.js
new file mode 100644
index 00000000..e109f3ae
--- /dev/null
+++ b/app/javascript/legacy/campaigns/show/gift-option-quantity-left.js
@@ -0,0 +1,18 @@
+// License: LGPL-3.0-or-later
+const h = require('snabbdom/h')
+const soldOut = require('./is-sold-out')
+
+module.exports = gift => {
+ if(gift.hide_contributions || !gift.quantity) return ''
+
+ if(soldOut(gift)) {
+ return h('p', [
+ h('small.strong.highlight--white--small', 'SOLD OUT')
+ ])
+ } else {
+ return h('p', [
+ h('small.strong.highlight--white--small', [ `${gift.quantity - gift.total_gifts} Left` ])
+ ])
+ }
+}
+
diff --git a/app/javascript/legacy/campaigns/show/is-sold-out.js b/app/javascript/legacy/campaigns/show/is-sold-out.js
new file mode 100644
index 00000000..e013f44b
--- /dev/null
+++ b/app/javascript/legacy/campaigns/show/is-sold-out.js
@@ -0,0 +1,3 @@
+// License: LGPL-3.0-or-later
+module.exports = g => g.quantity && (g.quantity - g.total_gifts <= 0)
+
diff --git a/app/javascript/legacy/campaigns/show/metrics-and-contribute-box.js b/app/javascript/legacy/campaigns/show/metrics-and-contribute-box.js
new file mode 100644
index 00000000..ac031fef
--- /dev/null
+++ b/app/javascript/legacy/campaigns/show/metrics-and-contribute-box.js
@@ -0,0 +1,105 @@
+// License: LGPL-3.0-or-later
+const R = require('ramda')
+const flyd = require('flyd')
+const h = require('snabbdom/h')
+const format = require('../../common/format')
+const branding = require('../../components/nonprofit-branding')
+
+// This is the box currently at the top right that shows some big metrics for
+// the campaign, a big Contribute button (if enabled to show), days remaining
+// (and a "campaign is done" message if no days remaining)
+
+function init(parentState) {
+ var state = {
+ clickContribute$: flyd.stream()
+ , timeRemaining$: parentState.timeRemaining$
+ , metrics$: parentState.metrics$
+ , loading$: parentState.loadingMetrics$
+ }
+
+ return state
+}
+
+
+function view(state) {
+ return h('div.pastelBox--grey--dark.u-relative.u-marginBottom--15.u-padding--15', [
+ metrics(state)
+ , endedMessage(state)
+ , progressBar(state)
+ , contributeButton(state)
+ ])
+}
+
+const metrics = state => {
+ return h('div.campaignMetrics', [
+ totalSupporters(state)
+ , totalRaised(state)
+ , daysLeft(state)
+ ])
+}
+
+const totalSupporters = state => {
+ if(!app.campaign.show_total_count) return ''
+ return h('div', [
+ h('h4', [
+ state.loading$() ? h('i.fa.fa-spin.fa-spinner') : format.numberWithCommas(state.metrics$().supporters_count)
+ ])
+ , h('p', 'supporters')
+ ])
+}
+
+const totalRaised = state => {
+ if(!app.campaign.show_total_raised) return ''
+ return h('div', [
+ h('h4', [
+ state.loading$() ? h('i.fa.fa-spin.fa-spinner') : '$' + format.centsToDollars(state.metrics$().total_raised, {noCents: true})
+ ])
+ , h('p', [
+ 'raised'
+ , app.campaign.hide_goal
+ ? ''
+ : ' of $' + format.centsToDollars(app.campaign.goal_amount) + ' goal'
+ ])
+ ])
+}
+
+const daysLeft = state => {
+ if(!state.timeRemaining$()) return ''
+ return h('div', [
+ h('h4', state.timeRemaining$())
+ , h('p', 'remaining')
+ ])
+}
+
+const endedMessage = state => {
+ if(state.timeRemaining$()) return ''
+ return h('p', [
+ `This campaign has ended, but you can still contribute by clicking the button below.`
+ ])
+}
+
+const progressBar = state => {
+ if(app.campaign.hide_thermometer) return ''
+ return h('div.progressBar--medium.u-marginBottom--15', [
+ h('div.progressBar--medium-fill', {
+ style: {
+ width: R.clamp(1,100, format.percent(
+ state.metrics$().goal_amount
+ , state.metrics$().total_raised
+ ) + '%')
+ , 'background-color': branding.light
+ , transition: 'width 1s'
+ }
+ })
+ ])
+}
+
+const contributeButton = state => {
+ return h('a.js-contributeButton.button--jumbo.u-width--full', {
+ style: {'background-color': branding.base}
+ , on: {click: state.clickContribute$}
+ }, [ 'Contribute' ])
+}
+
+module.exports = { init, view }
+
diff --git a/app/javascript/legacy/campaigns/show/page.js b/app/javascript/legacy/campaigns/show/page.js
new file mode 100755
index 00000000..e965c5ed
--- /dev/null
+++ b/app/javascript/legacy/campaigns/show/page.js
@@ -0,0 +1,169 @@
+// License: LGPL-3.0-or-later
+const flyd = require('flyd')
+const h = require('snabbdom/h')
+const R = require('ramda')
+const donateWiz = require('../../nonprofits/donate/wizard')
+const render = require('ff-core/render')
+const snabbdom = require('snabbdom')
+const modal = require('ff-core/modal')
+flyd.mergeAll = require('flyd/module/mergeall')
+flyd.scanMerge = require('flyd/module/scanmerge')
+const format = require('../../common/format')
+const giftOptions = require('./gift-option-list')
+const chooseGiftOptionsModal = require('./choose-gift-options-modal')
+const metricsAndContributeBox = require('./metrics-and-contribute-box')
+const timeRemaining = require('../../common/time-remaining')
+const request = require('../../common/request')
+
+const activities = require('../../components/public-activities')
+
+
+// Viewscript legacy side effect stuff
+require('../../components/branded_fundraising')
+require('../../common/on-change-sanitize-slug')
+require('../../common/fundraiser_metrics')
+require('../../components/fundraising/add_header_image')
+require('../../common/restful_resource')
+require('../../gift_options/index')
+const on_ios11 = require('../../common/on-ios11')
+const noScroll = require('no-scroll')
+appl.ajax_gift_options.index()
+
+
+
+// Campaign editor only functionality
+if(app.current_campaign_editor) {
+ require('./admin')
+ appl.def('current_campaign_editor', true)
+ require('../../gift_options/admin')
+ var create_info_card = require('../../supporters/info-card.es6')
+}
+
+// Initialize the state for the top-level campaign component
+// This includes the metrics, contribute button, gift options listing, and the donate wizard (most of right sidebar)
+// Later can include the other viewscript pieces
+function init() {
+ var state = {
+ timeRemaining$: timeRemaining(app.end_date_time, app.timezone),
+ }
+
+ console.error(window.navigator.userAgent)
+ state.giftOptions = giftOptions.init(flyd.stream(), state)
+
+ const metricsResp$ = flyd.map(R.prop('body'), request({
+ method: 'get'
+ , path: `/nonprofits/${app.nonprofit_id}/campaigns/${app.campaign.id}/metrics`
+ }).load)
+ state.loadingMetrics$ = flyd.mergeAll([
+ flyd.map(_ => false, metricsResp$)
+ , flyd.stream(true)
+ ])
+ state.metrics$ = flyd.merge(
+ flyd.stream({goal_amount: 0, total_raised: 0, supporters_count: 0})
+ , metricsResp$
+ )
+ state.metrics = metricsAndContributeBox.init(state)
+
+ state.activities = activities.init('campaign', `/nonprofits/${app.nonprofit_id}/campaigns/${app.campaign_id}/activities`)
+
+
+ const contributeModalType$ = R.compose(
+ flyd.map(_ =>
+ state.timeRemaining$() && state.giftOptions.giftOptions$().length
+ ? 'gifts' : 'regular')
+ )(state.metrics.clickContribute$)
+
+ const clickContributeGifts$ = flyd.filter(x => x === 'gifts', contributeModalType$)
+
+ const clickContributeRegular$ = flyd.filter(x => x === 'regular', contributeModalType$)
+
+ state.clickRegularContribution$ = flyd.stream()
+
+ const startWiz$ = flyd.mergeAll([
+ state.giftOptions.clickOption$
+ , clickContributeRegular$
+ , state.clickRegularContribution$
+ ])
+
+ state.selectedModalGift$ = flyd.stream({})
+
+ state.modalID$ = flyd.merge(
+ flyd.map(R.always('chooseGiftOptionsModal'), clickContributeGifts$)
+ , flyd.map(R.always('donationModal'), startWiz$))
+
+ flyd.on((id) => {
+ if (on_ios11() && id === null) {
+ noScroll.off()
+ }
+ }, state.modalID$)
+
+ flyd.on((id) => {
+ if (on_ios11() && id !== null) {
+ noScroll.on()
+ }
+ }, state.modalID$)
+
+ // Stream of which gift option you have selected
+ const giftOption$ = flyd.map(setGiftParams, state.giftOptions.clickOption$)
+ const donateParam$ = flyd.scanMerge([
+ [state.metrics.clickContribute$, resetDonateForm]
+ , [giftOption$, setGiftOption]
+ ], {campaign_id: app.campaign.id} )
+
+ state.donateWiz = donateWiz.init(donateParam$)
+
+ return state
+}
+
+const resetDonateForm = (params, _) => R.merge(params, {
+ single_amount: undefined
+, gift_option: undefined
+, type: undefined
+})
+
+const setGiftOption = (params, gift) => R.merge(params, {
+ single_amount: gift.amount / 100
+, gift_option: gift
+, type: gift.type
+})
+
+
+// Set the donate wizard parameters using data from a gift option
+const setGiftParams = (triple) => {
+ var [gift, amount, type] = triple
+ return { amount: amount, type: type , id: gift.id, name: gift.name, to_ship: gift.to_ship}
+}
+
+function view(state) {
+ return h('div', [
+ metricsAndContributeBox.view(state.metrics)
+ , giftOptions.view(state.giftOptions)
+ , activities.view(state.activities)
+ , h('div.donationModal', [
+ modal({
+ thisID: 'donationModal'
+ , id$: state.modalID$
+ , body: donateWiz.view(state.donateWiz)
+ // , notCloseable: state.donateWiz.paymentStep.cardForm.loading$()
+ })
+ , modal({
+ thisID: 'chooseGiftOptionsModal'
+ , title: 'Contribute'
+ , id$: state.modalID$
+ , body: chooseGiftOptionsModal(state)
+ })
+ ])
+ ])
+}
+
+// -- Render to the page
+
+const patch = snabbdom.init([
+ require('snabbdom/modules/eventlisteners')
+, require('snabbdom/modules/class')
+, require('snabbdom/modules/props')
+, require('snabbdom/modules/style')
+])
+
+render({state: init(), view, patch, container: document.querySelector('.ff-sidebar')})
+
diff --git a/app/javascript/legacy/campaigns/show/tour.js b/app/javascript/legacy/campaigns/show/tour.js
new file mode 100644
index 00000000..161a3174
--- /dev/null
+++ b/app/javascript/legacy/campaigns/show/tour.js
@@ -0,0 +1,35 @@
+// License: LGPL-3.0-or-later
+require('../../common/vendor/bootstrap-tour-standalone')
+
+var tour_campaign = new Tour({
+ steps: [
+ {
+ orphan: true,
+ title: 'Welcome to your new campaign!',
+ content: "Click 'Next' to find out how you can flesh out your campaign before sharing it."
+ },
+ {
+ title: 'Manage your campaign',
+ placement: 'bottom',
+ element: '.tour-admin',
+ content: "You can manage your campaign by clicking on these buttons at the top of the page."
+ },
+ {
+ element: '.froala-box',
+ title: 'Write your story',
+ content: "Every successful campaign has a powerful story. Write and edit your story in the area to the left. You can add formatting by clicking the icons at the top of this box."
+ },
+ {
+ orphan: true,
+ title: 'You’re on your way!',
+ content: "Once you’ve written your campaign story and added gift options, you can start sharing it with all your contacts. We’re excited for it to succeed!"
+ }
+ ]
+})
+
+if($.cookie('tour_campaign') === String(app.nonprofit_id)) {
+ $.removeCookie('tour_campaign', {path: '/'})
+ tour_campaign.init()
+ tour_campaign.restart()
+}
+
diff --git a/app/javascript/legacy/campaigns/supporters/index/index.es6 b/app/javascript/legacy/campaigns/supporters/index/index.es6
new file mode 100644
index 00000000..941ecbc8
--- /dev/null
+++ b/app/javascript/legacy/campaigns/supporters/index/index.es6
@@ -0,0 +1,63 @@
+// License: LGPL-3.0-or-later
+const request = require('../../../common/super-agent-frp')
+const view = require('vvvview')
+const flyd = require('flyd')
+const scanMerge = require('flyd/module/scanmerge')
+const flatMap = require('flyd/module/flatmap')
+const Im = require('immutable')
+const Map = Im.Map
+const fromJS = Im.fromJS
+
+const list = require('./supporter-list.es6')
+
+var el = document.querySelector('.js-view-supporters')
+var state = Map({loading: true})
+var listView = view(list.root, el, state)
+
+// Given a query object, return an ajax stream
+const request_index = query =>
+ request
+ .get(`/nonprofits/${app.nonprofit_id}/campaigns/${ENV.campaignID}/admin/supporters`)
+ .query(query)
+ .perform()
+
+var $searchResponses = flatMap(request_index, list.$streams.searches)
+
+const appendPage = (state, resp) => {
+ var oldSupporters = state.getIn(['supporters', 'data'])
+ var newData = fromJS(resp.body)
+ if(oldSupporters) newData = newData.set('data', oldSupporters.concat(newData.get('data')))
+ return state
+ .set('supporters', newData)
+ .set('moreLoading', false)
+ .set('loading', false)
+}
+
+const $showMorePages = flyd.scan(
+ count => count + 1
+ , 1
+ , list.$streams.showMore)
+
+const $newPages = flatMap(
+ page => request_index({page: page})
+ , $showMorePages)
+
+const setResults = (state, resp) =>
+ state.set('supporters', fromJS(resp.body)).set('loading', false)
+
+var $giftLevelResponses =
+ request.get(`/nonprofits/${app.nonprofit_id}/campaigns/${ENV.campaignID}/admin/campaign_gift_options`).perform()
+
+var $state = flyd.immediate(scanMerge([
+ [list.$streams.searches, state => state.set('loading', true).set('isSearching', true)],
+ [list.$streams.showMore, state => state.set('moreLoading', true).set('page', state.get('page') + 1)],
+ [$newPages, appendPage],
+ [$searchResponses, setResults],
+ [$giftLevelResponses, (state, resp) => state.set('gift_levels', fromJS(resp.body))],
+], state))
+
+window.$state =$state
+window.$giftLevelResponses= $giftLevelResponses
+
+flyd.map(listView, $state)
+
diff --git a/app/javascript/legacy/campaigns/supporters/index/meta.es6 b/app/javascript/legacy/campaigns/supporters/index/meta.es6
new file mode 100644
index 00000000..3d071607
--- /dev/null
+++ b/app/javascript/legacy/campaigns/supporters/index/meta.es6
@@ -0,0 +1,27 @@
+// License: LGPL-3.0-or-later
+// Table meta for the supporter listing under Campaigns
+const h = require('virtual-dom/h')
+const thunk = require('vdom-thunk')
+const search = require('../../../components/tables/search.es6')
+
+const root = state =>
+ h('div.container', [
+ thunk(search.root, state),
+ h('a.table-meta-button.white', {
+ href: `/nonprofits/${app.nonprofit_id}/campaigns/${ENV.campaignID}/admin/donations.csv`,
+ target: '_blank',
+ }, [ h('i.fa.fa-file-text'), ' Export ' ]),
+ /*
+ h('a.table-meta-button.green', {
+ onclick: $.showEmailModal
+ }, [ h('i.fa.fa-envelope'), ' Email ' ])
+ */
+ ])
+
+module.exports = {
+ root: root,
+ $streams: {
+ searches: search.$streams.searches
+ }
+}
+
diff --git a/app/javascript/legacy/campaigns/supporters/index/metrics.es6 b/app/javascript/legacy/campaigns/supporters/index/metrics.es6
new file mode 100644
index 00000000..a476ba58
--- /dev/null
+++ b/app/javascript/legacy/campaigns/supporters/index/metrics.es6
@@ -0,0 +1,35 @@
+// License: LGPL-3.0-or-later
+const view = require('vvvview')
+const h = require('virtual-dom/h')
+const flyd = require('flyd')
+const scanMerge = require('flyd/module/scanmerge')
+const thunk = require('vdom-thunk')
+const request = require('../../../common/super-agent-frp')
+const format = require('../../../common/format')
+const Im = require('immutable')
+const Map = Im.Map
+const fromJS = Im.fromJS
+
+const root = state => {
+ if(!state || !state.get('data')) return h('span')
+ return h('table.table--plaid', [
+ h('thead', [
+ h('tr', [h('th', 'Gift option'), h('th', 'Count'), h('th', 'One time'), h('th', 'Recurring')]),
+ ]),
+ h('tbody', state.get('data').map(gift => thunk(giftRow, gift)).toJS())
+ ])
+}
+
+const giftRow = gift => {
+
+ var name = gift.get('name')
+ name = !name || !name.length ? 'No Gift Option Chosen' : name
+ return h('tr', [
+ h('td', h('strong', name)),
+ h('td', (gift.get('total_donations') || 0) + ''),
+ h('td', '$' + utils.cents_to_dollars(gift.get('total_one_time'))),
+ h('td', '$' + utils.cents_to_dollars(gift.get('total_recurring')))
+ ])
+}
+
+module.exports = { root: root, $streams: $ }
diff --git a/app/javascript/legacy/campaigns/supporters/index/page.js b/app/javascript/legacy/campaigns/supporters/index/page.js
new file mode 100644
index 00000000..c1d016b8
--- /dev/null
+++ b/app/javascript/legacy/campaigns/supporters/index/page.js
@@ -0,0 +1,5 @@
+// License: LGPL-3.0-or-later
+require('../../timeline')
+require('../../totals')
+require('./index.es6')
+
diff --git a/app/javascript/legacy/campaigns/supporters/index/supporter-list.es6 b/app/javascript/legacy/campaigns/supporters/index/supporter-list.es6
new file mode 100644
index 00000000..b5e64be4
--- /dev/null
+++ b/app/javascript/legacy/campaigns/supporters/index/supporter-list.es6
@@ -0,0 +1,29 @@
+// License: LGPL-3.0-or-later
+const h = require('virtual-dom/h')
+const thunk = require('vdom-thunk')
+const flyd = require('flyd')
+
+
+const metrics = require('./metrics.es6')
+const meta = require('./meta.es6')
+const supporterTable = require('./supporter-table.es6')
+
+var $ = {
+ showMore: supporterTable.$streams.showMore,
+ searches: meta.$streams.searches,
+ showEmailModal: flyd.stream(),
+}
+
+const root = state =>
+ h('div', [
+ h('section.table-meta', thunk(meta.root, state)),
+ h('section.metrics.container', thunk(metrics.root, state.get('gift_levels'))),
+ h('hr'),
+ h('section.container', thunk(supporterTable.root, state)),
+ h('hr'),
+ ])
+
+// Table meta for the supporter listing under Campaigns
+
+module.exports = {root: root, $streams: $}
+
diff --git a/app/javascript/legacy/campaigns/supporters/index/supporter-table.es6 b/app/javascript/legacy/campaigns/supporters/index/supporter-table.es6
new file mode 100644
index 00000000..b5c053b1
--- /dev/null
+++ b/app/javascript/legacy/campaigns/supporters/index/supporter-table.es6
@@ -0,0 +1,69 @@
+// License: LGPL-3.0-or-later
+const thunk = require('vdom-thunk')
+const h = require('virtual-dom/h')
+const flyd = require('flyd')
+const showMoreBtn = require('../../../components/show-more-button.es6')
+const format = require("../../../common/format")
+const date = format.date
+const sql = format.sql
+
+const root = state => {
+ console.log({state})
+ var supporters = state.get('supporters')
+ if(state.get('loading')) {
+ return h('p.noResults', ' Loading...')
+ } else if(supporters.get('data').count()) {
+ return h('div', [
+ h('table.table--plaid', [
+ h('thead', [
+ h('th', 'Name'),
+ h('th', 'Total'),
+ h('th', 'Gift options'),
+ h('th', 'Latest gift'),
+ h('th', 'Campaign creator')
+ ]),
+ thunk(trs, supporters.get('data')),
+ ]),
+ thunk(showMoreBtn.root, state.get('moreLoading'), supporters.get('remaining'))
+ ])
+ } else if (state.get('isSearching')) {
+ return h('p.noResults', ["Supporter not found."])
+ } else {
+ return h('p.noResults', ["No donors yet. ", h('a', {href: './'}, 'Return to the campaign page.')])
+ }
+}
+
+const trs = supporters =>
+ h('tbody', supporters.map(supp => thunk(supporterRow, supp)).toJS())
+
+const supporterRow = supporter =>
+ h('tr', [
+ h('td',
+ h('a'
+ , {
+ href: `/nonprofits/${app.nonprofit_id}/supporters?sid=${supporter.get('id')}`
+ , target: '_blank'
+ }
+ , [supporter.get('name')
+ , h('br')
+ , h('small', supporter.get('email'))
+ ]
+ )
+ )
+ , h('td', '$' + utils.cents_to_dollars(supporter.get('total_raised'))),
+ h('td', supporter.get('campaign_gift_names').toJS().join(', ')),
+ h('td', supporter.get('latest_gift')),
+ h('td', {}, supporter.get('campaign_creator_emails').toJS().map(
+ function(i, index, array) {
+ return h('a', {href: `mailto:${i}`},
+ i + ((i < (array.length - 1)) ? ", " : ""))
+ })),
+ ])
+
+module.exports = {
+ root: root,
+ $streams: {
+ showMore: showMoreBtn.$streams.nextPageClicks,
+ }
+}
+
diff --git a/app/javascript/legacy/campaigns/timeline.js b/app/javascript/legacy/campaigns/timeline.js
new file mode 100644
index 00000000..5ff8c455
--- /dev/null
+++ b/app/javascript/legacy/campaigns/timeline.js
@@ -0,0 +1,93 @@
+// License: LGPL-3.0-or-later
+const request = require('../common/client')
+const R = require('ramda')
+const Chart = require('chart.js')
+const moment = require('moment')
+const dateRange = require('../components/date-range')
+const chartOptions = require('../components/chart-options')
+
+var url = `/nonprofits/${app.nonprofit_id}/campaigns/${ENV.campaignID}/timeline`
+
+function query() {
+ appl.def('loading_chart', true)
+ request.get(url)
+ .end(function(err, resp) {
+ appl.def('loading_chart', false)
+ var ctx = document.getElementById('js-timeline').getContext('2d')
+ new Chart(ctx, {
+ type: 'line'
+ , data: formatData(cumulative(resp.body))
+ , options: chartOptions.dollars
+ })
+ })
+}
+
+function cumulative(data) {
+ var moments = dateRange(R.head(data).date, R.last(data).date, 'days')
+ var dateStrings = R.map((m) => m.format('YYYY-MM-DD'), moments)
+
+ var proto = {
+ offsite_cents: 0
+ , onetime_cents: 0
+ , recurring_cents: 0
+ , total_cents: 0
+ }
+
+ var dateDictionary = R.reduce((a,b) => {
+ a[b] = R.merge(proto, {date: b})
+ return a
+ }, {}, dateStrings)
+
+ R.reduce((a, b) => {
+ a[b.date] = b
+ return a
+ }, dateDictionary, data)
+
+ return R.tail(R.reduce((a, b) => {
+ var last = R.last(a)
+ b.offsite_cents += last.offsite_cents
+ b.onetime_cents += last.onetime_cents
+ b.recurring_cents += last.recurring_cents
+ b.total_cents += last.total_cents
+ return R.append(b, a)
+ }, [proto], R.values(dateDictionary)))
+}
+
+function formatData(data) {
+ return {
+ labels: R.map((st) => moment(st).format('M/D/YYYY'), R.pluck('date', data))
+ , datasets: [
+ dataset('Total'
+ , 'total_cents'
+ , '190, 190, 190'
+ , data)
+ , dataset('One time'
+ , 'onetime_cents'
+ , '66, 179, 223'
+ , data)
+ , dataset('Recurring'
+ , 'recurring_cents'
+ , '240, 205, 108'
+ , data)
+ , dataset('Offsite'
+ , 'offsite_cents'
+ , '95, 184, 141'
+ , data)
+ ]
+ }
+}
+
+function dataset(label, key, rgb, data) {
+ return {
+ label: label
+ , data: R.pluck(key, data)
+ , borderColor: `rgb(${rgb})`
+ , backgroundColor: `rgba(${rgb},0.2)`
+ , fill: false
+ , pointRadius: 0
+ , pointHitRadius: 2
+ }
+}
+
+query()
+
diff --git a/app/javascript/legacy/campaigns/totals.js b/app/javascript/legacy/campaigns/totals.js
new file mode 100644
index 00000000..0bcb1e02
--- /dev/null
+++ b/app/javascript/legacy/campaigns/totals.js
@@ -0,0 +1,15 @@
+// License: LGPL-3.0-or-later
+const request = require('../common/request')
+const flyd = require('flyd')
+const R = require('ramda')
+var path = `/nonprofits/${app.nonprofit_id}/campaigns/${ENV.campaignID}/totals`
+
+const resp$ = flyd.map(R.prop('body'), request({path, method: 'GET'}).load)
+
+appl.def('loading_totals', true)
+
+flyd.map(response => {
+ appl.def('loading_totals', false)
+ appl.def('campaign_totals', response)
+}, resp$)
+
diff --git a/app/javascript/legacy/cards/create-frp.es6 b/app/javascript/legacy/cards/create-frp.es6
new file mode 100644
index 00000000..94ff4e9e
--- /dev/null
+++ b/app/javascript/legacy/cards/create-frp.es6
@@ -0,0 +1,11 @@
+// License: LGPL-3.0-or-later
+const flyd = require('flyd')
+const flyd_flatMap = require('flyd/module/flatmap')
+
+// Given an object of card data, return a stream of stripe tokenization responses
+module.exports = obj => {
+ var $ = flyd.stream()
+ Stripe.card.createToken(obj, (status, resp) => $(resp))
+ return $
+}
+
diff --git a/app/javascript/legacy/cards/create.js b/app/javascript/legacy/cards/create.js
new file mode 100644
index 00000000..c8c22285
--- /dev/null
+++ b/app/javascript/legacy/cards/create.js
@@ -0,0 +1,129 @@
+// License: LGPL-3.0-or-later
+// Include the cards/fields partial to use with this.
+// Call appl.card_form.create(card_obj) to start the card creation process.
+// Use the appl.card_form.on_fail callback to handle failures.
+// Use the appl.card_form.on_complete callback to handle completion.
+// This does not create any donations -- do the donation creation inside appl.card_form.on_complete.
+
+// Not namespacing card_form; only show one card form on the page at any time
+
+var request = require('../common/super-agent-promise')
+var format_err = require('../common/format_response_error')
+
+module.exports = create_card
+
+// UI state defaults
+appl.def('card_form', {
+ loading: false,
+ error: false,
+ status: '',
+ on_complete: function() {},
+ on_fail: function() {},
+ progress_width: '0%' // Width of the progress bar
+})
+
+// Define some status messages and progress bar widths for each step of the process
+var statuses = {
+ before_tokenization: {
+ progress_width: '20%',
+ status: 'Double-checking your card...'
+ },
+ before_create: {
+ progress_width: '75%',
+ status: 'Looks good! Sending the carrier pigeons...'
+ },
+ on_complete: {
+ progress_width: '100%',
+ status: 'Processing payment...'
+ }
+}
+
+// Tokenize with stripe, then save to our db.
+// The first argument must be a holder object that has 'type' and 'id' keys.
+// eg: {holder: {type: 'Nonprofit', id: 1}}
+function create_card(holder, card_obj, options) {
+ options = options || {}
+ if(appl.card_form.loading) return
+ appl.def('card_form', { loading: true, error: false })
+ appl.def('card_form', statuses.before_tokenization)
+
+ // Delete the cvc key from card_obj if
+ // the value of cvc is a blank string.
+ // Otherwise, Stripe will return an error for
+ // incorrect security code.
+ if(card_obj.cvc === '') {
+ delete card_obj['cvc']
+ }
+
+ // First, tokenize the card with Stripe.js
+ return tokenize_with_stripe(card_obj)
+ .catch(display_stripe_err)
+ // Then, save a Card record in our db
+ .then(function(stripe_resp) {
+ appl.def('card_form', statuses.before_create)
+ return create_record(holder, stripe_resp, options)
+ })
+ .then(function(resp) {
+ appl.def('card_form', statuses.on_complete)
+ return resp.body
+ })
+ .catch(display_err)
+}
+
+// Post to stripe to get back a stripe_card_token
+function tokenize_with_stripe(card_obj) {
+ return new Promise(function(resolve, reject) {
+ Stripe.card.createToken(card_obj, function(status, resp) {
+ if(resp.error) reject(resp)
+ else resolve(resp)
+ })
+ })
+}
+
+// Save a record of the card in our own db
+function create_record(holder, stripe_resp, options={}) {
+ var output = {card: {
+ holder_type: holder.type,
+ holder_id: holder.id,
+ email: holder.email,
+ cardholders_name: stripe_resp.name,
+ name: stripe_resp.card.brand + ' *' + stripe_resp.card.last4,
+ stripe_card_token: stripe_resp.id,
+ stripe_card_id: stripe_resp.card.id
+ }}
+ if (options['event_id'])
+ {
+ output['event_id'] = options['event_id']
+ }
+
+ return request.post(options.path || '/cards')
+ .send(output)
+ .perform()
+}
+
+// Set UI state to display an error in the card form.
+function display_err(resp) {
+ if(resp && resp.body) {
+ appl.def('card_form', {
+ loading: false,
+ error: true,
+ status: format_err(resp),
+ progress_width: '0%'
+ })
+ appl.def('loading', false)
+ }
+}
+
+function display_stripe_err(resp) {
+ if(resp && resp.error) {
+ appl.def('card_form', {
+ loading: false,
+ error: true,
+ status: resp.error.message,
+ progress_width: '0%'
+ })
+ appl.def('loading', false)
+
+ throw new Error()
+ }
+}
diff --git a/app/javascript/legacy/common/ajax/check_campaign_or_event_name.js b/app/javascript/legacy/common/ajax/check_campaign_or_event_name.js
new file mode 100644
index 00000000..517e9ee7
--- /dev/null
+++ b/app/javascript/legacy/common/ajax/check_campaign_or_event_name.js
@@ -0,0 +1,16 @@
+// License: LGPL-3.0-or-later
+var R = require('ramda')
+var request = require('../client')
+
+module.exports = function(name, event_or_campaign, callback) {
+ request.get(`/nonprofits/${app.nonprofit_id}/${event_or_campaign}s/name_and_id`)
+ .end(function(err, resp){
+ var names = resp.body.map(x => x.name)
+ if(R.contains(name, names)) {
+ appl.notify(`Oops. It looks like you already have ${event_or_campaign === 'campaign' ? 'a' : 'an'} ${event_or_campaign} named '${name}'. Please choose a different name and try again.`)
+ return
+ }
+ callback()
+ })
+}
+
diff --git a/app/javascript/legacy/common/ajax/get_campaign_and_event_names_and_ids.js b/app/javascript/legacy/common/ajax/get_campaign_and_event_names_and_ids.js
new file mode 100644
index 00000000..842d53ba
--- /dev/null
+++ b/app/javascript/legacy/common/ajax/get_campaign_and_event_names_and_ids.js
@@ -0,0 +1,36 @@
+// License: LGPL-3.0-or-later
+var request = require('../client')
+
+module.exports = function(npo_id) {
+ var campaignsPath = '/nonprofits/' + npo_id + '/campaigns/name_and_id'
+ var eventsPath = '/nonprofits/' + npo_id + '/events/name_and_id'
+
+ request.get(campaignsPath).end(function(err, resp){
+ var dataResponse = []
+
+ if (!err) {
+ resp.body.unshift(false)
+ dataResponse = resp.body.map((i) => {
+ if (i.isChildCampaign)
+ {
+ return {id: i.id, name: i.name + " - " + i.creator}
+ }
+ else
+ {
+ return {id: i.id, name: i.name}
+ }
+ })
+ }
+ appl.def('campaigns.data', dataResponse)
+ })
+
+ request.get(eventsPath).end(function(err, resp){
+ var dataResponse = []
+ if(!err) {
+ resp.body.unshift(false)
+ dataResponse = resp.body
+ }
+
+ appl.def('events.data', dataResponse)
+ })
+}
diff --git a/app/javascript/legacy/common/application_view.js b/app/javascript/legacy/common/application_view.js
new file mode 100644
index 00000000..a60cbdd9
--- /dev/null
+++ b/app/javascript/legacy/common/application_view.js
@@ -0,0 +1,393 @@
+// License: LGPL-3.0-or-later
+var confirmation = require('./confirmation')
+var notification = require('./notification')
+var request = require("superagent")
+var moment = require('moment-timezone')
+var client = require('./client')
+var appl = require('view-script')
+const on_ios11 = require('./on-ios11')
+const noScroll = require('no-scroll')
+
+module.exports = appl
+
+// A couple short convenience functions for disabling/enabling the global
+// loading state
+appl.is_loading = function() {appl.def('loading', true)}
+appl.not_loading = function() {appl.def('loading', false)}
+appl.not_loading()
+// Open a modal given by its modal id (uses the modal div's 'id' attribute)
+appl.def('open_modal', function(modalId) {
+ $('.modal').removeClass('inView')
+
+ //$('body').scrollTop(0)
+ $('#' + modalId).addClass('inView')
+
+ $('body').addClass('is-showingModal')
+ if (on_ios11()){
+ noScroll.on()
+ }
+ return appl
+})
+
+// Close any and all open modals
+appl.def('close_modal', function() {
+ $('.modal').removeClass('inView')
+ $('body').removeClass('is-showingModal')
+ if (on_ios11()) {
+ noScroll.off()
+ }
+ return appl
+})
+
+// Open a given modal id only when the User's Account is confirmed via email
+// If the user's account is not confirmed, then show an informational modal
+// about confirming their account
+appl.def('open_modal_if_confirmed', function(modalId){
+ if (app.user && app.user.confirmed)
+ appl.open_modal(modalId)
+ else if (app.user && !app.user.confirmed)
+ appl.open_modal('emailConfirmationModal')
+ else
+ appl.open_modal('signUpModal')
+ return appl
+})
+
+
+// Open a confirmation modal for the user to click 'yes' or 'no'
+// Optionally pass in a string message as the first arg (default is 'Are you sure?')
+// The last argument is the function to execute when 'yes' is clicked
+// Clicking 'no' simply closes the modal
+appl.def_lazy('confirm', function() {
+ var msg, expr, node, self = this
+ if(arguments.length === 2) {
+ msg = 'Are you sure?'
+ expr = arguments[0]
+ node = arguments[1]
+ } else {
+ msg = appl.vs(arguments[0])
+ expr = arguments[1]
+ node = arguments[2]
+ }
+
+ var result = confirmation(msg)
+ result.confirmed = function() { appl.vs(expr, node) }
+ return self
+})
+
+
+// Display a temporary notification message at the bottom of the window
+appl.def('notify', function(msg) {
+ notification(msg)
+ return appl
+})
+
+// Convert cents to dollars
+appl.def('cents_to_dollars', function(cents) {
+ return utils.cents_to_dollars(cents)
+})
+
+
+const momentTz = date =>
+ moment.tz(date, "YYYY-MM-DD HH:mm:ss", 'UTC').tz(ENV.nonprofitTimezone || 'UTC')
+
+// Return a date in the format MM/DD/YY for a given date string or moment obj
+appl.def('readable_date', function(date) {
+ if(!date) return
+ return momentTz(date).format("MM/DD/YY")
+})
+
+// Given a created_at string (eg. Charge.last.created_at.to_s), convert it to a readable date-time string
+appl.def('readable_date_time', function(date) {
+ if(!date) return
+ return momentTz(date).format("MM/DD/YY H:mma z")
+})
+
+// converts the return value of readable_date_time to it's ISO equivalent
+appl.def('readable_date_time_to_iso', date => {
+ if(!date) return
+ return moment.tz(date, 'MM/DD/YY H:mma z', ENV.nonprofitTimezone || 'UTC')
+ .tz('UTC')
+ .toISOString()
+})
+
+// Get the month number (eg 01,02...) for the given date string (or moment obj)
+appl.def('get_month', function(date) {
+ var monthNum = moment(date).month()
+ return moment().month(monthNum).format('MMM')
+})
+
+// Get the year (eg 2017) for the given date string (or moment obj)
+appl.def('get_year', function(date) {
+ return moment(date).year()
+})
+
+// Get the day (number in the month) for the given date string (or moment obj)
+appl.def('get_day', function(date) {
+ return moment(date).date()
+})
+
+
+// Get the percentage of x over y
+// eg: appl.percentage(34, 69) -> "49.28%"
+appl.def('percentage', function(x, y) {
+ return String(x / y * 100) + '%'
+})
+
+
+// Given a quantity and a plural word describing that quantity,
+// return the proper version of that word for that quantitiy
+// eg: appl.pluralize(4, 'tomatoes') -> "4 tomatoes"
+// appl.pluralize(1, 'donors') -> "1 donor"
+appl.def('pluralize', function(quantity, plural_word) {
+ var str = String(quantity) + ' '
+ if(quantity !== 1) return str+plural_word
+ else return str + appl.to_singular(plural_word)
+})
+
+
+// Convert (most) words from their plural to their singular form
+// Works with simple s-endings, ies-endings, and oes-endings
+appl.def('to_singular', function(plural_word) {
+ return plural_word
+ .replace(/ies$/, 'y')
+ .replace(/oes$/, 'o')
+ .replace(/s$/, '')
+})
+
+
+// Truncate a text and add ellipsis to the end
+appl.def('append_ellipsis', function(text, length) {
+ if(text.length <= length) return text
+ return text.slice(0,length).replace(/ [^ ]+$/, ' ...')
+})
+
+
+// General viewscript utilities
+// All of these are to be added to the actual viewscript package in the future
+
+// Push a given value into the arr given by the property name 'arr_key'
+// Mutates the array stored at 'arr_key'
+// appl.def('arr', [1,2,3])
+// appl.push('arr', 4)
+// appl.arr == [1,2,3,4]
+appl.def('push', function(val, arr_key, node) {
+ var arr = appl.vs(arr_key, node)
+ if(!arr || !arr.length) arr = []
+ arr.push(val)
+ appl.def(arr_key, arr)
+ return appl
+})
+
+
+// Concatenate two arrays (this is mutating)
+// The first array is given by its property name and will be mutated
+// The second array is the array itself to concatenate
+// appl.def('arr1', [1,2,3])
+// appl.concat('arr1', [4,5,6])
+// appl.arr1 == [1,2,3,4,5,6]
+appl.def('concat', function(arr1_key, arr2, node) {
+ var arr1 = appl.vs(arr1_key, node)
+ appl.def(arr1_key, arr1.concat(arr2))
+ return appl
+})
+
+
+// Merge all key/vals from set_obj into all objects in the array given by the property 'arr_key'
+// eg:
+// appl.def('arr_of_objs', [{id: 1, name: 'Bob'}, {id: 2, name: 'Holga'}]
+// appl.update_all('arr_of_objs', {name: 'Morty'})
+// appl.arr_of_objs == [{id: 1, name: 'Morty'}, {id: 2, name: 'Morty'}]
+appl.def('update_all', function(arr_key, set_obj, node) {
+ appl.def(arr_key, appl.vs(arr_key).map(function(obj) {
+ for(var key in set_obj) obj[key] = set_obj[key]
+ return obj
+ }))
+})
+
+
+// Given an array of objects in the view state (with property name 'arr_key'),
+// and given an object to match on ('obj_matcher'),
+// and given an object with values to set ('set_obj'),
+// then set each object that matches key/vals in the obj_matcher to the key/vals in set_obj
+//
+// eg, if val at arr_key is: [{id: 1, name: 'Bob'}, {id: 2, name: 'Holga'}]
+// and obj_matcher is: {id: 1}
+// and set_obj is: {name: 'Gertrude'}
+// then result will be: [{id: 1, name: 'Gertrude'}, {id: 2, name: 'Holga'}]
+appl.def('find_and_set', function(arr_key, obj_matcher, set_obj, node) {
+ var arr = appl.vs(arr_key)
+ if(!arr) return appl
+ var result = arr.map(function(obj) {
+ for (var key in obj_matcher) {
+ if(obj_matcher[key] === obj[key]) {
+ return utils.merge(obj, set_obj)
+ }
+ }
+ return obj
+ })
+ appl.def(arr_key, result)
+ return appl
+})
+
+appl.def('find_and_remove', function(arr_key, obj_matcher, set_obj, node) {
+ var arr = appl.vs(arr_key)
+ if(!arr) return appl
+ var result = arr.reduce(function(new_arr, obj) {
+ for (var key in obj_matcher) {
+ if(obj_matcher[key] === obj[key]) {
+ return new_arr
+ } else {
+ new_arr.push(obj)
+ return new_arr
+ }
+ }
+ }, [])
+ appl.def(arr_key, result)
+ return appl
+})
+
+
+// Return a boolean whether the parent input is checked (must be a type checkbox)
+appl.def('is_checked', function(node) {
+ return appl.prev_elem(node).checked
+})
+
+// Check a parent input node (must be type checkbox)
+appl.def('check', function(node) {
+ appl.prev_elem(node).checked = true
+})
+
+// Uncheck a parent input node (must be type checkbox)
+appl.def('uncheck', function(node) {
+ appl.prev_elem(node).checked = false
+})
+
+// Check the parent node if the predicate is true
+appl.def('checked_if', function(pred, node) {
+ if(pred) appl.prev_elem(node).checked = true
+ else appl.prev_elem(node).checked = false
+})
+
+// Remove an attribute from the parent node
+appl.def('remove_attr', function(attr, node) {
+ appl.prev_elem(node).removeAttribute(attr)
+})
+
+appl.def('remove_attr_if', function(pred, attr, node) {
+ if(!node) return
+ var n = appl.prev_elem(node)
+ if(pred) {
+ if(!n.hasAttribute('data-attr-' + attr)) n.setAttribute('data-attr-' + attr, n.getAttribute(attr)) // cache attr to add back in
+ n.removeAttribute(attr)
+ } else if(!n.hasAttribute(attr)) {
+ var val = n.getAttribute('data-attr-' + attr)
+ n.setAttribute(attr, val)
+ }
+})
+
+// Map over the given list and update it in the view
+appl.transform = function(name, fn) {
+ var result = appl.vs(name).map(fn)
+ appl.def(name, result)
+ return result
+}
+
+// Return the current URL path
+appl.def('pathname', function() { return window.location.pathname })
+// Return the root url
+appl.def('root_url', function() { return window.location.origin })
+
+// Trigger a property to get updated in the view
+appl.def('trigger_update', function(prop) {
+ return appl.def(prop, appl.vs(prop))
+})
+
+
+appl.def('snake_case', function(string) {
+ return string.replace(/ /g,'_')
+})
+
+appl.def('sort_arr_of_objs_by_key', function(arr_of_objs, key) {
+ return arr_of_objs.sort(function(a, b) {
+ return a[key].localeCompare(b[key]);
+ })
+})
+
+// Convert a positive integer into an ordinal (1st, 2nd, 3rd...)
+appl.def('ordinalize', function(n) {
+ if(n <= 0) return n
+ // Deal with the preteen punks first
+ if([11,12,13].indexOf(n) !== -1) return String(n) + 'th'
+ var str = String(n)
+ var lst = str[str.length-1]
+ if(lst === '1') return String(n) + 'st'
+ else if(lst === '2') return String(n) + 'nd'
+ else if(lst === '3') return String(n) + 'rd'
+ else return String(n) + 'th'
+})
+
+appl.def('toggle_side_nav', function(){
+ if(appl.side_nav_is_open)
+ appl.def('side_nav_is_open', false)
+ else
+ appl.def('side_nav_is_open', true)
+})
+
+appl.def('head', function(arr) {
+ if(arr === undefined) return undefined
+ return arr[0]
+})
+
+appl.def('select_drop_down', function(node) {
+ var $li = $(node).parent()
+ var $dropDown = $li.parents('.dropDown')
+ $dropDown.find('li').removeClass('is-selected')
+ $dropDown.find('.dropDown-toggle').removeClass('is-droppedDown')
+ $li.addClass('is-selected')
+})
+
+appl.def('clear_drop_down', function(node){
+ var $dropDown = $(node).parents('.dropDown')
+ $dropDown.find('li').removeClass('is-selected')
+ $dropDown.find('.dropDown-toggle').removeClass('is-droppedDown')
+})
+
+appl.def('strip_tags', function(html){
+ if(!html) return
+ return html.replace(/(<([^>]+)>)/ig," ")
+})
+
+appl.def('replace', function(string, matcher, replacer) {
+ if(!string) return
+ // the new RegExp constructor takes a string
+ // and returns a regex: new RegExp("a|b", "i") becomes /a|b/i
+ return string.replace(new RegExp(matcher, 'g'), replacer)
+})
+
+appl.def('number_with_commas', function(n){
+ if(!n){return}
+ return utils.number_with_commas(n)
+})
+
+appl.def('remove_commas', function(s) {
+ return s.replace(/,/g, '')
+})
+
+appl.def('percentage', function(x, y, number_of_decimals){
+ if(!x || !y) return 0
+ number_of_decimals = number_of_decimals || 2
+ return Number((y/x * 100).toFixed(number_of_decimals))
+})
+
+appl.def('clean_url', function(string){
+ return string.replace(/.*?:\/\//g, "")
+})
+
+appl.def('address_with_commas', function(address, city, state){
+ return utils.address_with_commas(address, city, state)
+})
+
+appl.def('format_phone', function(st) {
+ return utils.pretty_phone(st)
+})
+
diff --git a/app/javascript/legacy/common/apply-pikaday.js b/app/javascript/legacy/common/apply-pikaday.js
new file mode 100644
index 00000000..c16cc20e
--- /dev/null
+++ b/app/javascript/legacy/common/apply-pikaday.js
@@ -0,0 +1,14 @@
+// License: LGPL-3.0-or-later
+const bind = require('attr-binder')
+const Pikaday = require('pikaday')
+const moment = require('moment')
+
+bind('apply-pikaday', function(field, format) {
+ const setDefaultDate = field.getAttribute('pikaday-setDefaultDate')
+ const maxDate_str = field.getAttribute('pikaday-maxDate')
+ const maxDate = maxDate_str ? moment(maxDate_str) : undefined
+ const defaultDate_str = field.getAttribute('pikaday-defaultDate')
+ const defaultDate = defaultDate_str ? moment(defaultDate_str) : undefined
+ new Pikaday({format, setDefaultDate, field, maxDate, defaultDate})
+})
+
diff --git a/app/javascript/legacy/common/autosubmit.js b/app/javascript/legacy/common/autosubmit.js
new file mode 100644
index 00000000..d0425446
--- /dev/null
+++ b/app/javascript/legacy/common/autosubmit.js
@@ -0,0 +1,72 @@
+// License: LGPL-3.0-or-later
+var confirmation = require('./confirmation')
+var notification = require('./notification')
+
+$('form[autosubmit]').submit(function(e) {
+ var self = this
+ e.preventDefault()
+
+ if(this.hasAttribute('data-confirm')) {
+ var result = confirmation()
+ result.confirmed = function() {
+ submit_form(e.currentTarget)
+ }
+ } else submit_form(e.currentTarget)
+})
+
+function submit_form(form_el, on_success) {
+ var path = form_el.getAttribute('action')
+ var method = form_el.getAttribute('method')
+ var form_data = new FormData(form_el)
+ $(form_el).find('button[type="submit"]').loading()
+ $(form_el).find('.error').text('')
+
+ var notice = form_el.getAttribute('notice')
+ if(notice) $.cookie('notice', notice, {path: '/'})
+
+ $.ajax({
+ type: method,
+ url: path,
+ data: form_data,
+ dataType: 'json',
+ processData: false,
+ contentType: false
+ })
+ .done(function(d) {
+ if(form_el.hasAttribute('data-reload-with-slug'))
+ window.location = d['url']
+ else if(form_el.hasAttribute('data-reload'))
+ window.location.reload()
+ else if(form_el.hasAttribute('data-redirect')) {
+ var redirect = form_el.getAttribute('data-redirect')
+ if(redirect) window.location.href = redirect
+ else if(d.url) window.location.href = d.url
+ } else {
+ var msg = form_el.getAttribute('data-success-message')
+ if(msg) notification(msg)
+ $(form_el).find('button[type="submit"]').disableLoading()
+ }
+ if(on_success) on_success(d)
+ })
+ .fail(function(d) {
+ $(form_el).find('.error').text(utils.print_error(d))
+ $(form_el).find('button[type="submit"]').disableLoading()
+ })
+}
+
+// Third closure
+
+appl.def_lazy('autosubmit', function(callback, node) {
+ if(!node || !node.parentNode) return
+
+ var self = this, parent = node.parentNode
+
+ parent.onsubmit = function(ev) {
+ ev.preventDefault()
+
+ if(parent.hasAttribute('data-confirm'))
+ confirmation().confirmed = function() { submit_form(parent, function() {appl.vs(callback)}) }
+ else submit_form(parent, function() { appl.vs(callback) })
+ }
+})
+
diff --git a/app/javascript/legacy/common/brand-fonts.js b/app/javascript/legacy/common/brand-fonts.js
new file mode 100644
index 00000000..47c8fd93
--- /dev/null
+++ b/app/javascript/legacy/common/brand-fonts.js
@@ -0,0 +1,8 @@
+// License: LGPL-3.0-or-later
+module.exports = {
+ helvetica: {family: "'Helvetica Neue', Helvetica, Arial, sans-serif", name: 'Helvetica'},
+ futura: {family: "'Futura', Arial, sans-serif", name: 'Futura'},
+ open: {family: "Open Sans, 'Helvetica Neue', Arial, sans-serif", name: 'Open Sans'},
+ georgia: {family: "Georgia, serif", name: 'Georgia'},
+ bitter: {family: "'Bitter', serif", name: 'Bitter'}
+}
diff --git a/app/javascript/legacy/common/class-object.js b/app/javascript/legacy/common/class-object.js
new file mode 100644
index 00000000..7bdd32cd
--- /dev/null
+++ b/app/javascript/legacy/common/class-object.js
@@ -0,0 +1,8 @@
+// License: LGPL-3.0-or-later
+const R = require('ramda')
+
+module.exports = (classes='') => R.reduce(
+ (a, b) => {a[b] = true; return a}
+ , {}
+ , R.drop(1, classes.split('.')))
+
diff --git a/app/javascript/legacy/common/client.js b/app/javascript/legacy/common/client.js
new file mode 100644
index 00000000..e824e804
--- /dev/null
+++ b/app/javascript/legacy/common/client.js
@@ -0,0 +1,25 @@
+// License: LGPL-3.0-or-later
+// superapi wrapper with our api defaults
+
+var request = require('superagent')
+
+var wrapper = {}
+
+wrapper.post = function() {
+ return request.post.apply(this, arguments).set('X-CSRF-Token', window._csrf).type('json')
+}
+
+wrapper.put = function() {
+ return request.put.apply(this, arguments).set('X-CSRF-Token', window._csrf).type('json')
+}
+
+wrapper.del = function() {
+ return request.del.apply(this, arguments).set('X-CSRF-Token', window._csrf).type('json')
+}
+
+wrapper.get = function(path) {
+ return request.get.call(this, path).accept('json')
+}
+
+module.exports = wrapper
+
diff --git a/app/javascript/legacy/common/colors.js b/app/javascript/legacy/common/colors.js
new file mode 100644
index 00000000..d646e6c1
--- /dev/null
+++ b/app/javascript/legacy/common/colors.js
@@ -0,0 +1,59 @@
+// License: LGPL-3.0-or-later
+module.exports = {
+ // BLUES
+ '$dark-turquoise': "#306563"
+, '$turquoise': "#a6d5d3"
+, '$sea-foam': "#669092"
+, '$light-sea-foam': "#5FA6AA"
+, '$sky': "#97c2c4"
+, '$faded-sky': "#B6D3D4"
+, '$light-logo-blue': "#69B4CF"
+, '$logo-blue': "#42B3DF"
+, '$dark-logo-blue': "#479EBE"
+, '$baby-blue': "#E2F8F8"
+, '$blue-grey': "rgba(136, 148, 152, 1)"
+, '$cloudy': "rgba(67, 164, 202, 0.3)"
+
+ // GREENS
+, '$light-grass': "#589E73"
+, '$bluegrass': "#5FB88D"
+, '$bluegrass--light': "lighten($bluegrass, 10)"
+, '$grass': "#2d8f60"
+, '$dark-grass': "#35865E"
+, '$sage': "#E9F5E8"
+, '$sage--dark': "#D5E4D4"
+, '$thankYou-green': "#7EC981"
+, '$mint': "#DEEFE7"
+
+ // YELLOWS - ORANGES
+, '$manila': "#FFFCE3"
+, '$pollen': "#F0CD6C"
+, '$light-pollen': "#FFE397"
+, '$oj': "#FDC785"
+, '$looseleaf': "lighten(#FFFEF6, 0.5)"
+
+ // PINKS, REDS, PURPLES
+, '$watermelon': "#EE8480"
+, '$lavender': "#A57B9E"
+, '$blush': "rgba(253, 168, 133, 0.1)"
+, '$red': "#FF4F4F"
+
+ // NEUTRALS
+, '$charcoal': "#494949"
+, '$charcoal--light': "lighten(#494949, 10)"
+, '$grey': "rgb(128, 128, 128)"
+, '$lightGrey': "lighten($grey, 20)"
+, '$sepia': "rgba(65, 65, 65, 0.7)"
+, '$shark': "rgb(162, 162, 162)"
+, '$fog': "#fbfbfb"
+, '$shade': "rgba(0,0,0,0.02)"
+
+, '$trans': "rgba(255,255,255,0)"
+
+, '$defaultShadow': "0 0 4px 1px rgba($grey, 0.5)"
+
+ // SOCIAL
+, '$facebook': "#236094"
+, '$twitter': "#3199cb"
+, '$google': "#dd4b39"
+}
diff --git a/app/javascript/legacy/common/confirmation.js b/app/javascript/legacy/common/confirmation.js
new file mode 100644
index 00000000..73a218bd
--- /dev/null
+++ b/app/javascript/legacy/common/confirmation.js
@@ -0,0 +1,46 @@
+// License: LGPL-3.0-or-later
+var confirmation = function(msg, success_cb) {
+ var $confirm_modal = $('#confirmation-modal')
+ var $msg = $confirm_modal.find('.msg')
+ if(msg && msg.length > 15) $msg.css('font-size', '16px')
+ var cb = {
+ confirmed: function() {},
+ denied: function() {}
+ }
+ var $previousModal = $('.modal.inView')
+ $('.modal').removeClass('inView')
+ var $body = $('body')
+ $body.addClass('is-showingModal')
+
+ function hide_confirmation_and_show_previous(){
+ $('#confirmation-modal').removeClass('inView')
+ if ($previousModal.length){
+ $previousModal.addClass('inView')
+ $body.addClass('is-showingModal')
+ }
+ else
+ $body.removeClass('is-showingModal')
+ }
+
+ $confirm_modal.addClass('inView')
+ .off('click', '.yes')
+ .off('click', '.no')
+
+ .on('click', '.yes', function(e) {
+ hide_confirmation_and_show_previous()
+ if(success_cb) {
+ success_cb()
+ } else {
+ cb.confirmed(e)
+ }
+ })
+ .on('click', '.no', function(e) {
+ $('#confirmation-modal').removeClass('inView')
+ hide_confirmation_and_show_previous()
+ cb.denied(e)
+ })
+ $msg.text(msg || 'Are you sure?')
+ return cb
+}
+
+module.exports = confirmation
diff --git a/app/javascript/legacy/common/credit-card-validator.js b/app/javascript/legacy/common/credit-card-validator.js
new file mode 100644
index 00000000..832e6864
--- /dev/null
+++ b/app/javascript/legacy/common/credit-card-validator.js
@@ -0,0 +1,25 @@
+// License: LGPL-3.0-or-later
+const R = require('ramda')
+
+// Reference: https://en.wikipedia.org/wiki/Luhn_algorithm
+
+module.exports = val => {
+ val = val.replace(/[-\s]/g, '')
+ return val.match(/^[0-9-\s]+$/) && luhnCheck(val)
+}
+
+const luhnCheck =
+ R.compose(
+ R.equals(0)
+ , R.modulo(R.__, 10)
+ , R.sum
+ , R.map(n => n > 9 ? n - 9 : n) // Subtract 9 from those digits greater than 9
+ , R.addIndex(R.map)((n, i) => i % 2 === 0 ? n : n * 2) // Double the value of every second digit
+ , R.map(ch => Number(ch))
+ , R.reverse)
+
+/*
+Luhn check in haskell:
+luhn = (0 ==) . (`mod` 10) . sum . map (uncurry (+) . (`divMod` 10)) .
+ zipWith (*) (cycle [1,2]) . map digitToInt . reverse
+*/
diff --git a/app/javascript/legacy/common/css-gradient.js b/app/javascript/legacy/common/css-gradient.js
new file mode 100644
index 00000000..29ffcee8
--- /dev/null
+++ b/app/javascript/legacy/common/css-gradient.js
@@ -0,0 +1,8 @@
+// License: LGPL-3.0-or-later
+module.exports = (dir, to, from) =>
+` background-image: -webkit-linear-gradient(${dir}, ${to}, ${from});
+background-image: -moz-linear-gradient(${dir}, ${to}, ${from});
+background-image: -ms-linear-gradient(${dir}, ${to}, ${from});
+background-image: linear-gradient(${dir}, ${to}, ${from});
+filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=${to}, endColorstr=${from});`
+
diff --git a/app/javascript/legacy/common/direct-to-s3-upload.es6 b/app/javascript/legacy/common/direct-to-s3-upload.es6
new file mode 100644
index 00000000..6e5adf54
--- /dev/null
+++ b/app/javascript/legacy/common/direct-to-s3-upload.es6
@@ -0,0 +1,41 @@
+// License: LGPL-3.0-or-later
+const flyd = require('flyd')
+const R = require('ramda')
+
+
+// local
+const request = require('./super-agent-frp')
+const postFormData = require('./post-form-data')
+
+
+// Pass in a stream of Input Nodes with type file
+// Make a post request to our server to start the import
+// Will create a backgrounded job and email the user when
+// completed
+// Returns a stream of {uri: 'uri of uploaded file on s3', formData: 'original form data'}
+const uploadFile = R.curry(input => {
+ // We need to get an AWS presigned post thing to so we can upload files
+ // Stream of pairs of [formObjData, presignedPostObj]
+ var withPresignedPost$ = flyd.map(
+ resp => [input, resp.body]
+ , request.post('/aws_presigned_posts').perform()
+ )
+
+ // Stream of upload responses from s3
+ return flyd.flatMap(
+ pair => {
+ var [input, presignedPost] = pair
+ var url = `https://${presignedPost.s3_direct_url.host}`
+ var file = input.files[0]
+ var fileUrl = `${url}/tmp/${presignedPost.s3_uuid}/${file.name}`
+ var urlWithPort = `${url}:${presignedPost.s3_direct_url.port}`
+ var payload = R.merge(JSON.parse(presignedPost.s3_presigned_post), {file})
+
+ return flyd.map(resp => ({uri: fileUrl, file}), postFormData(url, payload))
+ }
+ , withPresignedPost$)
+})
+
+
+module.exports = uploadFile
+
diff --git a/app/javascript/legacy/common/dynamic_form.js b/app/javascript/legacy/common/dynamic_form.js
new file mode 100644
index 00000000..ffe66c8e
--- /dev/null
+++ b/app/javascript/legacy/common/dynamic_form.js
@@ -0,0 +1,30 @@
+// License: LGPL-3.0-or-later
+var notification = require('./notification')
+
+$('form.dynamic').submit(function(e) {
+ var self = this
+ e.preventDefault()
+ var path = this.getAttribute('action')
+ var meth = this.getAttribute('method')
+ var form_data = new FormData(this)
+ $(this).find('button[type="submit"]').loading()
+
+ $.ajax({
+ type: meth,
+ url: path,
+ data: form_data,
+ dataType: 'json',
+ processData: false,
+ contentType: false
+ })
+ .done(function(d) {
+ $('.modal').modal('hide')
+ notification(d.notification)
+ })
+ .fail(function(d) {
+ $(self).find('.error').text(utils.print_error(d))
+ })
+ .complete(function() {
+ $(self).find('button[type="submit"]').disableLoading()
+ })
+})
diff --git a/app/javascript/legacy/common/editable.js b/app/javascript/legacy/common/editable.js
new file mode 100644
index 00000000..2a0fb863
--- /dev/null
+++ b/app/javascript/legacy/common/editable.js
@@ -0,0 +1,10 @@
+// License: LGPL-3.0-or-later
+// if you are instantiating more than one WYSIWYG on a page,
+// be sure to give them id's to differentiate them
+// to avoid unwanted display side effects
+
+
+if (app.editor === 'froala')
+ module.exports = require('./editor/froala.es6')
+else if (app.editor === 'quill')
+ module.exports = require('./editor/quill.es6')
diff --git a/app/javascript/legacy/common/editor/froala.es6 b/app/javascript/legacy/common/editor/froala.es6
new file mode 100644
index 00000000..329a8b9d
--- /dev/null
+++ b/app/javascript/legacy/common/editor/froala.es6
@@ -0,0 +1,150 @@
+// License: LGPL-3.0-or-later
+var view = require("vvvview")
+var savingIndicator = require('../../components/saving_indicator')
+var savingState = {hide: true}
+var renderSavingIndicator = view(savingIndicator, document.body, savingState)
+
+var donate_button_markup = "Donate"
+else
+ donate_button_markup += ">Donate"
+
+var email_buttons = ["bold", "italic", "formatBlock", "align", "createLink",
+ "insertImage", "insertUnorderedList", "insertOrderedList",
+ "undo", "redo", "insert_donate_button", "insert_name", "html"]
+
+var froala = function($el, options) {
+ $el.editable({
+ key: app.froala_key,
+ placeholder: options.placeholder || 'Edit text here',
+ buttons: options.email_buttons ? email_buttons : options.buttons ? options.buttons : ["bold", "italic", "formatBlock", "align", "createLink", "insertImage", "insertVideo", "insertUnorderedList", "insertOrderedList", "undo", "redo", "html"],
+ inlineMode: false,
+ beautifyCode: true,
+ plainPaste: true,
+ blockTags: {p: 'Normal', h5: "Heading", small: 'Caption'},
+ allowedAttrs: ["accept","accept-charset","accesskey","action","align","alt","async","autocomplete","autofocus","autoplay","autosave","background","bgcolor","border","charset","cellpadding","cellspacing","checked","cite","class","color","cols","colspan","content","contenteditable","contextmenu","controls","coords","data","data-.*","datetime","default","defer","dir","dirname","disabled","download","draggable","dropzone","enctype","for","form","formaction","headers","height","hidden","high","href","hreflang","http-equiv","icon","id","ismap","itemprop","keytype","kind","label","lang","language","list","loop","low","max","maxlength","media","method","min","multiple", "muted", "name","novalidate","open","optimum","pattern","ping","placeholder","poster","preload","pubdate","radiogroup","readonly","rel","required","reversed","rows","rowspan","sandbox","scope","scoped","scrolling","seamless","selected","shape","size","sizes","span","src","srcdoc","srclang","srcset","start","step","summary","spellcheck","style","tabindex","target","title","type","translate","usemap","value","valign","width","wrap"],
+ imageUploadURL: '/image_attachments.json',
+ imageUploadParams: {
+ authenticity_token: $("meta[name='csrf-token']").attr('content')
+ },
+ imageDeleteURL: '/image_attachments/remove.json',
+ imageErrorCallback: function (d) {
+ },
+ afterRemoveImageCallback: function ($img) {
+ this.options.imageDeleteParams = {src: $img.attr('src')};
+ this.deleteImage($img);
+ },
+ customButtons: {
+ format_code: {
+ title: 'format code',
+ icon: {
+ type: 'font',
+ value: 'fa fa-bolt'
+ },
+ callback: function () {
+ // used to show code snippets.
+ // takes selected text, including typed html tags
+ // and wraps each text line in a
+ // and appends all of the
s into a
tag
+ // and then replaces that selected text with the
+ // newly created
tag
+
+ var lines_of_code = this.text().split("\n")
+ var pre = document.createElement('pre')
+ pre.className = 'codeText'
+
+ // created
s for each new line and appends them to
+ lines_of_code.map(function (line) {
+ var div = document.createElement('div')
+ div.appendChild(document.createTextNode(line))
+ pre.appendChild(div)
+ })
+
+ var selected_elements = this.getSelectionElements()
+ var first_selected_element = selected_elements[0]
+ var parent_node = document.getElementsByClassName('froala-element')[0]
+
+ // inserts pre before selection
+ parent_node.insertBefore(pre, first_selected_element)
+
+ // inserts s before and after
+ parent_node.insertBefore(document.createElement('br'), pre)
+ parent_node.insertBefore(document.createElement('br'), pre.nextSibling)
+
+ // deletes selection
+ selected_elements.map(function (el) {
+ parent_node.removeChild(el)
+ })
+
+ this.saveUndoStep()
+ }
+ },
+ insert_donate_button: {
+ title: 'Donate Button',
+ icon: {
+ type: 'font',
+ value: 'fa fa-heart'
+ },
+ callback: function () {
+ this.insertHTML(donate_button_markup)
+ this.saveUndoStep()
+ },
+ refresh: function () {
+ }
+ },
+ insert_name: {
+ title: 'Insert recipient name',
+ icon: {
+ type: 'txt',
+ value: 'Name'
+ },
+ callback: function () {
+ this.insertHTML("{{NAME}}")
+ this.saveUndoStep()
+ },
+ refresh: function () {
+ }
+ },
+ },
+ videoAllowedAttrs: ["src","width","height","frameborder","allowfullscreen","webkitallowfullscreen","mozallowfullscreen","href","target","id","controls","value","name", "autoplay", "loop", "muted"]
+ })
+
+ $('.froala-popup').parents('.froala-editor').css('z-index', 99999)
+
+ if (!options.noUpdateOnChange) {
+ $el.on('editable.contentChanged', function (e, editor) {
+ utils.delay(100, function () {
+ var key = $el.data('key')
+ var data = {}
+ var path = $el.data('path')
+ data[key] = $el.find('.froala-element').html()
+ renderSavingIndicator({hide: false, text: 'Saving...'})
+ $.ajax({type: 'put', url: path, data: data})
+ .done(function () {
+ renderSavingIndicator({text: 'Saved'})
+ window.setTimeout(function () {
+ renderSavingIndicator({hide: true})
+ }, 500)
+ })
+ })
+ })
+ }
+
+ if (options.sticky) {
+ window.onload = function () {
+ var makeEditorStick = require('../scroll_toggle_class')
+ var id = $el.attr('id') ? '#' + $el.attr('id') : false
+ var parent = id ? id : '.froala-box'
+ var child = id ? id + ' .froala-editor' : '.froala-editor'
+ makeEditorStick(child, 'is-stuck', parent)
+ $(child).css('width', $(parent).width())
+ $(window).resize(function () {
+ $(child).css('width', $(parent).width())
+ })
+ }
+ }
+}
+
+module.exports = froala;
\ No newline at end of file
diff --git a/app/javascript/legacy/common/editor/quill.es6 b/app/javascript/legacy/common/editor/quill.es6
new file mode 100644
index 00000000..9c2a6517
--- /dev/null
+++ b/app/javascript/legacy/common/editor/quill.es6
@@ -0,0 +1,45 @@
+// License: LGPL-3.0-or-later
+var view = require("vvvview")
+var savingIndicator = require('../../components/saving_indicator')
+var savingState = {hide: true}
+var renderSavingIndicator = view(savingIndicator, document.body, savingState)
+
+
+const Quill = require('quill')
+
+function initializeQuill($el, options)
+{
+ var editor = new Quill($el, {
+ theme: 'bubble',
+ placeholder: options.placeholder
+ });
+
+ if (!options.noUpdateOnChange) {
+ editor.on('text-change', function () {
+ utils.delay(100, function () {
+ var key = $el.getAttribute('data-key')
+ var data = {}
+ var path = $el.getAttribute('data-path')
+ data[key] = editor.root.innerHTML
+ renderSavingIndicator({hide: false, text: 'Saving...'})
+ $.ajax({type: 'put', url: path, data: data})
+ .done(function () {
+ renderSavingIndicator({text: 'Saved'})
+ window.setTimeout(function () {
+ renderSavingIndicator({hide: true})
+ }, 500)
+ })
+ })
+ })
+ }
+}
+
+
+var quill = function($el, options) {
+ for (var i =0; i < $el.length; i++)
+ {
+ initializeQuill($el[i], options)
+ }
+}
+
+module.exports = quill
\ No newline at end of file
diff --git a/app/javascript/legacy/common/el_swapo.js b/app/javascript/legacy/common/el_swapo.js
new file mode 100644
index 00000000..9047af10
--- /dev/null
+++ b/app/javascript/legacy/common/el_swapo.js
@@ -0,0 +1,30 @@
+// License: LGPL-3.0-or-later
+var el_swapo = {}
+
+$('*[swap-in]').each(function(i) {
+ var self = this
+
+ $(this).on('click', function(e) {
+ var swap_class = self.getAttribute('swap-class')
+ var new_class = self.getAttribute('swap-in')
+ swap(swap_class, new_class)
+ })
+})
+
+function swap(swap_class, new_class) {
+ $('*[swap-class="' + swap_class + '"]').removeClass('active')
+ $('*[swap-in="' + new_class + '"]').addClass('active')
+ $('.' + swap_class).hide()
+ $('.' + new_class).fadeIn()
+ utils.change_url_param('p', new_class)
+ utils.change_url_param('s', swap_class)
+}
+
+var current_page = utils.get_param('p')
+var current_swap = utils.get_param('s')
+if(current_page && current_swap) {
+ swap(current_swap, current_page)
+ setTimeout(() => document.querySelector(`[swap-in='${current_page}']`).click(), 400)
+}
+
+module.exports = el_swapo
diff --git a/app/javascript/legacy/common/event.js b/app/javascript/legacy/common/event.js
new file mode 100644
index 00000000..934f1c87
--- /dev/null
+++ b/app/javascript/legacy/common/event.js
@@ -0,0 +1,14 @@
+// License: LGPL-3.0-or-later
+var actions = [ 'change', 'click', 'dblclick', 'mousedown', 'mouseup', 'mouseenter', 'mouseleave', 'scroll', 'blur', 'focus', 'input', 'submit', 'keydown', 'keypress', 'keyup' ]
+
+function event(id, fn) {
+ // Find all classes ending in the event id
+ actions.forEach(function(action) {
+ $('*[on-' + action + '="' + id + '"]').each(function() {
+ if(this.getAttribute('on-' + action).indexOf(id) !== -1)
+ $(this).on(action, fn)
+ })
+ })
+}
+
+module.exports = event
diff --git a/app/javascript/legacy/common/ff-form-validation/index.es6 b/app/javascript/legacy/common/ff-form-validation/index.es6
new file mode 100644
index 00000000..bbd6ea85
--- /dev/null
+++ b/app/javascript/legacy/common/ff-form-validation/index.es6
@@ -0,0 +1,180 @@
+// License: LGPL-3.0-or-later
+const h = require('snabbdom/h')
+const R = require('ramda')
+const flyd = require('flyd')
+const serializeForm = require('form-serialize')
+flyd.filter = require('flyd/module/filter')
+flyd.mergeAll = require('flyd/module/mergeall')
+flyd.keepWhen = require('flyd/module/keepwhen')
+flyd.sampleOn = require('flyd/module/sampleon')
+const readableProp = require('./lib/readable-prop.es6')
+const emailRegex = require('./lib/email-regex.es6')
+const currencyRegex = require('./lib/currency-regex.es6')
+
+// constraints: a hash of key/vals where each key is the name of an input
+// and each value is an object of validator names and arguments
+//
+// validators: a hash of validation names mapped to boolean functions
+//
+// messages: a hash of validator names and field names mapped to error messages
+//
+// messages match on the most specific thing in the messages hash
+// - first checks if there is an exact match on field name
+// - then checks for match on validator name
+//
+// Given a constraint like:
+// {name: {required: true}}
+//
+// All of the following will set an error for above, starting with most specific first:
+// {name: {required: 'Please enter a valid name'}
+// {name: 'Please enter your name'}
+// {required: 'This is required'}
+
+
+function init(state) {
+ state = R.merge({
+ validators: R.merge(defaultValidators, state.validators || {})
+ , messages: R.merge(defaultMessages, state.messages || {})
+ , focus$: flyd.stream()
+ , change$: flyd.stream()
+ , submit$: flyd.stream()
+ }, state || {})
+ const valField = validateField(state)
+ const valForm = validateForm(state)
+
+ const fieldErr$ = flyd.map(valField, state.change$)
+ const formErr$ = flyd.map(valForm, state.submit$)
+ const clearErr$ = flyd.map(ev => [ev.target.name, null], state.focus$)
+ const allErrs$ = flyd.mergeAll([fieldErr$, formErr$, clearErr$])
+
+ // Stream of all errors combined into one object
+ state.errors$ = flyd.scan(R.assoc, {}, allErrs$)
+
+ // Stream of field names and new values and whole form data
+ state.nameVal$ = flyd.map(node => [node.name, node.value], state.change$)
+ state.data$ = flyd.scan(R.assoc, {}, state.nameVal$)
+
+ // Streams of errors and data on form submit
+ const errorsOnSubmit$ = flyd.sampleOn(state.submit$, state.errors$)
+ state.validSubmit$ = flyd.filter(R.compose(R.none, R.values), errorsOnSubmit$)
+ state.validData$ = flyd.keepWhen(state.validSubmit$, state.data$)
+
+ return state
+}
+
+
+// Pass in an array of validation functions and the event object
+// Will return a pair of [name, errorMsg] (errorMsg will be null if no errors present)
+const validateField = R.curry((state, node) => {
+ const value = node.value
+ const name = node.name
+ if(!state.constraints[name]) return [name, null] // no validators for this field present
+
+ // Find the first constraint that fails its validator
+ for(var valName in state.constraints[name]) {
+ const arg = state.constraints[name][valName]
+ if(!state.validators[valName]) {
+ console.warn("Form validation constraint does not exist:", valName)
+ } else if(!validators[valName](value, arg)) {
+ const msg = getErr(messages, name, valName, arg)
+ return [name, String(msg)]
+ }
+ }
+ return [name, null] // no error found
+})
+
+
+// Given the messages object, the validator argument, the field name, and the validator name
+// Retrieve and apply the error message function
+const getErr = (messages, name, valName, arg) => {
+ const err = messages[name]
+ ? messages[name][valName] || messages[name]
+ : messages[valName]
+ if(typeof err === 'function') return err(arg)
+ else return err
+}
+
+
+// Retrieve errors for the entire set of form data, used on form submit events,
+// using the form data saved into the state
+const validateForm = R.curry((state, node) => {
+ const formData = serializeForm(node, {hash: true})
+ for(var fieldName in constraints) { // not using higher order .map or reduce so we can break and return early
+ for(var valName in constraints[fieldName]) {
+ const arg = constraints[fieldName][valName]
+ if(!validators[valName]) {
+ console.warn("Form validation constraint does not exist:", valName)
+ } else if(!validators[valName](value, arg)) {
+ const msg = getErr(messages, name, valName, arg)
+ return [name, String(msg)]
+ }
+ }
+ }
+}
+
+
+// -- Views
+
+const validatedForm = R.curry((state, elm) => {
+ elm.data = R.merge(elm.data, {
+ on: {submit: ev => {ev.preventDefault(); state.submit$(ev.currentTarget)}}
+ })
+ return elm
+})
+
+
+// A single form field
+// Data takes normal snabbdom data for the input/select/textarea (eg props, style, on)
+const validatedField = R.curry((state, elm) => {
+ if(!elm.data.props || !elm.data.props.name) throw new Error(`You need to provide a field name for validation (using the 'props.name' property)`)
+ var err = state.errors$()[elm.data.props.name]
+ var invalid = err && err.length
+
+ elm.data = R.merge(elm.data, {
+ on: {
+ focus: state.focus$
+ , change: ev => state.change$([ev.currentTarget, state])
+ }
+ , class: { invalid }
+ })
+
+ return h('div', {
+ props: {className: 'ff-field' + (invalid ? ' ff-field--invalid' : ' ff-field--valid')}
+ }, [
+ invalid ? h('p.ff-field-errorMessage', err) : ''
+ , elm
+ ])
+})
+
+var defaultMessages = {
+ email: 'Please enter a valid email address'
+, required: 'This field is required'
+, currency: 'Please enter valid currency'
+, format: "This doesn't look like the right format"
+, isNumber: 'This should be a number'
+, max: n => `This should be less than ${n}`
+, min: n => `This should be at least ${n}`
+, equalTo: n => `This should be equal to ${n}`
+, maxLength: n => `This should be no longer than ${n}`
+, minLength: n => `This should be longer than ${n}`
+, lengthEquals: n => `This should have a length of ${n}`
+, includedIn: arr => `This should be one of: ${arr.join(', ')}`
+}
+
+var defaultValidators = {
+ email: val => val.match(emailRegex)
+, present: val => Boolean(val)
+, currency: val => String(val).match(currencyRegex)
+, format: (val, arg) => String(val).match(arg)
+, isNumber: val => !isNaN(val)
+, max: (val, n) => val <= n
+, min: (val, n) => val >= n
+, equalTo: (val, n) => n === val
+, maxLength: (val, n) => val.length <= n
+, minLength: (val, n) => val.length >= n
+, lengthEquals: (val, n) => val.length === n
+, includedIn: (val, arr) => arr.indexOf(val) !== -1
+}
+
+module.exports = {init, validatedField, validatedForm}
+
diff --git a/app/javascript/legacy/common/ff-form-validation/lib/currency-regex.es6 b/app/javascript/legacy/common/ff-form-validation/lib/currency-regex.es6
new file mode 100644
index 00000000..378586ca
--- /dev/null
+++ b/app/javascript/legacy/common/ff-form-validation/lib/currency-regex.es6
@@ -0,0 +1,3 @@
+// License: LGPL-3.0-or-later
+module.exports = /^(?!0\.00)\d{1,3}(,\d{3})*(\.\d\d)?$/
+
diff --git a/app/javascript/legacy/common/ff-form-validation/lib/email-regex.es6 b/app/javascript/legacy/common/ff-form-validation/lib/email-regex.es6
new file mode 100644
index 00000000..624a9afa
--- /dev/null
+++ b/app/javascript/legacy/common/ff-form-validation/lib/email-regex.es6
@@ -0,0 +1,4 @@
+// License: LGPL-3.0-or-later
+// http://stackoverflow.com/questions/46155/validate-email-address-in-javascript
+module.exports = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
diff --git a/app/javascript/legacy/common/ff-form-validation/lib/readable-prop.es6 b/app/javascript/legacy/common/ff-form-validation/lib/readable-prop.es6
new file mode 100644
index 00000000..2f1985ff
--- /dev/null
+++ b/app/javascript/legacy/common/ff-form-validation/lib/readable-prop.es6
@@ -0,0 +1,12 @@
+// License: LGPL-3.0-or-later
+// "email_address" => "email address"
+// "emailAddress" => "email address"
+
+module.exports = str =>
+ str
+ .replace('_', ' ')
+ .replace(/([a-z])([A-Z])/g, '$1 $2')
+ .replace(/\b([A-Z]+)([A-Z])([a-z])/, '$1 $2$3')
+ .toLowerCase()
+
+
diff --git a/app/javascript/legacy/common/file-input-stream.js b/app/javascript/legacy/common/file-input-stream.js
new file mode 100644
index 00000000..4f506b04
--- /dev/null
+++ b/app/javascript/legacy/common/file-input-stream.js
@@ -0,0 +1,17 @@
+// License: LGPL-3.0-or-later
+const flyd = require('flyd')
+const R = require('ramda')
+
+// Given an input element, return a stream of the input file data as text
+
+module.exports = R.curry(node => {
+ var $stream = flyd.stream()
+ var file = node.files[0]
+ var reader = new FileReader()
+ if(file instanceof Blob) {
+ reader.readAsText(file)
+ reader.onload = e => $stream(reader.result)
+ }
+ return $stream
+})
+
diff --git a/app/javascript/legacy/common/form-to-object.js b/app/javascript/legacy/common/form-to-object.js
new file mode 100644
index 00000000..8321ff9f
--- /dev/null
+++ b/app/javascript/legacy/common/form-to-object.js
@@ -0,0 +1,44 @@
+// License: LGPL-3.0-or-later
+// Convert a form to an object literal
+module.exports = function(form) {
+ if(form === undefined) throw new Error("form is undefined")
+ var result = {}
+ var fields = toArr(form.querySelectorAll('input, textarea, select'))
+ .filter(function(n) { return n.hasAttribute('name') })
+ .map(function(n) {
+ var name = n.getAttribute('name')
+ var keys = n.getAttribute('name').split('.')
+ if(n.value && n.value.toString().length) { // won't set empty strings for empty vals
+ if(n.getAttribute('type') === 'checkbox') {
+ deepSet(keys, n.checked, result)
+ } else if(n.getAttribute('type') === 'radio') {
+ if(n.checked) deepSet(keys, n.value, result)
+ } else {
+ deepSet(keys, n.value, result)
+ }
+ }
+ })
+
+ return result
+}
+
+function toArr(x) { return Array.prototype.slice.call(x) }
+
+// Given an array of nested keys, a value, and a target object:
+// Set the value into the object at the last nested key
+function deepSet(keys, val, obj, options) {
+ var exceptLast = keys.slice(0, keys.length-1)
+ var last = keys[keys.length-1]
+ var nested = exceptLast.reduce(function(nestedObj, key) {
+ if(nestedObj[key] === undefined) {
+ nestedObj[key] = {}
+ return nestedObj[key]
+ } else {
+ return nestedObj[key]
+ }
+ }, obj)
+ // if(nested[last] === undefined) nested[last] = {}
+ nested[last] = val
+ return obj
+}
+
diff --git a/app/javascript/legacy/common/form.js b/app/javascript/legacy/common/form.js
new file mode 100644
index 00000000..ace9efcc
--- /dev/null
+++ b/app/javascript/legacy/common/form.js
@@ -0,0 +1,20 @@
+// License: LGPL-3.0-or-later
+var form = module.exports = {
+ loading: loading,
+ showErr: showErr,
+ clear: clear
+}
+
+function loading(formEl) {
+ $(formEl).find('button[type="submit"]').loading()
+}
+
+function showErr(msg, el) {
+ $(el).find('.status').addClass('error').text(msg)
+ $(el).find('button[type="submit"]').disableLoading()
+}
+
+function clear(el) {
+ $(el).find('.status').removeClass('error').text('')
+ $(el).find('button[type="submit"]').disableLoading()
+}
diff --git a/app/javascript/legacy/common/format.js b/app/javascript/legacy/common/format.js
new file mode 100644
index 00000000..dc4fe828
--- /dev/null
+++ b/app/javascript/legacy/common/format.js
@@ -0,0 +1,126 @@
+// License: LGPL-3.0-or-later
+var moment = require('moment')
+var format = {}
+
+module.exports = format
+
+// Convert a snake-case phrase (eg. 'requested_by_customer') to a readable phrase (eg. 'Requested by customer')
+format.snake_to_words = function(snake, options) {
+ if(!snake) return snake
+ return snake.replace(/_/g, ' ').replace(/^./, function(m) {return m.toUpperCase()})
+}
+
+format.camelToWords = function(str, os) {
+ if(!str) return str
+ return str.replace(/([A-Z])/g, " $1")
+}
+
+format.dollarsToCents = function(dollars) {
+ dollars = dollars.toString().replace(/[$,]/g, '')
+ if(!isNaN(dollars) && dollars.match(/^-?\d+\.\d$/)) {
+ // could we use toFixed instead? Probably but this is straightforward.
+ dollars = dollars + "0"
+ }
+ if(isNaN(dollars) || !dollars.match(/^-?\d+(\.\d\d)?$/)) throw "Invalid dollar amount: " + dollars
+ return Math.round(Number(dollars) * 100)
+}
+
+format.centsToDollars = function(cents, options={}) {
+ if(cents === undefined) return '0'
+ return format.numberWithCommas((Number(cents) / 100.0).toFixed(options.noCents ? 0 : 2).toString()).replace(/\.00$/,'')
+}
+
+format.weeklyToMonthly = function(amount) {
+ if (amount === undefined) return 0;
+ return Math.round(4.3 * amount);
+}
+
+
+
+format.numberWithCommas = function(n) {
+ return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+}
+
+format.percent = function(x, y) {
+ if(!x || !y) return 0
+ return Math.round(y / x * 100)
+}
+
+format.pluralize = function(quantity, plural_word) {
+ if(quantity === undefined || quantity === null) return '0 '+plural_word
+ var str = String(quantity) + ' '
+ if(quantity !== 1) return str+plural_word
+ else return str + appl.to_singular(plural_word)
+}
+
+format.capitalize = function (string) {
+ return string.split(' ')
+ .map(function(s) { return s.charAt(0).toUpperCase() + s.slice(1) })
+ .join(' ')
+}
+
+format.toSentence = function(arr) {
+ if(arr.length < 2) return arr
+ if(arr.length === 2) return arr[0] + ' and ' + arr[1]
+ var last = arr.length - 1
+ return arr.slice(0, last).join(', ') + ', and ' + arr[last]
+}
+
+format.zeroPad = function(num, size) {
+ var str = num + ""
+ while(str.length < size) str = "0" + str
+ return str
+}
+
+format.sanitizeHtml = function(html) {
+ if(!html) return
+ var tagBody = '(?:[^"\'>]|"[^"]*"|\'[^\']*\')*'
+ var tagOrComment = new RegExp(
+ '<(?:'
+ // Comment body.
+ + '!--(?:(?:-*[^->])*--+|-?)'
+ // Special "raw text" elements whose content should be elided.
+ + '|script\\b' + tagBody + '>[\\s\\S]*?[\\s\\S]*?',
+ 'gi')
+ return html.replace(tagOrComment, '').replace(/ {
+ const url = '/'
+ const response$ = request({method: 'GET', url, path, query}).load
+ const valid$ = flyd.filter(x => x.status === 200, response$)
+ return flyd.map(x => x.body, valid$)
+}
+
diff --git a/app/javascript/legacy/common/image_uploader.js b/app/javascript/legacy/common/image_uploader.js
new file mode 100644
index 00000000..7bec14a4
--- /dev/null
+++ b/app/javascript/legacy/common/image_uploader.js
@@ -0,0 +1,34 @@
+// License: LGPL-3.0-or-later
+$('.image-upload input').change(function(e) {
+ var self = this
+ appl.def('image_upload.is_selecting', true)
+ if(this.files && this.files[0]) {
+ var reader = new FileReader()
+ reader.onload = function(e) {
+ if(e.valueOf().loaded >= 3000000) {
+ appl.def('image_upload.error', 'Please select a file smaller than 3mb')
+ } else {
+ appl.def('image_upload.error', '')
+ }
+ $(self).parent().css('background-image', "url('" + e.target.result + "')")
+ $(self).parent().addClass('live-preview')
+ }
+ reader.readAsDataURL(this.files[0])
+ }
+})
+
+appl.def('remove_image', function(url, resource, notification, payload) {
+ var data = {}
+ data[resource] = payload
+ appl.notify(notification)
+ appl.def('loading', true)
+ $.ajax({
+ type: 'put',
+ url: url,
+ data: data,
+ })
+ .done(function() {
+ appl.reload()
+ })
+ .fail(function(e) { })
+})
diff --git a/app/javascript/legacy/common/jquery_additions.js b/app/javascript/legacy/common/jquery_additions.js
new file mode 100644
index 00000000..640f137a
--- /dev/null
+++ b/app/javascript/legacy/common/jquery_additions.js
@@ -0,0 +1,32 @@
+// License: LGPL-3.0-or-later
+$.fn.serializeObject = function() {
+ return this.serializeArray().reduce(function(obj, field) {
+ if(field.value)
+ var val = field.value
+ else if(field.files && field.files[0])
+ var val = field.files[0]
+ obj[field.name] = val
+ return obj
+ }, {})
+}
+
+// Make a button enter the ajax loading state, where it's disabled and has a little spinner.
+$.fn.loading = function(message) {
+ this.each(function() {
+ var msg = message || this.getAttribute('data-loading')
+ this.setAttribute('data-text', this.innerHTML)
+ this.innerHTML = " " + msg
+ this.setAttribute('disabled', 'disabled')
+ })
+ return this
+}
+
+$.fn.disableLoading = function() {
+ this.each(function() {
+ if(!this.hasAttribute('disabled')) return
+ var old_text = this.getAttribute('data-text')
+ this.innerHTML = old_text
+ this.removeAttribute('disabled')
+ })
+ return this
+}
diff --git a/app/javascript/legacy/common/notification.js b/app/javascript/legacy/common/notification.js
new file mode 100644
index 00000000..4ca5c0b5
--- /dev/null
+++ b/app/javascript/legacy/common/notification.js
@@ -0,0 +1,13 @@
+// License: LGPL-3.0-or-later
+var notification = function(msg, err) {
+ var el = document.getElementById('js-notification')
+ if(err) {el.className = 'show error'}
+ else {el.className = 'show'}
+ el.innerText = msg
+ window.setTimeout(function() {
+ el.className = ''
+ el.innerText = ''
+ }, 7000)
+}
+module.exports = notification
+
diff --git a/app/javascript/legacy/common/on-change-sanitize-slug.js b/app/javascript/legacy/common/on-change-sanitize-slug.js
new file mode 100644
index 00000000..126dde2a
--- /dev/null
+++ b/app/javascript/legacy/common/on-change-sanitize-slug.js
@@ -0,0 +1,11 @@
+// License: LGPL-3.0-or-later
+const R = require('ramda')
+const sanitize = require('./sanitize-slug')
+
+// Just a hacky way to automatically sanitize slug inputs when they are changed
+
+var inputs = document.querySelectorAll('.js-sanitizeSlug')
+
+R.map(
+ inp => inp.addEventListener('change', ev => ev.currentTarget.value = sanitize(ev.currentTarget.value || ev.currentTarget.getAttribute('data-slug-default')))
+, inputs )
diff --git a/app/javascript/legacy/common/on-ios11.js b/app/javascript/legacy/common/on-ios11.js
new file mode 100644
index 00000000..99728c18
--- /dev/null
+++ b/app/javascript/legacy/common/on-ios11.js
@@ -0,0 +1,11 @@
+// License: LGPL-3.0-or-later
+function calculateIOS()
+{
+ 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;
+}
+
+module.exports = calculateIOS
\ No newline at end of file
diff --git a/app/javascript/legacy/common/onboard.js b/app/javascript/legacy/common/onboard.js
new file mode 100644
index 00000000..bdcfbbc9
--- /dev/null
+++ b/app/javascript/legacy/common/onboard.js
@@ -0,0 +1,280 @@
+// License: LGPL-3.0-or-later
+const flyd = require('flimflam/flyd')
+const h = require('flimflam/h')
+const R = require('ramda')
+const modal = require('flimflam/ui/modal')
+const render = require('flimflam/render')
+const wizard = require('flimflam/ui/wizard')
+const validatedForm = require('flimflam/ui/validated-form')
+const request = require('./request')
+const notification = require('flimflam/ui/notification')
+const fieldWithError = require('../components/field-with-error')
+
+const init = () => {
+ const orgForm = validatedForm.init({constraints: constraints.org})
+ const contactForm = validatedForm.init({constraints: constraints.contact})
+ const infoForm = validatedForm.init({constraints: constraints.info})
+ const currentStep$ = flyd.mergeAll([
+ flyd.stream(0)
+ , flyd.map(R.always(1), orgForm.validSubmit$)
+ , flyd.map(R.always(2), infoForm.validSubmit$)
+ ])
+ const wiz = wizard.init({currentStep$})
+ const openModal$ = flyd.stream()
+ document.querySelectorAll('[data-ff-open-onboard]')
+ .forEach(x => {x.addEventListener('click', openModal$)})
+
+ //flyd.map(trackGA, openModal$)
+
+ const response$ = flyd.flatMap(postData(orgForm, infoForm, contactForm), contactForm.validData$)
+ const respOk$ = flyd.filter(resp => resp.status === 200, response$)
+ const respErr$ = flyd.filter(resp => resp.status !== 200, response$)
+ const loading$ = flyd.mergeAll([
+ flyd.map(R.always(true), contactForm.validSubmit$)
+ , flyd.map(R.always(false), response$)
+ ])
+
+ const message$ = flyd.mergeAll([
+ flyd.map(R.always("Saving your data..."), contactForm.validSubmit$)
+ , flyd.map(R.always("Thank you! Now redirecting..."), respOk$)
+ , flyd.map(resp => `There was an error: ${resp.body.error}`, respErr$)
+ ])
+
+ const notif = notification.init({message$, hideDelay: 20000})
+ flyd.map(resp => {setTourCookies(resp.body.nonprofit); window.location = '/'}, respOk$)
+
+
+ return {
+ openModal$
+ , currentStep$
+ , wiz
+ , orgForm
+ , contactForm
+ , infoForm
+ , loading$
+ , notif
+ }
+}
+
+// const trackGA = () => {
+// if(!ga) return
+// ga('send', {
+// hitType: 'event',
+// eventCategory: 'ClickSignUp',
+// eventAction: 'click',
+// eventLabel: location.pathname
+// })
+// }
+
+
+const setTourCookies = nonprofit => {
+ document.cookie = `tour_dashboard=${nonprofit.id};path=/`
+ document.cookie = `tour_campaign=${nonprofit.id};path=/`
+ document.cookie = `tour_event=${nonprofit.id};path=/`
+ document.cookie = `tour_profile=${nonprofit.id};path=/`
+ document.cookie = `tour_transactions=${nonprofit.id};path=/`
+ document.cookie = `tour_supporters=${nonprofit.id};path=/`
+ document.cookie = `tour_subscribers=${nonprofit.id};path=/`
+}
+
+const postData = (orgForm, infoForm) => contactFormData => {
+ const send = {
+ nonprofit: orgForm.validData$()
+ , extraInfo: infoForm.validData$()
+ , user: contactFormData
+ }
+ return request({
+ method: 'post'
+ , path: '/nonprofits/onboard'
+ , send
+ }).load
+}
+
+const constraints = {
+ org: {
+ name: {required: true}
+ , city: {required: true}
+ , state_code: {required: true}
+ , zip_code: {required: true}
+ }
+, contact: {
+ email: {required: true, email: true}
+ , name: {required: true}
+ , phone: {required: true}
+ , password: {required: true, minLength: 7}
+ , password_confirmation: {required: true, matchesField: 'password'}
+ }
+, info: {}
+}
+
+const view = state => {
+ return h('div', [
+ modal({
+ show$: state.openModal$
+ , body: onboardWizard(state)
+ , title: 'Get started'
+ })
+ , notification.view(state.notif)
+ ])
+}
+
+const onboardWizard = state => {
+ const labels = [ 'Org', 'Info', 'Contact' ]
+ const steps = [ orgForm(state) , infoForm(state), contactForm(state) ]
+ return h('div', [
+ wizard.labels(state.wiz, labels)
+ , wizard.content(state.wiz, steps)
+ ])
+}
+
+const pricingDetails = h('div.u-marginTop--15.u-padding--10.u-background--fog', [
+ h('p', [
+ "CommitChange uses "
+ , h('a.strong', {props: {href: 'https://www.stripe.com/', target :'_blank'}}, 'Stripe')
+ , ' to process transactions. Stripe takes a '
+ , h('strong', `${ENV.feeRate}% + ${ENV.perTransaction}¢`)
+ , ' processing fee on every transaction.'])
+, h('p', [
+ 'In order to support operations, feature development, and community building, '
+ , 'CommitChange takes an additional fee of '
+ , h('strong', `${ENV.platformFeeRate}%.`)
+ ])
+, h('p.u-marginBottom--0', [
+ "Our fee scales down as your transaction volume scales up. "
+, h('a.strong', {props: {href: 'mailto:support@commitchange.com'}}, 'Contact us')
+, " to chat about volume discounts."
+ ])
+])
+
+const orgForm = state => {
+ const form = validatedForm.form(state.orgForm)
+ const field = fieldWithError(state.orgForm)
+ return h('div', [
+ form(h('form', [
+ h('fieldset', [
+ h('label', 'Organization Name')
+ , field(h('input', {props: {type: 'text', name: 'name', placeholder: ''}}))
+ ])
+ , h('fieldset', [
+ h('label', 'Website URL')
+ , field(h('input', {props: {type: 'text', name: 'website', placeholder: 'https://your-website.org'}}))
+ ])
+ , h('div.clearfix', [
+ h('fieldset.col-left-6.u-paddingRight--10', [
+ h('label', 'Org Email (public)')
+ , field(h('input', {props: {type: 'email', name: 'email', placeholder: 'example@name.org'}}))
+ ])
+ , h('fieldset.col-left-6', [
+ h('label', 'Org Phone (public)')
+ , field(h('input', {props: {type: 'text', name: 'phone', placeholder: '(XXX) XXX-XXXX'}}))
+ ])
+ ])
+ , h('div.clearfix', [
+ h('fieldset.col-left-6.u-paddingRight--10', [
+ h('label', 'City')
+ , field(h('input', {props: {type: 'text', name: 'city', placeholder: ''}}))
+ ])
+ , h('fieldset.col-left-3.u-paddingRight--10', [
+ h('label', 'State')
+ , field(h('input', {props: {type: 'text', name: 'state_code', placeholder: 'NY'}}))
+ ])
+ , h('fieldset.col-left-3', [
+ h('label', 'Zip Code')
+ , field(h('input', {props: {type: 'text', name: 'zip_code', placeholder: ''}}))
+ ])
+ ])
+ , h('div', [
+ h('button.button', 'Next')
+ ])
+ ]))
+ ])
+}
+
+const infoForm = state => {
+ const form = validatedForm.form(state.infoForm)
+ const field = fieldWithError(state.infoForm)
+
+ return h('div', [
+ form(h('form', [
+ h('div.u-marginBottom--20', [
+ h('fieldset', [
+ h('label', {props: {htmlFor: 'registered-npo-checkbox'}}, 'What kind of entity are you fundraising for?')
+ ])
+ , h('fieldset', [
+ h('input', {props: {type: 'radio', name: 'entity_type', value: 'nonprofit', id: 'onboard-entity-nonprofit'}})
+ , h('label', {props: {htmlFor: 'onboard-entity-nonprofit'}}, 'A registered nonprofit')
+ ])
+ , h('fieldset', [
+ h('input', {props: {type: 'radio', name: 'entity_type', value: 'forprofit', id: 'onboard-entity-forprofit'}})
+ , h('label', {props: {htmlFor: 'onboard-entity-forprofit'}}, 'A for-profit company')
+ ])
+ , h('fieldset', [
+ h('input', {props: {type: 'radio', name: 'entity_type', value: 'unregistered', id: 'onboard-entity-unregistered'}})
+ , h('label', {props: {htmlFor: 'onboard-entity-unregistered'}}, 'An unregistered project, group, club, or other cause')
+ ])
+ ])
+ , h('div.u-marginBottom--20', [
+ h('fieldset', [
+ h('label', 'How do you want to use CommitChange?')
+ ])
+ , h('fieldset', [
+ h('input', {props: {type: 'checkbox', name: 'use_donations', id: 'onboard-use-donations'}})
+ , h('label', {props: {htmlFor: 'onboard-use-donations'}}, 'Donation processing')
+ ])
+ , h('fieldset', [
+ h('input', {props: {type: 'checkbox', name: 'use_crm', id: 'onboard-use-crm'}})
+ , h('label', {props: {htmlFor: 'onboard-use-crm'}}, 'Supporter relationship management')
+ ])
+ , h('fieldset', [
+ h('input', {props: {type: 'checkbox', name: 'use_campaigns', id: 'onboard-use-campaigns'}})
+ , h('label', {props: {htmlFor: 'onboard-use-campaigns'}}, 'Campaign fundriasing')
+ ])
+ , h('fieldset', [
+ h('input', {props: {type: 'checkbox', name: 'use_events', id: 'onboard-use-events'}})
+ , h('label', {props: {htmlFor: 'onboard-use-events'}}, 'Event pages and ticketing')
+ ])
+ ])
+ , h('fieldset', [
+ h('label', 'How did you hear about CommitChange?')
+ , field(h('input', {props: {type: 'text', name: 'how_they_heard', placeholder: 'Google, radio, referral, etc'}}))
+ ])
+ , h('button.button', 'Next')
+ ]))
+ ])
+}
+
+const contactForm = state => {
+ const form = validatedForm.form(state.contactForm)
+ const field = fieldWithError(state.contactForm)
+ return h('div', [
+ form(h('form', [
+ h('div.clearfix', [
+ h('fieldset.col-left-6.u-paddingRight--10', [
+ h('label', 'Your Name')
+ , field(h('input', {props: {type: 'text', name: 'name', placeholder: 'Full Name'}}))
+ ])
+ , h('fieldset.col-left-6', [
+ h('label', 'Your Email (used for login)')
+ , field(h('input', {props: {type: 'email', name: 'email', placeholder: 'youremail@example.com'}}))
+ ])
+ ])
+ , h('fieldset', [
+ h('label', 'New Password')
+ , field(h('input', {props: {type: 'password', name: 'password', placeholder: ''}}))
+ ])
+ , h('fieldset', [
+ h('label', 'Retype Password')
+ , field(h('input', {props: {type: 'password', name: 'password_confirmation', placeholder: ''}}))
+ ])
+ , h('fieldset', [
+ h('label', ['Your Phone', h('small', ' (for account recovery)')])
+ , field(h('input', {props: {type: 'text', name: 'phone', placeholder: '(XXX) XXX-XXXX'}}))
+ ])
+ , h('button.button', {props: {disabled: state.loading$()}}, 'Save & Finish')
+ ]))
+ ])
+}
+
+const container = document.querySelector("#ff-render-onboard")
+render(view, init(), container)
+
diff --git a/app/javascript/legacy/common/panels_layout.js b/app/javascript/legacy/common/panels_layout.js
new file mode 100644
index 00000000..6da6a7e5
--- /dev/null
+++ b/app/javascript/legacy/common/panels_layout.js
@@ -0,0 +1,71 @@
+// License: LGPL-3.0-or-later
+var $panelsLayout = $('.panelsLayout'),
+ $panelsLayoutBody = $panelsLayout.find('.panelsLayout-body'),
+ $sidePanel = $panelsLayoutBody.find('.sidePanel'),
+ $mainPanel = $panelsLayoutBody.find('.mainPanel'),
+ filterButton = document.getElementById('button--openFilter'),
+ $tableMeta = $('.table-meta--main'),
+ win = window
+
+function setPanelsLayoutBodyHeight(){
+ var bodyOffsetTop = $panelsLayoutBody.offset().top
+ var winInnerHeight = win.innerHeight
+ var calculatedHeight = (winInnerHeight - bodyOffsetTop) + 'px'
+
+ if($('.filterPanel').length)
+ $('.filterPanel, .sidePanel, .mainPanel').css('height', calculatedHeight)
+ else
+ $('.sidePanel, .mainPanel').css('height', calculatedHeight)
+}
+
+setPanelsLayoutBodyHeight()
+$(win).resize(setPanelsLayoutBodyHeight)
+
+appl.def('open_side_panel', function(){
+ appl.def('is_showing_side_panel', true)
+ $panelsLayout.removeClass('is-showingFilterPanel')
+ $sidePanel.scrollTop(0)
+ $panelsLayout.addClass('is-showingSidePanel')
+ setPanelsLayoutBodyHeight()
+ $mainPanel.css({
+ left: '0px',
+ right: 'initial'
+ })
+ if (filterButton)
+ filterButton.removeAttribute('data-selected')
+ return appl
+})
+
+appl.def('close_side_panel', function(){
+ appl.def('is_showing_side_panel', false)
+ $mainPanel.find('tr').removeAttr('data-selected')
+ $panelsLayout.removeClass('is-showingSidePanel')
+ setPanelsLayoutBodyHeight()
+ window.history.pushState({},'index', win.location.pathname)
+ return appl
+})
+
+appl.def('open_filter_panel', function(){
+ $panelsLayout.removeClass('is-showingSidePanel')
+ $panelsLayout.addClass('is-showingFilterPanel')
+ $mainPanel.find('tr').removeAttr('data-selected')
+ $mainPanel.css({
+ right: '0px',
+ left: 'initial'
+ })
+ filterButton.setAttribute('data-selected', '')
+ window.history.pushState({},'index', win.location.pathname)
+ return appl
+})
+
+appl.def('close_filter_panel', function(){
+ $panelsLayout.removeClass('is-showingFilterPanel')
+ filterButton.removeAttribute('data-selected')
+ return appl
+})
+
+appl.def('scroll_main_panel', function(){
+ var main_panel = document.querySelector('.mainPanel')
+ main_panel.scrollTop = main_panel.scrollHeight
+})
+
diff --git a/app/javascript/legacy/common/pikaday-timepicker.js b/app/javascript/legacy/common/pikaday-timepicker.js
new file mode 100644
index 00000000..0e2cc62e
--- /dev/null
+++ b/app/javascript/legacy/common/pikaday-timepicker.js
@@ -0,0 +1,30 @@
+// License: LGPL-3.0-or-later
+const bind = require('attr-binder')
+const Pikaday = require('pikaday-time')
+const moment = require('moment')
+
+bind('pikaday-timepicker', function(container, format) {
+ const button = container.querySelector('a')
+ const input = container.querySelector('input')
+ input.readOnly = true
+
+ const maxDate_str = input.getAttribute('pikaday-maxDate')
+ const maxDate = maxDate_str ? moment(maxDate_str) : undefined
+ const defaultDate_str = input.getAttribute('pikaday-defaultDate')
+ const defaultDate = defaultDate_str ? moment(defaultDate_str) : undefined
+ new Pikaday({
+ showTime: true
+ , showMinutes: true
+ , showSeconds: false
+ , autoClose: false
+ , timeLabel: 'Time'
+ , format
+ , setDefaultDate: Boolean(defaultDate)
+ , field: input
+ , maxDate
+ , defaultDate
+ , trigger: button
+ })
+
+})
+
diff --git a/app/javascript/legacy/common/polyfills.js b/app/javascript/legacy/common/polyfills.js
new file mode 100644
index 00000000..9504f84e
--- /dev/null
+++ b/app/javascript/legacy/common/polyfills.js
@@ -0,0 +1,11 @@
+// License: LGPL-3.0-or-later
+// Console fallback
+if (!window.console) {
+ window.console = new function() {
+ this.log = function(str) {}
+ this.dir = function(str) {}
+ }
+}
+
+// Promises polyfill
+require('es6-promise').polyfill()
diff --git a/app/javascript/legacy/common/post-form-data.es6 b/app/javascript/legacy/common/post-form-data.es6
new file mode 100644
index 00000000..6046b517
--- /dev/null
+++ b/app/javascript/legacy/common/post-form-data.es6
@@ -0,0 +1,26 @@
+// License: LGPL-3.0-or-later
+const flyd = require('flyd')
+const R = require('ramda')
+
+// Using the bare-bones XMLHttpRequest API so we can post form data and upload the image
+// Returns a flyd stream
+
+module.exports = R.curryN(2, (url, object) => {
+ var stream = flyd.stream()
+ var req = new XMLHttpRequest()
+ var formData = new FormData()
+ R.mapObjIndexed((val, key) => {
+ if(val.constructor === Object) val = JSON.stringify(val)
+ formData.append(key, val)
+ }, object)
+ req.open("POST", url)
+ // req.setRequestHeader('X-CSRF-Token', window._csrf)
+ req.send(formData)
+ req.onload = ev => {
+ var body = {}
+ try { body = JSON.parse(req.response) } catch(e) { }
+ stream( {status: req.status, body: body } )
+ }
+ return stream
+})
+
diff --git a/app/javascript/legacy/common/post-form-data.js b/app/javascript/legacy/common/post-form-data.js
new file mode 100644
index 00000000..3a95ce4c
--- /dev/null
+++ b/app/javascript/legacy/common/post-form-data.js
@@ -0,0 +1,27 @@
+// License: LGPL-3.0-or-later
+const flyd = require('flyd')
+const R = require('ramda')
+
+// TODO make this use flyd-ajax
+// Using the bare-bones XMLHttpRequest API so we can post form data and upload the image
+// Returns a flyd stream
+
+module.exports = R.curryN(2, (url, object) => {
+ var stream = flyd.stream()
+ var req = new XMLHttpRequest()
+ var formData = new FormData()
+ R.mapObjIndexed((val, key) => {
+ if(val.constructor === Object) val = JSON.stringify(val)
+ formData.append(key, val)
+ }, object)
+ req.open("POST", url)
+ // req.setRequestHeader('X-CSRF-Token', window._csrf)
+ req.send(formData)
+ req.onload = ev => {
+ var body = {}
+ try { body = JSON.parse(req.response) } catch(e) { }
+ stream( {status: req.status, body: body } )
+ }
+ return stream
+})
+
diff --git a/app/javascript/legacy/common/request.js b/app/javascript/legacy/common/request.js
new file mode 100644
index 00000000..ebd508ca
--- /dev/null
+++ b/app/javascript/legacy/common/request.js
@@ -0,0 +1,11 @@
+// License: LGPL-3.0-or-later
+const R = require('ramda')
+const request = require('flyd-ajax')
+
+module.exports = options => {
+ options.headers = R.merge({
+ 'Content-Type': 'application/json'
+ , 'X-CSRF-Token': window._csrf
+ }, options.headers || {})
+ return request(options)
+}
diff --git a/app/javascript/legacy/common/restful_resource.js b/app/javascript/legacy/common/restful_resource.js
new file mode 100644
index 00000000..89029c3a
--- /dev/null
+++ b/app/javascript/legacy/common/restful_resource.js
@@ -0,0 +1,139 @@
+// License: LGPL-3.0-or-later
+/* A simple module for dealing with ajax-based resources in viewscript
+ *
+ *
+ * Define a 'resource object' in appl that has these properties
+ * resource_name: 'donations' (plural name that matches the model)
+ * path_prefix: '/' (optional, defaults to empty string, or relative path)
+ * query: object of parameters to use for indexing (eg search queries)
+ * after_action: function callback run after the request (where action is fetch, index, etc)
+ * after_action_failure: callback for failed requests (where action is fetch, index, etc)
+ *
+ * Call the ajax functions like this:
+ * in js:
+ * appl.ajax.index(appl.resource_object)
+ * appl.ajax.create(appl.donations, {amount: 420})
+ * in viewscript in the dom:
+ * ajax.index resource_object
+ * ajax.create donations form_object
+ */
+
+var request = require('../common/client')
+
+var restful_resource = {}
+module.exports = restful_resource
+
+
+appl.def('ajax', {
+ index: function(prop, node) {
+ var resource = appl.vs(prop) || {}
+ var name = resource.resource_name || prop
+ var path = resource.path_prefix || ''
+ before_request(prop)
+ return new Promise(function(resolve, reject) {
+ request.get(path + name).query(resource.query)
+ .end(function(err, resp) {
+ var tmp = resource.data
+ after_request(prop, err, resp)
+ if(resp.ok) {
+ if(resource.query && resource.query.page > 1 && resource.concat_data) {
+ appl.def(prop + '.data', tmp.concat(resp.body.data))
+ }
+ resolve(resp)
+ } else {
+ reject(resp)
+ }
+ })
+ })
+ },
+
+ fetch: function(prop, id, node) {
+ var resource = appl.vs(prop) || {}
+ var name = resource.resource_name || prop
+ var path = resource.path_prefix || ''
+ before_request(prop)
+ return new Promise(function(resolve, reject) {
+ request.get(path + name + '/' + id).query(resource.query)
+ .end(function(err, resp) {
+ after_request(prop, err, resp)
+ if(resp.ok) resolve(resp)
+ else reject(resp)
+ })
+ })
+ },
+
+ create: function(prop, form_obj, node) {
+ var resource = appl.vs(prop) || {}
+ var name = resource.resource_name || prop
+ var path = resource.path_prefix || ''
+ before_request(prop)
+ return new Promise(function(resolve, reject) {
+ request.post(path + name).send(nested_obj(name, form_obj))
+ .end(function(err, resp) {
+ after_request(prop, err, resp)
+ if(resp.ok) resolve(resp)
+ else reject(resp)
+ })
+ })
+ },
+
+ update: function(prop, id, form_obj, node) {
+ var resource = appl.vs(prop) || {}
+ var name = resource.resource_name || prop
+ var path = resource.path_prefix || ''
+ before_request(prop)
+ return new Promise(function(resolve, reject) {
+ request.put(path + name + '/' + id).send(nested_obj(name, form_obj))
+ .end(function(err, resp) {
+ after_request(prop, err, resp)
+ if(resp.ok) resolve(resp)
+ else reject(resp)
+ })
+ })
+ },
+
+ del: function(prop, id, node) {
+ var resource = appl.vs(prop) || {}
+ var path = (resource.path_prefix || '') + (resource.resource_name || prop)
+ before_request(prop)
+ return new Promise(function(resolve, reject) {
+ request.del(path + '/' + id)
+ .end(function(err, resp) {
+ after_request(prop, err, resp)
+ if(resp.ok) resolve(resp)
+ else reject(resp)
+ })
+ })
+ }
+})
+
+
+// Given a viewscript property, set some state before every request.
+// Eg. appl.ajax.index('donations') will cause appl.donations.loading to be
+// true before the request finishes
+function before_request(prop) {
+ appl.def(prop + '.loading', true)
+ appl.def(prop + '.error', '')
+}
+
+
+// Set some data after each request.
+function after_request(prop, err, resp) {
+ appl.def(prop + '.loading', false)
+ if(resp.ok) {
+ appl.def(prop, resp.body)
+ } else {
+ appl.def(prop + '.error', resp.body)
+ }
+}
+
+
+// Simply return an object nested under 'name'
+// Will singularize the given name if plural
+// eg: given 'donations' and {amount: 111}, return {donation: {amount: 111}}
+function nested_obj(name, child_obj) {
+ var parent_obj = {}
+ parent_obj[appl.to_singular(name)] = child_obj
+ return parent_obj
+}
+
diff --git a/app/javascript/legacy/common/sanitize-slug.js b/app/javascript/legacy/common/sanitize-slug.js
new file mode 100644
index 00000000..e2cfcf4c
--- /dev/null
+++ b/app/javascript/legacy/common/sanitize-slug.js
@@ -0,0 +1,5 @@
+// License: LGPL-3.0-or-later
+module.exports = str =>
+ str.trim().toLowerCase()
+ .replace(/\s*[^A-Za-z0-9\-]\s*/g, '-') // Replace any oddballs with a hyphen
+ .replace(/-+$/g,'').replace(/^-+/, '').replace(/-+/, '-') // Remove starting/trailing and repeated hyphens
diff --git a/app/javascript/legacy/common/scroll_toggle_class.js b/app/javascript/legacy/common/scroll_toggle_class.js
new file mode 100644
index 00000000..7ed8a119
--- /dev/null
+++ b/app/javascript/legacy/common/scroll_toggle_class.js
@@ -0,0 +1,32 @@
+// License: LGPL-3.0-or-later
+module.exports = function(el, className, parentClass) {
+ var $el = $(el)
+ var elPxFromTop = $el.offset().top
+ var $parent = $el.parents(parentClass).length ? $el.parents(parentClass) : $el.parent()
+
+ var parentHeightPlusTop = $parent.height() + $parent.offset().top - $el.height()
+ var $elToToggle
+
+ if (parentClass === undefined) {
+ parentClass = ''
+ $elToToggle = $el
+ } else {
+ $elToToggle = $parent
+ }
+
+
+ // the parentClass param is optional but if it is passed
+ // then the className is applied to it instead of the el
+
+ $(window).scroll(function() {
+ var scrollPosition = $(window).scrollTop()
+
+ if(scrollPosition >= elPxFromTop)
+ $elToToggle.addClass(className)
+ else
+ $elToToggle.removeClass(className)
+
+ if(parentClass && scrollPosition >= parentHeightPlusTop)
+ $elToToggle.removeClass(className)
+ })
+}
diff --git a/app/javascript/legacy/common/search-data.js b/app/javascript/legacy/common/search-data.js
new file mode 100644
index 00000000..1dcb383e
--- /dev/null
+++ b/app/javascript/legacy/common/search-data.js
@@ -0,0 +1,52 @@
+// License: LGPL-3.0-or-later
+const R = require('ramda')
+const h = require('flimflam/h')
+const flyd = require('flimflam/flyd')
+const getValidData = require('../common/get-valid-data')
+
+const getCurry = path => query => getValidData(path, query)
+
+module.exports = (path, pageLength) => {
+ const get = getCurry(path)
+ const searchLessQuery$ = flyd.stream()
+
+ const submitSearch$ = flyd.stream()
+ const searchQuery$ = flyd.map(searchQuery(pageLength), submitSearch$)
+
+ const searchLessResults$ = flyd.flatMap(q => get(q), searchLessQuery$)
+ const searchResults$ = flyd.flatMap(q => get(q), searchQuery$)
+
+ const allResults$ = flyd.merge(searchLessResults$, searchResults$)
+
+ const hasMoreResults$ = flyd.map(x => x && x.length >= pageLength, allResults$)
+
+ const data$ = flyd.scanMerge([
+ [searchLessResults$, (data, results) => R.concat(data, results)]
+ , [searchResults$, (data, results) => results]
+ ], [])
+
+ searchLessQuery$({page: 1, page_length: pageLength, search: ''})
+
+ const loading$ = flyd.mergeAll([
+ flyd.map(R.always(true), submitSearch$)
+ , flyd.map(R.always(true), searchLessQuery$)
+ , flyd.map(R.always(false), allResults$)
+ , flyd.stream(true)
+ ])
+
+ return {
+ data$
+ , searchLessQuery$
+ , loading$
+ , pageLength
+ , hasMoreResults$
+ , submitSearch$
+ }
+}
+
+const searchQuery = pageLength => ev => {
+ ev.preventDefault()
+ const search = ev.target.querySelector('input').value
+ return {page: 1, search, page_length: pageLength}
+}
+
diff --git a/app/javascript/legacy/common/super-agent-frp.js b/app/javascript/legacy/common/super-agent-frp.js
new file mode 100644
index 00000000..82968f83
--- /dev/null
+++ b/app/javascript/legacy/common/super-agent-frp.js
@@ -0,0 +1,33 @@
+// License: LGPL-3.0-or-later
+// super-agent with default json and csrf wrappers
+// Also has a FRP api (using flyd) rather than the default '.end'
+// Every call to .perform() returns a flyd stream
+
+var request = require('superagent')
+var flyd = require("flyd")
+
+var wrapper = {
+ post: function() {
+ return injectFlyd(request.post.apply(this, arguments).set('X-CSRF-Token', window._csrf).type('json'))
+ }
+, put: function() {
+ return injectFlyd(request.put.apply(this, arguments).set('X-CSRF-Token', window._csrf).type('json'))
+ }
+, del: function() {
+ return injectFlyd(request.del.apply(this, arguments).set('X-CSRF-Token', window._csrf).type('json'))
+ }
+, get: function() {
+ return injectFlyd(request.get.apply(this, arguments).accept('json'))
+ }
+}
+
+function injectFlyd(req) {
+ req.perform = function() {
+ var $stream = flyd.stream()
+ req.end(function(err, resp) { $stream(resp) })
+ return $stream
+ }
+ return req
+}
+
+module.exports = wrapper
diff --git a/app/javascript/legacy/common/super-agent-promise.js b/app/javascript/legacy/common/super-agent-promise.js
new file mode 100644
index 00000000..12905091
--- /dev/null
+++ b/app/javascript/legacy/common/super-agent-promise.js
@@ -0,0 +1,41 @@
+// License: LGPL-3.0-or-later
+// super-agent with default json and csrf wrappers
+// Also has a Promise api ('.then' and '.catch') rather than the default '.end'
+
+var request = require('superagent')
+
+var wrapper = {}
+module.exports = wrapper
+
+wrapper.post = function() {
+ var req = request.post.apply(this, arguments).set('X-CSRF-Token', window._csrf).type('json')
+ return convert_to_promise(req)
+}
+
+wrapper.put = function() {
+ var req = request.put.apply(this, arguments).set('X-CSRF-Token', window._csrf).type('json')
+ return convert_to_promise(req)
+}
+
+wrapper.del = function() {
+ var req = request.del.apply(this, arguments).set('X-CSRF-Token', window._csrf).type('json')
+ return convert_to_promise(req)
+}
+
+wrapper.get = function(path) {
+ var req = request.get.call(this, path).accept('json')
+ return convert_to_promise(req)
+}
+
+function convert_to_promise(req) {
+ req.perform = function() {
+ return new Promise(function(resolve, reject) {
+ req.end(function(err, resp) {
+ if(resp && resp.ok) { resolve(resp) }
+ else { reject(resp) }
+ })
+ })
+ }
+ return req
+}
+
diff --git a/app/javascript/legacy/common/time-remaining.js b/app/javascript/legacy/common/time-remaining.js
new file mode 100644
index 00000000..8a435720
--- /dev/null
+++ b/app/javascript/legacy/common/time-remaining.js
@@ -0,0 +1,39 @@
+// License: LGPL-3.0-or-later
+const flyd = require('flyd')
+const flyd_every = require('flyd/module/every')
+const moment = require('moment-timezone')
+const format = require('../common/format')
+const pluralize = format.pluralize
+
+// Given an end dateTime ("2015-11-17 19:00") and a time-zone ("America/Los_Angeles"),
+// if the end dateTime has passed, return false
+// if the end dateTime is more than a day away
+// then return the number of days away
+// if the end dateTime is less than a day away
+// then return a countdown stream with seconds precision
+//
+// This function returns a stream.
+//
+// This function takes a timezone in the format "Country/City"
+// See here: http://momentjs.com/timezone/
+//
+
+
+const timeRemaining = (endDateTime, tz) => {
+ if(!endDateTime) return flyd.stream(false)
+ const format = "YYYY-MM-DD hh:mm:ss zz"
+ tz = tz || ENV.nonprofitTimezone || 'America/Los_Angeles'
+ const [now, end] = [moment().tz(tz), moment(endDateTime, format).tz(tz).seconds(59)]
+ console.log({now, end})
+ if(end.isBefore(now)) return flyd.stream(false)
+
+ if(end.diff(now, 'hours') <= 24) {
+ return flyd.map(
+ t => moment.utc(end.diff(moment(t))).format("HH:mm:ss")
+ , flyd_every(1000))
+ } else {
+ return flyd.stream(pluralize(end.diff(now, 'days'), 'days'))
+ }
+}
+
+module.exports = timeRemaining
diff --git a/app/javascript/legacy/common/utilities.js b/app/javascript/legacy/common/utilities.js
new file mode 100755
index 00000000..07fd38a9
--- /dev/null
+++ b/app/javascript/legacy/common/utilities.js
@@ -0,0 +1,180 @@
+// License: LGPL-3.0-or-later
+// Utilities!
+// XXX remove this whole file and split into modules with specific concerns
+const phoneFormatter = require('phone-formatter');
+const R = require('ramda')
+
+var utils = {}
+
+module.exports = utils
+
+// XXX remove
+utils.capitalize = string =>
+ string.charAt(0).toUpperCase() + string.slice(1)
+
+// Print a single message for Rails error responses
+// XXX remove
+utils.print_error = function (response) {
+ var msg = 'Sorry! We encountered an error.'
+ if(!response) return msg
+ if(response.status === 500) return msg
+ else if(response.status === 404) return "404 - Not found"
+ else if(response.status === 422 || response.status === 401) {
+ if(!response.responseJSON) return msg
+
+ var json = response.responseJSON
+ if(json.length) return json[0]
+
+ else if(json.errors)
+ for (var key in json.errors)
+ return key + ' ' + json.errors[key][0]
+
+ else if(json.error) return json.error
+
+ else return msg
+ }
+}
+
+// Retrieve a URL parameter
+// XXX remove
+utils.get_param = function(name) {
+ var param = decodeURI((RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [null])[1])
+ return (param == 'undefined') ? undefined : param
+}
+
+// XXX remove
+utils.change_url_param = function(key, value) {
+ if (!history || !history.replaceState) return
+ history.replaceState({}, "", utils.update_param(key, value))
+}
+
+// XXX remove. Depended on only by 'change_url_param' above
+utils.update_param = function(key, value, url) {
+ if(!url) url = window.location.href
+ var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi")
+
+ if(re.test(url)) {
+ if(typeof value !== 'undefined' && value !== null)
+ return url.replace(re, '$1' + key + "=" + value + '$2$3')
+ else {
+ var hash = url.split('#')
+ url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '')
+ if(typeof hash[1] !== 'undefined' && hash[1] !== null)
+ url += '#' + hash[1]
+ return url
+ }
+ } else {
+ if (typeof value !== 'undefined' && value !== null) {
+ var separator = url.indexOf('?') !== -1 ? '&' : '?',
+ hash = url.split('#')
+ url = hash[0] + separator + key + '=' + value
+ if(typeof hash[1] !== 'undefined' && hash[1] !== null)
+ url += '#' + hash[1]
+ return url
+ }
+ else return url
+ }
+}
+
+// Pad a number with leading zeros
+// XXX remove
+utils.zero_pad = function(num, size) {
+ var str = num + ""
+ while (str.length < size) str = "0" + str
+ return str
+}
+
+// for doing an action after the user pauses for a second after an event
+// XXX remove
+utils.delay = (function() {
+ var timer = 0
+ return function(ms, callback) {
+ clearTimeout(timer)
+ timer = setTimeout(callback, ms)
+ }
+})()
+
+utils.number_with_commas = function(n) {
+ return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+}
+
+// Merge x's properties with y (mutating)
+utils.merge = function(x, y) {
+ for (var key in y) { x[key] = y[key]; }
+ return x
+}
+
+var format = require('./format')
+utils.dollars_to_cents = format.dollarsToCents
+utils.cents_to_dollars = format.centsToDollars
+
+// Create a single FormData object from any number of inputs and forms (not bound to a single form)
+// Kind of a re-implementation of: http://www.w3.org/html/wg/drafts/html/master/forms.html#constructing-the-form-data-set
+// XXX remove
+utils.toFormData = function(form_el) {
+ var form_data = new FormData()
+ $(form_el).find('input, select, textarea').each(function(index) {
+ if(!this.name) return
+ if(this.files && this.files[0])
+ form_data.append(this.name, this.files[0])
+ else if(this.getAttribute("type") === "checkbox")
+ form_data.append(this.name, this.checked)
+ else if(this.value)
+ form_data.append(this.name, this.value)
+ })
+ return form_data
+}
+
+utils.mergeFormData = function(formData, obj) {
+ for(var key in obj) formData.append(key, obj[key])
+ return formData
+}
+
+
+// Given an array of values, return an array only with unique values
+// XXX remove
+utils.uniq = function(arr) {
+ var obj = {}
+ var index
+ var len = arr.length
+ var result = [];
+ for(index = 0; index < len; index += 1) obj[arr[index]] = arr[index];
+ for(index in obj) result.push(obj[index]);
+ return result
+}
+
+// XXX remove
+utils.address_with_commas = function(street, city, state){
+ var address = [street, city, state]
+ var pretty_print_add = []
+ for(var i = 0; i < address.length; i += 1) {
+ if (address[i] !== '' && address[i] != null) pretty_print_add.push(address[i])
+ }
+ return pretty_print_add.join(', ')
+}
+
+utils.pretty_phone = function(phone){
+ if(!phone) {return false}
+
+ // first remove any non-digit characters globally
+ // and get length of phone number
+ var clean = String(phone).replace(/\D/g, '')
+ var len = clean.length
+
+ var format = "(NNN) NNN-NNNN"
+
+ // then format based on length
+ if(len === 10) {
+ return phoneFormatter.format(clean, format)
+ }
+ if(len > 10) {
+ var first = clean.substring(0, len - 10)
+ var last10 = clean.substring(len - 10)
+ return `+${first} ${phoneFormatter.format(last10, format)}`
+ }
+
+ // if number is less than 10, don't apply any formatting
+ // and just return it
+ return clean
+}
+
diff --git a/app/javascript/legacy/common/vendor/Chart.min.js b/app/javascript/legacy/common/vendor/Chart.min.js
new file mode 100755
index 00000000..27b08032
--- /dev/null
+++ b/app/javascript/legacy/common/vendor/Chart.min.js
@@ -0,0 +1,3476 @@
+// License: LGPL-3.0-or-later
+/*!
+ * Chart.js
+ * http://chartjs.org/
+ * Version: 1.0.2
+ *
+ * Copyright 2015 Nick Downie
+ * Released under the MIT license
+ * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
+ */
+
+
+(function(){
+
+ "use strict";
+
+ //Declare root variable - window in the browser, global on the server
+ var root = this;
+ var previous = root.Chart;
+
+ //Occupy the global variable of Chart, and create a simple base class
+ var Chart = function(context){
+ var chart = this;
+ this.canvas = context.canvas;
+
+ this.ctx = context;
+
+ //Variables global to the chart
+ var computeDimension = function(element,dimension)
+ {
+ if (element['offset'+dimension])
+ {
+ return element['offset'+dimension];
+ }
+ else
+ {
+ return document.defaultView.getComputedStyle(element).getPropertyValue(dimension);
+ }
+ }
+
+ var width = this.width = computeDimension(context.canvas,'Width');
+ var height = this.height = computeDimension(context.canvas,'Height');
+
+ // Firefox requires this to work correctly
+ context.canvas.width = width;
+ context.canvas.height = height;
+
+ var width = this.width = context.canvas.width;
+ var height = this.height = context.canvas.height;
+ this.aspectRatio = this.width / this.height;
+ //High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
+ helpers.retinaScale(this);
+
+ return this;
+ };
+ //Globally expose the defaults to allow for user updating/changing
+ Chart.defaults = {
+ global: {
+ // Boolean - Whether to animate the chart
+ animation: true,
+
+ // Number - Number of animation steps
+ animationSteps: 60,
+
+ // String - Animation easing effect
+ animationEasing: "easeOutQuart",
+
+ // Boolean - If we should show the scale at all
+ showScale: true,
+
+ // Boolean - If we want to override with a hard coded scale
+ scaleOverride: false,
+
+ // ** Required if scaleOverride is true **
+ // Number - The number of steps in a hard coded scale
+ scaleSteps: null,
+ // Number - The value jump in the hard coded scale
+ scaleStepWidth: null,
+ // Number - The scale starting value
+ scaleStartValue: null,
+
+ // String - Colour of the scale line
+ scaleLineColor: "rgba(0,0,0,.1)",
+
+ // Number - Pixel width of the scale line
+ scaleLineWidth: 1,
+
+ // Boolean - Whether to show labels on the scale
+ scaleShowLabels: true,
+
+ // Interpolated JS string - can access value
+ scaleLabel: "<%=value%>",
+
+ // Boolean - Whether the scale should stick to integers, and not show any floats even if drawing space is there
+ scaleIntegersOnly: true,
+
+ // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
+ scaleBeginAtZero: false,
+
+ // String - Scale label font declaration for the scale label
+ scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+
+ // Number - Scale label font size in pixels
+ scaleFontSize: 12,
+
+ // String - Scale label font weight style
+ scaleFontStyle: "normal",
+
+ // String - Scale label font colour
+ scaleFontColor: "#666",
+
+ // Boolean - whether or not the chart should be responsive and resize when the browser does.
+ responsive: false,
+
+ // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
+ maintainAspectRatio: true,
+
+ // Boolean - Determines whether to draw tooltips on the canvas or not - attaches events to touchmove & mousemove
+ showTooltips: true,
+
+ // Boolean - Determines whether to draw built-in tooltip or call custom tooltip function
+ customTooltips: false,
+
+ // Array - Array of string names to attach tooltip events
+ tooltipEvents: ["mousemove", "touchstart", "touchmove", "mouseout"],
+
+ // String - Tooltip background colour
+ tooltipFillColor: "rgba(0,0,0,0.8)",
+
+ // String - Tooltip label font declaration for the scale label
+ tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+
+ // Number - Tooltip label font size in pixels
+ tooltipFontSize: 14,
+
+ // String - Tooltip font weight style
+ tooltipFontStyle: "normal",
+
+ // String - Tooltip label font colour
+ tooltipFontColor: "#fff",
+
+ // String - Tooltip title font declaration for the scale label
+ tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+
+ // Number - Tooltip title font size in pixels
+ tooltipTitleFontSize: 14,
+
+ // String - Tooltip title font weight style
+ tooltipTitleFontStyle: "bold",
+
+ // String - Tooltip title font colour
+ tooltipTitleFontColor: "#fff",
+
+ // Number - pixel width of padding around tooltip text
+ tooltipYPadding: 6,
+
+ // Number - pixel width of padding around tooltip text
+ tooltipXPadding: 6,
+
+ // Number - Size of the caret on the tooltip
+ tooltipCaretSize: 8,
+
+ // Number - Pixel radius of the tooltip border
+ tooltipCornerRadius: 6,
+
+ // Number - Pixel offset from point x to tooltip edge
+ tooltipXOffset: 10,
+
+ // String - Template string for single tooltips
+ tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
+
+ // String - Template string for single tooltips
+ multiTooltipTemplate: "<%= value %>",
+
+ // String - Colour behind the legend colour block
+ multiTooltipKeyBackground: '#fff',
+
+ // Function - Will fire on animation progression.
+ onAnimationProgress: function(){},
+
+ // Function - Will fire on animation completion.
+ onAnimationComplete: function(){}
+
+ }
+ };
+
+ //Create a dictionary of chart types, to allow for extension of existing types
+ Chart.types = {};
+
+ //Global Chart helpers object for utility methods and classes
+ var helpers = Chart.helpers = {};
+
+ //-- Basic js utility methods
+ var each = helpers.each = function(loopable,callback,self){
+ var additionalArgs = Array.prototype.slice.call(arguments, 3);
+ // Check to see if null or undefined firstly.
+ if (loopable){
+ if (loopable.length === +loopable.length){
+ var i;
+ for (i=0; i= 0; i--) {
+ var currentItem = arrayToSearch[i];
+ if (filterCallback(currentItem)){
+ return currentItem;
+ }
+ }
+ },
+ inherits = helpers.inherits = function(extensions){
+ //Basic javascript inheritance based on the model created in Backbone.js
+ var parent = this;
+ var ChartElement = (extensions && extensions.hasOwnProperty("constructor")) ? extensions.constructor : function(){ return parent.apply(this, arguments); };
+
+ var Surrogate = function(){ this.constructor = ChartElement;};
+ Surrogate.prototype = parent.prototype;
+ ChartElement.prototype = new Surrogate();
+
+ ChartElement.extend = inherits;
+
+ if (extensions) extend(ChartElement.prototype, extensions);
+
+ ChartElement.__super__ = parent.prototype;
+
+ return ChartElement;
+ },
+ noop = helpers.noop = function(){},
+ uid = helpers.uid = (function(){
+ var id=0;
+ return function(){
+ return "chart-" + id++;
+ };
+ })(),
+ warn = helpers.warn = function(str){
+ //Method for warning of errors
+ if (window.console && typeof window.console.warn == "function") console.warn(str);
+ },
+ amd = helpers.amd = (typeof define == 'function' && define.amd),
+ //-- Math methods
+ isNumber = helpers.isNumber = function(n){
+ return !isNaN(parseFloat(n)) && isFinite(n);
+ },
+ max = helpers.max = function(array){
+ return Math.max.apply( Math, array );
+ },
+ min = helpers.min = function(array){
+ return Math.min.apply( Math, array );
+ },
+ cap = helpers.cap = function(valueToCap,maxValue,minValue){
+ if(isNumber(maxValue)) {
+ if( valueToCap > maxValue ) {
+ return maxValue;
+ }
+ }
+ else if(isNumber(minValue)){
+ if ( valueToCap < minValue ){
+ return minValue;
+ }
+ }
+ return valueToCap;
+ },
+ getDecimalPlaces = helpers.getDecimalPlaces = function(num){
+ if (num%1!==0 && isNumber(num)){
+ return num.toString().split(".")[1].length;
+ }
+ else {
+ return 0;
+ }
+ },
+ toRadians = helpers.radians = function(degrees){
+ return degrees * (Math.PI/180);
+ },
+ // Gets the angle from vertical upright to the point about a centre.
+ getAngleFromPoint = helpers.getAngleFromPoint = function(centrePoint, anglePoint){
+ var distanceFromXCenter = anglePoint.x - centrePoint.x,
+ distanceFromYCenter = anglePoint.y - centrePoint.y,
+ radialDistanceFromCenter = Math.sqrt( distanceFromXCenter * distanceFromXCenter + distanceFromYCenter * distanceFromYCenter);
+
+
+ var angle = Math.PI * 2 + Math.atan2(distanceFromYCenter, distanceFromXCenter);
+
+ //If the segment is in the top left quadrant, we need to add another rotation to the angle
+ if (distanceFromXCenter < 0 && distanceFromYCenter < 0){
+ angle += Math.PI*2;
+ }
+
+ return {
+ angle: angle,
+ distance: radialDistanceFromCenter
+ };
+ },
+ aliasPixel = helpers.aliasPixel = function(pixelWidth){
+ return (pixelWidth % 2 === 0) ? 0 : 0.5;
+ },
+ splineCurve = helpers.splineCurve = function(FirstPoint,MiddlePoint,AfterPoint,t){
+ //Props to Rob Spencer at scaled innovation for his post on splining between points
+ //http://scaledinnovation.com/analytics/splines/aboutSplines.html
+ var d01=Math.sqrt(Math.pow(MiddlePoint.x-FirstPoint.x,2)+Math.pow(MiddlePoint.y-FirstPoint.y,2)),
+ d12=Math.sqrt(Math.pow(AfterPoint.x-MiddlePoint.x,2)+Math.pow(AfterPoint.y-MiddlePoint.y,2)),
+ fa=t*d01/(d01+d12),// scaling factor for triangle Ta
+ fb=t*d12/(d01+d12);
+ return {
+ inner : {
+ x : MiddlePoint.x-fa*(AfterPoint.x-FirstPoint.x),
+ y : MiddlePoint.y-fa*(AfterPoint.y-FirstPoint.y)
+ },
+ outer : {
+ x: MiddlePoint.x+fb*(AfterPoint.x-FirstPoint.x),
+ y : MiddlePoint.y+fb*(AfterPoint.y-FirstPoint.y)
+ }
+ };
+ },
+ calculateOrderOfMagnitude = helpers.calculateOrderOfMagnitude = function(val){
+ return Math.floor(Math.log(val) / Math.LN10);
+ },
+ calculateScaleRange = helpers.calculateScaleRange = function(valuesArray, drawingSize, textSize, startFromZero, integersOnly){
+
+ //Set a minimum step of two - a point at the top of the graph, and a point at the base
+ var minSteps = 2,
+ maxSteps = Math.floor(drawingSize/(textSize * 1.5)),
+ skipFitting = (minSteps >= maxSteps);
+
+ var maxValue = max(valuesArray),
+ minValue = min(valuesArray);
+
+ // We need some degree of seperation here to calculate the scales if all the values are the same
+ // Adding/minusing 0.5 will give us a range of 1.
+ if (maxValue === minValue){
+ maxValue += 0.5;
+ // So we don't end up with a graph with a negative start value if we've said always start from zero
+ if (minValue >= 0.5 && !startFromZero){
+ minValue -= 0.5;
+ }
+ else{
+ // Make up a whole number above the values
+ maxValue += 0.5;
+ }
+ }
+
+ var valueRange = Math.abs(maxValue - minValue),
+ rangeOrderOfMagnitude = calculateOrderOfMagnitude(valueRange),
+ graphMax = Math.ceil(maxValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude),
+ graphMin = (startFromZero) ? 0 : Math.floor(minValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude),
+ graphRange = graphMax - graphMin,
+ stepValue = Math.pow(10, rangeOrderOfMagnitude),
+ numberOfSteps = Math.round(graphRange / stepValue);
+
+ //If we have more space on the graph we'll use it to give more definition to the data
+ while((numberOfSteps > maxSteps || (numberOfSteps * 2) < maxSteps) && !skipFitting) {
+ if(numberOfSteps > maxSteps){
+ stepValue *=2;
+ numberOfSteps = Math.round(graphRange/stepValue);
+ // Don't ever deal with a decimal number of steps - cancel fitting and just use the minimum number of steps.
+ if (numberOfSteps % 1 !== 0){
+ skipFitting = true;
+ }
+ }
+ //We can fit in double the amount of scale points on the scale
+ else{
+ //If user has declared ints only, and the step value isn't a decimal
+ if (integersOnly && rangeOrderOfMagnitude >= 0){
+ //If the user has said integers only, we need to check that making the scale more granular wouldn't make it a float
+ if(stepValue/2 % 1 === 0){
+ stepValue /=2;
+ numberOfSteps = Math.round(graphRange/stepValue);
+ }
+ //If it would make it a float break out of the loop
+ else{
+ break;
+ }
+ }
+ //If the scale doesn't have to be an int, make the scale more granular anyway.
+ else{
+ stepValue /=2;
+ numberOfSteps = Math.round(graphRange/stepValue);
+ }
+
+ }
+ }
+
+ if (skipFitting){
+ numberOfSteps = minSteps;
+ stepValue = graphRange / numberOfSteps;
+ }
+
+ return {
+ steps : numberOfSteps,
+ stepValue : stepValue,
+ min : graphMin,
+ max : graphMin + (numberOfSteps * stepValue)
+ };
+
+ },
+ /* jshint ignore:start */
+ // Blows up jshint errors based on the new Function constructor
+ //Templating methods
+ //Javascript micro templating by John Resig - source at http://ejohn.org/blog/javascript-micro-templating/
+ template = helpers.template = function(templateString, valuesObject){
+
+ // If templateString is function rather than string-template - call the function for valuesObject
+
+ if(templateString instanceof Function){
+ return templateString(valuesObject);
+ }
+
+ var cache = {};
+ function tmpl(str, data){
+ // Figure out if we're getting a template, or if we need to
+ // load the template - and be sure to cache the result.
+ var fn = !/\W/.test(str) ?
+ cache[str] = cache[str] :
+
+ // Generate a reusable function that will serve as a template
+ // generator (and which will be cached).
+ new Function("obj",
+ "var p=[],print=function(){p.push.apply(p,arguments);};" +
+
+ // Introduce the data as local variables using with(){}
+ "with(obj){p.push('" +
+
+ // Convert the template into pure JavaScript
+ str
+ .replace(/[\r\t\n]/g, " ")
+ .split("<%").join("\t")
+ .replace(/((^|%>)[^\t]*)'/g, "$1\r")
+ .replace(/\t=(.*?)%>/g, "',$1,'")
+ .split("\t").join("');")
+ .split("%>").join("p.push('")
+ .split("\r").join("\\'") +
+ "');}return p.join('');"
+ );
+
+ // Provide some basic currying to the user
+ return data ? fn( data ) : fn;
+ }
+ return tmpl(templateString,valuesObject);
+ },
+ /* jshint ignore:end */
+ generateLabels = helpers.generateLabels = function(templateString,numberOfSteps,graphMin,stepValue){
+ var labelsArray = new Array(numberOfSteps);
+ if (labelTemplateString){
+ each(labelsArray,function(val,index){
+ labelsArray[index] = template(templateString,{value: (graphMin + (stepValue*(index+1)))});
+ });
+ }
+ return labelsArray;
+ },
+ //--Animation methods
+ //Easing functions adapted from Robert Penner's easing equations
+ //http://www.robertpenner.com/easing/
+ easingEffects = helpers.easingEffects = {
+ linear: function (t) {
+ return t;
+ },
+ easeInQuad: function (t) {
+ return t * t;
+ },
+ easeOutQuad: function (t) {
+ return -1 * t * (t - 2);
+ },
+ easeInOutQuad: function (t) {
+ if ((t /= 1 / 2) < 1) return 1 / 2 * t * t;
+ return -1 / 2 * ((--t) * (t - 2) - 1);
+ },
+ easeInCubic: function (t) {
+ return t * t * t;
+ },
+ easeOutCubic: function (t) {
+ return 1 * ((t = t / 1 - 1) * t * t + 1);
+ },
+ easeInOutCubic: function (t) {
+ if ((t /= 1 / 2) < 1) return 1 / 2 * t * t * t;
+ return 1 / 2 * ((t -= 2) * t * t + 2);
+ },
+ easeInQuart: function (t) {
+ return t * t * t * t;
+ },
+ easeOutQuart: function (t) {
+ return -1 * ((t = t / 1 - 1) * t * t * t - 1);
+ },
+ easeInOutQuart: function (t) {
+ if ((t /= 1 / 2) < 1) return 1 / 2 * t * t * t * t;
+ return -1 / 2 * ((t -= 2) * t * t * t - 2);
+ },
+ easeInQuint: function (t) {
+ return 1 * (t /= 1) * t * t * t * t;
+ },
+ easeOutQuint: function (t) {
+ return 1 * ((t = t / 1 - 1) * t * t * t * t + 1);
+ },
+ easeInOutQuint: function (t) {
+ if ((t /= 1 / 2) < 1) return 1 / 2 * t * t * t * t * t;
+ return 1 / 2 * ((t -= 2) * t * t * t * t + 2);
+ },
+ easeInSine: function (t) {
+ return -1 * Math.cos(t / 1 * (Math.PI / 2)) + 1;
+ },
+ easeOutSine: function (t) {
+ return 1 * Math.sin(t / 1 * (Math.PI / 2));
+ },
+ easeInOutSine: function (t) {
+ return -1 / 2 * (Math.cos(Math.PI * t / 1) - 1);
+ },
+ easeInExpo: function (t) {
+ return (t === 0) ? 1 : 1 * Math.pow(2, 10 * (t / 1 - 1));
+ },
+ easeOutExpo: function (t) {
+ return (t === 1) ? 1 : 1 * (-Math.pow(2, -10 * t / 1) + 1);
+ },
+ easeInOutExpo: function (t) {
+ if (t === 0) return 0;
+ if (t === 1) return 1;
+ if ((t /= 1 / 2) < 1) return 1 / 2 * Math.pow(2, 10 * (t - 1));
+ return 1 / 2 * (-Math.pow(2, -10 * --t) + 2);
+ },
+ easeInCirc: function (t) {
+ if (t >= 1) return t;
+ return -1 * (Math.sqrt(1 - (t /= 1) * t) - 1);
+ },
+ easeOutCirc: function (t) {
+ return 1 * Math.sqrt(1 - (t = t / 1 - 1) * t);
+ },
+ easeInOutCirc: function (t) {
+ if ((t /= 1 / 2) < 1) return -1 / 2 * (Math.sqrt(1 - t * t) - 1);
+ return 1 / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1);
+ },
+ easeInElastic: function (t) {
+ var s = 1.70158;
+ var p = 0;
+ var a = 1;
+ if (t === 0) return 0;
+ if ((t /= 1) == 1) return 1;
+ if (!p) p = 1 * 0.3;
+ if (a < Math.abs(1)) {
+ a = 1;
+ s = p / 4;
+ } else s = p / (2 * Math.PI) * Math.asin(1 / a);
+ return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p));
+ },
+ easeOutElastic: function (t) {
+ var s = 1.70158;
+ var p = 0;
+ var a = 1;
+ if (t === 0) return 0;
+ if ((t /= 1) == 1) return 1;
+ if (!p) p = 1 * 0.3;
+ if (a < Math.abs(1)) {
+ a = 1;
+ s = p / 4;
+ } else s = p / (2 * Math.PI) * Math.asin(1 / a);
+ return a * Math.pow(2, -10 * t) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) + 1;
+ },
+ easeInOutElastic: function (t) {
+ var s = 1.70158;
+ var p = 0;
+ var a = 1;
+ if (t === 0) return 0;
+ if ((t /= 1 / 2) == 2) return 1;
+ if (!p) p = 1 * (0.3 * 1.5);
+ if (a < Math.abs(1)) {
+ a = 1;
+ s = p / 4;
+ } else s = p / (2 * Math.PI) * Math.asin(1 / a);
+ if (t < 1) return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p));
+ return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) * 0.5 + 1;
+ },
+ easeInBack: function (t) {
+ var s = 1.70158;
+ return 1 * (t /= 1) * t * ((s + 1) * t - s);
+ },
+ easeOutBack: function (t) {
+ var s = 1.70158;
+ return 1 * ((t = t / 1 - 1) * t * ((s + 1) * t + s) + 1);
+ },
+ easeInOutBack: function (t) {
+ var s = 1.70158;
+ if ((t /= 1 / 2) < 1) return 1 / 2 * (t * t * (((s *= (1.525)) + 1) * t - s));
+ return 1 / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2);
+ },
+ easeInBounce: function (t) {
+ return 1 - easingEffects.easeOutBounce(1 - t);
+ },
+ easeOutBounce: function (t) {
+ if ((t /= 1) < (1 / 2.75)) {
+ return 1 * (7.5625 * t * t);
+ } else if (t < (2 / 2.75)) {
+ return 1 * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75);
+ } else if (t < (2.5 / 2.75)) {
+ return 1 * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375);
+ } else {
+ return 1 * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375);
+ }
+ },
+ easeInOutBounce: function (t) {
+ if (t < 1 / 2) return easingEffects.easeInBounce(t * 2) * 0.5;
+ return easingEffects.easeOutBounce(t * 2 - 1) * 0.5 + 1 * 0.5;
+ }
+ },
+ //Request animation polyfill - http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
+ requestAnimFrame = helpers.requestAnimFrame = (function(){
+ return window.requestAnimationFrame ||
+ window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.oRequestAnimationFrame ||
+ window.msRequestAnimationFrame ||
+ function(callback) {
+ return window.setTimeout(callback, 1000 / 60);
+ };
+ })(),
+ cancelAnimFrame = helpers.cancelAnimFrame = (function(){
+ return window.cancelAnimationFrame ||
+ window.webkitCancelAnimationFrame ||
+ window.mozCancelAnimationFrame ||
+ window.oCancelAnimationFrame ||
+ window.msCancelAnimationFrame ||
+ function(callback) {
+ return window.clearTimeout(callback, 1000 / 60);
+ };
+ })(),
+ animationLoop = helpers.animationLoop = function(callback,totalSteps,easingString,onProgress,onComplete,chartInstance){
+
+ var currentStep = 0,
+ easingFunction = easingEffects[easingString] || easingEffects.linear;
+
+ var animationFrame = function(){
+ currentStep++;
+ var stepDecimal = currentStep/totalSteps;
+ var easeDecimal = easingFunction(stepDecimal);
+
+ callback.call(chartInstance,easeDecimal,stepDecimal, currentStep);
+ onProgress.call(chartInstance,easeDecimal,stepDecimal);
+ if (currentStep < totalSteps){
+ chartInstance.animationFrame = requestAnimFrame(animationFrame);
+ } else{
+ onComplete.apply(chartInstance);
+ }
+ };
+ requestAnimFrame(animationFrame);
+ },
+ //-- DOM methods
+ getRelativePosition = helpers.getRelativePosition = function(evt){
+ var mouseX, mouseY;
+ var e = evt.originalEvent || evt,
+ canvas = evt.currentTarget || evt.srcElement,
+ boundingRect = canvas.getBoundingClientRect();
+
+ if (e.touches){
+ mouseX = e.touches[0].clientX - boundingRect.left;
+ mouseY = e.touches[0].clientY - boundingRect.top;
+
+ }
+ else{
+ mouseX = e.clientX - boundingRect.left;
+ mouseY = e.clientY - boundingRect.top;
+ }
+
+ return {
+ x : mouseX,
+ y : mouseY
+ };
+
+ },
+ addEvent = helpers.addEvent = function(node,eventType,method){
+ if (node.addEventListener){
+ node.addEventListener(eventType,method);
+ } else if (node.attachEvent){
+ node.attachEvent("on"+eventType, method);
+ } else {
+ node["on"+eventType] = method;
+ }
+ },
+ removeEvent = helpers.removeEvent = function(node, eventType, handler){
+ if (node.removeEventListener){
+ node.removeEventListener(eventType, handler, false);
+ } else if (node.detachEvent){
+ node.detachEvent("on"+eventType,handler);
+ } else{
+ node["on" + eventType] = noop;
+ }
+ },
+ bindEvents = helpers.bindEvents = function(chartInstance, arrayOfEvents, handler){
+ // Create the events object if it's not already present
+ if (!chartInstance.events) chartInstance.events = {};
+
+ each(arrayOfEvents,function(eventName){
+ chartInstance.events[eventName] = function(){
+ handler.apply(chartInstance, arguments);
+ };
+ addEvent(chartInstance.chart.canvas,eventName,chartInstance.events[eventName]);
+ });
+ },
+ unbindEvents = helpers.unbindEvents = function (chartInstance, arrayOfEvents) {
+ each(arrayOfEvents, function(handler,eventName){
+ removeEvent(chartInstance.chart.canvas, eventName, handler);
+ });
+ },
+ getMaximumWidth = helpers.getMaximumWidth = function(domNode){
+ var container = domNode.parentNode;
+ // TODO = check cross browser stuff with this.
+ return container.clientWidth;
+ },
+ getMaximumHeight = helpers.getMaximumHeight = function(domNode){
+ var container = domNode.parentNode;
+ // TODO = check cross browser stuff with this.
+ return container.clientHeight;
+ },
+ getMaximumSize = helpers.getMaximumSize = helpers.getMaximumWidth, // legacy support
+ retinaScale = helpers.retinaScale = function(chart){
+ var ctx = chart.ctx,
+ width = chart.canvas.width,
+ height = chart.canvas.height;
+
+ if (window.devicePixelRatio) {
+ ctx.canvas.style.width = width + "px";
+ ctx.canvas.style.height = height + "px";
+ ctx.canvas.height = height * window.devicePixelRatio;
+ ctx.canvas.width = width * window.devicePixelRatio;
+ ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+ }
+ },
+ //-- Canvas methods
+ clear = helpers.clear = function(chart){
+ chart.ctx.clearRect(0,0,chart.width,chart.height);
+ },
+ fontString = helpers.fontString = function(pixelSize,fontStyle,fontFamily){
+ return fontStyle + " " + pixelSize+"px " + fontFamily;
+ },
+ longestText = helpers.longestText = function(ctx,font,arrayOfStrings){
+ ctx.font = font;
+ var longest = 0;
+ each(arrayOfStrings,function(string){
+ var textWidth = ctx.measureText(string).width;
+ longest = (textWidth > longest) ? textWidth : longest;
+ });
+ return longest;
+ },
+ drawRoundedRectangle = helpers.drawRoundedRectangle = function(ctx,x,y,width,height,radius){
+ ctx.beginPath();
+ ctx.moveTo(x + radius, y);
+ ctx.lineTo(x + width - radius, y);
+ ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+ ctx.lineTo(x + width, y + height - radius);
+ ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+ ctx.lineTo(x + radius, y + height);
+ ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+ ctx.lineTo(x, y + radius);
+ ctx.quadraticCurveTo(x, y, x + radius, y);
+ ctx.closePath();
+ };
+
+
+ //Store a reference to each instance - allowing us to globally resize chart instances on window resize.
+ //Destroy method on the chart will remove the instance of the chart from this reference.
+ Chart.instances = {};
+
+ Chart.Type = function(data,options,chart){
+ this.options = options;
+ this.chart = chart;
+ this.id = uid();
+ //Add the chart instance to the global namespace
+ Chart.instances[this.id] = this;
+
+ // Initialize is always called when a chart type is created
+ // By default it is a no op, but it should be extended
+ if (options.responsive){
+ this.resize();
+ }
+ this.initialize.call(this,data);
+ };
+
+ //Core methods that'll be a part of every chart type
+ extend(Chart.Type.prototype,{
+ initialize : function(){return this;},
+ clear : function(){
+ clear(this.chart);
+ return this;
+ },
+ stop : function(){
+ // Stops any current animation loop occuring
+ cancelAnimFrame(this.animationFrame);
+ return this;
+ },
+ resize : function(callback){
+ this.stop();
+ var canvas = this.chart.canvas,
+ newWidth = getMaximumWidth(this.chart.canvas),
+ newHeight = this.options.maintainAspectRatio ? newWidth / this.chart.aspectRatio : getMaximumHeight(this.chart.canvas);
+
+ canvas.width = this.chart.width = newWidth;
+ canvas.height = this.chart.height = newHeight;
+
+ retinaScale(this.chart);
+
+ if (typeof callback === "function"){
+ callback.apply(this, Array.prototype.slice.call(arguments, 1));
+ }
+ return this;
+ },
+ reflow : noop,
+ render : function(reflow){
+ if (reflow){
+ this.reflow();
+ }
+ if (this.options.animation && !reflow){
+ helpers.animationLoop(
+ this.draw,
+ this.options.animationSteps,
+ this.options.animationEasing,
+ this.options.onAnimationProgress,
+ this.options.onAnimationComplete,
+ this
+ );
+ }
+ else{
+ this.draw();
+ this.options.onAnimationComplete.call(this);
+ }
+ return this;
+ },
+ generateLegend : function(){
+ return template(this.options.legendTemplate,this);
+ },
+ destroy : function(){
+ this.clear();
+ unbindEvents(this, this.events);
+ var canvas = this.chart.canvas;
+
+ // Reset canvas height/width attributes starts a fresh with the canvas context
+ canvas.width = this.chart.width;
+ canvas.height = this.chart.height;
+
+ // < IE9 doesn't support removeProperty
+ if (canvas.style.removeProperty) {
+ canvas.style.removeProperty('width');
+ canvas.style.removeProperty('height');
+ } else {
+ canvas.style.removeAttribute('width');
+ canvas.style.removeAttribute('height');
+ }
+
+ delete Chart.instances[this.id];
+ },
+ showTooltip : function(ChartElements, forceRedraw){
+ // Only redraw the chart if we've actually changed what we're hovering on.
+ if (typeof this.activeElements === 'undefined') this.activeElements = [];
+
+ var isChanged = (function(Elements){
+ var changed = false;
+
+ if (Elements.length !== this.activeElements.length){
+ changed = true;
+ return changed;
+ }
+
+ each(Elements, function(element, index){
+ if (element !== this.activeElements[index]){
+ changed = true;
+ }
+ }, this);
+ return changed;
+ }).call(this, ChartElements);
+
+ if (!isChanged && !forceRedraw){
+ return;
+ }
+ else{
+ this.activeElements = ChartElements;
+ }
+ this.draw();
+ if(this.options.customTooltips){
+ this.options.customTooltips(false);
+ }
+ if (ChartElements.length > 0){
+ // If we have multiple datasets, show a MultiTooltip for all of the data points at that index
+ if (this.datasets && this.datasets.length > 1) {
+ var dataArray,
+ dataIndex;
+
+ for (var i = this.datasets.length - 1; i >= 0; i--) {
+ dataArray = this.datasets[i].points || this.datasets[i].bars || this.datasets[i].segments;
+ dataIndex = indexOf(dataArray, ChartElements[0]);
+ if (dataIndex !== -1){
+ break;
+ }
+ }
+ var tooltipLabels = [],
+ tooltipColors = [],
+ medianPosition = (function(index) {
+
+ // Get all the points at that particular index
+ var Elements = [],
+ dataCollection,
+ xPositions = [],
+ yPositions = [],
+ xMax,
+ yMax,
+ xMin,
+ yMin;
+ helpers.each(this.datasets, function(dataset){
+ dataCollection = dataset.points || dataset.bars || dataset.segments;
+ if (dataCollection[dataIndex] && dataCollection[dataIndex].hasValue()){
+ Elements.push(dataCollection[dataIndex]);
+ }
+ });
+
+ helpers.each(Elements, function(element) {
+ xPositions.push(element.x);
+ yPositions.push(element.y);
+
+
+ //Include any colour information about the element
+ tooltipLabels.push(helpers.template(this.options.multiTooltipTemplate, element));
+ tooltipColors.push({
+ fill: element._saved.fillColor || element.fillColor,
+ stroke: element._saved.strokeColor || element.strokeColor
+ });
+
+ }, this);
+
+ yMin = min(yPositions);
+ yMax = max(yPositions);
+
+ xMin = min(xPositions);
+ xMax = max(xPositions);
+
+ return {
+ x: (xMin > this.chart.width/2) ? xMin : xMax,
+ y: (yMin + yMax)/2
+ };
+ }).call(this, dataIndex);
+
+ new Chart.MultiTooltip({
+ x: medianPosition.x,
+ y: medianPosition.y,
+ xPadding: this.options.tooltipXPadding,
+ yPadding: this.options.tooltipYPadding,
+ xOffset: this.options.tooltipXOffset,
+ fillColor: this.options.tooltipFillColor,
+ textColor: this.options.tooltipFontColor,
+ fontFamily: this.options.tooltipFontFamily,
+ fontStyle: this.options.tooltipFontStyle,
+ fontSize: this.options.tooltipFontSize,
+ titleTextColor: this.options.tooltipTitleFontColor,
+ titleFontFamily: this.options.tooltipTitleFontFamily,
+ titleFontStyle: this.options.tooltipTitleFontStyle,
+ titleFontSize: this.options.tooltipTitleFontSize,
+ cornerRadius: this.options.tooltipCornerRadius,
+ labels: tooltipLabels,
+ legendColors: tooltipColors,
+ legendColorBackground : this.options.multiTooltipKeyBackground,
+ title: ChartElements[0].label,
+ chart: this.chart,
+ ctx: this.chart.ctx,
+ custom: this.options.customTooltips
+ }).draw();
+
+ } else {
+ each(ChartElements, function(Element) {
+ var tooltipPosition = Element.tooltipPosition();
+ new Chart.Tooltip({
+ x: Math.round(tooltipPosition.x),
+ y: Math.round(tooltipPosition.y),
+ xPadding: this.options.tooltipXPadding,
+ yPadding: this.options.tooltipYPadding,
+ fillColor: this.options.tooltipFillColor,
+ textColor: this.options.tooltipFontColor,
+ fontFamily: this.options.tooltipFontFamily,
+ fontStyle: this.options.tooltipFontStyle,
+ fontSize: this.options.tooltipFontSize,
+ caretHeight: this.options.tooltipCaretSize,
+ cornerRadius: this.options.tooltipCornerRadius,
+ text: template(this.options.tooltipTemplate, Element),
+ chart: this.chart,
+ custom: this.options.customTooltips
+ }).draw();
+ }, this);
+ }
+ }
+ return this;
+ },
+ toBase64Image : function(){
+ return this.chart.canvas.toDataURL.apply(this.chart.canvas, arguments);
+ }
+ });
+
+ Chart.Type.extend = function(extensions){
+
+ var parent = this;
+
+ var ChartType = function(){
+ return parent.apply(this,arguments);
+ };
+
+ //Copy the prototype object of the this class
+ ChartType.prototype = clone(parent.prototype);
+ //Now overwrite some of the properties in the base class with the new extensions
+ extend(ChartType.prototype, extensions);
+
+ ChartType.extend = Chart.Type.extend;
+
+ if (extensions.name || parent.prototype.name){
+
+ var chartName = extensions.name || parent.prototype.name;
+ //Assign any potential default values of the new chart type
+
+ //If none are defined, we'll use a clone of the chart type this is being extended from.
+ //I.e. if we extend a line chart, we'll use the defaults from the line chart if our new chart
+ //doesn't define some defaults of their own.
+
+ var baseDefaults = (Chart.defaults[parent.prototype.name]) ? clone(Chart.defaults[parent.prototype.name]) : {};
+
+ Chart.defaults[chartName] = extend(baseDefaults,extensions.defaults);
+
+ Chart.types[chartName] = ChartType;
+
+ //Register this new chart type in the Chart prototype
+ Chart.prototype[chartName] = function(data,options){
+ var config = merge(Chart.defaults.global, Chart.defaults[chartName], options || {});
+ return new ChartType(data,config,this);
+ };
+ } else{
+ warn("Name not provided for this chart, so it hasn't been registered");
+ }
+ return parent;
+ };
+
+ Chart.Element = function(configuration){
+ extend(this,configuration);
+ this.initialize.apply(this,arguments);
+ this.save();
+ };
+ extend(Chart.Element.prototype,{
+ initialize : function(){},
+ restore : function(props){
+ if (!props){
+ extend(this,this._saved);
+ } else {
+ each(props,function(key){
+ this[key] = this._saved[key];
+ },this);
+ }
+ return this;
+ },
+ save : function(){
+ this._saved = clone(this);
+ delete this._saved._saved;
+ return this;
+ },
+ update : function(newProps){
+ each(newProps,function(value,key){
+ this._saved[key] = this[key];
+ this[key] = value;
+ },this);
+ return this;
+ },
+ transition : function(props,ease){
+ each(props,function(value,key){
+ this[key] = ((value - this._saved[key]) * ease) + this._saved[key];
+ },this);
+ return this;
+ },
+ tooltipPosition : function(){
+ return {
+ x : this.x,
+ y : this.y
+ };
+ },
+ hasValue: function(){
+ return isNumber(this.value);
+ }
+ });
+
+ Chart.Element.extend = inherits;
+
+
+ Chart.Point = Chart.Element.extend({
+ display: true,
+ inRange: function(chartX,chartY){
+ var hitDetectionRange = this.hitDetectionRadius + this.radius;
+ return ((Math.pow(chartX-this.x, 2)+Math.pow(chartY-this.y, 2)) < Math.pow(hitDetectionRange,2));
+ },
+ draw : function(){
+ if (this.display){
+ var ctx = this.ctx;
+ ctx.beginPath();
+
+ ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
+ ctx.closePath();
+
+ ctx.strokeStyle = this.strokeColor;
+ ctx.lineWidth = this.strokeWidth;
+
+ ctx.fillStyle = this.fillColor;
+
+ ctx.fill();
+ ctx.stroke();
+ }
+
+
+ //Quick debug for bezier curve splining
+ //Highlights control points and the line between them.
+ //Handy for dev - stripped in the min version.
+
+ // ctx.save();
+ // ctx.fillStyle = "black";
+ // ctx.strokeStyle = "black"
+ // ctx.beginPath();
+ // ctx.arc(this.controlPoints.inner.x,this.controlPoints.inner.y, 2, 0, Math.PI*2);
+ // ctx.fill();
+
+ // ctx.beginPath();
+ // ctx.arc(this.controlPoints.outer.x,this.controlPoints.outer.y, 2, 0, Math.PI*2);
+ // ctx.fill();
+
+ // ctx.moveTo(this.controlPoints.inner.x,this.controlPoints.inner.y);
+ // ctx.lineTo(this.x, this.y);
+ // ctx.lineTo(this.controlPoints.outer.x,this.controlPoints.outer.y);
+ // ctx.stroke();
+
+ // ctx.restore();
+
+
+
+ }
+ });
+
+ Chart.Arc = Chart.Element.extend({
+ inRange : function(chartX,chartY){
+
+ var pointRelativePosition = helpers.getAngleFromPoint(this, {
+ x: chartX,
+ y: chartY
+ });
+
+ //Check if within the range of the open/close angle
+ var betweenAngles = (pointRelativePosition.angle >= this.startAngle && pointRelativePosition.angle <= this.endAngle),
+ withinRadius = (pointRelativePosition.distance >= this.innerRadius && pointRelativePosition.distance <= this.outerRadius);
+
+ return (betweenAngles && withinRadius);
+ //Ensure within the outside of the arc centre, but inside arc outer
+ },
+ tooltipPosition : function(){
+ var centreAngle = this.startAngle + ((this.endAngle - this.startAngle) / 2),
+ rangeFromCentre = (this.outerRadius - this.innerRadius) / 2 + this.innerRadius;
+ return {
+ x : this.x + (Math.cos(centreAngle) * rangeFromCentre),
+ y : this.y + (Math.sin(centreAngle) * rangeFromCentre)
+ };
+ },
+ draw : function(animationPercent){
+
+ var easingDecimal = animationPercent || 1;
+
+ var ctx = this.ctx;
+
+ ctx.beginPath();
+
+ ctx.arc(this.x, this.y, this.outerRadius, this.startAngle, this.endAngle);
+
+ ctx.arc(this.x, this.y, this.innerRadius, this.endAngle, this.startAngle, true);
+
+ ctx.closePath();
+ ctx.strokeStyle = this.strokeColor;
+ ctx.lineWidth = this.strokeWidth;
+
+ ctx.fillStyle = this.fillColor;
+
+ ctx.fill();
+ ctx.lineJoin = 'bevel';
+
+ if (this.showStroke){
+ ctx.stroke();
+ }
+ }
+ });
+
+ Chart.Rectangle = Chart.Element.extend({
+ draw : function(){
+ var ctx = this.ctx,
+ halfWidth = this.width/2,
+ leftX = this.x - halfWidth,
+ rightX = this.x + halfWidth,
+ top = this.base - (this.base - this.y),
+ halfStroke = this.strokeWidth / 2;
+
+ // Canvas doesn't allow us to stroke inside the width so we can
+ // adjust the sizes to fit if we're setting a stroke on the line
+ if (this.showStroke){
+ leftX += halfStroke;
+ rightX -= halfStroke;
+ top += halfStroke;
+ }
+
+ ctx.beginPath();
+
+ ctx.fillStyle = this.fillColor;
+ ctx.strokeStyle = this.strokeColor;
+ ctx.lineWidth = this.strokeWidth;
+
+ // It'd be nice to keep this class totally generic to any rectangle
+ // and simply specify which border to miss out.
+ ctx.moveTo(leftX, this.base);
+ ctx.lineTo(leftX, top);
+ ctx.lineTo(rightX, top);
+ ctx.lineTo(rightX, this.base);
+ ctx.fill();
+ if (this.showStroke){
+ ctx.stroke();
+ }
+ },
+ height : function(){
+ return this.base - this.y;
+ },
+ inRange : function(chartX,chartY){
+ return (chartX >= this.x - this.width/2 && chartX <= this.x + this.width/2) && (chartY >= this.y && chartY <= this.base);
+ }
+ });
+
+ Chart.Tooltip = Chart.Element.extend({
+ draw : function(){
+
+ var ctx = this.chart.ctx;
+
+ ctx.font = fontString(this.fontSize,this.fontStyle,this.fontFamily);
+
+ this.xAlign = "center";
+ this.yAlign = "above";
+
+ //Distance between the actual element.y position and the start of the tooltip caret
+ var caretPadding = this.caretPadding = 2;
+
+ var tooltipWidth = ctx.measureText(this.text).width + 2*this.xPadding,
+ tooltipRectHeight = this.fontSize + 2*this.yPadding,
+ tooltipHeight = tooltipRectHeight + this.caretHeight + caretPadding;
+
+ if (this.x + tooltipWidth/2 >this.chart.width){
+ this.xAlign = "left";
+ } else if (this.x - tooltipWidth/2 < 0){
+ this.xAlign = "right";
+ }
+
+ if (this.y - tooltipHeight < 0){
+ this.yAlign = "below";
+ }
+
+
+ var tooltipX = this.x - tooltipWidth/2,
+ tooltipY = this.y - tooltipHeight;
+
+ ctx.fillStyle = this.fillColor;
+
+ // Custom Tooltips
+ if(this.custom){
+ this.custom(this);
+ }
+ else{
+ switch(this.yAlign)
+ {
+ case "above":
+ //Draw a caret above the x/y
+ ctx.beginPath();
+ ctx.moveTo(this.x,this.y - caretPadding);
+ ctx.lineTo(this.x + this.caretHeight, this.y - (caretPadding + this.caretHeight));
+ ctx.lineTo(this.x - this.caretHeight, this.y - (caretPadding + this.caretHeight));
+ ctx.closePath();
+ ctx.fill();
+ break;
+ case "below":
+ tooltipY = this.y + caretPadding + this.caretHeight;
+ //Draw a caret below the x/y
+ ctx.beginPath();
+ ctx.moveTo(this.x, this.y + caretPadding);
+ ctx.lineTo(this.x + this.caretHeight, this.y + caretPadding + this.caretHeight);
+ ctx.lineTo(this.x - this.caretHeight, this.y + caretPadding + this.caretHeight);
+ ctx.closePath();
+ ctx.fill();
+ break;
+ }
+
+ switch(this.xAlign)
+ {
+ case "left":
+ tooltipX = this.x - tooltipWidth + (this.cornerRadius + this.caretHeight);
+ break;
+ case "right":
+ tooltipX = this.x - (this.cornerRadius + this.caretHeight);
+ break;
+ }
+
+ drawRoundedRectangle(ctx,tooltipX,tooltipY,tooltipWidth,tooltipRectHeight,this.cornerRadius);
+
+ ctx.fill();
+
+ ctx.fillStyle = this.textColor;
+ ctx.textAlign = "center";
+ ctx.textBaseline = "middle";
+ ctx.fillText(this.text, tooltipX + tooltipWidth/2, tooltipY + tooltipRectHeight/2);
+ }
+ }
+ });
+
+ Chart.MultiTooltip = Chart.Element.extend({
+ initialize : function(){
+ this.font = fontString(this.fontSize,this.fontStyle,this.fontFamily);
+
+ this.titleFont = fontString(this.titleFontSize,this.titleFontStyle,this.titleFontFamily);
+
+ this.height = (this.labels.length * this.fontSize) + ((this.labels.length-1) * (this.fontSize/2)) + (this.yPadding*2) + this.titleFontSize *1.5;
+
+ this.ctx.font = this.titleFont;
+
+ var titleWidth = this.ctx.measureText(this.title).width,
+ //Label has a legend square as well so account for this.
+ labelWidth = longestText(this.ctx,this.font,this.labels) + this.fontSize + 3,
+ longestTextWidth = max([labelWidth,titleWidth]);
+
+ this.width = longestTextWidth + (this.xPadding*2);
+
+
+ var halfHeight = this.height/2;
+
+ //Check to ensure the height will fit on the canvas
+ if (this.y - halfHeight < 0 ){
+ this.y = halfHeight;
+ } else if (this.y + halfHeight > this.chart.height){
+ this.y = this.chart.height - halfHeight;
+ }
+
+ //Decide whether to align left or right based on position on canvas
+ if (this.x > this.chart.width/2){
+ this.x -= this.xOffset + this.width;
+ } else {
+ this.x += this.xOffset;
+ }
+
+
+ },
+ getLineHeight : function(index){
+ var baseLineHeight = this.y - (this.height/2) + this.yPadding,
+ afterTitleIndex = index-1;
+
+ //If the index is zero, we're getting the title
+ if (index === 0){
+ return baseLineHeight + this.titleFontSize/2;
+ } else{
+ return baseLineHeight + ((this.fontSize*1.5*afterTitleIndex) + this.fontSize/2) + this.titleFontSize * 1.5;
+ }
+
+ },
+ draw : function(){
+ // Custom Tooltips
+ if(this.custom){
+ this.custom(this);
+ }
+ else{
+ drawRoundedRectangle(this.ctx,this.x,this.y - this.height/2,this.width,this.height,this.cornerRadius);
+ var ctx = this.ctx;
+ ctx.fillStyle = this.fillColor;
+ ctx.fill();
+ ctx.closePath();
+
+ ctx.textAlign = "left";
+ ctx.textBaseline = "middle";
+ ctx.fillStyle = this.titleTextColor;
+ ctx.font = this.titleFont;
+
+ ctx.fillText(this.title,this.x + this.xPadding, this.getLineHeight(0));
+
+ ctx.font = this.font;
+ helpers.each(this.labels,function(label,index){
+ ctx.fillStyle = this.textColor;
+ ctx.fillText(label,this.x + this.xPadding + this.fontSize + 3, this.getLineHeight(index + 1));
+
+ //A bit gnarly, but clearing this rectangle breaks when using explorercanvas (clears whole canvas)
+ //ctx.clearRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
+ //Instead we'll make a white filled block to put the legendColour palette over.
+
+ ctx.fillStyle = this.legendColorBackground;
+ ctx.fillRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
+
+ ctx.fillStyle = this.legendColors[index].fill;
+ ctx.fillRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
+
+
+ },this);
+ }
+ }
+ });
+
+ Chart.Scale = Chart.Element.extend({
+ initialize : function(){
+ this.fit();
+ },
+ buildYLabels : function(){
+ this.yLabels = [];
+
+ var stepDecimalPlaces = getDecimalPlaces(this.stepValue);
+
+ for (var i=0; i<=this.steps; i++){
+ this.yLabels.push(template(this.templateString,{value:(this.min + (i * this.stepValue)).toFixed(stepDecimalPlaces)}));
+ }
+ this.yLabelWidth = (this.display && this.showLabels) ? longestText(this.ctx,this.font,this.yLabels) : 0;
+ },
+ addXLabel : function(label){
+ this.xLabels.push(label);
+ this.valuesCount++;
+ this.fit();
+ },
+ removeXLabel : function(){
+ this.xLabels.shift();
+ this.valuesCount--;
+ this.fit();
+ },
+ // Fitting loop to rotate x Labels and figure out what fits there, and also calculate how many Y steps to use
+ fit: function(){
+ // First we need the width of the yLabels, assuming the xLabels aren't rotated
+
+ // To do that we need the base line at the top and base of the chart, assuming there is no x label rotation
+ this.startPoint = (this.display) ? this.fontSize : 0;
+ this.endPoint = (this.display) ? this.height - (this.fontSize * 1.5) - 5 : this.height; // -5 to pad labels
+
+ // Apply padding settings to the start and end point.
+ this.startPoint += this.padding;
+ this.endPoint -= this.padding;
+
+ // Cache the starting height, so can determine if we need to recalculate the scale yAxis
+ var cachedHeight = this.endPoint - this.startPoint,
+ cachedYLabelWidth;
+
+ // Build the current yLabels so we have an idea of what size they'll be to start
+ /*
+ * This sets what is returned from calculateScaleRange as static properties of this class:
+ *
+ this.steps;
+ this.stepValue;
+ this.min;
+ this.max;
+ *
+ */
+ this.calculateYRange(cachedHeight);
+
+ // With these properties set we can now build the array of yLabels
+ // and also the width of the largest yLabel
+ this.buildYLabels();
+
+ this.calculateXLabelRotation();
+
+ while((cachedHeight > this.endPoint - this.startPoint)){
+ cachedHeight = this.endPoint - this.startPoint;
+ cachedYLabelWidth = this.yLabelWidth;
+
+ this.calculateYRange(cachedHeight);
+ this.buildYLabels();
+
+ // Only go through the xLabel loop again if the yLabel width has changed
+ if (cachedYLabelWidth < this.yLabelWidth){
+ this.calculateXLabelRotation();
+ }
+ }
+
+ },
+ calculateXLabelRotation : function(){
+ //Get the width of each grid by calculating the difference
+ //between x offsets between 0 and 1.
+
+ this.ctx.font = this.font;
+
+ var firstWidth = this.ctx.measureText(this.xLabels[0]).width,
+ lastWidth = this.ctx.measureText(this.xLabels[this.xLabels.length - 1]).width,
+ firstRotated,
+ lastRotated;
+
+
+ this.xScalePaddingRight = lastWidth/2 + 3;
+ this.xScalePaddingLeft = (firstWidth/2 > this.yLabelWidth + 10) ? firstWidth/2 : this.yLabelWidth + 10;
+
+ this.xLabelRotation = 0;
+ if (this.display){
+ var originalLabelWidth = longestText(this.ctx,this.font,this.xLabels),
+ cosRotation,
+ firstRotatedWidth;
+ this.xLabelWidth = originalLabelWidth;
+ //Allow 3 pixels x2 padding either side for label readability
+ var xGridWidth = Math.floor(this.calculateX(1) - this.calculateX(0)) - 6;
+
+ //Max label rotate should be 90 - also act as a loop counter
+ while ((this.xLabelWidth > xGridWidth && this.xLabelRotation === 0) || (this.xLabelWidth > xGridWidth && this.xLabelRotation <= 90 && this.xLabelRotation > 0)){
+ cosRotation = Math.cos(toRadians(this.xLabelRotation));
+
+ firstRotated = cosRotation * firstWidth;
+ lastRotated = cosRotation * lastWidth;
+
+ // We're right aligning the text now.
+ if (firstRotated + this.fontSize / 2 > this.yLabelWidth + 8){
+ this.xScalePaddingLeft = firstRotated + this.fontSize / 2;
+ }
+ this.xScalePaddingRight = this.fontSize/2;
+
+
+ this.xLabelRotation++;
+ this.xLabelWidth = cosRotation * originalLabelWidth;
+
+ }
+ if (this.xLabelRotation > 0){
+ this.endPoint -= Math.sin(toRadians(this.xLabelRotation))*originalLabelWidth + 3;
+ }
+ }
+ else{
+ this.xLabelWidth = 0;
+ this.xScalePaddingRight = this.padding;
+ this.xScalePaddingLeft = this.padding;
+ }
+
+ },
+ // Needs to be overidden in each Chart type
+ // Otherwise we need to pass all the data into the scale class
+ calculateYRange: noop,
+ drawingArea: function(){
+ return this.startPoint - this.endPoint;
+ },
+ calculateY : function(value){
+ var scalingFactor = this.drawingArea() / (this.min - this.max);
+ return this.endPoint - (scalingFactor * (value - this.min));
+ },
+ calculateX : function(index){
+ var isRotated = (this.xLabelRotation > 0),
+ // innerWidth = (this.offsetGridLines) ? this.width - offsetLeft - this.padding : this.width - (offsetLeft + halfLabelWidth * 2) - this.padding,
+ innerWidth = this.width - (this.xScalePaddingLeft + this.xScalePaddingRight),
+ valueWidth = innerWidth/Math.max((this.valuesCount - ((this.offsetGridLines) ? 0 : 1)), 1),
+ valueOffset = (valueWidth * index) + this.xScalePaddingLeft;
+
+ if (this.offsetGridLines){
+ valueOffset += (valueWidth/2);
+ }
+
+ return Math.round(valueOffset);
+ },
+ update : function(newProps){
+ helpers.extend(this, newProps);
+ this.fit();
+ },
+ draw : function(){
+ var ctx = this.ctx,
+ yLabelGap = (this.endPoint - this.startPoint) / this.steps,
+ xStart = Math.round(this.xScalePaddingLeft);
+ if (this.display){
+ ctx.fillStyle = this.textColor;
+ ctx.font = this.font;
+ each(this.yLabels,function(labelString,index){
+ var yLabelCenter = this.endPoint - (yLabelGap * index),
+ linePositionY = Math.round(yLabelCenter),
+ drawHorizontalLine = this.showHorizontalLines;
+
+ ctx.textAlign = "right";
+ ctx.textBaseline = "middle";
+ if (this.showLabels){
+ ctx.fillText(labelString,xStart - 10,yLabelCenter);
+ }
+
+ // This is X axis, so draw it
+ if (index === 0 && !drawHorizontalLine){
+ drawHorizontalLine = true;
+ }
+
+ if (drawHorizontalLine){
+ ctx.beginPath();
+ }
+
+ if (index > 0){
+ // This is a grid line in the centre, so drop that
+ ctx.lineWidth = this.gridLineWidth;
+ ctx.strokeStyle = this.gridLineColor;
+ } else {
+ // This is the first line on the scale
+ ctx.lineWidth = this.lineWidth;
+ ctx.strokeStyle = this.lineColor;
+ }
+
+ linePositionY += helpers.aliasPixel(ctx.lineWidth);
+
+ if(drawHorizontalLine){
+ ctx.moveTo(xStart, linePositionY);
+ ctx.lineTo(this.width, linePositionY);
+ ctx.stroke();
+ ctx.closePath();
+ }
+
+ ctx.lineWidth = this.lineWidth;
+ ctx.strokeStyle = this.lineColor;
+ ctx.beginPath();
+ ctx.moveTo(xStart - 5, linePositionY);
+ ctx.lineTo(xStart, linePositionY);
+ ctx.stroke();
+ ctx.closePath();
+
+ },this);
+
+ each(this.xLabels,function(label,index){
+ var xPos = this.calculateX(index) + aliasPixel(this.lineWidth),
+ // Check to see if line/bar here and decide where to place the line
+ linePos = this.calculateX(index - (this.offsetGridLines ? 0.5 : 0)) + aliasPixel(this.lineWidth),
+ isRotated = (this.xLabelRotation > 0),
+ drawVerticalLine = this.showVerticalLines;
+
+ // This is Y axis, so draw it
+ if (index === 0 && !drawVerticalLine){
+ drawVerticalLine = true;
+ }
+
+ if (drawVerticalLine){
+ ctx.beginPath();
+ }
+
+ if (index > 0){
+ // This is a grid line in the centre, so drop that
+ ctx.lineWidth = this.gridLineWidth;
+ ctx.strokeStyle = this.gridLineColor;
+ } else {
+ // This is the first line on the scale
+ ctx.lineWidth = this.lineWidth;
+ ctx.strokeStyle = this.lineColor;
+ }
+
+ if (drawVerticalLine){
+ ctx.moveTo(linePos,this.endPoint);
+ ctx.lineTo(linePos,this.startPoint - 3);
+ ctx.stroke();
+ ctx.closePath();
+ }
+
+
+ ctx.lineWidth = this.lineWidth;
+ ctx.strokeStyle = this.lineColor;
+
+
+ // Small lines at the bottom of the base grid line
+ ctx.beginPath();
+ ctx.moveTo(linePos,this.endPoint);
+ ctx.lineTo(linePos,this.endPoint + 5);
+ ctx.stroke();
+ ctx.closePath();
+
+ ctx.save();
+ ctx.translate(xPos,(isRotated) ? this.endPoint + 12 : this.endPoint + 8);
+ ctx.rotate(toRadians(this.xLabelRotation)*-1);
+ ctx.font = this.font;
+ ctx.textAlign = (isRotated) ? "right" : "center";
+ ctx.textBaseline = (isRotated) ? "middle" : "top";
+ ctx.fillText(label, 0, 0);
+ ctx.restore();
+ },this);
+
+ }
+ }
+
+ });
+
+ Chart.RadialScale = Chart.Element.extend({
+ initialize: function(){
+ this.size = min([this.height, this.width]);
+ this.drawingArea = (this.display) ? (this.size/2) - (this.fontSize/2 + this.backdropPaddingY) : (this.size/2);
+ },
+ calculateCenterOffset: function(value){
+ // Take into account half font size + the yPadding of the top value
+ var scalingFactor = this.drawingArea / (this.max - this.min);
+
+ return (value - this.min) * scalingFactor;
+ },
+ update : function(){
+ if (!this.lineArc){
+ this.setScaleSize();
+ } else {
+ this.drawingArea = (this.display) ? (this.size/2) - (this.fontSize/2 + this.backdropPaddingY) : (this.size/2);
+ }
+ this.buildYLabels();
+ },
+ buildYLabels: function(){
+ this.yLabels = [];
+
+ var stepDecimalPlaces = getDecimalPlaces(this.stepValue);
+
+ for (var i=0; i<=this.steps; i++){
+ this.yLabels.push(template(this.templateString,{value:(this.min + (i * this.stepValue)).toFixed(stepDecimalPlaces)}));
+ }
+ },
+ getCircumference : function(){
+ return ((Math.PI*2) / this.valuesCount);
+ },
+ setScaleSize: function(){
+ /*
+ * Right, this is really confusing and there is a lot of maths going on here
+ * The gist of the problem is here: https://gist.github.com/nnnick/696cc9c55f4b0beb8fe9
+ *
+ * Reaction: https://dl.dropboxusercontent.com/u/34601363/toomuchscience.gif
+ *
+ * Solution:
+ *
+ * We assume the radius of the polygon is half the size of the canvas at first
+ * at each index we check if the text overlaps.
+ *
+ * Where it does, we store that angle and that index.
+ *
+ * After finding the largest index and angle we calculate how much we need to remove
+ * from the shape radius to move the point inwards by that x.
+ *
+ * We average the left and right distances to get the maximum shape radius that can fit in the box
+ * along with labels.
+ *
+ * Once we have that, we can find the centre point for the chart, by taking the x text protrusion
+ * on each side, removing that from the size, halving it and adding the left x protrusion width.
+ *
+ * This will mean we have a shape fitted to the canvas, as large as it can be with the labels
+ * and position it in the most space efficient manner
+ *
+ * https://dl.dropboxusercontent.com/u/34601363/yeahscience.gif
+ */
+
+
+ // Get maximum radius of the polygon. Either half the height (minus the text width) or half the width.
+ // Use this to calculate the offset + change. - Make sure L/R protrusion is at least 0 to stop issues with centre points
+ var largestPossibleRadius = min([(this.height/2 - this.pointLabelFontSize - 5), this.width/2]),
+ pointPosition,
+ i,
+ textWidth,
+ halfTextWidth,
+ furthestRight = this.width,
+ furthestRightIndex,
+ furthestRightAngle,
+ furthestLeft = 0,
+ furthestLeftIndex,
+ furthestLeftAngle,
+ xProtrusionLeft,
+ xProtrusionRight,
+ radiusReductionRight,
+ radiusReductionLeft,
+ maxWidthRadius;
+ this.ctx.font = fontString(this.pointLabelFontSize,this.pointLabelFontStyle,this.pointLabelFontFamily);
+ for (i=0;i furthestRight) {
+ furthestRight = pointPosition.x + halfTextWidth;
+ furthestRightIndex = i;
+ }
+ if (pointPosition.x - halfTextWidth < furthestLeft) {
+ furthestLeft = pointPosition.x - halfTextWidth;
+ furthestLeftIndex = i;
+ }
+ }
+ else if (i < this.valuesCount/2) {
+ // Less than half the values means we'll left align the text
+ if (pointPosition.x + textWidth > furthestRight) {
+ furthestRight = pointPosition.x + textWidth;
+ furthestRightIndex = i;
+ }
+ }
+ else if (i > this.valuesCount/2){
+ // More than half the values means we'll right align the text
+ if (pointPosition.x - textWidth < furthestLeft) {
+ furthestLeft = pointPosition.x - textWidth;
+ furthestLeftIndex = i;
+ }
+ }
+ }
+
+ xProtrusionLeft = furthestLeft;
+
+ xProtrusionRight = Math.ceil(furthestRight - this.width);
+
+ furthestRightAngle = this.getIndexAngle(furthestRightIndex);
+
+ furthestLeftAngle = this.getIndexAngle(furthestLeftIndex);
+
+ radiusReductionRight = xProtrusionRight / Math.sin(furthestRightAngle + Math.PI/2);
+
+ radiusReductionLeft = xProtrusionLeft / Math.sin(furthestLeftAngle + Math.PI/2);
+
+ // Ensure we actually need to reduce the size of the chart
+ radiusReductionRight = (isNumber(radiusReductionRight)) ? radiusReductionRight : 0;
+ radiusReductionLeft = (isNumber(radiusReductionLeft)) ? radiusReductionLeft : 0;
+
+ this.drawingArea = largestPossibleRadius - (radiusReductionLeft + radiusReductionRight)/2;
+
+ //this.drawingArea = min([maxWidthRadius, (this.height - (2 * (this.pointLabelFontSize + 5)))/2])
+ this.setCenterPoint(radiusReductionLeft, radiusReductionRight);
+
+ },
+ setCenterPoint: function(leftMovement, rightMovement){
+
+ var maxRight = this.width - rightMovement - this.drawingArea,
+ maxLeft = leftMovement + this.drawingArea;
+
+ this.xCenter = (maxLeft + maxRight)/2;
+ // Always vertically in the centre as the text height doesn't change
+ this.yCenter = (this.height/2);
+ },
+
+ getIndexAngle : function(index){
+ var angleMultiplier = (Math.PI * 2) / this.valuesCount;
+ // Start from the top instead of right, so remove a quarter of the circle
+
+ return index * angleMultiplier - (Math.PI/2);
+ },
+ getPointPosition : function(index, distanceFromCenter){
+ var thisAngle = this.getIndexAngle(index);
+ return {
+ x : (Math.cos(thisAngle) * distanceFromCenter) + this.xCenter,
+ y : (Math.sin(thisAngle) * distanceFromCenter) + this.yCenter
+ };
+ },
+ draw: function(){
+ if (this.display){
+ var ctx = this.ctx;
+ each(this.yLabels, function(label, index){
+ // Don't draw a centre value
+ if (index > 0){
+ var yCenterOffset = index * (this.drawingArea/this.steps),
+ yHeight = this.yCenter - yCenterOffset,
+ pointPosition;
+
+ // Draw circular lines around the scale
+ if (this.lineWidth > 0){
+ ctx.strokeStyle = this.lineColor;
+ ctx.lineWidth = this.lineWidth;
+
+ if(this.lineArc){
+ ctx.beginPath();
+ ctx.arc(this.xCenter, this.yCenter, yCenterOffset, 0, Math.PI*2);
+ ctx.closePath();
+ ctx.stroke();
+ } else{
+ ctx.beginPath();
+ for (var i=0;i= 0; i--) {
+ if (this.angleLineWidth > 0){
+ var outerPosition = this.getPointPosition(i, this.calculateCenterOffset(this.max));
+ ctx.beginPath();
+ ctx.moveTo(this.xCenter, this.yCenter);
+ ctx.lineTo(outerPosition.x, outerPosition.y);
+ ctx.stroke();
+ ctx.closePath();
+ }
+ // Extra 3px out for some label spacing
+ var pointLabelPosition = this.getPointPosition(i, this.calculateCenterOffset(this.max) + 5);
+ ctx.font = fontString(this.pointLabelFontSize,this.pointLabelFontStyle,this.pointLabelFontFamily);
+ ctx.fillStyle = this.pointLabelFontColor;
+
+ var labelsCount = this.labels.length,
+ halfLabelsCount = this.labels.length/2,
+ quarterLabelsCount = halfLabelsCount/2,
+ upperHalf = (i < quarterLabelsCount || i > labelsCount - quarterLabelsCount),
+ exactQuarter = (i === quarterLabelsCount || i === labelsCount - quarterLabelsCount);
+ if (i === 0){
+ ctx.textAlign = 'center';
+ } else if(i === halfLabelsCount){
+ ctx.textAlign = 'center';
+ } else if (i < halfLabelsCount){
+ ctx.textAlign = 'left';
+ } else {
+ ctx.textAlign = 'right';
+ }
+
+ // Set the correct text baseline based on outer positioning
+ if (exactQuarter){
+ ctx.textBaseline = 'middle';
+ } else if (upperHalf){
+ ctx.textBaseline = 'bottom';
+ } else {
+ ctx.textBaseline = 'top';
+ }
+
+ ctx.fillText(this.labels[i], pointLabelPosition.x, pointLabelPosition.y);
+ }
+ }
+ }
+ }
+ });
+
+ // Attach global event to resize each chart instance when the browser resizes
+ helpers.addEvent(window, "resize", (function(){
+ // Basic debounce of resize function so it doesn't hurt performance when resizing browser.
+ var timeout;
+ return function(){
+ clearTimeout(timeout);
+ timeout = setTimeout(function(){
+ each(Chart.instances,function(instance){
+ // If the responsive flag is set in the chart instance config
+ // Cascade the resize event down to the chart.
+ if (instance.options.responsive){
+ instance.resize(instance.render, true);
+ }
+ });
+ }, 50);
+ };
+ })());
+
+
+ if (amd) {
+ define(function(){
+ return Chart;
+ });
+ } else if (typeof module === 'object' && module.exports) {
+ module.exports = Chart;
+ }
+
+ root.Chart = Chart;
+
+ Chart.noConflict = function(){
+ root.Chart = previous;
+ return Chart;
+ };
+
+}).call(window);
+
+(function(){
+ "use strict";
+
+ var root = this,
+ Chart = root.Chart,
+ helpers = Chart.helpers;
+
+
+ var defaultConfig = {
+ //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
+ scaleBeginAtZero : true,
+
+ //Boolean - Whether grid lines are shown across the chart
+ scaleShowGridLines : true,
+
+ //String - Colour of the grid lines
+ scaleGridLineColor : "rgba(0,0,0,.05)",
+
+ //Number - Width of the grid lines
+ scaleGridLineWidth : 1,
+
+ //Boolean - Whether to show horizontal lines (except X axis)
+ scaleShowHorizontalLines: true,
+
+ //Boolean - Whether to show vertical lines (except Y axis)
+ scaleShowVerticalLines: true,
+
+ //Boolean - If there is a stroke on each bar
+ barShowStroke : true,
+
+ //Number - Pixel width of the bar stroke
+ barStrokeWidth : 2,
+
+ //Number - Spacing between each of the X value sets
+ barValueSpacing : 5,
+
+ //Number - Spacing between data sets within X values
+ barDatasetSpacing : 1,
+
+ //String - A legend template
+ legendTemplate : "