Skip to content

Commit

Permalink
Merge pull request #13341 from Automattic/update/settings-infinite-sc…
Browse files Browse the repository at this point in the history 
…roll-to-radio

Site Settings: Use radio buttons for infinite scroll settings
  • Loading branch information
@tyxla
tyxla committed Apr 27, 2017
2 parents 302e450 + a8e8ccd commit cd0d9b4
Show file tree
Hide file tree
Showing 6 changed files with 175 additions and 40 deletions.
3 changes: 2 additions & 1 deletion client/my-sites/site-settings/form-writing.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ class SiteSettingsFormWriting extends Component {
handleSelect,
handleToggle,
handleAutosavingToggle,
handleAutosavingRadio,
isRequestingSettings,
isSavingSettings,
onChangeField,
Expand Down Expand Up @@ -137,6 +138,7 @@ class SiteSettingsFormWriting extends Component {
<ThemeEnhancements
onSubmitForm={ this.props.handleSubmitForm }
handleAutosavingToggle={ handleAutosavingToggle }
handleAutosavingRadio={ handleAutosavingRadio }
isSavingSettings={ isSavingSettings }
isRequestingSettings={ isRequestingSettings }
fields={ fields }
Expand Down Expand Up @@ -194,7 +196,6 @@ const getFormSettings = settings => {
'jetpack_portfolio',
'infinite-scroll',
'infinite_scroll',
'infinite_scroll_google_analytics',
'minileven',
'wp_mobile_excerpt',
'wp_mobile_featured_images',
Expand Down
4 changes: 4 additions & 0 deletions client/my-sites/site-settings/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -377,6 +377,10 @@
float: right;
}

.form-legend + .site-settings__info-link-container {
margin-top: -21px;
}

.site-settings__add-to-whitelist {
margin-top: 3px;
}
65 changes: 40 additions & 25 deletions client/my-sites/site-settings/theme-enhancements.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ import SectionHeader from 'components/section-header';
import Card from 'components/card';
import JetpackModuleToggle from 'my-sites/site-settings/jetpack-module-toggle';
import FormFieldset from 'components/forms/form-fieldset';
import FormLegend from 'components/forms/form-legend';
import FormLabel from 'components/forms/form-label';
import FormRadio from 'components/forms/form-radio';
import CompactFormToggle from 'components/forms/form-toggle/compact';
import { getSelectedSiteId } from 'state/ui/selectors';
import { isJetpackModuleActive } from 'state/selectors';
Expand All @@ -28,6 +31,7 @@ class ThemeEnhancements extends Component {
static propTypes = {
onSubmitForm: PropTypes.func.isRequired,
handleAutosavingToggle: PropTypes.func.isRequired,
handleAutosavingRadio: PropTypes.func.isRequired,
isSavingSettings: PropTypes.bool,
isRequestingSettings: PropTypes.bool,
fields: PropTypes.object,
Expand Down Expand Up @@ -55,16 +59,31 @@ class ThemeEnhancements extends Component {
);
}

renderRadio( name, value, label ) {
const { fields, handleAutosavingRadio } = this.props;
return (
<FormLabel>
<FormRadio
name={ name }
value={ value }
checked={ value === fields[ name ] }
onChange={ handleAutosavingRadio( name, value ) }
disabled={ this.isFormPending() }
/>
<span>{ label }</span>
</FormLabel>
);
}

renderInfiniteScrollSettings() {
const {
selectedSiteId,
infiniteScrollModuleActive,
translate
} = this.props;
const formPending = this.isFormPending();
const { translate } = this.props;

return (
<FormFieldset>
<FormLegend>
{ translate( 'Infinite Scroll' ) }
</FormLegend>

<div className="theme-enhancements__info-link-container site-settings__info-link-container">
<InfoPopover position={ 'left' }>
<ExternalLink href={ 'https://jetpack.com/support/infinite-scroll' } icon target="_blank">
Expand All @@ -73,25 +92,21 @@ class ThemeEnhancements extends Component {
</InfoPopover>
</div>

<JetpackModuleToggle
siteId={ selectedSiteId }
moduleSlug="infinite-scroll"
label={ translate( 'Add support for infinite scroll to your theme' ) }
disabled={ formPending }
/>

<div className="theme-enhancements__module-settings site-settings__child-settings">
{
this.renderToggle( 'infinite_scroll', ! infiniteScrollModuleActive, translate(
'Scroll infinitely (Shows 7 posts on each load)'
) )
}
{
this.renderToggle( 'infinite_scroll_google_analytics', ! infiniteScrollModuleActive, translate(
'Track each infinite Scroll post load as a page view in Google Analytics'
) )
}
</div>
{
this.renderRadio( 'infinite_scroll', 'default', translate(
'Load more posts using the default theme behavior'
) )
}
{
this.renderRadio( 'infinite_scroll', 'button', translate(
'Load more posts in page with a button'
) )
}
{
this.renderRadio( 'infinite_scroll', 'scroll', translate(
'Load more posts as the reader scrolls down'
) )
}
</FormFieldset>
);
}
Expand Down
14 changes: 14 additions & 0 deletions client/my-sites/site-settings/wrap-settings-form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,9 +122,22 @@ const wrapSettingsForm = getFormSettings => SettingsForm => {
const currentTargetName = event.currentTarget.name,
currentTargetValue = event.currentTarget.value;

this.props.trackEvent( `Set ${ currentTargetName } to ${ currentTargetValue }` );
this.props.updateFields( { [ currentTargetName ]: currentTargetValue } );
};

handleAutosavingRadio = ( name, value ) => () => {
const { fields } = this.props;
if ( fields[ name ] === value ) {
return;
}

this.props.trackEvent( `Set ${ name } to ${ value }` );
this.props.updateFields( { [ name ]: value }, () => {
this.submitForm();
} );
};

handleSelect = event => {
const { name, value } = event.currentTarget;
// Attempt to cast numeric fields value to int
Expand Down Expand Up @@ -177,6 +190,7 @@ const wrapSettingsForm = getFormSettings => SettingsForm => {
handleSubmitForm: this.handleSubmitForm,
handleToggle: this.handleToggle,
handleAutosavingToggle: this.handleAutosavingToggle,
handleAutosavingRadio: this.handleAutosavingRadio,
onChangeField: this.onChangeField,
setFieldValue: this.setFieldValue,
submitForm: this.submitForm,
Expand Down
103 changes: 93 additions & 10 deletions client/state/jetpack/settings/test/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,53 @@ describe( 'utils', () => {
jetpack_protect_global_whitelist: '123.123.123.123\n213.123.213.123',
} );
} );

it( 'should skip infinite scroll settings when module activation state is missing', () => {
const settings = {
some_setting: 'example',
infinite_scroll: true,
};

expect( normalizeSettings( settings ) ).to.eql( {
some_setting: 'example',
} );
} );

it( 'should set infinite_scroll to default and infinite-scroll to false if the module is inactive', () => {
const settings = {
infinite_scroll: true,
'infinite-scroll': false,
};

expect( normalizeSettings( settings ) ).to.eql( {
infinite_scroll: 'default',
'infinite-scroll': false,
} );
} );

it( 'should set infinite_scroll to scroll and infinite-scroll to true if the module is active and scroll is enabled', () => {
const settings = {
infinite_scroll: true,
'infinite-scroll': true,
};

expect( normalizeSettings( settings ) ).to.eql( {
infinite_scroll: 'scroll',
'infinite-scroll': true,
} );
} );

it( 'should set infinite_scroll to button and infinite-scroll to true if the module is active and scroll is disabled', () => {
const settings = {
infinite_scroll: false,
'infinite-scroll': true,
};

expect( normalizeSettings( settings ) ).to.eql( {
infinite_scroll: 'button',
'infinite-scroll': true,
} );
} );
} );

describe( 'sanitizeSettings()', () => {
Expand All @@ -99,15 +146,58 @@ describe( 'utils', () => {
some_other_setting: 123,
} );
} );

it( 'should skip infinite scroll settings if infinite_scroll is not defined', () => {
const settings = {
some_other_setting: 123,
'infinite-scroll': true,
};

expect( sanitizeSettings( settings ) ).to.eql( {
some_other_setting: 123,
} );
} );

it( 'should disable infinite scroll module when set to the default setting', () => {
const settings = {
infinite_scroll: 'default',
'infinite-scroll': true,
};

expect( sanitizeSettings( settings ) ).to.eql( {
'infinite-scroll': false,
} );
} );

it( 'should enable infinite scroll module and set scroll to true when setting is scroll', () => {
const settings = {
infinite_scroll: 'scroll',
'infinite-scroll': false,
};

expect( sanitizeSettings( settings ) ).to.eql( {
infinite_scroll: true,
'infinite-scroll': true,
} );
} );

it( 'should enable infinite scroll module and set scroll to false when setting is button', () => {
const settings = {
infinite_scroll: 'button',
'infinite-scroll': false,
};

expect( sanitizeSettings( settings ) ).to.eql( {
infinite_scroll: false,
'infinite-scroll': true,
} );
} );
} );

describe( 'filterSettingsByActiveModules()', () => {
it( 'should remove module activation state and retain all module settings for enabled modules', () => {
const settings = {
example_setting: true,
'infinite-scroll': true,
infinite_scroll: false,
infinite_scroll_google_analytics: true,
minileven: true,
wp_mobile_excerpt: true,
wp_mobile_featured_images: true,
Expand Down Expand Up @@ -159,8 +249,6 @@ describe( 'utils', () => {

expect( filterSettingsByActiveModules( settings ) ).to.eql( {
example_setting: true,
infinite_scroll: false,
infinite_scroll_google_analytics: true,
wp_mobile_excerpt: true,
wp_mobile_featured_images: true,
wp_mobile_app_promos: false,
Expand Down Expand Up @@ -203,9 +291,6 @@ describe( 'utils', () => {
it( 'should omit all module settings for disabled modules', () => {
const settings = {
example_setting: true,
'infinite-scroll': false,
infinite_scroll: false,
infinite_scroll_google_analytics: true,
minileven: false,
wp_mobile_excerpt: true,
wp_mobile_featured_images: true,
Expand Down Expand Up @@ -263,8 +348,6 @@ describe( 'utils', () => {
it( 'should omit all module settings for modules with unknown activation state', () => {
const settings = {
example_setting: true,
infinite_scroll: false,
infinite_scroll_google_analytics: true,
wp_mobile_excerpt: true,
wp_mobile_featured_images: true,
wp_mobile_app_promos: false,
Expand Down
26 changes: 22 additions & 4 deletions client/state/jetpack/settings/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,18 @@ export const normalizeSettings = ( settings ) => {
const whitelist = get( settings[ key ], [ 'local' ], [] );
memo[ key ] = whitelist.join( '\n' );
break;
case 'infinite-scroll':
break;
case 'infinite_scroll':
if ( settings[ 'infinite-scroll' ] !== undefined ) {
if ( settings[ 'infinite-scroll' ] ) {
memo[ key ] = settings[ key ] ? 'scroll' : 'button';
} else {
memo[ key ] = 'default';
}
memo[ 'infinite-scroll' ] = settings[ 'infinite-scroll' ];
}
break;
default:
memo[ key ] = settings[ key ];
}
Expand All @@ -38,6 +50,16 @@ export const sanitizeSettings = ( settings ) => {
switch ( key ) {
case 'post_by_email_address':
break;
case 'infinite-scroll':
break;
case 'infinite_scroll':
if ( settings[ key ] === 'default' ) {
memo[ 'infinite-scroll' ] = false;
} else {
memo[ 'infinite-scroll' ] = true;
memo[ key ] = settings[ key ] === 'scroll';
}
break;
default:
memo[ key ] = settings[ key ];
}
Expand All @@ -54,10 +76,6 @@ export const sanitizeSettings = ( settings ) => {
*/
export const filterSettingsByActiveModules = ( settings ) => {
const moduleSettingsList = {
'infinite-scroll': [
'infinite_scroll',
'infinite_scroll_google_analytics',
],
minileven: [
'wp_mobile_excerpt',
'wp_mobile_featured_images',
Expand Down

0 comments on commit cd0d9b4

Please sign in to comment.