editor.php
107 lines
| 1 | <?php |
| 2 | |
| 3 | /** |
| 4 | * Editor template php file. |
| 5 | * |
| 6 | * @package kirki |
| 7 | */ |
| 8 | |
| 9 | if (! defined('ABSPATH')) { |
| 10 | exit; |
| 11 | } |
| 12 | |
| 13 | use Kirki\HelperFunctions; |
| 14 | |
| 15 | $load_iframe_url = HelperFunctions::get_post_url_arr_from_post_id(HelperFunctions::get_post_id_if_possible_from_url(), array('iframe_url' => true))['iframe_url']; |
| 16 | ?> |
| 17 | <!DOCTYPE html> |
| 18 | <html <?php language_attributes(); ?>> |
| 19 | |
| 20 | <head> |
| 21 | <meta charset="utf-8" /> |
| 22 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 23 | <title> |
| 24 | <?php echo esc_html_e('Kirki', 'kirki') . ' | ' . esc_html(get_the_title(HelperFunctions::get_post_id_if_possible_from_url())); ?> |
| 25 | </title> |
| 26 | <?php wp_head(); ?> |
| 27 | </head> |
| 28 | |
| 29 | <body class="kirki-tool"> |
| 30 | <div id="kirki-root"></div> |
| 31 | <div id="kirki-editor-wrapper"> |
| 32 | <div id="kirki-top-bar"></div> |
| 33 | <div id="kirki-left-bar"></div> |
| 34 | <div id="kirki-content-bar"> |
| 35 | <div id="kirki-responsive-devices"></div> |
| 36 | <div id="kirki-front-overlay"></div> |
| 37 | </div> |
| 38 | <div id="kirki-right-bar"></div> |
| 39 | <div id="kirki-footer-bar"></div> |
| 40 | <div id="kirki-floating-elems"> |
| 41 | <div id="kirki-alert-dialog-anchor-ele"></div> |
| 42 | </div> |
| 43 | </div> |
| 44 | |
| 45 | <div id="kirki-loadingDiv" |
| 46 | style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; overflow: hidden; z-index: 9;"> |
| 47 | <div class="kirki-loading-left-side" style="background: var(--kirki-surface-1); flex: 0 0 304px;"> |
| 48 | <div style="border-right: 1px solid var(--kirki-border-secondary); height: 100%; width: 48px;"></div> |
| 49 | </div> |
| 50 | <div style="flex: 1; display: flex; background: var(--kirki-surface-2); justify-content: center; align-items: center;"> |
| 51 | <div class="kirki-loading-wrapper" |
| 52 | style="width: 256px; height: 62px; display: flex ; justify-content: center; flex-direction: column; align-items: center; gap: 24px; overflow: hidden; margin-top: -5px;"> |
| 53 | |
| 54 | <img src="<?php echo esc_url(KIRKI_PLUGIN_URL . '/assets/images/kirki-loading.svg'); ?>" alt="Kirki" style="height: 32px;"> |
| 55 | |
| 56 | <div class="kirki-loading" |
| 57 | style="height: 8px; border-radius: 10px; width: 100%; background: var(--kirki-surface-3); position: relative"> |
| 58 | <div class="kirki-loading-overlay" |
| 59 | style="width: 2%; position: absolute; left: 0; top: 0; bottom: 0; background: var(--kirki-on-surface-3); transition: width 3s ease; border-radius: 10px;"> |
| 60 | |
| 61 | </div> |
| 62 | </div> |
| 63 | </div> |
| 64 | </div> |
| 65 | <div class="kirki-loading-right-side" style="background: var(--kirki-surface-1); flex: 0 0 256px;"></div> |
| 66 | </div> |
| 67 | <script> |
| 68 | const loadingOverlay = document.querySelector('.kirki-loading-overlay'); |
| 69 | let loadingDiv = document.getElementById("kirki-loadingDiv"); |
| 70 | |
| 71 | const loading = (parentage) => { |
| 72 | loadingOverlay.style.width = parentage + '%'; |
| 73 | } |
| 74 | window.loading = loading; |
| 75 | window.removeLoading = () => { |
| 76 | setTimeout(() => { |
| 77 | loadingDiv?.remove(); |
| 78 | }, 2000); |
| 79 | } |
| 80 | |
| 81 | const loadingInterval = setInterval(() => { |
| 82 | let parentage = parseInt(loadingOverlay.style.width); |
| 83 | let random = Math.floor(Math.random() * 5) + 1; |
| 84 | |
| 85 | if (parentage < 85) { |
| 86 | loading(parentage + random); |
| 87 | } else { |
| 88 | clearInterval(loadingInterval); |
| 89 | } |
| 90 | }, 50); |
| 91 | |
| 92 | let mode = localStorage.getItem(`kirkiMode`) || 'dark'; |
| 93 | document.documentElement.setAttribute('data-mode', mode); |
| 94 | |
| 95 | |
| 96 | if (mode === 'dark') { |
| 97 | loadingDiv.style.backgroundColor = '#1d1d1d'; |
| 98 | } else { |
| 99 | loadingDiv.style.backgroundColor = '#FFFFFF'; |
| 100 | } |
| 101 | </script> |
| 102 | </div> |
| 103 | |
| 104 | <?php wp_footer(); ?> |
| 105 | </body> |
| 106 | |
| 107 | </html> |