| 1 |
// |
| 2 |
export const giveClassForResOptionChange = (domObj, resOption) => { |
| 3 |
const bodyClassNameString = domObj.body.className; |
| 4 |
|
| 5 |
const regexPattern = /eb\-responsive\-preview\-option\-(Tablet|Mobile|Desktop)/g; |
| 6 |
|
| 7 |
const newBodyClass = (bodyClassNameString || " ").replace(regexPattern, ""); |
| 8 |
|
| 9 |
domObj.body.className = newBodyClass; |
| 10 |
|
| 11 |
domObj.body.classList.add(`eb-responsive-preview-option-${resOption}`); |
| 12 |
}; |
| 13 |
|
| 14 |
// |
| 15 |
// function to mimmik css when clicking the responsive buttons in the inspector panel |
| 16 |
export const mimmikCssForResBtns = ({ |
| 17 |
isForPreviewButton = false, |
| 18 |
domObj, |
| 19 |
resOption, |
| 20 |
}) => { |
| 21 |
let allEbBlocksWrapper; |
| 22 |
|
| 23 |
giveClassForResOptionChange(domObj, resOption); |
| 24 |
|
| 25 |
if (isForPreviewButton) { |
| 26 |
allEbBlocksWrapper = domObj.querySelectorAll( |
| 27 |
".eb-guten-block-main-parent-wrapper > style" |
| 28 |
); |
| 29 |
} else { |
| 30 |
allEbBlocksWrapper = domObj.querySelectorAll( |
| 31 |
".eb-guten-block-main-parent-wrapper:not(.is-selected) > style" |
| 32 |
); |
| 33 |
} |
| 34 |
|
| 35 |
if (allEbBlocksWrapper.length < 1) return; |
| 36 |
allEbBlocksWrapper.forEach((styleTag) => { |
| 37 |
const cssStrings = styleTag.textContent; |
| 38 |
const minCss = cssStrings.replace(/\s+/g, " "); |
| 39 |
const regexCssMimmikSpace = /(mimmikcssStart\s\*\/)(.+)(\/\*\smimmikcssEnd)/i; |
| 40 |
let newCssStrings = " "; |
| 41 |
if (resOption === "Tablet") { |
| 42 |
const tabCssStrings = (minCss.match( |
| 43 |
/tabcssStart\s\*\/(.+)(?=\/\*\stabcssEnd)/i |
| 44 |
) || [, " "])[1]; |
| 45 |
newCssStrings = minCss.replace( |
| 46 |
regexCssMimmikSpace, |
| 47 |
`$1 ${tabCssStrings} $3` |
| 48 |
); |
| 49 |
} else if (resOption === "Mobile") { |
| 50 |
const tabCssStrings = (minCss.match( |
| 51 |
/tabcssStart\s\*\/(.+)(?=\/\*\stabcssEnd)/i |
| 52 |
) || [, " "])[1]; |
| 53 |
|
| 54 |
const mobCssStrings = (minCss.match( |
| 55 |
/mobcssStart\s\*\/(.+)(?=\/\*\smobcssEnd)/i |
| 56 |
) || [, " "])[1]; |
| 57 |
|
| 58 |
newCssStrings = minCss.replace( |
| 59 |
regexCssMimmikSpace, |
| 60 |
`$1 ${tabCssStrings} ${mobCssStrings} $3` |
| 61 |
); |
| 62 |
} else { |
| 63 |
newCssStrings = minCss.replace(regexCssMimmikSpace, `$1 $3`); |
| 64 |
} |
| 65 |
styleTag.textContent = newCssStrings; |
| 66 |
}); |
| 67 |
}; |
| 68 |
|
| 69 |
// |
| 70 |
// IMPORTANT: The following fuction declaration must be below the 'mimmikCssForResBtns' function declaration |
| 71 |
// function to mimmik css for responsive preview when clicking the buttons in the 'Preview button of wordpress' located beside the 'update' button |
| 72 |
export const mimmikCssForPreviewBtnClick = ({ domObj, select }) => { |
| 73 |
const bodyClasses = domObj.body.className; |
| 74 |
if (/eb\-mimmik\-added/i.test(bodyClasses)) return; |
| 75 |
domObj.body.classList.add("eb-mimmik-added"); |
| 76 |
domObj.body.classList.add(`eb-responsive-preview-option-Desktop`); |
| 77 |
|
| 78 |
const wpResBtnsWrapAll = domObj.querySelectorAll(".popover-slot"); |
| 79 |
|
| 80 |
// if (wpResBtnsWrapAll.length > 0) { |
| 81 |
for (const wpResBtnsWrap of wpResBtnsWrapAll) { |
| 82 |
wpResBtnsWrap.addEventListener("click", (e) => { |
| 83 |
|
| 84 |
if ( |
| 85 |
/block\-editor\-post\-preview__button\-resize|components\-menu\-item__item/i.test( |
| 86 |
e.target.className |
| 87 |
) |
| 88 |
) { |
| 89 |
setTimeout(() => { |
| 90 |
const resOption = select( |
| 91 |
"core/edit-post" |
| 92 |
).__experimentalGetPreviewDeviceType(); |
| 93 |
mimmikCssForResBtns({ |
| 94 |
isForPreviewButton: true, |
| 95 |
domObj, |
| 96 |
resOption, |
| 97 |
}); |
| 98 |
giveClassForResOptionChange(domObj, resOption); |
| 99 |
}, 0); |
| 100 |
} |
| 101 |
}); |
| 102 |
} |
| 103 |
// } |
| 104 |
}; |
| 105 |
|
| 106 |
// IMPORTANT: The following fuction declaration must be below the 'mimmikCssForResBtns' function declaration |
| 107 |
// function to mimmik css for responsive preview when clicking the buttons in the 'Preview button of wordpress' located beside the 'update' button while any block is selected and it's inspector panel is mounted in the DOM |
| 108 |
export const mimmikCssOnPreviewBtnClickWhileBlockSelected = ({ |
| 109 |
domObj = { body: { classList: { add: () => {} } } }, |
| 110 |
select, |
| 111 |
setAttributes, |
| 112 |
}) => { |
| 113 |
const wpResBtnsWrapAll = domObj.querySelectorAll(".popover-slot"); |
| 114 |
|
| 115 |
const handleCLick = (e) => { |
| 116 |
if ( |
| 117 |
/block\-editor\-post\-preview__button\-resize|components\-menu\-item__item/i.test( |
| 118 |
e.target.className |
| 119 |
) |
| 120 |
) { |
| 121 |
setTimeout(() => { |
| 122 |
const resOption = select( |
| 123 |
"core/edit-post" |
| 124 |
).__experimentalGetPreviewDeviceType(); |
| 125 |
mimmikCssForResBtns({ |
| 126 |
isForPreviewButton: true, |
| 127 |
domObj, |
| 128 |
resOption, |
| 129 |
}); |
| 130 |
setAttributes({ resOption }); |
| 131 |
giveClassForResOptionChange(domObj, resOption); |
| 132 |
}, 0); |
| 133 |
} |
| 134 |
}; |
| 135 |
|
| 136 |
for (const wpResBtnsWrap of wpResBtnsWrapAll) { |
| 137 |
wpResBtnsWrap.addEventListener("click", handleCLick); |
| 138 |
} |
| 139 |
|
| 140 |
return () => { |
| 141 |
for (const wpResBtnsWrap of wpResBtnsWrapAll) { |
| 142 |
wpResBtnsWrap.removeEventListener("click", handleCLick); |
| 143 |
} |
| 144 |
}; |
| 145 |
}; |
| 146 |
|
| 147 |
// |
| 148 |
// this function is for creating a unique blockId for each block's unique className |
| 149 |
export const duplicateBlockIdFix = ({ |
| 150 |
BLOCK_PREFIX, |
| 151 |
blockId, |
| 152 |
setAttributes, |
| 153 |
select, |
| 154 |
clientId, |
| 155 |
}) => { |
| 156 |
const unique_id = |
| 157 |
BLOCK_PREFIX + "-" + Math.random().toString(36).substr(2, 7); |
| 158 |
|
| 159 |
/** |
| 160 |
* Define and Generate Unique Block ID |
| 161 |
*/ |
| 162 |
if (!blockId) { |
| 163 |
setAttributes({ blockId: unique_id }); |
| 164 |
} |
| 165 |
|
| 166 |
/** |
| 167 |
* Assign New Unique ID when duplicate BlockId found |
| 168 |
* Mostly happens when User Duplicate a Block |
| 169 |
*/ |
| 170 |
|
| 171 |
const all_blocks = select("core/block-editor").getBlocks(); |
| 172 |
|
| 173 |
let duplicateFound = false; |
| 174 |
const fixDuplicateBlockId = (blocks) => { |
| 175 |
if (duplicateFound) return; |
| 176 |
for (const item of blocks) { |
| 177 |
const { innerBlocks } = item; |
| 178 |
if (item.attributes.blockId === blockId) { |
| 179 |
if (item.clientId !== clientId) { |
| 180 |
setAttributes({ blockId: unique_id }); |
| 181 |
duplicateFound = true; |
| 182 |
return; |
| 183 |
} else if (innerBlocks.length > 0) { |
| 184 |
fixDuplicateBlockId(innerBlocks); |
| 185 |
} |
| 186 |
} else if (innerBlocks.length > 0) { |
| 187 |
fixDuplicateBlockId(innerBlocks); |
| 188 |
} |
| 189 |
} |
| 190 |
}; |
| 191 |
|
| 192 |
fixDuplicateBlockId(all_blocks); |
| 193 |
}; |
| 194 |
|
