Simplify page URL hash logic (#725)

googlecodelabs · Apr 1, 2022 · 50f2fc3 · 50f2fc3
1 parent 21e8ad6
commit 50f2fc3
Showing 1 changed file with 20 additions and 35 deletions.
diff --git a/codelab-elements/google-codelab/google_codelab.js b/codelab-elements/google-codelab/google_codelab.js
@@ -329,6 +329,24 @@ class Codelab extends HTMLElement {
     this.setAttribute(SELECTED_ATTR, index);
   }
 
+  /**
+   * @export
+   * @return{string}
+   */
+  get hash() {
+    return window.location.hash;
+  }
+
+  /**
+   * @export
+   * @param {string} newHash
+   */
+  set hash(newHash) {
+    if (newHash !== '' && window.location.hash !== newHash) {
+      window.location.hash = newHash;
+    }
+  }
+
   /**
    * @protected
    */
@@ -484,32 +502,6 @@ class Codelab extends HTMLElement {
     }
   }
 
-  /**
-   * History popState callback
-   * @param {!Event} e
-   * @private
-   */
-  handlePopStateChanged_(e) {
-    const step = this.getStepFromHash_(document.location.hash);
-    this.setAttribute(DONT_SET_HISTORY_ATTR, '');
-    this.setAttribute(SELECTED_ATTR, `${step}`);
-    this.removeAttribute(DONT_SET_HISTORY_ATTR);
-  }
-
-  /**
-   * Updates the browser history state
-   * @param {string} path The new browser state
-   * @param {boolean=} replaceState optionally replace state instead of pushing
-   * @export
-   */
-  updateHistoryState(path, replaceState = false) {
-    if (replaceState) {
-      window.history.replaceState({path}, document.title, path);
-    } else {
-      window.history.pushState({path}, document.title, path);
-    }
-  }
-
   /**
    * @param {!Event} e
    * @private
@@ -864,22 +856,15 @@ class Codelab extends HTMLElement {
    */
   init_() {
     this.id_ = this.getAttribute(ID_ATTR);
-    let step = this.getStepFromHash_(document.location.hash) ||
-        this.getStepFromStorage_();
+    let step = this.getStepFromHash_(this.hash) || this.getStepFromStorage_();
     this.setAttribute(SELECTED_ATTR, `${step}`);
-    this.eventHandler_.listen(
-        dom.getWindow(), events.EventType.POPSTATE, (e) => {
-          this.handlePopStateChanged_(e);
-        });
   }
 
   /**
    * @protected
    */
   saveStep() {
-    if (!this.hasAttribute(DONT_SET_HISTORY_ATTR)) {
-      this.updateHistoryState(`#${this.currentSelectedStep}`, true);
-    }
+    this.hash = `#${this.currentSelectedStep}`;
     if (this.id_) {
       this.storage_.set(
           `progress_${this.id_}`, String(this.currentSelectedStep));