custom-link-in-toolbar.js
246 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 | .kirki-edit-with-btn{ |
| 8 | display: inline-flex; |
| 9 | align-items: center; |
| 10 | height: 32px; |
| 11 | border-radius: 8px; |
| 12 | padding-right: 12px; |
| 13 | padding-left: 12px; |
| 14 | font-weight: 500; |
| 15 | font-size: 11px; |
| 16 | line-height: 16px; |
| 17 | letter-spacing: -0.2px; |
| 18 | color: #FFFFFF; |
| 19 | background: #167BFF; |
| 20 | gap: 4px; |
| 21 | white-space: nowrap; |
| 22 | text-decoration: none; |
| 23 | cursor: pointer; |
| 24 | } |
| 25 | .kirki-edit-with-btn:hover{ |
| 26 | background: #1670E7; |
| 27 | color: #fff; |
| 28 | } |
| 29 | .kirki-edit-svg{ |
| 30 | width: 14px; |
| 31 | height: 14px; |
| 32 | } |
| 33 | </style> |
| 34 | <span>Design with Kirki</span> |
| 35 | <svg |
| 36 | class="kirki-edit-svg"> |
| 37 | 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> |
| 38 | </a>`; |
| 39 | const backToWordpressEditBtnHTML = ` |
| 40 | <a class="kirki-back-dash-btn"> |
| 41 | <style> |
| 42 | .kirki-back-dash-btn{ |
| 43 | background: #0000000A; |
| 44 | height: 32px; |
| 45 | border-radius: 8px; |
| 46 | padding-right: 12px; |
| 47 | padding-left: 12px; |
| 48 | gap: 4px; |
| 49 | font-weight: 500; |
| 50 | font-size: 11px; |
| 51 | line-height: 16px; |
| 52 | letter-spacing: -0.2px; |
| 53 | text-decoration: none; |
| 54 | cursor: pointer; |
| 55 | display: inline-flex; |
| 56 | align-items: center; |
| 57 | } |
| 58 | .kirki-back-dash-btn:hover{ |
| 59 | background: #00000014; |
| 60 | color: #000; |
| 61 | } |
| 62 | .kirki-back-dash-svg{ |
| 63 | width: 14px; |
| 64 | height: 14px; |
| 65 | } |
| 66 | </style> |
| 67 | <svg |
| 68 | class="kirki-back-dash-svg"> |
| 69 | 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> |
| 70 | <span>Back to WordPress Editor</span> |
| 71 | </a> |
| 72 | `; |
| 73 | |
| 74 | 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>`; |
| 75 | |
| 76 | const createTextToHtmlElement = (text) => { |
| 77 | const div = document.createElement('div'); |
| 78 | div.innerHTML = text; |
| 79 | |
| 80 | return div.firstChild; |
| 81 | }; |
| 82 | |
| 83 | const handleClickEditWithBtn = (e) => { |
| 84 | e.preventDefault(); |
| 85 | let title = document.querySelector('[name="post_title"]'); |
| 86 | if (title) { |
| 87 | title = title.value; |
| 88 | } else { |
| 89 | // for gutenberg editor |
| 90 | title = document.getElementsByClassName('wp-block-post-title')?.[0]?.innerText || ''; |
| 91 | } |
| 92 | |
| 93 | title = (title || '').replace(/^\uFEFF/, '').trim(); |
| 94 | if (!title) { |
| 95 | title = 'Untitled'; |
| 96 | } |
| 97 | |
| 98 | const formData = new FormData(); |
| 99 | // formData.append('action', 'kirki_post_apis'); |
| 100 | // formData.append('endpoint', 'back-to-kirki-editor'); |
| 101 | formData.append('postId', kirki_admin.postId); |
| 102 | formData.append('title', title); |
| 103 | |
| 104 | // fetch(kirki_admin.ajaxUrl, { |
| 105 | fetch(`${kirki_admin.restUrl}kirki/v1/back-to-kirki-editor`, { |
| 106 | method: 'POST', // or 'PUT' |
| 107 | body: formData, |
| 108 | headers: { |
| 109 | 'X-WP-Nonce': kirki_admin.nonce, |
| 110 | }, |
| 111 | }) |
| 112 | .then((response) => response.json()) |
| 113 | .then((data) => { |
| 114 | window.location.href = kirki_admin.postEditURL; |
| 115 | }) |
| 116 | .catch((error) => { |
| 117 | console.error('Error:', error); |
| 118 | }); |
| 119 | }; |
| 120 | const handleClickBackToWordpressBtn = () => { |
| 121 | const formData = new FormData(); |
| 122 | // formData.append('action', 'kirki_post_apis'); |
| 123 | // formData.append('endpoint', 'back-to-wordpress-editor'); |
| 124 | formData.append('postId', kirki_admin.postId); |
| 125 | |
| 126 | // fetch(kirki_admin.ajaxUrl, { |
| 127 | fetch(`${kirki_admin.restUrl}kirki/v1/back-to-wordpress-editor`, { |
| 128 | method: 'POST', // or 'PUT' |
| 129 | body: formData, |
| 130 | headers: { |
| 131 | 'X-WP-Nonce': kirki_admin.nonce, // Add nonce as a custom header |
| 132 | }, |
| 133 | }) |
| 134 | .then((response) => response.json()) |
| 135 | .then((data) => { |
| 136 | if (data) { |
| 137 | } |
| 138 | }) |
| 139 | .catch((error) => { |
| 140 | console.error('Error:', error); |
| 141 | }); |
| 142 | }; |
| 143 | |
| 144 | const classicAddEditWithSingleButton = () => { |
| 145 | const editButtonWrapper = document.querySelector('#wp-content-media-buttons'); |
| 146 | if (!editButtonWrapper) return; |
| 147 | editButtonWrapper.append(createTextToHtmlElement(editWithBtnHTML)); |
| 148 | const kirkiBtns = document.querySelectorAll(`.kirki-edit-with-btn`); |
| 149 | kirkiBtns.forEach((kirkiBtn) => { |
| 150 | kirkiBtn.addEventListener('click', handleClickEditWithBtn); |
| 151 | }); |
| 152 | }; |
| 153 | const gutenbergAddEditWithSingleButton = () => { |
| 154 | const editButtonWrapper = document.querySelector('.edit-post-header-toolbar'); |
| 155 | if (!editButtonWrapper) return; |
| 156 | editButtonWrapper.append(createTextToHtmlElement(editWithBtnHTML)); |
| 157 | const kirkiBtns = document.querySelectorAll(`.kirki-edit-with-btn`); |
| 158 | kirkiBtns.forEach((kirkiBtn) => { |
| 159 | kirkiBtn.addEventListener('click', handleClickEditWithBtn); |
| 160 | }); |
| 161 | clearInterval(timeID); |
| 162 | }; |
| 163 | const classicAddKirkiButtonsInsideContentWrapper = () => { |
| 164 | const contentDiv = document.querySelector('#postdivrich'); |
| 165 | if (!contentDiv) return; |
| 166 | contentDiv.style.display = 'none'; |
| 167 | contentDiv.insertAdjacentHTML('afterend', backtoWPandEditKirkiBtn); |
| 168 | |
| 169 | const backToWPbtns = document.querySelectorAll(`.kirki-back-dash-btn`); |
| 170 | backToWPbtns.forEach((backToWPbtn) => { |
| 171 | backToWPbtn.addEventListener('click', () => { |
| 172 | handleClickBackToWordpressBtn(); |
| 173 | removeButtonsFromContent(contentDiv); |
| 174 | }); |
| 175 | }); |
| 176 | |
| 177 | const kirkiBtns = document.querySelectorAll(`.kirki-edit-with-btn`); |
| 178 | kirkiBtns.forEach((kirkiBtn) => { |
| 179 | kirkiBtn.addEventListener('click', handleClickEditWithBtn); |
| 180 | }); |
| 181 | }; |
| 182 | const gutenbergAddKirkiButtonsInsideContentWrapper = () => { |
| 183 | let document = window.document; |
| 184 | let contentDiv = document.querySelector('.is-root-container'); |
| 185 | if (!contentDiv) { |
| 186 | const editorCanvasIframe = document.querySelector('[name="editor-canvas"]'); |
| 187 | if (!editorCanvasIframe) return; |
| 188 | // Access the iframe's content window |
| 189 | let iframeWindow = editorCanvasIframe.contentWindow; |
| 190 | // Access the document inside the iframe |
| 191 | let iframeDocument = iframeWindow.document; |
| 192 | // Find the element inside the iframe using its class name |
| 193 | contentDiv = iframeDocument.querySelector('.is-root-container'); |
| 194 | if (!contentDiv) { |
| 195 | return; |
| 196 | } |
| 197 | document = iframeDocument; |
| 198 | } |
| 199 | contentDiv.style.display = 'none'; |
| 200 | contentDiv.insertAdjacentHTML('afterend', backtoWPandEditKirkiBtn); |
| 201 | |
| 202 | const backToWPbtns = document.querySelectorAll(`.kirki-back-dash-btn`); |
| 203 | backToWPbtns.forEach((backToWPbtn) => { |
| 204 | backToWPbtn.addEventListener('click', () => { |
| 205 | handleClickBackToWordpressBtn(); |
| 206 | removeButtonsFromContent(contentDiv, document); |
| 207 | }); |
| 208 | }); |
| 209 | |
| 210 | const kirkiBtns = document.querySelectorAll(`.kirki-edit-with-btn`); |
| 211 | kirkiBtns.forEach((kirkiBtn) => { |
| 212 | kirkiBtn.addEventListener('click', handleClickEditWithBtn); |
| 213 | }); |
| 214 | |
| 215 | clearInterval(timeID); |
| 216 | }; |
| 217 | const removeButtonsFromContent = (contentDiv, document = window.document) => { |
| 218 | const buttons = document.querySelector('.kirki-editor-button-wrapper'); |
| 219 | buttons?.remove(); |
| 220 | contentDiv.style.display = 'block'; |
| 221 | classicAddEditWithSingleButton(); |
| 222 | gutenbergAddEditWithSingleButton(); |
| 223 | }; |
| 224 | |
| 225 | const enableForClassicEditor = () => { |
| 226 | if (kirki_admin.isEditorModeIsKirki == 1) { |
| 227 | classicAddKirkiButtonsInsideContentWrapper(); |
| 228 | } else { |
| 229 | classicAddEditWithSingleButton(); |
| 230 | } |
| 231 | }; |
| 232 | |
| 233 | const enableForGutenbergEditor = () => { |
| 234 | timeID = setInterval(() => { |
| 235 | if (kirki_admin.isEditorModeIsKirki == 1) { |
| 236 | gutenbergAddKirkiButtonsInsideContentWrapper(); |
| 237 | } else { |
| 238 | gutenbergAddEditWithSingleButton(); |
| 239 | } |
| 240 | }, 1000); |
| 241 | }; |
| 242 | |
| 243 | enableForClassicEditor(); |
| 244 | enableForGutenbergEditor(); |
| 245 | })(window, wp); |
| 246 |