GOTH-623 (#315)

* refactor sticky header * destickify article newsletter * lazy load a few components * Lazy load logo collection * lazy load sidebar
nypublicradio · Sep 18, 2023 · 53d5687 · 53d5687
1 parent d74c46c
commit 53d5687
Show file tree

Hide file tree

Showing 17 changed files with 234 additions and 290 deletions.
diff --git a/components/ArticlePageHeader.vue b/components/ArticlePageHeader.vue
@@ -2,7 +2,6 @@
 import VFlexibleLink from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue'
 import VShareTools from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VShareTools.vue'
 import VShareToolsItem from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VShareToolsItem.vue'
-import { useCurrentHeaderAdHeight } from '~/composables/states'
 const { $analytics } = useNuxtApp()
 
 const props = defineProps({
@@ -35,18 +34,14 @@ const sidebarIsOpen = useSidebarIsOpen()
 const sidebarOpenedFrom = useSidebarOpenedFrom()
 const strapline = useStrapline()
 const progressPercentage = computed(() => `${props.progress}%`)
-const currentHeaderAdHeight = useCurrentHeaderAdHeight()
 const openSidebar = (e) => {
   sidebarIsOpen.value = true
   sidebarOpenedFrom.value = e.target
 }
 </script>
 
 <template>
-  <header
-    class="article-page-header"
-    :style="`top: ${currentHeaderAdHeight}px;`"
-  >
+  <header>
     <section class="article-page-header-progress">
       <div
         class="article-page-header-contents content py-0 my-3 flex align-items-center justify-content-between"
@@ -158,18 +153,24 @@ const openSidebar = (e) => {
 
 <style lang="scss">
 .article-page-header {
-  opacity: 0;
-  display: none;
-  width: 100%;
+  opacity: 1;
+  display: block;
+  width: 100vw;
   height: 68px;
-  position: fixed;
+  position: absolute;
   z-index: 1000;
-  top: 50px;
+  top: 0px;
+  left: -50vw;
   background: white;
+  transition: opacity  0.25s linear;
   @include media('>=md') {
-    top: 0px !important;
+    position: fixed;
+    left: 0;
   }
 }
+
+.article-page-header-enter-active, .article-page-header-leave-active { opacity: 0; }
+
 .article-page-header-progress {
   --progressPercentage: v-bind(progressPercentage);
   background: linear-gradient(

diff --git a/components/CenterFeature.vue b/components/CenterFeature.vue
@@ -97,7 +97,7 @@ const articlesSm = ref([
       </div>
       <div class="col-3 flex-order-3">
         <hr class="my-3 block xl:hidden" />
-        <horizontal-drag :items="articlesSm" v-slot="slotProps">
+        <lazy-horizontal-drag :items="articlesSm" v-slot="slotProps">
           <gothamist-card
             v-slot="card"
             :article="slotProps.item"
@@ -119,7 +119,7 @@ const articlesSm = ref([
               @link-click="$event => card.trackClick($event)"
             />
           </gothamist-card>
-        </horizontal-drag>
+        </lazy-horizontal-drag>
         <div class="block lg:hidden mb-4 xl:mb-7 m-auto mt-6">
           <HtlAd layout="rectangle" slot="htlad-gothamist_index_topper" />
         </div>

diff --git a/components/GothamistFooter.vue b/components/GothamistFooter.vue
@@ -43,7 +43,9 @@ const copyrightYear = ref(props.navigation.copyrightYear)
           <div class="block lg:hidden">
             <menu-list :navLinks="props.navigation.primaryFooterLinks" />
           </div>
-          <nypr-logos-bracket />
+          <LoadLazily>
+            <lazy-nypr-logos-bracket />
+          </LoadLazily>
         </div>
       </div>
       <hr class="w-full my-4" />

diff --git a/components/GothamistMainHeader.vue b/components/GothamistMainHeader.vue
@@ -4,21 +4,25 @@ import VFlexibleLink from '@nypublicradio/nypr-design-system-vue3/v2/src/compone
 
 defineProps<{
   isMinimized: boolean
-  isFixed?: boolean
   navigation: Navigation
   donateUrlBase: string
   utmCampaign: string
 }>()
+const emit = defineEmits(['visible','not-visible'])
 const currentSteamStation = useCurrentSteamStation()
 const { $analytics } = useNuxtApp()
 const sidebarIsOpen = useSidebarIsOpen()
 const sidebarOpenedFrom = useSidebarOpenedFrom()
 const strapline = await useStrapline()
-const currentHeaderAdHeight = useCurrentHeaderAdHeight()
 const openSidebar = (e) => {
   sidebarIsOpen.value = true
   sidebarOpenedFrom.value = e.target
 }
+const headerElement = ref(null)
+const onVisible = () => emit('visible')
+const onNotVisible = () => emit('not-visible')
+useVisibilityTracking(headerElement, onVisible, onNotVisible)
+
 const trackClick = (category, label) => {
   //emitted mobile menu click event
   $analytics.sendEvent('click_tracking', {
@@ -31,9 +35,8 @@ const trackClick = (category, label) => {
 
 <template>
   <header
+    ref="headerElement"
     class="gothamist-header"
-    :class="[{ 'is-fixed': isFixed }]"
-    :style="isFixed ? `top:${currentHeaderAdHeight}px;` : ``"
   >
     <div
       class="top flex justify-content-between align-items-center sm:align-items-end"
@@ -107,19 +110,6 @@ const trackClick = (category, label) => {
 
 <style lang="scss">
 .gothamist-header {
-  &.is-fixed {
-    opacity: 0;
-    display: none;
-    position: fixed;
-    left: 0;
-    right: 0;
-    z-index: 100;
-    background-color: var(--white);
-    top: 90px;
-    @include media('>=md') {
-      top: 0px !important;
-    }
-  }
   .top,
   .bottom {
     width: 100%;

diff --git a/components/HeaderScrollTrigger.vue b/components/HeaderScrollTrigger.vue
diff --git a/components/HorizontalDrag.vue b/components/HorizontalDrag.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { gsap } from 'gsap'
 import { Draggable } from '~/assets/gsap/Draggable.js'
 import { InertiaPlugin } from '~/assets/gsap/InertiaPlugin.js'
 import breakpoint from '@nypublicradio/nypr-design-system-vue3/src/assets/library/breakpoints.module.scss'
-import { ArticlePage } from '~~/composables/types/Page.js'
 
 const props = defineProps<{
   items: any[]
@@ -15,7 +14,7 @@ const dragBoundsRef = ref(null)
 const isMobile = ref(false)
 const unitMinWidth = 310
 const toDragWidth = ref(unitMinWidth * props.items.length)
-const toDragWidthPx = ref(toDragWidth.value + 'px')
+const toDragWidthPx = ref(`${toDragWidth.value}px`)
 
 onMounted(() => {
   // draggable setup

diff --git a/components/LeftFeature.vue b/components/LeftFeature.vue
@@ -101,7 +101,7 @@ props.collection.data?.[4] && articlesSm.value.push(normalizeArticlePage(props.c
               />
             </gothamist-card>
             <hr class="my-3" />
-            <horizontal-drag v-if="articlesSm" :items="articlesSm" v-slot="slotProps">
+            <lazy-horizontal-drag v-if="articlesSm" :items="articlesSm" v-slot="slotProps">
               <gothamist-card
                 v-slot="card"
                 :article="slotProps.item"
@@ -118,7 +118,7 @@ props.collection.data?.[4] && articlesSm.value.push(normalizeArticlePage(props.c
                   @link-click="$event => card.trackClick($event)"
                 />
               </gothamist-card>
-            </horizontal-drag>
+            </lazy-horizontal-drag>
           </div>
         </div>
       </div>

diff --git a/components/LoadLazily.vue b/components/LoadLazily.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  const props = withDefaults(defineProps<{
+    options?: {
+      root?: HTMLElement
+      rootMargin?: string
+      threshold?: number | number[]
+    }
+  }>(), {
+    options: {
+      root: null,
+      rootMargin: '1000px 0px 0px 0px',
+      threshold: 0
+    }
+  })
+  const element = ref(null)
+  const seen = ref(false)
+  const onVisible = () => {seen.value = true}
+const onNotVisible = () => { /*do nothing*/ }
+  useVisibilityTracking(element, onVisible, onNotVisible, props.options )
+</script>
+
+<template>
+  <div ref="element">
+    <div v-if="seen">
+      <slot/>
+    </div>
+  </div>
+</template>
diff --git a/components/NewsletterArticle.vue b/components/NewsletterArticle.vue
@@ -1,68 +1,14 @@
-<script setup>
-import { onMounted, onBeforeUnmount } from 'vue'
-import { gsap } from 'gsap'
-import { ScrollTrigger } from 'gsap/ScrollTrigger.js'
-import { useCurrentHeaderAdHeight } from '~/composables/states'
-
-const props = defineProps({
-  triggerID: {
-    type: String,
-    default: '',
-  },
-  pinEndTriggerID: {
-    type: String,
-    default: '',
-  },
-  pinStartTopOffset: {
-    type: String,
-    default: `68px`, // height of the header-ish
-  },
-})
-
-const newsletterElm = ref(null)
-const currentHeaderAdHeight = useCurrentHeaderAdHeight()
-const uid = 'pinnedNewsletterID'
+<script setup lang="ts">
 const emit = defineEmits(['submit'])
-
-onMounted(() => {
-  gsap.registerPlugin(ScrollTrigger)
-  setTimeout(() => {
-    // func for the scrollTrigger PIN on the newsletter
-    ScrollTrigger.create({
-      trigger: `#${props.triggerID}`,
-      id: uid,
-      pin: true,
-      start: `1px ${props.pinStartTopOffset}`,
-      endTrigger: `#${props.pinEndTriggerID}`,
-      end: `top 0%+=${newsletterElm.value.offsetHeight + 40}px`,
-      //markers: true,
-      pinSpacing: false,
-    })
-  }, 100)
-})
-
-onBeforeUnmount(() => {
-  ScrollTrigger.getById(uid).kill()
-})
-const refreshScrollTrigger = () => {
-  const scrollTriggerSelector = ScrollTrigger.getById(uid)
-  if (scrollTriggerSelector) {
-    scrollTriggerSelector.refresh()
-  }
-}
-watch(currentHeaderAdHeight, (height) => {
-  refreshScrollTrigger()
-})
 </script>
 
 <template>
-  <div ref="newsletterElm" class="newsletter-article">
+  <div class="newsletter-article">
     <newsletter-home
       source='gothamist_articleBody'
       @submit="emit('submit')"
       small
       :showBlurb="false"
-      showX
       altDesign
       outlined
       submitButtonIcon="pi-arrow-right"

diff --git a/composables/states.ts b/composables/states.ts
@@ -4,6 +4,7 @@ export const useSensitiveContent = () => useState<boolean>('sensitiveContent', (
 export const useSidebarIsOpen = () => useState<boolean>('sidebarIsOpen', () => false)
 export const useSidebarOpenedFrom = () => useState<HTMLElement>('sidebarOpenedFrom', () => null)
 export const useMembershipStatus = () => useState<string>('membershipStatus', () => 'status-unknown')
+export const useFixedHeaderVisible = () => useState<boolean>('fixedHeaderVisible', () => false)
 export const useNavigation = () => useState<Navigation>('navigation', () => ({
     id: 0,
     primaryNavigation: [],
@@ -69,12 +70,6 @@ const currentHeaderAdHeight = 0
  */
 export const useCurrentHeaderAdHeight = () => useState('useCurrentHeaderAdHeight', () => currentHeaderAdHeight)
 
-const isArticlePage = false
-/**
- * Global state for the current AD height. 
- */
-export const useIsArticlePage = () => useState('useIsArticlePage', () => isArticlePage)
-
 const currentSteamStation = 'wnyc-fm939'
 /**
  * Global state for the current streaming station.