* Wait until the icon is visible in the viewport. * @param el - The element to observe. * @param rootMargin - The root margin of the observer. * @param cb - The callback to call when the element is visible.
(el: HTMLElement, rootMargin: string, cb: () => void)
| 129 | * @param cb - The callback to call when the element is visible. |
| 130 | */ |
| 131 | private waitUntilVisible(el: HTMLElement, rootMargin: string, cb: () => void) { |
| 132 | /** |
| 133 | * IntersectionObserver is a browser API that allows you to observe |
| 134 | * the visibility of an element relative to a root element. It is |
| 135 | * supported in all modern browsers, except IE and when server-side |
| 136 | * rendering. |
| 137 | */ |
| 138 | const hasIntersectionObserverSupport = Boolean( |
| 139 | Build.isBrowser && this.lazy && typeof window !== 'undefined' && window.IntersectionObserver, |
| 140 | ); |
| 141 | |
| 142 | /** |
| 143 | * browser doesn't support IntersectionObserver |
| 144 | * so just fallback to always show it |
| 145 | */ |
| 146 | if (!hasIntersectionObserverSupport) { |
| 147 | return cb(); |
| 148 | } |
| 149 | |
| 150 | const io = (this.io = new window.IntersectionObserver( |
| 151 | (data: IntersectionObserverEntry[]) => { |
| 152 | if (data[0].isIntersecting) { |
| 153 | io.disconnect(); |
| 154 | this.io = undefined; |
| 155 | cb(); |
| 156 | } |
| 157 | }, |
| 158 | { rootMargin }, |
| 159 | )); |
| 160 | |
| 161 | io.observe(el); |
| 162 | } |
| 163 | |
| 164 | /** |
| 165 | * Watch for changes to the icon name, src, icon, ios, or md properties. |