@ -17,8 +17,8 @@ import {
import StillImage from 'soapbox/components/still_image' ;
import StillImage from 'soapbox/components/still_image' ;
import {
import {
Map as ImmutableMap ,
Map as ImmutableMap ,
List as ImmutableList ,
// List as ImmutableList,
getIn ,
// getIn,
} from 'immutable' ;
} from 'immutable' ;
import { postSoapbox } from 'soapbox/actions/soapbox' ;
import { postSoapbox } from 'soapbox/actions/soapbox' ;
@ -54,38 +54,38 @@ class ConfigSoapbox extends ImmutablePureComponent {
isLoading : false ,
isLoading : false ,
}
}
constructor ( props ) {
// constructor(props) {
super ( props ) ;
// super(props);
// const initialState = props.soapbox.withMutations(map => {
// const initialState = props.soapbox.withMutations(map => {
// });
// });
this . state = ImmutableMap ( props . soapbox ) ;
// this.state = ImmutableMap(props.soapbox);
// this.state = ImmutableMap(props.soapbox);
console . log ( JSON . stringify ( this . state , null , 2 ) ) ;
// this.state = ImmutableMap(props.soapbox);
if ( ! this . state . logo ) {
// console.log(JSON.stringify(this.state, null, 2));
this . state . concat ( { logo : '' } ) ;
// if (!this.state.logo) {
}
// this.state.concat({ logo: '' });
if ( ! this . state . banner ) {
// }
this . state . concat ( { banner : '' } ) ;
// if (!this.state.banner) {
}
// this.state.concat({ banner: '' });
if ( getIn ( this . state , [ 'defaultSettings' , 'autoPlayGif' ] , 'notSet' ) === 'notSet' ) {
// }
this . state . concat ( { defaultSettings : { autoPlayGif : false } } ) ;
// if (getIn(this.state, ['defaultSettings', 'autoPlayGif'], 'notSet') === 'notSet') {
} ;
// this.state.concat({ defaultSettings: { autoPlayGif: false } });
if ( getIn ( this . state , [ 'extensions' , 'patron' ] , 'notSet' ) === 'notSet' ) {
// };
this . state . concat ( { extensions : { patron : false } } ) ;
// if (getIn(this.state, ['extensions', 'patron'], 'notSet') === 'notSet') {
// this.state.extensions.patron = false;
// this.state.concat({ extensions: { patron: false } });
} ;
// // this.state.extensions.patron = false;
if ( getIn ( this . state , [ 'promoPanel' , 'items' , 'icon' ] , 'notSet' ) === 'notSet' ) {
// };
this . state = {
// if (getIn(this.state, ['promoPanel', 'items', 'icon'], 'notSet') === 'notSet') {
promoPanel : {
// this.state = {
items : [
// promoPanel: {
{
// items: [
icon : '' ,
// {
text : '' ,
// icon: '',
url : '' ,
// text: '',
} ,
// url: '',
] ,
// },
} ,
// ],
} ;
// },
// };
// this.state.promoPanel.items = ImmutableList([
// this.state.promoPanel.items = ImmutableList([
// ImmutableMap({
// ImmutableMap({
// icon: '',
// icon: '',
@ -93,8 +93,8 @@ class ConfigSoapbox extends ImmutablePureComponent {
// url: '',
// url: '',
// }),
// }),
// ]);
// ]);
} ;
// };
console . log ( JSON . stringify ( this . state , null , 2 ) ) ;
// console.log(JSON.stringify(this.state, null, 2));
// if (!this.state.promoPanel.items) {
// if (!this.state.promoPanel.items) {
// this.state.promoPanel.items = ImmutableList([
// this.state.promoPanel.items = ImmutableList([
// ImmutableMap({
// ImmutableMap({
@ -112,21 +112,21 @@ class ConfigSoapbox extends ImmutablePureComponent {
// }),
// }),
// ]);
// ]);
// };
// };
if ( ! this . state . customCssItems ) {
// if (!this.state.customCssItems) {
this . state . customCssItems = ImmutableList ( [ ' ' ] ) ;
// this.state.customCssItems = ImmutableList([' ']);
} ;
// };
this . handlecustomCSSChange = this . handleCustomCSSChange . bind ( this ) ;
// this.handlecustomCSSChange = this.handleCustomCSSChange.bind(this);
this . handleAddPromoPanelItem = this . handleAddPromoPanelItem . bind ( this ) ;
// this.handleAddPromoPanelItem = this.handleAddPromoPanelItem.bind(this);
this . handleAddHomeFooterItem = this . handleAddHomeFooterItem . bind ( this ) ;
// this.handleAddHomeFooterItem = this.handleAddHomeFooterItem.bind(this);
this . handleAddCssItem = this . handleAddCssItem . bind ( this ) ;
// this.handleAddCssItem = this.handleAddCssItem.bind(this);
this . handleExtensionsCheckboxChange = this . handleExtensionsCheckboxChange . bind ( this ) ;
// this.handleExtensionsCheckboxChange = this.handleExtensionsCheckboxChange.bind(this);
this . handleDefaultSettingsCheckboxChange = this . handleDefaultSettingsCheckboxChange . bind ( this ) ;
// this.handleDefaultSettingsCheckboxChange = this.handleDefaultSettingsCheckboxChange.bind(this);
this . handleBrandColorChange = this . handleBrandColorChange . bind ( this ) ;
// this.handleBrandColorChange = this.handleBrandColorChange.bind(this);
this . getParams = this . getParams . bind ( this ) ;
// this.getParams = this.getParams.bind(this);
}
// }
getParams = ( ) => {
getParams = ( ) => {
// const { state } = this;
const { state } = this ;
var obj = {
var obj = {
configs : [ {
configs : [ {
group : ':pleroma' ,
group : ':pleroma' ,
@ -134,43 +134,46 @@ class ConfigSoapbox extends ImmutablePureComponent {
value : [ {
value : [ {
tuple : [ ':soapbox_fe' ,
tuple : [ ':soapbox_fe' ,
{
{
// logo: '',
logo : '' ,
// banner: '',
banner : '' ,
// brandColor: '',
brandColor : '' ,
// customCss: [],
customCss : [ ] ,
// promoPanel: {
promoPanel : {
// items: [],
items : [ ] ,
// },
} ,
// extensions: {
extensions : {
// patron: false,
patron : false ,
// },
} ,
// defaultSettings: {
defaultSettings : {
// autoPlayGif: false,
autoPlayGif : false ,
// },
} ,
// copyright: '',
copyright : '' ,
// navlinks: {
navlinks : {
// homeFooter: [],
homeFooter : [ ] ,
// },
} ,
} ,
} ,
] ,
] ,
} ] ,
} ] ,
} ] ,
} ] ,
} ;
} ;
// obj.configs[0].value[0].tuple[1].logo = state.logo;
obj . configs [ 0 ] . value [ 0 ] . tuple [ 1 ] . logo = ( state . logo ? state . logo : this . props . soapbox . logo ) ;
// obj.configs[0].value[0].tuple[1].banner = state.banner;
obj . configs [ 0 ] . value [ 0 ] . tuple [ 1 ] . banner = ( state . banner ? state . banner : this . props . soapbox . banner ) ;
// obj.configs[0].value[0].tuple[1].brandColor = state.brandColor;
obj . configs [ 0 ] . value [ 0 ] . tuple [ 1 ] . brandColor = ( state . brandColor ? state . brandColor : this . props . soapbox . brandcolor ) ;
// obj.configs[0].value[0].tuple[1].extensions.patron = state.extensions.patron;
obj . configs [ 0 ] . value [ 0 ] . tuple [ 1 ] . extensions . patron = ( state . patron ? state . patron : this . props . soapbox . extensions . patron ) ;
// obj.configs[0].value[0].tuple[1].defaultSettings.autoPlayGif = state.defaultSettings.autoPlayGif;
obj . configs [ 0 ] . value [ 0 ] . tuple [ 1 ] . defaultSettings . autoPlayGif = ( state . autoPlayGif ? state . autoPlayGif : this . props . soapbox . defaultSettings . autoPlayGif ) ;
// obj.configs[0].value[0].tuple[1].copyright = state.copyright;
obj . configs [ 0 ] . value [ 0 ] . tuple [ 1 ] . copyright = ( state . copyright ? state . copyright : this . props . soapbox . copyright ) ;
// this.state.navlinks.homeFooter.forEach((f) =>
var homeFooterItems = ( state . homeFooterItems ? state . homeFooterItems : this . props . soapbox . navlinks . homeFooter ) ;
// obj.configs[0].value[0].tuple[1].navlinks.homeFooter.push({ title: f.get('title'), url: f.get('url') })
homeFooterItems . forEach ( ( f ) =>
// );
obj . configs [ 0 ] . value [ 0 ] . tuple [ 1 ] . navlinks . homeFooter . push ( { title : f . get ( 'title' ) , url : f . get ( 'url' ) } )
// this.state.promoPanel.items.forEach((f) =>
) ;
// obj.configs[0].value[0].tuple[1].promoPanel.items.push({ icon: f.get('icon'), text: f.get('text'), url: f.get('url') })
var promoPanelItems = ( state . promoPanelItems ? state . promoPanelItems : this . props . soapbox . promoPanel . items ) ;
// );
promoPanelItems . forEach ( ( f ) =>
// this.state.customCss.forEach((f) =>
obj . configs [ 0 ] . value [ 0 ] . tuple [ 1 ] . promoPanel . items . push ( { icon : f . get ( 'icon' ) , text : f . get ( 'text' ) , url : f . get ( 'url' ) } )
// obj.configs[0].value[0].tuple[1].customCss.push(f)
) ;
// );
var customCssItems = ( state . customCssItems ? state . customCssItems : this . props . soapbox . customCss ) ;
customCssItems . forEach ( ( f ) =>
obj . configs [ 0 ] . value [ 0 ] . tuple [ 1 ] . customCss . push ( f )
) ;
console . log ( JSON . stringify ( obj , null , 2 ) ) ;
console . log ( JSON . stringify ( obj , null , 2 ) ) ;
return obj ;
return obj ;
}
}
@ -186,23 +189,25 @@ class ConfigSoapbox extends ImmutablePureComponent {
event . preventDefault ( ) ;
event . preventDefault ( ) ;
}
}
handleExtensionsCheckboxChange = e => {
handlePatronCheckboxChange = e => {
var extensions = { ... this . state . extensions } ;
// var extensions = { ...this.state.extensions };
if ( e . target . name === 'patron' ) {
// if (e.target.name === 'patron') {
extensions . patron = e . target . value ;
// extensions.patron = e.target.value;
}
// }
this . setState ( { extensions } ) ;
var isChecked = ( e . target . value === 'true' ) ;
this . setState ( { patron : isChecked } ) ;
// this.setState({
// this.setState({
// extensions: this.state.setIn(['extensions', e.target.name], e.target.value),
// extensions: this.state.setIn(['extensions', e.target.name], e.target.value),
// });
// });
}
}
handleDefaultSettingsCheckboxChange = e => {
handleAutoPlayGifCheckboxChange = e => {
var defaultSettings = { ... this . state . defaultSettings } ;
// var defaultSettings = { ...this.state.defaultSettings };
if ( e . target . name === 'autoPlayGif' ) {
// if (e.target.name === 'autoPlayGif') {
defaultSettings . autoPlayGif = e . target . value ;
// defaultSettings.autoPlayGif = e.target.value;
}
// }
this . setState ( { defaultSettings } ) ;
var isChecked = ( e . target . value === 'true' ) ;
this . setState ( { autoPlayGif : isChecked } ) ;
// this.setState({
// this.setState({
// defaultSettings: this.state.setIn(['defaultSettings', '[e.target.name]'], e.target.value),
// defaultSettings: this.state.setIn(['defaultSettings', '[e.target.name]'], e.target.value),
// });
// });
@ -226,9 +231,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
return ( e ) => {
return ( e ) => {
// this.state.soapbox.promoItems.setIn([i, key], e.target.value);
// this.state.soapbox.promoItems.setIn([i, key], e.target.value);
this . setState ( {
this . setState ( {
promoPanel : {
promoPanelitems : this . state . promoPanelItems . setIn ( [ i , key ] , e . target . value ) ,
items : this . state . promoPanel . items . setIn ( [ i , key ] , e . target . value ) ,
} ,
} ) ;
} ) ;
} ;
} ;
}
}
@ -237,9 +240,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
return ( e ) => {
return ( e ) => {
// this.state.soapbox.homeFooterItems.setIn([i, key], e.target.value);
// this.state.soapbox.homeFooterItems.setIn([i, key], e.target.value);
this . setState ( {
this . setState ( {
navlinks : {
homeFooterItems : this . state . homeFooterItems . setIn ( [ i , key ] , e . target . value ) ,
homeFooter : this . state . navlinks . homeFooter . setIn ( [ i , key ] , e . target . value ) ,
} ,
} ) ;
} ) ;
} ;
} ;
}
}
@ -248,7 +249,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
return ( e ) => {
return ( e ) => {
// this.state.soapbox.customCssItems.setIn([i], e.target.value);
// this.state.soapbox.customCssItems.setIn([i], e.target.value);
this . setState ( {
this . setState ( {
customCss : this . state . customCs s. setIn ( [ i ] , e . target . value ) ,
customCss Items : this . state . customCs sItem s. setIn ( [ i ] , e . target . value ) ,
} ) ;
} ) ;
} ;
} ;
}
}
@ -269,7 +270,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
handleAddPromoPanelItem = ( ) => {
handleAddPromoPanelItem = ( ) => {
this . setState ( {
this . setState ( {
Items: this . state . promoPanel . i tems. concat ( [
promoPanel Items: this . state . promoPanel I tems. concat ( [
ImmutableMap ( {
ImmutableMap ( {
icon : '' ,
icon : '' ,
text : '' ,
text : '' ,
@ -281,7 +282,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
handleAddHomeFooterItem = ( ) => {
handleAddHomeFooterItem = ( ) => {
this . setState ( {
this . setState ( {
homeFooter : this . state . navlinks. homeFooter. concat ( [
homeFooter Items : this . state . homeFooterItems . concat ( [
ImmutableMap ( {
ImmutableMap ( {
title : '' ,
title : '' ,
url : '' ,
url : '' ,
@ -292,24 +293,22 @@ class ConfigSoapbox extends ImmutablePureComponent {
handleAddCssItem = ( ) => {
handleAddCssItem = ( ) => {
this . setState ( {
this . setState ( {
customCss : this . state . customCs s. concat ( [ '' ] ) ,
customCss Items : this . state . customCs sItem s. concat ( [ '' ] ) ,
} ) ;
} ) ;
}
}
render ( ) {
render ( ) {
const { intl } = this . props ;
const { intl , soapbox } = this . props ;
// const { logo, banner, brandColor, extensions, defaultSettings, copyright,
const { logo , banner , brandColor , extensions , defaultSettings , copyright ,
// promoPanel, navlinks, customCss } = this.state;
promoPanel , navlinks , customCss } = soapbox ;
const patron = false ;
const patron = ( this . state . patron ? this . state . patron : extensions . patron ) ;
const autoPlayGif = false ;
const autoPlayGif = ( this . state . autoPlayGif ? this . state . autoPlayGif : defaultSettings . autoPlayGif ) ;
const logo = '' ;
const promoPanelItems = ( this . state . promoPanelItems ? this . state . promoPanelItems : promoPanel . items ) ;
const banner = '' ;
const homeFooterItems = ( this . state . homeFooterItems ? this . state . homeFooterItems : navlinks . homeFooter ) ;
const brandColor = '#3b5998' ;
const customCssItems = ( this . state . customCssItems ? this . state . customCssItems : customCss ) ;
const copyright = '' ;
console . log ( promoPanelItems ) ;
// const patron = (extensions.patron === 'true');
console . log ( homeFooterItems ) ;
// const autoPlayGif = (defaultSettings.autoPlayGif === 'true');
console . log ( customCssItems ) ;
// console.log(navlinks.homeFooter);
// console.log(promoPanel.items);
return (
return (
< Column icon = 'shield' heading = { intl . formatMessage ( messages . heading ) } backBtnSlim >
< Column icon = 'shield' heading = { intl . formatMessage ( messages . heading ) } backBtnSlim >
@ -318,7 +317,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
< FieldsGroup >
< FieldsGroup >
< div className = 'fields-row' >
< div className = 'fields-row' >
< div className = 'fields-row__column fields-row__column-6' >
< div className = 'fields-row__column fields-row__column-6' >
{ logo ? ( < StillImage src = { logo || '' } / > ) : ( < StillImage src = { this . props . soapbox . logo || '' } / > ) }
{ this . state . logo ? ( < StillImage src = { this . state . logo } / > ) : ( < StillImage src = { logo || '' } / > ) }
< / d i v >
< / d i v >
< div className = 'fields-row__column fields-group fields-row__column-6' >
< div className = 'fields-row__column fields-group fields-row__column-6' >
< FileChooserLogo
< FileChooserLogo
@ -331,7 +330,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
< / d i v >
< / d i v >
< div className = 'fields-row' >
< div className = 'fields-row' >
< div className = 'fields-row__column fields-row__column-6' >
< div className = 'fields-row__column fields-row__column-6' >
{ banner ? ( < StillImage src = { banner || '' } / > ) : ( < StillImage src = { this . props . soapbox . banner || '' } / > ) }
{ this . state . banner ? ( < StillImage src = { this . state . banner } / > ) : ( < StillImage src = { banner || '' } / > ) }
< / d i v >
< / d i v >
< div className = 'fields-row__column fields-group fields-row__column-6' >
< div className = 'fields-row__column fields-group fields-row__column-6' >
< FileChooser
< FileChooser
@ -348,7 +347,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
< ColorWithPicker
< ColorWithPicker
buttonId = 'brand_color'
buttonId = 'brand_color'
label = { < FormattedMessage id = 'soapbox_settings.fields.brand_color_label' defaultMessage = 'Brand color' / > }
label = { < FormattedMessage id = 'soapbox_settings.fields.brand_color_label' defaultMessage = 'Brand color' / > }
value = { brandColor || '#0482d8' }
value = { this . state . brandColor ? this . state . brandColor : brandColor || '#0482d8' }
onChange = { this . handleBrandColorChange }
onChange = { this . handleBrandColorChange }
/ >
/ >
< / d i v >
< / d i v >
@ -359,14 +358,14 @@ class ConfigSoapbox extends ImmutablePureComponent {
hint = { < FormattedMessage id = 'soapbox_settings.hints.patron_enabled' defaultMessage = 'Enables display of Patron module. Requires installation of Patron module.' / > }
hint = { < FormattedMessage id = 'soapbox_settings.hints.patron_enabled' defaultMessage = 'Enables display of Patron module. Requires installation of Patron module.' / > }
name = 'patron'
name = 'patron'
checked = { patron ? patron : false }
checked = { patron ? patron : false }
onChange = { this . handle Extensions CheckboxChange}
onChange = { this . handle Patron CheckboxChange}
/ >
/ >
< Checkbox
< Checkbox
label = { < FormattedMessage id = 'soapbox_settings.fields.auto_play_gif_label' defaultMessage = 'Auto-play GIFs' / > }
label = { < FormattedMessage id = 'soapbox_settings.fields.auto_play_gif_label' defaultMessage = 'Auto-play GIFs' / > }
hint = { < FormattedMessage id = 'soapbox_settings.hints.auto_play_gif' defaultMessage = 'Enable auto-playing of GIF files in timeline' / > }
hint = { < FormattedMessage id = 'soapbox_settings.hints.auto_play_gif' defaultMessage = 'Enable auto-playing of GIF files in timeline' / > }
name = 'autoPlayGif'
name = 'autoPlayGif'
checked = { autoPlayGif ? autoPlayGif : false }
checked = { autoPlayGif ? autoPlayGif : false }
onChange = { this . handle DefaultSettings CheckboxChange}
onChange = { this . handle AutoPlayGif CheckboxChange}
/ >
/ >
< / F i e l d s G r o u p >
< / F i e l d s G r o u p >
< FieldsGroup >
< FieldsGroup >
@ -374,11 +373,11 @@ class ConfigSoapbox extends ImmutablePureComponent {
name = 'copyright'
name = 'copyright'
label = { intl . formatMessage ( messages . copyrightFooterLabel ) }
label = { intl . formatMessage ( messages . copyrightFooterLabel ) }
placeholder = { intl . formatMessage ( messages . copyrightFooterLabel ) }
placeholder = { intl . formatMessage ( messages . copyrightFooterLabel ) }
value = { copyright ? copyright : this . props . soapbox . copyright || '' }
value = { this . state . copyright ? this . state . copyright : copyright || '' }
onChange = { this . handleTextChange }
onChange = { this . handleTextChange }
/ >
/ >
< / F i e l d s G r o u p >
< / F i e l d s G r o u p >
{ / * < F i e l d s G r o u p >
< FieldsGroup >
< div className = 'fields-row__column fields-group' >
< div className = 'fields-row__column fields-group' >
< div className = 'input with_block_label' >
< div className = 'input with_block_label' >
< label > < FormattedMessage id = 'soapbox_settings.fields.promo_panel_fields_label' defaultMessage = 'Promo panel items' / > < / l a b e l >
< label > < FormattedMessage id = 'soapbox_settings.fields.promo_panel_fields_label' defaultMessage = 'Promo panel items' / > < / l a b e l >
@ -389,7 +388,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
< FormattedMessage id = 'soapbox_settings.hints.promo_panel_icons' defaultMessage = '{ link }' values = { { link : < a target = '_blank' href = 'https://forkaweso.me/Fork-Awesome/icons/' > Soapbox Icons List < /a> }} / >
< FormattedMessage id = 'soapbox_settings.hints.promo_panel_icons' defaultMessage = '{ link }' values = { { link : < a target = '_blank' href = 'https://forkaweso.me/Fork-Awesome/icons/' > Soapbox Icons List < /a> }} / >
< / s p a n >
< / s p a n >
{
{
promoPanel . i tems. map ( ( field , i ) => (
promoPanel I tems. map ( ( field , i ) => (
< div className = 'row' key = { i } >
< div className = 'row' key = { i } >
< TextInput
< TextInput
label = { intl . formatMessage ( messages . promoItemIcon ) }
label = { intl . formatMessage ( messages . promoItemIcon ) }
@ -424,7 +423,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
< FormattedMessage id = 'soapbox_settings.hints.home_footer_fields' defaultMessage = 'You can have custom defined links displayed on the footer of your static pages' / >
< FormattedMessage id = 'soapbox_settings.hints.home_footer_fields' defaultMessage = 'You can have custom defined links displayed on the footer of your static pages' / >
< / s p a n >
< / s p a n >
{
{
navlinks. homeFooter. map ( ( field , i ) => (
homeFooterItems . map ( ( field , i ) => (
< div className = 'row' key = { i } >
< div className = 'row' key = { i } >
< TextInput
< TextInput
label = { intl . formatMessage ( messages . homeFooterItemLabel ) }
label = { intl . formatMessage ( messages . homeFooterItemLabel ) }
@ -454,7 +453,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
< FormattedMessage id = 'soapbox_settings.hints.custom_css_fields' defaultMessage = 'You can have custom CSS definitions' / >
< FormattedMessage id = 'soapbox_settings.hints.custom_css_fields' defaultMessage = 'You can have custom CSS definitions' / >
< / s p a n >
< / s p a n >
{
{
customCss . map ( ( field , i ) => (
customCss Items . map ( ( field , i ) => (
< div className = 'row' key = { i } >
< div className = 'row' key = { i } >
< TextInput
< TextInput
label = { intl . formatMessage ( messages . customCssLabel ) }
label = { intl . formatMessage ( messages . customCssLabel ) }
@ -471,7 +470,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
< / d i v >
< / d i v >
< / d i v >
< / d i v >
< / d i v >
< / d i v >
< /FieldsGroup> */ }
< / F i e l d s G r o u p >
< / f i e l d s e t >
< / f i e l d s e t >
< div className = 'actions' >
< div className = 'actions' >
< button name = 'button' type = 'submit' className = 'btn button button-primary' >
< button name = 'button' type = 'submit' className = 'btn button button-primary' >