houdini/client/js/nonprofits/button/appearance.js
Bradley M. Kuhn fc77ee76d6 Relicense Javascript code in accordance with project's new license
The primary license of the project is changing to:
  AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later

The Additional Permission is designed to permit publicly distributed
Javascript code to be relicensed under LGPL-3.0-or-later, but not server-side
Javascript code.  As such, we've relicensed here static Javscript files under
LGPL-3.0-or-later, and those that run as part of build and/or server side
under AGPL-3.0-or-later.

Note that in future, Javascript files may be updated to be stronger copyleft
license with the Additional Permission, particularly if they adapted to run
on server side and/or turned into templates.  Of course, we'd seek public
discussion with the contributor community about such changes.

This commit is one of the many steps to relicense the entire codebase.

Documentation granting permission for this relicensing (from all past
contributors who hold copyrights) is on file with Software Freedom
Conservancy, Inc.
2018-03-25 15:10:40 -04:00

94 lines
3.3 KiB
JavaScript

// License: LGPL-3.0-or-later
var flyd = require("flyd")
var h = require("virtual-dom/h")
var footer = require('./footer')
var radioAndLabelWrapper = require('../../components/radio-and-label-wrapper')
var appearanceStream = flyd.stream()
module.exports = {
root: root,
stream: appearanceStream
}
function root(state) {
return [
h('header.step-header', [
h('h4.step-title', 'Appearance'),
h('p', 'How would you like to accept donations?')
]),
h('div.step-inner', [
table(state),
customText(state),
footer.root('Next', 'designations')
])
]
}
function table(state) {
return h('table', [
h('tr', [defaultButton(), fixedButton()]),
h('tr', [embeddedButton(), imageButton(state)])
])
}
function contentWrapper(title, content) {
return [title, h('div.u-paddingTop--15', content)]
}
var color = app.nonprofit.brand_color ? app.nonprofit.brand_color : '#42B3DF'
var font = app.nonprofit.brand_font ? app.nonprofit.brand_font : 'inherit'
var buttonStyles = {background: color, 'font-family': font}
var namePrefix = 'settings.appearance.'
function defaultButton(){
var title = 'Default button'
var content = [ h('p.branded-donate-button', {style: buttonStyles}, 'Donate'),
brandedButtonMessage()]
function brandedButtonMessage(){
if(app.nonprofit.brand_color){return}
return h('p.u-paddingTop--15',
h('small', "To customize the color and font of your button, \
head over to your settings page and click on 'branding'")
)
}
return h('td', [radioAndLabelWrapper('radio-default', namePrefix + 'name', {'value': 'default', 'checked': 'checked'},
contentWrapper(title, content), appearanceStream)])
}
function fixedButton(){
var title = 'Fixed position button'
var content = [h('p.branded-donate-button.is-fixed', {style: buttonStyles}, 'Donate')]
return h('td', [radioAndLabelWrapper('radio-fixed', namePrefix + 'name', {'value': 'fixed'},
contentWrapper(title, content), appearanceStream)])
}
function embeddedButton(){
var title = 'Embed directly on page'
var content = [ h('img', {src: app.asset_path + "/graphics/mini-amount-step.png", title: title})]
return h('td', [radioAndLabelWrapper('radio-embedded', namePrefix + 'name', {'value': 'embedded'},
contentWrapper(title, content), appearanceStream)])
}
function imageButton(state){
var title = 'Custom image'
var defaultImg = app.asset_path + "/graphics/donate-elephant.png"
var imgUrl = state.settings.appearance.customImg ? state.settings.appearance.customImg : defaultImg
var content = [ h('img', {src: imgUrl, title: title}),
h('input', {type: 'text', name: namePrefix + 'customImg', placeholder: 'Add your image URL here', onkeyup: appearanceStream})]
return h('td', [radioAndLabelWrapper('radio-custom-image', namePrefix + 'name', {'value': 'custom image'},
contentWrapper(title, content), appearanceStream)])
}
function customText(state) {
var text = state.settings.appearance.customText ? state.settings.appearance.customText : 'Donate'
var title = 'Custom text'
var content = [
h('a.customText-text', text),
h('input', {type: 'text', name: namePrefix + 'customText', placeholder: 'Type here to change text', onkeyup: appearanceStream})
]
return h('section.customText-wrapper', [radioAndLabelWrapper('radio-custom-text', namePrefix + 'name', {'value': 'custom text'},
contentWrapper(title, content), appearanceStream)])
}