cdlib · JoelCDL · Sep 9, 2022 · May 20, 2020 · May 20, 2020 · May 20, 2020
diff --git a/elements/1-pages/searchresults.hbs b/elements/1-pages/searchresults.hbs
@@ -6,7 +6,6 @@
     {{ render '@refine' }}
   </aside>
   <main id="maincontent">
-    {{ render '@filter' }}
     {{ render '@records' }}
     {{ render '@searchresult' }}
     {{ render '@pagination' }}

diff --git a/elements/3-components/filter.config.js b/elements/3-components/filter.config.js
diff --git a/elements/3-components/filter.hbs b/elements/3-components/filter.hbs
diff --git a/elements/3-components/header.hbs b/elements/3-components/header.hbs
@@ -1,21 +1,19 @@
-<header class="c-header" v-onmedia.screen2="detectMediaQuery2">
+<header class="c-header">
   <a class="c-header__logo" href="">
     <img src="{{ path '/ui-assets/images/logo-cdl.svg' }}" alt="California Digital Library logo">
   </a>
-  <div class="c-header__controls" v-if="!$mq.screen2" v-cloak>
-    <button class="o-button1" v-on:click="headerToggle1" aria-label="search"></button>
-    <button class="o-button3" v-on:click="headerToggle3" aria-label="menu"></button>
+  <div class="c-header__controls js-header__controls" hidden>
+    <button class="js-header__search-control o-button1" aria-label="show search"></button>
+    <button class="js-header__menu-control o-button3" aria-label="menu"></button>
   </div>
-  <transition name="c-header__offscreen">
-    <div class="c-header__search" v-if="isOpen1" v-cloak>
-      {{ render '@search' }}
-      <button class="o-button2" v-on:click="headerToggle2" v-if="!$mq.screen2" aria-label="close search"></button>
-    </div>
-  </transition>
-  <div class="c-header__header-nav" v-if="isOpen2" v-cloak>
+  <div class="c-header__search js-header__search is-open">
+    {{ render '@search' }}
+    <button class="c-header__close-search js-header__close-search o-button2" aria-label="hide search" hidden></button>
+  </div>
+  <div class="c-header__header-nav js-header__header-nav is-open">
   {{ render '@headernav' }}
   </div>
-  <div class="c-header__utility-nav" v-if="isOpen2" v-cloak>
+  <div class="c-header__utility-nav js-header__utility-nav is-open">
     {{ render '@utilitynav' }}
   </div>
 </header>
diff --git a/elements/3-components/search.config.js b/elements/3-components/search.config.js
@@ -17,11 +17,11 @@ module.exports = {
     },
     label: {
       exists: true,
-      for: 'c-header-search-field',
+      for: 'c-search-field',
       text: 'Search the California Digital Library'
     },
     input1: {
-      id: 'c-header-search-field',
+      id: 'c-search-field',
       type: 'search',
       list: 'c-search-list',
       name: 's',

diff --git a/elements/3-components/secondarynav.hbs b/elements/3-components/secondarynav.hbs
@@ -1,12 +1,12 @@
-<nav aria-labelledby="secondarynav-heading" class="c-secondarynav o-sidebarnav" v-onmedia.screen2="detectMediaQuery">
+<nav aria-labelledby="secondarynav-heading" class="c-secondarynav o-sidebarnav">
   <header>
     {{> @heading }}
-    <template v-if="!$mq.screen2">
-      <button aria-label="close navigation menu" aria-expanded="true" class="o-button5" v-on:click="toggle1" v-if="isDisplayed">{{ secondarynav.closeButtonText }}</button>
-      <button aria-label="open navigation menu" aria-expanded="false" class="o-button6" v-on:click="toggle1" v-if="!isDisplayed">{{ secondarynav.openButtonText }}</button>
-    </template>
+    <div class="c-secondarynav__buttons js-secondarynav__buttons">
+      <button aria-label="close navigation menu" aria-expanded="true" class="c-secondarynav__close-button js-secondarynav__close-button o-button5">{{ secondarynav.closeButtonText }}</button>
+      <button aria-label="open navigation menu" aria-expanded="false" class="c-secondarynav__open-button js-secondarynav__open-button o-button6 is-shown">{{ secondarynav.openButtonText }}</button>
+    </div>
   </header>
-  <div v-if="isDisplayed" v-cloak>
+  <div class="c-secondarynav__body js-secondarynav__body is-open">
     <ul>
       <li>{{> @link }}
         <ul>

diff --git a/elements/_template-default.hbs b/elements/_template-default.hbs
@@ -17,12 +17,7 @@
   </style>
 </head>
 <body>
-  <div id="app">
-    {{{ yield }}}
-  </div>
-  <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.1/client/core.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue-match-media@1.0.2/dist/index.min.js"></script>
+  {{{ yield }}}
   <script src="https://cdn.jsdelivr.net/npm/details-element-polyfill@2.0.3/dist/details-element-polyfill.min.js"></script>
   <script src="{{ path '/ui-assets/js/main.js' }}"></script>
  </body>

diff --git a/elements/_template-page.hbs b/elements/_template-page.hbs
@@ -16,12 +16,7 @@
   </style>
 </head>
 <body>
-  <div id="app">
-    {{{ yield }}}
-  </div>
-  <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.1/client/core.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue-match-media@1.0.2/dist/index.min.js"></script>
+  {{{ yield }}}
   <script src="https://cdn.jsdelivr.net/npm/details-element-polyfill@2.0.3/dist/details-element-polyfill.min.js"></script>
   <script src="{{ path '/ui-assets/js/main.js' }}"></script>
  </body>

diff --git a/js/1-toggles.js b/js/1-toggles.js
diff --git a/js/headernav.js b/js/headernav.js
@@ -2,10 +2,9 @@
 
 document.addEventListener('DOMContentLoaded', function () {
   if (document.querySelector('.c-headernav')) {
-    var subMenuItems = document.querySelectorAll('.c-headernav > ul > li.menu-item-has-children')
-    var allMenuItems = document.querySelectorAll('.c-headernav > ul > li');
+    const allMenuItems = document.querySelectorAll('.c-headernav > ul > li');
 
-    [].forEach.call(subMenuItems, function (el) {
+    [].forEach.call(allMenuItems, function (el) {
       document.querySelector('.c-headernav').classList.remove('c-headernav-no-js')
       document.querySelector('.c-headernav').classList.add('c-headernav-js')
       el.querySelector('a').setAttribute('aria-haspopup', 'true')

diff --git a/js/main.js b/js/main.js
@@ -1,5 +1,6 @@
-import './1-toggles.js'
 import './headernav.js'
+import './mediaqueries.js'
 import './newsreel.js'
 import './sidebarposts.js'
 import './slideshow.js'
+import './toggles.js'
diff --git a/js/mediaqueries.js b/js/mediaqueries.js
@@ -0,0 +1,59 @@
+// Media Queries //
+
+const secondaryNavButtons = document.querySelector('.js-secondarynav__buttons')
+const secondaryNavCloseButton = document.querySelector('.js-secondarynav__close-button')
+const secondaryNavOpenButton = document.querySelector('.js-secondarynav__open-button')
+const secondaryNavBody = document.querySelector('.js-secondarynav__body')
+const headerControls = document.querySelector('.js-header__controls')
+const headerMenuControl = document.querySelector('.js-header__menu-control')
+const headerSearch = document.querySelector('.js-header__search')
+const headerCloseSearch = document.querySelector('.js-header__close-search')
+const headerMainNav = document.querySelector('.js-header__header-nav')
+const headerUtilNav = document.querySelector('.js-header__utility-nav')
+const screen2 = window.matchMedia('(min-width: 760px)')
+
+function secondaryNavComp (screenWidth) {
+  if (screenWidth.matches) {
+    secondaryNavButtons.classList.remove('is-open')
+    secondaryNavCloseButton.classList.add('is-shown')
+    secondaryNavOpenButton.classList.remove('is-shown')
+    secondaryNavBody.classList.add('is-open')
+  } else {
+    secondaryNavButtons.classList.add('is-open')
+    secondaryNavCloseButton.classList.remove('is-shown')
+    secondaryNavOpenButton.classList.add('is-shown')
+    secondaryNavBody.classList.remove('is-open')
+  }
+}
+
+function headerComp (screenWidth) {
+  if (screenWidth.matches) {
+    headerMenuControl.setAttribute('aria-expanded', true)
+    headerSearch.classList.add('is-open')
+    headerMainNav.classList.add('is-open')
+    headerUtilNav.classList.add('is-open')
+  } else {
+    headerMenuControl.setAttribute('aria-expanded', false)
+    headerSearch.classList.remove('is-open')
+    headerMainNav.classList.remove('is-open')
+    headerUtilNav.classList.remove('is-open')
+  }
+}
+
+// Secondary Nav Component
+
+if (document.querySelector('.c-secondarynav')) {
+  secondaryNavComp(screen2)
+  screen2.addListener(secondaryNavComp)
+}
+
+// Header Component
+
+if (document.querySelector('.c-header')) {
+  // prepare for JS:
+  headerControls.removeAttribute('hidden')
+  headerCloseSearch.removeAttribute('hidden')
+
+  headerComp(screen2)
+  screen2.addListener(headerComp)
+}
diff --git a/js/newsreel.js b/js/newsreel.js
@@ -1,45 +1,48 @@
 // ***** Newsreel Component ***** //
 
-function goToItem (n) {
-  items[currentItem].removeAttribute('aria-current')
-  newsreelLinks[currentItem].setAttribute('tabindex', -1)
-  currentItem = (n + items.length) % items.length
-  newsreelLinks[currentItem].setAttribute('tabindex', 0)
-  items[currentItem].setAttribute('aria-current', 'true')
+const items = document.querySelectorAll('.c-newsreel li')
+const newsreelLinks = document.querySelectorAll('.c-newsreel a')
+const firstItem = document.querySelector('.c-newsreel li:first-child')
+const reelSpeed = 7000
+const playControl = document.querySelector('.c-newsreel__play')
+const pauseControl = document.querySelector('.c-newsreel__pause')
+const tabControl = document.querySelector('.c-newsreel li a')
+let currentItem = 0
+
+for (let i = 0; i < newsreelLinks.length; i++) {
+  newsreelLinks[i].setAttribute('tabindex', -1)
 }
 
-function playNewsreel () {
-  itemInterval = setInterval(nextItem, reelSpeed)
+if (document.querySelector('.c-newsreel')) {
+  // set initial states:
   playControl.style.display = 'none'
-  pauseControl.style.display = 'inline-block'
-}
+  firstItem.setAttribute('aria-current', 'true')
 
-function pauseNewsreel () {
-  clearInterval(itemInterval)
-  playControl.style.display = 'inline-block'
-  pauseControl.style.display = 'none'
-}
+  // start newsreel:
+  let itemInterval = setInterval(nextItem, reelSpeed)
 
-function nextItem () {
-  goToItem(currentItem + 1)
-}
+  function goToItem (n) {
+    items[currentItem].removeAttribute('aria-current')
+    newsreelLinks[currentItem].setAttribute('tabindex', -1)
+    currentItem = (n + items.length) % items.length
+    newsreelLinks[currentItem].setAttribute('tabindex', 0)
+    items[currentItem].setAttribute('aria-current', 'true')
+  }
 
-if (document.querySelector('.c-newsreel')) {
-  var items = document.querySelectorAll('.c-newsreel li')
-  var newsreelLinks = document.querySelectorAll('.c-newsreel a')
-  var firstItem = document.querySelector('.c-newsreel li:first-child')
-  var currentItem = 0
-  var reelSpeed = 7000
-  var itemInterval = setInterval(nextItem, reelSpeed)
-  var playControl = document.querySelector('.c-newsreel__play')
-  var pauseControl = document.querySelector('.c-newsreel__pause')
-  var tabControl = document.querySelector('.c-newsreel li a')
-
-  // initial states:
-  playControl.style.display = 'none'
-  firstItem.setAttribute('aria-current', 'true')
-  for (var i = 0; i < newsreelLinks.length; i++) {
-    newsreelLinks[i].setAttribute('tabindex', -1)
+  function playNewsreel () {
+    itemInterval = setInterval(nextItem, reelSpeed)
+    playControl.style.display = 'none'
+    pauseControl.style.display = 'inline-block'
+  }
+
+  function pauseNewsreel () {
+    clearInterval(itemInterval)
+    playControl.style.display = 'inline-block'
+    pauseControl.style.display = 'none'
+  }
+
+  function nextItem () {
+    goToItem(currentItem + 1)
   }
 
   playControl.onclick = function () {