Sync URL location hash interactively (#2982)

holoviz · Dec 7, 2021 · 2089ce2 · 2089ce2
1 parent 137c873
commit 2089ce2
Showing 1 changed file with 29 additions and 18 deletions.
diff --git a/panel/models/location.ts b/panel/models/location.ts
@@ -4,47 +4,58 @@ import {Model} from "@bokehjs/model"
 
 export class LocationView extends View {
   model: Location
+  _hash_listener: any
 
   initialize(): void {
     super.initialize();
 
-    this.model.pathname = window.location.pathname;
-    this.model.search = window.location.search;
-    this.model.hash = window.location.hash;
+    this.model.pathname = window.location.pathname
+    this.model.search = window.location.search
+    this.model.hash = window.location.hash
 
     // Readonly parameters on python side
-    this.model.href = window.location.href;
-    this.model.hostname = window.location.hostname;
-    this.model.protocol = window.location.protocol;
-    this.model.port = window.location.port;
+    this.model.href = window.location.href
+    this.model.hostname = window.location.hostname
+    this.model.protocol = window.location.protocol
+    this.model.port = window.location.port
+
+    this._hash_listener = () => {
+      this.model.hash = window.location.hash
+    }
+    window.addEventListener('hashchange', this._hash_listener)
   }
 
   connect_signals(): void {
-    super.connect_signals();
+    super.connect_signals()
 
-    this.connect(this.model.properties.pathname.change, () => this.update('pathname'));
-    this.connect(this.model.properties.search.change, () => this.update('search'));
-    this.connect(this.model.properties.hash.change, () => this.update('hash'));
-    this.connect(this.model.properties.reload.change, () => this.update('reload'));
+    this.connect(this.model.properties.pathname.change, () => this.update('pathname'))
+    this.connect(this.model.properties.search.change, () => this.update('search'))
+    this.connect(this.model.properties.hash.change, () => this.update('hash'))
+    this.connect(this.model.properties.reload.change, () => this.update('reload'))
   }
 
+  remove(): void {
+    super.remove()
+    window.removeEventListener('hashchange', this._hash_listener)
+  }    
+
   update(change: string): void {
     if (!this.model.reload || (change === 'reload')) {
       window.history.pushState(
         {},
         '',
         `${this.model.pathname}${this.model.search}${this.model.hash}`
-      );
-      this.model.href = window.location.href;
+      )
+      this.model.href = window.location.href
       if (change === 'reload')
         window.location.reload()
     } else {
       if (change == 'pathname')
-        window.location.pathname = (this.model.pathname as string);
+        window.location.pathname = (this.model.pathname as string)
       if (change == 'search')
-	    window.location.search = (this.model.search as string);
+        window.location.search = (this.model.search as string)
       if (change == 'hash')
-        window.location.hash = (this.model.hash as string);
+        window.location.hash = (this.model.hash as string)
     }
   }
 }
@@ -75,7 +86,7 @@ export class Location extends Model {
   }
 
   static init_Location(): void {
-    this.prototype.default_view = LocationView;
+    this.prototype.default_view = LocationView
 
     this.define<Location.Props>(({Boolean, String}) => ({
       href:     [ String,     "" ],