Only show query title in browser tab

Kristofir · Nov 17, 2022 · c57edb9 · c57edb9
1 parent 14c55e6
commit c57edb9
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 25 deletions.
diff --git a/etc/index.html b/etc/index.html
@@ -19,12 +19,13 @@
       <!-- Overlays -->
       <tooltip ref="tooltip"></tooltip>
       <url-popover :url="url" ref="share_url_popover"></url-popover>
-        
+
       <!-- Top bar -->
       <div class="top-box">
         <div class="top-content">
           <app-title ref="title" 
-            :value="title" 
+            :app_name="app_name"
+            :subtitle="subtitle"
             :connection="connection"
             :retry_count="retry_count">
           </app-title>

diff --git a/etc/js/app.js b/etc/js/app.js
@@ -567,11 +567,7 @@ var app = new Vue({
 
     // Set subtitle for browser tab
     set_subtitle(subtitle) {
-      if (subtitle && subtitle.length) {
-        this.title = subtitle + " (" + this.app_name + ")";
-      } else {
-        this.title = this.app_name;
-      }
+      this.subtitle = subtitle;
     },
 
     // Set inspector to entity by pathname
@@ -743,8 +739,8 @@ var app = new Vue({
   },
 
   data: {
-    title: "Flecs",
     app_name: "Flecs",
+    subtitle: "Flecs",
     query_error: undefined,
     code_error: undefined,
     query_result: undefined,

diff --git a/etc/js/app_title.js b/etc/js/app_title.js
@@ -1,16 +1,41 @@
 
 Vue.component('app-title', {
-  props: ['value', 'connection', 'retry_count'],
+  props: ['app_name', 'subtitle', 'connection', 'retry_count'],
   mounted: function() {
     var elem = document.getElementsByTagName("title");
     if (elem) {
-      document.title = this.title;
+      document.title = this.page_title;
     }
   },
   updated: function() {
     var elem = document.getElementsByTagName("title");
     if (elem) {
-      document.title = this.title;
+      document.title = this.page_title;
+    }
+  },
+  methods: {
+    build_title(add_subtitle) {
+      if (this.connection == ConnectionState.Remote || 
+        this.connection == ConnectionState.Local ||
+        this.connection == ConnectionState.RetryConnecting) 
+      {
+        let str;
+        if (this.subtitle && add_subtitle) {
+          str = this.subtitle + " (" + this.app_name + ")";
+        } else {
+          str = this.app_name;
+        }
+
+        str = str.replaceAll("_", " ");
+        str = str.charAt(0).toUpperCase() + str.slice(1);
+        return str;
+      } else if (this.connection == ConnectionState.Connecting ||
+        this.connection == ConnectionState.Initializing)
+      {
+        return "Connecting";
+      } else if (this.connection == ConnectionState.ConnectionFailed) {
+        return "Failed to connect :(";
+      }
     }
   },
   computed: {
@@ -30,20 +55,10 @@ Vue.component('app-title', {
       }
     },
     title: function() {
-      if (this.connection == ConnectionState.Remote || 
-          this.connection == ConnectionState.Local ||
-          this.connection == ConnectionState.RetryConnecting) 
-      {
-        let str = this.value.replaceAll("_", " ");
-        str = str.charAt(0).toUpperCase() + str.slice(1);
-        return str;
-      } else if (this.connection == ConnectionState.Connecting ||
-        this.connection == ConnectionState.Initializing)
-      {
-        return "Connecting";
-      } else if (this.connection == ConnectionState.ConnectionFailed) {
-        return "Failed to connect :(";
-      }
+      return this.build_title(false);
+    },
+    page_title: function() {
+      return this.build_title(true);
     },
     title_text: function() {
       if (this.connection == ConnectionState.Remote ||