• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

mozilla / blurts-server / #13236

pending completion
#13236

push

circleci

flozia
chore: Use data attribute and CSS animations for entering transitions

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
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
}
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc