custom-link-in-toolbar.js
253 lines
| 1 | // custom-link-in-toolbar.js |
| 2 | // wrapped into IIFE - to leave global space clean. |
| 3 | (function (window, wp) { |
| 4 | let timeID = null; |
| 5 | const editWithBtnHTML = `<a class="kirki-edit-with-btn"> |
| 6 | <style> |
| 7 | :root { |
| 8 | --kirki-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, |
| 9 | 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, Helvetica, ui-sans-serif, system-ui, sans-serif, |
| 10 | 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; |
| 11 | } |
| 12 | .kirki-edit-with-btn{ |
| 13 | display: inline-flex; |
| 14 | align-items: center; |
| 15 | height: 32px; |
| 16 | border-radius: 8px; |
| 17 | padding-right: 12px; |
| 18 | padding-left: 12px; |
| 19 | font-weight: 500; |
| 20 | font-size: 11px; |
| 21 | line-height: 16px; |
| 22 | letter-spacing: -0.2px; |
| 23 | color: #FFFFFF; |
| 24 | background: #167BFF; |
| 25 | gap: 4px; |
| 26 | white-space: nowrap; |
| 27 | text-decoration: none; |
| 28 | cursor: pointer; |
| 29 | font-family: var(--kirki-font-family); |
| 30 | } |
| 31 | .kirki-edit-with-btn:hover{ |
| 32 | background: #1670E7; |
| 33 | color: #fff; |
| 34 | } |
| 35 | .kirki-edit-svg{ |
| 36 | width: 14px; |
| 37 | height: 14px; |
| 38 | } |
| 39 | </style> |
| 40 | <span>Design with Kirki</span> |
| 41 | <svg |
| 42 | class="kirki-edit-svg"> |
| 43 | xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14"><path fill="#fff" d="M9.679 1.297a2.13 2.13 0 1 1 3.013 3.01l-8.315 8.316-.087.077a1 1 0 0 1-.304.164L.754 13.94l-.081.021a.55.55 0 0 1-.616-.716l1.079-3.234c.049-.146.13-.28.24-.39l5.948-5.964-.005-.005.707-.707.004.004zM1.29 12.707l1.562-.52-1.042-1.042zm.955-2.542 1.587 1.588 5.793-5.794L8.03 4.365zm9.732-8.168a1.13 1.13 0 0 0-1.591.006l-1.65 1.654 1.596 1.595L11.985 3.6a1.13 1.13 0 0 0-.007-1.603"/></svg> |
| 44 | </a>`; |
| 45 | const backToWordpressEditBtnHTML = ` |
| 46 | <a class="kirki-back-dash-btn"> |
| 47 | <style> |
| 48 | .kirki-back-dash-btn{ |
| 49 | background: #0000000A; |
| 50 | height: 32px; |
| 51 | border-radius: 8px; |
| 52 | padding-right: 12px; |
| 53 | padding-left: 12px; |
| 54 | gap: 4px; |
| 55 | font-weight: 500; |
| 56 | font-size: 11px; |
| 57 | line-height: 16px; |
| 58 | letter-spacing: -0.2px; |
| 59 | text-decoration: none; |
| 60 | cursor: pointer; |
| 61 | display: inline-flex; |
| 62 | align-items: center; |
| 63 | font-family: var(--kirki-font-family); |
| 64 | } |
| 65 | .kirki-back-dash-btn:hover{ |
| 66 | background: #00000014; |
| 67 | color: #000; |
| 68 | } |
| 69 | .kirki-back-dash-svg{ |
| 70 | width: 14px; |
| 71 | height: 14px; |
| 72 | } |
| 73 | </style> |
| 74 | <svg |
| 75 | class="kirki-back-dash-svg"> |
| 76 | xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14"><path fill="#000" fill-rule="evenodd" d="M8.354 10.354a.5.5 0 0 1-.707 0l-3-3a.5.5 0 0 1-.063-.631l.063-.076 3-3a.5.5 0 0 1 .707.707L5.707 7l2.647 2.647a.5.5 0 0 1 0 .707" clip-rule="evenodd"/></svg> |
| 77 | <span>Back to WordPress Editor</span> |
| 78 | </a> |
| 79 | `; |
| 80 | |
| 81 | const backtoWPandEditKirkiBtn = `<div class="kirki-editor-button-wrapper" style="min-height: 300px; background: #f6f7f7; display: flex; justify-content: center; align-items: center;margin-top: 10px;"><div style="display: flex; gap:8px;">${backToWordpressEditBtnHTML}${editWithBtnHTML}</div></div>`; |
| 82 | |
| 83 | const createTextToHtmlElement = (text) => { |
| 84 | const div = document.createElement('div'); |
| 85 | div.innerHTML = text; |
| 86 | |
| 87 | return div.firstChild; |
| 88 | }; |
| 89 | |
| 90 | const handleClickEditWithBtn = (e) => { |
| 91 | e.preventDefault(); |
| 92 | let title = document.querySelector('[name="post_title"]'); |
| 93 | if (title) { |
| 94 | title = title.value; |
| 95 | } else { |
| 96 | // for gutenberg editor |
| 97 | title = document.getElementsByClassName('wp-block-post-title')?.[0]?.innerText || ''; |
| 98 | } |
| 99 | |
| 100 | title = (title || '').replace(/^\uFEFF/, '').trim(); |
| 101 | if (!title) { |
| 102 | title = 'Untitled'; |
| 103 | } |
| 104 | |
| 105 | const formData = new FormData(); |
| 106 | // formData.append('action', 'kirki_post_apis'); |
| 107 | // formData.append('endpoint', 'back-to-kirki-editor'); |
| 108 | formData.append('postId', kirki_admin.postId); |
| 109 | formData.append('title', title); |
| 110 | |
| 111 | // fetch(kirki_admin.ajaxUrl, { |
| 112 | fetch(`${kirki_admin.restUrl}kirki/v1/back-to-kirki-editor`, { |
| 113 | method: 'POST', // or 'PUT' |
| 114 | body: formData, |
| 115 | headers: { |
| 116 | 'X-WP-Nonce': kirki_admin.nonce, |
| 117 | }, |
| 118 | }) |
| 119 | .then((response) => response.json()) |
| 120 | .then((data) => { |
| 121 | window.location.href = kirki_admin.postEditURL; |
| 122 | }) |
| 123 | .catch((error) => { |
| 124 | console.error('Error:', error); |
| 125 | }); |
| 126 | }; |
| 127 | const handleClickBackToWordpressBtn = () => { |
| 128 | const formData = new FormData(); |
| 129 | // formData.append('action', 'kirki_post_apis'); |
| 130 | // formData.append('endpoint', 'back-to-wordpress-editor'); |
| 131 | formData.append('postId', kirki_admin.postId); |
| 132 | |
| 133 | // fetch(kirki_admin.ajaxUrl, { |
| 134 | fetch(`${kirki_admin.restUrl}kirki/v1/back-to-wordpress-editor`, { |
| 135 | method: 'POST', // or 'PUT' |
| 136 | body: formData, |
| 137 | headers: { |
| 138 | 'X-WP-Nonce': kirki_admin.nonce, // Add nonce as a custom header |
| 139 | }, |
| 140 | }) |
| 141 | .then((response) => response.json()) |
| 142 | .then((data) => { |
| 143 | if (data) { |
| 144 | } |
| 145 | }) |
| 146 | .catch((error) => { |
| 147 | console.error('Error:', error); |
| 148 | }); |
| 149 | }; |
| 150 | |
| 151 | const classicAddEditWithSingleButton = () => { |
| 152 | const editButtonWrapper = document.querySelector('#wp-content-media-buttons'); |
| 153 | if (!editButtonWrapper) return; |
| 154 | editButtonWrapper.append(createTextToHtmlElement(editWithBtnHTML)); |
| 155 | const kirkiBtns = document.querySelectorAll(`.kirki-edit-with-btn`); |
| 156 | kirkiBtns.forEach((kirkiBtn) => { |
| 157 | kirkiBtn.addEventListener('click', handleClickEditWithBtn); |
| 158 | }); |
| 159 | }; |
| 160 | const gutenbergAddEditWithSingleButton = () => { |
| 161 | const editButtonWrapper = document.querySelector('.edit-post-header-toolbar'); |
| 162 | if (!editButtonWrapper) return; |
| 163 | editButtonWrapper.append(createTextToHtmlElement(editWithBtnHTML)); |
| 164 | const kirkiBtns = document.querySelectorAll(`.kirki-edit-with-btn`); |
| 165 | kirkiBtns.forEach((kirkiBtn) => { |
| 166 | kirkiBtn.addEventListener('click', handleClickEditWithBtn); |
| 167 | }); |
| 168 | clearInterval(timeID); |
| 169 | }; |
| 170 | const classicAddKirkiButtonsInsideContentWrapper = () => { |
| 171 | const contentDiv = document.querySelector('#postdivrich'); |
| 172 | if (!contentDiv) return; |
| 173 | contentDiv.style.display = 'none'; |
| 174 | contentDiv.insertAdjacentHTML('afterend', backtoWPandEditKirkiBtn); |
| 175 | |
| 176 | const backToWPbtns = document.querySelectorAll(`.kirki-back-dash-btn`); |
| 177 | backToWPbtns.forEach((backToWPbtn) => { |
| 178 | backToWPbtn.addEventListener('click', () => { |
| 179 | handleClickBackToWordpressBtn(); |
| 180 | removeButtonsFromContent(contentDiv); |
| 181 | }); |
| 182 | }); |
| 183 | |
| 184 | const kirkiBtns = document.querySelectorAll(`.kirki-edit-with-btn`); |
| 185 | kirkiBtns.forEach((kirkiBtn) => { |
| 186 | kirkiBtn.addEventListener('click', handleClickEditWithBtn); |
| 187 | }); |
| 188 | }; |
| 189 | const gutenbergAddKirkiButtonsInsideContentWrapper = () => { |
| 190 | let document = window.document; |
| 191 | let contentDiv = document.querySelector('.is-root-container'); |
| 192 | if (!contentDiv) { |
| 193 | const editorCanvasIframe = document.querySelector('[name="editor-canvas"]'); |
| 194 | if (!editorCanvasIframe) return; |
| 195 | // Access the iframe's content window |
| 196 | let iframeWindow = editorCanvasIframe.contentWindow; |
| 197 | // Access the document inside the iframe |
| 198 | let iframeDocument = iframeWindow.document; |
| 199 | // Find the element inside the iframe using its class name |
| 200 | contentDiv = iframeDocument.querySelector('.is-root-container'); |
| 201 | if (!contentDiv) { |
| 202 | return; |
| 203 | } |
| 204 | document = iframeDocument; |
| 205 | } |
| 206 | contentDiv.style.display = 'none'; |
| 207 | contentDiv.insertAdjacentHTML('afterend', backtoWPandEditKirkiBtn); |
| 208 | |
| 209 | const backToWPbtns = document.querySelectorAll(`.kirki-back-dash-btn`); |
| 210 | backToWPbtns.forEach((backToWPbtn) => { |
| 211 | backToWPbtn.addEventListener('click', () => { |
| 212 | handleClickBackToWordpressBtn(); |
| 213 | removeButtonsFromContent(contentDiv, document); |
| 214 | }); |
| 215 | }); |
| 216 | |
| 217 | const kirkiBtns = document.querySelectorAll(`.kirki-edit-with-btn`); |
| 218 | kirkiBtns.forEach((kirkiBtn) => { |
| 219 | kirkiBtn.addEventListener('click', handleClickEditWithBtn); |
| 220 | }); |
| 221 | |
| 222 | clearInterval(timeID); |
| 223 | }; |
| 224 | const removeButtonsFromContent = (contentDiv, document = window.document) => { |
| 225 | const buttons = document.querySelector('.kirki-editor-button-wrapper'); |
| 226 | buttons?.remove(); |
| 227 | contentDiv.style.display = 'block'; |
| 228 | classicAddEditWithSingleButton(); |
| 229 | gutenbergAddEditWithSingleButton(); |
| 230 | }; |
| 231 | |
| 232 | const enableForClassicEditor = () => { |
| 233 | if (kirki_admin.isEditorModeIsKirki == 1) { |
| 234 | classicAddKirkiButtonsInsideContentWrapper(); |
| 235 | } else { |
| 236 | classicAddEditWithSingleButton(); |
| 237 | } |
| 238 | }; |
| 239 | |
| 240 | const enableForGutenbergEditor = () => { |
| 241 | timeID = setInterval(() => { |
| 242 | if (kirki_admin.isEditorModeIsKirki == 1) { |
| 243 | gutenbergAddKirkiButtonsInsideContentWrapper(); |
| 244 | } else { |
| 245 | gutenbergAddEditWithSingleButton(); |
| 246 | } |
| 247 | }, 1000); |
| 248 | }; |
| 249 | |
| 250 | enableForClassicEditor(); |
| 251 | enableForGutenbergEditor(); |
| 252 | })(window, wp); |
| 253 |