PluginProbe ʕ •ᴥ•ʔ
ShopPress – Shop Builder for Elementor and WooCommerce / trunk
ShopPress – Shop Builder for Elementor and WooCommerce vtrunk
shop-press / blocks / src / styler.js
shop-press / blocks / src Last commit date
cart 1 month ago checkout 1 month ago compare 1 month ago empty-cart 1 month ago icons 1 year ago loop 2 years ago my-account 1 month ago my-wishlist 1 month ago product 1 year ago shop 1 year ago single-product 1 month ago thankyou 1 month ago styler.js 1 year ago wrapper.js 2 years ago
styler.js
209 lines
1 import md5 from 'md5';
2 import { store as editPostStore } from '@wordpress/edit-post';
3 import { useSelect, useDispatch } from '@wordpress/data';
4 import { store as blockEditorStore } from '@wordpress/block-editor';
5 import { ReactComponent as Styler_icon } from '../src/icons/styler-icon.svg';
6
7
8 function Styler( props ) {
9 const { deviceType } = useSelect( ( select ) => {
10 return {
11 deviceType:
12 select( editPostStore ).__experimentalGetPreviewDeviceType(),
13 };
14 }, [] );
15
16 const { attributes, setAttributes } = props;
17
18 if ( styler.currentSelectedBlock !== props.clientId ) {
19 styler.currentSelectedBlock = props.clientId;
20 wp.hooks.doAction( 'StylerNeedsDestroy', 'GutenbergStyler' );
21 }
22
23 const md5Code = md5( props.selector );
24
25 var wrapper = props.wrapper;
26
27 var stylerData = attributes[ 'styler' ];
28
29 if ( ! props.clientId ) {
30 return false;
31 }
32
33 if ( styler ) {
34 if (
35 typeof styler.GeneratedStyles.gutenberg[ 'wrappers' ] ===
36 'undefined'
37 ) {
38 styler.GeneratedStyles.gutenberg[ 'wrappers' ] = {};
39 }
40 }
41
42 if ( styler.GeneratedStyles.gutenberg[ 'wrappers' ][ props.clientId ] ) {
43 if (
44 styler.GeneratedStyles.gutenberg[ 'wrappers' ][ props.clientId ] !==
45 props.wrapperID
46 ) {
47 wrapper = wrapper.replaceAll(
48 attributes[ 'wrapperID' ],
49 styler.GeneratedStyles.gutenberg[ 'wrappers' ][ props.clientId ]
50 );
51 }
52 }
53
54 const match = stylerData.match( /.wrapper-(.*?) / );
55
56 if ( match && wrapper !== match[ 0 ].trim() ) {
57 stylerData = stylerData.replaceAll( match[ 0 ].trim(), wrapper );
58
59 const cidReg = new RegExp( /\"cid\":\"(.*?)\"/, 'g' );
60
61 let cidMatch;
62 while ( ( cidMatch = cidReg.exec( stylerData ) ) ) {
63 var newCid = Math.floor(
64 window.performance &&
65 window.performance.now &&
66 window.performance.timeOrigin
67 ? window.performance.now() + window.performance.timeOrigin
68 : Date.now()
69 ).toString();
70 stylerData = stylerData.replaceAll( cidMatch[ 1 ].trim(), newCid );
71 }
72
73 if ( typeof props.setAttributes !== 'undefined' ) {
74 props.setAttributes( {
75 styler: stylerData,
76 } );
77 }
78 wp.hooks.doAction(
79 'StylerNeedsUpdateLive',
80 'GutenbergStyler',
81 stylerData
82 );
83 }
84
85 if ( styler.ActiveDevice !== deviceType ) {
86 styler.ActiveDevice = deviceType;
87 if ( styler.doDestroy === true ) {
88 styler.doDestroy = false;
89 wp.hooks.doAction( 'StylerNeedsDestroy', 'GutenbergStyler' );
90 }
91 wp.hooks.doAction(
92 'StylerNeedsUpdateLive',
93 'GutenbergStyler',
94 stylerData
95 );
96 }
97
98 stylerData = JSON.parse( stylerData );
99
100 var dataObject = {};
101
102 if ( ! stylerData ) {
103 dataObject = {
104 cid: '',
105 data: {},
106 };
107 } else if ( typeof stylerData[ md5Code ] === 'undefined' ) {
108 dataObject = {
109 cid: '',
110 data: {},
111 };
112 } else {
113 dataObject = stylerData[ md5Code ];
114 }
115
116 const handleChanges = ( key, value ) => {
117 switch ( key ) {
118 case 'cid':
119 dataObject[ 'cid' ] = value;
120 break;
121 case 'data':
122 dataObject[ 'data' ] = value;
123 break;
124 }
125
126 stylerData[ md5Code ] = dataObject;
127
128 wp.hooks.doAction(
129 'StylerNeedsUpdateLive',
130 'GutenbergStyler',
131 stylerData
132 );
133 setAttributes( {
134 styler: JSON.stringify( stylerData ),
135 } );
136 };
137
138 return (
139 <div className="climax-style">
140 <div className="gutenberg-styler-control-field">
141 <div className="gutenberg-styler-control-input-wrapper">
142 <label className="gutenberg-control-title">
143 { props.label }
144 </label>
145 <div
146 className="tmp-styler-gutenberg-dialog-btn"
147 data-title={ props.label }
148 data-id="gutenberg"
149 data-parent-id=""
150 data-selector={ props.selector }
151 data-wrapper={ wrapper }
152 data-type=""
153 data-active-device={ deviceType.toLowerCase() }
154 data-field-id={ md5Code }
155 data-is-svg={ props.isSVG }
156 data-is-input={ props.isInput }
157 data-hover-selector={ props.hoverSelector }
158 >
159 <input
160 type="hidden"
161 value={
162 typeof dataObject[ 'data' ] === 'string'
163 ? dataObject[ 'data' ]
164 : JSON.stringify( dataObject[ 'data' ] )
165 }
166 data-setting="stdata"
167 onInput={ ( input ) => {
168 var value = input.target.value;
169 handleChanges( 'data', value );
170 } }
171 />
172 <input
173 type="hidden"
174 value={ dataObject[ 'cid' ] }
175 data-setting="cid"
176 onInput={ ( input ) => {
177 var value = input.target.value;
178 handleChanges( 'cid', value );
179 } }
180 />
181
182 <Styler_icon/>
183
184 </div>
185 </div>
186 </div>
187 { typeof props.description !== 'undefined' ? (
188 <div className="gutenberg-styler-control-field-description">
189 { props.description }
190 </div>
191 ) : (
192 ''
193 ) }
194 </div>
195 );
196 }
197
198 Styler.defaultProps = {
199 label: '',
200 selector: '',
201 wrapper: '',
202 isSVG: false,
203 isInput: false,
204 hoverSelector: '',
205 description: '',
206 };
207
208 export default Styler;
209