WIP:

platform/commonUI/edit/src/creation/CreateAction.js

@@ -86,7 +86,7 @@ define(
                         })
                         .join('/');
 
-                window.location.href = url;
+                openmct.router.setHash(url);
 
                 if (isFirstViewEditable(object.useCapability('adapter'))) {
                     openmct.editor.edit();

src/plugins/URLTimeSettingsSynchronizer/URLTimeSettingsSynchronizer.js

@@ -51,7 +51,7 @@ export default class URLTimeSettingsSynchronizer {
     initialize() {
         this.updateTimeSettings();
 
-        window.addEventListener('hashchange', this.updateTimeSettings);
+        this.openmct.router.on('change:hash', this.updateTimeSettings);
         TIME_EVENTS.forEach(event => {
             this.openmct.time.on(event, this.setUrlFromTimeApi);
         });
@@ -59,7 +59,7 @@ export default class URLTimeSettingsSynchronizer {
     }
 
     destroy() {
-        window.removeEventListener('hashchange', this.updateTimeSettings);
+        this.openmct.router.off('change:hash', this.updateTimeSettings);
         this.openmct.off('start', this.initialize);
         this.openmct.off('destroy', this.destroy);
 
@@ -69,7 +69,8 @@ export default class URLTimeSettingsSynchronizer {
         this.openmct.time.off('bounds', this.updateBounds);
     }
 
-    updateTimeSettings() {
+    updateTimeSettings(hash) {
+        // console.log('updateTimeSettings', hash);
         // Prevent from triggering self
         if (!this.isUrlUpdateInProgress) {
             let timeParameters = this.parseParametersFromUrl();
@@ -177,7 +178,7 @@ export default class URLTimeSettingsSynchronizer {
 
         searchParams.set(SEARCH_TIME_SYSTEM, this.openmct.time.timeSystem().key);
         this.isUrlUpdateInProgress = true;
-        setAllSearchParams(searchParams);
+        setAllSearchParams(this.openmct, searchParams);
     }
 
     areTimeParametersValid(timeParameters) {

src/plugins/goToOriginalAction/goToOriginalAction.js

@@ -39,7 +39,7 @@ export default class GoToOriginalAction {
                     .slice(1)
                     .join('/');
 
-                window.location.href = url;
+                this._openmct.router.setHash(url);
             });
     }
     appliesTo(objectPath) {

src/plugins/notebook/components/Notebook.vue

@@ -125,10 +125,11 @@ export default {
         Sidebar
     },
     data() {
+        const configuration = this.domainObject.configuration || {};
         return {
             defaultPageId: getDefaultNotebook() ? getDefaultNotebook().page.id : '',
             defaultSectionId: getDefaultNotebook() ? getDefaultNotebook().section.id : '',
-            defaultSort: this.domainObject.configuration.defaultSort,
+            defaultSort: configuration.defaultSort,
             focusEntryId: null,
             internalDomainObject: this.domainObject,
             search: '',

src/plugins/notebook/components/NotebookEmbed.vue

@@ -144,7 +144,7 @@ export default {
             }
 
             const url = new URL(link);
-            window.location.href = url.hash;
+            this.openmct.router.setHash(url.hash);
         },
         formatTime(unixTime, timeFormat) {
             return Moment.utc(unixTime).format(timeFormat);

src/plugins/remove/RemoveAction.js

@@ -76,7 +76,7 @@ export default class RemoveAction {
             .map(object => this.openmct.objects.makeKeyString(object.identifier))
             .join("/");
 
-        window.location.href = '#/browse/' + urlPath;
+        this.openmct.router.setHash(`#/browse/${urlPath}`);
     }
 
     removeFromComposition(parent, child) {

src/plugins/tabs/components/tabs.vue

@@ -264,12 +264,12 @@ export default {
             let currentTabIndexInURL = getSearchParam(this.searchTabKey);
 
             if (index !== currentTabIndexInURL) {
-                setSearchParam(this.searchTabKey, index);
+                setSearchParam(this.openmct, this.searchTabKey, index);
                 this.currentTabIndex = index;
             }
         },
         clearCurrentTabIndexFromURL() {
-            deleteSearchParam(this.searchTabKey);
+            deleteSearchParam(this.openmct, this.searchTabKey);
         }
     }
 };

src/ui/components/ObjectLabel.vue

@@ -6,7 +6,6 @@
         'is-missing': observedObject.status === 'missing'
     }"
     draggable="true"
-    :href="objectLink"
     @dragstart="dragStart"
     @click="navigateOrPreview"
 >
@@ -85,7 +84,11 @@ export default {
             if (this.openmct.editor.isEditing()) {
                 event.preventDefault();
                 this.preview();
+
+                return;
             }
+
+            this.openmct.router.setPath(this.objectLink);
         },
         preview() {
             if (this.previewAction.appliesTo(this.objectPath)) {

src/ui/layout/BrowseBar.vue

@@ -304,7 +304,7 @@ export default {
             this.openmct.contextMenu._showContextMenuForObjectPath(this.openmct.router.path, event.clientX, event.clientY);
         },
         goToParent() {
-            window.location.hash = this.parentUrl;
+            this.openmct.router.setHash(this.parentUrl);
         },
         toggleLock(flag) {
             this.openmct.objects.mutate(this.domainObject, 'locked', flag);

src/ui/router/ApplicationRouter.js

@@ -21,8 +21,8 @@
  *****************************************************************************/
 /*global module*/
 
-const LocationBar = require('location-bar');
 const EventEmitter = require('EventEmitter');
+const lodash = require('lodash');
 
 function paramsToObject(searchParams) {
     let params = {};
@@ -61,7 +61,9 @@ class ApplicationRouter extends EventEmitter {
         super();
         this.routes = [];
         this.started = false;
-        this.locationBar = new LocationBar();
+
+        this.hashChanged = this.hashChanged.bind(this);
+        // this.setHash = lodash.debounce(this.setHash, 500);
     }
 
     /**
@@ -74,14 +76,31 @@ class ApplicationRouter extends EventEmitter {
 
         this.started = true;
 
-        this.locationBar.onChange(p => this.handleLocationChange(p));
+        this.hashChanged();
-        this.locationBar.start({
+
-            root: location.pathname
+        window.addEventListener('hashchange', this.hashChanged);
-        });
+    }
+
+    getPathString() {
+        const hash = window.location.hash;
+        return hash.substring(1);
     }
 
     destroy() {
-        this.locationBar.stop();
+        window.removeEventListener(this.hashChanged);
+    }
+
+    hashChanged () {
+        const pathString = this.getPathString();
+        this.handleLocationChange(this.getPathString());
+        // const hasTimeSystem = pathString.includes('timeSystem=');
+        // if (hasTimeSystem) {
+            // console.log(location.hash);
+            // const currentState = history.state || {};
+            // history.pushState(currentState, 'hashchange', location.hash);
+        // }
+
+        // console.log('hashchanged', new Date().toISOString(), location.hash);
     }
 
     handleLocationChange(pathString) {
@@ -186,7 +205,25 @@ class ApplicationRouter extends EventEmitter {
     }
 
     set(path, queryString) {
-        location.hash = `${path}?${queryString}`;
+        const hash = `${path}?${queryString}`;
+
+        this.setHash(hash);
+    }
+
+    setHash(hash) {
+        if (hash === location.hash) {
+            return;
+        }
+
+        console.log('setHash', new Date().toISOString(), hash);
+
+        if (hash.includes('timeSystem=')) {
+            location.hash = hash;
+        } else {
+            this.handleLocationChange(hash);
+        }
+
+        this.emit('change:hash', hash);
     }
 
     setQueryString(queryString) {

src/ui/router/Browse.js

@@ -15,6 +15,7 @@ define([
 
         openmct.router.route(/^\/browse\/(.*)$/, (path, results, params) => {
             isRoutingInProgress = true;
+
             let navigatePath = results[1];
             navigateToPath(navigatePath, params.view);
             onParamsChanged(null, null, params);

src/utils/openmctLocation.js

@@ -29,25 +29,25 @@ import objectUtils from '../api/objects/object-utils.js';
  * hash section of the URL.
  */
 
-export function setSearchParam(paramName, paramValue) {
+export function setSearchParam(openmct, paramName, paramValue) {
     let url = getHashRelativeURL();
 
     url.searchParams.set(paramName, paramValue);
-    setLocationFromUrl(url);
+    setLocationFromUrl(openmct, url);
 }
 
-export function deleteSearchParam(paramName) {
+export function deleteSearchParam(openmct, paramName) {
     let url = getHashRelativeURL();
 
     url.searchParams.delete(paramName);
-    setLocationFromUrl(url);
+    setLocationFromUrl(openmct, url);
 }
 
 /**
  * Will replace all current search parameters with the ones defined in urlSearchParams
  * @param {URLSearchParams} paramMap
  */
-export function setAllSearchParams(newSearchParams) {
+export function setAllSearchParams(openmct, newSearchParams) {
     let url = getHashRelativeURL();
 
     Array.from(url.searchParams.keys()).forEach((key) => url.searchParams.delete(key));
@@ -56,7 +56,7 @@ export function setAllSearchParams(newSearchParams) {
         url.searchParams.set(key, newSearchParams.get(key));
     });
 
-    setLocationFromUrl(url);
+    setLocationFromUrl(openmct, url);
 }
 
 export function getSearchParam(paramName) {
@@ -75,7 +75,7 @@ export function getObjectPath() {
     return getHashRelativeURL().pathname;
 }
 
-export function setObjectPath(objectPath) {
+export function setObjectPath(openmct, objectPath) {
     let objectPathString;
     let url = getHashRelativeURL();
 
@@ -92,15 +92,16 @@ export function setObjectPath(objectPath) {
     }
 
     url.pathname = objectPathString;
-    setLocationFromUrl(url);
+    setLocationFromUrl(openmct, url);
 }
 
 function isDomainObject(potentialObject) {
     return potentialObject.identifier === undefined;
 }
 
-function setLocationFromUrl(url) {
+function setLocationFromUrl(openmct, url) {
-    window.location.hash = `${url.pathname}${url.search}`;
+    console.log('setLocationFromUrl');
+    openmct.router.setHash(`${url.pathname}${url.search}`);
 }
 
 function getHashRelativeURL() {