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
wrapper.js
144 lines
| 1 | const ManageWrapperID = ( clientId, attributes, ...props ) => { |
| 2 | if ( ! clientId ) { |
| 3 | return; |
| 4 | } |
| 5 | |
| 6 | if ( styler ) { |
| 7 | if ( |
| 8 | typeof styler.GeneratedStyles.gutenberg[ 'wrappers' ] === |
| 9 | 'undefined' |
| 10 | ) { |
| 11 | styler.GeneratedStyles.gutenberg[ 'wrappers' ] = {}; |
| 12 | } |
| 13 | } |
| 14 | |
| 15 | const pageID = styler.currentPageID |
| 16 | ? styler.currentPageID |
| 17 | : wp.data.select( 'core/editor' ).getCurrentPostId(); |
| 18 | |
| 19 | const newWrapperID = |
| 20 | 'wrapper-' + |
| 21 | Date.now().toString( 36 ) + |
| 22 | Math.random().toString( 36 ).substr( 20 ) + |
| 23 | '-' + |
| 24 | pageID; |
| 25 | |
| 26 | styler.GeneratedStyles.gutenberg[ 'wrappers' ][ clientId ] = newWrapperID; |
| 27 | |
| 28 | return newWrapperID; |
| 29 | }; |
| 30 | |
| 31 | const isValidWrapper = ( wrapper, clientId ) => { |
| 32 | var validate = true; |
| 33 | |
| 34 | var pageID = styler.currentPageID |
| 35 | ? styler.currentPageID |
| 36 | : wp.data.select( 'core/editor' ).getCurrentPostId(); |
| 37 | const arrayString = wrapper.split( '-' ); |
| 38 | |
| 39 | pageID = pageID === null ? '' : pageID; |
| 40 | |
| 41 | if ( arrayString.at( -1 ).toString() !== pageID.toString() ) { |
| 42 | return false; |
| 43 | } |
| 44 | |
| 45 | var wrappers = styler.GeneratedStyles.gutenberg[ 'wrappers' ]; |
| 46 | Object.keys( wrappers ).map( ( key ) => { |
| 47 | if ( wrappers[ key ] === wrapper && key !== clientId ) { |
| 48 | validate = false; |
| 49 | } |
| 50 | } ); |
| 51 | |
| 52 | return validate; |
| 53 | }; |
| 54 | |
| 55 | function Wrapper( props ) { |
| 56 | const { TagName, clientId, children, attributes, className } = props; |
| 57 | var classname = typeof className === 'undefined' ? '' : className; |
| 58 | |
| 59 | if ( ! clientId ) { |
| 60 | var wrapperID = ''; |
| 61 | |
| 62 | if ( attributes ) { |
| 63 | wrapperID = attributes[ 'wrapperID' ]; |
| 64 | } |
| 65 | |
| 66 | if ( wrapperID && typeof classname !== 'undefined' ) { |
| 67 | classname = classname + ' ' + wrapperID; |
| 68 | } else { |
| 69 | classname = wrapperID; |
| 70 | } |
| 71 | |
| 72 | return wp.element.createElement( |
| 73 | TagName, |
| 74 | { ...props, className: classname }, |
| 75 | children |
| 76 | ); |
| 77 | } |
| 78 | |
| 79 | if ( styler ) { |
| 80 | if ( typeof styler.GeneratedStyles === 'undefined' ) { |
| 81 | styler.GeneratedStyles = {}; |
| 82 | } |
| 83 | |
| 84 | if ( typeof styler.GeneratedStyles.gutenberg === 'undefined' ) { |
| 85 | styler.GeneratedStyles.gutenberg = {}; |
| 86 | } |
| 87 | |
| 88 | if ( |
| 89 | typeof styler.GeneratedStyles.gutenberg[ 'wrappers' ] === |
| 90 | 'undefined' |
| 91 | ) { |
| 92 | styler.GeneratedStyles.gutenberg[ 'wrappers' ] = {}; |
| 93 | } |
| 94 | } |
| 95 | |
| 96 | var wrapperID = attributes[ 'wrapperID' ]; |
| 97 | |
| 98 | if ( |
| 99 | typeof styler?.GeneratedStyles?.gutenberg?.[ 'wrappers' ]?.[ |
| 100 | clientId |
| 101 | ] === 'undefined' |
| 102 | ) { |
| 103 | if ( isValidWrapper( wrapperID, clientId ) ) { |
| 104 | styler.GeneratedStyles.gutenberg[ 'wrappers' ][ clientId ] = |
| 105 | wrapperID; |
| 106 | } else { |
| 107 | wrapperID = ManageWrapperID( clientId, attributes, props ); |
| 108 | } |
| 109 | } else if ( ! styler.GeneratedStyles.gutenberg[ 'wrappers' ][ clientId ] ) { |
| 110 | if ( isValidWrapper( wrapperID, clientId ) ) { |
| 111 | styler.GeneratedStyles.gutenberg[ 'wrappers' ][ clientId ] = |
| 112 | wrapperID; |
| 113 | } else { |
| 114 | wrapperID = ManageWrapperID( clientId, attributes, props ); |
| 115 | } |
| 116 | } else { |
| 117 | wrapperID = styler.GeneratedStyles.gutenberg[ 'wrappers' ][ clientId ]; |
| 118 | } |
| 119 | |
| 120 | if ( wrapperID !== attributes[ 'wrapperID' ] ) { |
| 121 | if ( typeof props.setAttributes !== 'undefined' ) { |
| 122 | props.setAttributes( { |
| 123 | wrapperID: wrapperID, |
| 124 | } ); |
| 125 | } |
| 126 | } |
| 127 | |
| 128 | if ( wrapperID ) { |
| 129 | classname = classname + ' ' + wrapperID; |
| 130 | } |
| 131 | |
| 132 | return wp.element.createElement( |
| 133 | TagName, |
| 134 | { ...props, className: classname }, |
| 135 | children |
| 136 | ); |
| 137 | } |
| 138 | |
| 139 | Wrapper.defaultProps = { |
| 140 | TagName: 'div', |
| 141 | }; |
| 142 | |
| 143 | export default Wrapper; |
| 144 |