first
This commit is contained in:
@ -0,0 +1,86 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
export default ({ smushData }) => {
|
||||
return (
|
||||
<div className="sui-box-body">
|
||||
<div className="sui-message">
|
||||
<img
|
||||
className="sui-image"
|
||||
src={smushData.urls.freeImg}
|
||||
srcset={smushData.urls.freeImg2x + ' 2x'}
|
||||
alt={__('Smush WebP', 'wp-smushit')}
|
||||
/>
|
||||
|
||||
<div className="sui-message-content">
|
||||
<p>
|
||||
{__(
|
||||
'Fix the "Serve images in next-gen format" Google PageSpeed recommendation by setting up this feature. Serve WebP versions of your images to supported browsers, and gracefully fall back on JPEGs and PNGs for browsers that don\'t support WebP.',
|
||||
'wp-smushit'
|
||||
)}
|
||||
</p>
|
||||
|
||||
<ol className="sui-upsell-list">
|
||||
<li>
|
||||
<span
|
||||
className="sui-icon-check sui-sm"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{__(
|
||||
'Add or automatically apply the rules to enable Local WebP feature.',
|
||||
'wp-smushit'
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
className="sui-icon-check sui-sm"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{__(
|
||||
'Fix “Serve images in next-gen format" Google PageSpeed recommendation.',
|
||||
'wp-smushit'
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
className="sui-icon-check sui-sm"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{__(
|
||||
'Serve WebP version of images in the browsers that support it and fall back to JPEGs and PNGs for non supported browsers.',
|
||||
'wp-smushit'
|
||||
)}
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p className="sui-margin-top">
|
||||
<a
|
||||
href={smushData.urls.upsell}
|
||||
className="sui-button sui-button-purple"
|
||||
style={{ marginRight: '30px' }}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{__('UNLOCK WEBP WITH PRO', 'wp-smushit')}
|
||||
</a>
|
||||
<a
|
||||
href={smushData.urls.webpDoc}
|
||||
style={{ color: '#8D00B1' }}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{__('Learn more', 'wp-smushit')}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,441 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { __, sprintf } = wp.i18n;
|
||||
|
||||
export default ({
|
||||
currentStep,
|
||||
serverType,
|
||||
rulesMethod,
|
||||
setRulesMethod,
|
||||
setServerType,
|
||||
rulesError,
|
||||
smushData,
|
||||
makeRequest,
|
||||
}) => {
|
||||
const stepsHeading = {
|
||||
1: {
|
||||
title: __('Choose Server Type', 'wp-smushit'),
|
||||
description: __(
|
||||
'Choose your server type. If you don’t know this, please contact your hosting provider.',
|
||||
'wp-smushit'
|
||||
),
|
||||
},
|
||||
2: {
|
||||
title: __('Add Rules', 'wp-smushit'),
|
||||
description:
|
||||
'apache' === serverType
|
||||
? __(
|
||||
'Smush can automatically apply WebP conversion rules for Apache servers by writing to your .htaccess file. Alternatively, switch to Manual to apply these rules yourself.',
|
||||
'wp-smushit'
|
||||
)
|
||||
: __(
|
||||
'The following configurations are for NGINX servers. If you do not have access to your NGINX config files you will need to contact your hosting provider to make these changes.',
|
||||
'wp-smushit'
|
||||
),
|
||||
},
|
||||
3: {
|
||||
title: __('Finish Setup', 'wp-smushit'),
|
||||
description: __(
|
||||
'The rules have been applied successfully.',
|
||||
'wp-smushit'
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
const getTopNotice = () => {
|
||||
if (1 === currentStep && smushData.isS3Enabled) {
|
||||
return (
|
||||
<div className="sui-notice sui-notice-warning">
|
||||
<div className="sui-notice-content">
|
||||
<div className="sui-notice-message">
|
||||
<span
|
||||
className="sui-notice-icon sui-icon-info sui-md"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<p>
|
||||
{__(
|
||||
'We noticed the Amazon S3 Integration is enabled. Offloaded images will not be served in WebP format, but Smush will create local WebP copies of all images. If this is undesirable, you can quit the setup.',
|
||||
'wp-smushit'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (2 === currentStep) {
|
||||
return (
|
||||
<div
|
||||
role="alert"
|
||||
className="sui-notice sui-notice-warning"
|
||||
aria-live="assertive"
|
||||
style={rulesError ? { display: 'block' } : {}}
|
||||
>
|
||||
{rulesError && (
|
||||
<div className="sui-notice-content">
|
||||
<div className="sui-notice-message">
|
||||
<span
|
||||
className="sui-notice-icon sui-icon-info sui-md"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<p
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: rulesError,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (smushData.isWpmudevHost) {
|
||||
const message = !smushData.isWhitelabel
|
||||
? __(
|
||||
'Since your site is hosted with WPMU DEV, we already have done the configurations steps for you. The only step for you would be to create WebP images below.',
|
||||
'wp-smushit'
|
||||
)
|
||||
: __(
|
||||
'WebP conversion is active and working well. Your hosting has automatically pre-configured the conversion for you. The only step for you would be to create WebP images below.',
|
||||
'wp-smushit'
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="sui-notice sui-notice-info">
|
||||
<div className="sui-notice-content">
|
||||
<div className="sui-notice-message">
|
||||
<span
|
||||
className="sui-notice-icon sui-icon-info sui-md"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<p>{message}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const getStepContent = () => {
|
||||
if (1 === currentStep) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="sui-box-selectors">
|
||||
<ul>
|
||||
<li>
|
||||
<label
|
||||
htmlFor="smush-wizard-server-type-apache"
|
||||
className="sui-box-selector"
|
||||
>
|
||||
<input
|
||||
id="smush-wizard-server-type-apache"
|
||||
type="radio"
|
||||
value="apache"
|
||||
checked={'apache' === serverType}
|
||||
onChange={(e) =>
|
||||
setServerType(e.currentTarget.value)
|
||||
}
|
||||
/>
|
||||
<span>{__('Apache', 'wp-smushit')}</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<label
|
||||
htmlFor="smush-wizard-server-type-nginx"
|
||||
className="sui-box-selector"
|
||||
>
|
||||
<input
|
||||
id="smush-wizard-server-type-nginx"
|
||||
type="radio"
|
||||
value="nginx"
|
||||
checked={'nginx' === serverType}
|
||||
onChange={(e) =>
|
||||
setServerType(e.currentTarget.value)
|
||||
}
|
||||
/>
|
||||
<span>{__('NGINX', 'wp-smushit')}</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="sui-notice" style={{ textAlign: 'left' }}>
|
||||
<div className="sui-notice-content">
|
||||
<div className="sui-notice-message">
|
||||
<span
|
||||
className="sui-notice-icon sui-icon-info sui-md"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<p>
|
||||
{sprintf(
|
||||
/* translators: server type */
|
||||
__(
|
||||
"We've automatically detected your server type is %s. If this is incorrect, manually select your server type to generate the relevant rules and instructions.",
|
||||
'wp-smushit'
|
||||
),
|
||||
'nginx' === smushData.detectedServer
|
||||
? 'NGINX'
|
||||
: 'Apache / LiteSpeed'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
if (2 === currentStep) {
|
||||
if ('nginx' === serverType) {
|
||||
return (
|
||||
<div className="smush-wizard-rules-wrapper">
|
||||
<ol className="sui-description">
|
||||
<li>
|
||||
{__(
|
||||
'Insert the following in the server context of your configuration file (usually found in /etc/nginx/sites-available). “The server context” refers to the part of the configuration that starts with “server {” and ends with the matching “}”.',
|
||||
'wp-smushit'
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
{__(
|
||||
'Copy the generated code found below and paste it inside your http or server blocks.',
|
||||
'wp-smushit'
|
||||
)}
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<pre
|
||||
className="sui-code-snippet"
|
||||
style={{ marginLeft: '12px' }}
|
||||
>
|
||||
{smushData.nginxRules}
|
||||
</pre>
|
||||
<ol className="sui-description" start="3">
|
||||
<li>{__('Reload NGINX.', 'wp-smushit')}</li>
|
||||
</ol>
|
||||
|
||||
<p className="sui-description">
|
||||
{__('Still having trouble?', 'wp_smushit')}{' '}
|
||||
<a
|
||||
href={smushData.urls.support}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{__('Get Support.', 'wp_smushit')}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// TODO: The non-selected button isn't focusable this way. Why arrows don't workkkkkkk?
|
||||
return (
|
||||
<div className="sui-side-tabs sui-tabs">
|
||||
<div role="tablist" className="sui-tabs-menu">
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
id="smush-tab-automatic"
|
||||
className={
|
||||
'sui-tab-item' +
|
||||
('automatic' === rulesMethod ? ' active' : '')
|
||||
}
|
||||
aria-controls="smush-tab-content-automatic"
|
||||
aria-selected={'automatic' === rulesMethod}
|
||||
onClick={() => setRulesMethod('automatic')}
|
||||
tabIndex={'automatic' === rulesMethod ? '0' : '-1'}
|
||||
>
|
||||
{__('Automatic', 'wp-smushit')}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
id="smush-tab-manual"
|
||||
className={
|
||||
'sui-tab-item' +
|
||||
('manual' === rulesMethod ? ' active' : '')
|
||||
}
|
||||
aria-controls="smush-tab-content-manual"
|
||||
aria-selected={'manual' === rulesMethod}
|
||||
onClick={() => setRulesMethod('manual')}
|
||||
tabIndex={'manual' === rulesMethod ? '0' : '-1'}
|
||||
>
|
||||
{__('Manual', 'wp-smushit')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="sui-tabs-content">
|
||||
<div
|
||||
role="tabpanel"
|
||||
tabIndex="0"
|
||||
id="smush-tab-content-automatic"
|
||||
className={
|
||||
'sui-tab-content' +
|
||||
('automatic' === rulesMethod ? ' active' : '')
|
||||
}
|
||||
aria-labelledby="smush-tab-automatic"
|
||||
hidden={'automatic' !== rulesMethod}
|
||||
>
|
||||
<p
|
||||
className="sui-description"
|
||||
style={{ marginTop: '30px' }}
|
||||
>
|
||||
{__(
|
||||
'Please note: Some servers have both Apache and NGINX software which may not begin serving WebP images after applying the .htaccess rules. If errors occur after applying the rules, we recommend adding NGINX rules manually.',
|
||||
'wp-smushit'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
role="tabpanel"
|
||||
tabIndex="0"
|
||||
id="smush-tab-content-manual"
|
||||
className={
|
||||
'sui-tab-content' +
|
||||
('manual' === rulesMethod ? ' active' : '')
|
||||
}
|
||||
aria-labelledby="smush-tab-manual"
|
||||
hidden={'manual' !== rulesMethod}
|
||||
>
|
||||
<p className="sui-description">
|
||||
{__(
|
||||
'If you are unable to get the automated method working, follow these steps:',
|
||||
'wp-smushit'
|
||||
)}
|
||||
</p>
|
||||
|
||||
<div className="smush-wizard-rules-wrapper">
|
||||
<ol className="sui-description">
|
||||
<li>
|
||||
{__(
|
||||
'Copy the generated code below and paste it at the top of your .htaccess file (before any existing code) in the root directory.',
|
||||
'wp-smushit'
|
||||
)}
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<pre
|
||||
className="sui-code-snippet"
|
||||
style={{ marginLeft: '12px' }}
|
||||
>
|
||||
{smushData.apacheRules}
|
||||
</pre>
|
||||
<ol className="sui-description" start="2">
|
||||
<li>
|
||||
{__(
|
||||
"Next, click Check Status button below to see if it's working.",
|
||||
'wp-smushit'
|
||||
)}
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h5
|
||||
className="sui-settings-label"
|
||||
style={{
|
||||
marginTop: '30px',
|
||||
fontSize: '13px',
|
||||
color: '#333333',
|
||||
}}
|
||||
>
|
||||
{__('Troubleshooting', 'wp-smushit')}
|
||||
</h5>
|
||||
|
||||
<p className="sui-description">
|
||||
{__(
|
||||
'If .htaccess does not work, and you have access to vhosts.conf or httpd.conf, try this:',
|
||||
'wp-smushit'
|
||||
)}
|
||||
</p>
|
||||
|
||||
<ol className="sui-description">
|
||||
<li>
|
||||
{__(
|
||||
'Look for your site in the file and find the line that starts with <Directory> - add the code above that line and into that section and save the file.',
|
||||
'wp-smushit'
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
{__('Reload Apache.', 'wp-smushit')}
|
||||
</li>
|
||||
<li>
|
||||
{__(
|
||||
"If you don't know where those files are, or you aren't able to reload Apache, you would need to consult with your hosting provider or a system administrator who has access to change the configuration of your server.",
|
||||
'wp-smushit'
|
||||
)}
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p className="sui-description">
|
||||
{__('Still having trouble?', 'wp_smushit')}{' '}
|
||||
<a
|
||||
href={smushData.urls.support}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{__('Get Support.', 'wp_smushit')}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const hideWizard = (e) => {
|
||||
e.preventDefault();
|
||||
makeRequest('smush_toggle_webp_wizard').then(() => {
|
||||
location.href = smushData.urls.bulkPage;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<p style={{ marginBottom: 0 }}><b>{__('Convert Images to WebP', 'wp-smushit')}</b></p>
|
||||
<p className="sui-description" dangerouslySetInnerHTML={ { __html: smushData.thirdStepMsg } } />
|
||||
{!smushData.isMultisite && (
|
||||
<p>
|
||||
<a href={smushData.urls.bulkPage} onClick={hideWizard}>
|
||||
{__('Convert now', 'wp-smushit')}
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
const stepIndicatorText = sprintf(
|
||||
/* translators: currentStep/totalSteps indicator */
|
||||
__('Step %s', 'wp-smushit'),
|
||||
currentStep + '/3'
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`smush-wizard-steps-content-wrapper smush-wizard-step-${currentStep}`}
|
||||
>
|
||||
{getTopNotice()}
|
||||
<div className="smush-wizard-steps-content">
|
||||
<span className="smush-step-indicator">
|
||||
{stepIndicatorText}
|
||||
</span>
|
||||
<h2>{stepsHeading[currentStep].title}</h2>
|
||||
<p className="sui-description">
|
||||
{stepsHeading[currentStep].description}
|
||||
</p>
|
||||
{getStepContent()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,180 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
export default ({
|
||||
currentStep,
|
||||
setCurrentStep,
|
||||
serverType,
|
||||
rulesMethod,
|
||||
setRulesError,
|
||||
makeRequest,
|
||||
}) => {
|
||||
const genericRequestError = __(
|
||||
'Something went wrong with the request.',
|
||||
'wp-smushit'
|
||||
);
|
||||
|
||||
const checkStatus = () => {
|
||||
setRulesError(false);
|
||||
|
||||
makeRequest('smush_webp_get_status')
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
setCurrentStep(currentStep + 1);
|
||||
} else {
|
||||
setRulesError(res.data);
|
||||
}
|
||||
})
|
||||
.catch(() => setRulesError(genericRequestError));
|
||||
};
|
||||
|
||||
const applyRules = () => {
|
||||
setRulesError(false);
|
||||
|
||||
makeRequest('smush_webp_apply_htaccess_rules')
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
return checkStatus();
|
||||
}
|
||||
|
||||
setRulesError(res.data);
|
||||
})
|
||||
.catch(() => setRulesError(genericRequestError));
|
||||
};
|
||||
|
||||
const hideWizard = (e) => {
|
||||
e.currentTarget.classList.add(
|
||||
'sui-button-onload',
|
||||
'sui-button-onload-text'
|
||||
);
|
||||
makeRequest('smush_toggle_webp_wizard').then(() => location.reload());
|
||||
};
|
||||
|
||||
// Markup stuff.
|
||||
let buttonsLeft;
|
||||
|
||||
const quitButton = (
|
||||
<button
|
||||
type="button"
|
||||
className="sui-button sui-button-ghost"
|
||||
onClick={hideWizard}
|
||||
>
|
||||
<span className="sui-loading-text">
|
||||
<span className="sui-icon-logout" aria-hidden="true"></span>
|
||||
<span className="sui-hidden-xs">
|
||||
{__('Quit setup', 'wp-smushit')}
|
||||
</span>
|
||||
<span className="sui-hidden-sm sui-hidden-md sui-hidden-lg">
|
||||
{__('Quit', 'wp-smushit')}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
className="sui-icon-loader sui-loading"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</button>
|
||||
);
|
||||
|
||||
if (1 !== currentStep) {
|
||||
buttonsLeft = (
|
||||
<button
|
||||
type="button"
|
||||
className="sui-button sui-button-compound sui-button-ghost"
|
||||
onClick={() => setCurrentStep(currentStep - 1)}
|
||||
>
|
||||
<span className="sui-compound-desktop" aria-hidden="true">
|
||||
<span className="sui-icon-arrow-left"></span>
|
||||
{__('Previous', 'wp-smushit')}
|
||||
</span>
|
||||
|
||||
<span className="sui-compound-mobile" aria-hidden="true">
|
||||
<span className="sui-icon-arrow-left"></span>
|
||||
</span>
|
||||
|
||||
<span className="sui-screen-reader-text">
|
||||
{__('Previous', 'wp-smushit')}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const getButtonsRight = () => {
|
||||
if (1 === currentStep) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="sui-button sui-button-blue sui-button-icon-right"
|
||||
onClick={() => setCurrentStep(currentStep + 1)}
|
||||
>
|
||||
{__('Next', 'wp-smushit')}
|
||||
<span
|
||||
className="sui-icon-arrow-right"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
if (2 === currentStep) {
|
||||
if ('apache' === serverType && 'automatic' === rulesMethod) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="sui-button sui-button-blue"
|
||||
onClick={applyRules}
|
||||
>
|
||||
{__('Apply rules', 'wp-smushit')}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="sui-button sui-button-blue"
|
||||
onClick={checkStatus}
|
||||
>
|
||||
{__('Check status', 'wp-smushit')}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="sui-button sui-button-blue"
|
||||
onClick={hideWizard}
|
||||
>
|
||||
<span className="sui-button-text-default">
|
||||
{__('Finish', 'wp-smushit')}
|
||||
</span>
|
||||
|
||||
<span className="sui-button-text-onload">
|
||||
<span
|
||||
className="sui-icon-loader sui-loading"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
{__('Finishing setup…', 'wp-smushit')}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="sui-box-footer">
|
||||
<div className="sui-actions-left">
|
||||
{quitButton}
|
||||
{buttonsLeft}
|
||||
</div>
|
||||
<div className="sui-actions-right">{getButtonsRight()}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,114 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
export default ({ currentStep, smushData }) => {
|
||||
const getStepClass = (step) => {
|
||||
const stepClass = 'smush-wizard-bar-step';
|
||||
|
||||
if (!smushData.isPro) {
|
||||
return stepClass + ' disabled';
|
||||
}
|
||||
|
||||
if (step > currentStep) {
|
||||
return stepClass;
|
||||
}
|
||||
|
||||
return (
|
||||
stepClass +
|
||||
(step === currentStep ? ' current' : ' sui-tooltip done')
|
||||
);
|
||||
};
|
||||
|
||||
const getStepNumber = (step) => {
|
||||
return currentStep > step ? (
|
||||
<span className="sui-icon-check" aria-hidden="true"></span>
|
||||
) : (
|
||||
step
|
||||
);
|
||||
};
|
||||
|
||||
const steps = [
|
||||
{ number: 1, title: __('Server Type', 'wp-smushit') },
|
||||
{ number: 2, title: __('Add Rules', 'wp-smushit') },
|
||||
{ number: 3, title: __('Finish Setup', 'wp-smushit') },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="sui-sidenav">
|
||||
<span className="smush-wizard-bar-subtitle">
|
||||
{__('Setup', 'wp-smushit')}
|
||||
</span>
|
||||
<div className="smush-sidenav-title">
|
||||
<h4>{__('Local WebP', 'wp-smushit')}</h4>
|
||||
{!smushData.isPro && (
|
||||
<span className="sui-tag sui-tag-pro">
|
||||
{__('Pro', 'wp-smushit')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="smush-wizard-steps-container">
|
||||
<svg
|
||||
className="smush-svg-mobile"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<line
|
||||
x1="0"
|
||||
x2="50%"
|
||||
stroke={1 !== currentStep ? '#1ABC9C' : '#E6E6E6'}
|
||||
/>
|
||||
<line
|
||||
x1="50%"
|
||||
x2="100%"
|
||||
stroke={3 === currentStep ? '#1ABC9C' : '#E6E6E6'}
|
||||
/>
|
||||
</svg>
|
||||
<ul>
|
||||
{steps.map((step) => (
|
||||
<React.Fragment key={step.number}>
|
||||
<li
|
||||
className={getStepClass(step.number)}
|
||||
data-tooltip={__(
|
||||
'This stage is already completed.',
|
||||
'wp-smushit'
|
||||
)}
|
||||
>
|
||||
<div className="smush-wizard-bar-step-number">
|
||||
{getStepNumber(step.number)}
|
||||
</div>
|
||||
{step.title}
|
||||
</li>
|
||||
{3 !== step.number && (
|
||||
<svg
|
||||
data={step.number}
|
||||
data2={currentStep}
|
||||
className="smush-svg-desktop"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<line
|
||||
y1="0"
|
||||
y2="40px"
|
||||
stroke={
|
||||
step.number < currentStep
|
||||
? '#1ABC9C'
|
||||
: '#E6E6E6'
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user