Get Gentoo!
gentoo.org sites
gentoo.org Wiki Bugs Forums Packages
Planet Archives Sources
Infra Status
summaryrefslogtreecommitdiff
path: root/plugins/public-post-preview/js/src/components/preview-toggle/index.js
diff options
context:
space:
mode:
Diffstat (limited to 'plugins/public-post-preview/js/src/components/preview-toggle/index.js')
-rw-r--r--plugins/public-post-preview/js/src/components/preview-toggle/index.js141
1 files changed, 87 insertions, 54 deletions
diff --git a/plugins/public-post-preview/js/src/components/preview-toggle/index.js b/plugins/public-post-preview/js/src/components/preview-toggle/index.js
index 41e20868..6e93ff7a 100644
--- a/plugins/public-post-preview/js/src/components/preview-toggle/index.js
+++ b/plugins/public-post-preview/js/src/components/preview-toggle/index.js
@@ -2,8 +2,11 @@
* External dependencies
*/
import { get } from 'lodash';
-import { css } from 'emotion'
+import { css } from '@emotion/css';
+/**
+ * WordPress dependencies
+ */
import { __ } from '@wordpress/i18n';
import {
CheckboxControl,
@@ -11,55 +14,60 @@ import {
Path,
SVG,
} from '@wordpress/components';
-import {
- Component,
- createRef,
-} from '@wordpress/element';
+import { Component, createRef } from '@wordpress/element';
import { withSelect, withDispatch } from '@wordpress/data';
import { PluginPostStatusInfo } from '@wordpress/edit-post';
import { ifCondition, compose } from '@wordpress/compose';
-const {
- ajaxurl,
- DSPublicPostPreviewData,
-} = window;
+const { ajaxurl, DSPublicPostPreviewData } = window;
const pluginPostStatusInfoPreviewUrl = css`
flex-direction: column;
align-items: stretch;
margin-top: 10px;
-`
+`;
const pluginPostStatusInfoPreviewUrlInput = css`
width: 100%;
margin-right: 12px;
-`
+`;
const pluginPostStatusInfoPreviewDescription = css`
font-style: italic;
color: #666;
- margin: .2em 0 0 !important;
-`
+ margin: 0.2em 0 0 !important;
+`;
const pluginPostStatusInfoPreviewUrlInputWrapper = css`
display: flex;
justify-content: flex-start;
align-items: center;
margin: 0;
-`
-
-const ClipboardIcon = <SVG width="20" height="20" viewBox="0 0 14 16" xmlns="http://www.w3.org/2000/svg"><Path fillRule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"/></SVG>
+`;
+
+const ClipboardIcon = (
+ <SVG
+ width="20"
+ height="20"
+ viewBox="0 0 14 16"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <Path
+ fillRule="evenodd"
+ d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"
+ />
+ </SVG>
+);
class PreviewToggle extends Component {
-
constructor( props ) {
- super( props )
+ super( props );
this.state = {
previewEnabled: DSPublicPostPreviewData.previewEnabled,
previewUrl: DSPublicPostPreviewData.previewUrl,
hasCopied: false,
- }
+ };
this.previewUrlInput = createRef();
@@ -72,7 +80,7 @@ class PreviewToggle extends Component {
data.append( 'checked', checked );
data.append( 'post_ID', this.props.postId );
- this.sendRequest( data)
+ this.sendRequest( data )
.then( ( response ) => {
if ( response.status >= 200 && response.status < 300 ) {
return response;
@@ -87,26 +95,37 @@ class PreviewToggle extends Component {
}
const previewEnabled = ! this.state.previewEnabled;
- this.setState( { previewEnabled: previewEnabled } );
+ this.setState( {
+ previewEnabled,
+ previewUrl: response?.data?.preview_url || '',
+ } );
this.props.createNotice(
'info',
- previewEnabled ? __( 'Public preview enabled.', 'public-post-preview' ) : __( 'Public preview disabled.', 'public-post-preview' ),
+ previewEnabled
+ ? __( 'Public preview enabled.', 'public-post-preview' )
+ : __(
+ 'Public preview disabled.',
+ 'public-post-preview'
+ ),
{
id: 'public-post-preview',
isDismissible: true,
- type: 'snackbar'
+ type: 'snackbar',
}
);
} )
.catch( () => {
this.props.createNotice(
'error',
- __( 'Error while changing the public preview status.', 'public-post-preview' ),
+ __(
+ 'Error while changing the public preview status.',
+ 'public-post-preview'
+ ),
{
id: 'public-post-preview',
isDismissible: true,
- type: 'snackbar'
+ type: 'snackbar',
}
);
} );
@@ -127,32 +146,46 @@ class PreviewToggle extends Component {
}
render() {
- const {
- previewEnabled,
- previewUrl,
- hasCopied
- } = this.state;
+ const { previewEnabled, previewUrl, hasCopied } = this.state;
- const ariaCopyLabel = hasCopied ? __( 'Preview URL copied', 'public-post-preview' ) : __( 'Copy the preview URL', 'public-post-preview' );
+ const ariaCopyLabel = hasCopied
+ ? __( 'Preview URL copied', 'public-post-preview' )
+ : __( 'Copy the preview URL', 'public-post-preview' );
return (
<>
<PluginPostStatusInfo>
<CheckboxControl
- label={ __( 'Enable public preview', 'public-post-preview' ) }
+ label={ __(
+ 'Enable public preview',
+ 'public-post-preview'
+ ) }
checked={ previewEnabled }
onChange={ this.onChange }
/>
</PluginPostStatusInfo>
- { previewEnabled &&
- <PluginPostStatusInfo className={ pluginPostStatusInfoPreviewUrl }>
- <p className={ pluginPostStatusInfoPreviewUrlInputWrapper }>
- <label htmlFor="public-post-preview-url" className="screen-reader-text">{ __( 'Preview URL', 'public-post-preview' ) }</label>
+ { previewEnabled && (
+ <PluginPostStatusInfo
+ className={ pluginPostStatusInfoPreviewUrl }
+ >
+ <p
+ className={
+ pluginPostStatusInfoPreviewUrlInputWrapper
+ }
+ >
+ <label
+ htmlFor="public-post-preview-url"
+ className="screen-reader-text"
+ >
+ { __( 'Preview URL', 'public-post-preview' ) }
+ </label>
<input
ref={ this.previewUrlInput }
type="text"
id="public-post-preview-url"
- className={ pluginPostStatusInfoPreviewUrlInput }
+ className={
+ pluginPostStatusInfoPreviewUrlInput
+ }
value={ previewUrl }
readOnly
onFocus={ this.onPreviewUrlInputFocus }
@@ -160,17 +193,24 @@ class PreviewToggle extends Component {
<ClipboardButton
text={ previewUrl }
label={ ariaCopyLabel }
- onCopy={ () => this.setState( { hasCopied: true } ) }
- onFinishCopy={ () => this.setState( { hasCopied: false } ) }
+ onCopy={ () =>
+ this.setState( { hasCopied: true } )
+ }
+ onFinishCopy={ () =>
+ this.setState( { hasCopied: false } )
+ }
aria-disabled={ hasCopied }
icon={ ClipboardIcon }
/>
</p>
<p className={ pluginPostStatusInfoPreviewDescription }>
- { __( 'Copy and share this preview URL.', 'public-post-preview' ) }
+ { __(
+ 'Copy and share this preview URL.',
+ 'public-post-preview'
+ ) }
</p>
</PluginPostStatusInfo>
- }
+ ) }
</>
);
}
@@ -178,13 +218,10 @@ class PreviewToggle extends Component {
export default compose( [
withSelect( ( select ) => {
- const {
- getPostType,
- } = select( 'core' );
- const {
- getCurrentPostId,
- getEditedPostAttribute,
- } = select( 'core/editor' );
+ const { getPostType } = select( 'core' );
+ const { getCurrentPostId, getEditedPostAttribute } = select(
+ 'core/editor'
+ );
const postType = getPostType( getEditedPostAttribute( 'type' ) );
return {
@@ -195,15 +232,11 @@ export default compose( [
} ),
ifCondition( ( { isViewable } ) => isViewable ),
ifCondition( ( { status } ) => {
- return [
- 'auto-draft',
- 'publish',
- 'private',
- ].indexOf( status ) === -1;
+ return [ 'auto-draft', 'publish', 'private' ].indexOf( status ) === -1;
} ),
withDispatch( ( dispatch ) => {
return {
- createNotice: dispatch( 'core/notices' ).createNotice
+ createNotice: dispatch( 'core/notices' ).createNotice,
};
} ),
] )( PreviewToggle );