diff --git a/common-theme/assets/scripts/solo-view.js b/common-theme/assets/scripts/solo-view.js index cef2f85f7..4adfe46e9 100644 --- a/common-theme/assets/scripts/solo-view.js +++ b/common-theme/assets/scripts/solo-view.js @@ -1,10 +1,8 @@ const elementName = "solo-view"; - class SoloView extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); - // State object this.state = { currentBlockIndex: 0, @@ -24,7 +22,6 @@ class SoloView extends HTMLElement { ); document.addEventListener("keydown", this.handleKeydown.bind(this)); } - connectedCallback() { this.render(); // Render the component this.cacheDOM(); // Cache necessary DOM elements @@ -32,13 +29,11 @@ class SoloView extends HTMLElement { this.handleFragment(); // Check for a fragment in the URL and set to this view if present this.updateView(); // Initial view update } - disconnectedCallback() { // Removing window and doc event listeners window.removeEventListener("hashchange", this.handleFragment.bind(this)); document.removeEventListener("keydown", this.handleKeydown.bind(this)); } - // Cache DOM elements cacheDOM() { this.state.blocks = [ @@ -54,16 +49,13 @@ class SoloView extends HTMLElement { '[slot="nav"] .c-solo-view__next' ); } - // Add event listeners addEventListeners() { this.state.tocLinks.forEach((link, index) => { link.addEventListener("click", () => this.updateCurrentBlockIndex(index)); }); - this.state.navButtons.back.addEventListener("click", this.navigateBack); this.state.navButtons.next.addEventListener("click", this.navigateNext); - this.addEventListener( "touchstart", (event) => { @@ -74,7 +66,6 @@ class SoloView extends HTMLElement { }, { passive: true } ); - this.addEventListener( "touchend", (event) => { @@ -87,25 +78,20 @@ class SoloView extends HTMLElement { }, { passive: true } ); - this.addEventListener("keydown", this.handleKeydown, { passive: true }); } - // Update current block index updateCurrentBlockIndex(index) { this.state.currentBlockIndex = index; this.updateView(); } - // Navigation logic navigateBack = (event) => { this.navigate(event, this.state.currentBlockIndex - 1); }; - navigateNext = (event) => { this.navigate(event, this.state.currentBlockIndex + 1); }; - navigate = (event, index) => { if (index < 0 || index >= this.state.blocks.length) { return; @@ -115,7 +101,6 @@ class SoloView extends HTMLElement { event.stopPropagation(); this.state.tocLinks[index].click(); }; - // Handle swipe gesture handleSwipeGesture = (startX, endX) => { const deltaX = endX - startX; @@ -128,7 +113,6 @@ class SoloView extends HTMLElement { this.navigateNext(new Event("swipe")); } }; - eventTargetIsHorizontallyScrollable = (event) => { let el = event.target; while (el && el.localName !== elementName) { @@ -139,8 +123,20 @@ class SoloView extends HTMLElement { } return false; } - handleKeydown = (event) => { + // Don't navigate if user is typing in an editable element + const target = event.target; + const tagName = target.tagName; + + if ( + tagName === 'TEXTAREA' || + tagName === 'INPUT' || + tagName === 'SELECT' || + target.isContentEditable + ) { + return; + } + if (event.key === "ArrowLeft") { this.navigateBack(event); } @@ -148,7 +144,6 @@ class SoloView extends HTMLElement { this.navigateNext(event); } }; - // look for a fragment in the URL and navigate to it if one exists so we can link directly to a view handleFragment = () => { const fragment = window.location.hash.substring(1); @@ -162,20 +157,17 @@ class SoloView extends HTMLElement { } } }; - // Update view updateView() { this.state.blocks.forEach((block, index) => { block.hidden = index !== this.state.currentBlockIndex; }); - this.state.tocLinks.forEach((link, index) => { link.classList.toggle( "is-active", index === this.state.currentBlockIndex ); }); - // Hide unusable buttons this.state.navButtons.back.style.display = this.state.currentBlockIndex === 0 ? "none" : "inline-flex"; @@ -184,13 +176,11 @@ class SoloView extends HTMLElement { ? "none" : "inline-flex"; } - // Render method with slots and CSS render() { this.shadowRoot.innerHTML = ` @@ -220,5 +208,4 @@ class SoloView extends HTMLElement { `; } } - customElements.define(elementName, SoloView);