diff --git a/codelab-elements/google-codelab/google_codelab.js b/codelab-elements/google-codelab/google_codelab.js index 3f98cf045..76bc23d1b 100644 --- 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));