Add JS to make the preview link work

Source: - WordPress/gutenberg#13998 (comment)
cds-snc · Feb 14, 2022 · fc9cd8d · fc9cd8d
1 parent ee77609
commit fc9cd8d
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 29 deletions.
diff --git a/wordpress/wp-content/themes/cds-redirector/functions.php b/wordpress/wp-content/themes/cds-redirector/functions.php
@@ -42,38 +42,38 @@ public function addActions()
                 add_action('admin_menu', [$this, 'addAdminMenu']);
                 add_action('admin_init', [$this, 'registerSettings']);
 
-                add_action(
-                    'admin_footer',
-                    function () {
-                        global $post;
-
-                        if (!$post) {
-                            return;
-                        }
-
-                        $text = __('Preview', 'cds-snc');
-                        $url =
-                            Utils::addHttp(
-                                cds_get_theme_option('redirect_url'),
-                            ) .
-                            '/preview?id=' .
-                            $post->ID .
-                            '&lang=' .
-                            cds_get_active_language();
-                        echo "<script>
-                    jQuery(document).ready(function( $ ) {
-                        setTimeout(function(){
-                            $('.block-editor-post-preview__dropdown').replaceWith('<a class=\"components-button is-tertiary\" href=\"$url\">$text</a>');
-                        }, 1000);
-                    });
-                    </script>";
-                    },
-                    200,
-                    10,
-                );
+                add_action('admin_enqueue_scripts', [$this, 'redirector_scripts']);
             }
         }
 
+
+
+        /**
+         * Enqueue scripts.
+         */
+        public function redirector_scripts(): void
+        {
+            global $post;
+
+            if (!$post) {
+                return;
+            }
+
+            wp_enqueue_script('redirector-main', get_template_directory_uri() . '/js/main.js', ['jquery']);
+
+            $url = Utils::addHttp(
+                cds_get_theme_option('redirect_url')
+            ) .
+                '/preview?id=' .
+                $post->ID .
+                '&lang=' .
+                cds_get_active_language();
+
+            $params = array('url' => $url);
+            wp_localize_script('redirector-main', 'OBJECT', $params );
+        }
+
+
         /**
          * Returns all theme options
          *

diff --git a/wordpress/wp-content/themes/cds-redirector/js/main.js b/wordpress/wp-content/themes/cds-redirector/js/main.js
@@ -0,0 +1,19 @@
+console.log('redirector!');
+console.log(OBJECT.url);
+
+jQuery(function () {
+    const checkPreviewInterval = setTimeout(checkPreview, 1000);
+
+    function checkPreview() {
+      const previewButton = jQuery(".block-editor-post-preview__button-toggle").first();
+      if (previewButton.length) {
+        // remove event handlers
+        previewButton.off();
+
+        // add our own event handler to open preview link
+        previewButton.on("click", function() {
+            window.open(OBJECT.url, "_blank");
+        });
+      }
+   }
+});