#13322

pending completion

Build # #13322

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #3001 from mozilla/main

Merge `main` into `localization`

Run Details

282 of 1768 branches covered (15.95%)

Branch coverage included in aggregate %.

451 of 451 new or added lines in 56 files covered. (100.0%)

959 of 4670 relevant lines covered (20.54%)

1.72 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/client/js/transitionObserver.js

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

// percentage a section that has to be in view in order to appear
const sectionThreshold = 0.1
const queueIntervalDuration = 150

let observers
let queueInterval
// holds the sections so they can appear one after another
const entryQueue = []

function handleShowSection () {
  if (!entryQueue.length && queueInterval) {
    clearInterval(queueInterval)
    queueInterval = null
    return
  }

  const nextEntry = entryQueue.shift()
  nextEntry.target.dataset.enterTransition = 'visible'
}

function setQueueInterval () {
  queueInterval = setInterval(handleShowSection, queueIntervalDuration)
}

function handleScroll (entries) {
  entries.forEach(entry => {
    const sectionElement = entry.target
    const hasEntered = sectionElement.getAttribute('data-enter-transition') === 'visible'

    if (hasEntered) {
      return
    }

    const isInViewport = entry.isIntersecting
    if (isInViewport) {
      entryQueue.push(entry)
    }

    if (!queueInterval) {
      setQueueInterval()
    }
  })
}

function init (sections) {
  const observer = new IntersectionObserver(handleScroll, {
    threshold: sectionThreshold
  })

  observers = [...sections].map(section => {
    section.dataset.enterTransition = 'entering'

    observer.observe(section)
    return observer
  })

  setQueueInterval()
}

if (!observers) {
  const mediaQuery = window.matchMedia('(prefers-reduced-motion: no-preference)')
  const allowMotion = mediaQuery && mediaQuery.matches

  const sections = document.querySelectorAll('[data-enter-transition]')

  // Don’t hide elements that are marked for entering transitions
  // while users set their motion preferences.
  mediaQuery.addEventListener('change', () => {
    const documentStyle = document.documentElement.style
    documentStyle.setProperty('--enter-transition-opacity', '1')
    documentStyle.setProperty('--enter-transition-y', '0')
  })

  if (allowMotion) {
    init(sections)
  }
}

1	/* This Source Code Form is subject to the terms of the Mozilla Public
2	* License, v. 2.0. If a copy of the MPL was not distributed with this
3	* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5	// percentage a section that has to be in view in order to appear
6	const sectionThreshold = 0.1	×
7	const queueIntervalDuration = 150	×
8
9	let observers
10	let queueInterval
11	// holds the sections so they can appear one after another
12	const entryQueue = []	×
13
14	function handleShowSection () {
15	if (!entryQueue.length && queueInterval) {	×
16	clearInterval(queueInterval)	×
17	queueInterval = null	×
18	return	×
19	}
20
21	const nextEntry = entryQueue.shift()	×
22	nextEntry.target.dataset.enterTransition = 'visible'	×
23	}
24
25	function setQueueInterval () {
26	queueInterval = setInterval(handleShowSection, queueIntervalDuration)	×
27	}
28
29	function handleScroll (entries) {
30	entries.forEach(entry => {	×
31	const sectionElement = entry.target	×
32	const hasEntered = sectionElement.getAttribute('data-enter-transition') === 'visible'	×
33
34	if (hasEntered) {	×
35	return	×
36	}
37
38	const isInViewport = entry.isIntersecting	×
39	if (isInViewport) {	×
40	entryQueue.push(entry)	×
41	}
42
43	if (!queueInterval) {	×
44	setQueueInterval()	×
45	}
46	})
47	}
48
49	function init (sections) {
50	const observer = new IntersectionObserver(handleScroll, {	×
51	threshold: sectionThreshold
52	})
53
54	observers = [...sections].map(section => {	×
55	section.dataset.enterTransition = 'entering'	×
56
57	observer.observe(section)	×
58	return observer	×
59	})
60
61	setQueueInterval()	×
62	}
63
64	if (!observers) {	×
65	const mediaQuery = window.matchMedia('(prefers-reduced-motion: no-preference)')	×
66	const allowMotion = mediaQuery && mediaQuery.matches	×
67
68	const sections = document.querySelectorAll('[data-enter-transition]')	×
69
70	// Don’t hide elements that are marked for entering transitions
71	// while users set their motion preferences.
72	mediaQuery.addEventListener('change', () => {	×
73	const documentStyle = document.documentElement.style	×
74	documentStyle.setProperty('--enter-transition-opacity', '1')	×
75	documentStyle.setProperty('--enter-transition-y', '0')	×
76	})
77
78	if (allowMotion) {	×
79	init(sections)	×
80	}
81	}

mozilla / blurts-server / #13322

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous