add static placeholders for the searchbar and nav components (#797)

This component adds static html placeholders for the searchbar and nav components, which will be displayed prior to the SDK loading and components being added to the page. Also adds the `Answers-navigation` css class to navigation markup templates that were missing it and the `js-answersSearchBar` id to all searchbar markup templates that were missing it. J=SLAP-1336 TEST=manual see that on each of the 5 page templates, the searchbar and nav placeholders will display for a brief second before the page finishes loading
yext · May 28, 2021 · c03b0e4 · c03b0e4
1 parent 44c39d1
commit c03b0e4
Show file tree

Hide file tree

Showing 20 changed files with 200 additions and 15 deletions.
diff --git a/templates/universal-standard/markup/navigation.hbs b/templates/universal-standard/markup/navigation.hbs
@@ -1 +1,19 @@
-<div class="Answers-nav js-answersNavigation"></div>
+<div class="Answers-nav Answers-navigation js-answersNavigation" id="js-answersNavigation">
+  <nav class="yxt-Nav-container js-yxt-navContainer ">
+    <ul class="yxt-Nav-expanded" aria-label="Search Page Navigation">
+      <li>
+        {{!-- 
+          This is a placeholder tab so that the placeholder nav bar
+          takes the expected amount of space on the page
+        --}}
+        <a class="js-yxt-navItem yxt-Nav-item is-active"
+          data-middleclick="active"
+          data-eventtype="ALL_TAB_NAVIGATION"
+          style="visibility: hidden;"
+        >
+          placeholder
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
diff --git a/templates/universal-standard/markup/searchbar.hbs b/templates/universal-standard/markup/searchbar.hbs
@@ -1 +1,14 @@
-<div class="Answers-search js-answersSearch"></div>
+<div class="Answers-search js-answersSearch" id="js-answersSearchBar">
+  <div class="yxt-SearchBar">
+    <div class="yxt-SearchBar-container">
+      <form class="yxt-SearchBar-form">
+        <input
+          class="js-yext-query yxt-SearchBar-input"
+          id="yxt-SearchBar-input--SearchBar"
+          type="text"
+          name="query"
+        >
+      </form>
+    </div>
+  </div>
+</div>
diff --git a/templates/universal-standard/script/navigation.hbs b/templates/universal-standard/script/navigation.hbs
@@ -39,7 +39,10 @@ verticalPages: [
   }{{#unless @last}},{{/unless}}
 {{/if}}
 {{/each}}
-]
+],
+onCreate: function() {
+  this._container.textContent = '';
+}
 }, {{{ json componentSettings.Navigation }}}));
 
 {{!--

diff --git a/templates/universal-standard/script/searchbar.hbs b/templates/universal-standard/script/searchbar.hbs
@@ -24,4 +24,7 @@ const shouldAddOverlayConfig = window.isOverlay && document.querySelector('.js-A
 ANSWERS.addComponent("SearchBar", Object.assign({}, {
   container: ".js-answersSearch",
   ...(shouldAddOverlayConfig ? overlayConfig : {}),
+  onCreate: function() {
+    this._container.textContent = '';
+  }
 }, {{{ json componentSettings.SearchBar }}}));
diff --git a/templates/vertical-full-page-map/markup/navigation.hbs b/templates/vertical-full-page-map/markup/navigation.hbs
@@ -1 +1,19 @@
-<div class="Answers-nav Answers-navigation js-answersNavigation" id="js-answersNavigation"></div>
+<div class="Answers-nav Answers-navigation js-answersNavigation" id="js-answersNavigation">
+  <nav class="yxt-Nav-container js-yxt-navContainer ">
+    <ul class="yxt-Nav-expanded" aria-label="Search Page Navigation">
+      <li>
+        {{!-- 
+          This is a placeholder tab so that the placeholder nav bar
+          takes the expected amount of space on the page
+        --}}
+        <a class="js-yxt-navItem yxt-Nav-item is-active"
+          data-middleclick="active"
+          data-eventtype="ALL_TAB_NAVIGATION"
+          style="visibility: hidden;"
+        >
+          placeholder
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
diff --git a/templates/vertical-full-page-map/markup/searchbar.hbs b/templates/vertical-full-page-map/markup/searchbar.hbs
@@ -1 +1,14 @@
-<div class="Answers-search js-answersSearch" id="js-answersSearchBar"></div>
+<div class="Answers-search js-answersSearch" id="js-answersSearchBar">
+  <div class="yxt-SearchBar">
+    <div class="yxt-SearchBar-container">
+      <form class="yxt-SearchBar-form">
+        <input
+          class="js-yext-query yxt-SearchBar-input"
+          id="yxt-SearchBar-input--SearchBar"
+          type="text"
+          name="query"
+        >
+      </form>
+    </div>
+  </div>
+</div>
diff --git a/templates/vertical-full-page-map/script/navigation.hbs b/templates/vertical-full-page-map/script/navigation.hbs
@@ -39,7 +39,10 @@ verticalPages: [
   }{{#unless @last}},{{/unless}}
 {{/if}}
 {{/each}}
-]
+],
+onCreate: function() {
+  this._container.textContent = '';
+}
 }, {{{ json componentSettings.Navigation }}}));
 
 {{!--

diff --git a/templates/vertical-full-page-map/script/searchbar.hbs b/templates/vertical-full-page-map/script/searchbar.hbs
@@ -27,4 +27,7 @@ ANSWERS.addComponent("SearchBar", Object.assign({}, {
     verticalKey: "{{{verticalKey}}}",
   {{/if}}
   ...(shouldAddOverlayConfig ? overlayConfig : {}),
+  onCreate: function() {
+    this._container.textContent = '';
+  }
 }, {{{ json componentSettings.SearchBar }}}));
diff --git a/templates/vertical-grid/markup/navigation.hbs b/templates/vertical-grid/markup/navigation.hbs
@@ -1 +1,19 @@
-<div class="Answers-nav js-answersNavigation"></div>
+<div class="Answers-nav Answers-navigation js-answersNavigation" id="js-answersNavigation">
+  <nav class="yxt-Nav-container js-yxt-navContainer ">
+    <ul class="yxt-Nav-expanded" aria-label="Search Page Navigation">
+      <li>
+        {{!-- 
+          This is a placeholder tab so that the placeholder nav bar
+          takes the expected amount of space on the page
+        --}}
+        <a class="js-yxt-navItem yxt-Nav-item is-active"
+          data-middleclick="active"
+          data-eventtype="ALL_TAB_NAVIGATION"
+          style="visibility: hidden;"
+        >
+          placeholder
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
diff --git a/templates/vertical-grid/markup/searchbar.hbs b/templates/vertical-grid/markup/searchbar.hbs
@@ -1 +1,14 @@
-<div class="Answers-search js-answersSearch"></div>
+<div class="Answers-search js-answersSearch" id="js-answersSearchBar">
+  <div class="yxt-SearchBar">
+    <div class="yxt-SearchBar-container">
+      <form class="yxt-SearchBar-form">
+        <input
+          class="js-yext-query yxt-SearchBar-input"
+          id="yxt-SearchBar-input--SearchBar"
+          type="text"
+          name="query"
+        >
+      </form>
+    </div>
+  </div>
+</div>
diff --git a/templates/vertical-grid/script/navigation.hbs b/templates/vertical-grid/script/navigation.hbs
@@ -39,7 +39,10 @@ verticalPages: [
   }{{#unless @last}},{{/unless}}
 {{/if}}
 {{/each}}
-]
+],
+onCreate: function() {
+  this._container.textContent = '';
+}
 }, {{{ json componentSettings.Navigation }}}));
 
 {{!--

diff --git a/templates/vertical-grid/script/searchbar.hbs b/templates/vertical-grid/script/searchbar.hbs
@@ -27,4 +27,7 @@ ANSWERS.addComponent("SearchBar", Object.assign({}, {
     verticalKey: "{{{verticalKey}}}",
   {{/if}}
   ...(shouldAddOverlayConfig ? overlayConfig : {}),
+  onCreate: function() {
+    this._container.textContent = '';
+  }
 }, {{{ json componentSettings.SearchBar }}}));
diff --git a/templates/vertical-map/markup/navigation.hbs b/templates/vertical-map/markup/navigation.hbs
@@ -1 +1,19 @@
-<div class="Answers-nav Answers-navigation js-answersNavigation" id="js-answersNavigation"></div>
+<div class="Answers-nav Answers-navigation js-answersNavigation" id="js-answersNavigation">
+  <nav class="yxt-Nav-container js-yxt-navContainer ">
+    <ul class="yxt-Nav-expanded" aria-label="Search Page Navigation">
+      <li>
+        {{!-- 
+          This is a placeholder tab so that the placeholder nav bar
+          takes the expected amount of space on the page
+        --}}
+        <a class="js-yxt-navItem yxt-Nav-item is-active"
+          data-middleclick="active"
+          data-eventtype="ALL_TAB_NAVIGATION"
+          style="visibility: hidden;"
+        >
+          placeholder
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
diff --git a/templates/vertical-map/markup/searchbar.hbs b/templates/vertical-map/markup/searchbar.hbs
@@ -1 +1,14 @@
-<div class="Answers-search js-answersSearch" id="js-answersSearchBar"></div>
+<div class="Answers-search js-answersSearch" id="js-answersSearchBar">
+  <div class="yxt-SearchBar">
+    <div class="yxt-SearchBar-container">
+      <form class="yxt-SearchBar-form">
+        <input
+          class="js-yext-query yxt-SearchBar-input"
+          id="yxt-SearchBar-input--SearchBar"
+          type="text"
+          name="query"
+        >
+      </form>
+    </div>
+  </div>
+</div>
diff --git a/templates/vertical-map/script/navigation.hbs b/templates/vertical-map/script/navigation.hbs
@@ -39,7 +39,10 @@ verticalPages: [
   }{{#unless @last}},{{/unless}}
 {{/if}}
 {{/each}}
-]
+],
+onCreate: function() {
+  this._container.textContent = '';
+}
 }, {{{ json componentSettings.Navigation }}}));
 
 {{!--

diff --git a/templates/vertical-map/script/searchbar.hbs b/templates/vertical-map/script/searchbar.hbs
@@ -27,4 +27,7 @@ ANSWERS.addComponent("SearchBar", Object.assign({}, {
     verticalKey: "{{{verticalKey}}}",
   {{/if}}
   ...(shouldAddOverlayConfig ? overlayConfig : {}),
+  onCreate: function() {
+    this._container.textContent = '';
+  }
 }, {{{ json componentSettings.SearchBar }}}));
diff --git a/templates/vertical-standard/markup/navigation.hbs b/templates/vertical-standard/markup/navigation.hbs
@@ -1 +1,19 @@
-<div class="Answers-nav js-answersNavigation"></div>
+<div class="Answers-nav Answers-navigation js-answersNavigation" id="js-answersNavigation">
+  <nav class="yxt-Nav-container js-yxt-navContainer ">
+    <ul class="yxt-Nav-expanded" aria-label="Search Page Navigation">
+      <li>
+        {{!-- 
+          This is a placeholder tab so that the placeholder nav bar
+          takes the expected amount of space on the page
+        --}}
+        <a class="js-yxt-navItem yxt-Nav-item is-active"
+          data-middleclick="active"
+          data-eventtype="ALL_TAB_NAVIGATION"
+          style="visibility: hidden;"
+        >
+          placeholder
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
diff --git a/templates/vertical-standard/markup/searchbar.hbs b/templates/vertical-standard/markup/searchbar.hbs
@@ -1 +1,14 @@
-<div class="Answers-search js-answersSearch" id="js-answersSearchBar"></div>
+<div class="Answers-search js-answersSearch" id="js-answersSearchBar">
+  <div class="yxt-SearchBar">
+    <div class="yxt-SearchBar-container">
+      <form class="yxt-SearchBar-form">
+        <input
+          class="js-yext-query yxt-SearchBar-input"
+          id="yxt-SearchBar-input--SearchBar"
+          type="text"
+          name="query"
+        >
+      </form>
+    </div>
+  </div>
+</div>
diff --git a/templates/vertical-standard/script/navigation.hbs b/templates/vertical-standard/script/navigation.hbs
@@ -39,7 +39,10 @@ verticalPages: [
   }{{#unless @last}},{{/unless}}
 {{/if}}
 {{/each}}
-]
+],
+onCreate: function() {
+  this._container.textContent = '';
+}
 }, {{{ json componentSettings.Navigation }}}));
 
 {{!--

diff --git a/templates/vertical-standard/script/searchbar.hbs b/templates/vertical-standard/script/searchbar.hbs
@@ -27,4 +27,7 @@ ANSWERS.addComponent("SearchBar", Object.assign({}, {
     verticalKey: "{{{verticalKey}}}",
   {{/if}}
   ...(shouldAddOverlayConfig ? overlayConfig : {}),
+  onCreate: function() {
+    this._container.textContent = '';
+  }
 }, {{{ json componentSettings.SearchBar }}}));