#13227

pending completion

Build # #13227

Build Type

push

circleci

Committed by

flozia

Commit Message

chore: Add inline comments

Run Details

282 of 1677 branches covered (16.82%)

Branch coverage included in aggregate %.

959 of 4545 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/section-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 classNameToObserve = 'section-transition'
const classNameEntered = `${classNameToObserve}-entered`
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.classList.add(classNameEntered)
}

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

function handleScroll (entries) {
  entries.forEach(entry => {
    const sectionElement = entry.target
    const hasEntered = sectionElement.classList.contains(classNameEntered)

    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

  // Handle the following edge case: A user has the Monitor landing page open
  // and is setting their preferences.
  const sections = document.getElementsByClassName(classNameToObserve)
  mediaQuery.addEventListener('change', () => {
    [...sections].forEach(section => section.classList.add(classNameEntered))
  })

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

mozilla / blurts-server / #13227

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