Fixed bugs with navigation and title getting

YomoSK · Nov 2, 2024 · 77bf38b · 77bf38b
1 parent 4ceb39a
commit 77bf38b
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ Yomea is currently in development state, at this point no builds are shipped by
 
 ## Steps to build this repository
 
-> [!NOTE]
+> [!IMPORTANT]
 > Make sure you have installed `git` and `curl`.
 
 **1.** Firstly clone Yomea repository onto your machine.

diff --git a/rust-src/components/script.js b/rust-src/components/script.js
@@ -1,5 +1,34 @@
+const { invoke } = window.__TAURI__.core;
+const { listen } = window.__TAURI__.event;
+
+const title = document.getElementById('tab-title');
+const searchbar = document.getElementById('searchbar');
+
 document.addEventListener('DOMContentLoaded', () => {
-   window.__TAURI__.core.invoke('get_title').then(title => {
-      document.getElementById('tab-title').innerText = title;
+   invoke('get_title').then(t => {
+      title.innerText = t;
+      if(t) title.style.display = null;
    });
+
+   searchbar.addEventListener('keydown', ({ target, key }) => {
+      const url = target.value.trim();
+      if(key.toUpperCase() == 'ENTER' && url != 'about:blank') invoke('load_url', { url });
+   });
+
+   document.querySelector('#controls>svg').addEventListener('click', () => invoke('close'));
+
+   window.addEventListener('contextmenu', event => event.preventDefault());
+});
+
+listen('title_change', ({ payload }) => {
+   if(payload) {
+      title.innerText = payload;
+      title.style.display = null;
+   }
+   else title.style.display = 'none';
+});
+
+listen('url_change', ({ payload }) => {
+   const url = payload.endsWith('/') ? payload.substring(0, payload.length - 1) : payload;
+   if(payload && url != 'about:blank') searchbar.value = url;
 });
diff --git a/rust-src/components/styles.css b/rust-src/components/styles.css
@@ -21,14 +21,20 @@ body::before {
 }
 
 nav {
-   padding: .75rem 1.25rem;
+   /* padding: .75rem 1.25rem; */
+   padding: .75rem 1.25rem .75rem .75rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    height: -webkit-fill-available;
+   -webkit-app-region: drag;
 }
 
-nav > #tabs,  nav > #controls {
+nav svg, nav > #searchbar, nav > * > div {
+   -webkit-app-region: no-drag;
+}
+
+nav > #tabs, nav > #controls {
    height: -webkit-fill-available;
    display: flex;
    gap: .5rem;

diff --git a/rust-src/components/topbar.html b/rust-src/components/topbar.html
@@ -2,22 +2,25 @@
 <html lang="en">
    <head>
       <meta charset="UTF-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
+      <meta name="viewport" content="height=60, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"></meta>
       <link rel="stylesheet" href="./styles.css">
    </head>
    <body>
       <nav>
          <div id="tabs">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
-            </svg>
-            <div id="tab-title"></div>
+            </svg> -->
+            <div id="tab-title" style="display: none;"></div>
          </div>
 
          <input
             id="searchbar"
             type="url"
             placeholder="Search in the universe..."
+            autocomplete="off"
+            autofocus
          />
 
          <div id="controls">

diff --git a/rust-src/src/lib.rs b/rust-src/src/lib.rs
@@ -1,13 +1,13 @@
 use isahc::ReadResponseExt;
-use tauri::{Builder, LogicalPosition, LogicalSize, WebviewBuilder, WebviewUrl, WindowBuilder};
+use tauri::{AppHandle, Builder, Emitter, LogicalPosition, LogicalSize, Manager, WebviewBuilder, WebviewUrl, WindowBuilder};
 use serde_json::Value;
 
 pub struct _Yomea {
    pub url: &'static str
 }
 
 pub static YOMEA: _Yomea = _Yomea {
-   url: "https://google.com"
+   url: "about:blank"
 };
 
 pub fn get_title_url(url: String, followredirects: bool) -> Result<String, u16> {
@@ -40,21 +40,57 @@ pub fn get_title_url(url: String, followredirects: bool) -> Result<String, u16>
       Ok(title.inner_html())
    }
    else {
-      Ok("Invalid title tag".to_string())
+      Ok("".to_string())
    }
 }
 
 #[tauri::command]
 fn get_title() -> String {
-   return get_title_url(YOMEA.url.to_string(), true).unwrap();
+   let url = YOMEA.url.to_string();
+   if url == "about:blank" {
+      return "".to_string();
+   }
+
+   match get_title_url(url, true) {
+      Ok(title) => title,
+      Err(code) => code.to_string()
+   }
+}
+
+#[tauri::command]
+fn load_url(app: AppHandle, url: String) {
+   let topbar = app.get_webview("topbar").unwrap();
+   let mut webview = app.get_webview("webview").unwrap();
+   // TODO: Basically this requests the site twice:
+   //    1. window.location.href
+   //    2. get_title_url()
+   webview.navigate(url.parse().unwrap()).unwrap();
+
+   let title = get_title_url(url, true).unwrap_or("".to_string());
+   // if title.is_err() {
+   //    topbar.emit("title_change", title.err());
+   // }
+   // else {
+   //    topbar.emit("title_change", title.unwrap().to_string());
+   // }
+   // match get_title_url(url, true) {
+   //    Ok(title) => topbar.emit("title_change", title),
+   //    Err(code) => topbar.emit("title_change", "code")
+   // }
+   topbar.emit("title_change", title).unwrap();
+}
+
+#[tauri::command]
+fn close(app: AppHandle) {
+   app.exit(0);
 }
 
 pub fn run() {
    let title = "Yomea";
    let size = serde_json::json!({ "width": 1400, "height": 800 });
 
    Builder::default()
-      .invoke_handler(tauri::generate_handler![get_title])
+      .invoke_handler(tauri::generate_handler![get_title, load_url, close])
       .setup(move |app| {
          let topbarcomponent = "topbar.html".into();
 
@@ -73,10 +109,16 @@ pub fn run() {
             WebviewUrl::App(topbarcomponent)
          );
 
+         let handle = app.app_handle().clone();
          let webview = WebviewBuilder::new(
             "webview",
             WebviewUrl::External(YOMEA.url.parse().unwrap())
-         );
+         ).on_navigation(move |url| {
+            let topbar = handle.get_webview("topbar").unwrap();
+            topbar.emit("url_change", url.to_string()).unwrap();
+            topbar.emit("title_change", get_title_url(url.to_string(), false).unwrap_or("".to_string())).unwrap();
+            true
+         });
 
          window.add_child(
             topbar.auto_resize(),