← All changes | assets/src/apps/js/blocks/course-elements/course-image/edit.js +171 -171 4.3.8 → 4.4.9 View file →

		@@ -1,171 +1,171 @@
1		-import { __ } from '@wordpress/i18n';
2		-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
3		-import {
4		- PanelBody,
5		- ToggleControl,
6		- SelectControl,
7		- __experimentalInputControl as InputControl,
8		-} from '@wordpress/components';
9		-
10		-export const edit = ( props ) => {
11		- const { attributes, setAttributes, context } = props;
12		- const blockProps = useBlockProps();
13		- const { lpCourseData } = context;
14		- const courseImage =
15		- lpCourseData?.image ||
16		- '<div class="course-img"><img src="/wp-content/plugins/learnpress/assets/images/no-image.png" alt="course thumbnail placeholder"</div>';
17		-
18		- const sizeOption = [
19		- { label: 'Thumbnail', value: 'thumbnail' },
20		- { label: 'Medium', value: 'medium' },
21		- { label: 'Large', value: 'large' },
22		- { label: 'Full', value: 'full' },
23		- { label: 'Custom', value: 'custom' },
24		- ];
25		-
26		- const getStyledCourseImage = () => {
27		- if (
28		- lpCourseData?.image &&
29		- attributes.size === 'custom' &&
30		- attributes.customWidth === 500 &&
31		- attributes.customHeight === 300
32		- ) {
33		- return lpCourseData?.image;
34		- }
35		-
36		- let width = 2560;
37		- let height = 2560;
38		-
39		- if ( attributes.size === 'thumbnail' ) {
40		- width = 150;
41		- height = 150;
42		- }
43		-
44		- if ( attributes.size === 'medium' ) {
45		- width = 300;
46		- height = 300;
47		- }
48		-
49		- if ( attributes.size === 'large' ) {
50		- width = 1024;
51		- height = 724;
52		- }
53		-
54		- if ( attributes.size === 'full' ) {
55		- width = 2560;
56		- height = 2560;
57		- }
58		-
59		- if ( attributes.size === 'custom' ) {
60		- if ( attributes.customWidth && attributes.customWidth > 0 ) {
61		- width = attributes.customWidth;
62		- }
63		- if ( attributes.customHeight && attributes.customHeight > 0 ) {
64		- height = attributes.customHeight;
65		- }
66		-
67		- if ( attributes.customWidth == 0 ) {
68		- width = 2560;
69		- }
70		-
71		- if ( attributes.customHeight == 0 ) {
72		- width = 2560;
73		- }
74		- }
75		-
76		- const ratio = width / height;
77		- return `<div class="course-img"><img src="/wp-content/plugins/learnpress/assets/images/no-image.png" width="${ width }" height="${ height }" style="aspect-ratio: ${ ratio }; object-fit:cover;" alt="course thumbnail placeholder"</div>`;
78		- };
79		-
80		- return (
81		- <>
82		- <InspectorControls>
83		- <PanelBody title={ __( 'Settings', 'learnpress' ) }>
84		- <SelectControl
85		- label={ __( 'Size', 'learnpress' ) }
86		- value={ props.attributes.size }
87		- options={ sizeOption }
88		- onChange={ ( value ) => {
89		- if ( value !== 'custom' ) {
90		- setAttributes( { customWidth: 500, customHeight: 300 } );
91		- }
92		- setAttributes( { size: value } );
93		- } }
94		- />
95		-
96		- { props.attributes.size === 'custom' ? (
97		- <div style={ { display: 'flex', gap: '12px' } }>
98		- <InputControl
99		- label={ __( 'Width', 'learnpress' ) }
100		- type="number"
101		- min={ 0 }
102		- style={ { flex: 1 } }
103		- placeholder={ __( 'Auto', 'learnpress' ) }
104		- suffix={ <div style={ { marginRight: '8px' } }>{ __( 'px', 'learnpress' ) }</div> }
105		- value={ props.attributes.customWidth }
106		- onChange={ ( value ) => {
107		- const numValue = parseInt( value, 10 );
108		- if ( ! isNaN( Number( numValue ) ) && numValue >= 0 ) {
109		- setAttributes( { customWidth: Number( numValue ) } );
110		- } else {
111		- setAttributes( { customWidth: 500 } );
112		- }
113		- } }
114		- />
115		- <InputControl
116		- label={ __( 'Height', 'learnpress' ) }
117		- type="number"
118		- min={ 0 }
119		- style={ { flex: 1 } }
120		- placeholder={ __( 'Auto', 'learnpress' ) }
121		- suffix={ <div style={ { marginRight: '8px' } }>{ __( 'px', 'learnpress' ) }</div> }
122		- value={ props.attributes.customHeight }
123		- onChange={ ( value ) => {
124		- const numValue = parseInt( value, 10 );
125		- if ( ! isNaN( Number( numValue ) ) && numValue >= 0 ) {
126		- setAttributes( { customHeight: Number( numValue ) } );
127		- } else {
128		- setAttributes( { customHeight: 300 } );
129		- }
130		- } }
131		- />
132		- </div>
133		- ) : (
134		- ''
135		- ) }
136		-
137		- <ToggleControl
138		- label={ __( 'Make the image a link', 'learnpress' ) }
139		- checked={ props.attributes.isLink ? true : false }
140		- onChange={ ( value ) => {
141		- props.setAttributes( {
142		- isLink: value ? true : false,
143		- } );
144		- } }
145		- />
146		- { props.attributes.isLink ? (
147		- <ToggleControl
148		- label={ __( 'Open is new tab', 'learnpress' ) }
149		- checked={ props.attributes.target ? true : false }
150		- onChange={ ( value ) => {
151		- props.setAttributes( {
152		- target: value ? true : false,
153		- } );
154		- } }
155		- />
156		- ) : (
157		- ''
158		- ) }
159		- </PanelBody>
160		- </InspectorControls>
161		- <a>
162		- <div
163		- { ...blockProps }
164		- dangerouslySetInnerHTML={ {
165		- __html: getStyledCourseImage() || courseImage,
166		- } }
167		- ></div>
168		- </a>
169		- </>
170		- );
171		-};
	1	+import { __ } from '@wordpress/i18n';
	2	+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
	3	+import {
	4	+ PanelBody,
	5	+ ToggleControl,
	6	+ SelectControl,
	7	+ __experimentalInputControl as InputControl,
	8	+} from '@wordpress/components';
	9	+
	10	+export const edit = ( props ) => {
	11	+ const { attributes, setAttributes, context } = props;
	12	+ const blockProps = useBlockProps();
	13	+ const { lpCourseData } = context;
	14	+ const courseImage =
	15	+ lpCourseData?.image ||
	16	+ '<div class="course-img"><img src="/wp-content/plugins/learnpress/assets/images/no-image.png" alt="course thumbnail placeholder"</div>';
	17	+
	18	+ const sizeOption = [
	19	+ { label: 'Thumbnail', value: 'thumbnail' },
	20	+ { label: 'Medium', value: 'medium' },
	21	+ { label: 'Large', value: 'large' },
	22	+ { label: 'Full', value: 'full' },
	23	+ { label: 'Custom', value: 'custom' },
	24	+ ];
	25	+
	26	+ const getStyledCourseImage = () => {
	27	+ if (
	28	+ lpCourseData?.image &&
	29	+ attributes.size === 'custom' &&
	30	+ attributes.customWidth === 500 &&
	31	+ attributes.customHeight === 300
	32	+ ) {
	33	+ return lpCourseData?.image;
	34	+ }
	35	+
	36	+ let width = 2560;
	37	+ let height = 2560;
	38	+
	39	+ if ( attributes.size === 'thumbnail' ) {
	40	+ width = 150;
	41	+ height = 150;
	42	+ }
	43	+
	44	+ if ( attributes.size === 'medium' ) {
	45	+ width = 300;
	46	+ height = 300;
	47	+ }
	48	+
	49	+ if ( attributes.size === 'large' ) {
	50	+ width = 1024;
	51	+ height = 724;
	52	+ }
	53	+
	54	+ if ( attributes.size === 'full' ) {
	55	+ width = 2560;
	56	+ height = 2560;
	57	+ }
	58	+
	59	+ if ( attributes.size === 'custom' ) {
	60	+ if ( attributes.customWidth && attributes.customWidth > 0 ) {
	61	+ width = attributes.customWidth;
	62	+ }
	63	+ if ( attributes.customHeight && attributes.customHeight > 0 ) {
	64	+ height = attributes.customHeight;
	65	+ }
	66	+
	67	+ if ( attributes.customWidth == 0 ) {
	68	+ width = 2560;
	69	+ }
	70	+
	71	+ if ( attributes.customHeight == 0 ) {
	72	+ width = 2560;
	73	+ }
	74	+ }
	75	+
	76	+ const ratio = width / height;
	77	+ return `<div class="course-img"><img src="/wp-content/plugins/learnpress/assets/images/no-image.png" width="${ width }" height="${ height }" style="aspect-ratio: ${ ratio }; object-fit:cover;" alt="course thumbnail placeholder"</div>`;
	78	+ };
	79	+
	80	+ return (
	81	+ <>
	82	+ <InspectorControls>
	83	+ <PanelBody title={ __( 'Settings', 'learnpress' ) }>
	84	+ <SelectControl
	85	+ label={ __( 'Size', 'learnpress' ) }
	86	+ value={ props.attributes.size }
	87	+ options={ sizeOption }
	88	+ onChange={ ( value ) => {
	89	+ if ( value !== 'custom' ) {
	90	+ setAttributes( { customWidth: 500, customHeight: 300 } );
	91	+ }
	92	+ setAttributes( { size: value } );
	93	+ } }
	94	+ />
	95	+
	96	+ { props.attributes.size === 'custom' ? (
	97	+ <div style={ { display: 'flex', gap: '12px' } }>
	98	+ <InputControl
	99	+ label={ __( 'Width', 'learnpress' ) }
	100	+ type="number"
	101	+ min={ 0 }
	102	+ style={ { flex: 1 } }
	103	+ placeholder={ __( 'Auto', 'learnpress' ) }
	104	+ suffix={ <div style={ { marginRight: '8px' } }>{ __( 'px', 'learnpress' ) }</div> }
	105	+ value={ props.attributes.customWidth }
	106	+ onChange={ ( value ) => {
	107	+ const numValue = parseInt( value, 10 );
	108	+ if ( ! isNaN( Number( numValue ) ) && numValue >= 0 ) {
	109	+ setAttributes( { customWidth: Number( numValue ) } );
	110	+ } else {
	111	+ setAttributes( { customWidth: 500 } );
	112	+ }
	113	+ } }
	114	+ />
	115	+ <InputControl
	116	+ label={ __( 'Height', 'learnpress' ) }
	117	+ type="number"
	118	+ min={ 0 }
	119	+ style={ { flex: 1 } }
	120	+ placeholder={ __( 'Auto', 'learnpress' ) }
	121	+ suffix={ <div style={ { marginRight: '8px' } }>{ __( 'px', 'learnpress' ) }</div> }
	122	+ value={ props.attributes.customHeight }
	123	+ onChange={ ( value ) => {
	124	+ const numValue = parseInt( value, 10 );
	125	+ if ( ! isNaN( Number( numValue ) ) && numValue >= 0 ) {
	126	+ setAttributes( { customHeight: Number( numValue ) } );
	127	+ } else {
	128	+ setAttributes( { customHeight: 300 } );
	129	+ }
	130	+ } }
	131	+ />
	132	+ </div>
	133	+ ) : (
	134	+ ''
	135	+ ) }
	136	+
	137	+ <ToggleControl
	138	+ label={ __( 'Make the image a link', 'learnpress' ) }
	139	+ checked={ props.attributes.isLink ? true : false }
	140	+ onChange={ ( value ) => {
	141	+ props.setAttributes( {
	142	+ isLink: value ? true : false,
	143	+ } );
	144	+ } }
	145	+ />
	146	+ { props.attributes.isLink ? (
	147	+ <ToggleControl
	148	+ label={ __( 'Open is new tab', 'learnpress' ) }
	149	+ checked={ props.attributes.target ? true : false }
	150	+ onChange={ ( value ) => {
	151	+ props.setAttributes( {
	152	+ target: value ? true : false,
	153	+ } );
	154	+ } }
	155	+ />
	156	+ ) : (
	157	+ ''
	158	+ ) }
	159	+ </PanelBody>
	160	+ </InspectorControls>
	161	+ <a>
	162	+ <div
	163	+ { ...blockProps }
	164	+ dangerouslySetInnerHTML={ {
	165	+ __html: getStyledCourseImage() || courseImage,
	166	+ } }
	167	+ ></div>
	168	+ </a>
	169	+ </>
	170	+ );
	171	+};