fc77ee76d6
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.
94 lines
3.3 KiB
JavaScript
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)])
|
|
}
|