Use browser history

javalikescript · Jan 18, 2025 · 4b3806f · 4b3806f
1 parent 61ffecc
commit 4b3806f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 48 deletions.
diff --git a/extensions/web-base/www/app.html b/extensions/web-base/www/app.html
@@ -189,6 +189,7 @@
         <div class="bar">
           <p>{{ extension.name }}</p>
           <div>
+            <button v-on:click="app.toPage('extension-info', extension.id)"><i class="fas fa-info"></i>&nbsp;Infos</button>
             <button v-on:click="pollExtension(extension)"><i class="far fa-bell"></i>&nbsp;Poll</button>
             <button v-on:click="app.toPage('extension', extension.id)"><i class="fas fa-cog"></i>&nbsp;Settings</button>
           </div>
@@ -239,6 +240,7 @@
         <div class="bar">
           <p>{{ extension.name }}</p>
           <div>
+            <button v-on:click="app.toPage('extension-info', extension.id)"><i class="fas fa-info"></i>&nbsp;Infos</button>
             <button v-on:click="app.toPage('addExtension', extension.id)"><i class="fa fa-plus"></i>&nbsp;Add...</button>
           </div>
         </div>
@@ -410,7 +412,6 @@ <h1>{{ title }}</h1><div />
       <div>
         <slot name="bar-left">
           <button v-on:click="app.menu = menu" v-if="menu"><i class="fa fa-bars"></i></button>
-          <button v-on:click="app.back()" v-if="!hideBack"><i class="fa fa-chevron-left"></i></button>
           <button v-on:click="app.toPage(homePage)" v-if="homePage"><i class="fas fa-home"></i></button>
         </slot>
       </div>

diff --git a/extensions/web-base/www/app/app.js b/extensions/web-base/www/app/app.js
@@ -102,9 +102,7 @@ var app = new Vue({
     dialog: '',
     watchers: [],
     page: '',
-    path: '',
     pages: {},
-    pageHistory: [],
     cache: {},
     user: {}
   },
@@ -120,32 +118,25 @@ var app = new Vue({
       return this.theme;
     },
     toPage: function(id, path) {
-      this.navigateTo(formatNavigationPath(id, path));
+      window.location.assign('#' + formatNavigationPath(id, path));
     },
     replacePage: function(id, path) {
-      this.navigateTo(formatNavigationPath(id, path), true);
+      window.location.replace('#' + formatNavigationPath(id, path));
     },
-    navigateTo: function(path, noHistory) {
-      if (this.path === path) {
-        return true;
-      }
+    onHashchange: function(path) {
       var matches = parseNavigationPath(path);
       if (matches) {
         var id = matches[1];
         var pagePath = matches[2];
         if (id in this.pages) {
-          if (!noHistory) {
-            this.pageHistory.push(this.path);
-          }
-          this.path = path;
           this.menu = '';
           var previousId = this.page !== id ? this.page : '';
           this.page = id;
           this.$emit('page-selected', id, pagePath, previousId);
-          return true;
+          return;
         }
       }
-      return false;
+      this.replacePage('home');
     },
     getPage: function(id) {
       return this.pages[id];
@@ -163,17 +154,8 @@ var app = new Vue({
       this.callPage(id, '$emit');
       return this;
     },
-    showBack: function() {
-      var l = this.pageHistory.length
-      return l > 0;
-    },
     back: function() {
-      var path = this.pageHistory.pop();
-      if (path) {
-        this.navigateTo(path, true);
-      } else {
-        this.toPage('home');
-      }
+      window.history.back();
     },
     watchDataChange: function(path, fn) {
       var parts = path.split('/', 2);
@@ -438,7 +420,6 @@ Vue.component('app-page', {
   props: {
     id: String,
     title: String,
-    hideBack: Boolean,
     homePage: String,
     menu: {
       type: String,

diff --git a/extensions/web-base/www/app/boot.js b/extensions/web-base/www/app/boot.js
@@ -35,26 +35,12 @@
   });
 });
 
-/************************************************************
- * Route application using location hash
- ************************************************************/
-function getLocationPath() {
-  var matches = parseNavigationPath(window.location.hash.substring(1))
-  if (matches) {
-    return formatNavigationPath(matches[1], matches[2]);
-  }
-  return formatNavigationPath('home');
-}
-
-function replaceLocationByNavigationPath(id, path) {
-  window.location.replace(window.location.pathname + '#' + formatNavigationPath(id, path));
+// Route application using location hash
+function onHashchange() {
+  app.onHashchange(window.location.hash.substring(1));
 }
 
-app.$on('page-selected', replaceLocationByNavigationPath);
-
-window.addEventListener('hashchange', function() {
-  app.navigateTo(getLocationPath());
-});
+window.addEventListener('hashchange', onHashchange);
 
 // avoid horizontal scroll which could happen on a tab-focused element out of the view
 window.addEventListener('scroll', function () {
@@ -88,10 +74,7 @@ window.addEventListener('scroll', function () {
     }));
   }
 })).then(function() {
-  if (!app.navigateTo(getLocationPath(), true)) {
-    replaceLocationByNavigationPath('home');
-    app.navigateTo(getLocationPath(), true);
-  }
+  onHashchange();
   function setupWebSocket() {
     var protocol = location.protocol.replace('http', 'ws');
     var url = protocol + '//' + location.host + '/ws/';