Skip to content

Commit 0c5ae1d

Browse files
selulselul
committed
Update dependencies and enhance lazy loading features
- Updated the version of the optimole-sdk to v1.2.2 in composer.lock. - Added new CSS variables for improved styling in the dashboard. - Introduced a new radio control for lazy loading behavior options. - Enhanced the settings for retina images and lazy loading configurations. - Refactored code to improve clarity and maintainability across various components.
1 parent 6830ea9 commit 0c5ae1d

25 files changed

+792
-266
lines changed

‎assets/src/dashboard/parts/connected/settings/CloudLibrary.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -86,15 +86,17 @@ export default function CloudLibrary( props ) {
8686
onChange={value => updateOption( 'cloud_images', value )}
8787
/>
8888

89-
<div className="m-0">
90-
<a href={options_strings.cloud_library_btn_link} className="font-semibold text-info text-sm hover:text-info inline-flex items-center">
91-
{options_strings.cloud_library_btn_text}
92-
<Icon
89+
{isCloudLibraryEnabled && (
90+
<div className="m-0">
91+
<a href={options_strings.cloud_library_btn_link} className="font-semibold text-info text-sm hover:text-info inline-flex items-center">
92+
{options_strings.cloud_library_btn_text}
93+
<Icon
9394
icon={arrowRight}
9495
className="inline-block ml-2 fill-current"
9596
/>
96-
</a>
97-
</div>
97+
</a>
98+
</div>
99+
)}
98100

99101
<hr className="my-8 border-grayish-blue"/>
100102

‎assets/src/dashboard/parts/connected/settings/Compression.js

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,12 @@ const Compression = ({
5252

5353
const isNetworkOptimizationEnabled = 'disabled' !== settings[ 'network_optimization' ];
5454
const isCDNEnabled = 'disabled' !== settings.cdn;
55-
const isGIFReplacementEnabled = 'disabled' !== settings[ 'img_to_video' ];
5655
const isAVIFEnabled = 'disabled' !== settings.avif;
5756
const isStripMetadataEnabled = 'disabled' !== settings[ 'strip_metadata' ];
5857
const isAutoQualityEnabled = 'disabled' !== settings.autoquality;
5958
const isBestFormatEnabled = 'disabled' !== settings[ 'best_format' ];
6059

60+
const isRetinaEnabled = 'disabled' !== settings[ 'retina_images' ];
6161
const updateOption = ( option, value ) => {
6262
setCanSave( true );
6363
const data = { ...settings };
@@ -133,6 +133,19 @@ const Compression = ({
133133

134134
<hr className="my-8 border-grayish-blue"/>
135135

136+
<ToggleControl
137+
label={ optimoleDashboardApp.strings.options_strings.enable_retina_title }
138+
help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.enable_retina_desc } } /> }
139+
checked={ isRetinaEnabled }
140+
disabled={ isLoading }
141+
className={ classnames(
142+
{
143+
'is-disabled': isLoading
144+
}
145+
) }
146+
onChange={ value => updateOption( 'retina_images', value ) }
147+
/>
148+
<hr className="my-8 border-grayish-blue"/>
136149
<ToggleControl
137150
label={ optimoleDashboardApp.strings.options_strings.enable_network_opt_title }
138151
help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.enable_network_opt_desc } } /> }
@@ -163,20 +176,6 @@ const Compression = ({
163176

164177
<hr className="my-8 border-grayish-blue"/>
165178

166-
<ToggleControl
167-
label={ optimoleDashboardApp.strings.options_strings.enable_gif_replace_title }
168-
help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.gif_replacer_desc } } /> }
169-
checked={ isGIFReplacementEnabled }
170-
disabled={ isLoading }
171-
className={ classnames(
172-
{
173-
'is-disabled': isLoading
174-
}
175-
) }
176-
onChange={ value => updateOption( 'img_to_video', value ) }
177-
/>
178-
179-
<hr className="my-8 border-grayish-blue"/>
180179

181180
<ToggleControl
182181
label={ optimoleDashboardApp.strings.options_strings.enable_avif_title }

‎assets/src/dashboard/parts/connected/settings/Lazyload.js

Lines changed: 69 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
ColorPicker,
1515
ColorIndicator,
1616
Button,
17+
RadioControl,
1718
Popover
1819
} from '@wordpress/components';
1920

@@ -36,7 +37,6 @@ const Lazyload = ({
3637

3738
const isLazyloadPlaceholderEnabled = 'disabled' !== settings[ 'lazyload_placeholder' ];
3839
const isNativeLazyloadEnabled = 'disabled' !== settings[ 'native_lazyload' ];
39-
const isScaleEnabled = 'disabled' === settings.scale;
4040
const isBGReplacerEnabled = 'disabled' !== settings[ 'bg_replacer' ];
4141
const isVideoLazyloadEnabled = 'disabled' !== settings[ 'video_lazyload' ];
4242
const isNoScriptEnabled = 'disabled' !== settings[ 'no_script' ];
@@ -64,6 +64,74 @@ const Lazyload = ({
6464

6565
return (
6666
<>
67+
<BaseControl className="mt-2" label={optimoleDashboardApp.strings.options_strings.lazyload_behaviour_title}>
68+
<p className="components-base-control__help mt-0" dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.lazyload_behaviour_desc } } />
69+
70+
<div className="flex gap-8 ml-4">
71+
<RadioControl
72+
labelPosition="side"
73+
className="lazyload_behaviour"
74+
selected={settings['lazyload_type'] || 'lazyload_all'}
75+
options={ [
76+
{
77+
label: (
78+
<div>
79+
<strong>{optimoleDashboardApp.strings.options_strings.lazyload_behaviour_fixed.replace('[N]', settings['skip_lazyload_images'])}</strong>
80+
{settings['lazyload_type'] === 'fixed' && (
81+
<>
82+
<p className="mt-2 text-sm text-gray-600">
83+
{optimoleDashboardApp.strings.options_strings.lazyload_behaviour_fixed_desc}
84+
</p>
85+
<div className="mt-3 flex gap-8">
86+
<NumberControl
87+
label={ optimoleDashboardApp.strings.options_strings.exclude_first }
88+
labelPosition="side"
89+
value={ settings[ 'skip_lazyload_images' ] }
90+
type="number"
91+
min={ 0 }
92+
className="basis-1/2 md:basis-1/3"
93+
onChange={value => updateValue('skip_lazyload_images', value)}
94+
/>
95+
</div>
96+
</>
97+
)}
98+
</div>
99+
),
100+
value: 'fixed'
101+
},
102+
{
103+
label: (
104+
<div>
105+
<strong>{optimoleDashboardApp.strings.options_strings.lazyload_behaviour_viewport}</strong>
106+
{settings['lazyload_type'] === 'viewport' && (
107+
<p className="mt-2 text-sm text-gray-600">
108+
{optimoleDashboardApp.strings.options_strings.lazyload_behaviour_viewport_desc}
109+
</p>
110+
)}
111+
</div>
112+
),
113+
value: 'viewport'
114+
},
115+
{
116+
label: (
117+
<div >
118+
<strong>{optimoleDashboardApp.strings.options_strings.lazyload_behaviour_all}</strong>
119+
{settings['lazyload_type'] === 'all' && (
120+
<p className="mt-2 text-sm text-gray-600">
121+
{optimoleDashboardApp.strings.options_strings.lazyload_behaviour_all_desc}
122+
</p>
123+
)}
124+
</div>
125+
),
126+
value: 'all'
127+
}
128+
] }
129+
onChange={value => updateValue('lazyload_type', value)}
130+
/>
131+
</div>
132+
</BaseControl>
133+
134+
<hr className="my-8 border-grayish-blue"/>
67135
<BaseControl>
68136
<ToggleControl
69137
label={ optimoleDashboardApp.strings.options_strings.enable_lazyload_placeholder_title }
@@ -118,29 +186,6 @@ const Lazyload = ({
118186

119187
<hr className="my-8 border-grayish-blue"/>
120188

121-
<BaseControl
122-
label={ optimoleDashboardApp.strings.options_strings.exclude_first_images_title }
123-
>
124-
<p
125-
className="components-base-control__help mt-0"
126-
dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.exclude_first_images_desc } }
127-
/>
128-
129-
<div className="flex gap-8">
130-
<NumberControl
131-
label={ optimoleDashboardApp.strings.options_strings.exclude_first }
132-
labelPosition="side"
133-
value={ settings[ 'skip_lazyload_images' ] }
134-
type="number"
135-
min={ 0 }
136-
className="basis-1/2 md:basis-1/3"
137-
onChange={ value => updateValue( 'skip_lazyload_images', value ) }
138-
/>
139-
</div>
140-
</BaseControl>
141-
142-
<hr className="my-8 border-grayish-blue"/>
143-
144189
<ToggleControl
145190
label={ optimoleDashboardApp.strings.options_strings.toggle_native }
146191
help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.native_desc } } /> }
@@ -156,20 +201,6 @@ const Lazyload = ({
156201

157202
<hr className="my-8 border-grayish-blue"/>
158203

159-
<ToggleControl
160-
label={ optimoleDashboardApp.strings.options_strings.toggle_scale }
161-
help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.scale_desc } } /> }
162-
checked={ isScaleEnabled }
163-
disabled={ isLoading }
164-
className={ classnames(
165-
{
166-
'is-disabled': isLoading
167-
}
168-
) }
169-
onChange={ value => updateOption( 'scale', ! value ) }
170-
/>
171-
172-
<hr className="my-8 border-grayish-blue"/>
173204

174205

175206
<ToggleControl

‎assets/src/dashboard/parts/connected/settings/Resize.js

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,10 @@ const Resize = ({
3636
const [ height, setHeight ] = useState( '' );
3737

3838
const isSmartResizeEnabled = 'disabled' !== settings[ 'resize_smart' ];
39-
const isRetinaEnabled = 'disabled' !== settings[ 'retina_images' ];
4039
const isLimitDimensionsEnabled = 'disabled' !== settings[ 'limit_dimensions' ];
4140

41+
const isLazyloadEnabled = 'disabled' !== settings.lazyload;
42+
const isScaleEnabled = 'disabled' === settings.scale;
4243
const updateOption = ( option, value ) => {
4344
setCanSave( true );
4445
const data = { ...settings };
@@ -108,21 +109,26 @@ const Resize = ({
108109

109110
<hr className="my-8 border-grayish-blue"/>
110111

111-
{ 'disabled' !== settings.lazyload && ( <> <ToggleControl
112-
label={ optimoleDashboardApp.strings.options_strings.enable_retina_title }
113-
help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.enable_retina_desc } } /> }
114-
checked={ isRetinaEnabled }
115-
disabled={ isLoading }
116-
className={ classnames(
112+
113+
114+
{isLazyloadEnabled && (
115+
<>
116+
<ToggleControl
117+
label={ optimoleDashboardApp.strings.options_strings.toggle_scale }
118+
help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.scale_desc } } /> }
119+
checked={ isScaleEnabled }
120+
disabled={ isLoading }
121+
className={ classnames(
117122
{
118123
'is-disabled': isLoading
119124
}
120125
) }
121-
onChange={ value => updateOption( 'retina_images', value ) }
122-
/> <hr className="my-8 border-grayish-blue"/> </> )
123-
}
124-
126+
onChange={ value => updateOption( 'scale', ! value ) }
127+
/>
128+
<hr className="my-8 border-grayish-blue"/> </>
129+
) }
125130

131+
126132
<ToggleControl
127133
label={ optimoleDashboardApp.strings.options_strings.enable_limit_dimensions_title }
128134
help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.enable_limit_dimensions_desc } } /> }
@@ -162,8 +168,6 @@ const Resize = ({
162168
/>
163169
</div>
164170

165-
<Notice disableIcon type='warning' text={optimoleDashboardApp.strings.options_strings.enable_limit_dimensions_notice}/>
166-
167171
</BaseControl>
168172
) }
169173

‎assets/src/dashboard/style.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ $mango-yellow: #FBBF24;
2424
}
2525

2626
#optimole-app {
27+
2728
--wp-admin-theme-color: #577BF9;
2829
--wp-components-color-foreground: #577BF9;
2930
--optml-progress: #577BF9;
@@ -195,6 +196,12 @@ $mango-yellow: #FBBF24;
195196
.components-toggle-control__help{
196197
margin-inline-start: 0px;
197198
}
199+
.lazyload_behaviour {
200+
.components-radio-control__option {
201+
align-items: flex-start;
202+
margin-top:1em;
203+
}
204+
}
198205
}
199206

200207
.optml {

‎composer.lock

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)