Merge pull request #223 from Smithsonian/dev-bugfix

Re-implemented tour step overflow to animate on click based on feedback.
Smithsonian · Jul 28, 2023 · b1fcada · b1fcada
2 parents 4ed1816 + ad385b0
commit b1fcada
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/source/client/ui/explorer/TourNavigator.ts b/source/client/ui/explorer/TourNavigator.ts
@@ -71,12 +71,16 @@ export default class TourNavigator extends DocumentView
         }
         this.stepTitle = title;
 
+        if(this.firstRender) {
+            title = "";
+        }
+
         const exitButton = ui.isShowing(EUIElements.tour_exit) ? html`<ff-button class="sv-section-lead" transparent icon="close" title=${language.getLocalizedString("Exit Tour")} ?disabled=${!activeTour} @click=${this.onClickExit}></ff-button>` : null;
 
         return html`<div class="sv-blue-bar" role=region title="Tour Navigation" @keydown=${e =>this.onKeyDown(e)}><div class="sv-section">
             ${exitButton}
-            <div class="ff-ellipsis sv-content" id="title-text" aria-live="polite" aria-atomic="true" aria-relevant="additions text" @click=${this.onClickTitle}>
-                <div class="ff-ellipsis sv-title">${title}</div>
+            <div class="ff-ellipsis sv-content" id="title-area" aria-live="polite" aria-atomic="true" aria-relevant="additions text" @click=${this.onClickTitle}>
+                <div class="ff-ellipsis" id="title-text"><div class="ff-ellipsis sv-title" id="title-inner">${title}</div></div>
                 <div class="ff-ellipsis sv-text">${info}</div>
             </div>
             <ff-button class="sv-section-trail" transparent icon="bars" title=${language.getLocalizedString("Show Tour Menu")} @click=${this.onClickMenu}></ff-button>
@@ -98,11 +102,15 @@ export default class TourNavigator extends DocumentView
         const titleDiv = this.getElementsByClassName("sv-title").item(0) as HTMLElement;
         if(titleDiv)
         {
-            titleDiv.innerHTML = this.stepTitle;
+            //titleDiv.innerHTML = this.stepTitle;
             if(this.firstRender) {  
-                setTimeout(() => {titleDiv.innerHTML = `<div class="ff-ellipsis sv-title">${this.stepTitle}</div>`;}, 100);
+                //setTimeout(() => {titleDiv.innerHTML = `<div class="" id="title-text-alt">${this.stepTitle}</div>`;}, 100);
+                setTimeout(() => {titleDiv.innerText = this.stepTitle;}, 100);
                 this.firstRender = false;
             }
+            else {
+                titleDiv.innerText = this.stepTitle;
+            }
         }
     }
 
@@ -124,24 +132,24 @@ export default class TourNavigator extends DocumentView
         // go to previous tour step
         this.tours.ins.previous.set();
 
-        // reset direction of title text
-        this.textDirHelper(true);
+        // cancel any existing animations
+        const titleDiv = this.querySelector("#title-inner") as HTMLElement;
+        titleDiv.classList.remove("sv-text-scroll");
     }
 
     protected onClickNext()
     {
         // go to next tour step
         this.tours.ins.next.set();
 
-        // reset direction of title text
-        this.textDirHelper(true);
+        // cancel any existing animations
+        const titleDiv = this.querySelector("#title-inner") as HTMLElement;
+        titleDiv.classList.remove("sv-text-scroll");
     }
 
     protected onClickTitle()
     {
-        // change direction of title text
-        const titleDiv = this.querySelector("#title-text") as HTMLElement;
-        this.textDirHelper(titleDiv.style.direction === "rtl");
+        this.textHelper();
     }
 
     /*protected focusActive()
@@ -181,8 +189,33 @@ export default class TourNavigator extends DocumentView
         }
     }
 
-    protected textDirHelper(lToR: boolean) {
-        const titleDiv = this.querySelector("#title-text") as HTMLElement;
-        titleDiv.style.direction = lToR ? "ltr" : "rtl";
+    protected textHelper() {
+        const buffer = 12;
+        const titleDiv = this.querySelector("#title-inner") as HTMLElement;
+        const offset = titleDiv.scrollWidth - titleDiv.offsetWidth + buffer;
+
+        if(offset > buffer) {
+            const titleArea = this.querySelector("#title-area") as HTMLElement;
+            const duration = offset/30;
+
+            titleDiv.classList.remove("ff-ellipsis");
+
+            titleDiv.style.setProperty("animation-duration", duration.toString()+"s");
+            titleDiv.style.setProperty("--x-offset", "-" + offset + "px");
+            titleArea.style.setProperty("pointer-events", "none");
+            titleDiv.classList.add("sv-text-scroll");
+
+            titleDiv.addEventListener("animationend",() => {
+                titleDiv.classList.remove("sv-text-scroll");
+                titleDiv.classList.add("ff-ellipsis");
+                titleArea.style.setProperty("pointer-events", "auto");
+            });
+
+            titleDiv.addEventListener("animationcancel",() => {
+                titleDiv.classList.remove("sv-text-scroll");
+                titleDiv.classList.add("ff-ellipsis");
+                titleArea.style.setProperty("pointer-events", "auto");
+            });
+        }
     }
 }
diff --git a/source/client/ui/explorer/styles.scss b/source/client/ui/explorer/styles.scss
@@ -1064,12 +1064,18 @@ $tour-entry-indent: 12px;
   }
   .sv-title {
     font-size: 1.1em;
+    @keyframes ticker { 100% { transform:translateX(var(--x-offset)); } }
   }
   .sv-text {
     font-size: 0.9em;
   }
 }
 
+.sv-text-scroll {
+  animation:ticker 1s linear 1;
+  text-overflow: clip;
+}
+
 ////////////////////////////////////////////////////////////////////////////////
 // TARGET NAVIGATOR