From acdbd73c13491096e9e3bcf909dd4115f30b6411 Mon Sep 17 00:00:00 2001
From: Tw93 <tw93@qq.com>
Date: Sun, 9 Apr 2023 15:04:34 +0800
Subject: [PATCH] :sparkles: add jump url to anywhere

---
 src-tauri/src/app/menu.rs         |   9 +-
 src-tauri/src/app/window.rs       |   3 +-
 src-tauri/src/inject/component.js | 141 ++++++++++++++++++++++++++++++
 src-tauri/src/inject/index.js     |  17 ----
 4 files changed, 151 insertions(+), 19 deletions(-)
 create mode 100644 src-tauri/src/inject/component.js

diff --git a/src-tauri/src/app/menu.rs b/src-tauri/src/app/menu.rs
index cfab669..a418b39 100644
--- a/src-tauri/src/app/menu.rs
+++ b/src-tauri/src/app/menu.rs
@@ -10,6 +10,7 @@ use tauri_plugin_window_state::{AppHandleExt, StateFlags};
 
 pub fn get_menu() -> Menu {
     let close = CustomMenuItem::new("close".to_string(), "Close Window").accelerator("CmdOrCtrl+W");
+    let goto_url_item = CustomMenuItem::new("goto_url".to_string(), "Go to URL...").accelerator("CmdOrCtrl+Shift+L");
     let first_menu = Menu::new()
         .add_native_item(MenuItem::Copy)
         .add_native_item(MenuItem::Cut)
@@ -18,6 +19,8 @@ pub fn get_menu() -> Menu {
         .add_native_item(MenuItem::Redo)
         .add_native_item(MenuItem::SelectAll)
         .add_native_item(MenuItem::Separator)
+        .add_item(goto_url_item)
+        .add_native_item(MenuItem::Separator)
         .add_native_item(MenuItem::EnterFullScreen)
         .add_native_item(MenuItem::Minimize)
         .add_native_item(MenuItem::Hide)
@@ -35,6 +38,11 @@ pub fn menu_event_handle(event: WindowMenuEvent) {
     if event.menu_item_id() == "close" {
         event.window().minimize().expect("can't minimize window");
     }
+
+    if event.menu_item_id() == "goto_url" {
+        let js_code = "showUrlModal();";
+        event.window().eval(js_code).unwrap();
+    }
 }
 
 #[cfg(any(target_os = "linux", target_os = "windows"))]
@@ -85,7 +93,6 @@ pub fn system_tray_handle(app: &tauri::AppHandle, event: SystemTrayEvent) {
             }
             "quit" => {
                 let _res = app.save_window_state(StateFlags::all());
-                // println!("save windows state result {:?}", _res);
                 std::process::exit(0);
             }
             "about" => {
diff --git a/src-tauri/src/app/window.rs b/src-tauri/src/app/window.rs
index 92c0974..0691fec 100644
--- a/src-tauri/src/app/window.rs
+++ b/src-tauri/src/app/window.rs
@@ -27,7 +27,8 @@ pub fn get_window(app: &mut App, config: PakeConfig, _data_dir: PathBuf) -> Wind
         .fullscreen(window_config.fullscreen)
         .inner_size(window_config.width, window_config.height)
         .initialization_script(include_str!("../inject/style.js"))
-        .initialization_script(include_str!("../inject/index.js"));
+        .initialization_script(include_str!("../inject/index.js"))
+        .initialization_script(include_str!("../inject/component.js"));
 
     #[cfg(target_os = "macos")]
     {
diff --git a/src-tauri/src/inject/component.js b/src-tauri/src/inject/component.js
new file mode 100644
index 0000000..6cf8d25
--- /dev/null
+++ b/src-tauri/src/inject/component.js
@@ -0,0 +1,141 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // Create a modal
+  const modalHtml = `
+  <div id="pakeUrlModal" class="pake-modal">
+    <div class="pake-modal-container">
+      <div class="pake-modal-content">
+        <label for="pakeUrlInput">Enter URL to navigate anywhere</label>
+        <input type="text" id="pakeUrlInput" />
+        <button id="pakeUrlSubmit">Submit</button>
+        <button id="pakeUrlClose">Close</button>
+      </div>
+    </div>
+  </div>
+  `;
+
+  const modalStyle = `
+  .pake-modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+
+  .pake-modal-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .pake-modal-content {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    width: 80%;
+    max-width: 400px;
+    font-size:14px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+  }
+
+  .pake-modal-content label {
+    display: block;
+    margin-bottom: 12px;
+    font-weight: bold;
+  }
+
+  .pake-modal-content input[type="text"] {
+    width: 90%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-bottom: 12px;
+    outline: none;
+  }
+
+  .pake-modal-content button {
+    background: #11182B;
+    color: #FFF;
+    padding: 6px 14px;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 4px;
+    font-size:14px;
+    border: 1px solid #11182B;
+  }
+
+  #pakeUrlClose{
+    background: #fff;
+    color: #11182B;
+  }
+  `;
+
+  const modalDiv = document.createElement('div');
+  modalDiv.innerHTML = modalHtml;
+  document.body.appendChild(modalDiv);
+
+  const modalStyleElement = document.createElement('style');
+  modalStyleElement.innerText = modalStyle;
+  document.head.appendChild(modalStyleElement);
+
+  const urlModal = document.getElementById('pakeUrlModal');
+  const urlInput = document.getElementById('pakeUrlInput');
+  const urlSubmit = document.getElementById('pakeUrlSubmit');
+  const urlClose = document.getElementById('pakeUrlClose');
+
+  urlSubmit.onclick = function () {
+    const url = urlInput.value;
+    if (url) {
+      window.location.href = url;
+    }
+  };
+
+  urlClose.onclick = function () {
+    urlModal.style.display = 'none';
+  };
+
+  urlInput.addEventListener('keydown', function (event) {
+    if (event.key === 'Enter') {
+      const url = urlInput.value;
+      if (url) {
+        window.location.href = url;
+      }
+    }
+  });
+
+  document.addEventListener('keydown', function (event) {
+    if (event.key === 'Escape' && urlModal.style.display === 'block') {
+      urlModal.style.display = 'none';
+    }
+  });
+
+  window.showUrlModal = function () {
+    urlModal.style.display = 'block';
+    urlInput.focus();
+  };
+
+  // Toast
+  function pakeToast(msg) {
+    const m = document.createElement('div');
+    m.innerHTML = msg;
+    m.style.cssText =
+      'max-width:60%;min-width: 80px;padding:0 12px;height: 32px;color: rgb(255, 255, 255);line-height: 32px;text-align: center;border-radius: 8px;position: fixed; bottom:24px;right: 28px;z-index: 999999;background: rgba(0, 0, 0,.8);font-size: 13px;';
+    document.body.appendChild(m);
+    setTimeout(function () {
+      const d = 0.5;
+      m.style.transition =
+        'transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
+      m.style.opacity = '0';
+      setTimeout(function () {
+        document.body.removeChild(m);
+      }, d * 1000);
+    }, 3000);
+  }
+
+  window.pakeToast = pakeToast;
+});
diff --git a/src-tauri/src/inject/index.js b/src-tauri/src/inject/index.js
index 4364aca..ccd4b28 100644
--- a/src-tauri/src/inject/index.js
+++ b/src-tauri/src/inject/index.js
@@ -151,20 +151,3 @@ function getFilenameFromUrl(url) {
   const filename = urlPath.substring(urlPath.lastIndexOf('/') + 1);
   return filename;
 }
-
-function pakeToast(msg) {
-  const m = document.createElement('div');
-  m.innerHTML = msg;
-  m.style.cssText =
-    'max-width:60%;min-width: 80px;padding:0 12px;height: 32px;color: rgb(255, 255, 255);line-height: 32px;text-align: center;border-radius: 8px;position: fixed; bottom:24px;right: 28px;z-index: 999999;background: rgba(0, 0, 0,.8);font-size: 13px;';
-  document.body.appendChild(m);
-  setTimeout(function () {
-    const d = 0.5;
-    m.style.transition =
-      'transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
-    m.style.opacity = '0';
-    setTimeout(function () {
-      document.body.removeChild(m);
-    }, d * 1000);
-  }, 3000);
-}