From 25cffb6809cecdf0ca9b9e1d8c1fee91963ea175 Mon Sep 17 00:00:00 2001
From: djanelle-mit <djanelle@mit.edu>
Date: Mon, 24 Nov 2025 13:15:25 -0500
Subject: [PATCH 01/12] Split tab bar styles into own SCSS partial

---
 app/assets/stylesheets/application.css.scss   |  1 +
 app/assets/stylesheets/partials/_search.scss  | 46 -------------------
 .../stylesheets/partials/_source_tabs.scss    | 45 ++++++++++++++++++
 3 files changed, 46 insertions(+), 46 deletions(-)
 create mode 100644 app/assets/stylesheets/partials/_source_tabs.scss

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index b1035bad..4fc387de 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -19,6 +19,7 @@
 @import "partials/_record";
 @import "partials/_search";
 @import "partials/_shared";
+@import "partials/_source_tabs";
 @import "partials/_results";
 @import "partials/_loading_spinner";
 @import "partials/_suggestion-panel";
\ No newline at end of file
diff --git a/app/assets/stylesheets/partials/_search.scss b/app/assets/stylesheets/partials/_search.scss
index 7897fc4e..105bfd9b 100644
--- a/app/assets/stylesheets/partials/_search.scss
+++ b/app/assets/stylesheets/partials/_search.scss
@@ -214,52 +214,6 @@
   color: #fff;
 }
 
-/* =========== */
-/* New Tab Bar */
-/* =========== */
-
-#tabs {
-  margin-top: 0;
-
-  ul {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    gap: 4px;
-  }
-
-  a {
-    padding: 12px 20px 16px;
-    background-color: transparent;
-    display: inline-block;
-    border: 2px solid transparent;
-    border-bottom: 0;  
-
-    @include searchUnderlinedLinks;
-
-    &:hover {
-      border-color: $color-gray-700;
-      background-color: $color-gray-900;
-      color: $color-text-oncolor;
-    }
-
-    &.active {
-      background-color: $color-white;
-      color: $color-text-primary;
-      text-decoration: none;
-
-      &:hover {
-        color: $color-text-primary;
-        border-color: transparent;
-      }
-    }
-
-
-  }
-
-}
-
 /* ============== */
 /* Search Actions */
 /* ============== */
diff --git a/app/assets/stylesheets/partials/_source_tabs.scss b/app/assets/stylesheets/partials/_source_tabs.scss
new file mode 100644
index 00000000..f7f0ce3f
--- /dev/null
+++ b/app/assets/stylesheets/partials/_source_tabs.scss
@@ -0,0 +1,45 @@
+/* ============================ */
+/* Source Tab Bar in USE Search */
+/* ============================ */
+
+#tabs {
+  margin-top: 0;
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    gap: 4px;
+  }
+
+  a {
+    padding: 12px 20px 16px;
+    background-color: transparent;
+    display: inline-block;
+    border: 2px solid transparent;
+    border-bottom: 0;  
+
+    @include searchUnderlinedLinks;
+
+    &:hover {
+      border-color: $color-gray-700;
+      background-color: $color-gray-900;
+      color: $color-text-oncolor;
+    }
+
+    &.active {
+      background-color: $color-white;
+      color: $color-text-primary;
+      text-decoration: none;
+
+      &:hover {
+        color: $color-text-primary;
+        border-color: transparent;
+      }
+    }
+
+
+  }
+
+}
\ No newline at end of file

From 37fd5f6d454ef69b59776a53eb75f41d6aa9245c Mon Sep 17 00:00:00 2001
From: djanelle-mit <djanelle@mit.edu>
Date: Mon, 24 Nov 2025 13:23:08 -0500
Subject: [PATCH 02/12] Graceful degradation state when no JS is present

---
 app/assets/stylesheets/partials/_source_tabs.scss | 9 ++++++++-
 app/views/search/_source_tabs.html.erb            | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/partials/_source_tabs.scss b/app/assets/stylesheets/partials/_source_tabs.scss
index f7f0ce3f..3c7c6be6 100644
--- a/app/assets/stylesheets/partials/_source_tabs.scss
+++ b/app/assets/stylesheets/partials/_source_tabs.scss
@@ -5,7 +5,13 @@
 #tabs {
   margin-top: 0;
 
-  ul {
+  // Graceful degradation when JS is not enabled
+  &:not(.has-js) {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;  
+  }
+
+  ul.primary {
     list-style-type: none;
     padding: 0;
     margin: 0;
@@ -19,6 +25,7 @@
     display: inline-block;
     border: 2px solid transparent;
     border-bottom: 0;  
+    white-space: nowrap;
 
     @include searchUnderlinedLinks;
 
diff --git a/app/views/search/_source_tabs.html.erb b/app/views/search/_source_tabs.html.erb
index a9482de4..2f2f9315 100644
--- a/app/views/search/_source_tabs.html.erb
+++ b/app/views/search/_source_tabs.html.erb
@@ -1,6 +1,6 @@
   <!-- Tab Navigation -->
   <nav id="tabs" class="tab-navigation" aria-label="Result type navigation">
-    <ul>
+    <ul class="primary">
       <li><%= link_to_tab("All") %></li>
 
       <% if Feature.enabled?(:tab_primo_all) %>

From 5c5c6ba454dd48d333b3a1cb0c35e10984b966a9 Mon Sep 17 00:00:00 2001
From: djanelle-mit <djanelle@mit.edu>
Date: Mon, 24 Nov 2025 13:39:18 -0500
Subject: [PATCH 03/12] Adding JS file for source tabs

---
 app/javascript/application.js | 1 +
 app/javascript/source_tabs.js | 0
 2 files changed, 1 insertion(+)
 create mode 100644 app/javascript/source_tabs.js

diff --git a/app/javascript/application.js b/app/javascript/application.js
index b3e67a5a..ad1461bf 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -2,6 +2,7 @@
 import "@hotwired/turbo-rails"
 import "controllers"
 import "loading_spinner"
+import "source_tabs"
 
 // Show the progress bar after 200 milliseconds, not the default 500
 Turbo.config.drive.progressBarDelay = 200;
\ No newline at end of file
diff --git a/app/javascript/source_tabs.js b/app/javascript/source_tabs.js
new file mode 100644
index 00000000..e69de29b

From 0246b1d2d8ec3f1c24353318813d5bd6db68761d Mon Sep 17 00:00:00 2001
From: djanelle-mit <djanelle@mit.edu>
Date: Mon, 24 Nov 2025 13:49:18 -0500
Subject: [PATCH 04/12] Updating importmap for source_tabs js file

---
 config/importmap.rb | 1 +
 1 file changed, 1 insertion(+)

diff --git a/config/importmap.rb b/config/importmap.rb
index 672f444c..cbd365c1 100644
--- a/config/importmap.rb
+++ b/config/importmap.rb
@@ -2,6 +2,7 @@
 
 pin "application", preload: true
 pin "loading_spinner", preload: true
+pin "source_tabs", preload: true
 pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
 pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true

From 8c20cf5035b2dceea4789fa8b7b19f6a27817e45 Mon Sep 17 00:00:00 2001
From: djanelle-mit <djanelle@mit.edu>
Date: Tue, 25 Nov 2025 09:52:59 -0500
Subject: [PATCH 05/12] Introduced more button and menu that appears when tabs
 overflow

---
 .../stylesheets/partials/_source_tabs.scss    | 48 ++++++++++-
 app/javascript/source_tabs.js                 | 79 +++++++++++++++++++
 2 files changed, 126 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/partials/_source_tabs.scss b/app/assets/stylesheets/partials/_source_tabs.scss
index 3c7c6be6..12ae3e93 100644
--- a/app/assets/stylesheets/partials/_source_tabs.scss
+++ b/app/assets/stylesheets/partials/_source_tabs.scss
@@ -4,6 +4,7 @@
 
 #tabs {
   margin-top: 0;
+  position: relative;
 
   // Graceful degradation when JS is not enabled
   &:not(.has-js) {
@@ -11,6 +12,7 @@
     -webkit-overflow-scrolling: touch;  
   }
 
+  // Display styles for the main tab bar
   ul.primary {
     list-style-type: none;
     padding: 0;
@@ -19,7 +21,15 @@
     gap: 4px;
   }
 
-  a {
+  li {
+
+    &.--hidden {
+      display: none;
+    }
+
+  }
+
+  a, button {
     padding: 12px 20px 16px;
     background-color: transparent;
     display: inline-block;
@@ -46,7 +56,43 @@
       }
     }
 
+  }
+
+  // Swap the icon to chevron-up when menu is open
+  button[aria-expanded="true"] {
+  
+    i::before {
+      content: '\f077';
+    }
+
+  }
+
+  // Display styles for the dropdown menu under the "More" button
+  ul.-secondary {
+    width: 100%;
+    display: none;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    z-index: 999;
+
+    li {
+      width: 100%;
+
+      a {
+        background-color: $color-gray-950;
+        width: 100%;
+      }
+
+    }
+
+  }
 
+  &.--show-secondary .-secondary {
+    display: block;
   }
 
 }
\ No newline at end of file
diff --git a/app/javascript/source_tabs.js b/app/javascript/source_tabs.js
index e69de29b..6e7fd067 100644
--- a/app/javascript/source_tabs.js
+++ b/app/javascript/source_tabs.js
@@ -0,0 +1,79 @@
+const container = document.querySelector('#tabs')
+const primary = container.querySelector('.primary')
+const primaryItems = container.querySelectorAll('.primary > li:not(.-more)')
+container.classList.add('has-js')
+
+// insert "more" button and duplicate the list
+
+primary.insertAdjacentHTML('beforeend', `
+  <li class="-more">
+    <button type="button" aria-haspopup="true" aria-expanded="false">
+      More <i class="fa-light fa-chevron-down"></i>
+    </button>
+    <ul class="-secondary">
+      ${primary.innerHTML}
+    </ul>
+  </li>
+`)
+const secondary = container.querySelector('.-secondary')
+const secondaryItems = secondary.querySelectorAll('li')
+const allItems = container.querySelectorAll('li')
+const moreLi = primary.querySelector('.-more')
+const moreBtn = moreLi.querySelector('button')
+moreBtn.addEventListener('click', (e) => {
+  e.preventDefault()
+  container.classList.toggle('--show-secondary')
+  moreBtn.setAttribute('aria-expanded', container.classList.contains('--show-secondary'))
+})
+
+// adapt tabs
+
+const doAdapt = () => {
+  // reveal all items for the calculation
+  allItems.forEach((item) => {
+    item.classList.remove('--hidden')
+  })
+
+  // hide items that won't fit in the Primary
+  let stopWidth = moreBtn.offsetWidth
+  let hiddenItems = []
+  const primaryWidth = primary.offsetWidth
+  primaryItems.forEach((item, i) => {
+    if(primaryWidth >= stopWidth + item.offsetWidth) {
+      stopWidth += item.offsetWidth
+    } else {
+      item.classList.add('--hidden')
+      hiddenItems.push(i)
+    }
+  })
+  
+  // toggle the visibility of More button and items in Secondary
+  if(!hiddenItems.length) {
+    moreLi.classList.add('--hidden')
+    container.classList.remove('--show-secondary')
+    moreBtn.setAttribute('aria-expanded', false)
+  }
+  else {  
+    secondaryItems.forEach((item, i) => {
+      if(!hiddenItems.includes(i)) {
+        item.classList.add('--hidden')
+      }
+    })
+  }
+}
+
+doAdapt() // adapt immediately on load
+window.addEventListener('resize', doAdapt) // adapt on window resize
+
+// hide Secondary on the outside click
+document.addEventListener('click', (e) => {
+  let el = e.target
+  while(el) {
+    if(el === moreBtn) {
+      return;
+    }
+    el = el.parentNode
+  }
+  container.classList.remove('--show-secondary')
+  moreBtn.setAttribute('aria-expanded', false)
+})
\ No newline at end of file

From 714174069adca42e1a089cdfca31568abe4c5323 Mon Sep 17 00:00:00 2001
From: djanelle-mit <djanelle@mit.edu>
Date: Tue, 25 Nov 2025 10:23:49 -0500
Subject: [PATCH 06/12] Stop loading spinner from firing on every element click
 in tab bar

---
 app/javascript/loading_spinner.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/javascript/loading_spinner.js b/app/javascript/loading_spinner.js
index 2626047e..0d2655fb 100644
--- a/app/javascript/loading_spinner.js
+++ b/app/javascript/loading_spinner.js
@@ -68,6 +68,10 @@ document.addEventListener('click', function(event) {
 
   // Handle tab clicks
   if (clickedElement.closest('.tab-navigation')) {
+
+    // If the element is NOT a link, don't show the spinner
+    if (clickedElement.nodeName !== "A") { return; }
+
     const clickedParams = new URLSearchParams(clickedElement.search);
     const newTab = clickedParams.get('tab');
 

From b5c87f5b9def025a966afc9878d9065ab0b5d187 Mon Sep 17 00:00:00 2001
From: djanelle-mit <djanelle@mit.edu>
Date: Tue, 25 Nov 2025 10:35:45 -0500
Subject: [PATCH 07/12] Accessible markup additions and hover state for menu

---
 app/assets/stylesheets/partials/_source_tabs.scss | 5 +++++
 app/javascript/source_tabs.js                     | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/partials/_source_tabs.scss b/app/assets/stylesheets/partials/_source_tabs.scss
index 12ae3e93..bcd049d7 100644
--- a/app/assets/stylesheets/partials/_source_tabs.scss
+++ b/app/assets/stylesheets/partials/_source_tabs.scss
@@ -85,6 +85,11 @@
       a {
         background-color: $color-gray-950;
         width: 100%;
+
+        &:hover {
+          border-color: $color-gray-950;
+          background-color: $color-gray-900;
+        }
       }
 
     }
diff --git a/app/javascript/source_tabs.js b/app/javascript/source_tabs.js
index 6e7fd067..08b304ff 100644
--- a/app/javascript/source_tabs.js
+++ b/app/javascript/source_tabs.js
@@ -7,10 +7,10 @@ container.classList.add('has-js')
 
 primary.insertAdjacentHTML('beforeend', `
   <li class="-more">
-    <button type="button" aria-haspopup="true" aria-expanded="false">
+    <button type="button" aria-haspopup="true" aria-expanded="false" aria-controls="more-options">
       More <i class="fa-light fa-chevron-down"></i>
     </button>
-    <ul class="-secondary">
+    <ul class="-secondary" id="more-options" aria-label="More options">
       ${primary.innerHTML}
     </ul>
   </li>

From ba19d826f7509a6db974e92a2ee862c2dac46496 Mon Sep 17 00:00:00 2001
From: djanelle-mit <djanelle@mit.edu>
Date: Tue, 25 Nov 2025 10:39:55 -0500
Subject: [PATCH 08/12] Comments in JS file

---
 app/javascript/source_tabs.js | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/app/javascript/source_tabs.js b/app/javascript/source_tabs.js
index 08b304ff..83e0ba72 100644
--- a/app/javascript/source_tabs.js
+++ b/app/javascript/source_tabs.js
@@ -1,10 +1,17 @@
+// ===========================================================================
+// RESPONSIVE TAB BAR LOGIC WITH GRACEFUL DEGRADATION
+// Source: https://css-tricks.com/container-adapting-tabs-with-more-button/
+// ===========================================================================
+
+// Store references to relevant selectors
 const container = document.querySelector('#tabs')
 const primary = container.querySelector('.primary')
 const primaryItems = container.querySelectorAll('.primary > li:not(.-more)')
-container.classList.add('has-js')
 
-// insert "more" button and duplicate the list
+// Add a class to turn off graceful degradation style
+container.classList.add('has-js')
 
+// insert "more" button and duplicate the original tab bar items
 primary.insertAdjacentHTML('beforeend', `
   <li class="-more">
     <button type="button" aria-haspopup="true" aria-expanded="false" aria-controls="more-options">
@@ -20,6 +27,8 @@ const secondaryItems = secondary.querySelectorAll('li')
 const allItems = container.querySelectorAll('li')
 const moreLi = primary.querySelector('.-more')
 const moreBtn = moreLi.querySelector('button')
+
+// When the more button is clicked, toggle classes to indicate the secondary menu is open
 moreBtn.addEventListener('click', (e) => {
   e.preventDefault()
   container.classList.toggle('--show-secondary')
@@ -27,14 +36,14 @@ moreBtn.addEventListener('click', (e) => {
 })
 
 // adapt tabs
-
 const doAdapt = () => {
+
   // reveal all items for the calculation
   allItems.forEach((item) => {
     item.classList.remove('--hidden')
   })
 
-  // hide items that won't fit in the Primary
+  // hide items that won't fit in the Primary tab bar
   let stopWidth = moreBtn.offsetWidth
   let hiddenItems = []
   const primaryWidth = primary.offsetWidth
@@ -47,7 +56,7 @@ const doAdapt = () => {
     }
   })
   
-  // toggle the visibility of More button and items in Secondary
+  // toggle the visibility of More button and items in Secondary menu
   if(!hiddenItems.length) {
     moreLi.classList.add('--hidden')
     container.classList.remove('--show-secondary')
@@ -62,10 +71,11 @@ const doAdapt = () => {
   }
 }
 
-doAdapt() // adapt immediately on load
-window.addEventListener('resize', doAdapt) // adapt on window resize
+// Adapt the tabs to fit the viewport
+doAdapt() // immediately on load
+window.addEventListener('resize', doAdapt) // on window resize
 
-// hide Secondary on the outside click
+// hide Secondary menu on the outside click
 document.addEventListener('click', (e) => {
   let el = e.target
   while(el) {

From 0e0874b64ce9467ad7a96d510d99bdd09d9416aa Mon Sep 17 00:00:00 2001
From: djanelle-mit <djanelle@mit.edu>
Date: Wed, 26 Nov 2025 10:29:13 -0500
Subject: [PATCH 09/12] Renaming tabs to match UXWS provided language

---
 app/views/search/_source_tabs.html.erb | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/views/search/_source_tabs.html.erb b/app/views/search/_source_tabs.html.erb
index 2f2f9315..87c33108 100644
--- a/app/views/search/_source_tabs.html.erb
+++ b/app/views/search/_source_tabs.html.erb
@@ -4,11 +4,11 @@
       <li><%= link_to_tab("All") %></li>
 
       <% if Feature.enabled?(:tab_primo_all) %>
-        <li><%= link_to_tab("Primo", "Articles and Catalog") %></li>
+        <li><%= link_to_tab("Primo", "Books") %></li>
       <% end %>
 
       <li><%= link_to_tab("cdi", "Articles") %></li>
-      <li><%= link_to_tab("alma", "Catalog") %></li>
+      <li><%= link_to_tab("alma", "Books") %></li>
 
       <% if Feature.enabled?(:tab_timdex_all) %>
         <li><%= link_to_tab("TIMDEX") %></li>
@@ -16,8 +16,8 @@
       <% if Feature.enabled?(:tab_timdex_alma) %>
         <li><%= link_to_tab("timdex_alma", "Alma (TIMDEX)") %></li>
       <% end %>
+      <li><%= link_to_tab("aspace", "MIT archives") %></li>
       <li><%= link_to_tab("Website") %></li>
-      <li><%= link_to_tab("aspace", "Archival materials") %></li>
     </ul>
   </nav>
   
\ No newline at end of file

From 1f4be6ed82b965cf8bd365253f92c01342935d8c Mon Sep 17 00:00:00 2001
From: djanelle-mit <djanelle@mit.edu>
Date: Wed, 26 Nov 2025 11:09:51 -0500
Subject: [PATCH 10/12] Fixing incorrect name of All Primo tab

---
 app/views/search/_source_tabs.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/search/_source_tabs.html.erb b/app/views/search/_source_tabs.html.erb
index 87c33108..b3f23225 100644
--- a/app/views/search/_source_tabs.html.erb
+++ b/app/views/search/_source_tabs.html.erb
@@ -4,7 +4,7 @@
       <li><%= link_to_tab("All") %></li>
 
       <% if Feature.enabled?(:tab_primo_all) %>
-        <li><%= link_to_tab("Primo", "Books") %></li>
+        <li><%= link_to_tab("Primo", "Articles and Catalog") %></li>
       <% end %>
 
       <li><%= link_to_tab("cdi", "Articles") %></li>

From b28fefb2fbdb7e1f038f1706f604ad2f8ea3d4c4 Mon Sep 17 00:00:00 2001
From: djanelle-mit <djanelle@mit.edu>
Date: Wed, 26 Nov 2025 11:10:46 -0500
Subject: [PATCH 11/12] Updating name of Alma to Books and media

---
 app/views/search/_source_tabs.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/search/_source_tabs.html.erb b/app/views/search/_source_tabs.html.erb
index b3f23225..52033a61 100644
--- a/app/views/search/_source_tabs.html.erb
+++ b/app/views/search/_source_tabs.html.erb
@@ -8,7 +8,7 @@
       <% end %>
 
       <li><%= link_to_tab("cdi", "Articles") %></li>
-      <li><%= link_to_tab("alma", "Books") %></li>
+      <li><%= link_to_tab("alma", "Books and media") %></li>
 
       <% if Feature.enabled?(:tab_timdex_all) %>
         <li><%= link_to_tab("TIMDEX") %></li>

From 18cb587b06cc8495b0a0559aa572ca4457c8b3c9 Mon Sep 17 00:00:00 2001
From: djanelle-mit <djanelle@mit.edu>
Date: Mon, 1 Dec 2025 09:44:54 -0500
Subject: [PATCH 12/12] Switching to loading JS conditionally when tabs are
 loaded

---
 app/javascript/application.js          | 1 -
 app/views/search/_source_tabs.html.erb | 2 ++
 config/importmap.rb                    | 1 -
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/application.js b/app/javascript/application.js
index ad1461bf..b3e67a5a 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -2,7 +2,6 @@
 import "@hotwired/turbo-rails"
 import "controllers"
 import "loading_spinner"
-import "source_tabs"
 
 // Show the progress bar after 200 milliseconds, not the default 500
 Turbo.config.drive.progressBarDelay = 200;
\ No newline at end of file
diff --git a/app/views/search/_source_tabs.html.erb b/app/views/search/_source_tabs.html.erb
index 52033a61..1724a102 100644
--- a/app/views/search/_source_tabs.html.erb
+++ b/app/views/search/_source_tabs.html.erb
@@ -20,4 +20,6 @@
       <li><%= link_to_tab("Website") %></li>
     </ul>
   </nav>
+
+  <%= javascript_include_tag "source_tabs" %>
   
\ No newline at end of file
diff --git a/config/importmap.rb b/config/importmap.rb
index cbd365c1..672f444c 100644
--- a/config/importmap.rb
+++ b/config/importmap.rb
@@ -2,7 +2,6 @@
 
 pin "application", preload: true
 pin "loading_spinner", preload: true
-pin "source_tabs", preload: true
 pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
 pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true