#13236

pending completion

Build # #13236

Build Type

push

circleci

Committed by

flozia

Commit Message

chore: Use data attribute and CSS animations for entering transitions

Run Details

282 of 1677 branches covered (16.82%)

Branch coverage included in aggregate %.

5 of 5 new or added lines in 1 file covered. (100.0%)

959 of 4544 relevant lines covered (21.1%)

1.76 hits per line

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

0.0

/src/client/js/transition-observer.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/. */

const queueIntervalDuration = 150

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

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 => {
    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]')

  // Handle the following edge case: A user has the Monitor landing page open
  // and is setting their preferences.
  mediaQuery.addEventListener('change', () => {
    [...sections].forEach(section => {
      section.dataset.enterTransition = 'visible'
    })
  })

  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	const queueIntervalDuration = 150	×
6
7	// percentage a section that has to be in view in order to appear
8	const sectionThreshold = 0.1	×
9
10	let observers
11	let queueInterval
12	// holds the sections so they can appear one after another
13	const entryQueue = []	×
14
15	function handleShowSection () {
16	if (!entryQueue.length && queueInterval) {	×
17	clearInterval(queueInterval)	×
18	queueInterval = null	×
19	return	×
20	}
21
22	const nextEntry = entryQueue.shift()	×
23	nextEntry.target.dataset.enterTransition = 'visible'	×
24	}
25
26	function setQueueInterval () {
27	queueInterval = setInterval(handleShowSection, queueIntervalDuration)	×
28	}
29
30	function handleScroll (entries) {
31	entries.forEach(entry => {	×
32	const sectionElement = entry.target	×
33	const hasEntered = sectionElement.getAttribute('data-enter-transition') === 'visible'	×
34
35	if (hasEntered) {	×
36	return	×
37	}
38
39	const isInViewport = entry.isIntersecting	×
40	if (isInViewport) {	×
41	entryQueue.push(entry)	×
42	}
43
44	if (!queueInterval) {	×
45	setQueueInterval()	×
46	}
47	})
48	}
49
50	function init (sections) {
51	const observer = new IntersectionObserver(handleScroll, {	×
52	threshold: sectionThreshold
53	})
54
55	observers = [...sections].map(section => {	×
56	observer.observe(section)	×
57	return observer	×
58	})
59
60	setQueueInterval()	×
61	}
62
63	if (!observers) {	×
64	const mediaQuery = window.matchMedia('(prefers-reduced-motion: no-preference)')	×
65	const allowMotion = mediaQuery && mediaQuery.matches	×
66
67	const sections = document.querySelectorAll('[data-enter-transition]')	×
68
69	// Handle the following edge case: A user has the Monitor landing page open
70	// and is setting their preferences.
71	mediaQuery.addEventListener('change', () => {	×
72	[...sections].forEach(section => {	×
73	section.dataset.enterTransition = 'visible'	×
74	})
75	})
76
77	if (allowMotion) {	×
78	init(sections)	×
79	}
80	}

mozilla / blurts-server / #13236

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